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

cinera__hero.css: More complete .blackboard styles

This commit is contained in:
Matt Mascarenhas 2018-01-15 00:05:41 +00:00
parent cf3e5219bc
commit a0f276bab0
1 changed files with 94 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
cmuratori/hero/cinera__hero.css
View File

@ -1,3 +1,19 @@
/*
* Base colours:
* background-color: #161616;
* color: #8A877D;
*
* :hover
* background-color: #222;
*
* .progress
* background-color: #8B3D23;
* color: black;
*
* .faded
* background-color: #68311F;
*/
.cineraQueryContainer.hero .inputContainer #query, .cineraQueryContainer.hero .inputContainer #query,
#cineraResults .dayContainer.hero, #cineraResults .dayContainer.hero,
#cineraIndex.hero dt, #cineraIndex.hero dt,
@ -48,6 +64,11 @@
color: #8A877D; color: #8A877D;
} }
/* NOTE(matt): Somehow use this to colour the "Default Medium" when .off */
.cineraMenus.hero > .menu > .filter_container .filter_content.off .cineraText {
color: #3A3936;
}
.cineraMenus.hero > .menu { .cineraMenus.hero > .menu {
transition: box-shadow 800ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: box-shadow 800ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: inset 0 0 0 #B57714; box-shadow: inset 0 0 0 #B57714;
@ -94,29 +115,74 @@
} }
.cineraPlayerContainer .markers_container.hero > .marker:hover > .faded .cineraContent { .cineraPlayerContainer .markers_container.hero > .marker:hover > .faded .cineraContent {
background-color: rgba(139, 61, 35, 0.7); background-color: #68311F;
} }
.cineraMenus.hero > .menu > .refs .ref .source, .cineraMenus.hero > .menu > .refs .ref .source,
.cineraMenus.hero > .menu > .refs .ref .quote_byline, .cineraMenus.hero > .menu > .refs .ref .quote_byline,
.cineraMenus.hero > .menu > .filter_container .filter_content.off .cineraText,
.cineraMenus.hero > .menu > .credits_container .credit .role { .cineraMenus.hero > .menu > .credits_container .credit .role {
color: #6B3E0B; color: #6B3E0B;
} }
/*
* Custom Media
*
* base colour(s) == untinted
* :hover == 64% opacity untinted background on default colours
* .off == 16% opacity untinted on default colours
* .progress == 64% opacity untinted on .progress colours
* .faded == 64% opacity untinted on .faded colours
*
*/
/* Blackboard */ /* Blackboard */
.cineraPlayerContainer .markers_container.hero > .marker.blackboard {
background: #000; /*
border-color: #161616; * Untinted colours:
*
* background: #000;
* color: #D7BA82; (cream)
*
*/
.cineraMenus.hero > .menu > .filter_container .filter_content.blackboard,
.cineraPlayerContainer .markers_container.hero > .marker.blackboard > .cineraContent {
background-color: #000;
} }
.cineraMenus.hero > .menu > .filter_container .filter_content.blackboard > .cineraText,
.cineraPlayerContainer .markers_container.hero > .marker.blackboard > .cineraContent { .cineraPlayerContainer .markers_container.hero > .marker.blackboard > .cineraContent {
color: #D7BA82; color: #D7BA82;
} }
.cineraMenus.hero > .menu > .filter_container .filter_content.blackboard.off,
.cineraPlayerContainer .markers_container.hero > .marker.off_blackboard > .cineraContent {
background-color: #121212;
}
.cineraMenus.hero > .menu > .filter_container .filter_content.blackboard.off > .cineraText {
color: #3A3936;
}
.cineraPlayerContainer .markers_container.hero > .marker.off_blackboard > .cineraContent {
color: #968F7D;
}
.cineraMenus.hero > .menu > .filter_container .filter_content.focused.blackboard,
.cineraPlayerContainer .markers_container.hero > .marker:hover.blackboard > .cineraContent { .cineraPlayerContainer .markers_container.hero > .marker:hover.blackboard > .cineraContent {
background: #111; background-color: #0C0C0C;
}
.cineraPlayerContainer .markers_container.hero > .marker.blackboard > .progress .cineraContent {
background-color: #32160C;
color: #897653;
}
.cineraPlayerContainer .markers_container.hero > .marker:hover.blackboard > .faded .cineraContent {
background-color: #25110B;
color: #AE885E;
} }
/* Run */ /* Run */
@ -129,21 +195,15 @@
* *
*/ */
.cineraMenus.hero .filter_content.run { .cineraMenus.hero > .menu > .filter_container .filter_content.run,
.cineraPlayerContainer .markers_container.hero > .marker.run > .cineraContent {
background-color: #31241A; background-color: #31241A;
}
.cineraMenus.hero > .menu > .filter_container .filter_content.run {
box-shadow: inset 0px 0px 4px #228B22; box-shadow: inset 0px 0px 4px #228B22;
} }
.cineraMenus.hero .filter_content.run.filter_content.focused {
background-color: #392C22;
}
.cineraMenus.hero .filter_content.run.off {
background-color: #1C1917;
box-shadow: inset 0px 0px 4px #193B19;
}
/* */
.cineraPlayerContainer .markers_container.hero > .marker.run > .cineraContent, .cineraPlayerContainer .markers_container.hero > .marker.run > .cineraContent,
.cineraPlayerContainer .markers_container.hero > .marker:hover.run > .cineraContent, .cineraPlayerContainer .markers_container.hero > .marker:hover.run > .cineraContent,
.cineraPlayerContainer .markers_container.hero > .marker.run > .progress .cineraContent, .cineraPlayerContainer .markers_container.hero > .marker.run > .progress .cineraContent,
@ -151,14 +211,27 @@
box-shadow: inset 0px 0px 12px #228B22; box-shadow: inset 0px 0px 12px #228B22;
} }
.cineraPlayerContainer .markers_container.hero > .marker.run > .cineraContent { .cineraMenus.hero > .menu > .filter_container .filter_content.focused.run,
background-color: #31241A;
}
.cineraPlayerContainer .markers_container.hero > .marker:hover.run > .cineraContent { .cineraPlayerContainer .markers_container.hero > .marker:hover.run > .cineraContent {
background-color: #392C22; background-color: #392C22;
} }
.cineraMenus.hero > .menu > .filter_container .filter_content.run.off,
.cineraPlayerContainer .markers_container.hero > .marker.off_run > .cineraContent {
background-color: #1C1917;
}
.cineraMenus.hero > .menu > .filter_container .filter_content.run.off {
box-shadow: inset 0px 0px 4px #193B19;
}
.cineraPlayerContainer .markers_container.hero > .marker.off_run > .cineraContent,
.cineraPlayerContainer .markers_container.hero > .marker:hover.off_run > .cineraContent,
.cineraPlayerContainer .markers_container.hero > .marker.off_run > .progress .cineraContent,
.cineraPlayerContainer .markers_container.hero > .marker:hover.off_run > .faded .cineraContent {
box-shadow: inset 0px 0px 12px #193B19;
}
.cineraPlayerContainer .markers_container.hero > .marker.run > .progress .cineraContent { .cineraPlayerContainer .markers_container.hero > .marker.run > .progress .cineraContent {
background-color: #803F23; background-color: #803F23;
} }
@ -166,16 +239,3 @@
.cineraPlayerContainer .markers_container.hero > .marker:hover.run > .faded .cineraContent { .cineraPlayerContainer .markers_container.hero > .marker:hover.run > .faded .cineraContent {
background-color: #683720; background-color: #683720;
} }
/* */
/* */
.cineraPlayerContainer .markers_container.hero > .marker.off_run > .cineraContent,
.cineraPlayerContainer .markers_container.hero > .marker:hover.off_run > .cineraContent,
.cineraPlayerContainer .markers_container.hero > .marker.off_run > .progress .cineraContent,
.cineraPlayerContainer .markers_container.hero > .marker:hover.off_run > .faded .cineraContent {
box-shadow: inset 0px 0px 12px #193B19;
}
.cineraPlayerContainer .markers_container.hero > .marker.off_run > .cineraContent {
background-color: #1C1917;
}