input:focus { font-variation-settings: "wght" 450; } input:disabled { opacity: 0.3; } /* /////////////////////////////////////////////////////// */ /* */ /* /////////// ---------- JS --------- /////////// */ /* */ /* /////////////////////////////////////////////////////// */ .dropable { } /* target for dndmove */ .uploadZone { } .focus { } .slide { } .asbm { } .asbm *[type=submit] { display: none !important; } .asbm .field *[type=submit] { display: block !important; } .asbm li { /* display: contents; */ } .asbm input[type] + label { /* display: grid; grid-template-columns: inherit; color: inherit; opacity: inherit; grid-gap: inherit;*/ } *[conts] { display: contents; } /* Temporary attribute for targets of bulk */ .inputlist { width: 100%; } .inputlist > * { border-left: 3px solid; width: 100%; } input[concat] { position: absolute; left: 0; top: 0; z-index: 3; width: 100%; height: 100%; display: block; text-align: center; } input[concat].transparent { z-index: -1; opacity: 0.1; max-height: 0; max-width: 0; margin: 0 auto; padding: 0; } [pop] > .close { display: none; } [pop].popup > .close { display: block; } [nopop] { } .popup [nopop] { display: none; } .onpop { display: none; } .popup .onpop { display: grid; } .popper { } .popper .onpop { display: none; } .popper .popup .onpop { display: grid; } .popper .popped .onpop { display: grid; } /* This must go */ /* The popit fc moves it after .popper = no need to unhide */ .popper .onpopmax label { display: none; } .popper .onpopmax :checked + label { display: grid; } .popper .onpopmax *:empty { display: none; } .popper .onpopmax input[type=number], .popper .onpopmax input[type=text] { display: inline; } .steps { /*display: contents;*/ } .steps > div { /*display: block; width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: var(--lowbkg); padding: 1.5em;*/ } .steps > div ~ div { /*display: none;*/ } .gauge { display: block; height: 3em; position: relative; } .gauge > span { position: absolute; left: 0; top: 0; bottom: 1em; right: 0; height: 0.5em; margin: auto auto auto 0; border-radius: 1em; display: block; } .gauge > span:first-child { height: 0.5em; width: 100%; background-color: var(--light); z-index: 0; } .gauge > span ~ span { background-color: var(--lowlink); min-width: 0.5em; right: auto; } .gauge svg { background-color: var(--light); aspect-ratio: 1 / 1; border-radius: 50%; padding: 0.5em; z-index: 3; position: absolute; right: 0; left: 0; top: 0; opacity: 1; margin: auto; } .steps .gauge { } .steps .gauge > div { display: flex; justify-content: space-around; height: 3em; } .steps .gauge > div div { display: grid; grid-template: 2fr 1fr / minmax(4em, 1fr); position: relative; } .steps .gauge > div svg { position: static; margin: auto; width: 1.75em; padding: 0.4em; } .steps .gauge > div span { font-size: 0.8em; display: grid; } .steps .gauge > div label { display: grid; grid-template: 2fr 1fr / minmax(4em, 1fr); position: relative; text-align: center; place-content: center; opacity: 1; } .steps .gauge > div input:checked + label svg { background-color: var(--lowlink); color: var(--light); } .steps .stack { position: static; height: auto; min-height: unset; width: 100%; } .steps .stack > div { height: auto; min-height: unset; } .steps .stack > div div { max-width: 36em; } .steps .stack > div .vsplit { grid-gap: 1.5em; } .steps .stack [type=submit] { margin-top: 2em; } .steps [name][contenteditable]:empty { background-color: rgba(0,0,0,0.03); width: 100%; } .steps [name][contenteditable].descr { min-height: 2.5em; } .steps [name][contenteditable].blurb { min-height: 5em; } .gauge + .stack { margin-top: 3em; } .sttg { } .nav { display: contents; height: 100%; width: 100%; position: absolute; max-width: 50em; } .nav > * { position: absolute; left: auto; right: auto; bottom: 1em; top: 1em; margin: auto; height: fit-content; width: auto; } .nav > *:first-child { left: calc(50vw - 23em); } .nav > *:nth-child(2) { right: calc(50vw - 23em); } .nav > *:nth-child(3) { top: auto; } .nav > *:nth-child(4) { bottom: auto; } .nav button { border: none; padding: 0; background: none; color: var(--white); -webkit-filter: 1px 1px 1px var(--white); } .nav button svg { height: 7em; width: 7em; padding: 1.5em; } .nav button svg:hover { color: var(--editBl); } .nav button:active { background-color: rgba(200, 200, 200, 0.1); } .nav.scissor { max-width: 100%; } .nav.scissor button { } .nav.scissor button svg { opacity: 0.5; padding: 0; -webkit-filter: drop-shadow(1px 1px 5px white); } .nav.scissor button svg:hover { color: white; } .nav.scissor > *:first-child { bottom: 16vh; } .nav.scissor > *:nth-child(2) { top: 41vh; } @media only screen and (max-width: 609px) { .nav button { top: 8em; } .nav button svg { padding: 0; } .nav > *:first-child { left: 2em; } .nav > *:nth-child(2) { right: 2em; } .nav.scissor > *:first-child { bottom: calc(28vh - 4em); } .nav.scissor > *:nth-child(2) { top: 28vh; } } /* Pager - not tested */ .dots input[type=radio] { display: inline-block; width: 0.5rem; border-radius: 1em; padding: 0.3em; margin: auto; opacity: 0.3; background-color: black; } .dots input[type=radio]:checked { opacity: 1; } /* /////////////////////////////////////////////////////// */ /* */ /* /////////// --------- DEFAULT -------- /////////// */ /* */ /* /////////////////////////////////////////////////////// */ form { display: grid; grid-template-columns: 1fr; grid-gap: 0.5em; padding: 1em 0; position: relative; place-items: start; text-align: left; } form > * { /* width: 100%; height: auto; max-width: 100%;*/ } form > div { display: flex; column-gap: 1em; row-gap: 0.3em; margin: 0 auto 0 0; flex-wrap: wrap; justify-content: start; } form > div > * { /*width: auto; display: inline-block; padding: 0; margin: 0;*/ } form > *[type=submit], form > *[type=button] { width: auto; margin: 1.5em auto 0; } form *[type=submit], form *[type=button], form > div:last-child { justify-content: center; width: auto; grid-column: 1 / -1; grid-gap: 1em; } form > div:last-child { margin: auto; } input, select, textarea, button { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; outline: none; border: none; float: none; resize: none; outline: none; width: 100%; background-color: var(--input); color: var(--text); } textarea { min-height: 5.5em; max-width: 36rem; width: 100%; resize: vertical; } select { background: url(../icons/expand.svg) no-repeat calc(100% - 1em) 50% var(--lowlink); background-size: 1em; } label { width: 100%; font-variation-settings: "wght" 550; } input:checked + label svg:first-child:last-child { /* color: var(--action); NOT SURE WHERE... overrirdes footer inkilove */ } input[type] * { fill: var(--lowlink); fill-opacity: 0.5; } input[type=text], input[type=number], input[type=password], input[type=file], textarea, select { padding: 0.5em; background-color: var(--input); color: var(--input-text); } input:hover, textarea:hover, select:hover , input[type] + label:hover, input[type] + label svg:hover { opacity: 0.95; } *[button]:active, *[submit]:active { background-color: var(--hover); } input[type=file] { -webkit-appearance: none; display: inline-block; background-repeat: no-repeat; background-position: 98%; background: url(../icons/upload.svg) no-repeat calc(100% - 1em) 50% var(--input); background-size: 1.3em; } input[type=file]::-webkit-file-upload-button { display: none; -moz-appearance: none;} input::-webkit-calendar-picker-indicator { display: none !important; } button, *[type=submit], *[type=button] { display: inline-block; width: auto; padding: 0.7em 1.4em; margin: 0.7em auto 1.5em; border-radius: 3px; font-size: 0.85em; border: 2px solid; font-variation-settings: "wght" 650; } *[type=submit] { background-color: var(--action); color: var(--textaction); border-color: var(--action); opacity: 1; grid-column: 1 / -1; } *[type=button] { background-color: transparent; color: var(--action); } input[type=checkbox], input[type=radio] { display: none; opacity: 0.5; } label[for] { display: inline-grid; width: auto; grid-template-columns: auto auto; grid-gap: 0.35em; place-content: center; opacity: 0.5; } label[for] svg { padding: 0.15em; margin: 0; } :checked + label[for] { opacity: 1; } .onChk { display: none; } :checked + label[for] .onChk { display: inline; } form .pix[data-dropable] { grid-column: 1 / -1; height: 8em; overflow: scroll; } /* input[type=checkbox] + label::before, input[type=radio] + label::before { content: '•'; color: var(--input); background-color: currentColor; font-size: 1em; padding: 0; line-height: 0.8em; width: 0.8em; text-align: center; margin: auto 0.5rem auto auto; } input[type=radio] + label::before { border-radius: 50%; } input:checked + label::before { color: black; background-color: var(--input); } */ ::placeholder { color: var(--lowlight); font-style: italic; opacity: 0.8; } datalist option { display: grid; } datalist option img { display: inline; padding: 0; height: 1.3em; max-width: 1.73em; margin-right: 1em; } /* /////////////////////////////////////////////////////// */ /* */ /* /////////// ------- ELEM STYLES ------ /////////// */ /* */ /* /////////////////////////////////////////////////////// */ input[list][name*=_id] { width: 3em; display: inline; } .btns { display: flex; margin: 1em 0; width: fit-content; grid-gap: 0.5em; } .btn, button.btn, label.btn, a.btn { /*display: inline; can be inline-block, causes issues in p a.btn with line-height */border: 1px solid; padding: 0.5em 1em; margin: 0; background-color: transparent; font-variation-settings: "wght" 400; font-size: 1.1em; opacity: 1 !important; } .btn svg { width: 1em; margin: 0 0.5em 0 0; padding: 0; left: -0.25em; top: 0.15em; } input:checked + label.btn { background-color: white; color: black; border-color: white; } input:checked + label.btn svg[nn=yes] { color: var(--apple); } @media only screen and (max-width: 609px) { input[list][name*=_id] { width: 2em; } .btns { font-size: 0.8em; } } .add { background-color: var(--white); color: var(--black); padding: 0.5em; border-radius: 50%; position: relative; margin: auto; display: inline-grid; } .add svg { width: 1.5em; } .add .rednew { -webkit-filter: unset !important; } form *[type].inline { width: auto; margin: auto; } *[type=button].inline { display: inline; background: transparent; border: none; padding: 0; color: var(--link); text-decoration: none; font-size: inherit; margin: auto; width: unset; height: unset; } .border input[type] + label svg { border: 1px solid; } .across { display: block; grid-column: 1 / -1; text-align: center; column-span: all; } .across > * { display: block; margin-right: auto; margin-left: auto; } input[type].tiny { width: 5em; } .hashtag { } .hashtag > *:not(.btn)::before { content: '#' !important; padding: 0; display: inline-block; padding-left: 0.2em; } .hashtag div { display: inline-block; } .hashtag input:checked + label { width: fit-content; padding: 0.2em 0.4em; background-color: var(--whitey); display: inline-block; margin: 0.2em; border-radius: 0.2em; } .hashtag input { padding: 0; text-align: left; background-color: transparent; border-bottom: 1px dotted var(--grock); width: 5em;} .hashtag span { padding: 0 !important; margin: 0 !important; } .hashtag svg { padding: 0.35em 0 0 0; margin-left: 0.5em; width: 1em; } .hashtag div:last-child { background-color: transparent; } .hashtag .oneline { display: inline-flex; grid-gap: 0; } .hashtag .oneline div { display: inline; } .hashtag input:checked + label.btn { display: inline-grid; } /* TEXT */ .field { position: relative; width: 100% !important; } .field input[type] { padding-right: 2em; } .field input[type] + button { position: absolute; top: 0; bottom: 0; right: 0; background: transparent /* var(--input) */; border-radius: 50%; min-width: 2em; aspect-ratio: 1 / 1; color: var(--lowlink); margin: auto 0.12em auto auto; padding: 0 !important; border: none; } .field input[type] + button svg { height: 100%; padding: 28%; margin: 0; top: 0; width: unset; border-radius: 50%; } .field input[type].on + .end { color: var(--action); } .field input[type] + button:active svg { background-color: var(--action); color: var(--textaction); } /* SUBMIT */ .field .end { position: absolute; top: 0; bottom: 0; right: 0; background: var(--input); border-radius: 50%; min-width: 2em; aspect-ratio: 1 / 1; color: var(--lowlink); margin: auto 0; padding: 0 !important; border: none; } .field .end svg { margin: 0; } .field.tr { max-width: 16em !important; } input[type].pwd { background: url(../icons/shield.svg) no-repeat 98% 50% var(--lowlink); } input[type=text].search { /* background: url(../icons/search.svg) no-repeat 98% 50% var(--input); background-size: 1.5em;*/ min-width: 28rem; width: 40vw; } input[type].search + .end { height: 100%; margin: 0; } .date { display: flex; column-gap: 0.3em; margin-right: 0.5em; } .date label { font-variation-settings: "wght" 700; padding-bottom: 0.5em; display: block; } .dater { display: grid; grid-template-columns: 1fr 1fr 2fr; width: 100%; grid-gap: 0.5em; position: relative; } form .venue { display: grid; grid-template-columns: 2fr minmax(3em, 1fr) 3.5em; width: 100%; grid-gap: 0.5em; } .addr { display: grid; grid-template-columns: 3fr 1fr; width: 100%; grid-gap: 0.5em; } .addr p, .addr textarea { grid-column: 1 / -1; } .addr p, .addr input { text-transform: capitalize; } @media only screen and (max-width: 609px) { input[type=text].search { min-width: 100%; background-size: 1em; padding: 0.5em 1em; } } /* TEXTAREA */ textarea.text { min-height: 9em; } /* PASSWORD - hide/show management */ div.pwd { display: grid; grid-template-columns: 1fr 2.5em; height: 2.15em; grid-gap: 0; width: 100%; } div.pwd input[type=password], div.pwd input[type=text][name*=pwd] { width: 100%; } div.pwd button { height: 100%; width: 100%; padding: unset; background-color: var(--input); color: var(--lowlink); border-radius: inherit; border: none; float: right; margin: 0; grid-column: unset; } div.pwd button svg { top: 0; position: static; color: currentColor !important; } input[type=text][name*=pwd].on + button { color: var(--lowlink); } /* OTHER */ .swap { background: url(../icons/swap.svg) no-repeat 100% 0 transparent; background-size: 0.8em; padding: 0.3em 1em 0 0; } /* RADIO & CHECKBOX */ .block { width: 100%; column-gap: 0.3em; display: flex; flex-wrap: wrap; grid-gap: 0.3em; justify-content: start; } .block input[type=checkbox] + label, .block input[type=radio] + label { grid-template-columns: auto 1fr; padding: 0.3em 0.5em; background-color: var(--input); color: var(--input-text); opacity: 1; font-variation-settings: "wght" 550;line-height: 1em; font-size: 0.9em; margin: 0; } .block input[type=checkbox] + label::before, .block input[type=radio] + label::before { content: unset; } .block input:checked + label { opacity: 1; background-color: var(--lowlink); color: var(--textaction); } /* vvv not checked yet */ .block svg { margin: auto; top: unset; width: 1em; } .block svg + span { font-size: 0.8em; width: 100%; margin: auto; } .block.even { display: grid; font-size: 1em; } .block.even input[type] + label { font-size: 1em; grid-gap: 0.5em; } .dot input + label[for] { font-variation-settings: "wght" 300; } .dot input:checked + label[for] { font-variation-settings: "wght" 700; } .dot input:checked + label[for] svg { padding: 0; } /* this class originated for newObj clonables and was hacked by alt tabs... now .alt is the tabs design, .tabs must go */ .alt { display: grid; margin: 1em auto; grid-template-rows: auto 1fr; grid-gap: 1.5em; width: 100%; max-width: calc(100vw - 3em);} .alt > div:first-child { display: flex; width: auto; margin: auto; grid-gap: 2em; } .alt > div:first-child input[type] + label { display: block; border-bottom: 1px solid; padding: 0.4em 0.8em; } .alt > div:first-child input[type]:checked + label { color: var(--notif); } .alt > div.stack { position: static; width: 100%; } .alt > div.stack > div { margin: auto; padding: 0; height: 100%; width: 100%;} .alt > div.stack > div > div { margin: 0 auto auto; } .alt > div.stack .notifs { max-width: 36rem; } .alt > div.stack .sidelabel { width: 40em; grid-gap: 2em; margin: 1em auto; text-align: left; max-width: inherit; } .alt * { max-width: inherit; } .alt.vsplit { grid-template: 1fr / minmax(5em, 25%) 1fr; grid-gap: 3em; max-width: 48em; } .alt.vsplit > div { padding: 0; } .alt.vsplit > div:first-child { display: grid; grid-gap: 0; margin: 0; place-content: start; } .alt.vsplit > div:first-child input[type] + label { width: 100%; text-align: left; padding: 0.7em 2em 0.7em 0; } .alt.vsplit .stack { text-align: left; } .alt.vsplit .stack > div { place-content: start; background-color: unset; } .alt.vsplit .stack > div > :first-child, .alt.vsplit .stack > div > .ctn > :first-child { padding-top: 0; } @media only screen and (max-width: 609px) { .alt > div.stack > div > div { width: 100%; } .alt > div:first-child { display: flex; width: auto; margin: auto; grid-gap: 1em; } .alt.vsplit > div:first-child input[type] + label { padding: 0.4em 0; overflow: hidden; } .alt.vsplit { grid-gap: 1.5em; } .alt.vsplit > div { width: 100; } } /* .tab { grid-gap: 0 0.3em; justify-content: start; } .tab input[type] + label { border-radius: 0.2em 0.7em 0 0; background-color: var(--lowlink); color: var(--textaction); opacity: 0.7; } .tab input[type]:checked + label { background-color: var(--input); color: var(--text); opacity: 1; } .tab input[type] + label:last-of-type { padding-right: 1em; } .block.tab { justify-content: start; } */ .tab { } .tab > .tabs { display: none; background-color: transparent; font-size: unset; padding: 1em 0 0; } .tab input[type]:checked ~ div.tabs { display: block; width: 100%; } .tabs > div ~ div { display: none; } .tabs > div * { text-align: left; margin: 0; } .tabs > div p { font-size: 0.8em; } .tabs .main::after { content: unset; } .tabs .fineprint { margin: 1em auto; } .checks { text-align: left; } .checks input[type] + label { grid-template-columns: minmax(1em, auto) 1fr; grid-gap: 1em; opacity: 1; font-variation-settings: "wght" 300; width: 100%; } .checks input[type] + label svg { padding: 0.1em; width: 1em; top: unset; } .checks input[type] + label::before { content: unset; } .checks input:checked + label svg { background-color: var(--action); color: var(--textaction); border-color: var(--action); } .checks input + label > * { margin: auto auto auto 0; } .checks input[type=radio] + label svg { border-radius: 50%; } .radio { display: flex; grid-gap: 1rem; } .radio label { grid-gap: 0.3em; } .radio svg { padding: 0.1em; margin: 0; } .radio p { padding: 0; } .radio p:empty { border-color: transparent; } .fb { display: grid; grid-template-columns: repeat(auto-fit, minmax(2em, auto)); grid-gap: 1.5em; margin: auto; place-content: center; } .fb input[type] + label { display: contents; } .fb input[type] + label svg { display: block; aspect-ratio: 1 / 1; margin: auto; padding: 0.15em; width: 2em; top: unset; opacity: 0.4; } .fb input[type] + label::before { content: unset; } .fb input:checked + label svg { opacity: 1; -webkit-filter: drop-shadow(1px 1px 1px var(--lowlight)); } .fb input[type] + label svg + * { /*display: block; text-align: center; padding: 0.2em 0 0; font-size: 0.8em; */ } .fb svg[nn=love] { color: var(--myred); } .fb svg[nn=like] { color: var(--beige); } .fb svg[nn=heartbrk] { color: var(--tauli); } .fb svg[nn=hate] { color: var(--dark-duc); } .fb svg[nn=open] { color: var(--on); } .fb svg[nn=community] { color: var(--turquoise); } .fb svg[nn=oops] { color: var(--oops); } .fb svg[nn=danger] { color: var(--oops); } .fb.switcher { background-color: rgba(0, 0, 0, 0.3); border-radius: 1.5em; margin: auto; } .fb.switcher input[type] + label svg { color: var(--white); width: 1.5em; padding: 0.2em; } .switcher { display: inline-flex; border-radius: 1em; padding: 0.2em 0.4em; grid-gap: 0.5em; width: min-content; background-color: white; position: relative; /* top: 0.35em; */ margin: 0; } .switcher input[type] + label { display: contents; } .switcher svg { top: 0; } .switches { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; grid-gap: 0.5em; width: 100%; text-align: left; } .switches label { padding: 0; width: 100%; } .switch { text-align: right; } .switch div { background-color: currentColor; background-color: var(--lowlink); border-radius: 2em; width: 3em; padding: 0.25em; height: 1.5em; position: relative; margin-right: 0; } .switch div input[type=checkbox] { display: block; position: absolute; margin: 0 auto; height: 1em; width: 1em; left: 0.3em; border-radius: 1em; background-color: var(--input); opacity: 0.3; transition: right 0.1s 0.3s; transition: left 0.1s 0.3s; } .switch div input[type=checkbox]:checked { opacity: 1; right: 0.3em; left: unset; } .switch + input[type=submit] { margin-top: 2.5em; } .dblSwitch { display: grid; grid-template-columns: repeat(auto-fit, 1.1em); width: 3.5em; height: 1.4em; background-color: var(--weGuid); border-radius: 2em; place-items: center; padding: 0.1em; margin: 1.5em auto 0.3em; } .dblSwitch input[type=radio] { background-color: black; border-radius: 2em; width: 1em; height: 1em; display: inline-block; opacity: 1; border: 0.35em solid var(--weGuid); } .dblSwitch input[type=radio]:checked { border-width: 0; } .dblSwitch input[type=radio]::after { content: ''; } .dblSwitch + div { display: grid; grid-template-columns: 1fr auto 1fr; font-size: 0.7em; font-variation-settings: "wght" 300; } .spinner { display: grid; grid-template-rows: auto 1fr; } .spinner > div:first-child { display: block; width: 18em; height: auto; margin: 1em auto; position: relative; padding: 0.5em; background-color: rgba(0, 0, 0, 0.15); color: var(--cream); } .spinner > div:first-child input { display: inline-block; background: url(../icons/left.svg) 1em 50% no-repeat; background-size: 1em; position: absolute; top: 0; bottom: 0; left: 0; right: auto; margin: auto; z-index: 2; width: 2em; height: 1em; } .spinner > div:first-child input:checked ~ input { left: auto; right: 0; background: url(../icons/right.svg) calc(100% - 1em) 50% no-repeat; background-size: 1em; } .spinner > div:first-child input + label { display: none; } .spinner > div:first-child input:checked { display: none; } .spinner > div:first-child input:checked + label { display: inline-block; width: 100%; text-align: center; z-index: 1; } .spinner > div:first-child input:checked + label + input { z-index: 3; } .spinner .stack { display: block; width: 100%; height: 100%; position: static; } form.grid { max-width: calc(100vw - 4em); grid-gap: 1.5em; width: 100%; grid-template-columns: repeat(auto-fit, minmax(3.5em, 1fr)); } label.icon { grid-template: 1fr / 1fr; width: 100%; aspect-ratio: 1 / 1; place-items: center; opacity: 1; position: relative; } label.icon svg { width: 2em; padding: 0; } /* /////////////////////////////////////////////////////// */ /* */ /* /////////// -------- FORM STYLES ------- /////////// */ /* */ /* /////////////////////////////////////////////////////// */ .heads { display: contents; } .heads > label svg, .heads button.conts svg { width: 1.5em; right: 1.3em; left: unset; padding: 0; margin: 0; } .heads .notif svg { right: unset; left: 3.5em; } .heads .menu svg { right: unset; /* left: 1em; Not sure where this is relaevant, need a more specific def */} .heads .pkt svg { right: unset; left: 6em; top: 1.18em; } .heads .tips svg { right: unset; left: 8.5em; } .heads > label svg, .heads button.conts svg, .heads > a { position: fixed; top: 1.3em; z-index: 10; display: block; opacity: 0.8; color: var(--lowlink); -webkit-filter: drop-shadow(1px 1px 0px #222); } .heads svg:hover, .heads a:hover { opacity: 1; } .heads input:checked + label svg { color: var(--white) !important; -webkit-filter: drop-shadow(0px 0px 2px currentColor); } .heads > a { width: auto; right: 4em; left: unset; top: 1em; padding: 0.15em 0; } .heads form, .heads label[for] { display: contents; } .heads .menubox a, .heads .menubox svg { position: relative; top: 0.15em; } @media only screen and (max-width: 609px) { .heads { font-size: 0.85em; } } /* .login { position: fixed; right: 1.3rem; top: 1.3rem; display: inline; text-align: right; z-index: 10; min-height: unset; max-width: 85vw; min-width: unset; width: auto; padding: 0; margin: 0; color: var(--lowlink); } .login *, *.login { -webkit-filter: unset; } .login a { color: currentColor; } .login svg { height: 1.5rem; width: 1.5rem; padding: 0; top: 0; margin: 0; -webkit-filter: drop-shadow(1px 1px 1px #222); } .login > *, input + label.login { opacity: 0.8; padding: 0; margin: 0; } .login *:hover { opacity: 1; color: currentColor; } label.login { display: inline; } label.login::before { content: unset !important; } .login.notif { right: unset; left: 3.5rem; } .login.menu { right: unset; left: 1rem; } .login.pkt { right: unset; left: 6rem; top: 1.13em; } .login { display: grid; grid-template-columns: auto auto; grid-gap: 1em; } .login span { margin: auto; } .login a { color: inherit; -webkit-filter: drop-shadow(1px 1px 0px #222); } .login.oops { color: var(--oops) !important; opacity: 1; } */ .alts { padding: 2em 2em 3em; } .alts input[type] + label { display: block; } .alts input[type] + label span { padding: 0; background: none;color: inherit; position: absolute; bottom: 2em; right: 2em; left: 2em; margin: auto; width: fit-content;} .alts input[type] + label form { display: none; } .alts input[type]:checked + label { width: 100%; } .alts input[type]:checked + label span { position: static; font-size: 2em; padding-bottom: 1em; display: block; width: 100%; text-transform: capitalize;} .alts input[type]:checked + label form { display: block; height: auto; width: 100%; max-width: calc(100vw - 2rem); margin: 0 0 2em; } .alts input[type]:first-child + label span{ right: unset; } .alts input[type] + label:last-child span { left: unset; } .alts .sidelabel { grid-gap: 0.8em 0.3em;} .alts .sidelabel label { padding: 0; } .oneline { display: flex; gap: 0.5em; align-items: center; width: max-content; margin: 1.5em auto; /* width: fit-content; problem when meant for full width... not sure where this is helpful */} .oneline:first-child { margin-top: 0; } .oneline * { align-items: center; } .oneline > *:not(svg), .oneline > [type=submit]:last-child { margin: 0; min-width: 2.5em; width: auto; } .oneline > *[type=number] { flex-shrink: 3; padding: 0.5em; padding-right: 0; } .oneline > *[name=cat] { flex-shrink: 2; padding: 0.5em; } .oneline > *[name*=_code] { flex-shrink: 2; padding: 0.5em; } .oneline > *[name*=_sts] { flex-shrink: 3; padding: 0.5em; } .oneline > *[name*=_type] { flex-shrink: 3; padding: 0.5em; } .oneline *[type=submit] { padding: 0.5em 1em; line-height: 1.3em; } .oneline label { display: none; } .oneline input[type=checkbox] + label, .oneline input[type=radio] + label { display: grid; grid-gap: 0.3em; } .oneline input[type]:checked + label { color: var(--action); } .oneline input[type] + label svg { margin: 0; top: unset; padding: 0; } .oneline textarea { display: none; min-height: unset; height: 2.2em; } .oneline.inline { grid-gap: 2em; } .oneline > div { display: flex; max-height: 2.1em; } .oneline > svg { margin: auto; } .oneline button[type] { padding: 0.15em; text-align: center; aspect-ratio: 1 / 1; margin: 0; } .oneline button svg { width: 1em; padding: 0; } .oneline p[contenteditable]:empty { min-height: 2.1em; } .oneline.right { max-width: 48em; margin-right: calc( (100vw - 48em) / 2) !important; } .oneline .conts > * { margin: 0; } .oneline .thumb { width: 2em; margin: auto; border-radius: 2em; line-height: 0.2em; font-size: 1em; overflow: hidden; } .oneline .switches { display: none; } .oneline .switch { margin: 0; } .oneline textarea { display: none; } .oneline .descr { display: none; } .oneline .inputlist { display: none; } .oneline .block { display: none; } .oneline .checks input[type] + label { grid-template: 1fr 1fr / 1fr; grid-gap: 0; place-content: center; font-size: 0.7em; } .oneline .checks input[type] + label svg { font-size: 1.7em; margin: auto; } .oneline .field { margin-bottom: -0.5em; max-width: 30%; min-width: 10em; } .oneline .field * { /*background-color: var(--beige); color: var(--text); */border-radius: 1em; } .oneline .field input { -webkit-filter: drop-shadow(1px 1px 1px var(--cafe)); } .oneline .field input[type] + button { margin-right: 0; } @media only screen and (max-width: 800px) { .oneline.right { margin: 0 1em 0 auto !important; text-align: right; place-content: end; } } @media only screen and (max-width: 609px) { .oneline { flex-wrap: wrap; } } .nolabel { display: grid; } .nolabel label:empty, .nolabel label { display: none; } .nolabel input[type=radio] + label, .nolabel input[type=checkbox] + label.nolabel, .switches label, label[for] { display: inline-grid; } form.sidelabel { grid-gap: 0.5em; } form.sidelabel > label { height: 100%; } form.sidelabel > label:nth-child(odd) { padding: 0; font-variation-settings: "wght" 550; } form.sidelabel > *:nth-child(odd) { /* padding-top: 0 !important; margin: 0; CAUSES ISSUES IN FORMS... NEED CONTEXTUAL CLASS */ } form.sidelabel > div:nth-child(even) { display: flex; margin: 0; width: 100%; } form.sidelabel > div.switches { display: grid; padding-top: 0.5em; } .sidelabel h2, .sidelabel h3, .sidelabel *[type=submit], .sidelabel *[type=button], .sidelabel > div:last-child, .sidelabel .wide, .sidelabel .picker, , .sidelabel .switches { grid-column: 1 / -1; } .sidelabel fieldset { display: grid; grid-template-columns: 1fr 2fr; place-items: center; } .sidelabel fieldset, .sidelabel legend, .sidelabel fieldset legend { grid-column: 1 / -1; } [ajf].sidelabel { grid-gap: 0.5em; } .midlabel { display: block; text-align: center; } .midlabel > * { text-align: center; margin: 0 auto; display: block; } .midlabel > label { padding: 1em 0 0.3em; } .midlabel .checks { } .midlabel .checks [type] + label { width: auto; place-content: center; text-align: left; grid-gap: 1em; } .midlabel .checks [type] + label svg { width: 1.5em; margin: auto; } /* ELEMENT STYLES */ .basic { display: grid; text-align: center; grid-gap: 1em; } .basic * { margin: auto; justify-content: center; } .basic li { margin: 0; } .basic *[type] { font-size: 1.5em; border-radius: 1.5em; padding: 1em; } .basic > label { font-variation-settings: "wght" 700; text-transform: capitalize; padding: 1em 0 0.3em; } .basic label { border-radius: 1.5em; padding: 1em; } .basic label svg { border-radius: 50%; font-size: 1.7em; } .basic > div { width: 100%; } .basic *[type=submit], .basic *[type=button] { padding: 0.7em 1.5em; margin-top: 2em; } .basic ::placeholder { font-size: 0.8em; } .basic .block *[type] + label { font-size: 1em; padding: 0.5em 1em; } .basic .date { font-size: 0.8em; } .basic .dater { background-color: var(--input); border-radius: 3em; padding: 1em; grid-template-columns: 2fr 2fr 3fr; grid-gap: 0; } .dater input[type=number] { padding: 0; background: transparent; } .basic .venue { background-color: var(--input); border-radius: 3em; padding: 1em 2em; grid-gap: 0; font-size: 0.8em; } .basic .venue input[type] { padding: 0; background: transparent; text-align: left; } .basic .plain { display: grid; grid-template-columns: repeat(auto-fit, minmax(1em, auto)); place-content: center; justify-content: start; grid-gap: 0.3em; -webkit-column-break-after: always; } .basic .plain input[type] + label { background-color: transparent; color: var(--text); padding: 0.5em; font-variation-settings: "wght" 900; -webkit-column-break-after: avoid; } .basic .plain input[type] + label svg { width: 1em; padding: 0.15em; } .basic .plain input[type]:checked + label { background-color: var(--input); } @media only screen and (max-width: 609px) { .basic { font-size: 0.85em; } .basic .search { padding: 0.7em 1em; } .basic .block *[type] + label { font-size: 1em; padding: 0.3em 0.6em; } } /* NOT SURE WHERE THIS IS USED >> PRE-APOCALYPTIC, LIKELY OUTDATED .tools { display: grid; grid-template-columns: 1fr; grid-gap: 0.5em; width: 100%; font-size: 0.7em; } .tools > input + label { grid-template-columns: 1fr auto; width: 100%; background-color: var(--grey); color: var(--white); padding: 0.3em; margin: 0 auto auto 0; position: relative; } .tools > input + label span { display: block; margin: 0; } .tools :checked + label { width: 100%; background-color: var(--black); } .tools > div { background-color: var(--lowlink); padding: 1em; margin-left: 1em; width: calc(100% - 1em);} .tools input[type=button] { width: auto; margin: auto; } */ .tools { display: flex; grid-gap: 0.5em; margin: 0 0 0 auto; font-size: 1em; } .tools *:not(svg) { display: contents; font-size: 1em; } .tools .switcher { display: inline-flex; } .tools .switcher svg { top: 0; } .tools svg { padding: 0 !important; width: 1em !important; opacity: 0.3; color: currentColor; } .tools svg:hover { opacity: 0.7; } .tools input[type] + label { display: contents; } .tools :checked + label svg { opacity: 1; } .tools :checked + label svg[nn=love] { color: var(--bright); } .tools :checked + label svg[nn=hate] { color: var(--black); } .tools :checked + label svg[nn=star] { color: var(--yellow); padding: 0; font-size: 1.2em; } li .tools { display: flex; grid-gap: 0.5em; width: auto; position: absolute; margin: auto; top: 0.5em; right: 0.5em; font-size: 0.8em; color: var(--lowlink); } li .tools svg { display: block; padding: 0.5em; width: 2em; top: 0.07em; left: unset; } /* NOTE: the inline class can apply to other elements !! */ form.inline { display: block; } form.inline * { text-align: inherit; line-height: 1.7em; } form.inline > * { background-color: transparent; width: auto; display: inline-block; padding: 0 0.5em; } form.inline label { width: auto; } form.inline > div { } form.inline > label + div { display: inline-block; break-before: avoid; } .inline input, .inline select, .inline textarea { border-bottom: 1px solid currentColor; text-align: center; break-before: avoid; background-color: transparent; background-position: 100% 50%; } .inline input[type=file], .inline select { width: 10em; background-size: 1.2em; } .inline textarea { width: 100%; min-height: unset; } .inline *[type=submit], form.inline *[type=button] { margin: 1em 1em 0 0; padding: 0.5em 1em; } .inline *[type=submit] { background-color: var(--link); color: var(--textaction); border-color: var(--link); } .inline input[type=checkbox], .inline input[type=radio] { border: none; background-color: currentColor; margin-right: 0.5em; } .inline div label { padding-right: 1em; } button.inline { border: none; padding: 0; margin: 0 0.15em; font-size: 1em; color: var(--link); font-variation-settings: "wght" 575; background-color: transparent; display: inline; width: fit-content !important; } *[type=submit].inline { background-color: transparent; color: var(--link); border: none; } /* /////////////////////////////////////////////////////// */ /* */ /* /////////// -------- CONTEXT --------- /////////// */ /* */ /* /////////////////////////////////////////////////////// */ ul form { display: contents; } ul form button[type] { border: none; padding: 0; margin: auto; font-size: 0.8em; display: contents; } ul button svg:last-child { margin: auto 0 auto auto; border-radius: 50%; background-color: inherit; color: inherit; } ul input[type] + label::before { content: unset; } ul li button svg:first-child:last-child { background-color: transparent; color: var(--link); top: 0; } details form { display: contents; } summary input[type] + label::before { content: unset; } summary input.inline { background-color: transparent; width: 3em; padding: 0; text-align: center; font-size: 0.8em; vertical-align: text-top; } .footer input[type] + label { opacity: 0.9; color: var(--cream); } .footer input[type]:checked + label { color: var(--turquoise); } .footer .fb input[type] + label { opacity: 1; } .footer .fb input[type] + label svg { background-color: var(--cream); color: var(--lowbkg); opacity: 1; height: 2.5em; width: 2.5em; padding: 0.5em; border-radius: 50%; } .footer .fb input[type]:checked + label svg { background-color: var(--turquoise); color: var(--cream); } .footer button, .footer svg.btn { background-color: var(--cream); color: var(--lowbkg); } .footer button.inline { color: var(--turquoise); } .tBox * { opacity: 1 !important; } .tBox input[type] + label { grid-template: 3fr 1fr / 1fr; } .tBox input[type] + label span { font-size: 0.8em; } .tBox input[type] + label::before { content: unset; } .ctnBox input[type] + label::before { content: unset; } .ctn .across .checks { width: auto; text-align: center; font-size: 1em; } .ctn .across .checks label { width: max-content; } /* /////////////////////////////////////////////////////// */ /* */ /* /////////// -------- DIV.AJF --------- /////////// */ /* */ /* /////////////////////////////////////////////////////// */ [ajf] { /* position: relative; This creates a problem on context with a bkg image and the subfoot */} [ajf].admForm { position: fixed; } .form { display: grid; grid-gap: 0.5em; align-items: start; text-align: left; } .form > * { width: 100%; } .form .checks input[type] + label { font-variation-settings: "wght" 300; } .styler { display: none; grid-template-columns: repeat(auto-fit, 1.9em); padding-top: 0.5em; margin: 1.5em 0 0.7em; max-width: inherit; width: auto; } .styler fieldset { display: contents; } .styler button, .styler label { width: 100%; aspect-ratio: 1/1; display: inline-grid; place-items: center; position: unset; border: none; padding: 0; margin: 0; color: var(--brack); } .styler svg { margin: auto; padding: 0; top: unset; opacity: 1; width: 1em; height: 1em; } .styler label { } .styler label span { display: none; border: 1px dashed; } .styler :checked label { min-width: unset; position: unset; grid-column: 5; } .styler :checked label span { display: inline; } /* .styler .href { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; background-color: rgba(200, 200, 200, 0.2); padding: 0.2em; width: 100%; height: 2em; } .styler .href p { width: calc(100% - 1em); } .styler .href p:empty:after { content: attr(name) !important; } .styler .href svg { } */ .href { position: absolute; z-index: 2; display: grid; grid-template-columns: 1fr auto; background-color: var(--light); padding: 0.3em; width: max-content; max-width: 100%; } .href [contenteditable] { min-width: 16em; width: max-content; margin: 0; cursor: text; -webkit-filter: drop-shadow(1px 1px 4px #444); } .href span:empty:after { content: '# url' !important; } .href svg { top: 0; } .styler .href { display: none; } /* .styler div { width: 100%; aspect-ratio: 1/1; display: inline-grid; place-items: center; position: unset; } .styler div svg { margin: auto; padding: 0; top: unset; opacity: 1; width: 1em; height: 1em; } .styler div label { min-width: unset; position: unset; } */ .styler input[type=text] { position: absolute; right: 0; bottom: 0; width: calc(100% - 20.5em); } div.ctn[name] .styler { display: grid; } .styler div:hover { color: var(--brred); } .styler div:active { color: var(--pink); } .styler b { padding-bottom: 0.25em; } .styler + * { border-color: var(--pink); } @media only screen and (max-width: 609px) { .styler { max-width: calc(100% - 2rem); grid-template-columns: repeat(auto-fill, 1.7em); } .styler svg { height: 1em; width: 1em; } } @media only screen and (max-width: 421px) { .styler { grid-template-columns: repeat(auto-fill, 1.5em); } } .ctn.qna .styler { /*margin: 0 0 -3em; */grid-column: 1 / -1; } .ctn.qna [contenteditable] { /*margin-top: 3em; */} .popup .icons > * { display: grid; grid-template: 2fr 1fr / 1fr; background: transparent; border: none; } .popup .icons > input[type] { display: none; } /*h1[name]:empty, h2[name]:empty, h3[name]:empty, h4[name]:empty, p[name]:empty, blockquote[name]:empty,*/ *[name][contenteditable] *[name][contenteditable]:empty, *[name] [contenteditable]:empty /**[name] p:empty, *[name] h1:empty, *[name] h2:empty, *[name] h3:empty, *[name] h4:empty, *[name] h5:empty, *[name] label:empty, *[name] blockquote:empty, *.ctn[name] li:empty */ { border: 1px dashed rgba(228, 240, 228, 0.3); min-height: 1em; } *[name]:empty:after, div.ctn[name] p:first-child:empty:after { opacity: 0.3 !important; text-transform: capitalize; overflow: hidden; font-style: italic; } input[type].inline { border: none; border-bottom: 1px solid; background-color: transparent; } textarea.inline { border: none; border-left: 1px solid; background-color: transparent; } /* .cover *[name]:empty:after { content: attr(name); } .cover *[name][placeholder]:empty::after { content: attr(placeholder); } .objects *[name]:empty:after { content: attr(name); } .objects *[name][placeholder]:empty::after { content: attr(placeholder); } .ctn *[contenteditable][name]:empty:after { content: attr(name); } .ctn *[name][placeholder][contenteditable]:empty::after { content: attr(placeholder); } */ [ajf] [name][contenteditable]:empty:after { content: attr(name); } [ajf] [name][contenteditable][placeholder]:empty::after { content: attr(placeholder); } div.ctn[name] p:first-child:empty:after { content: 'Content goes here.'; text-transform: unset; } div.ctn[name=content] p:first-child:empty:after { content: 'This is a blank page, but not for long.'; text-transform: unset; } img[name]:empty:after { content: unset; } input[type=checkbox][name]:empty:after, input[type=radio][name]:empty:after { content: unset; } h1[name]:focus, h2[name]:focus, h3[name]:focus, h4[name]:focus, *[name] h1:focus, *[name] h2:focus, *[name] h3:focus, *[name] h4:focus, *[name] p:focus, *[name] label:focus, *[name] blockquote:focus, *.ctn[name] li:focus { border-color: var(--pink); } .settings { text-align: center; margin: auto; } .settings .sidelabel { text-align: left; } .settings .fb { margin: 1.5em auto; } .settings .fb input:active + label { background-color: var(--hover); } .actBox { position: absolute; width: 12em; display: grid; grid-template-columns: repeat(auto-fit, 3em); justify-content: right; top: 0.5em; } .actBox button { display: contents; } .actBox svg { margin: 0 0 0 auto; } .manager .actbox { } @media only screen and (max-width: 780px) { .settings { font-size: 0.85em; } } /* NOTE: the inline class can apply to other elements !! */ div[ajf].inline { display: block; } div[ajf].inline * { text-align: inherit; line-height: 1.7em; } div[ajf].inline > * { background-color: transparent; width: auto; display: inline-block; padding: 0 0.5em; } div[ajf].inline label { width: auto; } div[ajf].inline > div { display: block; } div[ajf].inline > label + div { display: inline-block; break-before: avoid; } div[ajf].inline input, form.inline select, form.inline textarea { border-bottom: 1px solid currentColor; text-align: center; break-before: avoid; background-color: transparent; } div[ajf].inline input[type=file], form.inline select { width: 10em; background-size: 1.2em; } div[ajf].inline textarea { width: 100%; min-height: unset; } div[ajf].inline *[type=submit], form.inline *[type=button] { margin: 1em 1em 0 0; padding: 0.5em 1em; } div[ajf].inline *[type=submit] { background-color: var(--link); color: var(--textaction); border-color: var(--textaction); } div[ajf].inline input[type=checkbox], form.inline input[type=radio] { border: none; background-color: currentColor; margin-right: 0.5em; } div[ajf].inline div label { padding-right: 1em; } div[ajf] input.inline, div[ajf] select.inline { background-color: transparent; color: inherit; } div[ajf] .oneword *[contenteditable] { min-width: 18rem; border: 0.3px dashed; display: inline-block; } @media only screen and (max-width: 780px) { div[ajf].inline * { line-height: 1.3em; } .textform input[type=text] { max-width: 90%; font-size: 0.9em; } div[ajf] .oneword *[contenteditable] { min-width: unset; padding: 0 2rem; } } /* /////////////////////////////////////////////////////// */ /* */ /* /////////// ------- DRAG & DROP ------ /////////// */ /* */ /* /////////////////////////////////////////////////////// */ /* grabbable */ [draggable] { cursor: grab; } [contenteditable][draggable] { cursor: text; } /* dropable */ .dropzone { min-height: 7em; width: 75%; max-width: 36rem; margin: 3em auto 1em; border: 2px dashed; padding: 2em; border-radius: 0.5em; font-size: 0.8em; } .dropzone input[type=file] { display: none; } /* action in progress */ .dragup { box-shadow: 3px 3px 3px var(--yellow); } .space { } .tempHide { display: none; } .dropable { border: 1px dashed var(--youCan); min-height: 1.3em; } .hover { opacity: 1; /*border: 2px solid var(--youCan); */} [data-dropable]:empty { border: 1px dashed var(--lowlink); min-height: 1.3em; } [data-dropable]:hover { border-color: var(--youCan); opacity: 1; } [data-dropable][contenteditable].hover { border: none; border-bottom: 1px dashed var(--youCan); } *[data-dropable].dropable { border-color: var(--youCan); } @media only screen and (max-width: 609px) { .dropzone { min-height: 6em; font-size: 0.8em; margin-bottom: 0; } } .slide { /* JS */ } /* /////////////////////////////////////////////////////// */ /* */ /* //////// --------- GRID COLUMNS -------- /////// */ /* */ /* /////////////////////////////////////////////////////// */ /* .grid.half { grid-template-columns: 1fr 1fr; } .grid.third { grid-template-columns: 1fr 1fr 1fr; } .grid.quart { grid-template-columns: 1fr 1fr 1fr 1fr; } .grid.small { grid-template-columns: repeat(auto-fit, minmax(2em, 1fr)); grid-gap: 0.3em; } .grid.regular { grid-template-columns: repeat(auto-fit, minmax(5em, 1fr)); grid-gap: 0.5em; } .grid.med { grid-template-columns: repeat(auto-fit, minmax(9em, 1fr)); grid-gap: 1.5em; } .grid.large { grid-template-columns: repeat(auto-fit, minmax(14em, 1fr)); grid-gap: 3em; } @media only screen and (max-width: 780px) { .grid { max-width: calc(100vw - 6em); } .grid.small { grid-template-columns: repeat(auto-fit, minmax(2em, 1fr)); grid-gap: 0.2em; } .grid.regular { grid-template-columns: repeat(auto-fit, minmax(4em, 1fr)); grid-gap: 0.35em; } .grid.med { grid-template-columns: repeat(auto-fit, minmax(7em, 1fr)); grid-gap: 1em; } .grid.large { grid-template-columns: repeat(auto-fit, minmax(11em, 1fr)); grid-gap: 1.5em; } } @media only screen and (max-width: 480px) { .grid { font-size: 0.9em; max-width: calc(100vw - 2em); } .grid.large { grid-gap: 1.2em; } } */ /* /////////////////////////////////////////////////////// */ /* */ /* //////// --------- ATTRIBUTES - -------- /////// */ /* */ /* /////////////////////////////////////////////////////// */ /* This is copied from cinematic - BEGIN */ *[contenteditable]:empty:after { content: attr(name); font-style: italic; opacity: 0.8; } *[contenteditable]:focus-visible { background-color: rgba(90, 90, 90, 0.1); outline: none; box-shadow: 1px 1px 2px #333; } *[contenteditable]:focus:not(p) { height: auto; min-height: unset; } /* This is copied from cinematic - END */ *[contenteditable] { min-width: 2em; caret-color: var(--editBl); /* background-color: var(--textaction); */ } *[contenteditable]:empty { border: 0.5px dashed #4448; } *[contenteditable]:focus { border: 1px dashed var(--editBl); } *[contenteditable]:focus-visible { outline: none; } *[contenteditable][name]:empty:after { content: attr(name); } *[contenteditable][name][placeholder]:empty::after { content: attr(placeholder); } h4:empty:after { opacity: 0.6; font-variation-settings: "wght" 240; } td[contenteditable], td.ctnEdit { border: none; border-left: 1px solid var(--editBl); padding-left: 0.5em; } td[contenteditable]:focus { border: none; border-left: 1px solid var(--editBl); background-color: var(--input); } *.ctnEdit *[contenteditable] { border: none; padding: 0; width: auto; min-width: unset; float: right; } *.ctnEdit span[name=icon] { display: none; } *.ctnEdit.mngSvg span[name=icon] { display: inline-block; font-size: 0.7em; } *.ctnEdit.mngSvg [name=icon] svg { display: none; } *[bef]::before { position: absolute; display: block; width: auto; opacity: 1; top: 0; color: var(--textaction); font-size: 0.65em; font-family: Oswald; font-style: italic; font-variation-settings: "wght" 250; } *[bef]:hover::before { content: attr(before); } *[bef]:active::before, *[bef]:focus::before { display: none; } *[bef]:checked:first-child::before { content: attr(bef); } *[bef] + *[bef]:checked::before { content: attr(bef); } *[bef]:checked + *[bef]:not(:hover)::before { content: attr(bef); } *[bef]:checked + *[bef]:checked::before { content: ''; } *[bef]:checked + *[bef]:last-child::before { content: attr(bef); } *[aft]::after { display: block; opacity: 0.7; font-size: 0.7em; font-style: italic; font-variation-settings: "wght" 200; } *[aft]:empty::after { content: attr(aft); } /* /////////////////////////////////////////////////////// */ /* */ /* //////// --------- ICON PICKER ---------- /////// */ /* */ /* /////////////////////////////////////////////////////// */ .localmenu { display: none; position: absolute; top: 10em; z-index: 2; background-color: var(--dark-plm); color: var(--white); margin: auto; width: 30em; height: auto; max-height: 50vh; overflow: scroll; padding: 2em; } main .localmenu { display: block; position: absolute; } .localmenu ul.icons { display: grid; grid-template-columns: repeat(auto-fit, minmax(2em, auto)); place-content: baseline; } .localmenu ul.icons svg { width: 1.5em; } .localmenu h3 { font-size: 1.2em; padding: 0.5em 0; } .localmenu svg.close { position: absolute; top: 1em; right: 1em; color: var(--action); } /* /////////////////////////////////////////////////////// */ /* */ /* //////// ------------ SHEDULE ----------- /////// */ /* */ /* /////////////////////////////////////////////////////// */ .slide { display: grid; grid-template-columns: repeat(auto-fit, minmax(0.35em, 1fr)); grid-gap: 0; width: 100%; max-width: 36rem; height: 1em; position: relative; color: var(--action); } .slide input[type=checkbox] { display: block; background-color: var(--backlay); padding: 0; margin: 0.2em 0 0; opacity: 1; height: 100%; } .slide input[type=checkbox]:checked { background-color: var(--textaction); } .slide input[type=checkbox]:active { position: relative; } .slide input[type=checkbox]:last-child { background-color: rgba(0, 0, 0, 0); } .slide input[type=checkbox]:first-child::before { content: ''; } /* .slide input[type=checkbox]:hover::before { content: attr(time); display: block; } .slide input[type=checkbox]:active::before, input[type=checkbox]:focus::before { display: none; } .slide input[type=checkbox]:checked:first-child::before { content: attr(time); display: block; } .slide input[type=checkbox] + input[type=checkbox]:checked::before { content: attr(time); display: block; } .slide input[type=checkbox]:checked + input[type=checkbox]:not(:hover)::before { content: attr(time); display: block; } .slide input[type=checkbox]:checked + input[type=checkbox]:checked::before { content: ''; } .slide input[type=checkbox]:checked + input[type=checkbox]:last-child::before { content: attr(time); display: block; } */ .slide input[type][draggable] { -webkit-filter: unset; border-right: 0.5px solid var(--hover); } @media only screen and (max-width: 609px) { } /* /////////////////////////////////////////////////////// */ /* */ /* //////// --------- QR CODE ---------- /////// */ /* */ /* /////////////////////////////////////////////////////// */ .qr { display: grid; grid-template: repeat(25, minmax(0.2em, 1fr)) / repeat(25, minmax(0.3em, 1fr)); border: 4em solid var(--bright);; } .qr > * { margin: 0; width: 100%; height: 100%; aspect-ratio: 1 / 1; padding: 0; position: static; } .qr b { background-color: var(--dark); } .qr i { background-color: var(--bright); } .qr s { background-color: var(--dark); } .qr.v2 { grid-template: repeat(25, minmax(0.2em, 1fr)) / repeat(25, minmax(0.3em, 1fr)); } .qr.v3 { grid-template: repeat(29, minmax(0.2em, 1fr)) / repeat(29, minmax(0.3em, 1fr)); } .qr.v4 { grid-template: repeat(33, minmax(0.2em, 1fr)) / repeat(33, minmax(0.3em, 1fr)); } .qr.v5 { grid-template: repeat(37, minmax(0.2em, 1fr)) / repeat(37, minmax(0.3em, 1fr)); } .qr.v6 { grid-template: repeat(41, minmax(0.2em, 1fr)) / repeat(41, minmax(0.3em, 1fr)); } /* NOTE: js bugs from version 7 onwards */ .qr.v7 { grid-template: repeat(45, minmax(0.2em, 1fr)) / repeat(45, minmax(0.3em, 1fr)); } .qr.v8 { grid-template: repeat(49, minmax(0.2em, 1fr)) / repeat(49, minmax(0.3em, 1fr)); } .qr.v13 { grid-template: repeat(121, minmax(0.2em, 1fr)) / repeat(121, minmax(0.3em, 1fr)); } .qr + div { background-color: var(--bright); color: var(--dark); text-align: center; padding: 0 1em 3em; } .qr + div > * { padding: 0; } svg[nn=qr] { background-color: white !important; padding: 0.25em !important; color: black !important; border-radius: 0; } /* /////////////////////////////////////////////////////// */ /* */ /* //////// --------- PLAYERS & MEDIA ---------- /////// */ /* */ /* /////////////////////////////////////////////////////// */ .player { position: fixed; bottom: 10vw; left: 0; right: 0; margin: auto; width: max-content; } .player div { color: var(--cream); grid-gap: 2em; } .player div * { -webkit-filter: drop-shadow(1px 1px 1px #333); } .player svg { width: 3em; margin: auto; } .slides .player { background-color: rgba(0, 0, 0, 0.4); padding: 1em 1.5em; border-radius: 3em; } .slides .player div { grid-gap: 2em; } .slides .player svg { width: 1.5em; } /* /////////////////////////////////////////////////////// */ /* */ /* /////////// -------- oddities -------- /////////// */ /* */ /* /////////////////////////////////////////////////////// */ datalist { display: none; } .readonly *[name] { border: none; }