Style the NAV menus

This commit is contained in:
Matt Mascarenhas 2020-05-20 23:47:23 +01:00
parent b9a18742ba
commit 378b81c353
3 changed files with 185 additions and 14 deletions

View File

@ -16,6 +16,63 @@
*
*/
/* NAV */
.cineraNavDropdown.hero .cineraNavTitle,
.cineraNavHorizontal.hero li a,
.cineraNavHorizontal.hero li.current > a:hover,
.cineraNavPlain.hero a,
.cineraNavPlain.hero li.current > a:hover {
color: #FFFFFF;
}
.cineraNavDropdown.hero .cineraNavTitle,
/* NOTE(matt): Dropdown Current (swap with Non-current, to taste) */
.cineraNavDropdown.hero .cineraNavHorizontal.hero li.current a,
.cineraNavDropdown.hero .cineraNavHorizontal.hero li.current a:hover,
/* */
.cineraNavHorizontal.hero li a {
background-color: #161616;
}
/* Dropdown Non-current (swap with Current, to taste) */
.cineraNavDropdown.hero .cineraNavHorizontal.hero li a,
/* */
.cineraNavHorizontal.hero li.current a,
.cineraNavHorizontal.hero li.current a:hover {
background-color: #000000;
}
.cineraNavDropdown.hero .cineraNavHorizontal.hero li a:hover,
.cineraNavHorizontal.hero li a:hover {
background-color: #080808;
}
.cineraNavHorizontal.hero,
.cineraNavHorizontal.hero li a {
border-color: #222222;
}
.cineraNavHorizontal.hero li.current > ul > li:first-child > a,
.cineraNavHorizontal.hero li.current > ul > li:first-child > ul > li:first-child > a {
border-left-color: #222222;
}
.cineraNavHorizontal.hero li a:hover,
.cineraNavPlain.hero a:hover {
color: #0471C5;
}
.cineraNavHorizontal.hero li.current a,
.cineraNavHorizontal.hero li.current a:hover {
border-bottom-color: transparent;
}
.cineraNavHorizontal.hero li.current ul li a {
border-bottom-color: transparent;
border-left-color: transparent;
}
/* /NAV */
#cineraIndexControl.hero .cineraQueryContainer .inputContainer #query,
#cineraIndexControl.hero .cineraFilterProject,

View File

@ -1,14 +1,14 @@
/*
* Base colours:
* background-color: #EEE;
* color: #000;
* background-color: #EEEEEE;
* color: #000000;
*
* :hover
* background-color: #FFF8E7;
*
* .progress
background-color: rgb(42, 49, 114);
color: #FFF;
background-color: rgb(42, 49, 114); / #2A3172
color: #FFFFFF;
*
* .faded
background-color: rgba(42, 49, 114, 0.7);
@ -16,6 +16,63 @@
*
*/
/* NAV */
.cineraNavDropdown.riscy .cineraNavTitle,
.cineraNavHorizontal.riscy li a,
.cineraNavHorizontal.riscy li.current > a:hover,
.cineraNavPlain.riscy a,
.cineraNavPlain.riscy li.current > a:hover {
color: #2A3172;
}
.cineraNavDropdown.riscy .cineraNavTitle,
/* NOTE(matt): Dropdown Current (swap with Non-current, to taste) */
.cineraNavDropdown.riscy .cineraNavHorizontal.riscy li.current a,
.cineraNavDropdown.riscy .cineraNavHorizontal.riscy li.current a:hover,
/* */
.cineraNavHorizontal.riscy li a {
background-color: #FFF8E7;
}
/* Dropdown Non-current (swap with Current, to taste) */
.cineraNavDropdown.riscy .cineraNavHorizontal.riscy li a,
/* */
.cineraNavHorizontal.riscy li.current a,
.cineraNavHorizontal.riscy li.current a:hover {
background-color: #FFFFFF;
}
.cineraNavDropdown.riscy .cineraNavHorizontal.riscy li a:hover,
.cineraNavHorizontal.riscy li a:hover {
background-color: #FFFCF3;
}
.cineraNavHorizontal.riscy,
.cineraNavHorizontal.riscy li a {
border-color: #F6B21A;
}
.cineraNavHorizontal.riscy li.current > ul > li:first-child > a,
.cineraNavHorizontal.riscy li.current > ul > li:first-child > ul > li:first-child > a {
border-left-color: #F6B21A;
}
.cineraNavHorizontal.riscy li a:hover,
.cineraNavPlain.riscy a:hover {
color: #F6B21A;
}
.cineraNavHorizontal.riscy li.current a,
.cineraNavHorizontal.riscy li.current a:hover {
border-bottom-color: transparent;
}
.cineraNavHorizontal.riscy li.current ul li a {
border-bottom-color: transparent;
border-left-color: transparent;
}
/* /NAV */
#cineraIndexControl.riscy .cineraQueryContainer .inputContainer #query,
#cineraIndexControl.riscy .cineraFilterProject,
@ -35,7 +92,7 @@
.cineraPlayerContainer .markers_container.riscy,
.cineraPlayerContainer .markers_container.riscy > .episodeMarker,
.cineraPlayerContainer .markers_container.riscy > .markers .marker {
background-color: #EEE;
background-color: #EEEEEE;
}
.cineraDefaultMediumIndicator {
@ -48,7 +105,7 @@
.cineraIndexProject.riscy .cineraProjectTitle,
#cineraResults .dayContainer:nth-child(2n).riscy,
#cineraIndex .cineraIndexProject.riscy .cineraIndexEntries div:nth-child(2n) {
background-color: #FFF;
background-color: #FFFFFF;
}
#cineraResults .markerList.riscy > .marker,
@ -88,16 +145,16 @@
.cineraPlayerContainer .markers_container.riscy > .episodeMarker,
.cineraPlayerContainer .markers_container.riscy > .markers .marker > .cineraContent,
.cineraPlayerContainer .markers_container.riscy > .markers .marker > .cineraContent .categoryMedium {
color: #000;
color: #000000;
}
/* Visited Indicator */
#cineraIndex .cineraIndexProject.riscy .cineraIndexEntries div a::before {
color: #EEE;
color: #EEEEEE;
}
#cineraIndex .cineraIndexProject.riscy .cineraIndexEntries div:nth-child(2n) a::before {
color: #FFF;
color: #FFFFFF;
}
#cineraIndex .cineraIndexProject.riscy .cineraIndexEntries div a:visited::before {
@ -159,7 +216,7 @@
.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;
color: #FFFFFF;
}
/*.cineraMenus.riscy > .menu > .refs .ref.current:hover,*/
@ -213,18 +270,18 @@
*/
@keyframes riscy_fade_mode {
0% { color: #FFF; }
100% { color: #000; }
0% { color: #FFFFFF; }
100% { color: #000000; }
}
@keyframes riscy_fade_text {
0% { color: #000; }
0% { color: #000000; }
100% { color: #888; }
}
@keyframes riscy_fade_background {
0% { background-color: rgba(246, 178, 26, 0.8);}
100% { background-color: #EEE; }
100% { background-color: #EEEEEE; }
}
/* TODO(matt): Get this to work! */

View File

@ -16,6 +16,63 @@
* border-color: #8EB08F;
*/
/* NAV */
.cineraNavDropdown.bitwise .cineraNavTitle,
.cineraNavHorizontal.bitwise li a,
.cineraNavHorizontal.bitwise li.current > a:hover,
.cineraNavPlain.bitwise a,
.cineraNavPlain.bitwise li.current > a:hover {
color: #FFFFFF;
}
.cineraNavDropdown.bitwise .cineraNavTitle,
/* NOTE(matt): Dropdown Current (swap with Non-current, to taste) */
.cineraNavDropdown.bitwise .cineraNavHorizontal.bitwise li.current a,
.cineraNavDropdown.bitwise .cineraNavHorizontal.bitwise li.current a:hover,
/* */
.cineraNavHorizontal.bitwise li a {
background-color: #161616;
}
/* Dropdown Non-current (swap with Current, to taste) */
.cineraNavDropdown.bitwise .cineraNavHorizontal.bitwise li a,
/* */
.cineraNavHorizontal.bitwise li.current a,
.cineraNavHorizontal.bitwise li.current a:hover {
background-color: #000000;
}
.cineraNavDropdown.bitwise .cineraNavHorizontal.bitwise li a:hover,
.cineraNavHorizontal.bitwise li a:hover {
background-color: #080808;
}
.cineraNavHorizontal.bitwise,
.cineraNavHorizontal.bitwise li a {
border-color: #8EB08F;
}
.cineraNavHorizontal.bitwise li.current > ul > li:first-child > a,
.cineraNavHorizontal.bitwise li.current > ul > li:first-child > ul > li:first-child > a {
border-left-color: #8EB08F;
}
.cineraNavHorizontal.bitwise li a:hover,
.cineraNavPlain.bitwise a:hover {
color: #7ABDE8;
}
.cineraNavHorizontal.bitwise li.current a,
.cineraNavHorizontal.bitwise li.current a:hover {
border-bottom-color: transparent;
}
.cineraNavHorizontal.bitwise li.current ul li a {
border-bottom-color: transparent;
border-left-color: transparent;
}
/* /NAV */
#cineraIndexControl.bitwise .cineraQueryContainer .inputContainer #query,
#cineraIndexControl.bitwise .cineraFilterProject,
#cineraResults .dayContainer.bitwise,