From 5a5e3083e5b8cc8253bc80f2f453854905ef8d5f Mon Sep 17 00:00:00 2001 From: Matt Mascarenhas Date: Tue, 22 May 2018 22:45:40 +0100 Subject: [PATCH] Link menu style --- cmuratori/hero/cinera__hero.css | 59 ++++++++++++++++---- miotatsu/riscy/cinera__riscy.css | 38 ++++++------- pervognsen/bitwise/cinera__bitwise.css | 75 +++++++++++++++++++------- 3 files changed, 123 insertions(+), 49 deletions(-) diff --git a/cmuratori/hero/cinera__hero.css b/cmuratori/hero/cinera__hero.css index aafd91b..3ae2e14 100644 --- a/cmuratori/hero/cinera__hero.css +++ b/cmuratori/hero/cinera__hero.css @@ -19,11 +19,12 @@ #cineraIndex.hero #cineraIndexEntries div, .cineraMenus.hero, -.cineraMenus.hero > .menu > .refs, -.cineraMenus.hero > .menu > .filter_container, -.cineraMenus.hero > .menu > .refs .ref, +.cineraMenus.hero > .menu > div, +.cineraMenus.hero > .menu > .quotes_container .ref, +.cineraMenus.hero > .menu > .references_container .ref, .cineraMenus.hero > .menu > .filter_container .filter_mode, -.cineraMenus.hero > .menu > .credits_container, +.cineraMenus.hero > .menu > .link_container #cineraLinkMode, +.cineraMenus.hero > .menu > .link_container #cineraLink, .cineraMenus.hero > .menu > .credits_container .credit, .cineraMenus.hero > .menu > .view, .cineraMenus.hero > .menu > .views_container .view, @@ -47,13 +48,13 @@ #cineraResults .markerList.hero > .marker, .cineraMenus.hero, -.cineraMenus.hero > .menu > .refs, -.cineraMenus.hero > .menu > .filter_container, -.cineraMenus.hero > .menu > .refs .ref, +.cineraMenus.hero > .menu > div, +.cineraMenus.hero > .menu > .quotes_container .ref, +.cineraMenus.hero > .menu > .references_container .ref, .cineraMenus.hero > .menu > .filter_container .filter_mode, -.cineraMenus.hero > .menu > .credits_container, +.cineraMenus.hero > .menu > .link_container #cineraLinkMode, +.cineraMenus.hero > .menu > .link_container #cineraLink, .cineraMenus.hero > .menu > .credits_container .credit, -.cineraMenus.hero > .menu > .views_container, .cineraPlayerContainer .markers_container.hero, .cineraPlayerContainer .markers_container.hero > .episodeMarker, .cineraPlayerContainer .markers_container.hero > .markers .marker { @@ -68,10 +69,13 @@ #cineraIndex.hero #cineraIndexEntries div a, .cineraMenus.hero, -.cineraMenus.hero > .menu > .refs .ref, +.cineraMenus.hero > .menu > .quotes_container .ref, +.cineraMenus.hero > .menu > .references_container .ref, .cineraMenus.hero > .menu > .refs .ref .timecode.focused:before, .cineraMenus.hero > .menu > .filter_container .filter_content .cineraText, +.cineraMenus.hero > .menu > .link_container #cineraLink, .cineraMenus.hero > .menu > .credits_container .credit .name, +.cineraMenus.hero > .menu > .credits_container .credit, .cineraPlayerContainer .markers_container.hero > .episodeMarker, .cineraPlayerContainer .markers_container.hero > .markers .marker > .cineraContent { color: #8A877D; @@ -123,6 +127,8 @@ .cineraMenus.hero > .menu > .references_container .ref.focused, .cineraMenus.hero > .menu > .filter_container .filter_mode:hover, .cineraMenus.hero > .menu > .filter_container .filter_content.focused, +.cineraMenus.hero > .menu > .link_container #cineraLinkMode:hover, +.cineraMenus.hero > .menu > .link_container #cineraLink:hover, .cineraMenus.hero > .menu > .credits_container .credit *.focused, .cineraMenus.hero > .menu > .view:hover, .cineraMenus.hero > .menu > .views_container .view:hover, @@ -142,7 +148,7 @@ .cineraMenus.hero > .menu > .refs .ref.current, .cineraPlayerContainer .markers_container.hero > .markers .marker > .progress .cineraContent { background-color: #8B3D23; - color: black; + color: #000; } .cineraPlayerContainer .markers_container.hero > .markers .marker:hover > .faded .cineraContent { @@ -270,3 +276,34 @@ .cineraPlayerContainer .markers_container.hero > .markers .marker:hover.run > .faded .cineraContent { background-color: #683720; } + +@keyframes hero_fade_mode { + 0% { color: #000; } + 100% { color: #8A877D; } +} + +@keyframes hero_fade_text { + 0% { color: #8A877D; } + 100% { color: #6B3E0B; } +} + +@keyframes hero_fade_background { + 0% { background-color: #8B3D23; } + 100% { background-color: #161616; } +} + +/* TODO(matt): Get this to work! */ +.cineraMenus.hero > .menu > .filter_container .filter_mode.responsible { + animation-name: hero_fade_mode; +} + +.cineraMenus.hero .filter_content.responsible .text { + animation-name: hero_fade_text; +} + +.cineraMenus.hero > .menu.filter.responsible, +.cineraMenus.hero .filter_content.responsible, +.cineraMenus.hero > .menu.link.responsible, +.cineraMenus.hero > .menu > .filter_container .filter_mode.responsible { + animation-name: hero_fade_background; +} diff --git a/miotatsu/riscy/cinera__riscy.css b/miotatsu/riscy/cinera__riscy.css index 3dc14ea..d8a9785 100644 --- a/miotatsu/riscy/cinera__riscy.css +++ b/miotatsu/riscy/cinera__riscy.css @@ -3,11 +3,12 @@ #cineraIndex.riscy #cineraIndexEntries div, .cineraMenus.riscy, -.cineraMenus.riscy > .menu > .refs, -.cineraMenus.riscy > .menu > .filter_container, -.cineraMenus.riscy > .menu > .refs .ref, +.cineraMenus.riscy > .menu > div, +.cineraMenus.riscy > .menu > .quotes_container .ref, +.cineraMenus.riscy > .menu > .references_container .ref, .cineraMenus.riscy > .menu > .filter_container .filter_mode, -.cineraMenus.riscy > .menu > .credits_container, +.cineraMenus.riscy > .menu > .link_container #cineraLinkMode, +.cineraMenus.riscy > .menu > .link_container #cineraLink, .cineraMenus.riscy > .menu > .credits_container .credit, .cineraMenus.riscy > .menu > .view, .cineraMenus.riscy > .menu > .views_container .view, @@ -31,13 +32,13 @@ #cineraResults .markerList.riscy > .markers .marker, .cineraMenus.riscy, -.cineraMenus.riscy > .menu > .refs, -.cineraMenus.riscy > .menu > .filter_container, -.cineraMenus.riscy > .menu > .refs .ref, +.cineraMenus.riscy > .menu > div, +.cineraMenus.riscy > .menu > .quotes_container .ref, +.cineraMenus.riscy > .menu > .references_container .ref, .cineraMenus.riscy > .menu > .filter_container .filter_mode, -.cineraMenus.riscy > .menu > .credits_container, +.cineraMenus.riscy > .menu > .link_container #cineraLinkMode, +.cineraMenus.riscy > .menu > .link_container #cineraLink, .cineraMenus.riscy > .menu > .credits_container .credit, -.cineraMenus.riscy > .menu > .views_container, .cineraPlayerContainer .markers_container.riscy, .cineraPlayerContainer .markers_container.riscy > .episodeMarker, .cineraPlayerContainer .markers_container.riscy > .markers .marker { @@ -51,13 +52,15 @@ #cineraIndex.riscy #cineraIndexEntries div a, .cineraMenus.riscy, -.cineraMenus.riscy > .menu > .refs .ref, -/*.cineraMenus.riscy > .menu > .refs .ref .timecode:hover:before,*/ +.cineraMenus.riscy > .menu > .quotes_container .ref, +.cineraMenus.riscy > .menu > .references_container .ref, .cineraMenus.riscy > .menu > .refs .ref .timecode.focused:before, .cineraMenus.riscy > .menu > .filter_container .filter_content .cineraText, +.cineraMenus.riscy > .menu > .link_container #cineraLink, .cineraMenus.riscy > .menu > .credits_container .credit .name, .cineraPlayerContainer .markers_container.riscy > .episodeMarker, -.cineraPlayerContainer .markers_container.riscy > .markers .marker > .cineraContent { +.cineraPlayerContainer .markers_container.riscy > .markers .marker > .cineraContent, +.cineraPlayerContainer .markers_container.riscy > .markers .marker > .cineraContent .categoryMedium { color: #000; } @@ -84,7 +87,6 @@ box-shadow: inset 0px 0px 30px #2A3172; } -/*.cineraMenus.riscy > .menu > .refs .ref .ref_indices .timecode:hover,*/ .cineraMenus.riscy > .menu > .refs .ref .ref_indices .timecode.focused, .cineraPlayerContainer .markers_container.riscy > .markers .marker.current > .cineraContent { color: #2A3172; @@ -98,15 +100,13 @@ #cineraIndex.riscy #cineraIndexSort:hover, #cineraIndex.riscy #cineraIndexEntries div:hover, -/*.cineraMenus.riscy > .menu:hover,*/ .cineraMenus.riscy > .menu.visible, -/*.cineraMenus.riscy > .menu > .refs .ref:hover,*/ .cineraMenus.riscy > .menu > .quotes_container .ref.focused, .cineraMenus.riscy > .menu > .references_container .ref.focused, .cineraMenus.riscy > .menu > .filter_container .filter_mode:hover, -/*.cineraMenus.riscy > .menu > .filter_container .filter_content:hover,*/ .cineraMenus.riscy > .menu > .filter_container .filter_content.focused, -/*.cineraMenus.riscy > .menu > .credits_container .credit *:hover,*/ +.cineraMenus.riscy > .menu > .link_container #cineraLinkMode:hover, +.cineraMenus.riscy > .menu > .link_container #cineraLink:hover, .cineraMenus.riscy > .menu > .credits_container .credit *.focused, .cineraMenus.riscy > .menu > .view:hover, .cineraMenus.riscy > .menu > .views_container .view:hover, @@ -125,7 +125,8 @@ .cineraMenus.riscy > .menu > .refs .ref.current, /*.cineraMenus.riscy > .menu > .refs .ref.current .timecode:hover:before,*/ -.cineraPlayerContainer .markers_container.riscy > .markers .marker > .progress .cineraContent { +.cineraPlayerContainer .markers_container.riscy > .markers .marker > .progress .cineraContent, +.cineraPlayerContainer .markers_container.riscy > .markers .marker > .progress .cineraContent .categoryMedium { background-color: rgb(42, 49, 114); color: #FFF; } @@ -204,6 +205,7 @@ .cineraMenus.riscy > .menu.filter.responsible, .cineraMenus.riscy .filter_content.responsible, +.cineraMenus.riscy > .menu.link.responsible, .cineraMenus.riscy > .menu > .filter_container .filter_mode.responsible { animation-name: riscy_fade_background; } diff --git a/pervognsen/bitwise/cinera__bitwise.css b/pervognsen/bitwise/cinera__bitwise.css index f3fe96b..3ca80c2 100644 --- a/pervognsen/bitwise/cinera__bitwise.css +++ b/pervognsen/bitwise/cinera__bitwise.css @@ -21,13 +21,13 @@ #cineraIndex.bitwise #cineraIndexEntries div, .cineraMenus.bitwise, -.cineraMenus.bitwise > .menu > .refs, -.cineraMenus.bitwise > .menu > .filter_container, -.cineraMenus.bitwise > .menu > .refs .ref, +.cineraMenus.bitwise > .menu > div, +.cineraMenus.bitwise > .menu > .quotes_container .ref, +.cineraMenus.bitwise > .menu > .references_container .ref, .cineraMenus.bitwise > .menu > .filter_container .filter_mode, -.cineraMenus.bitwise > .menu > .credits_container, +.cineraMenus.bitwise > .menu > .link_container #cineraLinkMode, +.cineraMenus.bitwise > .menu > .link_container #cineraLink, .cineraMenus.bitwise > .menu > .credits_container .credit, -.cineraMenus.bitwise > .menu > .view, .cineraMenus.bitwise > .menu > .views_container .view, .cineraPlayerContainer .markers_container.bitwise, .cineraPlayerContainer .markers_container.bitwise > .episodeMarker, @@ -49,13 +49,13 @@ #cineraResults .markerList.bitwise > .marker, .cineraMenus.bitwise, -.cineraMenus.bitwise > .menu > .refs, -.cineraMenus.bitwise > .menu > .filter_container, -.cineraMenus.bitwise > .menu > .refs .ref, +.cineraMenus.bitwise > .menu > div, +.cineraMenus.bitwise > .menu > .quotes_container .ref, +.cineraMenus.bitwise > .menu > .references_container .ref, .cineraMenus.bitwise > .menu > .filter_container .filter_mode, -.cineraMenus.bitwise > .menu > .credits_container, +.cineraMenus.bitwise > .menu > .link_container #cineraLinkMode, +.cineraMenus.bitwise > .menu > .link_container #cineraLink, .cineraMenus.bitwise > .menu > .credits_container .credit, -.cineraMenus.bitwise > .menu > .views_container, .cineraPlayerContainer .markers_container.bitwise, .cineraPlayerContainer .markers_container.bitwise > .episodeMarker, .cineraPlayerContainer .markers_container.bitwise > .markers .marker { @@ -69,9 +69,11 @@ #cineraIndex.bitwise #cineraIndexEntries div a, .cineraMenus.bitwise, -.cineraMenus.bitwise > .menu > .refs .ref, -.cineraMenus.bitwise > .menu > .refs .ref .timecode.focused:before, +.cineraMenus.bitwise > .menu > .quotes_container .ref, +.cineraMenus.bitwise > .menu > .references_container .ref, +.cineraMenus.bitwise > .menu > .references_container .ref .timecode.focused:before, .cineraMenus.bitwise > .menu > .filter_container .filter_content .cineraText, +.cineraMenus.bitwise > .menu > .link_container #cineraLink, .cineraMenus.bitwise > .menu > .credits_container .credit .name, .cineraPlayerContainer .markers_container.bitwise > .episodeMarker, .cineraPlayerContainer .markers_container.bitwise > .markers .marker > .cineraContent, @@ -107,12 +109,12 @@ box-shadow: inset 0px 0px 30px #7ABDE8; } -.cineraMenus.bitwise > .menu > .refs .ref .ref_indices .timecode.focused, +.cineraMenus.bitwise > .menu > .references_container .ref .ref_indices .timecode.focused, .cineraPlayerContainer .markers_container.bitwise > .markers .marker.current > .cineraContent { color: #7ABDE8; } -.cineraMenus.bitwise > .menu > .refs .ref.current .ref_indices .timecode.focused { +.cineraMenus.bitwise > .menu > .references_container .ref.current .ref_indices .timecode.focused { color: #37D341; /* Colour when hovering over the ref that is currently playing */ } @@ -125,6 +127,8 @@ .cineraMenus.bitwise > .menu > .references_container .ref.focused, .cineraMenus.bitwise > .menu > .filter_container .filter_mode:hover, .cineraMenus.bitwise > .menu > .filter_container .filter_content.focused, +.cineraMenus.bitwise > .menu > .link_container #cineraLinkMode:hover, +.cineraMenus.bitwise > .menu > .link_container #cineraLink:hover, .cineraMenus.bitwise > .menu > .credits_container .credit *.focused, .cineraMenus.bitwise > .menu > .view:hover, .cineraMenus.bitwise > .menu > .views_container .view:hover, @@ -133,15 +137,15 @@ background-color: #0F0F0F; } -.cineraMenus.bitwise > .menu > .refs .ref.current .source, -.cineraMenus.bitwise > .menu > .refs .ref.current .quote_byline, -.cineraMenus.bitwise > .menu > .refs .ref.current .ref_indices .timecode.focused:before { +.cineraMenus.bitwise > .menu > .references_container .ref.current .source, +.cineraMenus.bitwise > .menu > .references_container .ref.current .quote_byline, +.cineraMenus.bitwise > .menu > .references_container .ref.current .ref_indices .timecode.focused:before { color: #BBB; /* Colour of "site" when hovering over the ref that is currently playing */ } #cineraResults .markerList.bitwise > .marker b, -.cineraMenus.bitwise > .menu > .refs .ref.current, +.cineraMenus.bitwise > .menu > .references_container .ref.current, .cineraPlayerContainer .markers_container.bitwise > .markers .marker > .progress .cineraContent, .cineraPlayerContainer .markers_container.bitwise > .markers .marker > .progress .cineraContent .categoryMedium { background-color: #252241; @@ -152,8 +156,8 @@ background-color: #181623; } -.cineraMenus.bitwise > .menu > .refs .ref .source, -.cineraMenus.bitwise > .menu > .refs .ref .quote_byline, +.cineraMenus.bitwise > .menu > .references_container .ref .source, +.cineraMenus.bitwise > .menu > .references_container .ref .quote_byline, .cineraMenus.bitwise > .menu > .credits_container .credit .role { color: #EC608D; } @@ -194,3 +198,34 @@ .cineraPlayerContainer .markers_container.bitwise > .markers .marker.off_run > .cineraContent { color: #345D35; } + +@keyframes bitwise_fade_mode { + 0% { color: #FFF; } + 100% { color: #F4F7FE; } +} + +@keyframes bitwise_fade_text { + 0% { color: #F4F7FE; } + 100% { color: #EC608D; } +} + +@keyframes bitwise_fade_background { + 0% { background-color: #8EB08F; } + 100% { background-color: #212121; } +} + +/* TODO(matt): Get this to work! */ +.cineraMenus.bitwise > .menu > .filter_container .filter_mode.responsible { + animation-name: bitwise_fade_mode; +} + +.cineraMenus.bitwise .filter_content.responsible .text { + animation-name: bitwise_fade_text; +} + +.cineraMenus.bitwise > .menu.filter.responsible, +.cineraMenus.bitwise .filter_content.responsible, +.cineraMenus.bitwise > .menu.link.responsible, +.cineraMenus.bitwise > .menu > .filter_container .filter_mode.responsible { + animation-name: bitwise_fade_background; +}