Annotation-Pushers
/
cinera_handmade.network
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Link menu style

This commit is contained in:
Matt Mascarenhas 2018-05-22 22:45:40 +01:00
parent ae22d10eb1
commit 5a5e3083e5
3 changed files with 123 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
cmuratori/hero/cinera__hero.css
View File

@ -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;
}

38
miotatsu/riscy/cinera__riscy.css
View File

@ -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;
}

75
pervognsen/bitwise/cinera__bitwise.css
View File

@ -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;
}