hero and riscy style

cmuratori/hero/cinera__hero.css

@@ -1,98 +1,109 @@
-/* Search */
+.queryContainer.hero .inputContainer #query,
-
 .dayContainer.hero,
-#cineraIndex.hero dt {
+#cineraIndex.hero dt,
+
+.title.hero,
+.title.hero > .menu .refs,
+.title.hero > .menu .filter_container,
+.title.hero > .menu > .refs .ref,
+.title.hero > .menu > .filter_container .filter_mode,
+.title.hero > .menu > .credits_container,
+.title.hero > .menu > .credits_container .credit,
+.markers_container.hero,
+.markers_container.hero > .marker {
     background-color: #161616;
 }
 
+.queryContainer.hero .inputContainer #query:focus,
 .dayContainer:nth-child(2n).hero,
 #cineraIndex.hero dt:nth-child(2n) {
     background-color: #303030;
 }
 
-.dayContainer.hero > .dayName,
+.markerList.hero > .marker,
-#cineraIndex.hero dt a {
-    color: #8A877D;
-}
-
-.markerList.hero > .marker
-{
-    border-color: rgba(255, 255, 255, 0.1);
-    color: #ddd;
-}
-
-.markerList.hero > .marker b {
-    color: black;
-    background-color: rgb(255, 155, 0);
-}
-
-.markerList.hero > .marker:hover {
-    background-color: #444;
-}
-
-/* Player */
 
 .title.hero,
-.title.hero .menu .refs,
+.title.hero > .menu .refs,
-.title.hero .menu > .refs .ref,
+.title.hero > .menu .filter_container,
+.title.hero > .menu > .refs .ref,
+.title.hero > .menu > .filter_container .filter_mode,
+.title.hero > .menu > .credits_container,
+.title.hero > .menu > .credits_container .credit,
 .markers_container.hero,
 .markers_container.hero > .marker {
-    background-color: #161616;
+    border-color: rgba(255, 255, 255, 0.1);
-    border-color: #000;
 }
 
+.queryContainer.hero .inputContainer #query,
+.dayContainer.hero > .dayName,
+.markerList.hero > .marker,
+#cineraIndex.hero dt a,
+
 .title.hero,
-.title.hero .menu > .refs .ref,
+.title.hero > .menu > .refs .ref,
+.title.hero > .menu > .refs .ref .timecode.focused:before,
+.title.hero > .menu > .credits_container .credit .name,
 .markers_container.hero > .marker > .content {
     color: #8A877D;
 }
 
-.title.hero .menu {
+.title.hero > .menu {
     transition: box-shadow 800ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
     box-shadow: inset 0 0 0 #B57714;
 }
 
-.title.hero .menu:hover,
-.title.hero .menu > .refs .ref:hover,
-.markers_container.hero > .marker:hover > .content {
-
-    background-color: #222;
-}
-
 .title.hero .menu.current {
     box-shadow: inset 0px 0px 30px #B57714;
 }
 
-.title.hero .menu > .refs .ref.current,
+.title.hero > .menu > .refs .ref .ref_indices .timecode.focused,
-.markers_container.hero > .marker .progress .content {
-    background-color: #8B3D23;
-    color: #000;
-}
-
-.title.hero .menu > .refs .ref .source,
-.title.hero .menu > .refs .ref .quote_byline {
-    color: #6B3E0B;
-}
-
-.title.hero .menu > .refs .ref.current .source,
-.title.hero .menu > .refs .ref.current .quote_byline {
-    color: #111;
-}
-
-.title.hero .menu > .refs .ref.current:hover,
-.markers_container.hero > .marker:hover .faded .content {
-    background-color: rgba(139, 61, 35, 0.7);
-}
-
-.title.hero .menu > .refs .ref .timecode:hover {
-    color: #FFF;
-}
-
-/* Regular */
 .markers_container.hero > .marker.current > .content {
     color: #B57714;
 }
 
+.title.hero > .menu > .refs .ref.current .ref_indices .timecode.focused {
+    color: #FFF;
+}
+
+.markerList.hero > .marker:hover,
+#cineraIndex.hero dt:hover,
+
+.title.hero > .menu.visible,
+.title.hero > .menu > .quotes_container .ref.focused,
+.title.hero > .menu > .references_container .ref.focused,
+.title.hero > .menu > .filter_container .filter_mode:hover,
+.title.hero > .menu > .filter_container .filter_content.focused,
+.title.hero > .menu > .credits_container .credit *.focused,
+.markers_container.hero > .marker:hover > .content {
+    background-color: #222;
+}
+
+.title.hero > .menu > .refs .ref.current .source,
+.title.hero > .menu > .refs .ref.current .quote_byline,
+.title.hero > .menu > .refs .ref.current .ref_indices .timecode.focused:before {
+    color: #111;
+}
+
+.markerList.hero > .marker b,
+
+.title.hero > .menu > .refs .ref.current,
+.markers_container.hero > .marker > .progress .content {
+    background-color: #8B3D23;
+    color: black;
+}
+
+.markers_container.hero > .marker:hover > .faded .content {
+    background-color: rgba(139, 61, 35, 0.7);
+}
+
+.title.hero > .menu > .refs .ref .source,
+.title.hero > .menu > .refs .ref .quote_byline,
+.title.hero > .menu > .filter_container .filter_content.off .text,
+.title.hero > .menu > .credits_container .credit .role {
+    color: #6B3E0B;
+}
+
+
 /* Blackboard */
 .markers_container.hero > .marker.blackboard {
     background: #000;

miotatsu/riscy/cinera__riscy.css

@@ -1,3 +1,4 @@
+.queryContainer.hero .inputContainer #query:focus,
 .dayContainer.riscy,
 #cineraIndex.riscy dt,
 
@@ -13,6 +14,7 @@
     background-color: #EEE;
 }
 
+.queryContainer.hero .inputContainer #query,
 .dayContainer:nth-child(2n).riscy,
 #cineraIndex.riscy dt:nth-child(2n) {
     background-color: #FFF;
@@ -32,13 +34,13 @@
     border-color: rgba(246, 178, 26, 0.8);
 }
 
+.queryContainer.hero .inputContainer #query,
 .dayContainer.riscy > .dayName,
 .markerList.riscy > .marker,
 #cineraIndex.riscy dt a,
 
 .title.riscy,
 .title.riscy > .menu > .refs .ref,
-/*.title.riscy > .menu > .refs .ref .timecode:hover:before,*/
 .title.riscy > .menu > .refs .ref .timecode.focused:before,
 .title.riscy > .menu > .credits_container .credit .name,
 .markers_container.riscy > .marker > .content {
@@ -54,7 +56,6 @@
     box-shadow: inset 0px 0px 30px #2A3172;
 }
 
-/*.title.riscy > .menu > .refs .ref .ref_indices .timecode:hover,*/
 .title.riscy > .menu > .refs .ref .ref_indices .timecode.focused,
 .markers_container.riscy > .marker.current > .content {
     color: #2A3172;
@@ -67,15 +68,11 @@
 .markerList.riscy > .marker:hover,
 #cineraIndex.riscy dt:hover,
 
-/*.title.riscy > .menu:hover,*/
 .title.riscy > .menu.visible,
-/*.title.riscy > .menu > .refs .ref:hover,*/
 .title.riscy > .menu > .quotes_container .ref.focused,
 .title.riscy > .menu > .references_container .ref.focused,
 .title.riscy > .menu > .filter_container .filter_mode:hover,
-/*.title.riscy > .menu > .filter_container .filter_content:hover,*/
 .title.riscy > .menu > .filter_container .filter_content.focused,
-/*.title.riscy > .menu > .credits_container .credit *:hover,*/
 .title.riscy > .menu > .credits_container .credit *.focused,
 .markers_container.riscy > .marker:hover > .content {
     background-color: #FFF8E7;
@@ -90,13 +87,11 @@
 .markerList.riscy > .marker b,
 
 .title.riscy > .menu > .refs .ref.current,
-/*.title.riscy > .menu > .refs .ref.current .timecode:hover:before,*/
 .markers_container.riscy > .marker > .progress .content {
     background-color: rgb(42, 49, 114);
     color: #FFF;
 }
 
-/*.title.riscy > .menu > .refs .ref.current:hover,*/
 .markers_container.riscy > .marker:hover > .faded .content {
     background-color: rgba(42, 49, 114, 0.7);
 }