evectr.api
Version:
The official eVectr� API.
1,635 lines (1,540 loc) • 153 kB
CSS
/**********************************************************************/
/**********************************************************************/
/**********************************************************************/
/* DEFAULTS */
/******************************************************************/
/* GENERAL */
:root {
--bubble-size: 3.4rem;
--fnt-clr-main: #3E3E3E;
/* PRIMARY **************************/
--clr-P0: white;
--clr-P1: #373F51;
--clr-P2: #778DA9;
--clr-P3: #A6B1E1;
--clr-P4: #D8DBE2;
--clr-P5: #F6F6F8;
--clr-P6: #876F42;
/* FLAVOURS *************************/
--clr-F0: #7397B9;
--clr-F1: #BA737E;
--clr-F2: #9973BA;
--clr-F3: #73AFBA;
--clr-F4: #73BA8C;
--clr-F5: #AFBA73;
/* FLAVOURS (LIGHT) *****************/
--clr-F0-L: #9AAABA;
--clr-F1-L: #C68C95;
--clr-F2-L: #AB8CC6;
--clr-F3-L: #8CBDC6;
--clr-F4-L: #8CC6A0;
--clr-F5-L: #BDC68C;
/* FLAVOURS (DARK) ******************/
--clr-F0-D: #5F7C98;
--clr-F1-D: #AA6973;
--clr-F2-D: #8C69AA;
--clr-F3-D: #69A0AA;
--clr-F4-D: #69AA80;
--clr-F5-D: #A0AA69;
/* FLAVOURS (BOLD) ******************/
--clr-F0-B: transparent;
--clr-F1-B: #BA5766;
--clr-F2-B: #8C57BA;
--clr-F3-B: #57ABBA;
--clr-F4-B: #57BA7A;
--clr-F5-B: #ABBA57;
/* WIDTH / HEIGHT *******************/
--dialogue-mw: 33vw;
}
* {
position: relative;
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: "Font Awesome 5 Free", Helvetica, Arial;
font-size: calc(14px + (19 - 14) * (100vw - 320px) / (1920 - 320));
font-weight: 300;
max-width: 100vw;
color: var(--fnt-clr-main);
-moz-osx-font-smoothing: grayscale !important;
-webkit-font-smoothing: antialiased !important;
}
body {
position: relative;
overflow: hidden;
overflow-y: scroll;
max-width: 100vw;
width: 100vw;
}
html, body, .gridMain, .gridItemCopy {
scroll-behavior: smooth;
scroll-snap-type: y proximity;
}
/**************************************************************/
/* COLOR SCHEME */
/* PRIMARY ***********************************************/
/* P0: WHITE */
/* BACKGROUND */
label.input,
label.input .fill,
label.input > .tags,
label.input > label.tgl,
label.input.glyph::before,
label.input[data-rel]::after,
label.input[data-nfo]::after,
label.input > span,
label.input > div.scaffold,
span.mono.key::before,
span.mono.bold::before,
.gridStub,
.gridTabs .loaded::before,
.gridDrop > .drop > .menu > a,
.gridDrop > .drop > .menu > button,
.gridDrop > .drop > .menu > form > button,
.gridItemThreads > .bubble:hover::after {
background-color: white;
}
label.tgl,
label.tgl::after,
label.tgl::before,
label.input,
.gridMain.jumbo .gridItemHeader .title {
border-color: white;
}
input:-webkit-autofill,
select:-webkit-autofill,
textarea:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
box-shadow: 0 0 0px 1000px white inset;
}
/* COLOR */
.threadCont .threadBubble.you,
/* label.input[data-rel=" "]::after, */
.gridMain.cover .gridItemName h1,
.gridMain.cover .gridItemName .h1,
.gridMain.cover .gridItemName h1 > *,
.gridMain.cover .gridItemName .h1 > *,
.gridMain:not(.jumbo) .gridItemName.d h1,
.gridMain:not(.jumbo) .gridItemName.d .h1,
.gridMain:not(.jumbo) .gridItemName.d h1 > *,
.gridMain:not(.jumbo) .gridItemName.d .h1 > *,
.dialog.header > .heading > span.current,
.gridTabs.compact > *,
.dflt, .norm, .good, .info, .warn, .nope, .mayb,
.dflt-b::before, .dflt-a::after, .dflt-y::before, .dflt-n::after,
.norm-b::before, .norm-a::after, .norm-y::before, .norm-n::after,
.good-b::before, .good-a::after, .good-y::before, .good-n::after,
.info-b::before, .info-a::after, .info-y::before, .info-n::after,
.warn-b::before, .warn-a::after, .warn-y::before, .warn-n::after,
.nope-b::before, .nope-a::after, .nope-y::before, .nope-n::after,
.mayb-b::before, .mayb-a::after, .mayb-y::before, .mayb-n::after,
.dflt:not(.heading):not(.help):not(.alert) *,
.norm:not(.heading):not(.help):not(.alert) *,
.good:not(.heading):not(.help):not(.alert) *,
.info:not(.heading):not(.help):not(.alert) *,
.warn:not(.heading):not(.help):not(.alert) *,
.nope:not(.heading):not(.help):not(.alert) *,
.mayb:not(.heading):not(.help):not(.alert) *,
input.rdo[type="radio"]:checked + label.input.rdo > span,
.gridTabs.buttons>input.reveal.open:not(.trade):not(:checked)+label {
color: white;
}
/* MANDATE BACKGROUND */
.notused { background-color: white !important; }
/* MANDATE COLOR */
.heading.dflt, .heading.dflt *,
.heading.norm, .heading.norm *,
.heading.nope, .heading.nope *,
.heading.mayb, .heading.mayb *,
.heading.info, .heading.info *,
.heading.good, .heading.good *,
.heading.warn, .heading.warn *,
.gridMain.jumbo .gridItemHeader .title {
color: white !important;
}
/* P1: CHARCOAL */
/* BACKGROUND */
html,
.dialog.header,
.gridMain.jumbo .gridHeader,
.gridMain.jumbo .gridItemContent,
.gridMain.jumbo .gridItemDivide::after,
.gridMain.jumbo .gridItemContent,
.gridMain:not(.jumbo) .gridItemHeader {
background-color: #373F51;
}
/* COLOR */
.gridDrop > .drop > .menu > a,
.gridDrop > .drop > .menu > button,
.gridDrop > .drop > .menu > form > button,
.gridTabs.compact > * > label:hover,
.gridTabs.compact > .gridDrop:focus-within > label,
.gridSearch:focus-within ~ header.gridHeader label#btnSearch {
color: #373F51;
}
/* MANDATE BACKGROUND */
.notused { background-color: #373F51 !important; }
/* MANDATE COLOR */
.notused { color: #373F51 !important; }
/* P2: AIR SHADOW BLUE */
/* BACKGROUND */
input.rdo[type="radio"]:checked + label.input.rdo > span {
background-color: #778DA9;
}
.tags > input.tag:checked + label.tag::before {
border-color: #778DA9;
}
/* COLOR */
.notused { color: #778DA9; }
/* MANDATE BACKGROUND */
.notused { background-color: #778DA9 !important; }
/* MANDATE COLOR */
.notused { color: #778DA9 !important; }
/* P3: MAXIMUM BLUE-PURPLE */
/* BACKGROUND */
input[type="radio"][name="pmethod"]:checked + .ccard,
.tags > input.tag:checked + label.tag::before {
background-color: #A6B1E1;
}
.gridStub:hover {
border-color: #A6B1E1;
}
/* COLOR */
.notused { color: #A6B1E1; }
/* MANDATE BACKGROUND */
.notused { background-color: #A6B1E1 !important; }
/* MANDATE COLOR */
.notused { color: #A6B1E1 !important; }
/* P4: GAINSBORO */
/* BACKGROUND */
.ccard,
.gridDrop > .drop > .menu > a:hover,
.gridDrop > .drop > .menu > button:hover,
.gridDrop > .drop > .menu > form > button:hover,
.gridItemChatBox > .threadCont,
.threadMsg > .threadDate > span,
.tags > input.tag:checked + label.tag::before,
.gridDrop > .drop > .menu input[type="radio"].ctrl:focus + *,
.gridDrop > .drop > .menu input[type="radio"].ctrl:checked + * {
background-color: #D8DBE2;
}
.tags > label.tag::before,
.gridItemThreads > .bubble:hover::after {
border-color: #D8DBE2;
}
/* COLOR */
label.rating:not(.thumbs)[data-cnt="100"]>div>label {
color: #D8DBE2;
}
/* MANDATE BACKGROUND */
.notused { background-color: #D8DBE2 !important; }
/* MANDATE COLOR */
.notused { color: #D8DBE2 !important; }
/* P5: WHITE SMOKE */
/* BACKGROUND */
.cutout,
.dialog.box,
.loaded::before,
.shield>i::after,
.tags > label.tag::before,
.gridMain:not(.jumbo) .gridItemContent,
.gridTabs label.input,
.gridTabs label.input .fill,
.gridTabs label.input > .tags,
.gridTabs label.input > label.tgl,
.gridTabs label.input.glyph::before,
.gridTabs label.input[data-rel]::after,
.gridTabs label.input[data-nfo]::after,
.gridTabs label.input > span:first-child,
.gridTabs label.input > div.scaffold,
.gridTabs.compact > * > label:hover,
.threadCont .threadBubble.them,
.gridTabs.compact > .gridDrop:focus-within > label,
.gridTabs.compact > * > input[type="radio"].reveal:focus:checked + label,
.gridSearch:focus-within ~ header.gridHeader label#btnSearch {
background-color: #F6F6F8;
}
.gridTabs label.input > input:-webkit-autofill,
.gridTabs label.input > select:-webkit-autofill,
.gridTabs label.input > textarea:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #F6F6F8 inset;
box-shadow: 0 0 0px 1000px #F6F6F8 inset;
}
/* COLOR */
.gridTabs label.input[data-rel=" "]::after {
color: #F6F6F8;
}
/* MANDATE BACKGROUND */
.notused { background-color: #F6F6F8 !important; }
.cutout {
border-color: #F6F6F8 !important;
}
/* MANDATE COLOR */
.notused { color: #F6F6F8 !important; }
/* P6: FRENCH BISTRE */
/* BACKGROUND */
.notused { background-color: #876F42; }
.notused { border-color: #876F42; }
/* COLOR */
label.rating:not(.thumbs)[data-cnt="50" ]>div>label {
color: #876F42;
}
/* MANDATE BACKGROUND */
.notused { background-color: #876F42 !important; }
.notused { border-color: #876F42 !important; }
/* MANDATE COLOR */
.notused { color: #876F42 !important; }
/* FLAVOURS (MAIN) ***************************************/
/* F0: AIR SUPERIORITY BLUE */
/* BACKGROUND */
.heading.good,
.wait.show > div,
.gridTabs.buttons > label:hover,
.norm, .norm-b::before, .norm-a::after,
label.input:not(.rating):not(.toggle):not(.slc):focus-within {
background-color: #7397B9;
}
label.input > label.tgl:focus-within,
label.input.slc-txt:focus-within>select~.tags,
label.input.slc-txt:focus-within>select~input,
input[type="radio"][name="pmethod"]:checked + .ccard,
label.input:not(.rating):not(.toggle):not(.slc):focus-within,
input.rdo[type="radio"]:checked + label.input.rdo > span {
border-color: #7397B9;
}
/* COLOR */
.lock,
#title,
#settings > form > .auth:hover,
#settings > form > button#appdrawer:hover,
#settings > form > #logoutLbl > span#user a:hover,
label.input>select:focus+span {
color: #7397B9;
}
/* MANDATE BACKGROUND */
.notused { background-color: #7397B9 !important; }
/* MANDATE COLOR */
.notused { color: #7397B9 !important; }
/* F1: TURKISH ROSE (RED) */
/* BACKGROUND */
.heading.nope,
label.input .validate,
.nope, .nope-b::before, .nope-a::after {
background-color: #BA737E;
}
/* COLOR */
.notused { color: #AA6973; }
/* MANDATE BACKGROUND */
.notused { border-color: #AA6973 !important; }
/* MANDATE COLOR */
.notused { color: #AA6973 !important; }
/* F2: PURPLE MOUNTAIN MAJESTY */
/* BACKGROUND */
.heading.mayb,
.mayb, .mayb-b::before, .mayb-a::after {
background-color: #9973BA;
}
/* COLOR */
label.rating > div > label {
color: #9973BA;
}
/* MANDATE BACKGROUND */
.notused { border-color: #9973BA !important; }
/* MANDATE COLOR */
.notused { color: #9973BA !important; }
/* F3: MOONSTONE BLUE (TURQUOISE) */
/* BACKGROUND */
.heading.info,
.info, .info-b::before, .info-a::after {
background-color: #73AFBA;
}
/* COLOR */
.notused { color: #73AFBA; }
/* MANDATE BACKGROUND */
.notused { border-color: #73AFBA !important; }
/* MANDATE COLOR */
.notused { color: #73AFBA !important; }
/* F4: IGUANA GREEN */
/* BACKGROUND */
.heading.good,
.good, .good-b::before, .good-a::after {
background-color: #73BA8C;
}
/* COLOR */
.notused { color: #73BA8C; }
/* MANDATE BACKGROUND */
.notused { border-color: #73BA8C !important; }
/* MANDATE COLOR */
.notused { color: #73BA8C !important; }
/* F5: MISTY MOSS (YELLOW) */
/* BACKGROUND */
.heading.warn,
.warn, .warn-b::before, .warn-a::after {
background-color: #AFBA73;
}
/* COLOR */
.notused { color: #AFBA73; }
/* MANDATE BACKGROUND */
.notused { border-color: #AFBA73 !important; }
/* MANDATE COLOR */
.notused { color: #AFBA73 !important; }
/* FLAVOURS (LIGHT) ***************************************/
/* F0: AIR SUPERIORITY BLUE */
/* BACKGROUND */
.notused { background-color: #9AAABA; }
/* COLOR */
.notused { color: #9AAABA; }
/* MANDATE BACKGROUND */
.notused { background-color: #9AAABA !important; }
/* MANDATE COLOR */
.notused { color: #9AAABA !important; }
/* F1: TURKISH ROSE (RED) */
/* BACKGROUND */
.notused { background-color: #C68C95; }
/* COLOR */
.notused { color: #C68C95; }
/* MANDATE BACKGROUND */
.notused { background-color: #C68C95 !important; }
/* MANDATE COLOR */
.notused { color: #C68C95 !important; }
/* F2: PURPLE MOUNTAIN MAJESTY */
/* BACKGROUND */
.threadCont .threadBubble.you {
background-color: #AB8CC6;
}
/* COLOR */
.notused { color: #AB8CC6; }
/* MANDATE BACKGROUND */
.notused { background-color: #AB8CC6 !important; }
/* MANDATE COLOR */
.notused { color: #AB8CC6 !important; }
/* F3: MOONSTONE BLUE (TURQUOISE) */
/* BACKGROUND */
.notused { background-color: #8CBDC6; }
/* COLOR */
.notused { color: #8CBDC6; }
/* MANDATE BACKGROUND */
.notused { background-color: #8CBDC6 !important; }
/* MANDATE COLOR */
.notused { color: #8CBDC6 !important; }
/* F4: IGUANA GREEN */
/* BACKGROUND */
.notused { background-color: #8CC6A0; }
/* COLOR */
.notused { color: #8CC6A0; }
/* MANDATE BACKGROUND */
.notused { background-color: #8CC6A0 !important; }
/* MANDATE COLOR */
.notused { color: #8CC6A0 !important; }
/* F5: MISTY MOSS (YELLOW) */
/* BACKGROUND */
.notused { background-color: #BDC68C; }
/* COLOR */
.notused { color: #BDC68C; }
/* MANDATE BACKGROUND */
.notused { background-color: #BDC68C !important; }
/* MANDATE COLOR */
.notused { color: #BDC68C !important; }
/* FLAVOURS (DARK) ***************************************/
/* F0: AIR SUPERIORITY BLUE */
/* BACKGROUND */
.heading.reveal.norm:hover,
.heading.reveal.norm:hover+.heading,
.norm:not(.heading):not(.tgl):not(.help):not(.alert):hover,
.norm:not(.heading):not(.tgl):not(.help):not(.alert):active,
.norm:not(.heading):not(.tgl):not(.help):not(.alert):focus,
.gridTabs.buttons > input.reveal.open:not(.trade):not(:checked) + label:not(:hover) {
background-color: #5F7C98;
}
/* COLOR */
a {
color: #5F7C98;
}
/* MANDATE BACKGROUND */
.notused { border-color: #5F7C98 !important; }
/* MANDATE COLOR */
.notused { color: #5F7C98 !important; }
/* F1: TURKISH ROSE (RED) */
/* BACKGROUND */
.counter,
.heading.reveal.nope:hover,
.heading.reveal.nope:hover+.heading,
.nope:not(.heading):not(.tgl):not(.help):not(.alert):hover,
.nope:not(.heading):not(.tgl):not(.help):not(.alert):active,
.nope:not(.heading):not(.tgl):not(.help):not(.alert):focus {
background-color: #AA6973;
}
label.input .validate {
border-color: #AA6973;
}
/* COLOR */
.notused { color: #AA6973; }
/* MANDATE BACKGROUND */
.notused { border-color: #AA6973 !important; }
/* MANDATE COLOR */
.notused { color: #AA6973 !important; }
/* F2: PURPLE MOUNTAIN MAJESTY */
/* BACKGROUND */
.heading.reveal.mayb:hover,
.heading.reveal.mayb:hover+.heading,
.mayb:not(.heading):not(.tgl):not(.help):not(.alert):hover,
.mayb:not(.heading):not(.tgl):not(.help):not(.alert):active,
.mayb:not(.heading):not(.tgl):not(.help):not(.alert):focus {
background-color: #8C69AA;
}
/* COLOR */
.notused { color: #8C69AA; }
/* MANDATE BACKGROUND */
.notused { border-color: #8C69AA !important; }
/* MANDATE COLOR */
.notused { color: #8C69AA !important; }
/* F3: MOONSTONE BLUE (TURQUOISE) */
/* BACKGROUND */
.heading.reveal.info:hover,
.heading.reveal.info:hover+.heading,
.info:not(.heading):not(.tgl):not(.help):not(.alert):hover,
.info:not(.heading):not(.tgl):not(.help):not(.alert):active,
.info:not(.heading):not(.tgl):not(.help):not(.alert):focus {
background-color: #69A0AA;
}
/* COLOR */
.notused { color: #69A0AA; }
/* MANDATE BACKGROUND */
.notused { border-color: #69A0AA !important; }
/* MANDATE COLOR */
.notused { color: #69A0AA !important; }
/* F4: IGUANA GREEN */
/* BACKGROUND */
.heading.reveal.good:hover,
.heading.reveal.good:hover+.heading,
.good:not(.heading):not(.tgl):not(.help):not(.alert):hover,
.good:not(.heading):not(.tgl):not(.help):not(.alert):active,
.good:not(.heading):not(.tgl):not(.help):not(.alert):focus {
background-color: #69AA80;
}
/* COLOR */
.notused { color: #69AA80; }
/* MANDATE BACKGROUND */
.notused { border-color: #69AA80 !important; }
/* MANDATE COLOR */
.notused { color: #69AA80 !important; }
/* F5: MISTY MOSS (YELLOW) */
/* BACKGROUND */
.heading.reveal.warn:hover,
.heading.reveal.warn:hover+.heading,
.warn:not(.heading):not(.tgl):not(.help):not(.alert):hover,
.warn:not(.heading):not(.tgl):not(.help):not(.alert):active,
.warn:not(.heading):not(.tgl):not(.help):not(.alert):focus {
background-color: #A0AA69;
}
/* COLOR */
.notused { color: #A0AA69; }
/* MANDATE BACKGROUND */
.notused { border-color: #A0AA69 !important; }
/* MANDATE COLOR */
.notused { color: #A0AA69 !important; }
/* FLAVOURS (BOLD) ***************************************/
/* F0: AIR SUPERIORITY BLUE */
/* BACKGROUND */
.notused { background-color: transparent; }
/* COLOR */
.notused { color: transparent; }
/* MANDATE BACKGROUND */
.notused { background-color: transparent !important; }
/* MANDATE COLOR */
.notused { color: transparent !important; }
/* F1: TURKISH ROSE (RED) */
/* BACKGROUND */
.notused { background-color: #BA5766; }
/* COLOR */
label.input[data-rel="*"]::after {
color: #BA5766;
}
/* MANDATE BACKGROUND */
.notused { background-color: #BA5766 !important; }
/* MANDATE COLOR */
label.rating:not(.thumbs)>div>[data-strike] {
color: #BA5766 !important;
}
/* F2: PURPLE MOUNTAIN MAJESTY */
/* BACKGROUND */
.notused { background-color: #8C57BA; }
/* COLOR */
.notused { color: #8C57BA; }
/* MANDATE BACKGROUND */
.notused { background-color: #8C57BA !important; }
/* MANDATE COLOR */
.notused { color: #8C57BA !important; }
/* F3: MOONSTONE BLUE (TURQUOISE) */
/* BACKGROUND */
.notused { background-color: #57ABBA; }
/* COLOR */
.shield.credential>i::before { color: #57ABBA; }
/* MANDATE BACKGROUND */
.notused { background-color: #57ABBA !important; }
/* MANDATE COLOR */
.notused { color: #57ABBA !important; }
/* F4: IGUANA GREEN */
/* BACKGROUND */
.notused { background-color: #57BA7A; }
/* COLOR */
.shield.identified>i::before { color: #57BA7A; }
/* MANDATE BACKGROUND */
.notused { background-color: #57BA7A !important; }
/* MANDATE COLOR */
.notused { color: #57BA7A !important; }
/* F5: MISTY MOSS (YELLOW) */
/* BACKGROUND */
.notused { background-color: #ABBA57; }
/* COLOR */
label.input[data-rel="~"]::after,
label.rating:not(.thumbs)[data-cnt="500"]>div>label {
color: #ABBA57;
}
/* MANDATE BACKGROUND */
.notused { background-color: #ABBA57 !important; }
/* MANDATE COLOR */
.notused { color: #ABBA57 !important; }
/**************************************************************/
/* MODAL */
body > div#modal-root {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
top: 0; left: 0;
height: 100vh;
width: 100vw;
pointer-events: none;
}
body > div#modal-root:not(:empty) {
background-color: rgba(0,0,0,.40);
pointer-events: all;
}
body > div#modal-root > * {
margin-bottom: 15vh;
border-radius: .5em;
}
.dialog {
display: grid;
grid-gap: 0 0;
max-width: var(--dialogue-mw);
}
.dialog.header {
width: min-content;
min-width: 100%;
grid-template-columns: auto 1.75em;
grid-template-areas: "heading close";
border-radius: .5em .5em 0 0;
padding: .5em;
padding-left: .75em;
z-index: 1;
}
.dialog.header > .heading {
grid-area: heading;
display: grid;
justify-content: start;
margin-right: 1em;
}
.dialog.header > .heading > span.current {
min-width: max-content;
cursor: default;
}
.dialog.header > .heading > span::before,
.dialog.header > .heading > span:not(.current) {
color: rgb(165, 165, 165);
}
.dialog.header > .heading > span {
display: flex;
justify-content: space-around;
align-items: center;
}
.dialog.header > .heading > span:not(:first-of-type)::before {
content: "\f054";
margin: 0 .5em;
}
.dialog.header > button.close {
border-radius: .25em;
}
.dialog.header > .close {
grid-area: close;
width: 2em !important;
}
.dialog.box {
padding: 1.5em 1em;
padding-top: 1em;
border-radius: 0 0 .5em .5em;
overflow: hidden;
}
.dialog.box > div {
overflow: hidden;
}
.dialog.box > div:not(.show) {
opacity: 0;
max-width: 0;
max-height: 0;
transition: opacity .5s ease,
padding .25s ease,
max-height .5s ease .6s,
max-width .5s ease;
}
.dialog.box > div.show {
opacity: 1;
max-width: 33vw;
max-height: 50vh;
padding: 0 .25em;
transition: padding .25s ease,
max-height .5s ease,
max-width .5s ease;
}
.dialog.box > div > * {
width: max-content;
height: max-content;
max-width: calc(var(--dialogue-mw) - 3rem);
}
/**************************************************************/
/* SCROLL-SNAP */
.gridItemSearch,
.gridItemContent { scroll-snap-margin-top: -4.76rem; scroll-margin-top: -4.76rem; }
.gridItemCopy > * { scroll-snap-margin-top: 3rem; scroll-margin-top: 3rem; }
.gridItemCopy .block:not(.tkn) {
scroll-snap-margin-top: 3rem;
scroll-margin-top: 3rem;
}
.gridItemSearch { scroll-snap-align: end; }
.panel.slab,
.gridItemContent,
.gridItemCopy > *,
.gridItemCopy>.panel>.body>.block { scroll-snap-align: start; }
/**************************************************************/
/* HEADINGS */
h1, .h1 { font-size: 1.90rem; /* font-size: calc(1.2 * 1.2 * 1.2 * 1.2 * 1.2 * 1rem); */ }
h2, .h2 { font-size: 1.60rem; /* font-size: calc(1.2 * 1.2 * 1.2 * 1.2 * 1rem); */ }
h3, .h3 { font-size: 1.40rem; /* font-size: calc(1.2 * 1.2 * 1.2 * 1rem); */ }
h4, .h4 { font-size: 1.25rem; /* font-size: calc(1.2 * 1.2 * 1rem); */ }
h5, .h5 { font-size: 1.12rem; /* font-size: calc(1.2 * 1rem); */ }
h6, .h6 { font-size: 1.00rem; }
h1, .h1, h2, .h2, h3, .h3,
h4, .h4, h5, .h5, h6, .h6 {
font-family: inherit;
font-weight: 400;
color: #444444;
/* margin: .27em 0; */
padding: .27em 0;
}
h1 .small, .h1 .small, h1 small, .h1 small,
h2 .small, .h2 .small, h2 small, .h2 small,
h3 .small, .h3 .small, h3 small, .h3 small,
h4 .small, .h4 .small, h4 small, .h4 small,
h5 .small, .h5 .small, h5 small, .h5 small,
h6 .small, .h6 .small, h6 small, .h6 small { font-size: 65%; }
/**************************************************************/
/* TEXT */
caption { text-align: right; margin-bottom: 1rem; }
hr {
border: none;
border-top-style: inset;
border-top-width: 1px;
}
hr.dashed {
border-top-style: dashed;
}
ol:not(.bare) > li,
ul:not(.bare) > li {
padding-inline-start: 1em;
margin-bottom: 1em;
}
li > ol:not(.bare),
li > ul:not(.bare) { margin-top: 1em; }
ol:not(.bare),
ul:not(.bare) {
font-size: .85em;
font-weight: 400;
margin-left: 3em;
}
dt { font-weight: 700; }
dd, dt { line-height: 1.42857143; }
i.fas:first-child:not(:only-child) { margin-right: .25em; }
i.fas:last-child:not(:only-child) { margin-left: .25em; }
a, button { cursor: pointer !important; }
button:disabled { cursor: not-allowed !important; }
a { /*color: #337ab7;*/ text-decoration: none; font-weight: 400; }
a.flat { color: inherit; }
p.text { font-size: .9em; }
p.mini-text { font-size: .8em; }
.legal { text-align: justify; font-family: Adobe Garamond; }
p, ol, ul { line-height: 1.5; }
ol, ul, p, address:not(.flat) { margin-bottom: 1em; }
.accounting {
width: 100%;
display: flex;
justify-content: space-between;
}
.accounting::before { content: '$'; }
.accounting[data-cur]::before { content: attr(data-cur); }
span.example {
font-style: italic;
}
span.example::before {
content: 'i.e.';
margin-right: .5em;
font-weight: bold;
}
.bracket { display: inline; }
.bracket::before { content: '('; }
.bracket::after { content: ')'; }
.bracket > span:not(:last-child)::after {
content: ',';
font: "Font Awesome 5 Free", Helvetica, Arial;
font-weight: normal;
}
.bracket > span[data-delim]:not(:last-child)::after {
content: attr(data-delim);
}
.bracket.space > span:not(:last-child)::after {
padding-right: .25em;
}
blockquote {
border-left: .2rem solid #666;
color: #666;
font-style: italic;
padding: .25rem .5rem;
}
sup {
color: inherit;
font-size: .6em;
margin: 0 .5rem;
}
/**************************************************************/
/* CODE */
.code {
position: relative;
width: 100%;
/**/ background-color: #f8f8f8;
border: solid 1px #cacaca;
border-radius: .15em;
-webkit-overflow-scrolling: touch;
overflow: auto;
}
.code > div {
position: relative;
width: 100%;
position: absolute;
padding: 0 1em;
}
code {
display: block;
position: relative;
font-family: monospace;
font-size: .65rem;
white-space: pre;
margin: 0 !important;
padding: 0 .5em;
-webkit-margin-before: 0 !important;
-webkit-margin-after: 0 !important;
-webkit-margin-start: 0 !important;
-webkit-margin-end: 0 !important;
}
/**************************************************************/
/* LOCALE */
address {
-webkit-user-select: all;
-moz-user-select: all;
-ms-user-select: all;
-o-user-select: all;
user-select: all;
}
address > * {
margin-bottom: .125em;
font-weight: 400;
}
address > .name {
font-weight: 600;
margin-bottom: .25em;
}
address > .name,
address > .street,
address > .country {
display: block;
}
address > .city,
address > .region,
address > .postal,
address.flat > .name,
address.flat > .street,
address.flat > .country {
display: inline-block;
}
address > *:empty {
display: none;
visibility: hidden;
}
address.collapse,
address.flat > * {
margin-bottom: 0;
}
address > *:not(:empty) ~ .region:not(:empty)::before,
address > *:not(:empty) ~ .postal:not(:empty)::before,
address.flat > *:not(:empty) ~ *:not(:empty)::before {
content: '\00a0';
}
address > .city:not(:empty)::after,
address.flat > .name:not(:empty)::after,
address.flat > .street:not(:empty)::after,
address.flat > .city:not(:empty)::after,
address.flat > .postal:not(:empty)::after,
address.flat > .region:not(:empty) + .postal:empty::after {
content: ',';
}
address.flat {
display: inline;
}
time { font-weight: bold; }
/**************************************************************/
/* MISC */
.shield>i::before,
.gridSearch::before,
select+span:empty::before,
label.input.glyph::before,
label.input[data-rel]::after,
label.rating:not(.thumbs)>div>label,
label.input[data-nfo]>div.help::before {
font-weight: 900;
font-family: "Font Awesome 5 Free" !important;
font-style: normal !important;
font-variant: normal !important;
text-rendering: auto !important;
/* line-height: 1; */
-moz-osx-font-smoothing: grayscale !important;
-webkit-font-smoothing: antialiased !important;
}
.invisible {
position: relative;
top: 0; left: 0;
opacity: 0;
position: absolute;
}
.code,
.ccard,
label.tgl,
.gridStub,
.dialog.header,
.tkn:not(.heading):not(.small),
button:not(.clear):not(.tkn.small),
[data-full]::before,
.table .column.left,
label.input:not(.toggle),
.gridTabs.buttons > label,
.gridTabs.buttons > div.default,
body > div#modal-root > *,
.gridDrop > .drop > .menu > a,
.gridDrop > .drop > .menu > button,
.gridDrop > .drop > .menu > form > button,
.gridItemChatBox > .threadCont,
.threadCont .threadBubble,
.gridItemThreads > .bubble:hover::after {
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.15);
}
.table .column:not(.left) {
box-shadow: -4px 0px 0px 0px white,
0px 4px 6px -1px rgba(0, 0, 0, 0.15);
}
.panel.slab > label.heading:first-of-type {
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.15),
38px 4px 6px -1px rgba(0, 0, 0, 0.15);
}
.shield>i,
label.rating:not(.thumbs)>div>label::before,
label.rating:not(.thumbs)>div>label[data-rating-half]::before,
label.rating:not(.thumbs)[data-cnt]>div>[data-rating-half]::before {
text-shadow: 0px 4px 6px rgba(0, 0, 0, 0.15);
}
span.mono.key::before {
box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.15);
}
input.rdo[type="radio"]:checked + label.input.rdo > span {
box-shadow: 0px 4px 3px -1px rgba(0, 0, 0, 0.15) inset;
}
input.rdo[type="radio"]:checked + label.input.rdo {
box-shadow: none;
}
/* Don't show shadows when selecting text */
/*::-moz-selection { background: #5af; color: #fff; text-shadow: none; }*/
/*::selection { background: #5af; color: #fff; text-shadow: none; }*/
/******************************************************************/
/* FORMS */
/**************************************************************/
/* INPUTS */
input {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
input[type="value"] {
background: inherit !important;
-webkit-appearance: attachment;
font-size: inherit;
font-weight: inherit;
flex-grow: 1;
flex-shrink: 1;
text-align: end;
border: none;
}
label {
white-space: nowrap;
font-weight: 400;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
label[role="menuitem"] {
cursor: pointer;
}
label.input,
label.toggle,
label.tgl,
label.rating,
label.rating > div {
position: relative;
display: flex !important;
flex-wrap: nowrap;
flex-flow: row;
align-items: center;
/* min-height: 2rem; */
/* background-color: #cccccc; */
}
label.input {
justify-content: stretch;
width: 100%;
line-height: 1.5;
color: var(--fnt-clr-main);
font-size: .9rem !important;
font-weight: 400;
border-collapse: collapse;
border-style: solid;
border-width: 1px;
border-radius: .15em;
transition: border .125s ease-in-out;
}
label.input:not(.toggle):not(.rating)>*,
label.input::after, label.input::before {
position: relative;
display: block;
}
label.input::after,
label.input.glyph::before {
z-index: 9;
}
label.input::after {
width: .8em;
/* max-height: 2rem; */
align-self: stretch;
border-radius: 0 .15em .15em 0;
content: '';
}
label.input:not([data-rel]):not([data-nfo])::after {
width: .4em;
}
label.input * {
border: none;
border-collapse: collapse;
border-radius: 0;
}
label.input .fill,
label.input > span,
input.rdo + label.input.rdo > span {
padding: .5em .75em;
color: inherit;
font: inherit;
font-size: .8em /* !important */;
resize: none;
}
label.input .grow:not([type="radio"]),
label.input.slc-txt>select[data-restrict] {
max-width: calc(100% - .5em);
min-width: 5em;
flex-basis: 5em;
}
label.input .grow,
label.input.slc-txt>select[data-restrict] {
flex-grow: 1;
flex-shrink: 1;
}
label.input > textarea:focus {
resize: vertical;
}
label.input > label.input {
border: none;
}
label.input > span,
input.rdo + label.input.rdo > span {
flex-shrink: 2;
flex-grow: 0;
font-weight: 600;
}
label.input > span { flex-basis: 25%; }
label.input > span:first-child { padding-right: .5em; }
label.input > span:last-child { padding-left: .5em; z-index: 10; }
input.rdo + label.input.rdo > *,
label.input.rating > span:first-child,
label.input.toggle > span:first-child {
background: inherit;
}
input.rdo,
input[type="checkbox"].hoc,
label.input > label.tgl > input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
}
label.input.compact {
width: auto;
}
/**************************************************************/
/* TAGS */
label.input > .tags {
display: flex !important;
flex-flow: row wrap;
padding: 0 .25em 0 0 !important;
font: inherit;
}
.tags > input.tag {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: absolute !important;
z-index: 0;
opacity: 0;
}
.tags > label.tag {
font-size: .8em;
line-height: 1.5;
padding: .5em .6em;
background: inherit;
z-index: 1;
}
.tags > label.tag > span.more {
font-size: .7em;
font-style: italic;
line-height: 1em;
vertical-align: super;
}
.tags > label.tag > span.more::before {
content: ' (';
}
.tags > label.tag > span.more::after {
content: ')';
}
.tags > label.tag::before {
content: ' ';
display: block;
position: relative;
top: 0; left: 0;
margin: .3em .3em;
width: calc(100% - .6em);
height: 1.8em;
position: absolute;
border-style: solid;
border-width: 1px;
border-radius: .15em;
}
/**************************************************************/
/* SUGGEST/VALIDATE */
label.input .suggest,
label.input .validate,
.gridItemSearchBox .suggest {
position: relative;
display: flex !important;
left: 0;
width: 100%;
position: absolute !important;
display: flex;
flex-flow: column nowrap;
}
label.input .validate {
opacity: 0;
}
label.input .suggest,
.gridItemSearchBox .suggest { top: 100%;}
label.input .validate,
label.input .suggest:not(:empty),
.gridItemSearchBox .suggest:not(:empty) {
margin-top: .5em;
box-shadow: -3px 4px 5px -3px rgba(0, 0, 0, .25);
border-style: solid;
border-width: 1px;
border-radius: .15em;
}
label.input .suggest:not(:empty),
.gridItemSearchBox .suggest:not(:empty) {
background: #fcfcfc;
border-color: #acacac;
}
label.input .validate {
bottom: 100%; left: -5px;
margin-bottom: -2px;
}
label.input .suggest.open,
.gridItemSearchBox .suggest.open {
z-index: 9997;
}
label.input [name]:not(:invalid) ~ .validate,
label.input .StripeElement:not([class*="invalid"]):not([class*="empty"]) ~ .validate,
.submit:not(:hover) ~ * label.input input:not([form]):placeholder-shown ~ .validate {
pointer-events: none;
visibility: hidden;
}
label.input [name]:invalid ~ .validate:hover,
label.input .StripeElement--empty ~ .validate:hover,
label.input .StripeElement--invalid ~ .validate:hover,
.submit:hover ~ * label.input [name]:not([form]):invalid ~ .validate,
.submit:hover ~ * label.input .StripeElement--empty ~ .validate,
.submit:hover ~ * label.input .StripeElement--invalid ~ .validate,
label.input input:focus:invalid:not(:placeholder-shown) ~ .validate,
label.input input:hover:invalid:not(:placeholder-shown) ~ .validate {
pointer-events: auto;
visibility: visible;
z-index: 9996;
opacity: 1;
}
label.input .suggest > input,
.gridItemSearchBox .suggest > input {
position: absolute;
opacity: 0;
}
label.input .suggest:not(.open),
.gridItemSearchBox .suggest:not(.open) {
pointer-events: none !important;
visibility: hidden;
}
label.input .suggest > label,
label.input .validate > label,
.gridItemSearchBox .suggest > label {
position: relative;
padding: .5em;
font-size: .9em;
background: inherit;
cursor: pointer;
border-top: solid 1px transparent;
border-bottom: solid 1px transparent;
color: #464646;
}
label.input .validate > label {
border: none;
color: white;
font-size: .65rem;
padding: .25em .5rem;
}
label.input .suggest > label > .more,
.gridItemSearchBox .suggest > label > .more {
vertical-align: super;
font-style: italic;
font-size: .9em;
line-height: 1em;
color: #7C7C7C;
}
label.input .suggest > label > .more::before,
.gridItemSearchBox .suggest > label > .more::before {
margin-left: .25em;
content: ' (';
}
label.input .suggest > label > .more::after,
.gridItemSearchBox .suggest > label > .more::after {
content: ')';
}
label.input .validate > label:hover {
cursor: help;
}
label.input .suggest > label:hover,
label.input .validate > label:hover,
.gridItemSearchBox .suggest > label:hover,
form:invalid .submit:hover ~ * label.input > .validate > label {
white-space: normal;
}
label.input .suggest > label > *,
.gridItemSearchBox .suggest > label > * {
pointer-events: none !important;
}
label.input .suggest > label:hover,
label.input .suggest > input:checked + label,
.gridItemSearchBox .suggest > label:hover,
.gridItemSearchBox .suggest > input:checked + label {
background: #f0f0f0;
border-color: #dbdbdb;
}
label.input .suggest > label:first-of-type:hover,
label.input .suggest > input:first-of-type:checked + label,
.gridItemSearchBox .suggest > label:first-of-type:hover,
.gridItemSearchBox .suggest > input:first-of-type:checked + label {
border-top-color: transparent;
}
label.input .suggest > label:last-of-type:hover,
label.input .suggest > input:last-of-type:checked + label,
.gridItemSearchBox .suggest > label:last-of-type:hover,
.gridItemSearchBox .suggest > input:last-of-type:checked + label {
border-bottom-color: transparent;
}
/**************************************************************/
/* GLYPHS */
label.input.slc-txt>select[data-restrict],
label.input.glyph:not(.slc-txt)>:not(span):not(label):not(.tag):not(.validate):not(.scaffold) {
max-width: calc(100% - 2.7em) !important;
}
label.input.glyph::before {
flex-basis: 2em;
flex-grow: 1;
border-radius: .15em 0 0 .15em;
/* font-size: 1rem; */
font-size: 1em;
}
/**************************************************************/
/* SELECTS */
label.input>select {
cursor: context-menu;
font-weight: 400 !important;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
label.input>select+span:empty {
flex-grow: 0;
flex-shrink: 0;
max-width: 0;
pointer-events: none;
}
label.input>select+span:empty::before {
position: relative;
content: '\f0d7';
/* line-height: 2rem; */
/* line-height: 2em; */
margin-right: 1em;
left: -.75em;
}
label.input[data-rel="*"].slc-txt.rev>select+span:empty::before,
label.input[data-rel="*"]:not(.slc-txt)>select+span:empty::before {
left: -1em;
}
label.input.slc-txt>select:not([data-restrict]) { width: 5rem; }
label.input.slc-txt.rev>select[data-restrict]~input { display: none; }
label.input.slc-txt>select~.tags,
label.input.slc-txt>select~input {
border-left: solid 1px #cacaca;
}
label.input.slc-txt>select~input {
width: calc(100% - 7.5em);
border-radius: 0;
margin: 0 !important;
}
label.input.slc-txt>select~input[type="number"] {
padding-left: 0;
text-align: left;
}
label.input.slc-txt.rev::after { order: 5; }
label.input.slc-txt.rev>select+span { order: 4; }
label.input.slc-txt.rev>select { order: 3; }
label.input.slc-txt.rev>select~input[type="number"] { order: 2; }
label.input.slc-txt.rev::before { order: 1; }
label.input.slc-txt.rev>select~input {
text-align: right;
border-right: solid 1px #cacaca;
border-left: none;
}
/**************************************************************/
/* DATES */
label.input.date {
justify-content: flex-start;
/* width: 12em; */
}
label.input.date>i,
label.input.date>[type="number"] {
font-size: 1.1em !important;
min-width: 0;
line-height: 1 !important;
}
label.input.date>i,
label.input.date>input {
/* min-height: 2rem; */
padding-top: .41em !important;
padding-bottom: .41em !important;
padding-left: 0;
padding-right: 0;
}
label.input.date>input::placeholder {
font-size: .75em;
line-height: 1.5;
font-weight: 100;
}
label.input.date> { min-width: 1.5em; }
label.input.date>input[size="4"] { min-width: 2.5em; }
label.input.date>i { min-width: .5em; text-align: center; }
label.input.date>input:nth-last-of-type(2) { padding-right: .25em; }
label.input.date.time>input[size="4"]:nth-of-type(3),
label.input.date[data-rel]>input:nth-last-of-type(2) { padding-left: .2em; padding-right: .5em; }
label.input.date[data-rel]>input:nth-last-of-type(3) { padding-right: .2em; }
label.input.date>input[size="2"]:nth-of-type(2) { text-align: center; }
label.input.date>input[size="2"]:nth-of-type(1),
label.input.date.time>input[size="2"]:nth-of-type(4) { text-align: end; }
label.input.date>input[size="4"],
label.input.date.time>input[size="2"]:nth-of-type(5) { text-align: start; }
label.input.date>i::before { content: '/'; }
label.input.date.time { width: 15em; }
label.input.date.time>input[size="4"]:nth-of-type(3) {
padding-left: .2em;
padding-right: .5em;
}
label.input.date.time>i:last-of-type { min-width: .25em; }
label.input.date.time>i:last-of-type::before { content: ':'; }
label.input.date>[type=number]::-webkit-inner-spin-button,
label.input.date>[type=number]::-webkit-outer-spin-button {
margin: 0;
-webkit-appearance: none;
appearance: none;
}
/**************************************************************/
/* RADIO GROUP */
label.input.rdo {
font-weight: 500;
width: auto;
}
label.input.rdo,
label.input.rdo > span {
border-radius: 2em;
}
input.rdo,
label.input.rdo {
padding: 0;
}
input.rdo[type="radio"]:checked + label.input.rdo {
line-height: initial;
}
input[type="radio"]:not(:checked) + label.input.rdo {
cursor: pointer;
}
input[type="radio"]:not(:checked) + label.input.rdo:hover {
filter: brightness(90%);
}
/**************************************************************/
/* CHECKBOX TOGGLE */
/* GENERAL *************************************************/
label.toggle {
border: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
label.rating,
label.input.toggle {
background-color: transparent;
/* height: calc(2rem + 2px); */
justify-content: flex-end;
}
label.input > label.tgl {
flex-grow: 0;
margin-left: .5em;
border-left-style: solid;
border-right-style: solid;
border-width: 1px;
border-color: #e4e4e4;
overflow: hidden;
cursor: ew-resize;
}
label.input > span:first-child {
text-align: right;
}
input[type="checkbox"].hoc {
position: absolute;
}
label.input > label.tgl > input[type="checkbox"],
input[type="checkbox"].hoc+label.input>label.tgl>div {
order: 1;
-webkit-transition: all .15s ease-out;
transition: all .15s ease-out;
}
label.input > label.tgl > input[type="checkbox"]:checked,
input[type="checkbox"].hoc:checked+label.input>label.tgl>div {
max-width: 100%;
min-width: 100%;
width: 100%;
}
label.input > label.tgl > input[type="checkbox"]:not(:checked),
input[type="checkbox"].hoc:not(:checked)+label.input>label.tgl>div {
max-width: 0;
min-width: 0;
width: 0;
}
input[type="checkbox"].hoc+.input+.reveal {
overflow: hidden;
transition: max-height .5s ease, padding-bottom .25s ease, opacity .5s ease;
max-height: 0;
opacity: 0;
}
input[type="checkbox"].hoc+.input {
transition: margin .5s ease;
}
input[type="checkbox"].hoc:checked+.input,
input[type="checkbox"].hoc:not(:checked)+.input+.reveal {
padding-bottom: 0 !important;
}
input[type="checkbox"].hoc:checked+.input+.reveal {
max-height: 100vh;
opacity: 1;
}
label.input > label.tgl::after,
label.input > label.tgl::before {
line-height: 2.1;
text-align: center;
}
label.input > label.tgl::before {
max-width: calc(100% - .5rem);
min-width: calc(100% - .5rem);
}
label.input > label.tgl::after {
max-width: calc(100% + 1px - .5rem);
min-width: calc(100% + 1px - .5rem);
}
label.input > label.tgl::before { order: 2; content: 'YES'; }
label.input > label.tgl::after { order: 3; content: 'NO'; }
label.input > label.tgl[data-yes]::before {
content: attr(data-yes) attr(data-ycon);
}
label.input > label.tgl[data-no ]::after {
content: attr(data-no) attr(data-ncon);
}
label.input > label.tgl>span {
text-align: right;
}
label.input > label.tgl>input,
label.input > label.tgl::after,
label.input > label.tgl::before {
position: relative;
display: inline-table;
flex-grow: 0;
flex-shrink: 0;
left: -100%;
}
label.input > label.tgl,
label.input > label.tgl > input[type="checkbox"] {
border-radius: .25em;
}
.tgl::before {
margin-right: .5rem;
background-color: #e7e7e7;
border-right-style: solid;
border-right-width: 1px;
}
.tgl::after {
margin-left: .5rem;
background-color: #cccccc;
border-left-style: solid;
border-left-width: 1px;
}
/* BACKGROUND *************************************************/
.norm-y.tgl::before { background-color: #286090; }
.norm-n.tgl::after { background-color: #548fc0; }
.norm-y.tgl:not(:hover):not(:focus):not(:active)::before { background-color: #337ab7; }
.norm-n.tgl:not(:hover):not(:focus):not(:active)::after { background-color: #7e9eb9; }
.good-y.tgl::before