Commit 3c32b590 authored by Matt Mascarenhas's avatar Matt Mascarenhas

hmml_to_html.c: Generate the Filter [#21]

parent 27143e29
This diff is collapsed.
.title.riscy,
.title.riscy > .menu .refs,
.title.riscy > .menu .filter,
.title.riscy > .menu .filter_container,
.title.riscy > .menu > .refs .ref,
.title.riscy > .menu > .filter .filter_mode,
.title.riscy > .menu > .filter_container .filter_mode,
.markers_container.riscy,
.markers_container.riscy > .marker {
background-color: #EEE;
......@@ -23,8 +23,8 @@
.title.riscy > .menu:hover,
.title.riscy > .menu > .refs .ref:hover,
.title.riscy > .menu > .filter .filter_mode:hover,
.title.riscy > .menu > .filter .filter_content:hover,
.title.riscy > .menu > .filter_container .filter_mode:hover,
.title.riscy > .menu > .filter_container .filter_content:hover,
.markers_container.riscy > .marker:hover > .content {
background-color: #FFF8E7;
}
......@@ -46,7 +46,7 @@
.title.riscy > .menu > .refs .ref .source,
.title.riscy > .menu > .refs .ref .quote_byline,
.title > .menu > .filter .filter_content.off .text {
.title > .menu > .filter_container .filter_content.off .text {
color: #888;
}
......@@ -96,7 +96,11 @@
* .markers_container.riscy > marker.run
*/
/* TODO(matt): Actually style this */
@keyframes riscy_fade_mode {
0% { color: #FFF; }
100% { color: #000; }
}
@keyframes riscy_fade_text {
0% { color: #FFF; }
100% { color: #888; }
......@@ -107,12 +111,18 @@
100% { background-color: #EEE; }
}
/* TODO(matt): Get this to work! */
.title.riscy > .menu > .filter_container .filter_mode.responsible {
animation-name: riscy_fade_mode;
}
.title.riscy .filter_content.responsible .text {
animation-name: riscy_fade_text;
}
.title.riscy > .menu.filter.responsible,
.title.riscy .filter_content.responsible,
.title.riscy > .menu > .filter .filter_mode.responsible {
.title.riscy > .menu > .filter_container .filter_mode.responsible {
animation-name: riscy_fade_background;
}
......@@ -29,14 +29,14 @@
.title > .menu.filter.responsible,
.title .filter_content.responsible,
.title .filter_content.responsible .text,
.title > .menu > .filter .filter_mode.responsible {
.title > .menu > .filter_container .filter_mode.responsible {
animation-duration: 8s;
animation-timing-function: ease-out;
animation-iteration-count: 1;
}
.title > .menu .refs,
.title > .menu .filter {
.title > .menu .filter_container {
border: 1px solid;
border-top: none;
display: none;
......@@ -51,12 +51,12 @@
}
.title > .menu:hover .refs,
.title > .menu:hover .filter {
.title > .menu:hover .filter_container {
display: block;
}
.title > .menu > .refs .ref,
.title > .menu > .refs .filter { /* TODO(matt): See what this is! */
.title > .menu > .refs .filter_container { /* TODO(matt): See what this is! */
border-bottom: 1px solid;
padding: 10px;
display: flex;
......@@ -66,7 +66,7 @@
}
.title > .menu > .refs .ref:last-child,
.title > .menu > .refs .filter:last-child { /* TODO(matt): See what this is! */
.title > .menu > .refs .filter_container:last-child { /* TODO(matt): See what this is! */
border: none;
}
......@@ -82,7 +82,7 @@
}
.title > .menu > .refs .ref .ref_content,
.title > .menu > .refs .ref .filter_content {
.title > .menu > .filter_content {
margin-bottom: 8px;
width: 100%;
}
......@@ -120,60 +120,60 @@
margin-right: 4px;
}
.title > .menu > .filter .filter_mode {
.title > .menu > .filter_container .filter_mode {
cursor: pointer;
border-bottom: 1px solid;
text-align: center;
font-size: 12px;
}
.title > .menu > .filter .filter_mode.exclusive:after {
.title > .menu > .filter_container .filter_mode.exclusive:after {
content: "exclusive";
}
.title > .menu > .filter .filter_mode.inclusive:after {
.title > .menu > .filter_container .filter_mode.inclusive:after {
content: "inclusive";
}
.title > .menu > .filter .filter_title {
.title > .menu > .filter_container .filter_title {
font-size: 9px;
text-align: center;
}
.title > .menu > .filter .filters {
.title > .menu > .filter_container .filters {
display: flex;
flex-flow: row nowrap;
}
.title > .menu > .filter .filters > * {
.title > .menu > .filter_container .filters > * {
width: 50%;
}
.title > .menu > .filter .filter_content {
.title > .menu > .filter_container .filter_content {
cursor: pointer;
}
.title > .menu > .filter .filter_content .icon {
.title > .menu > .filter_container .filter_content .icon {
margin: 0 4px;
}
.title > .menu > .filter > .filter_media .filter_content .icon {
.title > .menu > .filter_container > .filter_media .filter_content .icon {
margin: 0 .5em 0 4px;
}
.title > .menu > .filter .filter_content.off .icon {
.title > .menu > .filter_container .filter_content.off .icon {
background: transparent;
}
.title > .menu > .filter .filter_content.rant .icon {
.title > .menu > .filter_container .filter_content.rant .icon {
color: #F00;
}
.title > .menu > .filter .filter_media .filter_content.off .icon {
.title > .menu > .filter_container .filter_media .filter_content.off .icon {
opacity: 0.32;
}
.title > .menu > .filter .filter_content.rant .text,
.title > .menu > .filter_container .filter_content.rant .text,
.markers_container > .marker.rant .content {
font-variant: small-caps;
}
......@@ -254,18 +254,18 @@
margin: 4px;
}
.title > .menu > .filter .filter_content {
.title > .menu > .filter_container .filter_content {
display: flex;
}
.title > .menu > .filter .filter_content .category,
.title > .menu > .filter_container .filter_content .category,
.markers_container > .marker .content .categories .category {
border-radius: 50%;
height: 5px;
width: 5px;
}
.title > .menu > .filter .filter_content .category.off,
.title > .menu > .filter_container .filter_content .category.off,
.markers_container > .marker .content .categories .category.off {
background: transparent;
}
......@@ -274,7 +274,7 @@
margin-left: 2px;
}
.title > .menu > .filter .filter_content .icon {
.title > .menu > .filter_container .filter_content .icon {
margin-right: 8px;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment