Line 21: | Line 21: | ||
/* nav */ | /* nav */ | ||
+ | |||
+ | :root { | ||
+ | --csp-white: white; | ||
+ | --csp-base: #739dbfff; | ||
+ | --csp-dark: #486d8dff; | ||
+ | --csp-light: #c0d3e2ff; | ||
+ | } | ||
.csp-nav { | .csp-nav { | ||
grid-template-columns: auto 1fr auto; | grid-template-columns: auto 1fr auto; | ||
display: grid; | display: grid; | ||
− | background: | + | background: var(--csp-base); |
} | } | ||
.csp-nav__logo { | .csp-nav__logo { | ||
− | background: | + | background: var(--csp-dark); |
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
Line 45: | Line 52: | ||
.csp-nav__logo a::first-line { | .csp-nav__logo a::first-line { | ||
− | color: | + | color: var(--csp-light); |
font-size: .75em; | font-size: .75em; | ||
} | } | ||
Line 67: | Line 74: | ||
margin: 0.5em 0; | margin: 0.5em 0; | ||
padding: 0 2em 0 1em; | padding: 0 2em 0 1em; | ||
− | border-left: 1px solid white; | + | border-left: 1px solid var(--csp-white); |
} | } | ||
Line 74: | Line 81: | ||
font-family: "Font Awesome 5 Free"; | font-family: "Font Awesome 5 Free"; | ||
font-weight: 900; | font-weight: 900; | ||
+ | color: var(--csp-light) | ||
} | } | ||
input.csp-nav__search-input { | input.csp-nav__search-input { | ||
− | background: | + | background: var(--csp-dark); |
border: none; | border: none; | ||
width: 100%; | width: 100%; | ||
height: 1.9em; | height: 1.9em; | ||
} | } |
Revision as of 23:05, 21 April 2022
/* CSS placed here will be applied to all skins <style>*/
.treeview ul {
list-style: none;
margin-left: 0;
padding-left: 20px;
}
/* Used for legend example */
legend.legend-example {
background-color: #000;
color: #fff;
padding: 3px 6px;
}
.legend-example-output {
font: 1rem 'Fira Sans', sans-serif;
}
input.legend-example {
margin: .4rem;
}
/* nav */
:root {
--csp-white: white;
--csp-base: #739dbfff;
--csp-dark: #486d8dff;
--csp-light: #c0d3e2ff;
}
.csp-nav {
grid-template-columns: auto 1fr auto;
display: grid;
background: var(--csp-base);
}
.csp-nav__logo {
background: var(--csp-dark);
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 2em;
}
.csp-nav__logo a {
max-width: 2em;
color: white;
font-weight: bold;
font-size: 1.5em;
line-height: .9;
}
.csp-nav__logo a::first-line {
color: var(--csp-light);
font-size: .75em;
}
ul.csp-nav__menu {
justify-self: end;
list-style: none;
display: flex;
margin: 0;
}
ul.csp-nav__menu li.csp-nav__menu-item {
padding: 1.2em 1.5em;
margin: 0;
}
.csp-nav__search {
position: relative;
display: flex;
align-items: center;
margin: 0.5em 0;
padding: 0 2em 0 1em;
border-left: 1px solid var(--csp-white);
}
.csp-nav__search-icon:before {
content: "\f002";
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: var(--csp-light)
}
input.csp-nav__search-input {
background: var(--csp-dark);
border: none;
width: 100%;
height: 1.9em;
}