979 lines
15 KiB
CSS
979 lines
15 KiB
CSS
|
@import url('/css/lol/type.css');
|
|||
|
|
@import url('/css/lol/color.css');
|
|||
|
|
@import url('/css/lol/prism.css');
|
|||
|
|
|
|||
|
|
/* Foundational */
|
|||
|
|
|
|||
|
|
:root {
|
|||
|
|
--spacing: 1.5rem;
|
|||
|
|
--radius: .75em;
|
|||
|
|
--small-radius: .13em;
|
|||
|
|
--color: var(--white);
|
|||
|
|
--background: var(--gray-8);
|
|||
|
|
--shadow: var(--black);
|
|||
|
|
--button-shadow: var(--gray-7);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
*:focus:not(:focus-visible) {
|
|||
|
|
outline: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:focus-visible {
|
|||
|
|
outline: 3px solid var(--yellow-5);
|
|||
|
|
outline-offset: 0;
|
|||
|
|
border-radius: var(--small-radius);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
*:active {
|
|||
|
|
outline: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::selection {
|
|||
|
|
background: var(--yellow-4);
|
|||
|
|
color: var(--gray-9);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
* {
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* default (dark) */
|
|||
|
|
.dark-mode, body {
|
|||
|
|
background: var(--gray-8) !important;
|
|||
|
|
color: var(--gray-1) !important;
|
|||
|
|
|
|||
|
|
:root {
|
|||
|
|
--border: var(--gray-1);
|
|||
|
|
--background-border: var(--gray-8);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* light */
|
|||
|
|
.light-mode {
|
|||
|
|
background: var(--gray-0) !important;
|
|||
|
|
color: var(--gray-8) !important;
|
|||
|
|
|
|||
|
|
:root {
|
|||
|
|
--border: var(--gray-8);
|
|||
|
|
--background-border: var(--gray-0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
@media (prefers-color-scheme: light) {
|
|||
|
|
body {
|
|||
|
|
background: var(--gray-1) !important;
|
|||
|
|
color: var(--gray-9) !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#color_mode_button:hover {
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
html {
|
|||
|
|
scrollbar-gutter: stable;
|
|||
|
|
-moz-text-size-adjust: none;
|
|||
|
|
-webkit-text-size-adjust: none;
|
|||
|
|
text-size-adjust: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
background: var(--gray-8);
|
|||
|
|
color: var(--gray-1);
|
|||
|
|
font-family: 'Lato';
|
|||
|
|
font-size: 1.2em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
small {
|
|||
|
|
display: inline-block;
|
|||
|
|
line-height: 130%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.breakable {
|
|||
|
|
word-break: break-word;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Navigation */
|
|||
|
|
|
|||
|
|
#service-nav {
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dark-mode #service-nav {
|
|||
|
|
background: var(--black);
|
|||
|
|
color: var(--gray-1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.light-mode #service-nav {
|
|||
|
|
background: var(--blue-2);
|
|||
|
|
color: var(--gray-9);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#service-nav ul {
|
|||
|
|
list-style: none;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#service-nav ul:after {
|
|||
|
|
content: " ";
|
|||
|
|
display: block;
|
|||
|
|
height: 0;
|
|||
|
|
clear: both;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#service-nav li {
|
|||
|
|
white-space: nowrap;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
display: inline;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#service-nav li i {
|
|||
|
|
margin-right: .18em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#service-nav li:after {
|
|||
|
|
font-family: "Font Awesome 6 Pro";
|
|||
|
|
font-weight: 900;
|
|||
|
|
content: '\f356';
|
|||
|
|
margin: 0 .5em 0 .75em;
|
|||
|
|
opacity: .3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#service-nav li:last-child:after, #service-nav li:nth-last-child(2):after {
|
|||
|
|
content: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#service-nav li:last-child { /* Help nav item */
|
|||
|
|
float: right;
|
|||
|
|
display: block;
|
|||
|
|
margin-left: 1em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#service-nav a {
|
|||
|
|
text-decoration: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#service-nav span {
|
|||
|
|
margin-right: 1em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#service-nav span:last-child {
|
|||
|
|
margin-right: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#service-info {
|
|||
|
|
display: none;
|
|||
|
|
font-size: 95%;
|
|||
|
|
padding-top: 1em;
|
|||
|
|
padding-bottom: 1em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dark-mode .dashboard { color: var(--blue-3); }
|
|||
|
|
.light-mode .dashboard { color: var(--blue-8); }
|
|||
|
|
|
|||
|
|
.dark-mode .default { background: var(--gray-8); color: var(--gray-1); }
|
|||
|
|
.light-mode .default { background: var(--gray-1); color: var(--gray-8); }
|
|||
|
|
|
|||
|
|
/* Decorative */
|
|||
|
|
|
|||
|
|
.info-hover {
|
|||
|
|
border-bottom: 1px dotted #000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-hover:hover {
|
|||
|
|
/*cursor: help;*/
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.debug {
|
|||
|
|
border: 1px dashed yellow;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
hr {
|
|||
|
|
border: 0;
|
|||
|
|
height: 0;
|
|||
|
|
margin: 1.5em 0;
|
|||
|
|
border-top: 1px solid var(--color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
hr.light {
|
|||
|
|
border-top: 1px solid var(--gray-3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
hr.dark {
|
|||
|
|
border-top: 1px solid var(--gray-6);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Notice */
|
|||
|
|
|
|||
|
|
#notice {
|
|||
|
|
padding: .5em .5em .6em .5em;
|
|||
|
|
font-size: 1em;
|
|||
|
|
text-align: center;
|
|||
|
|
color: var(--gray-9);
|
|||
|
|
background: repeating-linear-gradient(130deg, var(--yellow-3), var(--yellow-3) 10px, var(--yellow-4) 10px, var(--yellow-4) 20px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#notice p {
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#notice_omg {
|
|||
|
|
padding: .5em .5em .6em .5em;
|
|||
|
|
font-size: 1em;
|
|||
|
|
text-align: center;
|
|||
|
|
color: var(--white);
|
|||
|
|
background: repeating-linear-gradient(130deg, var(--red-9), var(--red-9) 10px, var(--red-8) 10px, var(--red-8) 20px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#notice_omg p {
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Messages */
|
|||
|
|
|
|||
|
|
.message {
|
|||
|
|
background: var(--blue-9);
|
|||
|
|
color: var(--white);
|
|||
|
|
padding: var(--spacing);
|
|||
|
|
padding-left: 5em;
|
|||
|
|
border-radius: 0;
|
|||
|
|
margin-bottom: var(--spacing);
|
|||
|
|
margin-top: var(--spacing);
|
|||
|
|
box-shadow: 10px 10px var(--black);
|
|||
|
|
position: relative;
|
|||
|
|
min-height: 5em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message p {
|
|||
|
|
line-height: 120%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message:before {
|
|||
|
|
font-family: "Font Awesome 6 Pro";
|
|||
|
|
font-weight: 900;
|
|||
|
|
content: "\f05a";
|
|||
|
|
font-size: 3em;
|
|||
|
|
padding: 0 var(--spacing) var(--spacing) 0;
|
|||
|
|
position: absolute;
|
|||
|
|
top: .3em;
|
|||
|
|
left: .3em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message.error {
|
|||
|
|
background: var(--red-3);
|
|||
|
|
color: var(--black);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message.error:before {
|
|||
|
|
color: var(--red-9);
|
|||
|
|
content: "\f071";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message.ok {
|
|||
|
|
background: var(--green-3);
|
|||
|
|
color: var(--black);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message.ok:before {
|
|||
|
|
color: var(--green-6);
|
|||
|
|
content: "\f058";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Cards */
|
|||
|
|
|
|||
|
|
.card {
|
|||
|
|
transition: transform .1s ease-in-out, box-shadow .05s ease-in-out, background .05s ease-in-out;
|
|||
|
|
-webkit-transform-style: preserve-3d;
|
|||
|
|
-webkit-transform: translate3d(0,0,0);
|
|||
|
|
-webkit-backface-visibility: hidden;
|
|||
|
|
-moz-backface-visibility: hidden;
|
|||
|
|
-ms-backface-visibility: hidden;
|
|||
|
|
box-shadow: 1px 4px 7px -5px rgba(0,0,0,0.75);
|
|||
|
|
}
|
|||
|
|
.card:hover {
|
|||
|
|
transform: scale(1.03) translate3d(0,0,0);
|
|||
|
|
-webkit-backface-visibility: hidden;
|
|||
|
|
-moz-backface-visibility: hidden;
|
|||
|
|
-ms-backface-visibility: hidden;
|
|||
|
|
box-shadow: 1px 16px 29px -5px rgba(0,0,0,0.75);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card.disabled:hover {
|
|||
|
|
background: #555 !important;
|
|||
|
|
color: #fff !important;
|
|||
|
|
cursor: not-allowed;
|
|||
|
|
transform: none;
|
|||
|
|
box-shadow: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
a.card {
|
|||
|
|
text-decoration: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card.container {
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Containers */
|
|||
|
|
|
|||
|
|
.container {
|
|||
|
|
margin-bottom: var(--spacing);
|
|||
|
|
padding: var(--spacing);
|
|||
|
|
border-radius: var(--small-radius);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.transparent {
|
|||
|
|
background: inherit !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dark-mode main .container, .dark-mode main .box {
|
|||
|
|
background: var(--gray-9);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.light-mode main .container, .light-mode main .box {
|
|||
|
|
background: var(--gray-3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.container p:last-child {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.container:last-child {
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.padded {
|
|||
|
|
padding: var(--spacing);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nowrap {
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flex {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: var(--spacing);
|
|||
|
|
margin-bottom: var(--spacing);
|
|||
|
|
border-radius: var(--small-radius);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.box {
|
|||
|
|
flex-grow: 1;
|
|||
|
|
flex-shrink: 1;
|
|||
|
|
flex-basis: 0;
|
|||
|
|
padding: var(--spacing);
|
|||
|
|
border-radius: var(--small-radius);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.unpadded {
|
|||
|
|
padding-left: 0;
|
|||
|
|
padding-right: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fully-unpadded {
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.box.basis {
|
|||
|
|
flex-basis: var(--basis);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.centered-vertically {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Box Styles */
|
|||
|
|
|
|||
|
|
.rounded {
|
|||
|
|
border-radius: var(--radius);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.container.top-half {
|
|||
|
|
border-bottom-left-radius: 0;
|
|||
|
|
border-bottom-right-radius: 0;
|
|||
|
|
margin-bottom: -1px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.container.bottom-half {
|
|||
|
|
border-top-left-radius: 0;
|
|||
|
|
border-top-right-radius: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shadowed {
|
|||
|
|
box-shadow: 10px 10px var(--shadow);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Flex Overrides */
|
|||
|
|
|
|||
|
|
header .flex {
|
|||
|
|
align-items: center;
|
|||
|
|
margin: 0 var(--spacing);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
header .box {
|
|||
|
|
padding-left: 0;
|
|||
|
|
padding-right: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gapped {
|
|||
|
|
gap: calc(var(--spacing) * 2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gapless {
|
|||
|
|
gap: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.container .flex .box {
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.padded {
|
|||
|
|
padding: var(--spacing) !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.buttoned {
|
|||
|
|
position: relative;
|
|||
|
|
padding-bottom: calc(var(--spacing)*5) !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.buttoned button, .buttoned .button {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: calc(var(--spacing)/2);
|
|||
|
|
left: var(--spacing);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flex.gap {
|
|||
|
|
gap: var(--gap);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
header, main, footer {
|
|||
|
|
display: block;
|
|||
|
|
margin: var(--spacing);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
header {
|
|||
|
|
margin-top: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
header p {
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
header a {
|
|||
|
|
text-decoration: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
footer a:link,
|
|||
|
|
footer a:visited,
|
|||
|
|
footer a:hover,
|
|||
|
|
footer a:active {
|
|||
|
|
text-decoration: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
footer li {
|
|||
|
|
line-height: 200% !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
footer section {
|
|||
|
|
align-items: flex-start;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
footer {
|
|||
|
|
margin-top: 3em;
|
|||
|
|
padding-top: 2em;
|
|||
|
|
border-top: 1px solid var(--gray-7);
|
|||
|
|
margin-bottom: 3em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
footer .fa-mastodon:hover { color: var(--violet-6); }
|
|||
|
|
footer .fa-github:hover { color: var(--gray-5); }
|
|||
|
|
footer .fa-youtube:hover { color: var(--red-7); }
|
|||
|
|
footer .fa-ul li a:hover .fa-newspaper { color: var(--orange-5); }
|
|||
|
|
footer .fa-ul li a:hover .fa-wave-pulse { color: var(--red-5); }
|
|||
|
|
footer .fa-ul li a:hover .fa-brackets-curly { color: var(--cyan-5); }
|
|||
|
|
footer .fa-ul li a:hover .fa-handshake-angle { color: var(--green-5); }
|
|||
|
|
footer .fa-ul li a:hover .fa-scale-balanced { color: var(--grape-5); }
|
|||
|
|
|
|||
|
|
main {
|
|||
|
|
padding: 0 var(--spacing);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
aside.right {
|
|||
|
|
float: right;
|
|||
|
|
margin: 0 0 var(--spacing) var(--spacing);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
header ul {
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fixed {
|
|||
|
|
max-width: var(--width);
|
|||
|
|
margin: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.area {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: var(--spacing);
|
|||
|
|
border-radius: var(--small-radius);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
footer .area {
|
|||
|
|
align-items: start;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.area .space {
|
|||
|
|
flex-grow: 1;
|
|||
|
|
flex-shrink: 1;
|
|||
|
|
flex-basis: 0;
|
|||
|
|
border-radius: var(--small-radius);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Type */
|
|||
|
|
|
|||
|
|
p, li {
|
|||
|
|
line-height: 160%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
p, ul, ol {
|
|||
|
|
margin-bottom: var(--spacing);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
ul, ol {
|
|||
|
|
margin-left: var(--spacing);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
li {
|
|||
|
|
margin-left: 1em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mono {
|
|||
|
|
font-family: 'MD IO 0.4';
|
|||
|
|
font-size: 90%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.smallcaps {
|
|||
|
|
font-size: 90%;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.important {
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Headings */
|
|||
|
|
|
|||
|
|
h1, h2, h3, h4 {
|
|||
|
|
font-family: 'VC Honey Deck', serif;
|
|||
|
|
margin: var(--spacing) 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h1:first-child, h2:first-child, h3:first-child { margin-top: 0px; }
|
|||
|
|
|
|||
|
|
h1 {
|
|||
|
|
font-size: 2.3em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h2 {
|
|||
|
|
font-size: 1.8em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h3 {
|
|||
|
|
font-size: 1.4em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h4 {
|
|||
|
|
font-size: 1.2em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h1 a { text-decoration: none; }
|
|||
|
|
|
|||
|
|
/* Lists */
|
|||
|
|
|
|||
|
|
.horizontal {
|
|||
|
|
list-style-type: none;
|
|||
|
|
margin-left: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.horizontal li {
|
|||
|
|
display: inline;
|
|||
|
|
margin-left: 1em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.horizontal li:first-child {
|
|||
|
|
margin-left: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fa-ul {
|
|||
|
|
margin-left: 30px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Alignment */
|
|||
|
|
|
|||
|
|
.left {
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right {
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.centered {
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Logotype */
|
|||
|
|
|
|||
|
|
.logotype {
|
|||
|
|
color: var(--pink-4);
|
|||
|
|
font-family: 'VC Honey Black Banner';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logotype img {
|
|||
|
|
width: 1.3em;
|
|||
|
|
margin-bottom: -.3em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
header .logotype {
|
|||
|
|
font-size: 1.7em;
|
|||
|
|
margin-top: .2em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
footer .logotype {
|
|||
|
|
font-size: 1.1em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Forms */
|
|||
|
|
|
|||
|
|
label {
|
|||
|
|
font-weight: bold;
|
|||
|
|
cursor: pointer;
|
|||
|
|
margin-right: .5em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
label span {
|
|||
|
|
font-weight: normal;
|
|||
|
|
display: inline;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.note {
|
|||
|
|
font-size: 80%;
|
|||
|
|
display: block;
|
|||
|
|
line-height: 120%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.utility-icon {
|
|||
|
|
display: inline-block;
|
|||
|
|
vertical-align: middle;
|
|||
|
|
margin: 1em 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.utility-icon:hover {
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
input[type="text"]:disabled:hover {
|
|||
|
|
cursor: not-allowed;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
select, input[type="submit"], button, .button {
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
select, input[type="text"], input[type="password"], input[type="submit"], button, .button, textarea {
|
|||
|
|
font-family: 'Lato';
|
|||
|
|
-webkit-appearance: none;
|
|||
|
|
-moz-appearance: none;
|
|||
|
|
appearance: none;
|
|||
|
|
font-size: 100%;
|
|||
|
|
margin: .5em 0;
|
|||
|
|
padding: .4em .5em .5em .5em;
|
|||
|
|
background: var(--background);
|
|||
|
|
color: var(--color);
|
|||
|
|
border: 0;
|
|||
|
|
border-radius: var(--small-radius);
|
|||
|
|
text-decoration: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
button, .button, input[type="submit"] {
|
|||
|
|
color: var(--white) !important;
|
|||
|
|
border-radius: var(--radius);
|
|||
|
|
display: inline-block;
|
|||
|
|
margin: .2em 0;
|
|||
|
|
margin-right: .7em;
|
|||
|
|
padding: .4em .6em;
|
|||
|
|
box-shadow: 0 5px 0 0 var(--button-shadow);
|
|||
|
|
transition: transform .07s ease-in-out, opacity .07s ease-in-out, box-shadow 0.1s ease-in-out, color 0.1s ease-in-out, background 0.1s ease-in-out;
|
|||
|
|
line-height: 120%;
|
|||
|
|
margin-bottom: 1em;
|
|||
|
|
-webkit-transform-style: preserve-3d;
|
|||
|
|
-webkit-transform: translate3d(0,0,0);
|
|||
|
|
-webkit-backface-visibility: hidden;
|
|||
|
|
-moz-backface-visibility: hidden;
|
|||
|
|
-ms-backface-visibility: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
button.inline, .button.inline {
|
|||
|
|
margin: 0 .4em;
|
|||
|
|
padding: .3em .6em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
button i, .button i {
|
|||
|
|
margin-right: .2em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
button:hover, .button:hover, input[type="submit"]:hover {
|
|||
|
|
color: var(--white) !important;
|
|||
|
|
transform: scale(.98, .98);
|
|||
|
|
-webkit-backface-visibility: hidden;
|
|||
|
|
-moz-backface-visibility: hidden;
|
|||
|
|
-ms-backface-visibility: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
button.plain, .button.plain, button:hover.plain, .button:hover.plain {
|
|||
|
|
box-shadow: none !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
button.plain:active, .button.plain:active {
|
|||
|
|
transform: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
button:active, .button:active, input[type="submit"]:active {
|
|||
|
|
transform: scale(.9, .9);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
select, input[type="text"], input[type="password"], textarea {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
textarea, textarea:focus-visible, textarea:focus {
|
|||
|
|
outline: none !important;
|
|||
|
|
outline-color: transparent;
|
|||
|
|
outline-style: none;
|
|||
|
|
outline-width: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
select:hover {
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
input[type=radio] {
|
|||
|
|
border: 0;
|
|||
|
|
clip: rect(0 0 0 0);
|
|||
|
|
height: 1px;
|
|||
|
|
margin: -1px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
padding: 0;
|
|||
|
|
position: absolute;
|
|||
|
|
width: 1px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
input[type=radio] ~ label:before {
|
|||
|
|
font-family: 'Font Awesome 6 Pro';
|
|||
|
|
display: inline-block;
|
|||
|
|
content: "\f111"; /* unselected, idle */
|
|||
|
|
font-weight: 400;
|
|||
|
|
letter-spacing: 10px;
|
|||
|
|
font-size: 1.2em;
|
|||
|
|
color: var(--oc-black);
|
|||
|
|
width: 1.4em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
input[type=radio]:checked ~ label:before {
|
|||
|
|
content: "\f058"; /* selected */
|
|||
|
|
font-weight: 800;
|
|||
|
|
font-size: 1.2em;
|
|||
|
|
color: var(--oc-blue-7);
|
|||
|
|
letter-spacing: 5px;
|
|||
|
|
}
|
|||
|
|
input[type=radio]:focus ~ label:before,
|
|||
|
|
input[type=radio]:focus ~ label {
|
|||
|
|
/*color: #0f62fe;*/
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
input[type=checkbox] {
|
|||
|
|
border: 0;
|
|||
|
|
clip: rect(0 0 0 0);
|
|||
|
|
height: 1px;
|
|||
|
|
margin: -1px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
padding: 0;
|
|||
|
|
position: absolute;
|
|||
|
|
width: 1px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
input[type=checkbox] ~ label:before {
|
|||
|
|
font-family: 'Font Awesome 6 Pro';
|
|||
|
|
display: inline-block;
|
|||
|
|
content: "\f0c8"; /* unselected, idle */
|
|||
|
|
font-weight: 400;
|
|||
|
|
letter-spacing: 10px;
|
|||
|
|
font-size: 1.2em;
|
|||
|
|
color: var(--oc-black);
|
|||
|
|
width: 1.4em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
input[type=checkbox]:checked ~ label:before {
|
|||
|
|
content: "\f14a"; /* selected */
|
|||
|
|
font-weight: 800;
|
|||
|
|
font-size: 1.2em;
|
|||
|
|
color: var(--oc-blue-7);
|
|||
|
|
letter-spacing: 5px;
|
|||
|
|
}
|
|||
|
|
input[type=checkbox]:focus ~ label:before,
|
|||
|
|
input[type=checkbox]:focus ~ label {
|
|||
|
|
/*color: #0f62fe;*/
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
ul.bulletless {
|
|||
|
|
list-style-type: none;
|
|||
|
|
padding: 0;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bulletless li {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.normal {
|
|||
|
|
font-weight: normal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Pre & Code */
|
|||
|
|
|
|||
|
|
code {
|
|||
|
|
background: var(--gray-4);
|
|||
|
|
padding: .2em .3em;
|
|||
|
|
border-radius: var(--small-radius);
|
|||
|
|
white-space: pre-wrap;
|
|||
|
|
word-wrap: break-word;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
pre, code {
|
|||
|
|
font-family: 'MD IO 0.4';
|
|||
|
|
font-size: 90%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
pre code {
|
|||
|
|
background: var(--gray-4);
|
|||
|
|
display: inline-block;
|
|||
|
|
padding: 1em;
|
|||
|
|
white-space: pre-wrap;
|
|||
|
|
word-wrap: break-word;
|
|||
|
|
word-break: break-all;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
pre {
|
|||
|
|
border-radius: var(--small-radius);
|
|||
|
|
margin-bottom: var(--spacing);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
code[class*="language-"],
|
|||
|
|
pre[class*="language-"] {
|
|||
|
|
-moz-tab-size: 4;
|
|||
|
|
-o-tab-size: 4;
|
|||
|
|
tab-size: 4;
|
|||
|
|
|
|||
|
|
-webkit-hyphens: none;
|
|||
|
|
-moz-hyphens: none;
|
|||
|
|
-ms-hyphens: none;
|
|||
|
|
hyphens: none;
|
|||
|
|
|
|||
|
|
white-space: pre-wrap;
|
|||
|
|
overflow-wrap: break-word;
|
|||
|
|
word-break: break-word;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Tables */
|
|||
|
|
|
|||
|
|
.table-container {
|
|||
|
|
overflow-x: auto;
|
|||
|
|
margin-bottom: 1em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
table {
|
|||
|
|
border-collapse: collapse;
|
|||
|
|
overflow-x: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
th {
|
|||
|
|
text-align: left;
|
|||
|
|
padding: 1em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
td {
|
|||
|
|
padding: 1em;
|
|||
|
|
border-top: 1px solid var(--border);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Links */
|
|||
|
|
|
|||
|
|
a:link, a:visited, a:hover, a:active {
|
|||
|
|
color: inherit;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Responsiveness */
|
|||
|
|
|
|||
|
|
.help i {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media only screen and (max-width: 800px) {
|
|||
|
|
:root {
|
|||
|
|
--spacing: 1rem;
|
|||
|
|
--radius: .5em;
|
|||
|
|
}
|
|||
|
|
body {
|
|||
|
|
font-size: 1em;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media only screen and (max-width: 600px) {
|
|||
|
|
header, main, footer {
|
|||
|
|
display: block;
|
|||
|
|
margin-left: 0;
|
|||
|
|
margin-right: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media only screen and (max-width: 500px) {
|
|||
|
|
.dashboard-label {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
.help-label {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
.help i {
|
|||
|
|
display: inline;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media only screen and (max-width: 450px) {
|
|||
|
|
:root {
|
|||
|
|
--spacing: 1rem;
|
|||
|
|
--radius: .5em;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media only screen and (max-width: 410px) {
|
|||
|
|
.logotype img {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
}
|