@import 'datauri.less'; @import 'color.less'; :root { font-size: 1vmax; font-family: 'MS PGothic'; --ui-size: clamp( 100px, 12vw, 140px ); --border-width: 4px; --default-border: var( --border-width ) solid var( --c-oxford-blue ); --default-outline-offset: calc( -1 * var( --border-width ) ); --container-offset: 2rem; --CO: var( --container-offset ); --CO2: calc( var( --CO ) * 2 ); --CO3: calc( var( --CO ) * 3 ); --CO4: calc( var( --CO ) * 4 ); --environment-size: var( --ui-size ); --layout-size: var( --ui-size ); --layout-button-size: calc( var( --layout-size ) / 3 - var( --border-width ) ); --layout-button-half: calc( var( --layout-button-size ) / 2 ); --possession-width: 36vw; --log-width: var( --possession-width ); --log-height: calc( var( --possession-width ) / 3 ); /* i hate 9, its a weird number, but 36 is divisible by 9 */ --possession-height: calc( var( --possession-width ) / 9 ); --portrait-size: var( --possession-height ); --belt-width: calc( var( --possession-width ) - var( --portrait-size ) - var( --border-width ) ); --select-size: 1rem; --belt-item-count: 10; --belt-item-size: calc( ( var( --belt-width ) - var( --select-size ) ) / ( var( --belt-item-count ) + 1 ) ); --border-double: calc( var( --border-width ) * 0.80 * 2 ); --border-half: calc( var( --border-width ) / 2 ); --status-height: calc( var( --possession-height ) / 1.5 ); /* added to support agenda-view, maybe not the best way? */ /* probably dont need to put " dungeon " in front of everything */ /* it is no longer relevent*/ --dungeon-size: var( --possession-width ); --grid-columns: 11; --dungeon-grid-size: calc( var( --dungeon-size ) / var( --grid-columns ) ); --dungeon-button-size: calc( var( --dungeon-grid-size ) - var( --border-width ) ); --dungeon-container-width: calc( var( --dungeon-grid-size ) * 9 ); } *, *:before, *:after { box-sizing: border-box; } * { scrollbar-width: auto; scrollbar-color: var( --c-azure ) transparent; } *::-webkit-scrollbar { width: 1rem; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background-color: var( --c-azure ); border-radius: 1rem; border: 0.25rem solid transparent; background-clip: content-box; } canvas { image-rendering: pixelated; } table { border-collapse: collapse; } table td { margin: 0; padding: 0; } [ class *= "fa-" ] { font-family: "Font Awesome 6 Free" !important; font-weight: bold; } .splash { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; vertical-align: middle; text-align: center; color: var( --c-white ); background-color: var( --c-black ); font-family: 'AncientModernTales'; font-size: 2rem; &:before { content: ''; height: 100%; display: inline-block; vertical-align: middle; } .clear-cache.button { position: absolute; bottom: 1rem; left: 1rem; } } body { margin: 0; background: var( --c-black ); width: calc( 100vw - 18px ); overflow: hidden; &.blur { filter: saturate( 0.75 ); pointer-events: none; } &[ mode="build" ] { div.ui .container.build { display: block } } .sky { --ring-color: rgba( 133, 116, 140, 0.5 ); background-image: radial-gradient( var( --sky-color ) 15%, var( --ring-color ) 35%, rgba( 0, 0, 0, 1 ) 50%, rgba( 0, 0, 0, 1 ) 100% ), var( --sky-image ); background-size: contain, 5120px 1280px; /* size of image */ background-position: 0% 0%; width: 300vmax; height: 300vmax; position: fixed; /* top: calc( 50vh - 150vmax ); */ top: 0; left: calc( 50vw - 150vmax ); z-index: -1; &.day { --sky-color: rgba( 90, 140, 225, 1 ); --sky-image: url( '' ); .celestial { background-image: var( --datauri-sun ); } } &.moonless{ --sky-color: rgba( 0, 0, 0, 0 ); --sky-image: url( "/assets/img/strobe.gif" ); background-size: 25%; opacity: 0.75; filter: hue-rotate( -20deg ) blur( 3px ); } &.night { --sky-color: rgba( 0, 0, 0, 0 ); --sky-image: var( --datauri-night-sky ); .celestial { background-image: var( --datauri-moon ); &.half { --mask: linear-gradient( 90deg, black 0%, black 33%, transparent 33%, transparent 67%, black 67%, black 100% ); -webkit-mask: var( --mask ); mask: var( --mask ); -webkit-mask-size: 300% 300%; mask-size: 300% 300%; } &.quarter, &.full, &.empty, &.three { --mask: radial-gradient( transparent 0%, transparent 23%, black 23%, black 33% ); -webkit-mask: var( --mask ); mask: var( --mask ); -webkit-mask-size: 300% 300%; mask-size: 300% 300%; } &.empty { --position: 50% 50%; -webkit-mask-position: var( --position ); mask-position: var( --position ); } &.start.quarter { --position: 75% 50%; -webkit-mask-position: var( --position ); mask-position: var( --position ); } &.start.three { --position: 65% 50%; -webkit-mask-position: var( --position ); mask-position: var( --position ); } &.start.half { --position: 75% 50%; -webkit-mask-position: var( --position ); mask-position: var( --position ); } &.full { --position: 0% 50%; -webkit-mask-position: var( --position ); mask-position: var( --position ); } &.end.half { --position: 25% 50%; -webkit-mask-position: var( --position ); mask-position: var( --position ); } &.end.three { --position: 35% 50%; -webkit-mask-position: var( --position ); mask-position: var( --position ); } &.end.quarter { --position: 25% 50%; -webkit-mask-position: var( --position ); mask-position: var( --position ); } } } .celestial { transition-duration: 1000ms; transition-property: top, left; width: 5%; height: 5%; background-size: contain; position: absolute; top: calc( 50% - 2.5% ); left: calc( 50% - 2.5% ); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* background-image: var( --datauri-night-sky ); radial-gradient( rgba(0, 0, 0, 0) 25%, rgba(133, 116, 140, 1) 45%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 100%), var(--datauri-night-sky) */ } } div.ui { color: var( --c-white ); position: fixed; bottom: 0; left: 0; color: white; text-align: left; vertical-align: bottom; .info.container { > * { display: inline-block; padding-left: 1rem; opacity: 0.2; &:hover { opacity: 1; &:after { content: " - " attr( data-before ); } } } } .volume { --volume-opacity: 0.01; position: fixed; top: var( --CO ); right: var( --CO ); opacity: var( --volume-opacity ); transition-property: opacity; transition-duration: 1000ms; &:before { content: attr( value ); } &:hover, &.active { transition-duration: 0ms; --volume-opacity: 1; } } } @property --orbitD { syntax: ''; /* <- defined as type number for the transition to work */ initial-value: 0; inherits: false; } @keyframes statusOrbit { 000% { --orbitD: 0; } 100% { --orbitD: 360; } } .container.creature-info { position: fixed; width: 0; height: 0; --width: 16rem; --height: 1.5; /* defined by sprite size */ --max-hp: 16; --now-hp: 13; --max-width: calc( ( var( --max-hp ) / 300 ) * 16rem ); --now-width: calc( var( --now-hp ) / var( --max-hp ) * 100% ); --orbitZ: 2rem; --duration: 2s; --carousel-split: 6; --carousel-delay: calc( var( --duration ) / var( --carousel-split ) ); .status-carousel { position: absolute; --dynamic-bottom: calc( var( --zoom ) * var( --height ) * 8rem ); /* --XorbitZ: clamp( 0.25rem, calc( var( --zoom ) * var( --orbitZ ) ), 100vmax ); font-size: calc( var( --zoom ) * 2rem ); */ bottom: clamp( 2rem, var( --dynamic-bottom ), 100vmax ); left: -0.55rem; pointer-events: none; b { position: absolute; animation-name: statusOrbit; animation-timing-function: linear; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: calc( -1 * var( --index ) * var( --carousel-delay ) ); transform: rotateX( 15deg ) rotateY( calc( 1deg * var( --orbitD ) ) ) translateZ( var( --orbitZ ) ) rotateY( calc( -1deg * var( --orbitD ) ) ); &.fa-star:before { color: var( --c-chrome-yellow ); } &.fa-fire:before { color: var( --c-chrome-yellow ); } &.fa-bolt:before { color: var( --c-chrome-yellow ); } &.fa-snowflake:before { color: var( --c-very-light-azure ); } &.fa-droplet:before { color: var( --c-red ); } &.fa-compress:before { color: var( --c-red ); } } } .full-name, .true-name, .hp { width: var( --width ); margin-left: calc( -0.5 * var( --width ) ); } .true-name { color: var( --c-chrome-yellow ); } .full-name, .true-name { text-align: center; text-shadow: var( --c-black ) 0 0 var( --border-width ); &:empty { display: none; } } .hp { --width: clamp( 2rem, var( --max-width ), 16rem ); border: var( --border-width ) solid var( --c-oxford-blue ); background-image: var( --g-lost-health ); overflow: hidden; pointer-events: none; &:before { content: ""; display: block; height: calc( var( --border-width ) * 2 ); width: var( --now-width ); background-image: var( --g-gain-health ); } } } .container.context-menu { position: fixed; max-width: 30vw; max-height: 50vh; overflow-y: scroll; overflow-x: hidden; z-index: 2; color: var( --c-black ); background-color: var( --c-peach-puff ); border-radius: var( --border-width ); font-size: clamp( 12px, 1.25rem, 16px ); font-family: arial; padding: 1rem 0 1rem 1rem; pointer-events: none; opacity: 0; &:before { content: ""; position: fixed; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; background-color: var( --c-shadow-black ); } &.active { pointer-events: initial; opacity: 1; } select { padding: 1em; font-size: inherit; } > * { display: block; border-width: 0; border-bottom: 1px solid var( --c-shadow-black ); width: 100%; padding: 1em; background-color: inherit; } > label[ class *= "fa-" ][ data-type = "number" ] { display: inline-block; width: 12.5%; &:hover { background-color: var( --c-azure ); } input { position: absolute; width: initial; right: 0; bottom: 0; font-size: 1rem; } &:before { position: absolute; color: var( --c-black ); width: 100%; left: 0; text-align: center; } } div { padding: 1em; &.button { --button-color: var( --c-cornsilk ); --button-hover-color: var( --c-alice-blue ); height: initial; } } } .context-menu[ context-of = "waypoint" ] { .public-title { font-weight: bold; font-size: 1.5em; } .public-detail { font-style: italic; font-size: 0.75em; } [ data-before = "Name: " ] { font-weight: bold; font-size: 1.25em; } [ data-before = "Notes" ] { font-style: italic; font-size: 0.75em; } } // LOG ( TOP CENTER ) .container.log { position: absolute; bottom: var( --container-offset ); left: calc( var( --container-offset ) * 1.5 + var( --layout-size ) ); width: calc( var( --log-width ) / 2 ); font-size: 16px; /* pointer-events: none; top: var( --container-offset ); left: calc( 50% - var( --log-width ) / 2 ); width: var( --log-width ); font-size: calc( var( --log-height ) / 8 ); &.active { transition-property: opacity; transition-duration: 500ms; opacity: 0; } */ max-height: var( --log-height ); display: flex; justify-content: flex-end; flex-direction: column; mask-image: linear-gradient( transparent, var( --c-black ) ); -webkit-mask-image: linear-gradient( transparent, var( --c-black ) ); opacity: 0.25; transition-property: opacity, mask-image, -webkit-mask-image; transition-duration: 500ms; &:hover { opacity: 1; mask-image: linear-gradient( var( --c-black ), var( --c-black ) ); -webkit-mask-image: linear-gradient( var( --c-black ), var( --c-black ) ); } } // LAYOUT ( BOTTOM LEFT ) .container.layout { position: fixed; left: var( --container-offset ); bottom: var( --container-offset ); width: var( --layout-size ); height: var( --layout-size ); line-height: var( --layout-size ); text-align: center; &.active-settings { top: 5vh; left: 5vw; z-index: 10; width: 90vw; height: 90vmin; .container.settings { width: 100%; height: 100%; padding: var( --container-offset ); } .button.settings { display: none; } } div.container { &.settings { width: 0; height: 0; overflow: hidden; background: var( --c-frosted-oxford-blue ); line-height: var( --layout-button-size ); text-align: left; label { display: block; width: calc( 100% - var( --layout-button-size ) ); height: var( --layout-button-size ); input { float: right; } &:hover { background: var( --c-oxford-blue ); } } } } div.button { position: absolute; &.wear-head { left: calc( 50% - var( --layout-button-half ) ); top: 0; } &.wear-back { left: calc( 50% - var( --layout-button-half ) ); top: calc( 50% - var( --layout-button-half ) ); } &.wear-hip { left: calc( 50% - var( --layout-button-half ) ); bottom: 0; } &.left-hand, &.right-hand { transition-property: transform, opacity; transition-duration: 250ms; top: calc( 50% - var( --layout-button-half ) ); &[ load = '0' ] { transform: initial; opacity: var( --default-opacity ); z-index: 1; } &[ load = '1' ] { transform: translate( 1rem, -1rem ); opacity: 0.25; z-index: 0; } } &.left-hand { left: 0; } &.right-hand { right: 0; } &.switch, &.settings { bottom: 0; background-position: center; background-repeat: no-repeat; background-size: 75%; } &.switch { right: 0; background-image: var( --datauri-switch ); } &.settings { left: 0; background-image: var( --datauri-settings ); } } &.alt-load { div.button { &.left-hand, &.right-hand { &[ load = '0' ] { transform: translate( 1rem, -1rem ); opacity: 0.25; z-index: 0; } &[ load = '1' ] { transform: initial; opacity: var( --default-opacity ); z-index: 1; } } } } } // POSSESSION ( BOTTOM CENTER ) .container.possession { position: fixed; width: var( --possession-width ); max-width: 800px; height: var( --possession-height ); bottom: var( --container-offset ); left: calc( 50% - var( --possession-width ) / 2 ); } // POSSESSION: STATUS .container.status { width: var( --belt-width ); height: var( --status-height ); line-height: var( --status-height ); position: absolute; bottom: 100%; right: 0; display: none; /* disabled */ .hd-area, .action-area { display: none; float: right; } .hd-item { --size: calc( var( --status-height ) / 2.25 ); background-image: var( --datauri-gem-full ); width: var( --size ); height: calc( var( --size ) * 1.666 ); display: inline-block; background-size: contain; background-repeat: no-repeat; margin-right: var( --border-width ); vertical-align: middle; cursor: pointer; &:hover { filter: brightness( 1.25 ) saturate( 1.25 ); } &.active { background-image: var( --datauri-gem-empty ) } } .flags-area { width: 40%; height: var( --status-height ); display: inline-block; .flag-item { --size: calc( var( --status-height ) / 1.5 ); font-size: calc( var( --size ) / 2 ); position: relative; width: var( --size ); height: var( --size ); margin-left: var( --border-width ); display: inline-block; line-height: var( --size ); text-align: center; font-family: Times; vertical-align: middle; background-color: var( --c-oxford-blue ); background-repeat: no-repeat; background-position: center; &:before { color: var( --c-shadow-white ); } &:after { content: attr( duration ); position: absolute; line-height: 1rem; bottom: 0; right: 0; } } } .action-area { font-size: calc( var( --status-height ) / 3 ); > div { --size: calc( var( --status-height ) / 1.5 ); width: var( --size ); height: var( --size ); outline: var( --default-border ); outline-offset: calc( -1 * var( --border-width ) ); margin-left: var( --border-width ); border-radius: 100vmax; display: inline-block; line-height: var( --size ); vertical-align: middle; font-weight: bold; text-align: center; font-family: Times; padding: 0; cursor: pointer; &:nth-child( 1 ) { margin-left: 0; } &:hover { filter: brightness( 1.25 ) saturate( 1.25 ); } &.active { filter: brightness( 1.5 ) saturate( 1.5 ); } &.action-toggle { background-color: hsl( 0, 100%, 12% ); } &.bonus-toggle { background-color: hsl( 113, 100%, 13% ); } &.movement-toggle { background-color: hsl( 182, 100%, 13% ); } &.reaction-toggle { background-color: hsl( 55, 100%, 12% ); } &.free-toggle { background-color: hsl( 280, 100%, 13% ); } // &.reset.button { filter: brightness( 1.25 ); } } } } // POSSESSION: PROFILE .container.portrait, .portrait-item { height: var( --portrait-size ); width: var( --portrait-size ); border-radius: 100vmax; background-color: var( --c-american-bronze ); outline: var( --default-border ); outline-offset: var( --default-outline-offset ); object-fit: contain; background-repeat: no-repeat; background-size: 50%; background-position: center; &:hover { cursor: pointer; background-color: var( --c-chrome-yellow ); } } .container.portrait { position: absolute; left: 0; bottom: 0; &.active { background-color: var( --c-chrome-yellow ); .portrait-item { height: var( --portrait-size ); width: var( --portrait-size ); margin-top: -1rem; overflow: hidden; } } .portrait-menu { position: fixed; display: flex; z-index: -1; /* replace by calculating this before .container.possession needs it*/ bottom: calc( var( --possession-height ) + var( --container-offset ) + var( --status-height ) ); left: 25%; width: 50%; height: 0; direction: ltr; /* possibly want thsi */ align-content: baseline; flex-wrap: wrap-reverse; } .portrait-item { transition-property: width, height, margin; transition-duration: 250ms; width: 0; height: 0; overflow: hidden; &:hover { z-index: 0; } &:before { content: attr( index ); position: relative; } } .level-info { --TS: 1px 1px var( --c-black ); position: absolute; bottom: 0; left: 0; &, input { text-shadow: var( --TS ); font-family: Times; font-size: calc( var( --portrait-size ) / 2.25 ); } &:before{ content: 'Lv'; display: inline-block; } } } // POSSESSION: BELT .container.belt { position: absolute; right: 0; top: 0; width: var( --belt-width ); display: flex; display: none; justify-content: space-between; .belt-select { --button-size: calc( var( --belt-item-size ) * 0.3 ); --info-size: calc( var( --belt-item-size ) * 0.4 ); width: var( --select-size ); text-align: center; } .belt-info { height: var( --info-size ); } .button { padding: 0; height: var( --button-size ); --button-color: var( --c-american-bronze ); --button-hover-color: : var( --c-chrome-yellow ); } .belt-item { width: var( --belt-item-size ); height: var( --belt-item-size ); } } // POSSESSION: HEALTH .container.health { --height: calc( var( --possession-height ) / 4 ); --height: calc( var( --possession-height ) / 3 ); --inner-height: calc( 100% - var( --border-double ) ); --font-size: calc( var( --height ) * 1.5 ); --margin-top: calc( var( --font-size ) / 8 ); --health-section-num: 11; /* the only real value you need to edit */ --separator-size: 1px; --repeat-width: calc( 100% / var( --health-section-num ) ); --health-now-index: 9; --select-index: 0; --c-separator: var( --c-shadow-black ); position: absolute; bottom: 0px; right: 0px; outline: var( --default-border ); outline-offset: var( --default-outline-offset ); background-image: var( --g-lost-health ); height: var( --height ); width: var( --belt-width ); margin-top: var( --margin-top ); cursor: pointer; .health-current { pointer-events: none; background-image: var( --g-gain-health ); height: 100%; max-width: 100%; width: calc( 100% * var( --health-now-index ) / var( --health-section-num ) ); } .health-info { font-size: var( --font-size ); font-family: Times; text-shadow: 1px 1px black; position: absolute; right: 0; bottom: calc( 100% - var( --border-width ) ); label:nth-child( 1 ) { text-align: right; } } .health-select { transition-property: left; transition-duration: 150ms; display: none; position: absolute; top: 0; left: calc( var( --select-index ) * var( --repeat-width ) ); width: var( --repeat-width ); height: 100%; pointer-events: none; background-color: var( --c-chrome-yellow ); border: var( --default-border ); border-left-width: 0; border-right-width: 0; &:before { content: attr( icon ); position: absolute; bottom: 100%; width: 500%; left: -200%; /* 100% for itself */ color: var( --c-chrome-yellow ); display: inline-block; text-align: center; font-family: 'AncientModernTales'; font-size: calc( var( --font-size ) * 1.5 ); text-shadow: 2px 2px black; } /* &[ icon = '1 - 0 = 1' ]:before { */ &[ icon = '1(-0)' ]:before { content: '💀'; font-size: var( --font-size ); bottom: calc( 100% * 2 ); } } .health-division { pointer-events: none; position: absolute; background-image: repeating-linear-gradient( 90deg, var( --c-shadow-black ), var( --separator-size ), var( --c-shadow-black ), 0, transparent calc( var( --repeat-width ) ) ); width: 100%; height: 100%; } } .creature-score, .creature-user-score { position: fixed; top: var( --container-offset ); right: var( --container-offset ); display: none; z-index: 2; max-height: 60vh; overflow-y: scroll; overflow-x: hidden; width: calc( var( --dungeon-grid-size ) * 8 ); padding: var( --container-offset ); padding-right: calc( var( --container-offset ) - 1rem ); background-color: var( --c-frosted-oxford-blue ); font-family: times; &.active { display: block } [ data-before ]:before { text-transform: capitalize; display: block; opacity: 0.25; } .score-user-name {} .score-notes, .score-user-notes { width: 100%; min-height: 6rem; background: transparent; color: var( --c-white ); } .score-relationship-list { max-height: 16rem; width: 100%; overflow-y: scroll; overflow-x: hidden; } .score-delete, .score-stamp { float: right; cursor: pointer; } .score-delete { &:before { content: 'Delete ❌' } &:hover { &:before { content: '[ Shift+Click ] ❌' } } } .score-stamp { &:before { content: 'Stamp 📜' } &:hover { &:before { content: '[ Shift+Click ] 📜' } } } .button[ data-id ] { --size: 3rem; --font-size: calc( var( --size ) / 4 ); --button-hover-color: var( --c-mist-spanish-viridian ); width: var( --size ); height: var( --size ); position: relative; font-size: var( --font-size ); font-family: "MS PGothic"; position: relative; &:before, &:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; display: block; overflow: hidden; pointer-events: none; } &:before { content: attr( data-full-name ); z-index: 1; text-overflow: ellipsis; white-space: nowrap; } &:after { z-index: 0; height: 200%; background-repeat: no-repeat; background-position: bottom; filter: grayscale( 1 ); } &:hover:after, &.selected:after { filter: grayscale( 0 ); } &:hover:before { color: var( --c-chrome-yellow ); font-weight: bold; } } } .container.instrument { display: none; &.active { display: block; } .instrument-select > .button.radio { --button-width: 2; } .instrument-player { > .button[ data-note ]:before { content: attr( data-note ) " [" attr( data-key ) "]"; } > .button.active:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var( --c-shadow-azure ); } > [ data-position = "U" ] { position: absolute; margin-top: calc( var( --dungeon-button-size ) * -1 ); margin-left: calc( var( --dungeon-button-size ) * -0.5 ); } > [ data-position = "D" ] { position: relative; } } .instrument-select > .button:before { content: attr( data-instrument-key ); } } .container.agenda { --DAY-SIZE: 3rem; --WEEK-SIZE: calc( 4 * var( --DS ) ); --YEAR-SIZE: 4rem; --DS: var( --DAY-SIZE ); --WS: var( --WEEK-SIZE ); --YS: var( --YEAR-SIZE ); --NAVW: calc( var( --WS ) + var( --YS ) + var( --CO ) ); --SIW: 8rem; --STW: calc( 100% - var( --CO3 ) - var( --NAVW ) ); --BH: 1.5rem; /* button height */ --IS: calc( var( --DS ) * 0.35 ); /* indicator base size */ --IFS: calc( var( --IS ) / 2 ); /* indicator font size */ --IPS: calc( 0px - 5% ); /* indicator positioning */ display: none; z-index: 1; &.active { display: block; } .search-input { position: absolute; left: calc( var( --STW ) - var( --SIW ) + var( --CO ) - 1rem ); top: calc( var( --CO3 ) ); padding: 0.25rem; border: 1px solid var( --c-white ); color: var( --c-white ); width: var( --SIW ); background-color: var( --c-mist-very-light-azure ); } .story.container { position: absolute; top: var( --CO3 ); left: var( --CO ); height: calc( 100% - var( --CO4 ) ); width: var( --STW ); overflow-y: scroll; overflow-x: hidden; > label { --expanding-background: transparent; /* try deleting and see if different */ --expanding-padding: var( --CO ); display: block; border-top: 1px solid var( --c-frosted-white ); &:before { font-weight: bold; font-family: math; } &[ data-egg ] { --expanding-background: var( --c-mist-red ); &:not(:focus-within) { --expanding-padding: calc( var( --CO ) / 2 ); &:before { font-size: 1rem; } &:after { display: none; } } } &[ data-editable = 'false' ] { --expanding-background: var( --c-mist-black ); } &[ data-editable = 'true' ]:hover { --story-background: var( --c-mist-violet ); } } } .calendar-navigation.container { position: absolute; top: var( --CO3 ); right: var( --CO ); height: calc(100% - var( --CO4 ) ); /*[ data-indicator ]:after {*/ [ data-yr ], [ data-day ] { /* counter-reset: indicator var( --indicator ); */ &:after { /* content: attr( data-indicator ); */ /* content: counter( indicator ); */ position: absolute; z-index: 1; bottom: var( --IPS ); right: var( --IPS ); text-align: center; font-weight: bold; font-family: math; font-size: var( --IFS ); width: var( --IS ); height: var( --IS ); line-height: var( --IS ); background-color: var( --c-red ); border-radius: 100vmax; } } .year-input { position: absolute; right: 0; z-index: 1; width: calc( var( --YS ) - 1rem ); text-align: right; outline: dotted 1px var( --c-shadow-white ); background-color: var( --c-mist-very-light-azure ); height: var( --BH ); line-height: var( --BH ); > input { right: 0; } } .month-head { position: fixed; z-index: 2; > b { background-color: var( --c-chrome-yellow ); } } .month-navigation, .year-navigation { position: absolute; top: 0; height: 100%; overflow: scroll; scroll-behavior: smooth; } .month-navigation { right: var( --YS ); width: var( --WS ); } .year-navigation { top: var( --BH ); right: 0; width: var( --YS ); height: calc( 100% - var( --BH ) ); text-align: right; > div.button { --button-color: transparent; position: relative; padding: initial; width: calc( 100% - 1rem ); height: var( --BH ); line-height: var( --BH ); &:before { content: attr( data-yr ); } } } .month.container, .month-head { display: inline-grid; grid-template-columns: 1fr 1fr 1fr 1fr; > * { position: relative; border: 1px solid var( --c-white ); padding: 0; margin: 0 -1px -1px 0; text-align: center; width: var( --DS ); line-height: var( --DS ); height: var( --DS ); } } .month.container { position: relative; &[ data-season-name = "WINTER" ] { --SC: var( --c-mist-azure ); --RC: var( --c-shadow-azure ); --HC: var( --c-azure ); } &[ data-season-name = "SPRING" ] { --SC: var( --c-mist-spanish-viridian ); --RC: var( --c-shadow-spanish-viridian ); --HC: var( --c-spanish-viridian ); } &[ data-season-name = "SUMMER" ] { --SC: var( --c-mist-red ); --RC: var( --c-shadow-red ); --HC: var( --c-red ); } &[ data-season-name = "AUTUMN" ] { --SC: var( --c-mist-chrome-yellow ); --RC: var( --c-shadow-chrome-yellow ); --HC: var( --c-chrome-yellow ); } &[ data-start-day = "0" ] { --SD: 0; } &[ data-start-day = "1" ] { --SD: 1; } &[ data-start-day = "2" ] { --SD: 2; } &[ data-start-day = "3" ] { --SD: 3; } --EC: calc( 2 + var( --SD ) ); /* end column for first day */ --ML: calc( var( --DS ) * var( --SD ) + var( --SD ) * -1px ); /* first day margin left */ &:before { content: attr( data-year ) " " attr( data-mos-name ); width: 100%; white-space: nowrap; text-overflow: clip; grid-area: 1 / 1 / 1 / 5; margin: 0.5rem 0; font-weight: bold; pointer-events: none; } &[ data-start-day = "0" ] > div.button:nth-child( 4n-0 ), &[ data-start-day = "1" ] > div.button:nth-child( 4n-1 ), &[ data-start-day = "2" ] > div.button:nth-child( 4n-2 ), &[ data-start-day = "3" ] > div.button:nth-child( 4n-3 ) { --button-color: var( --RC ); } > [ data-day ] { --button-color: var( --SC ); --button-hover-color: var( --HC ); /* background-blend-mode: soft-light; */ background-position: 0 0; background-size: 35%; &:nth-child( 1 ) { grid-area: 2 / 1 / 2 / var( --EC ); margin-left: var( --ML ); } &:before { content: attr( data-day ); } } } div:nth-child( 1 of .month ) { margin-top: var( --CO ); } } } // ENVIRONMENT ( BOTTOM RIGHT ) .container.environment { position: fixed; right: var( --container-offset ); bottom: var( --container-offset ); z-index: 1; > .menu { position: absolute; left: 1rem; top: 1rem; z-index: 1; width: var( --dungeon-button-size ); .button { display: none; } .eye { background-image: var( --datauri-eye-icon ); } .ruler { background-image: var( --datauri-ruler-icon ); } } &[ mode = "globe" ].enlarged { .container.globe { display: inline-block; } .nodes { display: block; } .button.eye { display: inline-block; } .button.ruler { display: inline-block; } .container.map > .container.indicators .waypoint { display: none; } } &[ mode = "chunk" ].enlarged { .map-graphic { display: inline-block; } .button.eye { display: inline-block; } } &[ mode = "mini"] { .map-graphic { display: inline-block; } } &[ tool = "explored" ] .waypoint { pointer-events: none; } /* out of the way while drawing !*/ .container.expandable.exploration { position: absolute; bottom: 0; --width: calc( 0.5 * var( --layout-button-size ) + 1rem ); --height: var( --width ); .map.button { background-image: var( --datauri-map-icon ); } .globe.button { background-image: var( --datauri-globe-icon ); } } .container.expandable.personnel { position: absolute; right: calc( var( --container-offset ) * -1 ); bottom: 125%; z-index: 1; &.xhas-instrument .instrument-show.button { display: inline-block; } .xinstrument-show.button{ display: none; } &:hover { width: calc( var( --width ) * 4 ); } .agenda-show.button { float: right; background-image: var( --datauri-agenda-icon ) } .relationship-show.button { background-image: var( --datauri-creature-icon ) } .character-show.button { background-image: var( --datauri-possession-icon ) } } &.enlarged { width: 100%; height: 100%; top: 0; left: 0; .container.time, .container.calendar { display: none; } img.weather { visibility: hidden; } .container.map { --rotate: 0 !important; width: 100%; height: 100%; border-radius: 0; border-width: 0; } .container.expandable.exploration { .disable-expandable(); bottom: initial; right: 1rem; top: calc( 1rem + var( --layout-button-size ) ); .button { display: block; margin-top: var( --border-width ); --width: var( --layout-button-size ); --height: var( --layout-button-size ); } } .map-graphic { --zoom: 8 !important; display: none; opacity: 0.95; height: 100%; width: 100%; } .container.map > .container.indicators { --waypoint-size: 2 !important; > div { pointer-events: initial; } .radius { display: none; } /* cant get radius to function correct in a landscape aspect */ } } .container.globe { --globe-x: 0; --globe-y: 0; --zoom: 1; --background-w: 2000; --background-h: 1000; --zoom-to: calc( 1 / var( --zoom ) ); --px-size: calc( var( --zoom-to ) * 1px ); /* the size of a mile pixel */ --container-w2: calc( var( --container-w ) / 2 ); --container-h2: calc( var( --container-h ) / 2 ); --container-w4: calc( var( --container-w ) / 4 ); --container-h4: calc( var( --container-h ) / 4 ); --background-origin-w: calc( var( --background-w ) * 1px ); --background-origin-h: calc( var( --background-h ) * 1px ); --background-size-w: calc( var( --zoom-to ) * var( --background-origin-w ) ); --background-size-h: calc( var( --zoom-to ) * var( --background-origin-h ) ); --canvas-x: calc( var( --globe-x ) * var( --px-size ) ); --canvas-y: calc( var( --globe-y ) * var( --px-size ) ); --canvas-pos-x: calc( var( --container-w2 ) - var( --canvas-x ) ); --canvas-pos-y: calc( var( --container-h2 ) - var( --canvas-y ) ); --current-location-x: 0; --current-location-y: 0; --indicator-x: calc( var( --mouse-x ) * var( --px-size ) + var( --canvas-pos-x ) ); --indicator-y: calc( var( --mouse-y ) * var( --px-size ) + var( --canvas-pos-y ) ); --minimap-size: 1 / 4; --minimap-h: var( --container-h4 ); --minimap-w: calc( var( --minimap-h ) * 2 ); --minimap-indicator-w: calc( var( --minimap-w ) * var( --zoom ) ); --minimap-indicator-h: calc( var( --minimap-h ) * var( --zoom ) ); --minimap-x: calc( var( --minimap-w ) / var( --background-w ) * var( --globe-x ) ); --minimap-pos-x: calc( var( --minimap-x ) - var( --minimap-indicator-w ) / 2 ); --minimap-y: calc( var( --minimap-h ) / var( --background-h ) * var( --globe-y ) ); --minimap-pos-y: calc( var( --minimap-y ) - var( --minimap-indicator-h ) / 2 ); display: none; position: absolute; top: 0; left: 0; z-index: 0; overflow: hidden; width: 100%; height: 100%; image-rendering: pixelated; background-image: var( --background-pop-uri ); background-size: var( --background-size-w ) var( --background-size-h ); background-color: var( --c-old-lace ); background-position-x: calc( var( --canvas-pos-x ) + 0.5 * var( --zoom-to ) ); background-position-x: var( --canvas-pos-x ); background-position-y: var( --canvas-pos-y ); .current-location { --x: var( --current-location-x ) !important; --y: var( --current-location-y ) !important; } .large.current-location { animation-duration: 500ms; animation-name: blink; animation-iteration-count: infinite; background-color: var( --c-medium-spring-green ) !important; z-index: 1; } .mini.current-location { /* reusing waypoint-xy because its convenient, maybe rename */ --waypoint-x: calc( var( --x ) / var( --background-w ) * 100% ); --waypoint-y: calc( var( --y ) / var( --background-h ) * 100% ); height: 100%; width: 100%; pointer-events: none; background-color: transparent; &:before, &:after { content: ""; position: absolute; background-color: var( --c-mist-medium-spring-green ); } &:before { width: 1px; height: 100%; top: calc( -1 * var( --waypoint-y ) ); } &:after { width: 100%; height: 1px; left: calc( -1 * var( --waypoint-x ) ); } } > .waypoints .waypoint, .current-location { --base-font-size: calc( var( --zoom-to ) * 1rem ); &[ zoom = "0" ] { --font-size: calc( 1.00 * var( --base-font-size ) ); } &[ zoom = "1" ] { --font-size: calc( 0.75 * var( --base-font-size ) ); } &[ zoom = "2" ] { --font-size: calc( 0.50 * var( --base-font-size ) ); } &[ zoom = "3" ] { --font-size: calc( 0.25 * var( --base-font-size ) ); } &[ zoom = "4" ] { --font-size: calc( 0.125 * var( --base-font-size ) ); } --x: 0; --y: 0; --tx: 0; /* title position */ --ty: 0; --width: calc( var( --font-size ) * 4 ); --hw: calc( var( --width ) / 2 ); --h-px: calc( var( --px-size) / 2 ); --waypoint-x: calc( var( --x ) * var( --px-size ) + var( --canvas-pos-x ) ); --waypoint-y: calc( var( --y ) * var( --px-size ) + var( --canvas-pos-y ) ); pointer-events: none; display: inline-block; width: var( --px-size ); height: var( --px-size ); padding: 0; position: absolute; left: var( --waypoint-x ); top: var( --waypoint-y ); background-color: var( --c-white ); } > .waypoints .waypoint { &:before { content: attr( title ); position: absolute; bottom: 100%; left: calc( -1 * var( --hw ) + var( --h-px ) ); width: var( --width ); text-align: center; opacity: 0.25; font-family: 'AncientModernTales'; font-size: calc( var( --font-size ) * 1 ); transition-property: font-size; transition-duration: 250ms; } &[ zoom = "3" ], &[ zoom = "4" ] { &:before { font-size: calc( var( --font-size ) * 0.5 ); } } &.hover { &:before { opacity: 1; font-size: calc( var( --font-size ) * 1 ); } } } > .indicator { pointer-events: none; position: absolute; border: 1px solid var( --c-shadow-white ); width: var( --px-size ); height: var( --px-size ); left: var( --indicator-x ); top: var( --indicator-y ); animation-duration: 750ms; animation-name: blink; animation-iteration-count: infinite; } > .mini { position: absolute; top: 0; right: 0; z-index: 1; width: var( --minimap-w ); height: var( --minimap-h ); opacity: 0.25; background-size: cover; background-image: var( --background-uri ); overflow: hidden; transition-duration: 150ms; transition-property: opacity; > .indicator { position: absolute; top: var( --minimap-pos-y ); left: var( --minimap-pos-x ); width: var( --minimap-indicator-w ); height: var( --minimap-indicator-h ); border: 1px solid var( --c-white ); pointer-events: none; } &:hover { opacity: 1; } } .info { position: absolute; bottom: 0; right: 0; pointer-events: none; } } .weather { transition-property: top, left; transition-duration: 250ms; pointer-events: none; position: absolute; z-index: 1; &.sun, &.moon { animation-duration: 5000ms; animation-name: glow; animation-iteration-count: infinite; animation-timing-function: linear; } } } .calendar { --odd-size: 30%; position: absolute; bottom: calc( 100% + 1rem ); left: -20%; width: 125%; font-weight: bold; font-family: times; font-size: 0.75rem; &:hover { opacity: 1; } .odd-day, .non-day, .year, .era { display: inline-block; } .odd-day, .non-day { vertical-align: middle; } .odd-day { width: var( --odd-size ); text-align: center; } .non-day { width: calc( 100% - var( --odd-size ) ); } .holiday { font-size: 1.5rem; } .month { width: 100%; } .day { font-size: 2.25rem; } .era { margin-left: 0.25rem; } } .weather.drop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; transition-property: opacity; transition-duration: 1000ms; &:before { content: ''; width: 100%; height: 100%; margin-left: 2rem; transform: scaleX( -1 ); position: fixed; } &:after { content: ''; width: 100%; height: 100%; margin-left: 2rem; position: fixed; } &.mute { opacity: 0.1 !important; } &.back { filter: blur( 5px ); transform: scaleX( -1 ); z-index: -1; } &.front { background-size: 100%; } &.whiteCloud.rain { background-image: url( "/assets/img/rain_0.gif" ); background-size: 50%; filter: saturate( 0.5 ); } &.blackCloud.rain { background-image: url( "/assets/img/rain_1.gif" ); } &.whiteCloud.snow { background-image: url( "/assets/img/snow_0.gif" ); background-size: 50%; opacity: 0.5; } &.blackCloud.snow, &.blackCloud.snow:before { background-image: url( "/assets/img/snow_1.gif" ); } &.fog { --ring-size-s: 15%; --ring-size-e: calc( var( --ring-size-s ) + 1rem ); &.mute { --ring-size-s: 17%; opacity: 0.75 !important; } filter: brightness( 5 ); background-image: radial-gradient( transparent 10%, var( --c-fog ) var( --ring-size-s ), var( --c-fog ) var( --ring-size-e ), var( --c-white ) 100% ); background-size: 100vmax 100vmax; background-position: center; background-color: var( --c-shadow-white ); &:before, &:after { width: 100vw; height: 100vh; position: fixed; left: 0; top: 0; margin: 0; background-image: url( "/assets/img/fog_0.png" ); background-size: 100vmax 100vmax; animation: fog1 15s linear 4s infinite, fogmove 15s linear 0s infinite; } &:after { background-image: url( "/assets/img/fog_1.png" ); animation: fog2 20s linear 0s infinite, fogmove 17s linear 4s infinite; } } } .container.time { position: absolute; left: 50%; top: 50%; div[ time ] { --size: calc( var( --environment-size ) / 4 ); --offset: calc( 50% - var( --environment-size ) / 8 ); /* filter: saturate( 0.25 ); */ opacity: 0.25; position: absolute; z-index: -1; margin-top: var( --offset ); margin-left: var( --offset ); width: var( --size ); height: var( --size ); border-radius: 100vmax; border: 4px solid var( --c-oxford-blue ); cursor: pointer; &:hover { opacity: 1; filter: brightness( 1.25 ) saturate( 1 ); } &.selected { opacity: 0.05; filter: saturate( 1 ); } } div[ time = 'noon' ] { z-index: 2; } div[ time = 'picker' ] { margin: 0; bottom: calc( var( --environment-size ) / 2 ); left: calc( var( --environment-size ) / 2 ); background-image: linear-gradient( to right bottom, #f40788, #0b9af9 ); } input[ type = 'color' ] { visibility: hidden; } } .container.map { --rotate: 0; --calc-rotate: calc( var( --rotate ) * -1deg ); position: relative; width: var( --environment-size ); height: var( --environment-size ); overflow: hidden; border-radius: 100vmax; border: 2px solid var( --c-old-moss-green ); .container.indicators { /* Size of Indicators */ --size-w: calc( 1 / var( --minimap-rdw ) * 100% ); --size-h: calc( 1 / var( --minimap-rdh ) * 100% ); --waypoint-size: 0.33; --waypoint-fontsize: calc( 60 * var( --waypoint-size ) / var( --minimap-rdw ) * 1rem ); --minimap-view-dist: 0; transform: rotate( var( --calc-rotate ) ); width: 100%; height: 100%; > div { /* Position relative to the minimap position */ --pos-rel-x: calc( var( --x ) - var( --minimap-pos-x ) ); --pos-rel-y: calc( var( --y ) - var( --minimap-pos-y ) ); /* Position on a map */ --pos-x: calc( ( var( --pos-rel-x ) - 0.5 ) * var( --size-w ) ); --pos-y: calc( ( var( --pos-rel-y ) - 0.5 ) * var( --size-h ) ); position: absolute; z-index: var( --y ); left: var( --pos-x ); top: var( --pos-y ); width: var( --size-w ); height: var( --size-h ); padding: initial; pointer-events: none; &:before { --title-w: 25vw; content: attr( title ); display: flex; left: calc( var( --title-w ) / -2 + 50% ); bottom: 100%; opacity: 0.05; position: absolute; width: var( --title-w ); align-items: end; justify-content: center; text-align: center; /* needed for multiline */ font-size: var( --waypoint-fontsize ); font-family: 'AncientModernTales'; transform: rotate( calc( var( --calc-rotate ) * -1 ) ); pointer-events: none; } &.creature { --creature-indicator-size: 0.75; --creature-offset: calc( var( --creature-indicator-size ) * 0.5 ); --size-cw: calc( var( --size-w ) * var( --creature-indicator-size ) ); --size-ch: calc( var( --size-h ) * var( --creature-indicator-size ) ); --pos-x: calc( ( var( --pos-rel-x ) - var( --creature-offset ) ) * var( --size-w ) ); --pos-y: calc( ( var( --pos-rel-y ) - var( --creature-offset ) ) * var( --size-h ) ); background-color: var( --c-frosted-chrome-yellow ); border-radius: 100vmax; width: var( --size-cw ); height: var( --size-ch ); } &.radius { --radius-block-size: calc( var( --minimap-view-dist ) * 2 + 1 ); --w: calc( var( --radius-block-size ) * var( --size-w ) ); --h: calc( var( --radius-block-size ) * var( --size-h ) ); --ol: calc( var( --w ) * -0.5 ); /* offset left */ --ot: calc( var( --h ) * -0.5 ); /* offset top */ animation-duration: 2500ms; animation-name: blink; animation-iteration-count: infinite; border-radius: 100vmax; border: 1px solid var( --c-frosted-white ); width: var( --w ); height: var( --h ); margin-left: var( --ol ); margin-top: var( --ot ); pointer-events: none !important; } &.waypoint { background-color: var( --c-white ); &:before{ opacity: 0.25; } } &.familiar { background-color: var( --c-azure ); } &.manual { background-color: var( --c-lilac-geode ); } &.possess { background-color: var( --c-medium-spring-green ); } &.possess, &.manual { animation-duration: 1000ms; animation-name: blink; animation-iteration-count: infinite; } &:hover:before { opacity: 1; } } } .map-graphic { --zoom: 1; --size: calc( var( --environment-size ) * var( --zoom ) ); position: absolute; top: 0; left: 0; width: var( --size ); height: var( --size ); background-color: var( --c-oxford-blue ); background-size: contain; background-position: center; background-repeat: no-repeat; transform: rotate( var( --calc-rotate ) ); /* mix-blend-mode: luminosity; */ /* filter: brightness( 4 ) saturate( 1 ); */ } .compass-info { --width: 3rem; --left: calc( 50% - var( --width ) / 2 ); user-select: none; pointer-events: none; position: absolute; z-index: 5; top: 0; left: var( --left ); width: var( --width ); text-align: center; text-shadow: 2px 1px var( --c-chrome-yellow ); /* text-shadow: 2px 1px var( --c-old-moss-green ); */ font-size: 1.5rem; font-family: garamond; } } // ANIMATIONS @keyframes blink { from { filter: brightness( 1 ); } 50% { filter: brightness( 0.5 ); } to { filter: brightness( 1 ); } } @keyframes glow { from {} 50% { filter: saturate( 2 ) hue-rotate( -5deg ); /* transform: rotate( 3deg ); */ } to {} } @keyframes fog1 { 0% { opacity: 1.0; } 50% { opacity: .25; } 100% { opacity: 1.0; } } @keyframes fog2 { 0% { opacity: 0.25; } 50% { opacity: 1.0; } 100% { opacity: 0.25; } } @keyframes fogmove { 0% { background-position: 0vmax 0%; } 100% { background-position: 100vmax 0%; } } // GLOBAL .h3 () { font-size: 2rem; font-family: times; } div.container { &.frosted { background-color: var( --c-frosted-oxford-blue ); } &.popup { --SIZE: calc( 100% - var( --CO2 ) ); position: fixed; top: var( --CO ); right: var( --CO ); width: var( --SIZE ); height: var( --SIZE ); } &.orientation-right { --SIZE: calc( 50% - var( --CO2 ) ); position: fixed; top: var( --CO ); right: var( --CO ); width: var( --SIZE ); } &.padded { padding: var( --container-offset ); } &.expandable { overflow: hidden; --width: var( --dungeon-button-size ); --height: var( --dungeon-button-size ); max-width: var( --width ); height: var( --height ); .button { width: var( --width ); height: var( --height ); } &:hover { max-width: 100vw; } } } .disable-expandable () { --width: initial; --height: initial; &:hover { max-width: initial; } } .hide-scrollbar { &::-webkit-scrollbar { width: 0; height: 0; } } [ disabled-content = "true" ], .container.belt { pointer-events: none; filter: saturate( 0 ) blur( 2px ); opacity: 0.5; } [ contenteditable ] { white-space: pre-wrap; display: inline-block; &:empty:before { content: '...' } } .button { --button-width: 1; --button-color: var( --c-frosted-oxford-blue ); --button-select-color: var( --c-violet ); --button-hover-color: var( --c-medium-spring-green ); --button-calc-width: calc( var( --button-width ) * var( --dungeon-button-size ) + ( var(--button-width) - 1 ) * var( --border-width ) ); display: inline-block; cursor: pointer; padding: 1rem; width: var( --button-calc-width ); height: var( --dungeon-button-size ); vertical-align: middle; user-select: none; background-color: var( --button-color ); background-repeat: no-repeat; background-position: center; &.selected, &.selected:hover, &.selected.hover { background-color: var( --button-select-color ); } &:hover, &.hover { background-color: var( --button-hover-color ); } &.add { background-image: var( --datauri-plus-icon ); } &.close { display: none; position: absolute; top: 1rem; right: 1rem; width: var( --layout-button-size ); height: var( --layout-button-size ); background-color: var( --c-american-bronze ); background-image: var( --datauri-cross-icon ); &:hover, &.hover { background-color: var( --c-red ) } } &.remove, &[ title = 'REMOVE' ] { background-color: var( --c-american-bronze ); background-image: var( --datauri-trash-icon ); &:hover, &.hover { background-color: var( --c-red ); filter: initial !important; } } &[ is = "expanding-input" ], &.input { color: var( --c-chrome-yellow ); &:before, &:after, input { position: absolute; top: 0; left: 0; display: inline-block; min-width: var( --dungeon-button-size ); line-height: 100%; height: 100%; color: inherit; text-align: center; vertical-align: middle; font-weight: bold; font-size: calc( var( --dungeon-button-size ) / 2 ); text-shadow: 1px 1px black; background-repeat: no-repeat; background-position: center; } &:before { opacity: 0.25; pointer-events: none; } } } div.toggle {} .active > .close.button, .closeable .close.button { display: inline-block; } input { border : none; &:focus { outline : none; } } .scrollable-no-scrollbar { overflow : scroll; -ms-overflow-style : none; /* Internet Explorer 10+ */ scrollbar-width : none; /* Firefox */ &::-webkit-scrollbar { display : none; } /* Safari and Chrome */ } [ is = "expanding-input" ] { --expanding-padding: 0px; /* need px because calc doesnt like 0*/ --expanding-input-padding: 0px; --expanding-outline: var( --c-shadow-white ); --expanding-background: transparent; --EP: var( --expanding-padding ); /* shortajnnd padding*/ --EP2: calc( var( --EP ) * 2 ); /* dbl padding*/ --TAH: calc( 100% - var( --EP2 ) ); /* text area width/height */ --TAHB: calc( 100% - var( --EP2 ) - 1rem ); /* text area height /w before title */ padding: var( --expanding-padding ); display: inline-block; vertical-align: top; align-items: center; position: relative; background-color: var( --expanding-background ); cursor: text; &[ textarea ] { overflow: hidden; white-space: pre-wrap; textarea { height: var( --TAH ); } &[ data-before ] textarea { height: var( --TAHB ); } &:before { display: block; } } &::after, input, textarea { color: inherit; font: inherit; padding: var( --expanding-input-padding ); resize: none; background: none; appearance: none; border: none; text-align: inherit; } &:focus-within { outline: dotted 1px var( --expanding-outline ); background-color: var( --expanding-background ); textarea:focus, input:focus { outline: none; } } input, textarea { position: absolute; width: var( --TAH ); overflow-y: hidden; } &:before { content: attr( data-before ); } &:after { /* used for automatic sizing */ content: attr( data-space ) " "; position: relative; width: auto; visibility: hidden; white-space: pre-wrap; } }