Difference between revisions of "Template:Virginia/styles/headerCSS"
CollinMarino (Talk | contribs) |
CollinMarino (Talk | contribs) |
||
| Line 58: | Line 58: | ||
/* Style the links inside the navigation bar */ | /* Style the links inside the navigation bar */ | ||
| − | .topnav div> | + | .topnav div > .mainitem { |
color: lightgray; | color: lightgray; | ||
text-decoration: none; | text-decoration: none; | ||
| Line 72: | Line 72: | ||
/* Change the color of links on hover */ | /* Change the color of links on hover */ | ||
| − | .topnav div>a:hover { | + | .topnav div > a:hover { |
| + | color: white; | ||
| + | } | ||
| + | .topnav div > div:hover { | ||
color: white; | color: white; | ||
| − | |||
} | } | ||
/* Add a color to the active/current link */ | /* Add a color to the active/current link */ | ||
| − | .topnav div>a.active { | + | .topnav div > a.active { |
| + | color: white; | ||
| + | } | ||
| + | .topnav div > div.active { | ||
color: white; | color: white; | ||
} | } | ||
| Line 123: | Line 128: | ||
} | } | ||
| − | .dropdown-content a { | + | .dropdown-content > a { |
| + | color: lightgray; | ||
| + | text-decoration: none; | ||
| + | font-weight: bold; | ||
| + | font-family: THICCCBOI, sans-serif; | ||
| + | padding: 1vh 1vw; | ||
| + | font-size: 1.3vw; | ||
| + | } | ||
| + | .dropdown-content > div { | ||
color: lightgray; | color: lightgray; | ||
text-decoration: none; | text-decoration: none; | ||
| Line 132: | Line 145: | ||
} | } | ||
| − | .dropdown-content a:hover { | + | .dropdown-content > a:hover { |
| + | color:white; | ||
| + | } | ||
| + | .dropdown-content > div:hover { | ||
color:white; | color:white; | ||
} | } | ||
| Line 142: | Line 158: | ||
/*hover higlight color*/ | /*hover higlight color*/ | ||
| − | .dropdown-content a::before{ | + | .dropdown-content > a::before{ |
| + | background: linear-gradient(to right,#eb3349, #f45c43); | ||
| + | } | ||
| + | .dropdown-content > div::before{ | ||
background: linear-gradient(to right,#eb3349, #f45c43); | background: linear-gradient(to right,#eb3349, #f45c43); | ||
} | } | ||
Revision as of 07:39, 18 October 2020
/* Make bar go across entire screen */ .topnavholder{
top: 16px; width: 100%; position: fixed; z-index: 2;
}
.headerspacer{
height: calc(1.3vw + 4vh); width: 100%;
}
/* Format the image in the menubar */ .menuimg{
padding: calc(0.9vh + 0.15vw); float: left; max-height: calc(1.95vw + 6vh); background-color: #3B3838; border-radius: 0% 0% 100% 100%; cursor: pointer; margin-bottom: calc(-1.95vw + -6vh);
}
.menuholder1{
background-color: #3B3838; height: calc(1.3vw + 4vh);
}
/*Format Menu logo text: MANIFOLD*/ .menuholder1 div.menulogo{
display: none; font-family: THICCCBOI, sans-serif; font-weight: bold; color: white; left: calc(1.95vw + 6vh); top: 0px; text-decoration: none; font-size: 2vw; position: absolute; align-items: center; justify-content: center; width: calc(20% - 1.95vw - 6vh); height: calc(1.3vw + 4vh);
}
/* Add a black background color to the top navigation and acts as a flex box container */ .topnav {
position: fixed; left: 20%; width: 80%; height: calc(1.3vw + 4vh); display: inline-flex; flex-direction: row; justify-content: space-between; align-items: center;
}
/* Style the links inside the navigation bar */ .topnav div > .mainitem {
color: lightgray; text-decoration: none; padding: 0px 1vw; font-size: 1.3vw; font-weight: bold; font-family: THICCCBOI, sans-serif; position: relative; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%);
}
/* Change the color of links on hover */ .topnav div > a:hover {
color: white;
} .topnav div > div:hover {
color: white;
}
/* Add a color to the active/current link */ .topnav div > a.active {
color: white;
} .topnav div > div.active {
color: white;
}
/*Exploit the way element borders are drawn to make a triangle*/ .arrow-down{
width: 0; height: 0; border-left: 0.5vw solid transparent; border-right: 0.5vw solid transparent; border-top: 0.5vw solid; margin: 0 auto;
}
.arrow-right {
float: left; width: 0; height: 0; margin-right: 0.25vw; border-top: 0.5vw solid transparent; border-bottom: 0.5vw solid transparent; border-left: 0.5vw solid; -ms-transform: translateY(0.25vw); transform: translateY(0.25vw);
}
/*============= stuff for dropdown menus =============*/ .dropdown{
height: 100%; display: flex; flex-direction: column; align-items: center;
}
.dropdown-content {
overflow: hidden; display: none; position: fixed; top: calc(1.3vw + 4vh + 16px); z-index: 1; background-color: #3B3838; border-radius: 0 0 0.5vw 0.5vw; -ms-transform: translateX(-50%);
}
.dropdown-content > a {
color: lightgray; text-decoration: none; font-weight: bold; font-family: THICCCBOI, sans-serif; padding: 1vh 1vw; font-size: 1.3vw;
} .dropdown-content > div {
color: lightgray; text-decoration: none; font-weight: bold; font-family: THICCCBOI, sans-serif; padding: 1vh 1vw; font-size: 1.3vw;
}
.dropdown-content > a:hover {
color:white;
} .dropdown-content > div:hover {
color:white;
}
.dropdown:hover .dropdown-content {
display: flex; flex-direction: column;
}
/*hover higlight color*/ .dropdown-content > a::before{
background: linear-gradient(to right,#eb3349, #f45c43);
} .dropdown-content > div::before{
background: linear-gradient(to right,#eb3349, #f45c43);
}
/*====== Styling for the scroll indicator ======*/ .progress-container {
width: 100%; height: calc(0.195vw + 0.6vh); margin-left: 1vw;
}
.progress-bar {
height: calc(0.195vw + 0.6vh); background-image: linear-gradient(45deg,#eb3349,#eb3349, #f45c43); width: 0%;
}