42 files modified
1 files added
| | |
| | | header>a{margin:0 auto}nav.sidebar{position:fixed;top:var(--btn);bottom:0;left:0;z-index:var(--z-4);background-color:var(--base);box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw);width:var(--btn);transition:var(--trans-size);overflow:hidden auto;height:100%;padding-bottom:var(--btn)}nav.sidebar>ul{--gap:0}nav.sidebar .toggle.main.main{padding:0;position:fixed;left:unset;bottom:0;right:0;z-index:var(--z-8);box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw);width:var(--btn);height:var(--btn)}nav.sidebar .toggle.main .icon{--w:1.2em}nav.sidebar .toggle:not(.main){display:none}nav.sidebar.open .toggle:not(.main){display:inline-flex}nav.sidebar .icon{--w:var(--chip_);width:var(--btn);min-width:var(--chip);transition:var(--trans-size),transform var(--trans-base)}nav.sidebar.open .icon{--w:var(--chip);width:var(--w)}nav.sidebar.open{width:fit-content;max-width:100%}nav.sidebar ul{height:max-content;width:100%;--gap:0}nav.sidebar .toggle{width:var(--btn);height:var(--chipchip);box-shadow:none;background-color:transparent;min-height:0}nav.sidebar .toggle:focus,nav.sidebar .toggle:hover{background-color:var(--action-0);color:var(--action-contrast)}nav.sidebar .title{max-width:0;opacity:0;transition:max-width var(--trans-base)}nav.sidebar.open .title{white-space:nowrap;max-width:max-content;opacity:1}nav.sidebar .icon{min-width:var(--chip_)}nav.sidebar li{--justify:center;--wrap:nowrap;--align:flex-start;overflow:hidden}nav.sidebar.open li>div{width:100%;padding-right:var(--btn)}nav.sidebar .has-submenu{height:max-content}nav.sidebar li ul{width:0}nav.sidebar li.open ul{width:max-content}nav.sidebar.open li.has-submenu>div{padding-right:0}nav.sidebar.open li.has-submenu>ul{padding-left:var(--chip)}nav.sidebar .a{color:var(--contrast-200)}nav.sidebar .a,nav.sidebar a{height:var(--chipchip);display:flex;justify-content:center;align-items:center;transition:none;padding-left:0}nav.sidebar.open .a,nav.sidebar.open a{width:100%;justify-content:flex-start}nav.sidebar .has-submenu ul{max-height:0;height:0;overflow:hidden;transition:var(--trans-size)}nav.sidebar .has-submenu.open>ul{height:100%;max-height:fit-content}aside.main.main#queue{bottom:0}button.qtoggle.sticky{bottom:0;left:0}section.replace{margin:0 var(--btn_) 0 calc(var(--btn) + var(--chipchip))}section.replace>*{max-width:100%}.dashboard :is(h1,h2,h3,h4,h5,h6){text-transform:none;margin:.5em 0 1em}ul.dashboard{margin:0;padding:0;display:flex;justify-content:flex-start;gap:.5rem;flex-wrap:wrap}ul.dashboard li{list-style:none}ul.dashboard p{margin:0}.dashboard .main-actions,.dashboard main>footer{position:absolute;left:var(--offScreen);width:0;padding:0}.all-filters{margin:1rem 0;padding:1rem 0;border:1px solid var(--base-100);border-width:1px 0;--gap:0;width:100%}.all-filters summary{width:100%}.all-filters summary:hover{color:var(--action-0)}.all-filters .row{--justify:flex-start}.all-filters+[data-action=clear-filters]{--w:1em;width:max-content;font-size:var(--txt-x-small);min-height:var(--chip);margin-left:auto;display:block;position:relative;top:-1rem}.all-filters [data-action=refresh]{margin-left:auto;--w:1em!important;flex-wrap:nowrap;width:max-content;justify-content:flex-start;transition:var(--trans-size);min-height:var(--chip);font-size:var(--txt-x-small)}.all-filters [data-action=refresh]:focus,.all-filters [data-action=refresh]:hover{width:max-content}.all-filters [data-action=refresh] span{max-width:0;transition:var(--trans-size);overflow:hidden;white-space:nowrap}.all-filters [data-action=refresh]:focus span,.all-filters [data-action=refresh]:hover span{max-width:max-content}.all-filters .btn+label{box-shadow:var(--shdw-none);color:var(--contrast-200)}.all-filters .radio-options input:not(.ch):checked+label{box-shadow:rgba(var(--base-rgb),var(--op-6)) var(--shdw-inset);color:var(--contrast-50);border-color:var(--contrast-50)}.all-filters .filters{width:100%}.controls .radio-options,.filters.row.start{--align:center;--justify:flex-start;--gap:.5rem}.all-filters span.label{text-transform:uppercase;font-size:var(--txt-small);font-weight:900;width:15vw;display:inline-flex;align-items:center;padding-right:2rem}@media (max-width:767px){.all-filters>.row{padding:.5rem 0}.all-filters span.label{padding-top:.5rem;width:100%;border-top:1px solid var(--base-200)}}.controls .icon{--w:1.4rem}.all-filters .btn+label,.all-filters button{height:var(--chip_);padding:.125rem!important;min-width:0;min-height:var(--chip_);width:var(--chip_)}.all-filters>.row{padding:.25rem 0}.all-filters .btn+label:focus,.all-filters .btn+label:hover,.all-filters button:focus,.all-filters button:hover{background-color:transparent;color:var(--action-0);border-color:var(--action-0)}.search-container:not(.open) .clear-search,.search-container:not(.open) input[type=search]{transform:scaleX(0);transform-origin:left;width:0;padding:0;transition:transform var(--trans-base),width var(--trans-base),padding var(--trans-base)}.search-container button{padding:.5rem}.search-container .icon{--w:1.5rem}.search-container.open .clear-search,.search-container.open input[type=search]{transform:scaleX(1);transform-origin:left;transition:transform var(--trans-base),width var(--trans-base),padding var(--trans-base)}.all-filters>.search,.search-container,input[type=search]{width:100%}nav.tabs{position:fixed;z-index:var(--z-4);width:calc(100% - var(--btn));top:var(--btn);left:var(--btn);background-color:rgba(var(--base-rgb),var(--op-45));box-shadow:rgba(var(--base-rgb),var(--op-6)) var(--shdw-down)}.replace:has(nav.tabs){margin-top:var(--btn)} |
| | | header>a{margin:0 auto}nav.sidebar{position:fixed;top:var(--btn);bottom:0;left:0;z-index:var(--z-4);background-color:rgb(var(--base));box-shadow:rgba(var(--base),var(--op-45)) var(--shdw);width:var(--btn);transition:var(--trans-size);overflow:hidden auto;height:100%;padding-bottom:var(--btn)}nav.sidebar>ul{--gap:0}nav.sidebar .toggle.main.main{padding:0;position:fixed;left:unset;bottom:0;right:0;z-index:var(--z-8);box-shadow:rgba(var(--base),var(--op-45)) var(--shdw);width:var(--btn);height:var(--btn)}nav.sidebar .toggle.main .icon{--w:1.2em}nav.sidebar .toggle:not(.main){display:none}nav.sidebar.open .toggle:not(.main){display:inline-flex}nav.sidebar .icon{--w:var(--chip_);width:var(--btn);min-width:var(--chip);transition:var(--trans-size),transform var(--trans-base)}nav.sidebar.open .icon{--w:var(--chip);width:var(--w)}nav.sidebar.open{width:fit-content;max-width:100%}nav.sidebar ul{height:max-content;width:100%;--gap:0}nav.sidebar .toggle{width:var(--btn);height:var(--chipchip);box-shadow:none;background-color:transparent;min-height:0}nav.sidebar .toggle:focus,nav.sidebar .toggle:hover{background-color:rgb(var(--action-0));color:var(--action-contrast)}nav.sidebar .title{max-width:0;opacity:0;transition:max-width var(--trans-base)}nav.sidebar.open .title{white-space:nowrap;max-width:max-content;opacity:1}nav.sidebar .icon{min-width:var(--chip_)}nav.sidebar li{--justify:center;--wrap:nowrap;--align:flex-start;overflow:hidden}nav.sidebar.open li>div{width:100%;padding-right:var(--btn)}nav.sidebar .has-submenu{height:max-content}nav.sidebar li ul{width:0}nav.sidebar li.open ul{width:max-content}nav.sidebar.open li.has-submenu>div{padding-right:0}nav.sidebar.open li.has-submenu>ul{padding-left:var(--chip)}nav.sidebar .a{color:rgb(var(--contrast-200))}nav.sidebar .a,nav.sidebar a{height:var(--chipchip);display:flex;justify-content:center;align-items:center;transition:none;padding-left:0}nav.sidebar.open .a,nav.sidebar.open a{width:100%;justify-content:flex-start}nav.sidebar .has-submenu ul{max-height:0;height:0;overflow:hidden;transition:var(--trans-size)}nav.sidebar .has-submenu.open>ul{height:100%;max-height:fit-content}aside.main.main#queue{bottom:0}button.qtoggle.sticky{bottom:0;left:0}section.replace{margin:0 var(--btn_) 0 calc(var(--btn) + var(--chipchip))}section.replace>*{max-width:100%}.dashboard :is(h1,h2,h3,h4,h5,h6){text-transform:none;margin:.5em 0 1em}ul.dashboard{margin:0;padding:0;display:flex;justify-content:flex-start;gap:.5rem;flex-wrap:wrap}ul.dashboard li{list-style:none}ul.dashboard p{margin:0}.dashboard .main-actions,.dashboard main>footer{position:absolute;left:var(--offScreen);width:0;padding:0}.all-filters{margin:1rem 0;padding:1rem 0;border:1px solid rgb(var(--base-100));border-width:1px 0;--gap:0;width:100%}.all-filters summary{width:100%}.all-filters summary:hover{color:rgb(var(--action-0))}.all-filters .row{--justify:flex-start}.all-filters+[data-action=clear-filters]{--w:1em;width:max-content;font-size:var(--txt-x-small);min-height:var(--chip);margin-left:auto;display:block;position:relative;top:-1rem}.all-filters [data-action=refresh]{margin-left:auto;--w:1em!important;flex-wrap:nowrap;width:max-content;justify-content:flex-start;transition:var(--trans-size);min-height:var(--chip);font-size:var(--txt-x-small)}.all-filters [data-action=refresh]:focus,.all-filters [data-action=refresh]:hover{width:max-content}.all-filters [data-action=refresh] span{max-width:0;transition:var(--trans-size);overflow:hidden;white-space:nowrap}.all-filters [data-action=refresh]:focus span,.all-filters [data-action=refresh]:hover span{max-width:max-content}.all-filters .btn+label{box-shadow:var(--shdw-none);color:rgb(var(--contrast-200))}.all-filters .radio-options input:not(.ch):checked+label{box-shadow:rgba(var(--base),var(--op-6)) var(--shdw-inset);color:rgb(var(--contrast-50));border-color:rgb(var(--contrast-50))}.all-filters .filters{width:100%}.controls .radio-options,.filters.row.start{--align:center;--justify:flex-start;--gap:.5rem}.all-filters span.label{text-transform:uppercase;font-size:var(--txt-small);font-weight:900;width:15vw;display:inline-flex;align-items:center;padding-right:2rem}@media (max-width:767px){.all-filters>.row{padding:.5rem 0}.all-filters span.label{padding-top:.5rem;width:100%;border-top:1px solid rgb(var(--base-200))}}.controls .icon{--w:1.4rem}.all-filters .btn+label,.all-filters button{height:var(--chip_);padding:.125rem!important;min-width:0;min-height:var(--chip_);width:var(--chip_)}.all-filters>.row{padding:.25rem 0}.all-filters .btn+label:focus,.all-filters .btn+label:hover,.all-filters button:focus,.all-filters button:hover{background-color:transparent;color:rgb(var(--action-0));border-color:rgb(var(--action-0))}.search-container:not(.open) .clear-search,.search-container:not(.open) input[type=search]{transform:scaleX(0);transform-origin:left;width:0;padding:0;transition:transform var(--trans-base),width var(--trans-base),padding var(--trans-base)}.search-container button{padding:.5rem}.search-container .icon{--w:1.5rem}.search-container.open .clear-search,.search-container.open input[type=search]{transform:scaleX(1);transform-origin:left;transition:transform var(--trans-base),width var(--trans-base),padding var(--trans-base)}.all-filters>.search,.search-container,input[type=search]{width:100%}nav.tabs{position:fixed;z-index:var(--z-4);width:calc(100% - var(--btn));top:var(--btn);left:var(--btn);background-color:rgba(var(--base),var(--op-45));box-shadow:rgba(var(--base),var(--op-6)) var(--shdw-down)}.replace:has(nav.tabs){margin-top:var(--btn)} |
| | |
| | | .field{width:100%;margin:.5em 0;padding:.5em 0}.field+.field{border-top:1px solid var(--base-200)}.field .wrapper{width:100%;position:relative}.field .validation{flex-shrink:0;max-width:0;transition:var(--trans-size)}.field.has-error .validation.error,.field.has-success .validation.success{max-width:var(--btn)}.field.has-error .error{color:var(--error)}.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--error);background-color:var(--errorBack)}.field.has-error input:focus,.field.has-error select:focus,.field.has-error textarea:focus{outline-color:var(--error);box-shadow:rgba(var(--error-rgb),.2)}.field.has-success .success{color:var(--success)}.validation-message{color:var(--errorText);font-size:var(--txt-small);margin-top:.25rem;display:block}.field[data-field=post_status] .wrapper{--justify:flex-start}.field[data-field=post_status] .btn+label{width:var(--chipchip);min-height:var(--chipchip);padding:0}.field[data-field=post_status] .btn+label:hover,.field[data-field=post_status] .btn:focus+label{color:var(--action-contrast)}.date-wrapper{position:relative;display:inline-block}input[type=date]{padding:8px 36px 8px 8px;border-radius:4px}input[type=date]::-webkit-calendar-picker-indicator{opacity:0;width:100%;height:100%;position:absolute;top:0;left:0;cursor:pointer}input[type=date]+.icon{--w:20px;position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none}input:is([type=time],[type=datetime-local],[type=date]){padding:.5rem;border:1px solid var(--contrast-200);border-radius:4px;font-size:14px;min-width:180px;background:var(--base);color:var(--contrast);cursor:pointer}.date-wrapper input[type=date]:focus,.datetime-wrapper input[type=datetime-local]:focus,.time-wrapper input[type=time]:focus,.wrapper input:is([type=time],[type=datetime-local],[type=date]):focus{border-color:var(--action-0);box-shadow:0 0 0 2px rgba(var(--action-rgb),.1)}.date-wrapper .icon,.datetime-wrapper .icon,.time-wrapper .icon,.wrapper .icon{width:18px;height:18px;background-color:var(--contrast);opacity:.7}.quantity{margin:0;display:inline-flex;width:fit-content;align-items:center;justify-content:center;border:1px solid transparent;border-radius:4px;position:relative}.quantity:focus-within{border-color:var(--action-0)}.quantity label{margin:0;font-size:var(--txt-small)}.quantity button{background:var(--base);padding:0;width:var(--chip_);height:var(--chip_);min-height:0;z-index:0;position:relative;border:1px solid var(--base-200);color:var(--contrast-200)}.quantity button:hover:not(:disabled){color:var(--action-0);border-color:var(--action-0);background-color:var(--base)}.quantity button:active:not(:disabled){background-color:var(--action-0);color:var(--light-0);transform:scale(.95)}.quantity button:disabled{opacity:.5;cursor:not-allowed}.quantity input[type=number]{z-index:1;border:1px solid var(--base-200);background:var(--base);text-align:center;font-size:1.1rem;width:60px;height:48px;margin:0;padding:0!important;appearance:textfield}.quantity input[type=number]::-webkit-inner-spin-button,.quantity input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.quantity input[type=number]:focus{background-color:var(--base-50)}.quantity button.increase{left:-2px;border-radius:0 4px 4px 0}.quantity button.decrease{right:-2px;border-radius:4px 0 0 4px}details.uploader .file-upload-container{margin:1rem 0;max-width:100%}.field.upload{position:relative}.field.upload .progress{display:none}.field.upload.uploading .progress{display:block}.field.upload .actions{position:absolute;top:0;right:0}.empty-group,.file-upload-wrapper,.preview-wrap .item-grid{border:2px dashed var(--action-0);border-radius:4px;padding:2rem;text-align:center;transition:all .3s ease;background:rgba(var(--action-rgb),var(--op-1));position:relative;cursor:pointer;user-select:none}.file-upload-wrapper{max-width:var(--content);margin:1rem auto}.file-upload-wrapper h2{margin:0;font-size:var(--txt-large)}.dragover,.empty-group:hover,.file-upload-wrapper:hover,.preview-wrap .item-grid:hover{background:rgba(var(--action-rgb),var(--op-2));border-color:var(--action-0)}.preview-wrap:has(.item-grid:empty) .selection-controls{display:none}.preview-wrap .item-grid{min-height:20vh}.preview-wrap .item-grid:empty::before{content:'Unsorted images become their own posts.';display:block}.file-upload-wrapper input[type=file]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.empty-group p,.file-upload-text{margin:0}.empty-group p strong,.file-upload-text strong{color:var(--action-0);text-decoration:underline}.item-grid.groups{grid-template-columns:repeat(1,1fr)}.item-grid.group{margin-bottom:0}.item-grid:is(.restore,.group,.preview) .item{display:block;--w:1.1em}.item-grid:is(.restore,.group,.preview) button{padding:.25rem .5rem}.item-grid:is(.restore,.group,.preview) .preview>input[type=checkbox]:not(.label-button)+label{padding-left:0;margin:0}.item-grid:is(.restore,.group,.preview) .item .item-actions{position:absolute;top:0;right:0;left:var(--chipchip)}.item-grid:is(.restore,.group,.preview) summary{padding:.5rem}.item-grid:is(.restore,.group,.preview):has([type=checkbox]:checked){padding:.5rem;background-color:rgba(var(--action-rgb),var(--op-4));opacity:1}.item-grid:is(.restore,.group,.preview):has([type=checkbox]:checked) img{filter:none}.item-grid:is(.restore,.group,.preview):has([type=checkbox]:checked) .item img{filter:var(--filter)}.item-grid.preview summary span,.item-grid:is(.restore,.group,.preview):has([type=checkbox]:checked) details{display:none}[type=radio].featured:checked+label .icon-star,[type=radio].featured:not(:checked)+label .icon-star-fi{display:none}[type=radio].featured:checked+label .icon-star-fi,[type=radio].featured:not(:checked)+label .icon-star{display:inline-block}.item:is(.restore,.upload){border-radius:var(--radius);aspect-ratio:unset;overflow:hidden;background:var(--base);border:1px solid var(--base-200)}.item:is(.restore,.upload) [for=select-item]{aspect-ratio:1}.item.upload:has(details[open]){grid-column:1/-1;padding:.5rem 10%;margin:1rem 0;background-color:transparent;border:2px dashed var(--action-200)}.item.upload:has(details[open]) details[open]{background-color:transparent}.item:is(.restore,.upload) img{transform:scale(1);transition:transform var(--trans-base)}.item:is(.upload,.restore):hover img{transform:scale(1.02)}.upload-group{padding:5px;border-radius:var(--radius);background-color:rgba(var(--action-rgb),var(--op-1))}.upload-group .selected .field{margin:0}.upload-group .selection-actions button{aspect-ratio:unset}.submit-uploads{position:fixed;bottom:0;left:var(--btn_);z-index:var(--z-6);height:var(--btn);box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw);border-radius:var(--radius);animation:pulse-color 5s infinite;animation-delay:1s;background-color:var(--action-0);color:var(--action-contrast)}.submit-uploads:hover{background-color:var(--base-200);color:var(--contrast-200)}.empty-group{order:-1;grid-column:1/-1;padding:20px;border-radius:var(--radius);margin:10px 0;cursor:pointer;transition:all var(--trans-base);text-align:center;background-color:rgba(var(--action-rgb),var(--op-1))}.group-display:not([hidden])~.file-upload-container{display:none}.dragging,.upload.item.dragging{opacity:.7;transform:scale(.95) rotate(3deg);z-index:var(--z-7);box-shadow:0 8px 25px rgba(var(--contrast-rgb),var(--op-2))}.dragover{background:rgba(var(--action-rgb),var(--op-3))!important;border-color:var(--action-0)!important;transform:scale(1.05);animation:drop-pulse .8s infinite ease-in-out}.drag-preview{position:fixed;z-index:var(--z-9);width:fit-content;overflow:visible;pointer-events:none;opacity:.9;transform:scale(1.05);transition:transform .2s ease}.drag-preview .drag-items{width:max-content;height:max-content;position:relative}.drag-preview .drag-items .dragi-item{width:120px;height:120px;position:absolute;top:0;left:0;background:var(--base);border-radius:var(--radius-outer);box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw)}.drag-preview .drag-items .drag-item:nth-child(1){transform:rotate(-3deg);z-index:3}.drag-preview .drag-items .drag-item:nth-child(2){left:8px;top:-4px;transform:rotate(4deg);z-index:2;transition-delay:30ms}.drag-preview .drag-items .drag-item:nth-child(3){left:-6px;top:-8px;transform:rotate(-5deg);z-index:1;transition-delay:60ms}.drag-preview .drag-items .drag-item:nth-child(4){left:12px;top:-12px;transform:rotate(3deg);z-index:0;transition-delay:90ms}.drag-preview .drag-items .drag-item:nth-child(n+5){left:-10px;top:-16px;transform:rotate(-4deg);z-index:0;opacity:.8}.drag-preview .drag-items img,.drag-preview .drag-items video{width:100%;height:100%;object-fit:cover;display:block}.drag-preview .drag-count{position:absolute;top:-8px;right:-8px;background:var(--base-200);color:var(--contrast);border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw);z-index:var(--z-3)}.item.dragging{opacity:.5;transform:scale(.95);filter:grayscale(50%);transition:opacity .2s ease,transform .2s ease,filter .2s ease}@keyframes drop-pulse{0%,100%{background-color:rgba(var(--action-rgb),var(--op-3));transform:scale(1.02)}50%{background-color:var(rgba(var(--action-rgb),var(--op-4)));transform:scale(1.04)}}.selection-actions{display:flex;gap:.25rem}@media (max-width:767px){body:not(.uploading):has(.group-display:not([hidden])){overflow:hidden}body:not(.uploading):has(.group-display:not([hidden])) .qtoggle{z-index:var(--z-1)}.group-display.group-display{position:fixed;top:var(--btn);bottom:var(--btn);left:0;right:0;max-height:var(--maxHeight);overflow:hidden;z-index:var(--z-6);width:calc(100% - 1rem);height:calc(100% - 1rem);padding:0 0 3rem;--justify:flex-start;--align:flex-start;--gap:0}.group-display::before{content:'';display:block;z-index:-1;top:-.5rem;bottom:-.5rem;left:-.5rem;right:-.5rem;position:absolute;background-color:rgba(var(--base-rgb),var(--op-6));filter:blur(5px)}.group-display .preview-wrap,.group-display .sidebar{--wrap:nowrap;height:50%;overflow:hidden auto;position:relative;padding:.5rem}.group-display .preview-wrap{top:0}.group-display .preview-wrap .selected{display:flex;justify-content:space-between;align-items:center}.group-display .sidebar{bottom:0;flex-wrap:nowrap;overflow:hidden auto;background-color:var(--contrast-200);color:var(--base)}.group-display .sidebar>.hint{color:var(--contrast)}.group-display .sidebar .header{display:none}.group-display .preview-actions{top:0;flex-shrink:0}.group-display .preview-wrap>.hint,.group-display .sidebar>.hint{bottom:0;margin:0;text-align:center}.group-display .preview-actions,.group-display .preview-wrap>.hint,.group-display .sidebar>.hint{position:absolute;left:0;right:0;background-color:rgba(var(--base-rgb),var(--op-6));z-index:var(--z-3);box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw)}.group-display .item-grid{height:100%;overflow:hidden auto;grid-template-columns:repeat(3,1fr);padding:2rem 0}.group-display .sidebar>.item-grid{grid-template-columns:repeat(1,1fr);gap:1rem;padding:0}.group-display .sidebar .empty-group{order:0;position:sticky;height:fit-content;top:0;z-index:var(--z-3);background-color:rgba(var(--action-rgb),var(--op-6))}.group-display .sidebar .upload-group{order:1}.group-display .sidebar .empty-group p{margin:0}.group-display .field,.group-display .field label{margin:0;padding:0}.group-display .sidebar h4{margin:.25rem}.group-display .item{width:100%;height:max-content}.submit-uploads{bottom:var(--btn);left:0;right:0;width:100%;height:3rem}body.uploading .group-display.group-display{position:relative;top:unset;bottom:unset;right:unset;left:unset}}@media (min-width:768px){.group-display.group-display{--wrap:nowrap;--dir:row;--gap:1rem;--align:flex-start}.group-display .preview-wrap,.group-display .sidebar{--justify:flex-start;--wrap:nowrap;max-height:calc(100vh - var(--btnbtn));overflow:hidden auto}.group-display .preview-wrap,.group-display .sidebar{width:50%}.preview-actions,.preview-wrap .hint{position:sticky;z-index:var(--z-3);box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw);background-color:var(--base);width:100%}.preview-actions{top:0;left:0;right:0}.preview-actions .field{margin:0}.preview-wrap .hint,.sidebar>.hint{bottom:-1rem;padding-bottom:1rem;margin:0;left:0;right:0;text-align:center}}.item-grid.restore{grid-template-columns:repeat(1,1fr)}.editor-container .ql-toolbar{display:flex;background-color:var(--base-50);justify-content:flex-start;flex-wrap:wrap;padding:.25rem;gap:.5rem 1rem;border-top-left-radius:var(--radius);border-top-right-radius:var(--radius);border-bottom:4px solid var(--base-50)}.ql-toolbar button{min-height:0;padding:.5rem}.ql-toolbar .ql-formats{display:flex;gap:.25rem}.editor-container .ql-container{--padding:1rem;background-color:var(--base);border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius);height:fit-content;padding:2px;border:1px solid var(--base-200)}.editor-container .ql-container .ql-editor{padding:var(--padding);width:100%;height:100%}.ql-editor img{max-width:50%;height:auto}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-hidden{display:none}.ql-tooltip{position:absolute;transform:translateY(10px);background-color:var(--base-100);border:1px solid var(--base);box-shadow:0 0 5px rgba(var(--base-rgb),var(--op-6));color:var(--contrast);padding:5px 12px;white-space:nowrap}[data-type=single] .item-grid{display:flex}.repeater-row details summary::after{margin-left:0}.repeater-row details summary button{margin-left:auto}.repeater .field-input-wrapper{flex-direction:column}.repeater .repeater-items{width:100%}.add-repeater-row,.remove-row{margin-left:auto;min-height:0;height:var(--chipchip);background-color:var(--action-0)}.field.tag-list .row{margin-bottom:1rem}.field.tag-list .row .field{flex:1;min-width:150px;margin:0}.field.tag-list .tag .add-tag-item{flex-shrink:0;white-space:nowrap;margin-top:calc(var(--txt-medium) + 1rem)}.field.tag-list .tag-items{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;min-height:2rem}.field.tag-list .tag-item{background:var(--base-200);padding:.4rem .75rem;border-radius:4px;display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;line-height:1.2}.field.tag-list .tag-item:hover{background:var(--base-100)}.field.tag-list .tag-label{max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.field.tag-list .remove-tag{min-height:0;padding:.25rem;color:var(--contrast);transition:transform .2s;box-shadow:none}.field.tag-list .remove-tag:hover{transform:scale(1.2)}@media (max-width:768px){.field.tag-list .tag{flex-direction:column;align-items:stretch}.field.tag-list .tag .field{min-width:100%}}.form-progress{padding:0 1rem}.form-progress .progress{background:var(--base-100);border-radius:var(--radius);padding:1rem}.form-progress .bar{height:6px;background:var(--base-200);border-radius:3px;overflow:hidden;margin-bottom:.5rem}.form-progress .fill{height:100%;background:linear-gradient(90deg,var(--action-0),var(--action-200));width:0%;transition:width .4s ease;border-radius:3px}.form-progress .step-text{font-size:var(--txt-small);font-weight:600;color:var(--contrast-200)}form nav.tabs{position:relative;top:0;left:0;right:0;padding:1rem 0;gap:0;z-index:0}form nav.tabs button{position:relative;background:0 0;border:none;padding:.5rem 1rem .5rem 3rem;z-index:1}form nav.tabs .step-number{width:2.5rem;height:100%;border-radius:50% 0 0 50%;position:absolute;left:0;top:0;background:var(--base-200);color:var(--contrast-50);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--txt-small);border:3px solid var(--base)}form nav.tabs button.pending .step-number{background:var(--base-100);color:var(--contrast-200)}form nav.tabs button.active .step-number,form nav.tabs button.current .step-number{background:var(--action-0);color:var(--action-contrast);border-color:var(--action-200)}form nav.tabs button.completed .step-number{background:var(--successBack);color:var(--successBack);border-color:var(--successText)}form nav.tabs button.completed .step-number::before{content:'✓';font-size:1.2rem;color:var(--successText);position:absolute}form nav.tabs button.completed h2{color:var(--contrast-200)}.step-navigation{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--base-200);gap:1rem}.step-navigation .prev-step{background:var(--base-100)}.step-navigation .next-step,.step-navigation button[type=submit]{margin-left:auto}@media (max-width:768px){form nav.tabs button{min-width:80px;font-size:var(--txt-small)}form nav.tabs button h2{font-size:var(--txt-small)}form{--step-size:2rem}}.field input.error,.field select.error,.field textarea.error{border-color:var(--errorBack)}.error-message{color:var(--errorText);font-size:var(--txt-small);margin-top:.25rem;display:block}.form-summary{padding:2rem;border-radius:8px;margin-top:2rem;border:2px dashed var(--contrast-200)}.form-summary .message{margin-bottom:2rem}.form-summary .result+.result{position:relative;margin-top:1.5rem;padding-top:1.5rem}.form-summary .result+.result::before{position:absolute;top:0;left:16.5%;content:'';width:67%;height:1px;border-bottom:1px solid var(--base-200)}.form-summary h2{margin:1rem 0}.form-summary h4{background-color:var(--base-100);padding:.5rem 2rem;position:relative;left:-2rem;color:var(--contrast-200);font-size:.875rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem}.form-summary p{color:var(--text);margin:0}.group-summary,.repeater-summary{background:var(--base-100);padding:1rem;border-radius:4px;margin-top:.5rem}.repeater-row{margin-bottom:1rem}.repeater-row:last-child{margin-bottom:0}.selected-item{border:1px solid var(--base-200);border-radius:var(--radius);font-size:var(--txt-x-small);background-color:var(--base);padding:.25rem .5rem}.selected-item button{--w:.5em;min-height:1em;width:1em;padding:0}.selector .auto-wrapper,.selector .selected-items{flex:1;width:100%}.fstatus{z-index:var(--z-5);background-color:rgba(var(--base-rgb),var(--op-6));border-radius:var(--radius);padding:0 .5rem;position:fixed;right:.5rem;top:var(--btnbtn);--w:1em;box-shadow:rgba(var(--base-rgb),var(--op-6)) var(--shdw);--wrap:nowrap;--gap:1rem}.fstatus .spinner{display:none}.fstatus.loading .spinner{display:inline-block}.fstatus p{margin:0;padding:.25rem}.restore-uploads .item-grid.group .field.group,.restore-uploads .upload-group .selection-actions{display:none}.upload-group .item-grid.group{grid-template-columns:repeat(2,1fr)}.restore-uploads .item-grid.group{grid-template-columns:repeat(3,1fr)}fieldset{width:100%;border-color:var(--base-200)}.restore-form.restore-form[hidden]{display:block!important;position:fixed;bottom:var(--offScreen);right:var(--btnbtn);transition:bottom var(--trans-base);transition-duration:2s}.restore-form.restore-form:not([hidden]){width:50vw;padding:1rem;z-index:var(--z-7);background-color:rgba(var(--base-rgb),var(--op-6));border-radius:var(--radius);box-shadow:rgba(var(--action-rgb),var(--op-6)) var(--shdw);position:fixed;right:var(--btnbtn);bottom:0;transition:bottom var(--trans-base)}.restore-form h3{font-size:var(--txt-medium)}body:has(nav.fixed.bottom) .restore-form.restore-form:not([hidden]){bottom:var(--btn)}.restore-form .actions{display:flex;width:100%}.restore-form .actions button{min-height:var(--chip);font-size:var(--txt-x-small);width:100%} |
| | | .field{width:100%;margin:.5em 0;padding:.5em 0}.field+.field{border-top:1px solid var(--base-200)}.field .wrapper{width:100%;position:relative}.field .validation{flex-shrink:0;max-width:0;transition:var(--trans-size)}.field.has-error .validation.error,.field.has-success .validation.success{max-width:var(--btn)}.field.has-error .error{color:var(--error)}.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--error);background-color:var(--errorBack)}.field.has-error input:focus,.field.has-error select:focus,.field.has-error textarea:focus{outline-color:var(--error);box-shadow:rgba(var(--error-rgb),.2)}.field.has-success .success{color:var(--success)}.validation-message{color:var(--errorText);font-size:var(--txt-small);margin-top:.25rem;display:block}.field[data-field=post_status] .wrapper{--justify:flex-start}.field[data-field=post_status] .btn+label{width:var(--chipchip);min-height:var(--chipchip);padding:0}.field[data-field=post_status] .btn+label:hover,.field[data-field=post_status] .btn:focus+label{color:var(--action-contrast)}.date-wrapper{position:relative;display:inline-block}input[type=date]{padding:8px 36px 8px 8px;border-radius:4px}input[type=date]::-webkit-calendar-picker-indicator{opacity:0;width:100%;height:100%;position:absolute;top:0;left:0;cursor:pointer}input[type=date]+.icon{--w:20px;position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none}input:is([type=time],[type=datetime-local],[type=date]){padding:.5rem;border:1px solid var(--contrast-200);border-radius:4px;font-size:14px;min-width:180px;background:var(--base);color:var(--contrast);cursor:pointer}.date-wrapper input[type=date]:focus,.datetime-wrapper input[type=datetime-local]:focus,.time-wrapper input[type=time]:focus,.wrapper input:is([type=time],[type=datetime-local],[type=date]):focus{border-color:var(--action-0);box-shadow:0 0 0 2px rgba(var(--action-0),.1)}.date-wrapper .icon,.datetime-wrapper .icon,.time-wrapper .icon,.wrapper .icon{width:18px;height:18px;background-color:var(--contrast);opacity:.7}.quantity{margin:0;display:inline-flex;width:fit-content;align-items:center;justify-content:center;border:1px solid transparent;border-radius:4px;position:relative}.quantity:focus-within{border-color:var(--action-0)}.quantity label{margin:0;font-size:var(--txt-small)}.quantity button{background:var(--base);padding:0;width:var(--chip_);height:var(--chip_);min-height:0;z-index:0;position:relative;border:1px solid var(--base-200);color:var(--contrast-200)}.quantity button:hover:not(:disabled){color:var(--action-0);border-color:var(--action-0);background-color:var(--base)}.quantity button:active:not(:disabled){background-color:var(--action-0);color:var(--light-0);transform:scale(.95)}.quantity button:disabled{opacity:.5;cursor:not-allowed}.quantity input[type=number]{z-index:1;border:1px solid var(--base-200);background:var(--base);text-align:center;font-size:1.1rem;width:60px;height:48px;margin:0;padding:0!important;appearance:textfield}.quantity input[type=number]::-webkit-inner-spin-button,.quantity input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.quantity input[type=number]:focus{background-color:var(--base-50)}.quantity button.increase{left:-2px;border-radius:0 4px 4px 0}.quantity button.decrease{right:-2px;border-radius:4px 0 0 4px}details.uploader .file-upload-container{margin:1rem 0;max-width:100%}.field.upload{position:relative}.field.upload .progress{display:none}.field.upload.uploading .progress{display:block}.field.upload .actions{position:absolute;top:0;right:0}.empty-group,.file-upload-wrapper,.preview-wrap .item-grid{border:2px dashed var(--action-0);border-radius:4px;padding:2rem;text-align:center;transition:all .3s ease;background:rgba(var(--action-0),var(--op-1));position:relative;cursor:pointer;user-select:none}.file-upload-wrapper{max-width:var(--content);margin:1rem auto}.file-upload-wrapper h2{margin:0;font-size:var(--txt-large)}.dragover,.empty-group:hover,.file-upload-wrapper:hover,.preview-wrap .item-grid:hover{background:rgba(var(--action-0),var(--op-2));border-color:var(--action-0)}.preview-wrap:has(.item-grid:empty) .selection-controls{display:none}.preview-wrap .item-grid{min-height:20vh}.preview-wrap .item-grid:empty::before{content:'Unsorted images become their own posts.';display:block}.file-upload-wrapper input[type=file]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.empty-group p,.file-upload-text{margin:0}.empty-group p strong,.file-upload-text strong{color:var(--action-0);text-decoration:underline}.item-grid.groups{grid-template-columns:repeat(1,1fr)}.item-grid.group{margin-bottom:0}.item-grid:is(.restore,.group,.preview) .item{display:block;--w:1.1em}.item-grid:is(.restore,.group,.preview) button{padding:.25rem .5rem}.item-grid:is(.restore,.group,.preview) .preview>input[type=checkbox]:not(.label-button)+label{padding-left:0;margin:0}.item-grid:is(.restore,.group,.preview) .item .item-actions{position:absolute;top:0;right:0;left:var(--chipchip)}.item-grid:is(.restore,.group,.preview) summary{padding:.5rem}.item-grid:is(.restore,.group,.preview):has([type=checkbox]:checked){padding:.5rem;background-color:rgba(var(--action-0),var(--op-4));opacity:1}.item-grid:is(.restore,.group,.preview):has([type=checkbox]:checked) img{filter:none}.item-grid:is(.restore,.group,.preview):has([type=checkbox]:checked) .item img{filter:var(--filter)}.item-grid.preview summary span,.item-grid:is(.restore,.group,.preview):has([type=checkbox]:checked) details{display:none}[type=radio].featured:checked+label .icon-star,[type=radio].featured:not(:checked)+label .icon-star-fi{display:none}[type=radio].featured:checked+label .icon-star-fi,[type=radio].featured:not(:checked)+label .icon-star{display:inline-block}.item:is(.restore,.upload){border-radius:var(--radius);aspect-ratio:unset;overflow:hidden;background:var(--base);border:1px solid var(--base-200)}.item:is(.restore,.upload) [for=select-item]{aspect-ratio:1}.item.upload:has(details[open]){grid-column:1/-1;padding:.5rem 10%;margin:1rem 0;background-color:transparent;border:2px dashed var(--action-200)}.item.upload:has(details[open]) details[open]{background-color:transparent}.item:is(.restore,.upload) img{transform:scale(1);transition:transform var(--trans-base)}.item:is(.upload,.restore):hover img{transform:scale(1.02)}.upload-group{padding:5px;border-radius:var(--radius);background-color:rgba(var(--action-0),var(--op-1))}.upload-group .selected .field{margin:0}.upload-group .selection-actions button{aspect-ratio:unset}.submit-uploads{position:fixed;bottom:0;left:var(--btn_);z-index:var(--z-6);height:var(--btn);box-shadow:rgba(var(--base),var(--op-45)) var(--shdw);border-radius:var(--radius);animation:pulse-color 5s infinite;animation-delay:1s;background-color:var(--action-0);color:var(--action-contrast)}.submit-uploads:hover{background-color:var(--base-200);color:var(--contrast-200)}.empty-group{order:-1;grid-column:1/-1;padding:20px;border-radius:var(--radius);margin:10px 0;cursor:pointer;transition:all var(--trans-base);text-align:center;background-color:rgba(var(--action-0),var(--op-1))}.group-display:not([hidden])~.file-upload-container{display:none}.dragging,.upload.item.dragging{opacity:.7;transform:scale(.95) rotate(3deg);z-index:var(--z-7);box-shadow:0 8px 25px rgba(var(--contrast),var(--op-2))}.dragover{background:rgba(var(--action-0),var(--op-3))!important;border-color:var(--action-0)!important;transform:scale(1.05);animation:drop-pulse .8s infinite ease-in-out}.drag-preview{position:fixed;z-index:var(--z-9);width:fit-content;overflow:visible;pointer-events:none;opacity:.9;transform:scale(1.05);transition:transform .2s ease}.drag-preview .drag-items{width:max-content;height:max-content;position:relative}.drag-preview .drag-items .dragi-item{width:120px;height:120px;position:absolute;top:0;left:0;background:var(--base);border-radius:var(--radius-outer);box-shadow:rgba(var(--base),var(--op-45)) var(--shdw)}.drag-preview .drag-items .drag-item:nth-child(1){transform:rotate(-3deg);z-index:3}.drag-preview .drag-items .drag-item:nth-child(2){left:8px;top:-4px;transform:rotate(4deg);z-index:2;transition-delay:30ms}.drag-preview .drag-items .drag-item:nth-child(3){left:-6px;top:-8px;transform:rotate(-5deg);z-index:1;transition-delay:60ms}.drag-preview .drag-items .drag-item:nth-child(4){left:12px;top:-12px;transform:rotate(3deg);z-index:0;transition-delay:90ms}.drag-preview .drag-items .drag-item:nth-child(n+5){left:-10px;top:-16px;transform:rotate(-4deg);z-index:0;opacity:.8}.drag-preview .drag-items img,.drag-preview .drag-items video{width:100%;height:100%;object-fit:cover;display:block}.drag-preview .drag-count{position:absolute;top:-8px;right:-8px;background:var(--base-200);color:var(--contrast);border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;box-shadow:rgba(var(--base),var(--op-45)) var(--shdw);z-index:var(--z-3)}.item.dragging{opacity:.5;transform:scale(.95);filter:grayscale(50%);transition:opacity .2s ease,transform .2s ease,filter .2s ease}@keyframes drop-pulse{0%,100%{background-color:rgba(var(--action-0),var(--op-3));transform:scale(1.02)}50%{background-color:var(rgba(var(--action-0),var(--op-4)));transform:scale(1.04)}}.selection-actions{display:flex;gap:.25rem}@media (max-width:767px){body:not(.uploading):has(.group-display:not([hidden])){overflow:hidden}body:not(.uploading):has(.group-display:not([hidden])) .qtoggle{z-index:var(--z-1)}.group-display.group-display{position:fixed;top:var(--btn);bottom:var(--btn);left:0;right:0;max-height:var(--maxHeight);overflow:hidden;z-index:var(--z-6);width:calc(100% - 1rem);height:calc(100% - 1rem);padding:0 0 3rem;--justify:flex-start;--align:flex-start;--gap:0}.group-display::before{content:'';display:block;z-index:-1;top:-.5rem;bottom:-.5rem;left:-.5rem;right:-.5rem;position:absolute;background-color:rgba(var(--base),var(--op-6));filter:blur(5px)}.group-display .preview-wrap,.group-display .sidebar{--wrap:nowrap;height:50%;overflow:hidden auto;position:relative;padding:.5rem}.group-display .preview-wrap{top:0}.group-display .preview-wrap .selected{display:flex;justify-content:space-between;align-items:center}.group-display .sidebar{bottom:0;flex-wrap:nowrap;overflow:hidden auto;background-color:var(--contrast-200);color:var(--base)}.group-display .sidebar>.hint{color:var(--contrast)}.group-display .sidebar .header{display:none}.group-display .preview-actions{top:0;flex-shrink:0}.group-display .preview-wrap>.hint,.group-display .sidebar>.hint{bottom:0;margin:0;text-align:center}.group-display .preview-actions,.group-display .preview-wrap>.hint,.group-display .sidebar>.hint{position:absolute;left:0;right:0;background-color:rgba(var(--base),var(--op-6));z-index:var(--z-3);box-shadow:rgba(var(--base),var(--op-45)) var(--shdw)}.group-display .item-grid{height:100%;overflow:hidden auto;grid-template-columns:repeat(3,1fr);padding:2rem 0}.group-display .sidebar>.item-grid{grid-template-columns:repeat(1,1fr);gap:1rem;padding:0}.group-display .sidebar .empty-group{order:0;position:sticky;height:fit-content;top:0;z-index:var(--z-3);background-color:rgba(var(--action-0),var(--op-6))}.group-display .sidebar .upload-group{order:1}.group-display .sidebar .empty-group p{margin:0}.group-display .field,.group-display .field label{margin:0;padding:0}.group-display .sidebar h4{margin:.25rem}.group-display .item{width:100%;height:max-content}.submit-uploads{bottom:var(--btn);left:0;right:0;width:100%;height:3rem}body.uploading .group-display.group-display{position:relative;top:unset;bottom:unset;right:unset;left:unset}}@media (min-width:768px){.group-display.group-display{--wrap:nowrap;--dir:row;--gap:1rem;--align:flex-start}.group-display .preview-wrap,.group-display .sidebar{--justify:flex-start;--wrap:nowrap;max-height:calc(100vh - var(--btnbtn));overflow:hidden auto}.group-display .preview-wrap,.group-display .sidebar{width:50%}.preview-actions,.preview-wrap .hint{position:sticky;z-index:var(--z-3);box-shadow:rgba(var(--base),var(--op-45)) var(--shdw);background-color:var(--base);width:100%}.preview-actions{top:0;left:0;right:0}.preview-actions .field{margin:0}.preview-wrap .hint,.sidebar>.hint{bottom:-1rem;padding-bottom:1rem;margin:0;left:0;right:0;text-align:center}}.item-grid.restore{grid-template-columns:repeat(1,1fr)}.editor-container .ql-toolbar{display:flex;background-color:var(--base-50);justify-content:flex-start;flex-wrap:wrap;padding:.25rem;gap:.5rem 1rem;border-top-left-radius:var(--radius);border-top-right-radius:var(--radius);border-bottom:4px solid var(--base-50)}.ql-toolbar button{min-height:0;padding:.5rem}.ql-toolbar .ql-formats{display:flex;gap:.25rem}.editor-container .ql-container{--padding:1rem;background-color:var(--base);border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius);height:fit-content;padding:2px;border:1px solid var(--base-200)}.editor-container .ql-container .ql-editor{padding:var(--padding);width:100%;height:100%}.ql-editor img{max-width:50%;height:auto}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-hidden{display:none}.ql-tooltip{position:absolute;transform:translateY(10px);background-color:var(--base-100);border:1px solid var(--base);box-shadow:0 0 5px rgba(var(--base),var(--op-6));color:var(--contrast);padding:5px 12px;white-space:nowrap}[data-type=single] .item-grid{display:flex}.repeater-row details summary::after{margin-left:0}.repeater-row details summary button{margin-left:auto}.repeater .field-input-wrapper{flex-direction:column}.repeater .repeater-items{width:100%}.add-repeater-row,.remove-row{margin-left:auto;min-height:0;height:var(--chipchip);background-color:var(--action-0)}.field.tag-list .row{margin-bottom:1rem}.field.tag-list .row .field{flex:1;min-width:150px;margin:0}.field.tag-list .tag .add-tag-item{flex-shrink:0;white-space:nowrap;margin-top:calc(var(--txt-medium) + 1rem)}.field.tag-list .tag-items{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;min-height:2rem}.field.tag-list .tag-item{background:var(--base-200);padding:.4rem .75rem;border-radius:4px;display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;line-height:1.2}.field.tag-list .tag-item:hover{background:var(--base-100)}.field.tag-list .tag-label{max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.field.tag-list .remove-tag{min-height:0;padding:.25rem;color:var(--contrast);transition:transform .2s;box-shadow:none}.field.tag-list .remove-tag:hover{transform:scale(1.2)}@media (max-width:768px){.field.tag-list .tag{flex-direction:column;align-items:stretch}.field.tag-list .tag .field{min-width:100%}}.form-progress{padding:0 1rem}.form-progress .progress{background:var(--base-100);border-radius:var(--radius);padding:1rem}.form-progress .bar{height:6px;background:var(--base-200);border-radius:3px;overflow:hidden;margin-bottom:.5rem}.form-progress .fill{height:100%;background:linear-gradient(90deg,var(--action-0),var(--action-200));width:0%;transition:width .4s ease;border-radius:3px}.form-progress .step-text{font-size:var(--txt-small);font-weight:600;color:var(--contrast-200)}form nav.tabs{position:relative;top:0;left:0;right:0;padding:1rem 0;gap:0;z-index:0}form nav.tabs button{position:relative;background:0 0;border:none;padding:.5rem 1rem .5rem 3rem;z-index:1}form nav.tabs .step-number{width:2.5rem;height:100%;border-radius:50% 0 0 50%;position:absolute;left:0;top:0;background:var(--base-200);color:var(--contrast-50);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--txt-small);border:3px solid var(--base)}form nav.tabs button.pending .step-number{background:var(--base-100);color:var(--contrast-200)}form nav.tabs button.active .step-number,form nav.tabs button.current .step-number{background:var(--action-0);color:var(--action-contrast);border-color:var(--action-200)}form nav.tabs button.completed .step-number{background:var(--successBack);color:var(--successBack);border-color:var(--successText)}form nav.tabs button.completed .step-number::before{content:'✓';font-size:1.2rem;color:var(--successText);position:absolute}form nav.tabs button.completed h2{color:var(--contrast-200)}.step-navigation{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--base-200);gap:1rem}.step-navigation .prev-step{background:var(--base-100)}.step-navigation .next-step,.step-navigation button[type=submit]{margin-left:auto}@media (max-width:768px){form nav.tabs button{min-width:80px;font-size:var(--txt-small)}form nav.tabs button h2{font-size:var(--txt-small)}form{--step-size:2rem}}.field input.error,.field select.error,.field textarea.error{border-color:var(--errorBack)}.error-message{color:var(--errorText);font-size:var(--txt-small);margin-top:.25rem;display:block}.form-summary{padding:2rem;border-radius:8px;margin-top:2rem;border:2px dashed var(--contrast-200)}.form-summary .message{margin-bottom:2rem}.form-summary .result+.result{position:relative;margin-top:1.5rem;padding-top:1.5rem}.form-summary .result+.result::before{position:absolute;top:0;left:16.5%;content:'';width:67%;height:1px;border-bottom:1px solid var(--base-200)}.form-summary h2{margin:1rem 0}.form-summary h4{background-color:var(--base-100);padding:.5rem 2rem;position:relative;left:-2rem;color:var(--contrast-200);font-size:.875rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem}.form-summary p{color:var(--text);margin:0}.group-summary,.repeater-summary{background:var(--base-100);padding:1rem;border-radius:4px;margin-top:.5rem}.repeater-row{margin-bottom:1rem}.repeater-row:last-child{margin-bottom:0}.selected-item{border:1px solid var(--base-200);border-radius:var(--radius);font-size:var(--txt-x-small);background-color:var(--base);padding:.25rem .5rem}.selected-item button{--w:.5em;min-height:1em;width:1em;padding:0}.selector .auto-wrapper,.selector .selected-items{flex:1;width:100%}.fstatus{z-index:var(--z-5);background-color:rgba(var(--base),var(--op-6));border-radius:var(--radius);padding:0 .5rem;position:fixed;right:.5rem;top:var(--btnbtn);--w:1em;box-shadow:rgba(var(--base),var(--op-6)) var(--shdw);--wrap:nowrap;--gap:1rem}.fstatus .spinner{display:none}.fstatus.loading .spinner{display:inline-block}.fstatus p{margin:0;padding:.25rem}.restore-uploads .item-grid.group .field.group,.restore-uploads .upload-group .selection-actions{display:none}.upload-group .item-grid.group{grid-template-columns:repeat(2,1fr)}.restore-uploads .item-grid.group{grid-template-columns:repeat(3,1fr)}fieldset{width:100%;border-color:var(--base-200)}.restore-form.restore-form[hidden]{display:block!important;position:fixed;bottom:var(--offScreen);right:var(--btnbtn);transition:bottom var(--trans-base);transition-duration:2s}.restore-form.restore-form:not([hidden]){width:50vw;padding:1rem;z-index:var(--z-7);background-color:rgba(var(--base),var(--op-6));border-radius:var(--radius);box-shadow:rgba(var(--action-0),var(--op-6)) var(--shdw);position:fixed;right:var(--btnbtn);bottom:0;transition:bottom var(--trans-base)}.restore-form h3{font-size:var(--txt-medium)}body:has(nav.fixed.bottom) .restore-form.restore-form:not([hidden]){bottom:var(--btn)}.restore-form .actions{display:flex;width:100%}.restore-form .actions button{min-height:var(--chip);font-size:var(--txt-x-small);width:100%} |
| | |
| | | nav,nav ol,nav ul{--padding:0 1rem;--wrap:nowrap;font-family:var(--heading)}nav,nav a,nav li,nav ol,nav ul,ul.socials{display:flex;flex-direction:var(--dir,row);justify-content:var(--justify,flex-start);align-items:var(--align,center);gap:var(--gap,0);flex-wrap:var(--wrap,nowrap);height:var(--btn,3rem);max-width:100%;padding:0;margin:0}nav.col,nav.col ul{height:max-content}nav>ul{width:100%;overflow:auto hidden}nav li{width:max-content;--justify:center;max-inline-size:none;padding:0;list-style:none}nav.fill li{width:100%}nav a,nav button{--justify:center;width:100%;white-space:nowrap;text-transform:uppercase;border-radius:0;background-color:transparent;text-decoration:none}nav a{padding:var(--padding)}nav .toggle{aspect-ratio:1;border:1px solid var(--base);color:var(--contrast)}nav .current a,nav a.current,nav a:focus,nav a:focus:visited,nav button:focus{background-color:var(--action-0);color:var(--action-contrast)}.toggle .icon-caret-down{transform:rotate(0);transition:transform var(--trans-base)}.open>.row>.toggle .icon-caret-down,.open>.toggle .icon-caret-down{transform:rotate(900deg)}.has-submenu{position:relative}ul.submenu{--dir:column;height:max-content;position:absolute;top:100%;right:0;max-height:0;transform:scaleY(0);transform-origin:top;width:100%;min-width:max-content;background-color:rgba(var(--base-rgb),var(--op-3));border:2px solid rgba(var(--base-rgb),var(--op-3));transition:max-height var(--trans-base),transform var(--trans-base);box-shadow:var(--shdw-none);overflow:hidden}.submenu li{background-color:rgba(var(--base-rgb),var(--op-6));border:1px solid var(--base-50)}.submenu a{height:var(--chipchip)}.open>ul.submenu{transform:scaleY(1);max-height:1000%;box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw)}.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}nav a:focus:not(:focus-visible){outline:0}nav a:focus-visible{outline:1px solid var(--action-0);outline-offset:1px}nav.always{overflow:visible;transition:width var(--trans-base);width:max-content}nav.always>ul{--dir:column;--align:center;--justify:flex-end;--gap:0;height:100vh;max-height:none;position:fixed;right:-300vw;bottom:0;width:100vw;padding:var(--btn) 0;overflow:hidden auto;transition:right var(--trans-base)}nav.always.open>ul{right:0}nav.always li{width:100%}nav.always.fixed{width:var(--btn);height:var(--btn);bottom:0;right:0;overflow:hidden}nav.always.fixed .toggle.main{background-color:var(--base)}nav.always.fixed .toggle.main:focus,nav.always.fixed .toggle.main:hover{background-color:var(--action-0);color:var(--action-contrast)}nav.mobile .toggle.main{width:var(--btn);transition:width var(--trans-base)}nav.mobile .icon-list,nav.mobile .icon-x{--w:32px}nav.mobile .icon-x,nav.mobile.open .icon-list{display:none}nav.mobile .icon-list,nav.mobile.open .icon-x{display:block}nav.mobile.open>ul{--dir:column;z-index:var(--z-9);background-color:rgba(var(--base-rgb),var(--op-6));width:100vw;height:100vh;overflow:hidden auto;right:0;bottom:0;position:fixed;padding:var(--btn) 0}nav.always>ul::before,nav.mobile.open>ul::before{content:'';z-index:-1;position:absolute;inset:0;filter:blur(5px)}nav.always.open .main.toggle,nav.mobile.open .main.toggle{position:fixed;bottom:0;left:0;width:100vw;z-index:var(--z-10);aspect-ratio:unset}nav.always>ul,nav.always>ul:before,nav.mobile.open>ul,nav.mobile.open>ul::before{background-color:rgba(var(--base-rgb),var(--op-6))}@media (max-width:767px){nav.col{height:var(--btn)}nav.mobile>ul{--dir:column;--align:center;--justify:flex-end;--gap:0;height:100%;max-height:none;position:relative;right:-300vw;width:100vw;padding:var(--btn) 0 0;overflow:hidden auto}nav.mobile.open>ul{right:0}}@media (min-width:768px){nav.mobile:not(.always) .toggle.main{display:none}}nav#breadcrumbs{height:max-content;--wrap:wrap;--gap:0;width:max-content;max-width:var(--full);position:absolute;background-color:rgba(var(--base-rgb),var(--op-4));font-size:var(--txt-x-small);padding:.125em;z-index:var(--z-5)}nav#breadcrumbs ol{height:max-content;--wrap:wrap}nav#breadcrumbs li{width:max-content;height:var(--chip);--wrap:nowrap}nav#breadcrumbs li::after{content:'/';color:var(--contrast-200);padding:0 .25rem}nav#breadcrumbs li:last-of-type::after{display:none}nav#breadcrumbs a{height:var(--chip)}nav#breadcrumbs a,nav#breadcrumbs span{padding:0 .125rem;color:var(--contrast);text-transform:none}nav#breadcrumbs a:focus{background-color:transparent;color:var(--action-0)}nav.fixed{position:fixed;box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw);z-index:var(--z-9)}nav.fixed.bottom{left:0;bottom:0;width:calc(100% - var(--btn))}nav.fixed:not(.always) ul{--justify:space-between;width:100%;background-color:var(--base);padding:0 .25rem}nav.fixed:not(.always) li{flex:1}nav.fixed a{--align:center;--gap:1rem;--w:var(--chip_);color:var(--contrast);font-size:var(--txt-x-small)}@media (min-width:768px){nav.fixed a{font-size:var(--txt-medium)}}nav.on-this-page{--justify:space-between;position:fixed;bottom:0;left:0;width:100vw;z-index:var(--z-5);background-color:rgba(var(--base-rgb),var(--op-45));max-width:none}body:has(nav.fixed) nav.on-this-page{bottom:var(--btn)}nav.on-this-page button{order:3;padding:0 1rem;width:max-content;aspect-ratio:unset}nav.on-this-page.open button{order:0}nav.on-this-page ul{width:100%;--gap:0}nav.on-this-page a{padding:0}nav.on-this-page .active a{background-color:rgba(var(--base-rgb),var(--op-6));color:var(--action-contrast)}nav.on-this-page #back-to-top span{display:none}nav.on-this-page .active a{background-color:var(--action-0);color:var(--action-contrast)}nav.letters,nav.letters a,nav.letters li,nav.letters ul{height:var(--chip)}nav.letters li{max-width:calc(7.69% - 2px)}nav.letters ul{--wrap:wrap}@media (min-width:768px){nav.letters,nav.letters ul{height:var(--chip)}nav.letters ul{--wrap:nowrap}nav.letters li{max-width:none}nav.letters a{padding:.25rem .66rem}}nav.index{--justify:space-between;--padding:0;background-color:rgba(var(--base-rgb),var(--op-6))}nav.index ul{width:100%}nav.index li{flex-shrink:0;transform:scaleX(0);max-width:0;overflow:hidden}nav.index li.active,nav.index li.adj{transform:scaleX(1);width:calc(100% - var(--btn_));flex-shrink:1;max-width:none}nav.index li:first-of-type{flex-shrink:1;transform:scaleX(1);order:9999;width:var(--btn);height:var(--btn);max-width:none}@media (max-width:767px){.index li.adj{transform:scaleX(0);max-width:0}}nav.index a{border-bottom:4px solid transparent}nav.index .active a{border-color:var(--action-0);color:var(--contrast)}nav.index.open{--dir:column-reverse;height:var(--maxHeight);width:100%;--align:flex-end;background-color:rgba(var(--base-rgb),var(--op-6));backdrop-filter:blur(5px);z-index:var(--z-10)}nav.index.open li{width:100%;height:var(--btn);max-width:100%!important;transform:scaleX(1);overflow:visible}nav.index.open a{--justify:flex-end;padding:0 2rem 0 0;background-color:transparent}nav.condensed,nav.condensed a,nav.condensed li,nav.condensed ul{height:max-content;width:max-content;--wrap:wrap;min-height:var(--chip)}.condensed ul{--justify:center;--dir:row}nav.condensed{--gap:0 .25rem;width:100%;--justify:center}nav.condensed li+li::before{content:'·';padding:0 .25em}nav.condensed a{font-size:var(--txt-x-small);padding:0 .25rem;text-transform:none;border-bottom:2px solid transparent}nav .current a,nav a.current,nav a:focus,nav a:focus:visited,nav button:focus{background-color:transparent;color:var(--contrast);border-color:var(--action-0)}ul.socials{--dir:row;height:max-content;--gap:.5rem;--justify:flex-end;--wrap:nowrap;overflow:auto hidden;touch-action:pan-x;width:100%}ul.socials li{list-style:none}.always ul.socials{width:100vw;--justify:stretch}.always ul.socials li{flex:1;--justify:center;--align:center}.always ul.socials a{display:inline-flex}ul.socials a{display:inline-block;font-size:var(--txt-x-small);padding:.25rem .5rem;max-width:none}ul.socials .icon{margin:0}ul.socials .icon+span:not(.screen-reader-text){margin-left:.5rem}nav.tabs{padding-bottom:2px;touch-action:pan-x pan-y;--wrap:nowrap;overflow:auto hidden}nav.tabs button.active{cursor:default}nav.tabs button{font-family:var(--heading);font-size:var(--txt-x-small);border-bottom:4px solid transparent}nav.tabs button.active,nav.tabs button.active:hover{background-color:var(--action-0);color:var(--action-contrast);border-color:var(--base)}.tab-content nav.tabs button{height:var(--chip_);padding:.25rem .75rem;min-height:0}.tab-content h2{margin:0 0 .5rem}.tab-content nav.tabs{height:max-content;background-color:var(--base);--gap:0}.tab-content .tab-content nav.tabs{background-color:var(--base-100)}.tab-content .tab-content .tab-content nav.tabs{background-color:var(--base-200)}.tab-content nav.tabs button.active h2{color:var(--action-0)}nav.menu a{padding:.5rem .66rem}nav.share{height:max-content;margin:1rem 0}nav.share ul{overflow:visible}nav.share h4{display:inline-block;width:max-content;margin:.25rem .5rem .25rem 0;font-size:var(--txt-x-small)}.wp-site-blocks>header,body>header{--dir:row;--justify:space-between;position:sticky;top:0;left:0;right:0;height:var(--btn);width:100vw;display:flex;align-items:var(--align,center);justify-content:var(--justify,space-between);padding:0 .5rem;background-color:var(--base);box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw);z-index:var(--z-9)}.wp-site-blocks>header img{width:var(--btn)}.dashboard-nav{width:100%}nav.filters{--dir:row;overflow:auto hidden}nav.filters .filter{width:auto;padding:.25rem .75rem}nav.term-navigation:has([hidden]){display:none}nav.pagination{width:100%}nav.pagination>a{min-width:var(--chipchip)}nav.pagination>ul{margin:0 auto}nav.pagination:not(:has(a+ul)){margin-left:var(--chipchip)}nav.pagination:not(:has(ul+a)){margin-right:var(--chipchip)}.pagination.condensed li+li::before{display:none}.pagination li.current{width:var(--chip_);height:var(--chip_);background-color:var(--action-0);border-radius:var(--radius);line-height:1}.pagination.condensed a{font-size:var(--txt-medium);width:var(--chip_);height:var(--chip_)} |
| | | nav,nav ol,nav ul{--padding:0 1rem;--wrap:nowrap;font-family:var(--heading)}nav,nav a,nav li,nav ol,nav ul,ul.socials{display:flex;flex-direction:var(--dir,row);justify-content:var(--justify,flex-start);align-items:var(--align,center);gap:var(--gap,0);flex-wrap:var(--wrap,nowrap);height:var(--btn,3rem);max-width:100%;padding:0;margin:0}nav.col,nav.col ul{height:max-content}nav>ul{width:100%;overflow:auto hidden}nav li{width:max-content;--justify:center;max-inline-size:none;padding:0;list-style:none}nav.fill li{width:100%}nav a,nav button{--justify:center;width:100%;white-space:nowrap;text-transform:uppercase;border-radius:0;background-color:transparent;text-decoration:none}nav a{padding:var(--padding)}nav .toggle{aspect-ratio:1;border:1px solid rgb(var(--base));color:rgb(var(--contrast))}nav .current a,nav a.current,nav a:focus,nav a:focus:visited,nav button:focus{background-color:rgb(var(--action-0));color:var(--action-contrast)}.toggle .icon-caret-down{transform:rotate(0);transition:transform var(--trans-base)}.open>.row>.toggle .icon-caret-down,.open>.toggle .icon-caret-down{transform:rotate(900deg)}.has-submenu{position:relative}ul.submenu{--dir:column;height:max-content;position:absolute;top:100%;right:0;max-height:0;transform:scaleY(0);transform-origin:top;width:100%;min-width:max-content;background-color:rgba(var(--base),var(--op-3));border:2px solid rgba(var(--base),var(--op-3));transition:max-height var(--trans-base),transform var(--trans-base);box-shadow:var(--shdw-none);overflow:hidden}.submenu li{background-color:rgba(var(--base),var(--op-6));border:1px solid rgb(var(--base-50))}.submenu a{height:var(--chipchip)}.open>ul.submenu{transform:scaleY(1);max-height:1000%;box-shadow:rgba(var(--base),var(--op-45)) var(--shdw)}.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}nav a:focus:not(:focus-visible){outline:0}nav a:focus-visible{outline:1px solid rgb(var(--action-0));outline-offset:1px}nav.always{overflow:visible;transition:width var(--trans-base);width:max-content}nav.always>ul{--dir:column;--align:center;--justify:flex-end;--gap:0;height:100vh;max-height:none;position:fixed;right:-300vw;bottom:0;width:100vw;padding:var(--btn) 0;overflow:hidden auto;transition:right var(--trans-base)}nav.always.open>ul{right:0}nav.always li{width:100%}nav.always.fixed{width:var(--btn);height:var(--btn);bottom:0;right:0;overflow:hidden}nav.always.fixed .toggle.main{background-color:rgb(var(--base))}nav.always.fixed .toggle.main:focus,nav.always.fixed .toggle.main:hover{background-color:rgb(var(--action-0));color:var(--action-contrast)}nav.mobile .toggle.main{width:var(--btn);transition:width var(--trans-base)}nav.mobile .icon-list,nav.mobile .icon-x{--w:32px}nav.mobile .icon-x,nav.mobile.open .icon-list{display:none}nav.mobile .icon-list,nav.mobile.open .icon-x{display:block}nav.mobile.open>ul{--dir:column;z-index:var(--z-9);background-color:rgba(var(--base),var(--op-6));width:100vw;height:100vh;overflow:hidden auto;right:0;bottom:0;position:fixed;padding:var(--btn) 0}nav.always>ul::before,nav.mobile.open>ul::before{content:'';z-index:-1;position:absolute;inset:0;filter:blur(5px)}nav.always.open .main.toggle,nav.mobile.open .main.toggle{position:fixed;bottom:0;left:0;width:100vw;z-index:var(--z-10);aspect-ratio:unset}nav.always>ul,nav.always>ul:before,nav.mobile.open>ul,nav.mobile.open>ul::before{background-color:rgba(var(--base),var(--op-6))}@media (max-width:767px){nav.col{height:var(--btn)}nav.mobile>ul{--dir:column;--align:center;--justify:flex-end;--gap:0;height:100%;max-height:none;position:relative;right:-300vw;width:100vw;padding:var(--btn) 0 0;overflow:hidden auto}nav.mobile.open>ul{right:0}}@media (min-width:768px){nav.mobile:not(.always) .toggle.main{display:none}}nav#breadcrumbs{height:max-content;--wrap:wrap;--gap:0;width:max-content;max-width:var(--full);position:absolute;background-color:rgba(var(--base),var(--op-4));font-size:var(--txt-x-small);padding:.125em;z-index:var(--z-5)}nav#breadcrumbs ol{height:max-content;--wrap:wrap}nav#breadcrumbs li{width:max-content;height:var(--chip);--wrap:nowrap}nav#breadcrumbs li::after{content:'/';color:rgb(var(--contrast-200));padding:0 .25rem}nav#breadcrumbs li:last-of-type::after{display:none}nav#breadcrumbs a{height:var(--chip)}nav#breadcrumbs a,nav#breadcrumbs span{padding:0 .125rem;color:rgb(var(--contrast));text-transform:none}nav#breadcrumbs a:focus{background-color:transparent;color:rgb(var(--action-0))}nav.fixed{position:fixed;box-shadow:rgba(var(--base),var(--op-45)) var(--shdw);z-index:var(--z-9)}nav.fixed.bottom{left:0;bottom:0;width:calc(100% - var(--btn))}nav.fixed:not(.always) ul{--justify:space-between;width:100%;background-color:rgb(var(--base));padding:0 .25rem}nav.fixed:not(.always) li{flex:1}nav.fixed a{--align:center;--gap:1rem;--w:var(--chip_);color:rgb(var(--contrast));font-size:var(--txt-x-small)}@media (min-width:768px){nav.fixed a{font-size:var(--txt-medium)}}nav.on-this-page{--justify:space-between;position:fixed;bottom:0;left:0;width:100vw;z-index:var(--z-5);background-color:rgba(var(--base),var(--op-45));max-width:none}body:has(nav.fixed) nav.on-this-page{bottom:var(--btn)}nav.on-this-page button{order:3;padding:0 1rem;width:max-content;aspect-ratio:unset}nav.on-this-page.open button{order:0}nav.on-this-page ul{width:100%;--gap:0}nav.on-this-page a{padding:0}nav.on-this-page .active a{background-color:rgba(var(--base),var(--op-6));color:var(--action-contrast)}nav.on-this-page #back-to-top span{display:none}nav.on-this-page .active a{background-color:rgb(var(--action-0));color:var(--action-contrast)}nav.letters,nav.letters a,nav.letters li,nav.letters ul{height:var(--chip)}nav.letters li{max-width:calc(7.69% - 2px)}nav.letters ul{--wrap:wrap}@media (min-width:768px){nav.letters,nav.letters ul{height:var(--chip)}nav.letters ul{--wrap:nowrap}nav.letters li{max-width:none}nav.letters a{padding:.25rem .66rem}}nav.index{--justify:space-between;--padding:0;background-color:rgba(var(--base),var(--op-6))}nav.index ul{width:100%}nav.index li{flex-shrink:0;transform:scaleX(0);max-width:0;overflow:hidden}nav.index li.active,nav.index li.adj{transform:scaleX(1);width:calc(100% - var(--btn_));flex-shrink:1;max-width:none}nav.index li:first-of-type{flex-shrink:1;transform:scaleX(1);order:9999;width:var(--btn);height:var(--btn);max-width:none}@media (max-width:767px){.index li.adj{transform:scaleX(0);max-width:0}}nav.index a{border-bottom:4px solid transparent}nav.index .active a{border-color:rgb(var(--action-0));color:rgb(var(--contrast))}nav.index.open{--dir:column-reverse;height:var(--maxHeight);width:100%;--align:flex-end;background-color:rgba(var(--base),var(--op-6));backdrop-filter:blur(5px);z-index:var(--z-10)}nav.index.open li{width:100%;height:var(--btn);max-width:100%!important;transform:scaleX(1);overflow:visible}nav.index.open a{--justify:flex-end;padding:0 2rem 0 0;background-color:transparent}nav.condensed,nav.condensed a,nav.condensed li,nav.condensed ul{height:max-content;width:max-content;--wrap:wrap;min-height:var(--chip)}.condensed ul{--justify:center;--dir:row}nav.condensed{--gap:0 .25rem;width:100%;--justify:center}nav.condensed li+li::before{content:'·';padding:0 .25em}nav.condensed a{font-size:var(--txt-x-small);padding:0 .25rem;text-transform:none;border-bottom:2px solid transparent}nav .current a,nav a.current,nav a:focus,nav a:focus:visited,nav button:focus{background-color:transparent;color:rgb(var(--contrast));border-color:rgb(var(--action-0))}ul.socials{--dir:row;height:max-content;--gap:.5rem;--justify:flex-end;--wrap:nowrap;overflow:auto hidden;touch-action:pan-x;width:100%}ul.socials li{list-style:none}.always ul.socials{width:100vw;--justify:stretch}.always ul.socials li{flex:1;--justify:center;--align:center}.always ul.socials a{display:inline-flex}ul.socials a{display:inline-block;font-size:var(--txt-x-small);padding:.25rem .5rem;max-width:none}ul.socials .icon{margin:0}ul.socials .icon+span:not(.screen-reader-text){margin-left:.5rem}nav.tabs{padding-bottom:2px;touch-action:pan-x pan-y;--wrap:nowrap;overflow:auto hidden}nav.tabs button.active{cursor:default}nav.tabs button{font-family:var(--heading);font-size:var(--txt-x-small);border-bottom:4px solid transparent}nav.tabs button.active,nav.tabs button.active:hover{background-color:rgb(var(--action-0));color:var(--action-contrast);border-color:rgb(var(--base))}.tab-content nav.tabs button{height:var(--chip_);padding:.25rem .75rem;min-height:0}.tab-content h2{margin:0 0 .5rem}.tab-content nav.tabs{height:max-content;background-color:rgb(var(--base));--gap:0}.tab-content .tab-content nav.tabs{background-color:rgb(var(--base-100))}.tab-content .tab-content .tab-content nav.tabs{background-color:rgb(var(--base-200))}.tab-content nav.tabs button.active h2{color:rgb(var(--action-0))}nav.menu a{padding:.5rem .66rem}nav.share{height:max-content;margin:1rem 0}nav.share ul{overflow:visible}nav.share h4{display:inline-block;width:max-content;margin:.25rem .5rem .25rem 0;font-size:var(--txt-x-small)}.wp-site-blocks>header,body>header{--dir:row;--justify:space-between;position:sticky;top:0;left:0;right:0;height:var(--btn);width:100vw;display:flex;align-items:var(--align,center);justify-content:var(--justify,space-between);padding:0 .5rem;background-color:rgb(var(--base));box-shadow:rgba(var(--base),var(--op-45)) var(--shdw);z-index:var(--z-9)}.wp-site-blocks>header img{width:var(--btn)}.dashboard-nav{width:100%}nav.filters{--dir:row;overflow:auto hidden}nav.filters .filter{width:auto;padding:.25rem .75rem}nav.term-navigation:has([hidden]){display:none}nav.pagination{width:100%}nav.pagination>a{min-width:var(--chipchip)}nav.pagination>ul{margin:0 auto}nav.pagination:not(:has(a+ul)){margin-left:var(--chipchip)}nav.pagination:not(:has(ul+a)){margin-right:var(--chipchip)}.pagination.condensed li+li::before{display:none}.pagination li.current{width:var(--chip_);height:var(--chip_);background-color:rgb(var(--action-0));border-radius:var(--radius);line-height:1}.pagination.condensed a{font-size:var(--txt-medium);width:var(--chip_);height:var(--chip_)} |
| | |
| | | this.initModal(); |
| | | this.initListeners(); |
| | | this.initSubscribers(); |
| | | |
| | | console.log('Gallery loaded...'); |
| | | } |
| | | /********************************************************************* |
| | | ELEMENTS |
| | |
| | | // PINCH (two pointers) |
| | | if (this.activePointers.size === 2) { |
| | | const pts = [...this.activePointers.values()]; |
| | | const dist = Math.hypot( |
| | | pts[0].x - pts[1].x, |
| | | pts[0].y - pts[1].y |
| | | ); |
| | | const dist = Math.hypot(pts[0].x - pts[1].x, pts[0].y - pts[1].y); |
| | | const increment = this.pinchStartScale * (dist / this.pinchStartDist) - this.zoom.scale; |
| | | |
| | | const newScale = this.pinchStartScale * (dist / this.pinchStartDist); |
| | | const increment = newScale - this.zoom.scale; |
| | | |
| | | // Zoom centered (NO midpoint) |
| | | this.handleZoom(increment); |
| | | |
| | | const midX = (pts[0].x + pts[1].x) / 2; // ← anchor to finger midpoint |
| | | const midY = (pts[0].y + pts[1].y) / 2; |
| | | this.handleZoom(increment, midX, midY); |
| | | return; |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | onPointerUp(e) { |
| | | const last = this.activePointers.get(e.pointerId); // grab before delete |
| | | this.activePointers.delete(e.pointerId); |
| | | |
| | | if (this.activePointers.size < 2) { |
| | | this.pinchStartDist = 0; |
| | | } |
| | | |
| | | // Only check for swipe if we weren't panning and no more active pointers |
| | | if (!this.zoom.panning && this.activePointers.size === 0) { |
| | | // End of tap or swipe - detect swipe |
| | | this.swipe.endX = e.clientX; |
| | | this.swipe.endY = e.clientY; |
| | | const dx = this.swipe.endX - this.swipe.startX; |
| | | const dy = this.swipe.endY - this.swipe.startY; |
| | | if (this.zoom.scale <= 1 && !this.zoom.panning && this.activePointers.size === 0) { |
| | | const endX = last?.x ?? e.clientX; // use tracked position, fall back to event |
| | | const endY = last?.y ?? e.clientY; |
| | | const dx = endX - this.swipe.startX; |
| | | const dy = endY - this.swipe.startY; |
| | | |
| | | if (Math.abs(dx) > this.zoom.threshold) { |
| | | if (dx > 0) { |
| | | console.log('Swipe right'); |
| | | this.prevElement(); |
| | | } else { |
| | | console.log('Swipe left'); |
| | | this.nextElement(); |
| | | } |
| | | if (Math.abs(dx) > this.zoom.threshold && Math.abs(dx) > Math.abs(dy)) { |
| | | dx > 0 ? this.prevElement() : this.nextElement(); |
| | | } |
| | | } |
| | | |
| | | // Reset panning state when all pointers are released |
| | | if (this.activePointers.size === 0) { |
| | | this.zoom.panning = false; |
| | | // Reset cursor based on zoom state |
| | | this.ui.gallery.image.style.cursor = this.zoom.scale > 1 ? 'grab' : 'default'; |
| | | } |
| | | } |
| | |
| | | } |
| | | |
| | | applyTransform() { |
| | | // this.clampPan(); |
| | | this.clampPan(); |
| | | const img = this.ui.gallery.image; |
| | | img.style.transform = `translate(${this.zoom.x}px, ${this.zoom.y}px) scale(${this.zoom.scale})`; |
| | | // Update cursor based on zoom level |
| | | img.style.cursor = this.zoom.scale > 1 ? 'grab' : 'default'; |
| | | } |
| | | clampPan() { |
| | | const img = this.ui.gallery.image; |
| | | const excessX = Math.max(0, (img.offsetWidth * this.zoom.scale - window.innerWidth) / 2); |
| | | const excessY = Math.max(0, (img.offsetHeight * this.zoom.scale - window.innerHeight) / 2); |
| | | this.zoom.x = Math.max(-excessX, Math.min(excessX, this.zoom.x)); |
| | | this.zoom.y = Math.max(-excessY, Math.min(excessY, this.zoom.y)); |
| | | } |
| | | resetZoom() { |
| | | this.zoom.scale = 1; |
| | | this.zoom.x = 0; |
| | |
| | | (()=>{class e{constructor(){this.a11y=window.jvbA11y,this.index=0,this.images=[],this.zoom={scale:1,min:1,max:4,threshold:50,x:0,y:0,startX:0,startY:0,ease:.2,panning:!1},this.swipe=this.resetSwipe(),this.activePointers=new Map,this.lastTap=0,this.initElements(),this.initModal(),this.initListeners(),this.initSubscribers()}initElements(){this.elements={imageSelector:"img[data-gallery]",gallery:{modal:"dialog.gallery",wrap:".wrap",nextButton:".next",prevButton:".prev",image:".image",leftImage:".image-left",rightImage:".image-right",counter:".counter"}},this.ui=window.uiFromSelectors(this.elements)}initModal(){this.modal=new window.jvbModal(this.ui.gallery.modal,{openMessage:"Opened Gallery",closeMessage:"Closed Gallery"}),this.modal.subscribe(e=>{"modal-close"===e&&this.toggleGallery(!1)})}buildGalleryItems(e=null){let t=e?`[data-gallery="${e}"]`:this.elements.imageSelector;this.items=Array.from(document.querySelectorAll(t)).map((e,t)=>({id:e.dataset.id||t,srcset:e.srcset||e.src,sizes:e.sizes||"100vw",src:e.currentSrc||e.src,full:e.dataset.full||e.src,alt:e.alt||"",element:e}))}initListeners(){this.clickHandler=this.handleClick.bind(this),this.pointerDownHandler=this.onPointerDown.bind(this),this.pointerMoveHandler=this.onPointerMove.bind(this),this.pointerUpHandler=this.onPointerUp.bind(this),this.wheelHandler=this.onWheel.bind(this),this.keyHandler=this.handleKeys.bind(this),document.addEventListener("click",this.clickHandler)}handleClick(e){let t=window.targetCheck(e,this.elements.imageSelector);t&&!this.modal.isOpen?(e.preventDefault(),this.buildGalleryItems(t.dataset.gallery||null),this.index=this.items.findIndex(e=>e.element===t),this.toggleGallery(!0)):this.modal.isOpen&&(window.targetCheck(e,this.elements.gallery.nextButton)?(console.log("Next"),this.nextElement()):window.targetCheck(e,this.elements.gallery.prevButton)&&(console.log("Previous"),this.prevElement()))}handleKeys(e){if(this.modal.isOpen){switch(e.key){case"ArrowLeft":e.preventDefault(),this.prevElement();break;case"ArrowRight":e.preventDefault(),this.nextElement()}e.ctrlKey&&("+"!==e.key&&"="!==e.key||(e.preventDefault(),this.handleZoom(.2)),"-"===e.key&&(e.preventDefault(),this.handleZoom(-.2)),"0"===e.key&&(e.preventDefault(),this.resetZoom()))}}onPointerDown(e){e.preventDefault(),this.swipe.startX=e.clientX,this.swipe.startY=e.clientY,this.ui.gallery.image.setPointerCapture(e.pointerId),this.activePointers.set(e.pointerId,{x:e.clientX,y:e.clientY});const t=performance.now();if(t-this.lastTap<300&&1===this.activePointers.size)return this.zoom.scale>1?this.resetZoom():this.handleZoom(1,e.clientX,e.clientY),void(this.lastTap=0);if(this.lastTap=t,2===this.activePointers.size){const e=[...this.activePointers.values()];return this.pinchStartDist=Math.hypot(e[0].x-e[1].x,e[0].y-e[1].y),void(this.pinchStartScale=this.zoom.scale)}this.zoom.scale>1&&(this.zoom.panning=!0,this.zoom.startX=e.clientX-this.zoom.x,this.zoom.startY=e.clientY-this.zoom.y,this.ui.gallery.image.style.cursor="grabbing")}onPointerMove(e){if(this.activePointers.has(e.pointerId)){if(this.activePointers.set(e.pointerId,{x:e.clientX,y:e.clientY}),2===this.activePointers.size){const e=[...this.activePointers.values()],t=Math.hypot(e[0].x-e[1].x,e[0].y-e[1].y),i=this.pinchStartScale*(t/this.pinchStartDist)-this.zoom.scale;return void this.handleZoom(i)}this.zoom.panning&&(this.zoom.x=e.clientX-this.zoom.startX,this.zoom.y=e.clientY-this.zoom.startY,this.applyTransform())}}onPointerUp(e){if(this.activePointers.delete(e.pointerId),this.activePointers.size<2&&(this.pinchStartDist=0),!this.zoom.panning&&0===this.activePointers.size){this.swipe.endX=e.clientX,this.swipe.endY=e.clientY;const t=this.swipe.endX-this.swipe.startX;this.swipe.endY,this.swipe.startY;Math.abs(t)>this.zoom.threshold&&(t>0?(console.log("Swipe right"),this.prevElement()):(console.log("Swipe left"),this.nextElement()))}0===this.activePointers.size&&(this.zoom.panning=!1,this.ui.gallery.image.style.cursor=this.zoom.scale>1?"grab":"default")}onWheel(e){if(!e.ctrlKey)return;e.preventDefault();const t=e.deltaY<0?.2:-.2;this.handleZoom(t,e.clientX,e.clientY)}handleZoom(e,t=null,i=null){const s=this.zoom.scale;let n=s+e;if(n=Math.min(this.zoom.max,Math.max(this.zoom.min,n)),n===s)return;const l=n/s;let o=this.ui.gallery.image.getBoundingClientRect();null!==t&&null!==i||(t=o.left+o.width/2,i=o.top+o.height/2);const r=t-o.left,a=i-o.top;this.zoom.x=(this.zoom.x-r)*l+r,this.zoom.y=(this.zoom.y-a)*l+a,this.zoom.scale=n,this.applyTransform(),this.notify("zoom",{scale:this.zoom.scale})}applyTransform(){const e=this.ui.gallery.image;e.style.transform=`translate(${this.zoom.x}px, ${this.zoom.y}px) scale(${this.zoom.scale})`,e.style.cursor=this.zoom.scale>1?"grab":"default"}resetZoom(){this.zoom.scale=1,this.zoom.x=0,this.zoom.y=0,this.zoom.startX=0,this.zoom.startY=0,this.zoom.panning=!1,this.applyTransform()}resetSwipe(){return{startX:null,startY:null,endX:null,endY:null}}toggleGallery(e){e?(this.ui.gallery.image.draggable=!1,this.ui.gallery.image.style.userSelect="none",this.ui.gallery.image.addEventListener("pointerdown",this.pointerDownHandler),this.ui.gallery.image.addEventListener("pointermove",this.pointerMoveHandler),this.ui.gallery.image.addEventListener("pointerup",this.pointerUpHandler),this.ui.gallery.image.addEventListener("pointercancel",this.pointerUpHandler),window.addEventListener("wheel",this.wheelHandler,{passive:!1}),window.addEventListener("keydown",this.keyHandler),this.moveIntoView()):(this.ui.gallery.image.removeEventListener("pointerdown",this.pointerDownHandler),this.ui.gallery.image.removeEventListener("pointermove",this.pointerMoveHandler),this.ui.gallery.image.removeEventListener("pointerup",this.pointerUpHandler),this.ui.gallery.image.removeEventListener("pointercancel",this.pointerUpHandler),window.removeEventListener("wheel",this.wheelHandler),window.removeEventListener("keydown",this.keyHandler),this.resetZoom(),this.resetSwipe(),this.activePointers.clear(),this.lastTap=0),e&&!this.modal.isOpen&&this.modal.handleOpen()}moveIntoView(e=0){let t=this.index+e;t<0?t=this.items.length-1:t>=this.items.length?t=0:t===this.items.length-3&&this.notify("load-more"),this.index=t,this.updateDisplay(),this.preloadAdjacent(),this.a11y.announce(`Image ${this.index+1} of ${this.items.length}`)}nextElement(){this.resetZoom(),this.moveIntoView(1)}prevElement(){this.resetZoom(),this.moveIntoView(-1)}updateDisplay(){const e=this.items[this.index];if(!e)return;const t=this.ui.gallery.image;if(e.srcset&&(t.srcset=e.srcset,t.sizes=e.sizes),t.src=e.src,t.alt=e.alt,e.full&&e.full!==e.src){const i=new Image;i.onload=()=>{this.items[this.index]===e&&(t.src=e.full,t.removeAttribute("srcset"),t.removeAttribute("sizes"))},i.src=e.full}this.ui.gallery.counter.textContent=`${this.index+1} / ${this.items.length}`,this.ui.gallery.prevButton.disabled=this.items.length<=1,this.ui.gallery.nextButton.disabled=this.items.length<=1}preloadAdjacent(){[-1,1].forEach(e=>{const t=this.index+e;if(t>0&&t<this.items.length){const i=this.items[t];(e<0?this.ui.gallery.leftImage:this.ui.gallery.rightImage).src=i.full}})}initSubscribers(){this.subscribers=new Set}subscribe(e){return this.subscribers.add(e),()=>this.subscribers.delete(e)}notify(e,t={}){this.subscribers.forEach(i=>{try{i(e,t)}catch(e){console.error("Subscriber error:",e)}})}destroy(){this.subscribers.clear(),this.toggleGallery(!1),document.removeEventListener("click",this.clickHandler)}}document.addEventListener("DOMContentLoaded",function(){document.querySelector("dialog.gallery")&&(window.jvbGallery=new e)})})(); |
| | | (()=>{class e{constructor(){this.a11y=window.jvbA11y,this.index=0,this.images=[],this.zoom={scale:1,min:1,max:4,threshold:50,x:0,y:0,startX:0,startY:0,ease:.2,panning:!1},this.swipe=this.resetSwipe(),this.activePointers=new Map,this.lastTap=0,this.initElements(),this.initModal(),this.initListeners(),this.initSubscribers(),console.log("Gallery loaded...")}initElements(){this.elements={imageSelector:"img[data-gallery]",gallery:{modal:"dialog.gallery",wrap:".wrap",nextButton:".next",prevButton:".prev",image:".image",leftImage:".image-left",rightImage:".image-right",counter:".counter"}},this.ui=window.uiFromSelectors(this.elements)}initModal(){this.modal=new window.jvbModal(this.ui.gallery.modal,{openMessage:"Opened Gallery",closeMessage:"Closed Gallery"}),this.modal.subscribe(e=>{"modal-close"===e&&this.toggleGallery(!1)})}buildGalleryItems(e=null){let t=e?`[data-gallery="${e}"]`:this.elements.imageSelector;this.items=Array.from(document.querySelectorAll(t)).map((e,t)=>({id:e.dataset.id||t,srcset:e.srcset||e.src,sizes:e.sizes||"100vw",src:e.currentSrc||e.src,full:e.dataset.full||e.src,alt:e.alt||"",element:e}))}initListeners(){this.clickHandler=this.handleClick.bind(this),this.pointerDownHandler=this.onPointerDown.bind(this),this.pointerMoveHandler=this.onPointerMove.bind(this),this.pointerUpHandler=this.onPointerUp.bind(this),this.wheelHandler=this.onWheel.bind(this),this.keyHandler=this.handleKeys.bind(this),document.addEventListener("click",this.clickHandler)}handleClick(e){let t=window.targetCheck(e,this.elements.imageSelector);t&&!this.modal.isOpen?(e.preventDefault(),this.buildGalleryItems(t.dataset.gallery||null),this.index=this.items.findIndex(e=>e.element===t),this.toggleGallery(!0)):this.modal.isOpen&&(window.targetCheck(e,this.elements.gallery.nextButton)?(console.log("Next"),this.nextElement()):window.targetCheck(e,this.elements.gallery.prevButton)&&(console.log("Previous"),this.prevElement()))}handleKeys(e){if(this.modal.isOpen){switch(e.key){case"ArrowLeft":e.preventDefault(),this.prevElement();break;case"ArrowRight":e.preventDefault(),this.nextElement()}e.ctrlKey&&("+"!==e.key&&"="!==e.key||(e.preventDefault(),this.handleZoom(.2)),"-"===e.key&&(e.preventDefault(),this.handleZoom(-.2)),"0"===e.key&&(e.preventDefault(),this.resetZoom()))}}onPointerDown(e){e.preventDefault(),this.swipe.startX=e.clientX,this.swipe.startY=e.clientY,this.ui.gallery.image.setPointerCapture(e.pointerId),this.activePointers.set(e.pointerId,{x:e.clientX,y:e.clientY});const t=performance.now();if(t-this.lastTap<300&&1===this.activePointers.size)return this.zoom.scale>1?this.resetZoom():this.handleZoom(1,e.clientX,e.clientY),void(this.lastTap=0);if(this.lastTap=t,2===this.activePointers.size){const e=[...this.activePointers.values()];return this.pinchStartDist=Math.hypot(e[0].x-e[1].x,e[0].y-e[1].y),void(this.pinchStartScale=this.zoom.scale)}this.zoom.scale>1&&(this.zoom.panning=!0,this.zoom.startX=e.clientX-this.zoom.x,this.zoom.startY=e.clientY-this.zoom.y,this.ui.gallery.image.style.cursor="grabbing")}onPointerMove(e){if(this.activePointers.has(e.pointerId)){if(this.activePointers.set(e.pointerId,{x:e.clientX,y:e.clientY}),2===this.activePointers.size){const e=[...this.activePointers.values()],t=Math.hypot(e[0].x-e[1].x,e[0].y-e[1].y),i=this.pinchStartScale*(t/this.pinchStartDist)-this.zoom.scale,s=(e[0].x+e[1].x)/2,n=(e[0].y+e[1].y)/2;return void this.handleZoom(i,s,n)}this.zoom.panning&&(this.zoom.x=e.clientX-this.zoom.startX,this.zoom.y=e.clientY-this.zoom.startY,this.applyTransform())}}onPointerUp(e){const t=this.activePointers.get(e.pointerId);if(this.activePointers.delete(e.pointerId),this.activePointers.size<2&&(this.pinchStartDist=0),this.zoom.scale<=1&&!this.zoom.panning&&0===this.activePointers.size){const i=t?.x??e.clientX,s=t?.y??e.clientY,n=i-this.swipe.startX,o=s-this.swipe.startY;Math.abs(n)>this.zoom.threshold&&Math.abs(n)>Math.abs(o)&&(n>0?this.prevElement():this.nextElement())}0===this.activePointers.size&&(this.zoom.panning=!1,this.ui.gallery.image.style.cursor=this.zoom.scale>1?"grab":"default")}onWheel(e){if(!e.ctrlKey)return;e.preventDefault();const t=e.deltaY<0?.2:-.2;this.handleZoom(t,e.clientX,e.clientY)}handleZoom(e,t=null,i=null){const s=this.zoom.scale;let n=s+e;if(n=Math.min(this.zoom.max,Math.max(this.zoom.min,n)),n===s)return;const o=n/s;let l=this.ui.gallery.image.getBoundingClientRect();null!==t&&null!==i||(t=l.left+l.width/2,i=l.top+l.height/2);const r=t-l.left,a=i-l.top;this.zoom.x=(this.zoom.x-r)*o+r,this.zoom.y=(this.zoom.y-a)*o+a,this.zoom.scale=n,this.applyTransform(),this.notify("zoom",{scale:this.zoom.scale})}applyTransform(){this.clampPan();const e=this.ui.gallery.image;e.style.transform=`translate(${this.zoom.x}px, ${this.zoom.y}px) scale(${this.zoom.scale})`,e.style.cursor=this.zoom.scale>1?"grab":"default"}clampPan(){const e=this.ui.gallery.image,t=Math.max(0,(e.offsetWidth*this.zoom.scale-window.innerWidth)/2),i=Math.max(0,(e.offsetHeight*this.zoom.scale-window.innerHeight)/2);this.zoom.x=Math.max(-t,Math.min(t,this.zoom.x)),this.zoom.y=Math.max(-i,Math.min(i,this.zoom.y))}resetZoom(){this.zoom.scale=1,this.zoom.x=0,this.zoom.y=0,this.zoom.startX=0,this.zoom.startY=0,this.zoom.panning=!1,this.applyTransform()}resetSwipe(){return{startX:null,startY:null,endX:null,endY:null}}toggleGallery(e){e?(this.ui.gallery.image.draggable=!1,this.ui.gallery.image.style.userSelect="none",this.ui.gallery.image.addEventListener("pointerdown",this.pointerDownHandler),this.ui.gallery.image.addEventListener("pointermove",this.pointerMoveHandler),this.ui.gallery.image.addEventListener("pointerup",this.pointerUpHandler),this.ui.gallery.image.addEventListener("pointercancel",this.pointerUpHandler),window.addEventListener("wheel",this.wheelHandler,{passive:!1}),window.addEventListener("keydown",this.keyHandler),this.moveIntoView()):(this.ui.gallery.image.removeEventListener("pointerdown",this.pointerDownHandler),this.ui.gallery.image.removeEventListener("pointermove",this.pointerMoveHandler),this.ui.gallery.image.removeEventListener("pointerup",this.pointerUpHandler),this.ui.gallery.image.removeEventListener("pointercancel",this.pointerUpHandler),window.removeEventListener("wheel",this.wheelHandler),window.removeEventListener("keydown",this.keyHandler),this.resetZoom(),this.resetSwipe(),this.activePointers.clear(),this.lastTap=0),e&&!this.modal.isOpen&&this.modal.handleOpen()}moveIntoView(e=0){let t=this.index+e;t<0?t=this.items.length-1:t>=this.items.length?t=0:t===this.items.length-3&&this.notify("load-more"),this.index=t,this.updateDisplay(),this.preloadAdjacent(),this.a11y.announce(`Image ${this.index+1} of ${this.items.length}`)}nextElement(){this.resetZoom(),this.moveIntoView(1)}prevElement(){this.resetZoom(),this.moveIntoView(-1)}updateDisplay(){const e=this.items[this.index];if(!e)return;const t=this.ui.gallery.image;if(e.srcset&&(t.srcset=e.srcset,t.sizes=e.sizes),t.src=e.src,t.alt=e.alt,e.full&&e.full!==e.src){const i=new Image;i.onload=()=>{this.items[this.index]===e&&(t.src=e.full,t.removeAttribute("srcset"),t.removeAttribute("sizes"))},i.src=e.full}this.ui.gallery.counter.textContent=`${this.index+1} / ${this.items.length}`,this.ui.gallery.prevButton.disabled=this.items.length<=1,this.ui.gallery.nextButton.disabled=this.items.length<=1}preloadAdjacent(){[-1,1].forEach(e=>{const t=this.index+e;if(t>0&&t<this.items.length){const i=this.items[t];(e<0?this.ui.gallery.leftImage:this.ui.gallery.rightImage).src=i.full}})}initSubscribers(){this.subscribers=new Set}subscribe(e){return this.subscribers.add(e),()=>this.subscribers.delete(e)}notify(e,t={}){this.subscribers.forEach(i=>{try{i(e,t)}catch(e){console.error("Subscriber error:",e)}})}destroy(){this.subscribers.clear(),this.toggleGallery(!1),document.removeEventListener("click",this.clickHandler)}}document.addEventListener("DOMContentLoaded",function(){document.querySelector("dialog.gallery")&&(window.jvbGallery=new e)})})(); |
| | |
| | | default => [], |
| | | }; |
| | | |
| | | |
| | | $result = apply_filters(BASE.ucfirst($type).ucfirst($format).'Default', $defaults); |
| | | if ($format === 'reference' && empty($result)) { |
| | | $full = self::getDefault($type, 'schema'); |
| | |
| | | nav.drawer{bottom:0;max-height:100vh;overflow:hidden auto;position:fixed;left:0;transition:var(--trans-size);width:var(--btn);z-index:var(--z-5);--dir:column-reverse;background-color:var(--base);border-right:1px solid var(--base-200);box-shadow:rgba(var(--base-rgb),var(--op-4)) var(--shdw-left);height:auto;--w:var(--chip_)}nav.drawer .section-title,nav.drawer .title{display:none}nav.drawer ul .icon{min-width:var(--chip_)}nav.drawer .a,nav.drawer a{gap:.5rem;height:var(--chipchip);justify-content:center;padding:0 .5rem;width:100%}nav.drawer .toggle{width:100%}nav.drawer .toggle .icon{transform:rotate(0);transition:var(--trans-transform)}nav.drawer.open{width:240px}nav.drawer.open .section-title,nav.drawer.open .title{display:block}nav.drawer.open .toggle .icon{transform:rotate(-180deg)}nav.drawer.open .a,nav.drawer.open a{justify-content:flex-start}nav.drawer ul{--dir:column;--gap:0;--height:auto;margin:0;padding:0}nav.drawer li,nav.drawer ul{height:auto;width:100%}nav.drawer .row{width:100%}nav.drawer .menu-section{border-bottom:1px solid var(--contrast-200)}nav.drawer .section-title{font-size:var(--small);font-weight:700;opacity:.6;padding:.5rem var(--px);text-transform:uppercase} |
| | | nav.drawer{bottom:0;max-height:100vh;overflow:hidden auto;position:fixed;left:0;transition:var(--trans-size);width:var(--btn);z-index:var(--z-5);--dir:column-reverse;background-color:rgb(var(--base));border-right:1px solid rgb(var(--base-200));box-shadow:rgba(var(--base),var(--op-4)) var(--shdw-left);height:auto;--w:var(--chip_)}nav.drawer .section-title,nav.drawer .title{display:none}nav.drawer ul .icon{min-width:var(--chip_)}nav.drawer .a,nav.drawer a{gap:.5rem;height:var(--chipchip);justify-content:center;padding:0 .5rem;width:100%}nav.drawer .toggle{width:100%}nav.drawer .toggle .icon{transform:rotate(0);transition:var(--trans-transform)}nav.drawer.open{width:240px}nav.drawer.open .section-title,nav.drawer.open .title{display:block}nav.drawer.open .toggle .icon{transform:rotate(-180deg)}nav.drawer.open .a,nav.drawer.open a{justify-content:flex-start}nav.drawer ul{--dir:column;--gap:0;--height:auto;margin:0;padding:0}nav.drawer li,nav.drawer ul{height:auto;width:100%}nav.drawer .row{width:100%}nav.drawer .menu-section{border-bottom:1px solid rgb(var(--contrast-200))}nav.drawer .section-title{font-size:var(--small);font-weight:700;opacity:.6;padding:.5rem var(--px);text-transform:uppercase} |
| | |
| | | nav.drawer{bottom:0;max-height:100vh;overflow:hidden auto;position:fixed;right:0;transition:var(--trans-size);width:var(--btn);z-index:var(--z-5);--dir:column-reverse;background-color:var(--base);border-left:1px solid var(--base-200);box-shadow:rgba(var(--base-rgb),var(--op-4)) var(--shdw-left);height:auto;--w:var(--chip_)}nav.drawer .section-title,nav.drawer .title{display:none}nav.drawer ul .icon{min-width:var(--chip_)}nav.drawer .a,nav.drawer a{gap:.5rem;height:var(--chipchip);justify-content:center;padding:0 .5rem;width:100%}nav.drawer .toggle{width:100%}nav.drawer .toggle .icon{transform:rotate(0);transition:var(--trans-transform)}nav.drawer.open{width:240px}nav.drawer.open .section-title,nav.drawer.open .title{display:block}nav.drawer.open .toggle .icon{transform:rotate(180deg)}nav.drawer.open .a,nav.drawer.open a{justify-content:flex-start}nav.drawer ul{--dir:column;--gap:0;--height:auto;margin:0;padding:0}nav.drawer li,nav.drawer ul{height:auto;width:100%}nav.drawer .row{width:100%}nav.drawer .menu-section{border-bottom:1px solid var(--contrast-200)}nav.drawer .section-title{font-size:var(--small);font-weight:700;opacity:.6;padding:.5rem var(--px);text-transform:uppercase} |
| | | nav.drawer{bottom:0;max-height:100vh;overflow:hidden auto;position:fixed;right:0;transition:var(--trans-size);width:var(--btn);z-index:var(--z-5);--dir:column-reverse;background-color:rgb(var(--base));border-left:1px solid rgb(var(--base-200));box-shadow:rgba(var(--base),var(--op-4)) var(--shdw-left);height:auto;--w:var(--chip_)}nav.drawer .section-title,nav.drawer .title{display:none}nav.drawer ul .icon{min-width:var(--chip_)}nav.drawer .a,nav.drawer a{gap:.5rem;height:var(--chipchip);justify-content:center;padding:0 .5rem;width:100%}nav.drawer .toggle{width:100%}nav.drawer .toggle .icon{transform:rotate(0);transition:var(--trans-transform)}nav.drawer.open{width:240px}nav.drawer.open .section-title,nav.drawer.open .title{display:block}nav.drawer.open .toggle .icon{transform:rotate(180deg)}nav.drawer.open .a,nav.drawer.open a{justify-content:flex-start}nav.drawer ul{--dir:column;--gap:0;--height:auto;margin:0;padding:0}nav.drawer li,nav.drawer ul{height:auto;width:100%}nav.drawer .row{width:100%}nav.drawer .menu-section{border-bottom:1px solid rgb(var(--contrast-200))}nav.drawer .section-title{font-size:var(--small);font-weight:700;opacity:.6;padding:.5rem var(--px);text-transform:uppercase} |
| | |
| | | nav#faq{background-color:var(--base-100);border-radius:var(--radius-outer);display:block;height:-moz-max-content;height:max-content;padding:1.5rem;touch-action:auto}nav#faq ol{counter-reset:faq;display:block;height:-moz-fit-content;height:fit-content;list-style:decimal-leading-zero}nav#faq ol li{counter-increment:faq;width:-moz-max-content;width:max-content}nav#faq ol li:before{content:counter(faq);display:block;font-family:var(--heading);font-weight:var(--fw-h-bold)}nav#faq h2{font-size:var(--txt-large);right:0;margin:.5rem 0}nav#faq a{padding:.5rem}.faq-block{max-width:none;padding-bottom:3rem;width:100%}.faq-block>*{margin:1rem auto;max-width:var(--wide)}.faq-block h2{margin:5rem 0 1.5rem}.faq-block h3{margin:0;text-transform:none}.faq-block :target{background-color:var(--base);outline:none}.faq-block :target h2{background-color:var(--base);border-radius:var(--radius-outer);padding:1rem 1.5rem}.faq-block details{margin:1rem auto;max-width:var(--content);padding:.75rem}.faq-block details+details{margin-top:3rem}.faq-block details .button{display:flex;height:-moz-fit-content;height:fit-content;margin-right:auto} |
| | | nav#faq{background-color:rgb(var(--base-100));border-radius:var(--radius-outer);display:block;height:-moz-max-content;height:max-content;padding:1.5rem;touch-action:auto}nav#faq ol{counter-reset:faq;display:block;height:-moz-fit-content;height:fit-content;list-style:decimal-leading-zero}nav#faq ol li{counter-increment:faq;width:-moz-max-content;width:max-content}nav#faq ol li:before{content:counter(faq);display:block;font-family:var(--heading);font-weight:var(--fw-h-bold)}nav#faq h2{font-size:var(--txt-large);right:0;margin:.5rem 0}nav#faq a{padding:.5rem}.faq-block{max-width:none;padding-bottom:3rem;width:100%}.faq-block>*{margin:1rem auto;max-width:var(--wide)}.faq-block h2{margin:5rem 0 1.5rem}.faq-block h3{margin:0;text-transform:none}.faq-block :target{background-color:rgb(var(--base));outline:none}.faq-block :target h2{background-color:rgb(var(--base));border-radius:var(--radius-outer);padding:1rem 1.5rem}.faq-block details{margin:1rem auto;max-width:var(--content);padding:.75rem}.faq-block details+details{margin-top:3rem}.faq-block details .button{display:flex;height:-moz-fit-content;height:fit-content;margin-right:auto} |
| | |
| | | nav#faq{background-color:var(--base-100);border-radius:var(--radius-outer);display:block;height:-moz-max-content;height:max-content;padding:1.5rem;touch-action:auto}nav#faq ol{counter-reset:faq;display:block;height:-moz-fit-content;height:fit-content;list-style:decimal-leading-zero}nav#faq ol li{counter-increment:faq;width:-moz-max-content;width:max-content}nav#faq ol li:before{content:counter(faq);display:block;font-family:var(--heading);font-weight:var(--fw-h-bold)}nav#faq h2{font-size:var(--txt-large);left:0;margin:.5rem 0}nav#faq a{padding:.5rem}.faq-block{max-width:none;padding-bottom:3rem;width:100%}.faq-block>*{margin:1rem auto;max-width:var(--wide)}.faq-block h2{margin:5rem 0 1.5rem}.faq-block h3{margin:0;text-transform:none}.faq-block :target{background-color:var(--base);outline:none}.faq-block :target h2{background-color:var(--base);border-radius:var(--radius-outer);padding:1rem 1.5rem}.faq-block details{margin:1rem auto;max-width:var(--content);padding:.75rem}.faq-block details+details{margin-top:3rem}.faq-block details .button{display:flex;height:-moz-fit-content;height:fit-content;margin-left:auto} |
| | | nav#faq{background-color:rgb(var(--base-100));border-radius:var(--radius-outer);display:block;height:-moz-max-content;height:max-content;padding:1.5rem;touch-action:auto}nav#faq ol{counter-reset:faq;display:block;height:-moz-fit-content;height:fit-content;list-style:decimal-leading-zero}nav#faq ol li{counter-increment:faq;width:-moz-max-content;width:max-content}nav#faq ol li:before{content:counter(faq);display:block;font-family:var(--heading);font-weight:var(--fw-h-bold)}nav#faq h2{font-size:var(--txt-large);left:0;margin:.5rem 0}nav#faq a{padding:.5rem}.faq-block{max-width:none;padding-bottom:3rem;width:100%}.faq-block>*{margin:1rem auto;max-width:var(--wide)}.faq-block h2{margin:5rem 0 1.5rem}.faq-block h3{margin:0;text-transform:none}.faq-block :target{background-color:rgb(var(--base));outline:none}.faq-block :target h2{background-color:rgb(var(--base));border-radius:var(--radius-outer);padding:1rem 1.5rem}.faq-block details{margin:1rem auto;max-width:var(--content);padding:.75rem}.faq-block details+details{margin-top:3rem}.faq-block details .button{display:flex;height:-moz-fit-content;height:fit-content;margin-left:auto} |
| | |
| | | .feed-block{grid-column:full}.feed-block .filters{margin:0 auto;max-width:var(--wide);padding:1rem 0}.feed-block .filters .remove-term.remove-term{height:-moz-max-content;height:max-content;width:-moz-max-content;width:max-content}.feed-block .filter-group{padding:2rem 0;position:relative}.feed-block .filter-group .label{right:0;position:absolute}.feed-block .filter-group>.label{top:0}.feed-block .filter-group [type=radio]{right:var(--offScreen);position:absolute}.feed-block .filter-group button,.feed-block .filter-group label{height:-moz-max-content;height:max-content;padding:.5rem;position:relative}.feed-block .filter-group button:hover,.feed-block .filter-group label:hover{color:var(--action-contrast)}.feed-block .filter-group :checked+label .label,.feed-block .filter-group button:hover .label,.feed-block .filter-group label:hover .label{opacity:1;visibility:visible}.feed-block .filter-group button .label,.feed-block .filter-group label .label,.feed-block .filter-group:has(label:hover) :checked+label .label{--height:max-content;bottom:-2rem;font-weight:var(--fw-b);opacity:0;visibility:hidden;white-space:nowrap;width:-moz-max-content;width:max-content}.feed-block h3{font-size:var(--medium);margin:0 0 .25rem}.placeholder{align-items:center;aspect-ratio:1;background:var(--base);border:1rem solid var(--base-50);border-radius:1rem;display:flex;justify-content:center}.placeholder i.icon{--w:50%;animation:dance 2.5s ease-in-out infinite;color:var(--base-200)}.item-grid{max-width:100%;padding:0 var(--chip)}.feed.item{background:var(--base-50);border-radius:.5rem;box-shadow:0 2px 4px rgba(0,0,0,.1);height:-moz-fit-content;height:fit-content;overflow:hidden;padding:0;position:relative}.feed.item details{padding:0;position:relative;width:100%;z-index:var(--z-2)}.feed.item details summary{backdrop-filter:blur(5px);background-color:rgba(var(--base-rgb),var(--op-2));right:0;position:absolute;top:-3rem;width:100%}.feed.item details summary:hover{background-color:rgba(var(--action-rgb),var(--op-45))}.feed.item details[open]{padding:.25rem .5rem}.feed.item details[open] summary .icon{opacity:0}.feed.item img{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.feed.item img:hover{opacity:.8}.feed.item[data-timeline] .images{aspect-ratio:3/2;padding:0 0 1rem}.feed.item[data-timeline] .images span{background-color:var(--action-0);color:var(--action-contrast);padding:.25rem .5rem;position:absolute;width:50%}.feed.item[data-timeline] .images span:first-of-type{bottom:0;left:50%;text-align:left}.feed.item[data-timeline] .images span:last-of-type{right:50%;top:0}.feed.item[data-timeline] .images>a{display:flex;flex-wrap:nowrap;height:100%;position:relative;width:100%}.feed.item[data-timeline] img{height:100%;-o-object-fit:cover;object-fit:cover;width:50%}.feed.item[data-timeline] img:first-of-type{border-left:1px solid var(--action-0)}.feed.item a:after,.feed.item a:before{display:none}.feed.item label{font-weight:400;text-transform:none}.feed.item label .icon{--w:1.5em}.item-grid:has([data-timeline]){grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.items-wrap [type=checkbox],.items-wrap [type=radio]{right:-200vw;opacity:0;position:absolute}.items-wrap [type=checkbox]+label,.items-wrap [type=radio]+label{cursor:pointer;position:relative}.items-wrap [type=checkbox]+label:hover,.items-wrap [type=radio]+label:hover{color:var(--action-0)}.items-wrap [type=checkbox]+label:after,.items-wrap [type=checkbox]+label:before,.items-wrap [type=radio]+label:after,.items-wrap [type=radio]+label:before{content:"";position:absolute;top:50%}.items-wrap [type=checkbox]+label:after,.items-wrap [type=radio]+label:after{border:solid var(--light-0);border-width:0 0 2px 2px;display:none;height:10px;right:5px;transform:translateY(-70%) rotate(-45deg);width:5px}.items-wrap [type=checkbox]+label:before,.items-wrap [type=radio]+label:before{background-color:var(--base);border:2px solid var(--contrast-200);border-radius:var(--radius);height:1rem;right:0;transform:translateY(-50%);width:1rem}.items-wrap [type=checkbox]:hover+label:before,.items-wrap [type=radio]:hover+label:before{border-color:var(--action-200)}.items-wrap [type=checkbox]:checked+label:before,.items-wrap [type=radio]:checked+label:before{background-color:var(--action-0);border-color:var(--action-100)}.items-wrap [type=radio]:checked+label:before{border-radius:50%}.items-wrap [type=checkbox]:checked+label:after{border:solid var(--light-0);border-width:0 0 2px 2px;display:block;height:.66rem;right:5px;top:50%;transform:translateY(-70%) rotate(-45deg);width:.35rem}.items-wrap :disabled+label{cursor:not-allowed}.items-wrap :disabled+label,.items-wrap :disabled+label:hover{background-color:var(--base-50);border-color:var(--base-200);color:var(--base-200)}.items-wrap :disabled+label:before{border-color:var(--base-200)}#jvb-selector .items-wrap [type=checkbox]+label,#jvb-selector .items-wrap [type=radio]+label{flex:1;padding-right:2rem!important;transform-origin:top center;will-change:transform}.feed-block+footer{background-color:var(--base-50);display:flex;grid-column:full;justify-content:flex-end;margin:0;padding:0!important;z-index:0}.feed-block+footer button{margin-right:auto;padding:.35rem .25rem;width:-moz-max-content;width:max-content;--w:1.3em!important;flex-wrap:nowrap;font-size:var(--txt-x-small);justify-content:flex-start;min-height:0;transition:var(--trans-size)}.feed-block+footer button span{display:none;white-space:nowrap}.feed-block+footer button:focus span,.feed-block+footer button:hover span{display:block} |
| | | .feed-block{grid-column:full}.feed-block .filters{margin:0 auto;max-width:var(--wide);padding:1rem 0}.feed-block .filters .remove-term.remove-term{height:-moz-max-content;height:max-content;width:-moz-max-content;width:max-content}.feed-block .filter-group{padding:2rem 0;position:relative}.feed-block .filter-group .label{right:0;position:absolute}.feed-block .filter-group>.label{top:0}.feed-block .filter-group [type=radio]{right:var(--offScreen);position:absolute}.feed-block .filter-group button,.feed-block .filter-group label{height:-moz-max-content;height:max-content;padding:.5rem;position:relative}.feed-block .filter-group button:hover,.feed-block .filter-group label:hover{color:var(--action-contrast)}.feed-block .filter-group :checked+label .label,.feed-block .filter-group button:hover .label,.feed-block .filter-group label:hover .label{opacity:1;visibility:visible}.feed-block .filter-group button .label,.feed-block .filter-group label .label,.feed-block .filter-group:has(label:hover) :checked+label .label{--height:max-content;bottom:-2rem;font-weight:var(--fw-b);opacity:0;visibility:hidden;white-space:nowrap;width:-moz-max-content;width:max-content}.feed-block h3{font-size:var(--medium);margin:0 0 .25rem}.placeholder{align-items:center;aspect-ratio:1;background:rgb(var(--base));border:1rem solid rgb(var(--base-50));border-radius:1rem;display:flex;justify-content:center}.placeholder i.icon{--w:50%;animation:dance 2.5s ease-in-out infinite;color:rgb(var(--base-200))}.item-grid{max-width:100%;padding:0 var(--chip)}.feed.item{background:rgb(var(--base-50));border-radius:.5rem;box-shadow:0 2px 4px rgba(0,0,0,.1);height:-moz-fit-content;height:fit-content;overflow:hidden;padding:0;position:relative}.feed.item details{padding:0;position:relative;width:100%;z-index:var(--z-2)}.feed.item details summary{backdrop-filter:blur(5px);background-color:rgba(var(--base),var(--op-2));right:0;position:absolute;top:-3rem;width:100%}.feed.item details summary:hover{background-color:rgba(var(--action-0),var(--op-45))}.feed.item details[open]{padding:.25rem .5rem}.feed.item details[open] summary .icon{opacity:0}.feed.item img{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.feed.item img:hover{opacity:.8}.feed.item[data-timeline] .images{aspect-ratio:3/2;padding:0 0 1rem}.feed.item[data-timeline] .images span{background-color:rgb(var(--action-0));color:var(--action-contrast);padding:.25rem .5rem;position:absolute;width:50%}.feed.item[data-timeline] .images span:first-of-type{bottom:0;left:50%;text-align:left}.feed.item[data-timeline] .images span:last-of-type{right:50%;top:0}.feed.item[data-timeline] .images>a{display:flex;flex-wrap:nowrap;height:100%;position:relative;width:100%}.feed.item[data-timeline] img{height:100%;-o-object-fit:cover;object-fit:cover;width:50%}.feed.item[data-timeline] img:first-of-type{border-left:1px solid rgb(var(--action-0))}.feed.item a:after,.feed.item a:before{display:none}.feed.item label{font-weight:400;text-transform:none}.feed.item label .icon{--w:1.5em}.item-grid:has([data-timeline]){grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.items-wrap [type=checkbox],.items-wrap [type=radio]{right:-200vw;opacity:0;position:absolute}.items-wrap [type=checkbox]+label,.items-wrap [type=radio]+label{cursor:pointer;position:relative}.items-wrap [type=checkbox]+label:hover,.items-wrap [type=radio]+label:hover{color:rgb(var(--action-0))}.items-wrap [type=checkbox]+label:after,.items-wrap [type=checkbox]+label:before,.items-wrap [type=radio]+label:after,.items-wrap [type=radio]+label:before{content:"";position:absolute;top:50%}.items-wrap [type=checkbox]+label:after,.items-wrap [type=radio]+label:after{border:solid var(--light-0);border-width:0 0 2px 2px;display:none;height:10px;right:5px;transform:translateY(-70%) rotate(-45deg);width:5px}.items-wrap [type=checkbox]+label:before,.items-wrap [type=radio]+label:before{background-color:rgb(var(--base));border:2px solid rgb(var(--contrast-200));border-radius:var(--radius);height:1rem;right:0;transform:translateY(-50%);width:1rem}.items-wrap [type=checkbox]:hover+label:before,.items-wrap [type=radio]:hover+label:before{border-color:rgb(var(--action-200))}.items-wrap [type=checkbox]:checked+label:before,.items-wrap [type=radio]:checked+label:before{background-color:rgb(var(--action-0));border-color:rgb(var(--action-100))}.items-wrap [type=radio]:checked+label:before{border-radius:50%}.items-wrap [type=checkbox]:checked+label:after{border:solid var(--light-0);border-width:0 0 2px 2px;display:block;height:.66rem;right:5px;top:50%;transform:translateY(-70%) rotate(-45deg);width:.35rem}.items-wrap :disabled+label{cursor:not-allowed}.items-wrap :disabled+label,.items-wrap :disabled+label:hover{background-color:rgb(var(--base-50));border-color:rgb(var(--base-200));color:rgb(var(--base-200))}.items-wrap :disabled+label:before{border-color:rgb(var(--base-200))}#jvb-selector .items-wrap [type=checkbox]+label,#jvb-selector .items-wrap [type=radio]+label{flex:1;padding-right:2rem!important;transform-origin:top center;will-change:transform}.feed-block+footer{background-color:rgb(var(--base-50));display:flex;grid-column:full;justify-content:flex-end;margin:0;padding:0!important;z-index:0}.feed-block+footer button{margin-right:auto;padding:.35rem .25rem;width:-moz-max-content;width:max-content;--w:1.3em!important;flex-wrap:nowrap;font-size:var(--txt-x-small);justify-content:flex-start;min-height:0;transition:var(--trans-size)}.feed-block+footer button span{display:none;white-space:nowrap}.feed-block+footer button:focus span,.feed-block+footer button:hover span{display:block} |
| | |
| | | .feed-block{grid-column:full}.feed-block .filters{margin:0 auto;max-width:var(--wide);padding:1rem 0}.feed-block .filters .remove-term.remove-term{height:-moz-max-content;height:max-content;width:-moz-max-content;width:max-content}.feed-block .filter-group{padding:2rem 0;position:relative}.feed-block .filter-group .label{left:0;position:absolute}.feed-block .filter-group>.label{top:0}.feed-block .filter-group [type=radio]{left:var(--offScreen);position:absolute}.feed-block .filter-group button,.feed-block .filter-group label{height:-moz-max-content;height:max-content;padding:.5rem;position:relative}.feed-block .filter-group button:hover,.feed-block .filter-group label:hover{color:var(--action-contrast)}.feed-block .filter-group :checked+label .label,.feed-block .filter-group button:hover .label,.feed-block .filter-group label:hover .label{opacity:1;visibility:visible}.feed-block .filter-group button .label,.feed-block .filter-group label .label,.feed-block .filter-group:has(label:hover) :checked+label .label{--height:max-content;bottom:-2rem;font-weight:var(--fw-b);opacity:0;visibility:hidden;white-space:nowrap;width:-moz-max-content;width:max-content}.feed-block h3{font-size:var(--medium);margin:0 0 .25rem}.placeholder{align-items:center;aspect-ratio:1;background:var(--base);border:1rem solid var(--base-50);border-radius:1rem;display:flex;justify-content:center}.placeholder i.icon{--w:50%;animation:dance 2.5s ease-in-out infinite;color:var(--base-200)}.item-grid{max-width:100%;padding:0 var(--chip)}.feed.item{background:var(--base-50);border-radius:.5rem;box-shadow:0 2px 4px rgba(0,0,0,.1);height:-moz-fit-content;height:fit-content;overflow:hidden;padding:0;position:relative}.feed.item details{padding:0;position:relative;width:100%;z-index:var(--z-2)}.feed.item details summary{backdrop-filter:blur(5px);background-color:rgba(var(--base-rgb),var(--op-2));left:0;position:absolute;top:-3rem;width:100%}.feed.item details summary:hover{background-color:rgba(var(--action-rgb),var(--op-45))}.feed.item details[open]{padding:.25rem .5rem}.feed.item details[open] summary .icon{opacity:0}.feed.item img{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.feed.item img:hover{opacity:.8}.feed.item[data-timeline] .images{aspect-ratio:3/2;padding:0 0 1rem}.feed.item[data-timeline] .images span{background-color:var(--action-0);color:var(--action-contrast);padding:.25rem .5rem;position:absolute;width:50%}.feed.item[data-timeline] .images span:first-of-type{bottom:0;right:50%;text-align:right}.feed.item[data-timeline] .images span:last-of-type{left:50%;top:0}.feed.item[data-timeline] .images>a{display:flex;flex-wrap:nowrap;height:100%;position:relative;width:100%}.feed.item[data-timeline] img{height:100%;-o-object-fit:cover;object-fit:cover;width:50%}.feed.item[data-timeline] img:first-of-type{border-right:1px solid var(--action-0)}.feed.item a:after,.feed.item a:before{display:none}.feed.item label{font-weight:400;text-transform:none}.feed.item label .icon{--w:1.5em}.item-grid:has([data-timeline]){grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.items-wrap [type=checkbox],.items-wrap [type=radio]{left:-200vw;opacity:0;position:absolute}.items-wrap [type=checkbox]+label,.items-wrap [type=radio]+label{cursor:pointer;position:relative}.items-wrap [type=checkbox]+label:hover,.items-wrap [type=radio]+label:hover{color:var(--action-0)}.items-wrap [type=checkbox]+label:after,.items-wrap [type=checkbox]+label:before,.items-wrap [type=radio]+label:after,.items-wrap [type=radio]+label:before{content:"";position:absolute;top:50%}.items-wrap [type=checkbox]+label:after,.items-wrap [type=radio]+label:after{border:solid var(--light-0);border-width:0 2px 2px 0;display:none;height:10px;left:5px;transform:translateY(-70%) rotate(45deg);width:5px}.items-wrap [type=checkbox]+label:before,.items-wrap [type=radio]+label:before{background-color:var(--base);border:2px solid var(--contrast-200);border-radius:var(--radius);height:1rem;left:0;transform:translateY(-50%);width:1rem}.items-wrap [type=checkbox]:hover+label:before,.items-wrap [type=radio]:hover+label:before{border-color:var(--action-200)}.items-wrap [type=checkbox]:checked+label:before,.items-wrap [type=radio]:checked+label:before{background-color:var(--action-0);border-color:var(--action-100)}.items-wrap [type=radio]:checked+label:before{border-radius:50%}.items-wrap [type=checkbox]:checked+label:after{border:solid var(--light-0);border-width:0 2px 2px 0;display:block;height:.66rem;left:5px;top:50%;transform:translateY(-70%) rotate(45deg);width:.35rem}.items-wrap :disabled+label{cursor:not-allowed}.items-wrap :disabled+label,.items-wrap :disabled+label:hover{background-color:var(--base-50);border-color:var(--base-200);color:var(--base-200)}.items-wrap :disabled+label:before{border-color:var(--base-200)}#jvb-selector .items-wrap [type=checkbox]+label,#jvb-selector .items-wrap [type=radio]+label{flex:1;padding-left:2rem!important;transform-origin:top center;will-change:transform}.feed-block+footer{background-color:var(--base-50);display:flex;grid-column:full;justify-content:flex-end;margin:0;padding:0!important;z-index:0}.feed-block+footer button{margin-left:auto;padding:.35rem .25rem;width:-moz-max-content;width:max-content;--w:1.3em!important;flex-wrap:nowrap;font-size:var(--txt-x-small);justify-content:flex-start;min-height:0;transition:var(--trans-size)}.feed-block+footer button span{display:none;white-space:nowrap}.feed-block+footer button:focus span,.feed-block+footer button:hover span{display:block} |
| | | .feed-block{grid-column:full}.feed-block .filters{margin:0 auto;max-width:var(--wide);padding:1rem 0}.feed-block .filters .remove-term.remove-term{height:-moz-max-content;height:max-content;width:-moz-max-content;width:max-content}.feed-block .filter-group{padding:2rem 0;position:relative}.feed-block .filter-group .label{left:0;position:absolute}.feed-block .filter-group>.label{top:0}.feed-block .filter-group [type=radio]{left:var(--offScreen);position:absolute}.feed-block .filter-group button,.feed-block .filter-group label{height:-moz-max-content;height:max-content;padding:.5rem;position:relative}.feed-block .filter-group button:hover,.feed-block .filter-group label:hover{color:var(--action-contrast)}.feed-block .filter-group :checked+label .label,.feed-block .filter-group button:hover .label,.feed-block .filter-group label:hover .label{opacity:1;visibility:visible}.feed-block .filter-group button .label,.feed-block .filter-group label .label,.feed-block .filter-group:has(label:hover) :checked+label .label{--height:max-content;bottom:-2rem;font-weight:var(--fw-b);opacity:0;visibility:hidden;white-space:nowrap;width:-moz-max-content;width:max-content}.feed-block h3{font-size:var(--medium);margin:0 0 .25rem}.placeholder{align-items:center;aspect-ratio:1;background:rgb(var(--base));border:1rem solid rgb(var(--base-50));border-radius:1rem;display:flex;justify-content:center}.placeholder i.icon{--w:50%;animation:dance 2.5s ease-in-out infinite;color:rgb(var(--base-200))}.item-grid{max-width:100%;padding:0 var(--chip)}.feed.item{background:rgb(var(--base-50));border-radius:.5rem;box-shadow:0 2px 4px rgba(0,0,0,.1);height:-moz-fit-content;height:fit-content;overflow:hidden;padding:0;position:relative}.feed.item details{padding:0;position:relative;width:100%;z-index:var(--z-2)}.feed.item details summary{backdrop-filter:blur(5px);background-color:rgba(var(--base),var(--op-2));left:0;position:absolute;top:-3rem;width:100%}.feed.item details summary:hover{background-color:rgba(var(--action-0),var(--op-45))}.feed.item details[open]{padding:.25rem .5rem}.feed.item details[open] summary .icon{opacity:0}.feed.item img{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.feed.item img:hover{opacity:.8}.feed.item[data-timeline] .images{aspect-ratio:3/2;padding:0 0 1rem}.feed.item[data-timeline] .images span{background-color:rgb(var(--action-0));color:var(--action-contrast);padding:.25rem .5rem;position:absolute;width:50%}.feed.item[data-timeline] .images span:first-of-type{bottom:0;right:50%;text-align:right}.feed.item[data-timeline] .images span:last-of-type{left:50%;top:0}.feed.item[data-timeline] .images>a{display:flex;flex-wrap:nowrap;height:100%;position:relative;width:100%}.feed.item[data-timeline] img{height:100%;-o-object-fit:cover;object-fit:cover;width:50%}.feed.item[data-timeline] img:first-of-type{border-right:1px solid rgb(var(--action-0))}.feed.item a:after,.feed.item a:before{display:none}.feed.item label{font-weight:400;text-transform:none}.feed.item label .icon{--w:1.5em}.item-grid:has([data-timeline]){grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.items-wrap [type=checkbox],.items-wrap [type=radio]{left:-200vw;opacity:0;position:absolute}.items-wrap [type=checkbox]+label,.items-wrap [type=radio]+label{cursor:pointer;position:relative}.items-wrap [type=checkbox]+label:hover,.items-wrap [type=radio]+label:hover{color:rgb(var(--action-0))}.items-wrap [type=checkbox]+label:after,.items-wrap [type=checkbox]+label:before,.items-wrap [type=radio]+label:after,.items-wrap [type=radio]+label:before{content:"";position:absolute;top:50%}.items-wrap [type=checkbox]+label:after,.items-wrap [type=radio]+label:after{border:solid var(--light-0);border-width:0 2px 2px 0;display:none;height:10px;left:5px;transform:translateY(-70%) rotate(45deg);width:5px}.items-wrap [type=checkbox]+label:before,.items-wrap [type=radio]+label:before{background-color:rgb(var(--base));border:2px solid rgb(var(--contrast-200));border-radius:var(--radius);height:1rem;left:0;transform:translateY(-50%);width:1rem}.items-wrap [type=checkbox]:hover+label:before,.items-wrap [type=radio]:hover+label:before{border-color:rgb(var(--action-200))}.items-wrap [type=checkbox]:checked+label:before,.items-wrap [type=radio]:checked+label:before{background-color:rgb(var(--action-0));border-color:rgb(var(--action-100))}.items-wrap [type=radio]:checked+label:before{border-radius:50%}.items-wrap [type=checkbox]:checked+label:after{border:solid var(--light-0);border-width:0 2px 2px 0;display:block;height:.66rem;left:5px;top:50%;transform:translateY(-70%) rotate(45deg);width:.35rem}.items-wrap :disabled+label{cursor:not-allowed}.items-wrap :disabled+label,.items-wrap :disabled+label:hover{background-color:rgb(var(--base-50));border-color:rgb(var(--base-200));color:rgb(var(--base-200))}.items-wrap :disabled+label:before{border-color:rgb(var(--base-200))}#jvb-selector .items-wrap [type=checkbox]+label,#jvb-selector .items-wrap [type=radio]+label{flex:1;padding-left:2rem!important;transform-origin:top center;will-change:transform}.feed-block+footer{background-color:rgb(var(--base-50));display:flex;grid-column:full;justify-content:flex-end;margin:0;padding:0!important;z-index:0}.feed-block+footer button{margin-left:auto;padding:.35rem .25rem;width:-moz-max-content;width:max-content;--w:1.3em!important;flex-wrap:nowrap;font-size:var(--txt-x-small);justify-content:flex-start;min-height:0;transition:var(--trans-size)}.feed-block+footer button span{display:none;white-space:nowrap}.feed-block+footer button:focus span,.feed-block+footer button:hover span{display:block} |
| | |
| | | :root{--navWidth:40vw}@media(min-width:768px){:root{--navWidth:22vw}}nav.glossary-index{height:60vh;position:fixed;left:-8px;top:50%;transform:translateY(-50%);width:var(--navWidth);z-index:var(--z-3)}nav.glossary-index>ul{--dir:column;--align:flex-start;--justify:flex-start;--gap:1px;height:100%;max-height:100%;overflow:hidden auto;scroll-behavior:smooth;touch-action:pan-y;width:100%}nav.glossary-index a,nav.glossary-index li{flex:1;height:-moz-max-content;height:max-content;min-height:max(var(--chipchip),-moz-max-content);min-height:max(var(--chipchip),max-content);width:100%}nav.glossary-index a{--justify:center;background-color:rgba(var(--base-rgb),var(--op-45));hyphens:auto;padding:.25rem .5rem;word-wrap:anywhere;white-space:wrap}nav.glossary-index a.active,nav.glossary-index a:focus,nav.glossary-index a:hover{background-color:rgba(var(--action-rgb),var(--op-6));color:var(--action-contrast)}.glossary dd{margin-right:.5rem;width:calc(100% + .75rem)}.glossary dd,.glossary dt{right:0;position:relative;transition:margin var(--trans-base),right var(--trans-base),width var(--trans-base)}.glossary dt.active,.glossary dt:target{color:var(--action-0);right:-1.5rem;outline:none;padding:0}.glossary dt.active+dd,.glossary dt:target+dd{right:-1.5rem}dl.glossary,main header{grid-column:full;padding:0 2rem 0 var(--navWidth)}@media(min-width:768px){dl.glossary,main header{margin-right:auto;margin-left:var(--navWidth);max-width:var(--content);padding-left:var(--btn)}}@media(max-width:768px){.glossary h2{font-size:var(--txt-medium)}.glossary p{font-size:var(--txt-x-small)}.glossary-index a,.glossary-index li{height:-moz-fit-content;height:fit-content}.glossary-index a{font-size:var(--txt-x-small);min-height:2em;padding:.25rem}body:has(.glossary) h1{font-size:var(--txt-xx-large)}} |
| | | :root{--navWidth:40vw}@media(min-width:768px){:root{--navWidth:22vw}}nav.glossary-index{height:60vh;position:fixed;left:-8px;top:50%;transform:translateY(-50%);width:var(--navWidth);z-index:var(--z-3)}nav.glossary-index>ul{--dir:column;--align:flex-start;--justify:flex-start;--gap:1px;height:100%;max-height:100%;overflow:hidden auto;scroll-behavior:smooth;touch-action:pan-y;width:100%}nav.glossary-index a,nav.glossary-index li{flex:1;height:-moz-max-content;height:max-content;min-height:max(var(--chipchip),-moz-max-content);min-height:max(var(--chipchip),max-content);width:100%}nav.glossary-index a{--justify:center;background-color:rgba(var(--base),var(--op-45));hyphens:auto;padding:.25rem .5rem;word-wrap:anywhere;white-space:wrap}nav.glossary-index a.active,nav.glossary-index a:focus,nav.glossary-index a:hover{background-color:rgba(var(--action-0),var(--op-6));color:var(--action-contrast)}.glossary dd{margin-right:.5rem;width:calc(100% + .75rem)}.glossary dd,.glossary dt{right:0;position:relative;transition:margin var(--trans-base),right var(--trans-base),width var(--trans-base)}.glossary dt.active,.glossary dt:target{color:rgb(var(--action-0));right:-1.5rem;outline:none;padding:0}.glossary dt.active+dd,.glossary dt:target+dd{right:-1.5rem}dl.glossary,main header{grid-column:full;padding:0 2rem 0 var(--navWidth)}@media(min-width:768px){dl.glossary,main header{margin-right:auto;margin-left:var(--navWidth);max-width:var(--content);padding-left:var(--btn)}}@media(max-width:768px){.glossary h2{font-size:var(--txt-medium)}.glossary p{font-size:var(--txt-x-small)}.glossary-index a,.glossary-index li{height:-moz-fit-content;height:fit-content}.glossary-index a{font-size:var(--txt-x-small);min-height:2em;padding:.25rem}body:has(.glossary) h1{font-size:var(--txt-xx-large)}} |
| | |
| | | :root{--navWidth:40vw}@media(min-width:768px){:root{--navWidth:22vw}}nav.glossary-index{height:60vh;position:fixed;right:-8px;top:50%;transform:translateY(-50%);width:var(--navWidth);z-index:var(--z-3)}nav.glossary-index>ul{--dir:column;--align:flex-start;--justify:flex-start;--gap:1px;height:100%;max-height:100%;overflow:hidden auto;scroll-behavior:smooth;touch-action:pan-y;width:100%}nav.glossary-index a,nav.glossary-index li{flex:1;height:-moz-max-content;height:max-content;min-height:max(var(--chipchip),-moz-max-content);min-height:max(var(--chipchip),max-content);width:100%}nav.glossary-index a{--justify:center;background-color:rgba(var(--base-rgb),var(--op-45));hyphens:auto;padding:.25rem .5rem;word-wrap:anywhere;white-space:wrap}nav.glossary-index a.active,nav.glossary-index a:focus,nav.glossary-index a:hover{background-color:rgba(var(--action-rgb),var(--op-6));color:var(--action-contrast)}.glossary dd{margin-left:.5rem;width:calc(100% + .75rem)}.glossary dd,.glossary dt{left:0;position:relative;transition:margin var(--trans-base),left var(--trans-base),width var(--trans-base)}.glossary dt.active,.glossary dt:target{color:var(--action-0);left:-1.5rem;outline:none;padding:0}.glossary dt.active+dd,.glossary dt:target+dd{left:-1.5rem}dl.glossary,main header{grid-column:full;padding:0 var(--navWidth) 0 2rem}@media(min-width:768px){dl.glossary,main header{margin-left:auto;margin-right:var(--navWidth);max-width:var(--content);padding-right:var(--btn)}}@media(max-width:768px){.glossary h2{font-size:var(--txt-medium)}.glossary p{font-size:var(--txt-x-small)}.glossary-index a,.glossary-index li{height:-moz-fit-content;height:fit-content}.glossary-index a{font-size:var(--txt-x-small);min-height:2em;padding:.25rem}body:has(.glossary) h1{font-size:var(--txt-xx-large)}} |
| | | :root{--navWidth:40vw}@media(min-width:768px){:root{--navWidth:22vw}}nav.glossary-index{height:60vh;position:fixed;right:-8px;top:50%;transform:translateY(-50%);width:var(--navWidth);z-index:var(--z-3)}nav.glossary-index>ul{--dir:column;--align:flex-start;--justify:flex-start;--gap:1px;height:100%;max-height:100%;overflow:hidden auto;scroll-behavior:smooth;touch-action:pan-y;width:100%}nav.glossary-index a,nav.glossary-index li{flex:1;height:-moz-max-content;height:max-content;min-height:max(var(--chipchip),-moz-max-content);min-height:max(var(--chipchip),max-content);width:100%}nav.glossary-index a{--justify:center;background-color:rgba(var(--base),var(--op-45));hyphens:auto;padding:.25rem .5rem;word-wrap:anywhere;white-space:wrap}nav.glossary-index a.active,nav.glossary-index a:focus,nav.glossary-index a:hover{background-color:rgba(var(--action-0),var(--op-6));color:var(--action-contrast)}.glossary dd{margin-left:.5rem;width:calc(100% + .75rem)}.glossary dd,.glossary dt{left:0;position:relative;transition:margin var(--trans-base),left var(--trans-base),width var(--trans-base)}.glossary dt.active,.glossary dt:target{color:rgb(var(--action-0));left:-1.5rem;outline:none;padding:0}.glossary dt.active+dd,.glossary dt:target+dd{left:-1.5rem}dl.glossary,main header{grid-column:full;padding:0 var(--navWidth) 0 2rem}@media(min-width:768px){dl.glossary,main header{margin-left:auto;margin-right:var(--navWidth);max-width:var(--content);padding-right:var(--btn)}}@media(max-width:768px){.glossary h2{font-size:var(--txt-medium)}.glossary p{font-size:var(--txt-x-small)}.glossary-index a,.glossary-index li{height:-moz-fit-content;height:fit-content}.glossary-index a{font-size:var(--txt-x-small);min-height:2em;padding:.25rem}body:has(.glossary) h1{font-size:var(--txt-xx-large)}} |
| | |
| | | .gmb-reviews{max-width:none}.gmb-reviews>.row.center{margin:0 auto;max-width:var(--content);--gap:.5rem 6rem}.gmb-reviews>.row.center p{width:-moz-fit-content;width:fit-content}.gmb-reviews .button{display:flex;height:-moz-max-content;height:max-content;margin:0 auto 2rem;width:66.6%}.gmb-reviews .stars{align-items:center;display:inline-flex;flex-wrap:nowrap;justify-content:flex-start}.gmb-reviews ul{list-style:none;margin:0;max-width:var(--full);padding:0}.gmb-reviews ul li{max-width:none;padding:4rem 1rem;width:100%}.gmb-reviews ul li:nth-of-type(odd){background-color:var(--base-50)}.gmb-reviews ul li:nth-of-type(odd) blockquote{--background:var(--base-50)}.gmb-reviews ul li:nth-of-type(2n){background-color:var(--base-100)}.gmb-reviews ul li:nth-of-type(2n) blockquote{--background:var(--base-100)}.gmb-reviews blockquote{margin:0 auto;max-width:var(--content);padding:0}.gmb-reviews blockquote .content,.gmb-reviews blockquote .content:after{border-width:4px 1px}.gmb-reviews blockquote .content:before{border-width:8px;bottom:-4px}.gmb-reviews blockquote cite{position:relative}.gmb-reviews blockquote cite img{right:-8rem;position:absolute;top:0;width:4.5rem}.gmb-reviews blockquote cite p{margin:0}.gmb-reviews blockquote cite .wrap{--wrap:wrap}.gmb-reviews blockquote cite .wrap p,.gmb-reviews blockquote cite .wrap time{max-width:49%}.gmb-reviews blockquote cite .wrap .stars{width:100%}.gmb-reviews blockquote time{white-space:nowrap}.gmb-reviews .stars .icon{background-color:var(--action-0)}.gmb-reviews article{background-color:var(--base);border-radius:var(--radius-outer);padding:1rem}.gmb-reviews article header{--align:center}.gmb-reviews article header>img{right:0;position:relative}.gmb-reviews article time{font-style:italic}.gmb-reviews article .review{padding:1.5rem}.gmb-reviews article h4{width:-moz-max-content;width:max-content}.gmb-reviews article .icon{color:var(--action-0)}.gmb-reviews .footer .button{width:100%} |
| | | .gmb-reviews{max-width:none}.gmb-reviews>.row.center{margin:0 auto;max-width:var(--content);--gap:.5rem 6rem}.gmb-reviews>.row.center p{width:-moz-fit-content;width:fit-content}.gmb-reviews .button{display:flex;height:-moz-max-content;height:max-content;margin:0 auto 2rem;width:66.6%}.gmb-reviews .stars{align-items:center;display:inline-flex;flex-wrap:nowrap;justify-content:flex-start}.gmb-reviews ul{list-style:none;margin:0;max-width:var(--full);padding:0}.gmb-reviews ul li{max-width:none;padding:4rem 1rem;width:100%}.gmb-reviews ul li:nth-of-type(odd){background-color:rgb(var(--base-50))}.gmb-reviews ul li:nth-of-type(odd) blockquote{--background:rgb(var(--base-50))}.gmb-reviews ul li:nth-of-type(2n){background-color:rgb(var(--base-100))}.gmb-reviews ul li:nth-of-type(2n) blockquote{--background:rgb(var(--base-100))}.gmb-reviews blockquote{margin:0 auto;max-width:var(--content);padding:0}.gmb-reviews blockquote .content,.gmb-reviews blockquote .content:after{border-width:4px 1px}.gmb-reviews blockquote .content:before{border-width:8px;bottom:-4px}.gmb-reviews blockquote cite{position:relative}.gmb-reviews blockquote cite img{right:-8rem;position:absolute;top:0;width:4.5rem}.gmb-reviews blockquote cite p{margin:0}.gmb-reviews blockquote cite .wrap{--wrap:wrap}.gmb-reviews blockquote cite .wrap p,.gmb-reviews blockquote cite .wrap time{max-width:49%}.gmb-reviews blockquote cite .wrap .stars{width:100%}.gmb-reviews blockquote time{white-space:nowrap}.gmb-reviews .stars .icon{background-color:rgb(var(--action-0))}.gmb-reviews article{background-color:rgb(var(--base));border-radius:var(--radius-outer);padding:1rem}.gmb-reviews article header{--align:center}.gmb-reviews article header>img{right:0;position:relative}.gmb-reviews article time{font-style:italic}.gmb-reviews article .review{padding:1.5rem}.gmb-reviews article h4{width:-moz-max-content;width:max-content}.gmb-reviews article .icon{color:rgb(var(--action-0))}.gmb-reviews .footer .button{width:100%} |
| | |
| | | .gmb-reviews{max-width:none}.gmb-reviews>.row.center{margin:0 auto;max-width:var(--content);--gap:.5rem 6rem}.gmb-reviews>.row.center p{width:-moz-fit-content;width:fit-content}.gmb-reviews .button{display:flex;height:-moz-max-content;height:max-content;margin:0 auto 2rem;width:66.6%}.gmb-reviews .stars{align-items:center;display:inline-flex;flex-wrap:nowrap;justify-content:flex-start}.gmb-reviews ul{list-style:none;margin:0;max-width:var(--full);padding:0}.gmb-reviews ul li{max-width:none;padding:4rem 1rem;width:100%}.gmb-reviews ul li:nth-of-type(odd){background-color:var(--base-50)}.gmb-reviews ul li:nth-of-type(odd) blockquote{--background:var(--base-50)}.gmb-reviews ul li:nth-of-type(2n){background-color:var(--base-100)}.gmb-reviews ul li:nth-of-type(2n) blockquote{--background:var(--base-100)}.gmb-reviews blockquote{margin:0 auto;max-width:var(--content);padding:0}.gmb-reviews blockquote .content,.gmb-reviews blockquote .content:after{border-width:4px 1px}.gmb-reviews blockquote .content:before{border-width:8px;bottom:-4px}.gmb-reviews blockquote cite{position:relative}.gmb-reviews blockquote cite img{left:-8rem;position:absolute;top:0;width:4.5rem}.gmb-reviews blockquote cite p{margin:0}.gmb-reviews blockquote cite .wrap{--wrap:wrap}.gmb-reviews blockquote cite .wrap p,.gmb-reviews blockquote cite .wrap time{max-width:49%}.gmb-reviews blockquote cite .wrap .stars{width:100%}.gmb-reviews blockquote time{white-space:nowrap}.gmb-reviews .stars .icon{background-color:var(--action-0)}.gmb-reviews article{background-color:var(--base);border-radius:var(--radius-outer);padding:1rem}.gmb-reviews article header{--align:center}.gmb-reviews article header>img{left:0;position:relative}.gmb-reviews article time{font-style:italic}.gmb-reviews article .review{padding:1.5rem}.gmb-reviews article h4{width:-moz-max-content;width:max-content}.gmb-reviews article .icon{color:var(--action-0)}.gmb-reviews .footer .button{width:100%} |
| | | .gmb-reviews{max-width:none}.gmb-reviews>.row.center{margin:0 auto;max-width:var(--content);--gap:.5rem 6rem}.gmb-reviews>.row.center p{width:-moz-fit-content;width:fit-content}.gmb-reviews .button{display:flex;height:-moz-max-content;height:max-content;margin:0 auto 2rem;width:66.6%}.gmb-reviews .stars{align-items:center;display:inline-flex;flex-wrap:nowrap;justify-content:flex-start}.gmb-reviews ul{list-style:none;margin:0;max-width:var(--full);padding:0}.gmb-reviews ul li{max-width:none;padding:4rem 1rem;width:100%}.gmb-reviews ul li:nth-of-type(odd){background-color:rgb(var(--base-50))}.gmb-reviews ul li:nth-of-type(odd) blockquote{--background:rgb(var(--base-50))}.gmb-reviews ul li:nth-of-type(2n){background-color:rgb(var(--base-100))}.gmb-reviews ul li:nth-of-type(2n) blockquote{--background:rgb(var(--base-100))}.gmb-reviews blockquote{margin:0 auto;max-width:var(--content);padding:0}.gmb-reviews blockquote .content,.gmb-reviews blockquote .content:after{border-width:4px 1px}.gmb-reviews blockquote .content:before{border-width:8px;bottom:-4px}.gmb-reviews blockquote cite{position:relative}.gmb-reviews blockquote cite img{left:-8rem;position:absolute;top:0;width:4.5rem}.gmb-reviews blockquote cite p{margin:0}.gmb-reviews blockquote cite .wrap{--wrap:wrap}.gmb-reviews blockquote cite .wrap p,.gmb-reviews blockquote cite .wrap time{max-width:49%}.gmb-reviews blockquote cite .wrap .stars{width:100%}.gmb-reviews blockquote time{white-space:nowrap}.gmb-reviews .stars .icon{background-color:rgb(var(--action-0))}.gmb-reviews article{background-color:rgb(var(--base));border-radius:var(--radius-outer);padding:1rem}.gmb-reviews article header{--align:center}.gmb-reviews article header>img{left:0;position:relative}.gmb-reviews article time{font-style:italic}.gmb-reviews article .review{padding:1.5rem}.gmb-reviews article h4{width:-moz-max-content;width:max-content}.gmb-reviews article .icon{color:rgb(var(--action-0))}.gmb-reviews .footer .button{width:100%} |
| | |
| | | main{--gap:0}main section:last-of-type{margin-bottom:0}#at-a-glance{padding:0 10vw;--gap:0}#at-a-glance img{border:2px solid var(--action-0);height:auto;width:100%}#at-a-glance h3{font-size:var(--txt-x-small)}#at-a-glance .before img{border-right:0;border-left-width:1px;border-top:0}#at-a-glance .after img{border-bottom:0;border-right-width:1px;border-left:0}.timeline-point.timeline-point{--lineWidth:1px;--gap:2rem;background-color:var(--base);margin:0;max-width:100vw;overflow:hidden;padding:0;position:relative}.timeline-point.timeline-point img{border-radius:4px;padding:.5rem;position:sticky;width:40%}.timeline-point.timeline-point .info{padding:1rem .5rem .5rem;position:relative;width:60%}.timeline-point.timeline-point .info h2{font-size:var(--txt-medium);margin:0 0 .5rem;position:relative}.timeline-point.timeline-point .info h2 .icon{--w:2.5rem;background-color:var(--action-100);right:-2.5rem;position:absolute;top:.25rem;transform:rotate(90deg)}.timeline-point.timeline-point:after,.timeline-point.timeline-point:before{background-color:var(--action-0);content:"";display:block;height:100%;right:45%;position:absolute;width:var(--lineWidth)}.timeline-point.timeline-point:before{height:1rem}.timeline-point.timeline-point:after{top:4rem}.timeline-point.timeline-point#before-treatment:before,.timeline-point.timeline-point:last-of-type:after{display:none}@media(min-width:768px){#at-a-glance h3{font-size:var(--txt-x-large)}.timeline-point.timeline-point{--gap:4rem}.timeline-point.timeline-point img{width:50%}.timeline-point.timeline-point .info{padding:25vh 1rem 1rem;width:50%}.timeline-point.timeline-point .info h2 .icon{--w:4rem;right:-6.15rem;top:0}.timeline-point.timeline-point .info a{align-items:center;display:flex;flex-wrap:wrap}.timeline-point.timeline-point .info time{font-size:var(--txt-x-small);text-transform:uppercase}.timeline-point.timeline-point:after,.timeline-point.timeline-point:before{right:calc(50% + 2rem)}.timeline-point.timeline-point:before{height:calc(25vh - 2rem)}.timeline-point.timeline-point:after{top:calc(25vh + 6rem)}} |
| | | main{--gap:0}main section:last-of-type{margin-bottom:0}#at-a-glance{padding:0 10vw;--gap:0}#at-a-glance img{border:2px solid rgb(var(--action-0));height:auto;width:100%}#at-a-glance h3{font-size:var(--txt-x-small)}#at-a-glance .before img{border-right:0;border-left-width:1px;border-top:0}#at-a-glance .after img{border-bottom:0;border-right-width:1px;border-left:0}.timeline-point.timeline-point{--lineWidth:1px;--gap:2rem;background-color:rgb(var(--base));margin:0;max-width:100vw;overflow:hidden;padding:0;position:relative}.timeline-point.timeline-point img{border-radius:4px;padding:.5rem;position:sticky;width:40%}.timeline-point.timeline-point .info{padding:1rem .5rem .5rem;position:relative;width:60%}.timeline-point.timeline-point .info h2{font-size:var(--txt-medium);margin:0 0 .5rem;position:relative}.timeline-point.timeline-point .info h2 .icon{--w:2.5rem;background-color:rgb(var(--action-100));right:-2.5rem;position:absolute;top:.25rem;transform:rotate(90deg)}.timeline-point.timeline-point:after,.timeline-point.timeline-point:before{background-color:rgb(var(--action-0));content:"";display:block;height:100%;right:45%;position:absolute;width:var(--lineWidth)}.timeline-point.timeline-point:before{height:1rem}.timeline-point.timeline-point:after{top:4rem}.timeline-point.timeline-point#before-treatment:before,.timeline-point.timeline-point:last-of-type:after{display:none}@media(min-width:768px){#at-a-glance h3{font-size:var(--txt-x-large)}.timeline-point.timeline-point{--gap:4rem}.timeline-point.timeline-point img{width:50%}.timeline-point.timeline-point .info{padding:25vh 1rem 1rem;width:50%}.timeline-point.timeline-point .info h2 .icon{--w:4rem;right:-6.15rem;top:0}.timeline-point.timeline-point .info a{align-items:center;display:flex;flex-wrap:wrap}.timeline-point.timeline-point .info time{font-size:var(--txt-x-small);text-transform:uppercase}.timeline-point.timeline-point:after,.timeline-point.timeline-point:before{right:calc(50% + 2rem)}.timeline-point.timeline-point:before{height:calc(25vh - 2rem)}.timeline-point.timeline-point:after{top:calc(25vh + 6rem)}} |
| | |
| | | main{--gap:0}main section:last-of-type{margin-bottom:0}#at-a-glance{padding:0 10vw;--gap:0}#at-a-glance img{border:2px solid var(--action-0);height:auto;width:100%}#at-a-glance h3{font-size:var(--txt-x-small)}#at-a-glance .before img{border-left:0;border-right-width:1px;border-top:0}#at-a-glance .after img{border-bottom:0;border-left-width:1px;border-right:0}.timeline-point.timeline-point{--lineWidth:1px;--gap:2rem;background-color:var(--base);margin:0;max-width:100vw;overflow:hidden;padding:0;position:relative}.timeline-point.timeline-point img{border-radius:4px;padding:.5rem;position:sticky;width:40%}.timeline-point.timeline-point .info{padding:1rem .5rem .5rem;position:relative;width:60%}.timeline-point.timeline-point .info h2{font-size:var(--txt-medium);margin:0 0 .5rem;position:relative}.timeline-point.timeline-point .info h2 .icon{--w:2.5rem;background-color:var(--action-100);left:-2.5rem;position:absolute;top:.25rem;transform:rotate(-90deg)}.timeline-point.timeline-point:after,.timeline-point.timeline-point:before{background-color:var(--action-0);content:"";display:block;height:100%;left:45%;position:absolute;width:var(--lineWidth)}.timeline-point.timeline-point:before{height:1rem}.timeline-point.timeline-point:after{top:4rem}.timeline-point.timeline-point#before-treatment:before,.timeline-point.timeline-point:last-of-type:after{display:none}@media(min-width:768px){#at-a-glance h3{font-size:var(--txt-x-large)}.timeline-point.timeline-point{--gap:4rem}.timeline-point.timeline-point img{width:50%}.timeline-point.timeline-point .info{padding:25vh 1rem 1rem;width:50%}.timeline-point.timeline-point .info h2 .icon{--w:4rem;left:-6.15rem;top:0}.timeline-point.timeline-point .info a{align-items:center;display:flex;flex-wrap:wrap}.timeline-point.timeline-point .info time{font-size:var(--txt-x-small);text-transform:uppercase}.timeline-point.timeline-point:after,.timeline-point.timeline-point:before{left:calc(50% + 2rem)}.timeline-point.timeline-point:before{height:calc(25vh - 2rem)}.timeline-point.timeline-point:after{top:calc(25vh + 6rem)}} |
| | | main{--gap:0}main section:last-of-type{margin-bottom:0}#at-a-glance{padding:0 10vw;--gap:0}#at-a-glance img{border:2px solid rgb(var(--action-0));height:auto;width:100%}#at-a-glance h3{font-size:var(--txt-x-small)}#at-a-glance .before img{border-left:0;border-right-width:1px;border-top:0}#at-a-glance .after img{border-bottom:0;border-left-width:1px;border-right:0}.timeline-point.timeline-point{--lineWidth:1px;--gap:2rem;background-color:rgb(var(--base));margin:0;max-width:100vw;overflow:hidden;padding:0;position:relative}.timeline-point.timeline-point img{border-radius:4px;padding:.5rem;position:sticky;width:40%}.timeline-point.timeline-point .info{padding:1rem .5rem .5rem;position:relative;width:60%}.timeline-point.timeline-point .info h2{font-size:var(--txt-medium);margin:0 0 .5rem;position:relative}.timeline-point.timeline-point .info h2 .icon{--w:2.5rem;background-color:rgb(var(--action-100));left:-2.5rem;position:absolute;top:.25rem;transform:rotate(-90deg)}.timeline-point.timeline-point:after,.timeline-point.timeline-point:before{background-color:rgb(var(--action-0));content:"";display:block;height:100%;left:45%;position:absolute;width:var(--lineWidth)}.timeline-point.timeline-point:before{height:1rem}.timeline-point.timeline-point:after{top:4rem}.timeline-point.timeline-point#before-treatment:before,.timeline-point.timeline-point:last-of-type:after{display:none}@media(min-width:768px){#at-a-glance h3{font-size:var(--txt-x-large)}.timeline-point.timeline-point{--gap:4rem}.timeline-point.timeline-point img{width:50%}.timeline-point.timeline-point .info{padding:25vh 1rem 1rem;width:50%}.timeline-point.timeline-point .info h2 .icon{--w:4rem;left:-6.15rem;top:0}.timeline-point.timeline-point .info a{align-items:center;display:flex;flex-wrap:wrap}.timeline-point.timeline-point .info time{font-size:var(--txt-x-small);text-transform:uppercase}.timeline-point.timeline-point:after,.timeline-point.timeline-point:before{left:calc(50% + 2rem)}.timeline-point.timeline-point:before{height:calc(25vh - 2rem)}.timeline-point.timeline-point:after{top:calc(25vh + 6rem)}} |
| | |
| | | .video-cover{display:flex;min-height:75vh;overflow:hidden;position:relative;width:100%}.video-cover .wrap{background-color:var(--contrast-200)}.video-cover .video-container{background-color:var(--action-50);bottom:0;display:flex;right:0;min-height:100%;min-width:100%;position:absolute;left:0;top:0;z-index:0}.video-cover .video-container.fade{animation:fadeIn 1s ease-in}.video-cover .video-container video{filter:grayscale(100%) contrast(1);flex:1 0 100%;mix-blend-mode:multiply;-o-object-fit:cover;object-fit:cover;opacity:.85;pointer-events:none}.video-cover .inner-wrap{color:var(--action-contrast);padding:2rem;position:relative;width:100%;z-index:2}.video-cover .inner-wrap h1,.video-cover .inner-wrap h2,.video-cover .inner-wrap h3,.video-cover .inner-wrap h4,.video-cover .inner-wrap h5,.video-cover .inner-wrap h6{color:var(--action-contrast);margin:2rem 0 0;text-shadow:0 2px 4px rgba(0,0,0,.5);word-spacing:100vw}.video-cover .inner-wrap p{color:var(--action-contrast);letter-spacing:2px;margin:0;text-shadow:0 1px 2px rgba(0,0,0,.5);text-transform:uppercase}.video-cover .inner-wrap .media-text figure{max-width:50%}@media(min-width:768px){.video-cover .inner-wrap .media-text{--align:flex-start;gap:3rem;max-width:var(--content)}}.video-cover .inner-wrap .media-text>div{width:-moz-fit-content;width:fit-content}.video-cover .inner-wrap .buttons a{border-color:var(--action-contrast);color:var(--action-contrast);font-weight:var(--fw-h-bold)}.video-cover .inner-wrap .buttons a:visited,.video-cover .inner-wrap .buttons a:visited:hover{color:var(--action-contrast)}.video-cover .inner-wrap .buttons a:hover{background-color:var(--action-0);color:var(--action-contrast)}.video-cover .inner-wrap .outline a{background-color:rgba(var(--base-rgb),rgba(var(--base-rgb),var(--op-3)))}.video-cover .inner-wrap .buttons{margin:3rem 0}.video-cover .inner-wrap .buttons li{background-color:rgba(var(--action-rgb),var(--op-4))}.video-cover .inner-wrap .wp-block-button__link{text-shadow:none}.video-cover.align-top-left{align-items:flex-start;justify-content:flex-start}.video-cover.align-top-center{align-items:flex-start;justify-content:center}.video-cover.align-top-right{align-items:flex-start;justify-content:flex-end}.video-cover.align-center-left{align-items:center;justify-content:flex-start}.video-cover.align-center{align-items:center;justify-content:center}.video-cover.align-center-right{align-items:center;justify-content:flex-end}.video-cover.align-bottom-left{align-items:flex-end;justify-content:flex-start}.video-cover.align-bottom-center{align-items:flex-end;justify-content:center}.video-cover.align-bottom-right{align-items:flex-end;justify-content:flex-end}.video-cover.alignfull{margin-right:calc(50% - 50vw);margin-left:calc(50% - 50vw);max-width:none;width:100vw}.video-cover.alignwide{max-width:1200px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}} |
| | | .video-cover{display:flex;min-height:75vh;overflow:hidden;position:relative;width:100%}.video-cover .wrap{background-color:rgb(var(--contrast-200))}.video-cover .video-container{background-color:rgb(var(--action-50));bottom:0;display:flex;right:0;min-height:100%;min-width:100%;position:absolute;left:0;top:0;z-index:0}.video-cover .video-container.fade{animation:fadeIn 1s ease-in}.video-cover .video-container video{filter:grayscale(100%) contrast(1);flex:1 0 100%;mix-blend-mode:multiply;-o-object-fit:cover;object-fit:cover;opacity:.85;pointer-events:none}.video-cover .inner-wrap{color:var(--action-contrast);padding:2rem;position:relative;width:100%;z-index:2}.video-cover .inner-wrap h1,.video-cover .inner-wrap h2,.video-cover .inner-wrap h3,.video-cover .inner-wrap h4,.video-cover .inner-wrap h5,.video-cover .inner-wrap h6{color:var(--action-contrast);margin:2rem 0 0;text-shadow:0 2px 4px rgba(0,0,0,.5);word-spacing:100vw}.video-cover .inner-wrap p{color:var(--action-contrast);letter-spacing:2px;margin:0;text-shadow:0 1px 2px rgba(0,0,0,.5);text-transform:uppercase}.video-cover .inner-wrap .media-text figure{max-width:50%}@media(min-width:768px){.video-cover .inner-wrap .media-text{--align:flex-start;gap:3rem;max-width:var(--content)}}.video-cover .inner-wrap .media-text>div{width:-moz-fit-content;width:fit-content}.video-cover .inner-wrap .buttons a{border-color:var(--action-contrast);color:var(--action-contrast);font-weight:var(--fw-h-bold)}.video-cover .inner-wrap .buttons a:visited,.video-cover .inner-wrap .buttons a:visited:hover{color:var(--action-contrast)}.video-cover .inner-wrap .buttons a:hover{background-color:rgb(var(--action-0));color:var(--action-contrast)}.video-cover .inner-wrap .outline a{background-color:rgba(var(--base),rgba(var(--base),var(--op-3)))}.video-cover .inner-wrap .buttons{margin:3rem 0}.video-cover .inner-wrap .buttons li{background-color:rgba(var(--action-0),var(--op-4))}.video-cover .inner-wrap .wp-block-button__link{text-shadow:none}.video-cover.align-top-left{align-items:flex-start;justify-content:flex-start}.video-cover.align-top-center{align-items:flex-start;justify-content:center}.video-cover.align-top-right{align-items:flex-start;justify-content:flex-end}.video-cover.align-center-left{align-items:center;justify-content:flex-start}.video-cover.align-center{align-items:center;justify-content:center}.video-cover.align-center-right{align-items:center;justify-content:flex-end}.video-cover.align-bottom-left{align-items:flex-end;justify-content:flex-start}.video-cover.align-bottom-center{align-items:flex-end;justify-content:center}.video-cover.align-bottom-right{align-items:flex-end;justify-content:flex-end}.video-cover.alignfull{margin-right:calc(50% - 50vw);margin-left:calc(50% - 50vw);max-width:none;width:100vw}.video-cover.alignwide{max-width:1200px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}} |
| | |
| | | .video-cover{display:flex;min-height:75vh;overflow:hidden;position:relative;width:100%}.video-cover .wrap{background-color:var(--contrast-200)}.video-cover .video-container{background-color:var(--action-50);bottom:0;display:flex;left:0;min-height:100%;min-width:100%;position:absolute;right:0;top:0;z-index:0}.video-cover .video-container.fade{animation:fadeIn 1s ease-in}.video-cover .video-container video{filter:grayscale(100%) contrast(1);flex:1 0 100%;mix-blend-mode:multiply;-o-object-fit:cover;object-fit:cover;opacity:.85;pointer-events:none}.video-cover .inner-wrap{color:var(--action-contrast);padding:2rem;position:relative;width:100%;z-index:2}.video-cover .inner-wrap h1,.video-cover .inner-wrap h2,.video-cover .inner-wrap h3,.video-cover .inner-wrap h4,.video-cover .inner-wrap h5,.video-cover .inner-wrap h6{color:var(--action-contrast);margin:2rem 0 0;text-shadow:0 2px 4px rgba(0,0,0,.5);word-spacing:100vw}.video-cover .inner-wrap p{color:var(--action-contrast);letter-spacing:2px;margin:0;text-shadow:0 1px 2px rgba(0,0,0,.5);text-transform:uppercase}.video-cover .inner-wrap .media-text figure{max-width:50%}@media(min-width:768px){.video-cover .inner-wrap .media-text{--align:flex-start;gap:3rem;max-width:var(--content)}}.video-cover .inner-wrap .media-text>div{width:-moz-fit-content;width:fit-content}.video-cover .inner-wrap .buttons a{border-color:var(--action-contrast);color:var(--action-contrast);font-weight:var(--fw-h-bold)}.video-cover .inner-wrap .buttons a:visited,.video-cover .inner-wrap .buttons a:visited:hover{color:var(--action-contrast)}.video-cover .inner-wrap .buttons a:hover{background-color:var(--action-0);color:var(--action-contrast)}.video-cover .inner-wrap .outline a{background-color:rgba(var(--base-rgb),rgba(var(--base-rgb),var(--op-3)))}.video-cover .inner-wrap .buttons{margin:3rem 0}.video-cover .inner-wrap .buttons li{background-color:rgba(var(--action-rgb),var(--op-4))}.video-cover .inner-wrap .wp-block-button__link{text-shadow:none}.video-cover.align-top-left{align-items:flex-start;justify-content:flex-start}.video-cover.align-top-center{align-items:flex-start;justify-content:center}.video-cover.align-top-right{align-items:flex-start;justify-content:flex-end}.video-cover.align-center-left{align-items:center;justify-content:flex-start}.video-cover.align-center{align-items:center;justify-content:center}.video-cover.align-center-right{align-items:center;justify-content:flex-end}.video-cover.align-bottom-left{align-items:flex-end;justify-content:flex-start}.video-cover.align-bottom-center{align-items:flex-end;justify-content:center}.video-cover.align-bottom-right{align-items:flex-end;justify-content:flex-end}.video-cover.alignfull{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:none;width:100vw}.video-cover.alignwide{max-width:1200px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}} |
| | | .video-cover{display:flex;min-height:75vh;overflow:hidden;position:relative;width:100%}.video-cover .wrap{background-color:rgb(var(--contrast-200))}.video-cover .video-container{background-color:rgb(var(--action-50));bottom:0;display:flex;left:0;min-height:100%;min-width:100%;position:absolute;right:0;top:0;z-index:0}.video-cover .video-container.fade{animation:fadeIn 1s ease-in}.video-cover .video-container video{filter:grayscale(100%) contrast(1);flex:1 0 100%;mix-blend-mode:multiply;-o-object-fit:cover;object-fit:cover;opacity:.85;pointer-events:none}.video-cover .inner-wrap{color:var(--action-contrast);padding:2rem;position:relative;width:100%;z-index:2}.video-cover .inner-wrap h1,.video-cover .inner-wrap h2,.video-cover .inner-wrap h3,.video-cover .inner-wrap h4,.video-cover .inner-wrap h5,.video-cover .inner-wrap h6{color:var(--action-contrast);margin:2rem 0 0;text-shadow:0 2px 4px rgba(0,0,0,.5);word-spacing:100vw}.video-cover .inner-wrap p{color:var(--action-contrast);letter-spacing:2px;margin:0;text-shadow:0 1px 2px rgba(0,0,0,.5);text-transform:uppercase}.video-cover .inner-wrap .media-text figure{max-width:50%}@media(min-width:768px){.video-cover .inner-wrap .media-text{--align:flex-start;gap:3rem;max-width:var(--content)}}.video-cover .inner-wrap .media-text>div{width:-moz-fit-content;width:fit-content}.video-cover .inner-wrap .buttons a{border-color:var(--action-contrast);color:var(--action-contrast);font-weight:var(--fw-h-bold)}.video-cover .inner-wrap .buttons a:visited,.video-cover .inner-wrap .buttons a:visited:hover{color:var(--action-contrast)}.video-cover .inner-wrap .buttons a:hover{background-color:rgb(var(--action-0));color:var(--action-contrast)}.video-cover .inner-wrap .outline a{background-color:rgba(var(--base),rgba(var(--base),var(--op-3)))}.video-cover .inner-wrap .buttons{margin:3rem 0}.video-cover .inner-wrap .buttons li{background-color:rgba(var(--action-0),var(--op-4))}.video-cover .inner-wrap .wp-block-button__link{text-shadow:none}.video-cover.align-top-left{align-items:flex-start;justify-content:flex-start}.video-cover.align-top-center{align-items:flex-start;justify-content:center}.video-cover.align-top-right{align-items:flex-start;justify-content:flex-end}.video-cover.align-center-left{align-items:center;justify-content:flex-start}.video-cover.align-center{align-items:center;justify-content:center}.video-cover.align-center-right{align-items:center;justify-content:flex-end}.video-cover.align-bottom-left{align-items:flex-end;justify-content:flex-start}.video-cover.align-bottom-center{align-items:flex-end;justify-content:center}.video-cover.align-bottom-right{align-items:flex-end;justify-content:flex-end}.video-cover.alignfull{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:none;width:100vw}.video-cover.alignwide{max-width:1200px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}} |
| | |
| | | |
| | | |
| | | --scrollbar-width: 8px; |
| | | --scrollbar-track-color: var(--base-100); |
| | | --scrollbar-thumb-color: var(--action-0); |
| | | --scrollbar-thumb-hover-color: var(--action-50); |
| | | --scrollbar-thumb-border: 2px solid var(--base-50); |
| | | --scrollbar-track-color: rgb(var(--base-100)); |
| | | --scrollbar-thumb-color: rgb(var(--action-0)); |
| | | --scrollbar-thumb-hover-color: rgb(var(--action-50)); |
| | | --scrollbar-thumb-border: 2px solid rgb(var(--base-50)); |
| | | --scrollbar-border-radius: 4px; |
| | | } |
| | | .item-grid.integrations { |
| | |
| | | use JVBase\managers\Cache; |
| | | use JVBase\managers\LoginManager; |
| | | use JVBase\managers\SEO\BreadcrumbManager; |
| | | use JVBase\managers\SEO\render\Thing\CreativeWork\MediaObject\VideoObject; |
| | | use JVBase\utility\Image; |
| | | use JVBase\utility\Video; |
| | | use WP_Block; |
| | | use WP_Query; |
| | | |
| | |
| | | protected static ?int $currentQueryId = null; |
| | | protected static array $counters = []; |
| | | protected static ?WP_Query $originalQuery = null; |
| | | protected array $ignore = ['align','alt','area','backgroundColor','borderColor','buttonText','buttonPosition','buttonUseIcon','categories','className','columns','contentPosition','customOverlayColor','dimRatio','displayAsDropdown','displayAuthor','displayFeaturedImage','displayPostContent','displayPostContentRadio','displayPostDate','excerptLength','featuredImageAlign','fontSize','gradient','height','iconColor','iconColorValue','iconColorValue','iconBackgroundColor','iconBackgroundColorValue','id','imageFill','isDark','isLink','isSearchFieldHidden','isStackedOnMobile','isUserOverlayColor','kind','label','largestFontSize','layout','level','mediaId','mediaLink','mediaSizeSlug','mediaType','metadata','minHeight','minHeightUnit','opacity','opensInNewTab','order','orderBy','ordered','overlayMenu','placeholder','postLayout','postsToShow','query', 'queryId','ref','rel','shouldSyncIcon','showEmpty','showHierarchy','showLabel','showLabels','showOnlyTopLevel','showPostCounts','showTagCounts','size','sizeSlug','slug','smallestFontSize','tagName','taxonomy','term','textAlign','textColor','theme','title','type','url','useFeaturedImage','width','widthUnit',]; |
| | | protected array $ignore = ['align','alt','area','aspectRatio','backgroundColor','borderColor','buttonText','buttonPosition','buttonUseIcon','categories','className','columns','contentPosition','customOverlayColor','dimRatio','displayAsDropdown','displayAuthor','displayFeaturedImage','displayPostContent','displayPostContentRadio','displayPostDate','excerptLength','featuredImageAlign','fontSize','gradient','hasFixedLayout','hasParallax','height','iconColor','iconColorValue','iconColorValue','iconBackgroundColor','iconBackgroundColorValue','id','imageFill','isDark','isLink','isObjectPosition','isRepeated','isSearchFieldHidden','isStackedOnMobile','isUserOverlayColor','kind','label','largestFontSize','layout','lightbox','linkDestination','linkTo','level','mediaId','mediaLink','mediaPosition','mediaSizeSlug','mediaType','mediaWidth','metadata','minHeight','minHeightUnit','opacity','opensInNewTab','order','orderBy','ordered','overlayColor','overlayMenu','placeholder','postLayout','postsToShow','query', 'queryId','ref','rel','scale','shouldSyncIcon','showContent','showEmpty','showHierarchy','showLabel','showLabels','showOnlyTopLevel','showPostCounts','showTagCounts','size','sizeSlug','slug','smallestFontSize','tagName','taxonomy','term','textAlign','textColor','theme','title','type','url','useFeaturedImage','verticalAlignment','width','widthUnit',]; |
| | | |
| | | //For custom style output for nested links, etc |
| | | protected static array $pendingStyles = []; |
| | | protected static array $pendingClass = []; |
| | | protected static bool $renderGallery = false; |
| | | |
| | | public function __construct() |
| | | { |
| | | $this->cache = Cache::for('blocks', WEEK_IN_SECONDS); |
| | |
| | | } else if (method_exists($this, $method)) { |
| | | $content = $this->$method($block, $content, $parent); |
| | | return $isPrerender ? $this->maybeOutputCustomStyles().$content : $content; |
| | | } elseif (!empty($blockName) && JVB_TESTING) { |
| | | } elseif (JVB_TESTING && !empty($blockName)) { |
| | | if (!in_array($block['blockName'], $this->getIgnore($isPrerender))) { |
| | | jvbDump('No method found for '.print_r($block['blockName'], true)); |
| | | } |
| | |
| | | { |
| | | // jvbDump($block, 'buttons'); |
| | | // jvbDump($parent, 'Parent'); |
| | | return '<ul'.$this->getClassesAndStyles($block['attrs']??[], ['buttons','row']).'>'. |
| | | $this->innerBlocks($block).'</ul>'; |
| | | return sprintf( |
| | | '<ul%s>%s</ul>', |
| | | $this->getClassesAndStyles($block['attrs']??[], ['buttons','row']), |
| | | $this->innerBlocks($block) |
| | | ); |
| | | } |
| | | |
| | | public function prerender_core_column(array $block, ?string $content, ?WP_Block $parent):?string |
| | |
| | | array_key_exists('width', $block['attrs'])) ? |
| | | ['flex-basis:'.$block['attrs']['width']] |
| | | : []; |
| | | return '<div'. |
| | | $this->getClassesAndStyles($block['attrs']??[], ['col'], $styles).'>'. |
| | | $this->innerBlocks($block).'</div>'; |
| | | return sprintf( |
| | | '<div%s>%s</div>', |
| | | $this->getClassesAndStyles($block['attrs']??[], ['col'], $styles), |
| | | $this->innerBlocks($block) |
| | | ); |
| | | } |
| | | |
| | | public function prerender_core_columns(array $block, ?string $content, ?WP_Block $parent):?string |
| | | { |
| | | jvbDump($block, 'columns'); |
| | | // jvbDump($block, 'columns'); |
| | | $attrs = $block['attrs']??[]; |
| | | $tagName = array_key_exists('tagName', $attrs) ? $attrs['tagName'] : 'section'; |
| | | |
| | |
| | | |
| | | // jvbDump($block, 'spsacer'); |
| | | // jvbDump($parent, 'Parent'); |
| | | return '<div'.$this->getClassesAndStyles($block['attrs']??[], ['spacer'], ['height:2rem']). |
| | | ' aria-hidden="true"></div>'; |
| | | return sprintf( |
| | | '<div%s aria-hidden="true"></div>', |
| | | $this->getClassesAndStyles($block['attrs']??[], ['spacer'], ['height:2rem']) |
| | | ); |
| | | } |
| | | //core_table_of_contents |
| | | //core_text_columns |
| | |
| | | * Media Blocks |
| | | */ |
| | | //core_audio |
| | | public function prerender_core_audio(array $block, ?string $content, ?WP_Block $parent):?string |
| | | { |
| | | // jvbDump($block,'audio'); |
| | | $attrs = $block['attrs']??[]; |
| | | $inside = $this->inside($block); |
| | | return sprintf('<figure%s>%s</figure>', |
| | | $this->getClassesAndStyles($attrs), |
| | | $inside |
| | | ); |
| | | } |
| | | public function prerender_core_cover(array $block, ?string $content, ?WP_Block $parent):?string |
| | | { |
| | | // jvbDump($block, 'cover'); |
| | | // jvbDump($parent, 'Parent'); |
| | | // Extract block attributes |
| | | $attrs = $block['attrs'] ?:[]; |
| | | |
| | | $innerContent = $this->innerBlocks($block); |
| | | |
| | | $position = 'object-position: center;'; |
| | | if (array_key_exists('focalPoint', $attrs)) { |
| | | $x = (array_key_exists('x', $attrs['focalPoint'])) ? ($attrs['focalPoint']['x'] * 100).'%' : 'center'; |
| | | $y = (array_key_exists('y', $attrs['focalPoint'])) ? ($attrs['focalPoint']['y'] * 100).'%' : 'center'; |
| | | $position = 'object-position:'.$x.' '.$y.';'; |
| | | unset($attrs['focalPoint']); |
| | | $attrs['isObjectPosition'] = true; |
| | | } |
| | | |
| | | |
| | | // Check for background type |
| | | $backgroundType = $attrs['backgroundType'] ?? 'image'; |
| | | $background = ''; |
| | |
| | | $ID = (int)$attrs['id']; |
| | | } |
| | | |
| | | if ($backgroundType === 'image' && $ID) { |
| | | |
| | | $doImage = true; |
| | | if ($this->checkAttrs('hasParallax', $attrs) || $this->checkAttrs('isRepeated', $attrs)) { |
| | | $doImage = false; |
| | | $attrs['style']['background']['backgroundImage']['id'] = $ID; |
| | | } |
| | | |
| | | if ($doImage && $backgroundType === 'image' && $ID) { |
| | | $background .= str_replace('<img', '<img style="'.$position.'"', $this->image($ID)); |
| | | } elseif ($backgroundType === 'video' && isset($attrs['url'])) { |
| | | $background .= '<video style="'.$position.'"autoplay muted loop playsinline src="' . esc_url($attrs['url']) . '"></video>'; |
| | | } |
| | | |
| | | $overlay = ''; |
| | | if (!isset($attrs['style']['color']['duotone']) && (array_key_exists('overlayColor', $attrs) || array_key_exists('dimRatio', $attrs))) { |
| | | $tmp = []; |
| | | if (array_key_exists('overlayColor', $attrs)) { |
| | | $tmp['overlayColor'] = $attrs['overlayColor']; |
| | | } |
| | | if (array_key_exists('dimRatio', $attrs)) { |
| | | $tmp['dimRatio'] = $attrs['dimRatio']; |
| | | } |
| | | unset($attrs['overlayColor']); |
| | | unset($attrs['dimRatio']); |
| | | $overlay = sprintf( |
| | | '<div class="overlay"%s></div>', |
| | | $this->buildStylesString($tmp) |
| | | ); |
| | | } |
| | | |
| | | // Build classes and styles |
| | | unset($attrs['url']); |
| | | $classes = $this->getClassesAndStyles($attrs, ['cover row']); |
| | | |
| | | |
| | | return '<section' . $classes . '>' . |
| | | $background . |
| | | '<div class="content">' . |
| | | $innerContent . |
| | | '</div></section>'; |
| | | |
| | | return sprintf('<section%s>%s%s<div class="content">%s</div></section>', |
| | | $classes, |
| | | $overlay, |
| | | $background, |
| | | $innerContent |
| | | ); |
| | | } |
| | | |
| | | //core_file |
| | | public function prerender_core_file(array $block, ?string $content, ?WP_Block $parent):?string |
| | | { |
| | | $attrs = $block['attrs']??[]; |
| | | |
| | | $showButton = !array_key_exists('showDownloadButton', $attrs); |
| | | preg_match('/>([^<]*)<\/a>/', $block['innerHTML'], $label); |
| | | $label = $label[1]??''; |
| | | $button = $showButton ? |
| | | sprintf( |
| | | ' <a class="btn chip" href="%s">%s<span>Download</span></a>', |
| | | $attrs['href'], |
| | | jvbIcon('cloud-arrow-down') |
| | | ) : |
| | | ''; |
| | | |
| | | $aOpen = $showButton ? '' : |
| | | sprintf( |
| | | '<a href="%s">', |
| | | $attrs['href'] |
| | | ); |
| | | $aClose = $showButton ? '' : '</a>'; |
| | | return sprintf( |
| | | '<p%s>%s%s%s%s</p>', |
| | | $this->getClassesAndStyles($attrs, ['file']), |
| | | $aOpen, |
| | | $showButton ? $label : 'Download: '.$label, |
| | | $aClose, |
| | | $button |
| | | ); |
| | | } |
| | | |
| | | public function prerender_core_gallery(array $block, ?string $content, ?WP_Block $parent):?string |
| | | { |
| | | // jvbDump($block, 'gallery'); |
| | | $attrs = $block['attrs']??[]; |
| | | // jvbDump($parent, 'Parent'); |
| | | return '<ul'.$this->getClassesAndStyles($block['attrs']??[], ['gallery']).'>'. |
| | | $this->innerBlocks($block,'<li>', '</li>'). |
| | | '</ul>'; |
| | | static::$renderGallery = true; |
| | | return sprintf( |
| | | '<ul%s>%s</ul>', |
| | | $this->getClassesAndStyles($attrs, ['gallery']), |
| | | $this->innerBlocks($block,'<li>', '</li>') |
| | | ); |
| | | } |
| | | |
| | | public function prerender_core_image(array $block, ?string $content, ?WP_Block $parent):?string |
| | |
| | | return ''; |
| | | } |
| | | |
| | | $attrs = $block['attrs']??[]; |
| | | |
| | | static::$renderGallery = true; |
| | | |
| | | $title = (get_the_title($ID) !== '') ? '<b>'.get_the_title($ID).'</b>' : ''; |
| | | $caption = (wp_get_attachment_caption($ID)) ? |
| | | '<figcaption>' . |
| | |
| | | wp_get_attachment_caption($ID) . |
| | | '</figcaption>' : |
| | | '<figcaption>' . $title . '</figcaption>'; |
| | | $size = array_key_exists('sizeSlug', $block['attrs']??[]) ? $block['attrs']['sizeSlug'] : 'large'; |
| | | return '<figure'. |
| | | $this->getClassesAndStyles($block['attrs']??[]).'>'. |
| | | $this->imageLink(true, $ID, 'tiny', $size) . |
| | | $caption.'</figure>'; |
| | | $size = $attrs['sizeSlug'] ?? 'large'; |
| | | $img = $this->imageLink(true, $ID, 'tiny', $size); |
| | | |
| | | $aspectRatio = $attrs['aspectRatio']??false; |
| | | if ($aspectRatio) { |
| | | $img = str_replace('<img', sprintf( |
| | | '<img style="aspect-ratio:%s;"', |
| | | $aspectRatio |
| | | ), $img); |
| | | } |
| | | |
| | | return sprintf( |
| | | '<figure%s>%s%s</figure>', |
| | | $this->getClassesAndStyles($block['attrs']??[]), |
| | | $img, |
| | | $caption, |
| | | ); |
| | | } |
| | | |
| | | public function prerender_core_media_text(array $block, ?string $content, ?WP_Block $parent):?string |
| | |
| | | $classes[] = 'stack-small'; |
| | | } |
| | | |
| | | $figClasses = []; |
| | | if (isset($attrs['mediaWidth'])) { |
| | | $figClasses[] = 'width:'.$attrs['mediaWidth'].'%'; |
| | | } |
| | | if (isset($attrs['imageFill']) && $attrs['imageFill'] === true) { |
| | | $figClasses[] = 'object-fit: cover'; |
| | | } |
| | | if (array_key_exists('focalPoint', $attrs)) { |
| | | $attrs['isObjectPosition'] = true; |
| | | $style = $this->getFocalPointStyle($attrs['focalPoint'], $attrs); |
| | | $style .= ';object-fit:none;'; |
| | | $imgLink = str_replace('<img', sprintf( |
| | | '<img style="%s"', |
| | | $style |
| | | ), $imgLink); |
| | | unset($attrs['focalPoint']); |
| | | } |
| | | |
| | | |
| | | $figClasses = empty($figClasses) ? '' : ' style="'.implode(';',$figClasses).'"'; |
| | | |
| | | |
| | | $inside = array_key_exists('mediaPosition', $attrs) && $attrs['mediaPosition'] === 'right' |
| | | ? sprintf( |
| | | '<div>%s</div><figure>%s</figure>', |
| | | $inner, $imgLink |
| | | '<div>%s</div><figure%s>%s</figure>', |
| | | $inner,$figClasses, $imgLink |
| | | ) : sprintf( |
| | | '<figure>%s</figure><div>%s</div>', |
| | | $imgLink, $inner |
| | | '<figure%s>%s</figure><div>%s</div>', |
| | | $figClasses,$imgLink, $inner |
| | | ); |
| | | |
| | | return sprintf( |
| | |
| | | |
| | | public function prerender_core_video(array $block, ?string $content, ?WP_Block $parent):?string |
| | | { |
| | | jvbDump($block, 'video'); |
| | | // jvbDump($block, 'video'); |
| | | // jvbDump($parent, 'Parent'); |
| | | $ID = $this->imageID('', $block); |
| | | if (!$ID) { |
| | | return ''; |
| | | } |
| | | |
| | | jvbDump($ID); |
| | | $attrs = $block['attrs']??[]; |
| | | // |
| | | // $ID = $attrs['id']??false; |
| | | // if (!$ID) { |
| | | // return ''; |
| | | // } |
| | | // $caption = wp_get_attachment_caption($ID); |
| | | // $title = get_the_title($ID); |
| | | // |
| | | // $figCaption = sprintf( |
| | | // '<figcaption><b>%s</b>%s</figcaption>', |
| | | // $title, |
| | | // $caption |
| | | // ); |
| | | // |
| | | // $video = Video::get($ID); |
| | | |
| | | $title = (get_the_title($ID) !== '') ? '<b>'.get_the_title($ID).'</b>' : ''; |
| | | $caption = (wp_get_attachment_caption($ID)) ? |
| | | '<figcaption>' . |
| | | $title . |
| | | wp_get_attachment_caption($ID) . |
| | | '</figcaption>' : |
| | | '<figcaption>' . $title . '</figcaption>'; |
| | | $size = array_key_exists('sizeSlug', $block['attrs']??[]) ? $block['attrs']['sizeSlug'] : 'large'; |
| | | return '<figure'. |
| | | $this->getClassesAndStyles($block['attrs']??[]).'>'. |
| | | $this->imageLink(true, $ID, 'tiny', $size) . |
| | | $caption.'</figure>'; |
| | | $inside = $this->inside($block); |
| | | return sprintf('<figure%s>%s</figure>', |
| | | $this->getClassesAndStyles($attrs), |
| | | $inside |
| | | ); |
| | | } |
| | | |
| | | /** |
| | |
| | | /** |
| | | * Text Blocks |
| | | */ |
| | | //prerender_core_code |
| | | //prerender_core_details |
| | | public function prerender_core_code(array $block, ?string $content, ?WP_Block $parent):?string |
| | | { |
| | | // jvbDump($block, 'code'); |
| | | $attrs = $block['attrs']??[]; |
| | | $content = $this->inside($block); |
| | | |
| | | return str_replace('<code', sprintf( |
| | | '<code%s', |
| | | $this->getClassesAndStyles($attrs), |
| | | ), $content); |
| | | } |
| | | public function prerender_core_details(array $block, ?string $content, ?WP_Block $parent):?string |
| | | { |
| | | // jvbDump($block, 'details'); |
| | | $attrs = $block['attrs']??[]; |
| | | $isOpen = $this->checkAttrs('showContent', $attrs); |
| | | $summary = $this->extractElement($block['innerHTML'], 'summary'); |
| | | $inside = $this->innerBlocks($block); |
| | | |
| | | return sprintf( |
| | | '<details%s%s><summary>%s</summary>%s</details>', |
| | | $this->getClassesAndStyles($attrs), |
| | | $isOpen ? ' open' : '', |
| | | $summary, |
| | | $inside |
| | | ); |
| | | } |
| | | //prerender_core_footnotes |
| | | // public function prerender_core_footnotes(array $block, ?string $content, ?WP_Block $parent):?string |
| | | // { |
| | | // jvbDump($block, 'footnotes'); |
| | | // |
| | | // return null; |
| | | // } |
| | | //prerender_core_classic |
| | | public function prerender_core_heading(array $block, ?string $content, ?WP_Block $parent):?string |
| | | { |
| | | $level = (array_key_exists('level', $block['attrs']??[])) ? $block['attrs']['level'] : '2'; |
| | | // jvbDump($block, 'heading'); |
| | | $attrs = $block['attrs']??[]; |
| | | $level = $attrs['level'] ?? '2'; |
| | | $content = $this->inside($block); |
| | | $id = sanitize_title(wp_strip_all_tags($this->stripTagContents('small', $content))); |
| | | return '<h'.$level.' id="'.$id.'"'.$this->getClassesAndStyles($block['attrs']??[]).'>'. |
| | | $content. |
| | | '</h'.$level.'>'; |
| | | return sprintf( |
| | | '<h%s id="%s"%s>%s</h%s>', |
| | | $level, |
| | | $id, |
| | | $this->getClassesAndStyles($attrs), |
| | | $content, |
| | | $level, |
| | | ); |
| | | } |
| | | |
| | | public function prerender_core_list(array $block, ?string $content, ?WP_Block $parent):?string |
| | |
| | | // jvbDump($block, 'list'); |
| | | // jvbDump($parent, 'Parent'); |
| | | $tag = (array_key_exists('ordered', $block['attrs']??[])) ? 'ol' : 'ul'; |
| | | $output = '<'.$tag.$this->getClassesAndStyles($block['attrs']??[]).'>'.$this->innerBlocks($block).'</'.$tag.'>'; |
| | | return $output; |
| | | return sprintf( |
| | | '<%s%s>%s</%s>', |
| | | $tag, |
| | | $this->getClassesAndStyles($block['attrs']??[]), |
| | | $this->innerBlocks($block), |
| | | $tag |
| | | ); |
| | | } |
| | | |
| | | // public function prerender_core_list_item(array $block):string |
| | |
| | | $content = $this->stripTagContents('cite', $content); |
| | | } |
| | | |
| | | return '<blockquote'.$this->getClassesAndStyles($block['attrs']??[]).'> |
| | | <div class="content">'.$content.'</div>'. |
| | | $citeHtml. |
| | | '</blockquote>'; |
| | | return sprintf( |
| | | '<blockquote%s>%s%s%s</blockquote>', |
| | | $this->getClassesAndStyles($block['attrs']??[]), |
| | | jvbIcon('quotes',['style' => 'fill']), |
| | | $content, |
| | | $citeHtml |
| | | ); |
| | | } |
| | | public function prerender_core_pullquote(array $block, ?string $content, ?WP_Block $parent):?string |
| | | { |
| | |
| | | } |
| | | $content = jvb_filter_content( $content); |
| | | |
| | | return '<blockquote'.$this->getClassesAndStyles($block['attrs']??[], ['pull']).'>'. |
| | | $content. |
| | | $citeHtml. |
| | | '</blockquote>'; |
| | | return sprintf( |
| | | '<blockquote%s>%s%s</blockquote>', |
| | | $this->getClassesAndStyles($block['attrs']??[], ['pull']), |
| | | $content, |
| | | $citeHtml |
| | | ); |
| | | } |
| | | //prerender_core_table |
| | | //prerender_core_verse |
| | | public function prerender_core_table(array $block, ?string $content, ?WP_Block $parent):?string |
| | | { |
| | | // jvbDump($block, 'table'); |
| | | $attrs = $block['attrs']??[]; |
| | | $figAttrs = [ |
| | | 'align' => $attrs['align']??'' |
| | | ]; |
| | | unset($attrs['align']); |
| | | |
| | | $inside = $this->inside($block); // inside the figure |
| | | $parts = explode('<figcaption', $inside); // inside the table |
| | | $table = $parts[0]; |
| | | $table = str_replace(strtok($table, '>'),sprintf( |
| | | '<table%s', |
| | | $this->getClassesAndStyles($attrs) |
| | | ), $table); |
| | | $caption = str_replace(strtok($parts[1], '>'), '<figcaption', $parts[1]); |
| | | |
| | | return sprintf( |
| | | '<figure%s>%s%s</figure>', |
| | | $this->buildClassesString($figAttrs), |
| | | $table, |
| | | $caption |
| | | ); |
| | | } |
| | | public function prerender_core_preformatted(array $block, ?string $content, ?WP_Block $parent):?string |
| | | { |
| | | // jvbDump($block, 'verse'); |
| | | $attrs = $block['attrs']??[]; |
| | | return sprintf( |
| | | '<pre%s>%s</pre>', |
| | | $this->getClassesAndStyles($attrs), |
| | | $this->inside($block) |
| | | ); |
| | | } |
| | | public function prerender_core_verse(array $block, ?string $content, ?WP_Block $parent):?string |
| | | { |
| | | // jvbDump($block, 'verse'); |
| | | $attrs = $block['attrs']??[]; |
| | | return sprintf( |
| | | '<pre%s>%s</pre>', |
| | | $this->getClassesAndStyles($attrs), |
| | | $this->inside($block) |
| | | ); |
| | | } |
| | | |
| | | /** |
| | | * Theme Blocks |
| | |
| | | $linkOpen = $this->buildNavigationLink($attrs, $aria); |
| | | |
| | | |
| | | return '<li'.$classes.'>'.$linkOpen.$block['attrs']['label'].'</a></li>'; |
| | | return sprintf( |
| | | '<li%s>%s%s</a></li>', |
| | | $classes, |
| | | $linkOpen, |
| | | $block['attrs']['label'] |
| | | ); |
| | | } |
| | | |
| | | public function prerender_core_navigation_submenu(array $block, ?string $content, ?WP_Block $parent):?string |
| | |
| | | break; |
| | | } |
| | | } |
| | | return '<a href="'.$url.'"'.$aria.$rel.$target.$title.'>'; |
| | | return sprintf( |
| | | '<a href="%s"%s%s%s%s>', |
| | | $url, |
| | | $aria, |
| | | $rel, |
| | | $target, |
| | | $title |
| | | ); |
| | | } |
| | | |
| | | /** |
| | |
| | | $result = $this->innerBlocks($block); |
| | | } |
| | | |
| | | if(static::$renderGallery) { |
| | | add_action('wp_footer', 'jvbRenderGallery'); |
| | | } |
| | | |
| | | return apply_filters('jvb_post_content_output', $result, $block); |
| | | } |
| | | //core_post_date |
| | |
| | | global $post; |
| | | $attrs = $block['attrs']??[]; |
| | | $ID = get_post_thumbnail_id($post->ID); |
| | | $aspectRatio = $aOpen = $aClose = ''; |
| | | $aOpen = $aClose = ''; |
| | | if(!is_single($post->ID) && $this->checkAttrs('isLink', $attrs)) { |
| | | $aOpen = '<a href="'.get_the_permalink($post->ID).'">'; |
| | | $aClose = '</a>'; |
| | | } |
| | | if (array_key_exists('aspectRatio', $attrs)) { |
| | | $aspectRatio = $attrs['aspectRatio']; |
| | | } |
| | | |
| | | $img = apply_filters('jvbCoreFeaturedImage', '', $post->post_type, $attrs); |
| | | |
| | | if (empty($img)) { |
| | | $img = $this->image($ID); |
| | | $img = empty($aspectRatio) ? $img : str_replace('<img', '<img style="aspect-ratio:'.$aspectRatio.';"', $img); |
| | | } |
| | | $aspectRatio = $attrs['aspectRatio']??false; |
| | | if ($aspectRatio) { |
| | | $img = str_replace('<img', sprintf( |
| | | '<img style="aspect-ratio:%s;"', |
| | | $aspectRatio |
| | | ), $img); |
| | | } |
| | | |
| | | |
| | |
| | | $inner = ''; |
| | | |
| | | if (!static::$currentLoop) { |
| | | jvbDump('No loop stored'); |
| | | |
| | | if (JVB_TESTING) { |
| | | jvbDump('No loop stored'); |
| | | } |
| | | return $content; |
| | | } |
| | | if (static::$currentLoop->have_posts()) { |
| | |
| | | |
| | | public function prerender_core_query_title(array $block, ?string $content, ?WP_Block $parent):?string |
| | | { |
| | | jvbDump($block, 'query title'); |
| | | // jvbDump($block, 'query title'); |
| | | $attr = $block['attrs']; |
| | | $name = ''; |
| | | $showPrefix = $attr['showPrefix']??false; |
| | |
| | | //core_archives |
| | | public function render_core_archives(array $block, string $content):string |
| | | { |
| | | jvbDump($block, 'archives'); |
| | | // jvbDump($block, 'archives'); |
| | | $attrs = $block['attrs']??[]; |
| | | $isDropdown = $this->checkAttrs('displayAsDropdown', $attrs); |
| | | |
| | |
| | | } |
| | | $inside = []; |
| | | foreach($pages->posts as $page) { |
| | | jvbDump($page); |
| | | $inside[] = sprintf( |
| | | '<li><a href="%s">%s</a>', |
| | | get_the_permalink($page->ID), |
| | |
| | | * @param string $tag The tag name to extract |
| | | * @return string The content of the first matching element, or empty string |
| | | */ |
| | | protected function extractElement(string $html, string $tag): string |
| | | public function extractElement(string $html, string $tag): string |
| | | { |
| | | if (empty($html)) { |
| | | return ''; |
| | |
| | | return $out; |
| | | } |
| | | |
| | | protected function getClassesAndStyles( |
| | | public function getClassesAndStyles( |
| | | array $attrs, |
| | | array $classes = [], |
| | | array $styles = [] |
| | | ):string { |
| | | // Get styles and classes from attributes |
| | | $attr_styles = $this->getInlineStyles($attrs); |
| | | $attr_classes = $this->getClasses($attrs); |
| | | |
| | | if(array_key_exists('slug', $attrs) && $attrs['slug'] === 'footer') { |
| | | $classes[] = 'col'; |
| | | } |
| | | |
| | | |
| | | // Merge with passed classes and styles |
| | | $styles = array_merge($attr_styles, $styles); |
| | | $classes = array_merge($attr_classes, $classes); |
| | | |
| | | if (!empty(static::$pendingClass)) { |
| | | $classes = array_merge($classes, static::$pendingClass); |
| | | static::$pendingClass = []; |
| | | } |
| | | $classes = array_unique($classes); |
| | | $data = $this->getDataset($attrs); |
| | | |
| | | // Build attribute strings |
| | | $class_string = !empty($classes) ? ' class="' . implode(' ', $classes) . '"' : ''; |
| | | $style_string = !empty($styles) ? ' style="' . implode(';', $styles) . '"' : ''; |
| | | $data_string = ''; |
| | | if (!empty($data)) { |
| | | foreach ($data as $d => $v) { |
| | | if ($d === 'bg-small') { |
| | | $data_string .= ' data-bg-img'; |
| | | } |
| | | $data_string .= sprintf( |
| | | ' data-%s="%s"', |
| | | $d, |
| | | $v |
| | | ); |
| | | } |
| | | } |
| | | |
| | | $return = trim($class_string . $style_string . $data_string); |
| | | $return = trim($this->buildClassesString($attrs, $classes) . $this->buildStylesString($attrs,$styles) . $this->buildDataset($attrs)); |
| | | return ($return=='')? '' : ' '.$return; |
| | | } |
| | | protected function buildStylesString(array $attrs, array $custom = []):string |
| | | { |
| | | $attr_styles = $this->getInlineStyles($attrs); |
| | | $styles = array_merge($attr_styles, $custom); |
| | | |
| | | $styles = array_map(function ($property, $value) { |
| | | return sprintf('%s:%s', $property, $value); |
| | | }, array_keys($styles), $styles); |
| | | |
| | | return !empty($styles) ? ' style="' . implode(';', $styles) . '"' : ''; |
| | | } |
| | | |
| | | protected function buildClassesString(array $attrs, array $custom = []):string |
| | | { |
| | | $attr_classes = $this->getClasses($attrs); |
| | | if(array_key_exists('slug', $attrs) && $attrs['slug'] === 'footer') { |
| | | $attr_classes[] = 'col'; |
| | | } |
| | | |
| | | // Merge with passed classes and styles |
| | | $classes = array_merge($attr_classes, $custom); |
| | | |
| | | if (!empty(static::$pendingClass)) { |
| | | $classes = array_merge($classes, static::$pendingClass); |
| | | static::$pendingClass = []; |
| | | } |
| | | $classes = array_unique($classes); |
| | | |
| | | // Build attribute strings |
| | | return !empty($classes) ? ' class="' . implode(' ', $classes) . '"' : ''; |
| | | } |
| | | |
| | | protected function buildDataset(array $attrs):string |
| | | { |
| | | $data = $this->getDataset($attrs); |
| | | $data_string = ''; |
| | | if (!empty($data)) { |
| | | foreach ($data as $d => $v) { |
| | | if ($d === 'bg-small') { |
| | | $data_string .= ' data-bg-img'; |
| | | } |
| | | $data_string .= sprintf( |
| | | ' data-%s="%s"', |
| | | $d, |
| | | $v |
| | | ); |
| | | } |
| | | } |
| | | return $data_string; |
| | | } |
| | | /** |
| | | * @param string $spacing |
| | | * |
| | |
| | | return match ($value) { |
| | | 'is-style-floating' => 'always mobile fixed', |
| | | 'is-style-fixed' => 'fixed bottom', |
| | | 'is-style-default' => '', |
| | | default => str_replace('is-style-', '', $value), |
| | | }; |
| | | case 'contentPosition': |
| | |
| | | case 'width': |
| | | return $this->getWidth($value); |
| | | case 'dimRatio': |
| | | return $this->getDimRatio($value); |
| | | return $this->getDimRatio($value, $attrs); |
| | | case 'overlayColor': |
| | | return $value; |
| | | break; |
| | |
| | | |
| | | //Media |
| | | case 'hasParallax': |
| | | return $value === true ? 'bg-parallax' : ''; |
| | | return $value === true ? 'bg-fixed' : ''; |
| | | case 'isRepeated': |
| | | return $value === true ? 'bg-repeat' : ''; |
| | | |
| | |
| | | |
| | | private function getWidth(string $value):string |
| | | { |
| | | $value = (int)str_replace('%', '', $value); |
| | | |
| | | $value = str_replace('%', '', $value); |
| | | |
| | | if (str_contains($value, 'px') || |
| | | str_contains($value, 'em') || |
| | | str_contains($value, 'rem') || |
| | | str_contains($value, 'vw') || |
| | | str_contains($value, 'vh')) { |
| | | return ''; |
| | | } |
| | | |
| | | return sprintf( |
| | | 'width-%d', |
| | | match (true) { |
| | |
| | | } |
| | | ); |
| | | } |
| | | private function getDimRatio(string $value):string |
| | | private function getDimRatio(string $value, array $attrs):string |
| | | { |
| | | if (array_key_exists('overlayColor', $attrs)) { |
| | | return ''; |
| | | } |
| | | if (is_numeric($value)) { |
| | | return sprintf( |
| | | 'op-%d', |
| | |
| | | if (array_key_exists('duotone', $value['color'])) { |
| | | $preset = explode('|', $value['color']['duotone']); |
| | | $preset = $preset[array_key_last($preset)]; |
| | | $preset = $this->getColor($preset, false); |
| | | |
| | | if (str_contains($preset, '-')) { |
| | | $preset = explode('-', $preset); |
| | | } else { |
| | |
| | | $styles = []; |
| | | foreach ($attrs as $key => $value) { |
| | | $style = $this->getStyle($key, $value, $attrs); |
| | | if (is_string($style)) { |
| | | $style = [$style]; |
| | | } |
| | | |
| | | $styles = array_merge($styles, $style); |
| | | $styles = array_unique($styles); |
| | | } |
| | | return $styles; |
| | | } |
| | |
| | | // Background URL (for cover, media blocks) |
| | | case 'url': |
| | | if (!empty($value) && str_starts_with($value, 'http')) { |
| | | return 'background-image: url('.$value.')'; |
| | | return ['background-image' => 'url('.$value.')']; |
| | | } |
| | | break; |
| | | |
| | | // Focal point for background images |
| | | case 'focalPoint': |
| | | return $this->getFocalPointStyle($value); |
| | | return $this->getFocalPointStyle($value, $attrs); |
| | | |
| | | // Complex style object |
| | | case 'style': |
| | |
| | | if ($value === 'video' && isset($attrs['backgroundUrl'])) { |
| | | // Don't set a background image for videos - it will be handled by the video element |
| | | } elseif (isset($attrs['backgroundUrl'])) { |
| | | return 'background-image: url('.$attrs['backgroundUrl'].')'; |
| | | return ['background-image' => 'url('.$attrs['backgroundUrl'].')']; |
| | | } |
| | | break; |
| | | |
| | | case 'width': |
| | | if (str_contains($value, 'px') || |
| | | str_contains($value, 'em') || |
| | | str_contains($value, 'rem') || |
| | | str_contains($value, 'vw') || |
| | | str_contains($value, 'vh')) { |
| | | return ['width' => $value]; |
| | | } |
| | | break; |
| | | |
| | | case 'backgroundColor': |
| | | case 'borderColor': |
| | | case 'textColor': |
| | | $type = str_replace('Color', '-color', $key); |
| | | $type = str_replace('text-', '', $type); |
| | | if (isset($attrs['border']['width']) && $key === 'borderColor') { |
| | | if ($key === 'borderColor' && isset($attrs['border']['width'])) { |
| | | break; |
| | | } |
| | | return $this->getColorStyle($value, $type); |
| | |
| | | foreach ($values as $v) { |
| | | switch ($value) { |
| | | case 'has-small-icon-size': |
| | | $styles[] = '--w:var(--txt-x-small)'; |
| | | $styles['--w'] = 'var(--txt-x-small)'; |
| | | break; |
| | | case 'has-large-icon-size': |
| | | $styles[] = '--w:var(--txt-large)'; |
| | | $styles['--w'] = 'var(--txt-large)'; |
| | | break; |
| | | case 'has-huge-icon-size': |
| | | $styles[] = '--w:var(--txt-xx-large)'; |
| | | $styles['--w'] = 'var(--txt-xx-large)'; |
| | | break; |
| | | default: |
| | | if (JVB_TESTING) { |
| | |
| | | } |
| | | return $styles; |
| | | } |
| | | private function getFontFamilyStyle(string $value):string |
| | | private function getFontFamilyStyle(string $value):array |
| | | { |
| | | return match($value) { |
| | | 'body' => 'font-family: var(--body)', |
| | | 'heading' => 'font-family: var(--heading)', |
| | | default => sprintf('font-family: %s', $value) |
| | | 'body' => ['font-family' => 'var(--body)'], |
| | | 'heading' => ['font-family' => 'var(--heading)'], |
| | | default => ['font-family' => $value] |
| | | }; |
| | | } |
| | | private function getColorStyle(string $value, ?string $type = 'color'):string |
| | | private function getColorStyle(string $value, ?string $type = 'color'):array |
| | | { |
| | | if (!in_array($type, ['color', 'background','background-color','border-color'])) { |
| | | $type = null; |
| | | } |
| | | return sprintf( |
| | | '%s%s', |
| | | $type ? $type.': ' : '', |
| | | $this->getColor($value) |
| | | ); |
| | | if (!$type) { |
| | | return []; |
| | | } |
| | | return [ |
| | | $type => $this->getColor($value) |
| | | ]; |
| | | } |
| | | private function getMinHeightStyle(string $value, array $attrs):string |
| | | private function getMinHeightStyle(string $value, array $attrs):array |
| | | { |
| | | $out = ''; |
| | | $out = []; |
| | | if (!empty($value)) { |
| | | if (isset($attrs['minHeightUnit'])) { |
| | | $out = sprintf( |
| | | 'min-height: %s%s', |
| | | $value, |
| | | $attrs['minHeightUnit'] |
| | | ); |
| | | $out['min-height'] = sprintf('%s%s', $value, $attrs['minHeightUnit']); |
| | | |
| | | } else { |
| | | $out = sprintf( |
| | | 'min-height: %spx', |
| | | $out['min-height'] = sprintf( |
| | | '%spx', |
| | | $value |
| | | ); |
| | | } |
| | |
| | | return $out; |
| | | } |
| | | |
| | | private function getFocalPointStyle(array $value):string |
| | | private function getFocalPointStyle(array $value, array $attrs):array |
| | | { |
| | | jvbDump($value, 'Focal Point'); |
| | | $x = array_key_exists('x', $value) ? $value['x'] * 100 : 'center'; |
| | | $y = array_key_exists('y', $value) ? $value['y'] * 100 : 'center'; |
| | | $x = array_key_exists('x', $value) ? ($value['x'] * 100).'%' : 'center'; |
| | | $y = array_key_exists('y', $value) ? ($value['y'] * 100).'%' : 'center'; |
| | | |
| | | $y = $x === $y ? '' : ' '.$y; |
| | | return sprintf( |
| | | 'background-position:%s%s', |
| | | |
| | | $key = array_key_exists('isObjectPosition', $attrs) ? 'object-position' : 'background-position'; |
| | | return [ |
| | | $key => sprintf( |
| | | '%s%s', |
| | | $x, |
| | | $y |
| | | ); |
| | | )]; |
| | | } |
| | | |
| | | private function extractStyles(array $value, array $attrs):array |
| | |
| | | |
| | | case 'color': |
| | | if (isset($v['background'])) { |
| | | $styles[] = $this->getColorStyle($v['background'], 'background-color'); |
| | | $styles['background-color'] = $this->getColor($v['background']); |
| | | } |
| | | if (isset($v['text'])) { |
| | | $styles[] = $this->getColorStyle($v['text']); |
| | | $styles['color'] = $this->getColor($v['text']); |
| | | } |
| | | if (isset($v['gradient'])) { |
| | | jvbDump($v, 'Gradient'); |
| | | |
| | | if (JVB_TESTING) { |
| | | jvbDump($v, 'Gradient'); |
| | | } |
| | | } |
| | | break; |
| | | |
| | |
| | | ); |
| | | } |
| | | if (!empty($inner)) { |
| | | $styles[] = sprintf( |
| | | '--gap: %s', |
| | | $styles['--gap'] = sprintf( |
| | | '%s', |
| | | implode(' ', $inner) |
| | | ); |
| | | } |
| | | } else { |
| | | $styles[] = '--gap: var(--sp'.$this->getPresetSpacing($v['blockGap']).')'; |
| | | $styles['--gap'] = 'var(--sp'.$this->getPresetSpacing($v['blockGap']).')'; |
| | | } |
| | | } |
| | | |
| | |
| | | if (isset($v['margin'])) { |
| | | foreach ($v['margin'] as $direction => $size) { |
| | | if (!str_contains($size, 'var:preset')) { |
| | | $styles[] = 'margin-'.$direction.': '.$size; |
| | | $styles['margin-'.$direction] = $size; |
| | | } |
| | | } |
| | | } |
| | |
| | | if (isset($v['padding'])) { |
| | | foreach($v['padding'] as $dir => $size) { |
| | | if (!str_contains($size, 'var:preset')) { |
| | | $styles[] = 'padding-'.$dir.': '.$size; |
| | | $styles['padding-'.$dir] = $size; |
| | | } |
| | | } |
| | | } |
| | |
| | | if (array_key_exists('backgroundImage', $v)) { |
| | | $data = Image::getData($v['backgroundImage']['id']); |
| | | if (!empty($data) && array_key_exists('tiny', $data)) { |
| | | $styles[] = sprintf( |
| | | 'background-image: url(%s)', |
| | | $styles['background-image'] = sprintf( |
| | | 'url(%s)', |
| | | $data['tiny'] |
| | | ); |
| | | } |
| | |
| | | case 'dimensions': |
| | | foreach ($v as $sk => $sv) { |
| | | if ($sk === 'minHeight') { |
| | | $styles[] = sprintf( |
| | | 'min-height: %s', |
| | | $sv |
| | | ); |
| | | $styles['min-height'] = $sv; |
| | | } else { |
| | | jvbDump('No config set for dimension '.$sk.': '.print_r($sv, true)); |
| | | if (JVB_TESTING) { |
| | | jvbDump('No config set for dimension '.$sk.': '.print_r($sv, true)); |
| | | } |
| | | } |
| | | } |
| | | |
| | |
| | | break; |
| | | |
| | | default: |
| | | jvbDump('No config set for '.$k.': '.print_r($v, true)); |
| | | if (JVB_TESTING) { |
| | | jvbDump($v,'No config set for '.$k.': '); |
| | | } |
| | | |
| | | } |
| | | } |
| | | |
| | |
| | | $styles = []; |
| | | |
| | | if (isset($border['radius'])) { |
| | | $styles[] = 'border-radius: '.$border['radius']; |
| | | $styles['border-radius'] = $border['radius']; |
| | | } |
| | | |
| | | if (isset($border['width']) && isset($attrs['borderColor'])) { |
| | | if (isset($border['width']) && (isset($attrs['borderColor']) || isset($border['color']))) { |
| | | $st = $border['style'] ?? 'solid'; |
| | | $styles[] = sprintf( |
| | | 'border: %s %s %s', |
| | | $color = $border['color']??$attrs['borderColor']; |
| | | $styles['border'] = sprintf( |
| | | '%s %s %s', |
| | | $border['width'], |
| | | $st, |
| | | $this->getColor($attrs['borderColor']) |
| | | $this->getColor($color) |
| | | ); |
| | | } elseif (isset($border['width'])) { |
| | | $styles[] = 'border-width: '.$border['width']; |
| | | } elseif (isset($border['style'])) { |
| | | $styles[] = 'border-style: '.$border['style']; |
| | | } else { |
| | | if (isset($border['color'])) { |
| | | $styles['border-color'] = $border['color']; |
| | | } |
| | | if (isset($border['width'])) { |
| | | $styles['border-width'] = $border['width']; |
| | | } |
| | | if (isset($border['style'])) { |
| | | $styles['border-style'] = $border['style']; |
| | | } |
| | | } |
| | | if (JVB_TESTING) { |
| | | unset($border['radius']); |
| | | unset($border['width']); |
| | | unset($border['style']); |
| | | unset($border['color']); |
| | | if (!empty($border)) { |
| | | jvbDump($border, '[getBorderStyle] Leftover styles:'); |
| | | } |
| | | } |
| | | |
| | | return $styles; |
| | |
| | | switch ($l) { |
| | | case 'selfStretch': |
| | | if ($option === 'fixed' && isset($layout['selfStretchValue'])) { |
| | | $styles[] = 'width: '.$layout['selfStretchValue']; |
| | | $styles['width'] = $layout['selfStretchValue']; |
| | | } elseif ($option === 'fill') { |
| | | $styles[] = 'flex:1'; |
| | | $styles['flex'] = 1; |
| | | } |
| | | break; |
| | | default: |
| | |
| | | private function getTypographyStyle(array $typography, array $attrs):array |
| | | { |
| | | $styles = []; |
| | | |
| | | if (isset($typography['fontSize'])) { |
| | | $styles[] = 'font-size: '.$typography['fontSize']; |
| | | foreach ($typography as $property => $value) { |
| | | switch ($property) { |
| | | case 'fontSize': |
| | | $styles['font-size'] = $value; |
| | | break; |
| | | case 'fontWeight': |
| | | $styles['font-weight'] = $value; |
| | | break; |
| | | case 'textDecoration': |
| | | $styles['text-decoration'] = $value; |
| | | break; |
| | | case 'textTransform': |
| | | $styles['text-transform'] = $value; |
| | | break; |
| | | case 'letterSpacing': |
| | | $styles['letter-spacing'] = $value; |
| | | break; |
| | | case 'lineHeight': |
| | | $styles['line-height'] = $value; |
| | | break; |
| | | case 'fontStyle': |
| | | $styles['font-style'] = $value; |
| | | break; |
| | | case 'writingMode': |
| | | $styles['writing-mode'] = $value; |
| | | break; |
| | | case 'textAlign': |
| | | $styles['text-align'] = $value; |
| | | default: |
| | | if (JVB_TESTING) { |
| | | jvbDump($value,'[getTypographyStyle] No property set for '.$property.': '); |
| | | } |
| | | } |
| | | } |
| | | |
| | | if (isset($typography['fontWeight'])) { |
| | | $styles[] = 'font-weight: '.$typography['fontWeight']; |
| | | } |
| | | |
| | | if (isset($typography['textDecoration'])) { |
| | | $styles[] = 'text-decoration: '.$typography['textDecoration']; |
| | | } |
| | | |
| | | if (isset($typography['textTransform'])) { |
| | | $styles[] = 'text-transform: '.$typography['textTransform']; |
| | | } |
| | | |
| | | if (isset($typography['letterSpacing'])) { |
| | | $styles[] = 'letter-spacing: '.$typography['letterSpacing']; |
| | | } |
| | | |
| | | if (isset($typography['lineHeight'])) { |
| | | $styles[] = 'line-height: '.$typography['lineHeight']; |
| | | } |
| | | return $styles; |
| | | } |
| | | private function extractElementStyles(array $elements, string $uid):void |
| | |
| | | default => $element, |
| | | }; |
| | | |
| | | $selectors = explode(',',$selector); |
| | | foreach ($states as $state => $rules) { |
| | | $css = []; |
| | | $fullSelector = str_starts_with($state, ':') |
| | | ? ".{$uid} {$selector}{$state}" |
| | | : ".{$uid} {$selector}"; |
| | | |
| | | if (isset($rules['color']['text'])) { |
| | | $css[] = 'color: '.$this->getColor($rules['color']['text']); |
| | | $fullSelector = array_map(function($sel) use ($uid, $state) { |
| | | return str_starts_with($state, ':') |
| | | ? ".{$uid} {$sel}{$state}" |
| | | : ".{$uid} {$sel}"; |
| | | }, $selectors); |
| | | $fullSelector = implode(',', $fullSelector); |
| | | |
| | | |
| | | if (JVB_TESTING) { |
| | | jvbDump($state, 'state'); |
| | | jvbDump($rules, 'rules'); |
| | | } |
| | | if (isset($rules['color']['background'])) { |
| | | $css[] = 'background-color: '.$this->getColor($rules['color']['background']); |
| | | |
| | | if (isset($rules['color']['text']) || isset($rules['text'])) { |
| | | $css['color'] = $this->getColor($rules['color']['text'] ?? $rules['text']); |
| | | } |
| | | if (isset($rules['color']['background']) || isset($rules['background'])) { |
| | | $css['background-color'] = $this->getColor($rules['color']['background']??$rules['background']); |
| | | } |
| | | //clean out possible empty values |
| | | $css = array_filter($css); |
| | | |
| | | $css = array_map(function ($property, $value) { |
| | | return $property.': '.$value; |
| | | }, array_keys($css), $css); |
| | | |
| | | if (!empty($css)) { |
| | | static::$pendingStyles[] = $fullSelector.' { '.implode('; ', $css).' }'; |
| | | } |
| | |
| | | return $out; |
| | | } |
| | | |
| | | private function getDimRatioStyle(int $value, array $attrs):string |
| | | private function getDimRatioStyle(int $value, array $attrs):array |
| | | { |
| | | //TODO: This likely isn't working correctly |
| | | jvbDump($value, 'dimRatio'); |
| | | jvbDump($attrs, 'dimRatio attrs'); |
| | | $s = ''; |
| | | if (!array_key_exists('overlayColor', $attrs)) { |
| | | $s = 'background-color: rgba(var(--base-rgb), '; |
| | | if ($value <= 14) { |
| | | $s .= 'var(--op-1));'; |
| | | } elseif ($value <= 28) { |
| | | $s .= 'var(--op-2));'; |
| | | } elseif ($value <= 42) { |
| | | $s .= 'var(--op-3));'; |
| | | } elseif ($value <= 56) { |
| | | $s .= 'var(--op-45));'; |
| | | } elseif ($value <= 70) { |
| | | $s .= 'var(--op-4));'; |
| | | } elseif ($value <= 84) { |
| | | $s .= 'var(--op-5));'; |
| | | } else { |
| | | $s .= 'var(--op-6));'; |
| | | } |
| | | // jvbDump($value, 'dimRatio'); |
| | | // jvbDump($attrs, 'dimRatio attrs'); |
| | | $ratio = []; |
| | | |
| | | $s = array_key_exists('overlayColor', $attrs) ? 'var(--'.$attrs['overlayColor'].')' : 'var(--base)'; |
| | | $s = 'rgba('.$s.', '; |
| | | if ($value <= 14) { |
| | | $s .= 'var(--op-1))'; |
| | | } elseif ($value <= 28) { |
| | | $s .= 'var(--op-2))'; |
| | | } elseif ($value <= 42) { |
| | | $s .= 'var(--op-3))'; |
| | | } elseif ($value <= 56) { |
| | | $s .= 'var(--op-45))'; |
| | | } elseif ($value <= 70) { |
| | | $s .= 'var(--op-4))'; |
| | | } elseif ($value <= 84) { |
| | | $s .= 'var(--op-5))'; |
| | | } else { |
| | | $s .= 'var(--op-6))'; |
| | | } |
| | | return $s; |
| | | |
| | | return ['background-color' => $s]; |
| | | } |
| | | |
| | | protected function getDataset(array $attrs):array |
| | |
| | | return array_key_exists($test, $attrs) && $attrs[$test]===true; |
| | | } |
| | | |
| | | protected function getColor(string $value):string |
| | | protected function getColor(string $value, bool $prefix = true):string |
| | | { |
| | | $defaults = apply_filters('jvbColours', ['base', 'contrast', 'action', 'secondary']); |
| | | foreach ($defaults as $default) { |
| | | if (str_starts_with($value, $default)) { |
| | | return 'var(--'.$value.')'; |
| | | return $prefix ? 'var(--'.$value.')' : $value; |
| | | } |
| | | } |
| | | //We removed the presets |
| | | if (str_contains($value, 'var:preset')) { |
| | | return ''; |
| | | } |
| | | return $value; |
| | | } |
| | | |
| | |
| | | <?php |
| | | namespace JVBase\blocks; |
| | | |
| | | use JVBase\managers\SEO\render\Thing\CreativeWork\MediaObject\VideoObject; |
| | | |
| | | if (!defined('ABSPATH')) { |
| | | exit; |
| | | } |
| | |
| | | // Build video tag |
| | | $classes = trim("video-cover {$fade_class} {$css_class}"); |
| | | |
| | | $html = '<section class="'.esc_attr($classes).'"> |
| | | <script type="application/ld+json"> |
| | | { |
| | | "@context": "https://schema.org/", |
| | | "@type": "VideoObject", |
| | | "name": "'.$title.'", |
| | | "thumbnailUrl": "'.$poster_url.'", |
| | | "contentUrl": "'.$video_sources[0]['url'].'", |
| | | "description": "'.$description.'", |
| | | "uploadDate": "'.$date.'" |
| | | } |
| | | </script> |
| | | <div class="wrap abs edges"> |
| | | <div class="video-container">'; |
| | | $html .= '<video'; |
| | | $html .= ' muted loop playsinline autoplay'; |
| | | $video = new VideoObject(); |
| | | $video->setName($title); |
| | | $video->setThumbnailUrl($poster_url); |
| | | $video->setContentUrl($video_sources[0]['url']); |
| | | $video->setDescription($description); |
| | | $video->setUploadDate($date); |
| | | |
| | | if ($poster_url) { |
| | | $html .= ' poster="' . esc_url($poster_url) . '"'; |
| | | } |
| | | $html = sprintf( |
| | | '<section class="%s"> |
| | | <script type="application/ld+json">%s</script> |
| | | <div class="wrap abs edges"> |
| | | <div class="video-container">', |
| | | esc_attr($classes), |
| | | json_encode($video->outputSchema()) |
| | | ); |
| | | |
| | | $poster = $poster_url ? sprintf( |
| | | ' poster="%s"', |
| | | esc_url($poster_url) |
| | | ) : ''; |
| | | |
| | | $html .= sprintf( |
| | | '<video muted loop playsinline autoplay%s fetch-priority="high">', |
| | | $poster |
| | | ); |
| | | |
| | | |
| | | $html .= ' fetch-priority="high">'; |
| | | |
| | | foreach ($video_sources as $source) { |
| | | if (!empty($source['url']) && !empty($source['mime'])) { |
| | | $html .= '<source'; |
| | | $html .= ' data-src="' . esc_url($source['url']) . '"'; |
| | | $html .= ' type="' . esc_attr($source['mime']) . '"'; |
| | | $html .= '>'; |
| | | $html .= sprintf( |
| | | '<source data-src="%s" type="%s">', |
| | | esc_url($source['url']), |
| | | esc_attr($source['mime']) |
| | | ); |
| | | } |
| | | } |
| | | |
| | | $html .= '</video>'; |
| | | |
| | | $inner_content = $this->extractInnerContent($content); |
| | | $html .= '</div></div><div class="inner-wrap">'.$inner_content.'</div></section>'; |
| | | $html .= sprintf( |
| | | '</div></div><div class="inner-wrap">%s</div></section>', |
| | | $inner_content |
| | | ); |
| | | |
| | | return $html; |
| | | } |
| | |
| | | <dialog class="gallery" aria-modal="true" aria-label="Image Gallery"> |
| | | |
| | | <div class="wrap col"> |
| | | <p class="hint">Pinch to Zoom</p> |
| | | <div class="controls row"> |
| | | <button type="button" class="cancel" title="Close Gallery" aria-label="Close Gallery"> <?= jvbIcon('x') ?></button> |
| | | <button class="nav prev" title="Previous image" aria-label="Previous image"> |
| | |
| | | |
| | | $registrar = Registrar::getInstance($name); |
| | | |
| | | if($registrar && $registrar->hasFeature('show_directory')) { |
| | | if($registrar && $registrar->hasFeature('show_directory') && JVB()->directories()) { |
| | | $directory = JVB()->directories(); |
| | | if ($directory && !empty($directory->directories($name)??[])){ |
| | | $crumbs[] = [ |
| | |
| | | ]; |
| | | } |
| | | } elseif (Site::has('is_directory') && $name === 'directory') { |
| | | |
| | | $crumbs[] = [ |
| | | 'name' => JVB()->directories()->referAs(true), |
| | | 'url' => get_post_type_archive_link($type) |
| | |
| | | $schema[] = $seo->schema()->outputSingularSchema(); |
| | | } |
| | | }elseif (is_post_type_archive($this->types)) { |
| | | error_log('It is a post type archive'); |
| | | |
| | | $type = get_queried_object(); |
| | | $type = $type->name; |
| | | $registrar = Registrar::getInstance($type); |
| | |
| | | return intval(get_option(BASE.$item.'_archive', false)); |
| | | },Registrar::getFeatured('is_content', 'term')))); |
| | | |
| | | if (is_page($isContent)){ |
| | | if (!empty($isContent) && is_page($isContent)){ |
| | | $type = get_post_meta(get_the_id(), BASE.'for_type', true); |
| | | error_log('Type: '.print_r($type, true)); |
| | | // error_log('Type: '.print_r($type, true)); |
| | | if (!empty($type)) { |
| | | $registrar = Registrar::getInstance($type); |
| | | if ($registrar) { |
| | |
| | | |
| | | class Duration extends Thing |
| | | { |
| | | public function __construct(string $duration) |
| | | { |
| | | $this->duration = date('c', $duration); |
| | | } |
| | | |
| | | /** |
| | | * @var string Duration (use ISO 8601 duration format). |
| | | */ |
| | |
| | | $value = $value->getTime(); |
| | | }else if (!is_string($value)) { |
| | | if (JVB_TESTING && !is_numeric($value)) { |
| | | error_log('Normal value? '.print_r($value, true)); |
| | | // error_log('Normal value? '.print_r($value, true)); |
| | | } |
| | | } |
| | | |
| | |
| | | { |
| | | return $this->duration??null; |
| | | } |
| | | public function setDuration(Duration $duration):void |
| | | public function setDuration(Duration|string $duration):void |
| | | { |
| | | if (is_string($duration)) { |
| | | $duration = new Duration($duration); |
| | | } |
| | | $this->duration = $duration; |
| | | } |
| | | } |
| | |
| | | |
| | | public function filterTitle(string $title, ?array $args): string |
| | | { |
| | | error_log('Filtering title...'); |
| | | if (jvbTSFDoIt($this->slug, $args)){ |
| | | return $title; |
| | | } |
| | | $ID = jvbTSFGetID($args); |
| | | |
| | | |
| | | $meta = new \JVBase\meta\Meta($ID, Registrar::getInstance($this->slug)->getType()); |
| | | return Resolver::resolve($this->title, $meta); |
| | | } |
| | |
| | | switch ($variable) { |
| | | case 'CREATOR': |
| | | return JVB()->seo()->getCreator(); |
| | | case 'name': |
| | | if (is_post_type_archive()) { |
| | | $obj = get_queried_object(); |
| | | |
| | | $registrar = Registrar::getInstance($obj->name); |
| | | return $registrar ? $registrar->getPlural() : $obj->label; |
| | | } |
| | | break; |
| | | } |
| | | if (str_contains($variable, '.')) { |
| | |
| | | $class->setMainEntity($itemList); |
| | | |
| | | $schema = $class->outputSchema(); |
| | | error_log('Generated archive schema: '.print_r($schema, true)); |
| | | if (JVB_TESTING) { |
| | | // error_log('Generated archive schema: '.print_r($schema, true)); |
| | | } |
| | | |
| | | return $schema; |
| | | } |
| | | ); |
| | |
| | | $title = Resolver::resolve($config['name']??$config['title']??'', $meta); |
| | | } elseif (is_post_type_archive($based) ) { |
| | | $config = $this->getConfig('archive'); |
| | | $title = $config['name']; |
| | | $title = Resolver::resolve($config['name'], null); |
| | | } elseif (is_tax($based)) { |
| | | $config = $this->getConfig('archive'); |
| | | $meta = Meta::forTerm(get_queried_object_id()); |
| | |
| | | $this->imgData = Cache::for('imageData')->connect('post'); |
| | | if (JVB_TESTING) { |
| | | $this->cache->flush(); |
| | | $this->imgData->flush(); |
| | | } |
| | | } |
| | | |
| | |
| | | $postSlug, |
| | | $postSlug, |
| | | $imgSlug, |
| | | $full[0] |
| | | $full[0]??'' |
| | | ); |
| | | |
| | | // Add gallery attributes to img tag |
| New file |
| | |
| | | <?php |
| | | namespace JVBase\utility; |
| | | |
| | | use JVBase\managers\Cache; |
| | | use JVBase\managers\SEO\render\Thing\CreativeWork\MediaObject\VideoObject; |
| | | |
| | | if (!defined('ABSPATH')) { |
| | | exit; |
| | | } |
| | | |
| | | class Video |
| | | { |
| | | protected ?Cache $cache = null; |
| | | protected ?Cache $vidData = null; |
| | | |
| | | public function __construct() |
| | | { |
| | | $this->cache = Cache::for('videos')->connect('post'); |
| | | $this->vidData = Cache::for('vidData')->connect('post'); |
| | | if (JVB_TESTING) { |
| | | $this->cache->flush(); |
| | | $this->vidData->flush(); |
| | | } |
| | | } |
| | | public static function get(int $ID, array $args = []):string |
| | | { |
| | | return (new self())->formatVideo($ID, $args); |
| | | } |
| | | public function formatVideo(int $ID, array $args = []):string |
| | | { |
| | | return $this->cache->remember( |
| | | $this->cache->generateKey(array_merge(['id' => $ID], $args)), |
| | | function() use ($ID, $args) { |
| | | $url = wp_get_attachment_url($ID); |
| | | $meta = wp_get_attachment_metadata($ID); |
| | | $attachmentPost = get_post($ID); |
| | | |
| | | jvbDump($meta, 'video meta'); |
| | | |
| | | $title = ($attachmentPost && $attachmentPost->post_title !== '') ? $attachmentPost->post_title : ''; |
| | | $caption = wp_get_attachment_caption($ID); |
| | | |
| | | $video = new VideoObject(); |
| | | $video->setName($title); |
| | | $video->setContentUrl($url); |
| | | |
| | | if ($attachmentPost) { |
| | | $video->setUploadDate($attachmentPost->post_date); |
| | | } |
| | | |
| | | if (isset($meta['height'])) { |
| | | $video->setHeight($meta['height'].'px'); |
| | | } |
| | | if (isset($meta['width'])) { |
| | | $video->setWidth($meta['width'].'px'); |
| | | } |
| | | if (isset($meta['mime_type'])) { |
| | | $video->setEncodingFormat($meta['mime_type']); |
| | | } |
| | | if (isset($meta['filesize'])) { |
| | | $video->setContentSize($meta['filesize']); |
| | | } |
| | | if (isset($meta['length'])) { |
| | | $video->setDuration($meta['length']); |
| | | } |
| | | if (!empty($caption)) { |
| | | $video->setDescription($caption); |
| | | } |
| | | |
| | | $schema = sprintf( |
| | | '<script type="application/ld+json">%s</script>', |
| | | json_encode($video->outputSchema()) |
| | | ); |
| | | |
| | | return sprintf( |
| | | '%s<video width="%s" height="%s" controls> |
| | | <source src="%s" type="%s">Your browser does not support the video tag |
| | | </video>', |
| | | $schema, |
| | | $meta['width'], |
| | | $meta['height'], |
| | | $url, |
| | | $meta['mime_type'] |
| | | ); |
| | | |
| | | |
| | | |
| | | } |
| | | ); |
| | | } |
| | | |
| | | public function getGallerySizes(int $ID, string $replace):string |
| | | { |
| | | if (!wp_get_attachment_image_src($ID)) { |
| | | return ''; |
| | | } |
| | | if (!has_image_size($replace)) { |
| | | $replace = 'large'; |
| | | } |
| | | |
| | | if ($replace == 'large') { |
| | | return 'data-small="' . |
| | | wp_get_attachment_image_src($ID)[0] . '" data-medium="' . |
| | | wp_get_attachment_image_src($ID, 'large')[0] . '" data-full="' . |
| | | wp_get_attachment_image_src($ID, 'full')[0] . '"'; |
| | | } elseif ($replace == 'medium') { |
| | | return 'data-small="'. |
| | | wp_get_attachment_image_src($ID, 'large')[0].'" data-medium="'. |
| | | wp_get_attachment_image_src($ID, 'large')[0].'" data-full="'. |
| | | wp_get_attachment_image_src($ID, 'large')[0].'"'; |
| | | } elseif ($replace == 'thumbnail') { |
| | | return 'data-small="'. |
| | | wp_get_attachment_image_src($ID, 'medium')[0].'" data-medium="'. |
| | | wp_get_attachment_image_src($ID, 'medium')[0].'" data-full="'. |
| | | wp_get_attachment_image_src($ID, 'medium')[0].'"'; |
| | | } |
| | | return ''; |
| | | } |
| | | |
| | | public function getImageData(int $imgID):array |
| | | { |
| | | return $this->imgData->remember( |
| | | $imgID, |
| | | function() use ($imgID) { |
| | | if (!wp_get_attachment_image($imgID, 'tiny')) { |
| | | return []; |
| | | } |
| | | return [ |
| | | 'tiny' => wp_get_attachment_image_src($imgID, 'tiny')[0], |
| | | 'small' => wp_get_attachment_image_src($imgID, 'medium')[0], |
| | | 'medium' => wp_get_attachment_image_src($imgID, 'large')[0], |
| | | 'large' => wp_get_attachment_image_src($imgID, 'full')[0], |
| | | 'image-alt-text'=> get_post_meta($imgID, '_wp_attachment_image_alt', true), |
| | | 'image-title' => get_the_title($imgID), |
| | | 'image-caption' => get_the_excerpt($imgID), |
| | | ]; |
| | | } |
| | | ); |
| | | } |
| | | |
| | | public static function getData(int $imgID):array |
| | | { |
| | | return (new Video)->getImageData($imgID); |
| | | } |
| | | |
| | | } |
| | |
| | | <?php |
| | | require(JVB_DIR.'/inc/utility/helpers.php'); |
| | | require(JVB_DIR.'/inc/utility/Image.php'); |
| | | require(JVB_DIR.'/inc/utility/Video.php'); |
| | | |
| | | |
| | | function jvb_filter_content(string $content):string |
| | |
| | | z-index: var(--z-5); |
| | | transition: var(--trans-size); |
| | | --dir: column-reverse; |
| | | background-color: var(--base); |
| | | border-left: 1px solid var(--base-200); |
| | | box-shadow:rgba(var(--base-rgb), var(--op-4)) var(--shdw-left); |
| | | background-color: rgb(var(--base)); |
| | | border-left: 1px solid rgb(var(--base-200)); |
| | | box-shadow:rgba(var(--base), var(--op-4)) var(--shdw-left); |
| | | height: auto; |
| | | --w: var(--chip_); |
| | | |
| | |
| | | } |
| | | |
| | | .menu-section { |
| | | border-bottom: 1px solid var(--contrast-200); |
| | | border-bottom: 1px solid rgb(var(--contrast-200)); |
| | | } |
| | | .section-title { |
| | | padding: 0.5rem var(--px); |
| | |
| | | nav#faq { |
| | | height: max-content; |
| | | display: block; |
| | | background-color: var(--base-100); |
| | | background-color: rgb(var(--base-100)); |
| | | border-radius: var(--radius-outer); |
| | | padding: 1.5rem; |
| | | touch-action: auto; |
| | |
| | | text-transform: none; |
| | | } |
| | | :target { |
| | | background-color: var(--base); |
| | | background-color: rgb(var(--base)); |
| | | outline: none; |
| | | |
| | | h2 { |
| | | background-color: var(--base); |
| | | background-color: rgb(var(--base)); |
| | | padding: 1rem 1.5rem; |
| | | border-radius: var(--radius-outer); |
| | | } |
| | |
| | | // position: sticky; |
| | | // top: 3rem; |
| | | // z-index: 15; |
| | | // background: rgba(var(--base-rgb),var(--op-6)); |
| | | // background: rgba(var(--base),var(--op-6)); |
| | | // padding: .25rem 3rem; |
| | | // details[open] summary { |
| | | // background-color: var(--overlay); |
| | |
| | | // |
| | | // details[open], |
| | | // summary:hover { |
| | | // background-color: rgba(var(--base-rgb),var(--op-6)); |
| | | // background-color: rgba(var(--base),var(--op-6)); |
| | | // } |
| | | // |
| | | // &:has(#favourites) { |
| | |
| | | // grid-column: 1/-1; |
| | | // text-align: center; |
| | | // padding: 2rem; |
| | | // background: var(--base-100); |
| | | // background: rgb(var(--base-100)); |
| | | // border-radius: var(--radius); |
| | | // margin: 0 auto; |
| | | // max-width: 600px; |
| | |
| | | // */ |
| | | //.placeholder { |
| | | // aspect-ratio: 1; |
| | | // background: var(--base); |
| | | // border: 1rem solid var(--base-50); |
| | | // background: rgb(var(--base)); |
| | | // border: 1rem solid rgb(var(--base-50)); |
| | | // border-radius: 1rem; |
| | | // display: flex; |
| | | // justify-content: center; |
| | |
| | | // |
| | | // .icon { |
| | | // --w: 50%; |
| | | // color: var(--base-200); |
| | | // color: rgb(var(--base-200)); |
| | | // animation: dance 2.5s ease-in-out infinite; |
| | | // |
| | | // } |
| | |
| | | // position: relative; |
| | | // border-radius: 0.5rem; |
| | | // overflow: hidden; |
| | | // background: var(--base-50); |
| | | // background: rgb(var(--base-50)); |
| | | // box-shadow: 0 2px 4px rgba(0,0,0,0.1); |
| | | // opacity: 0; |
| | | // transition: opacity var(--trans-base) var(--delay); |
| | |
| | | // bottom: 0; |
| | | // left: 0; |
| | | // right: 0; |
| | | // background-color: rgba(var(--base-rgb),var(--op-3)); |
| | | // background-color: rgba(var(--base),var(--op-3)); |
| | | // backdrop-filter: blur(5px); |
| | | // border-radius: var(--radius); |
| | | // z-index: 1; |
| | |
| | | // align-items: center; |
| | | // gap: .5rem; |
| | | // padding: .75rem 1.5rem; |
| | | // background: var(--base); |
| | | // color: var(--contrast); |
| | | // background: rgb(var(--base)); |
| | | // color: rgb(var(--contrast)); |
| | | // border-radius: 4px; |
| | | // font-size: var(--txt-medium); |
| | | // transition: all var(--trans-base); |
| | |
| | | // } |
| | | // &:hover { |
| | | // background: var(--pink-50); |
| | | // border-color: var(--contrast); |
| | | // border-color: rgb(var(--contrast)); |
| | | // color: var(--white); |
| | | // } |
| | | //} |
| | |
| | | // top: .5rem; |
| | | // right: .5rem; |
| | | // z-index: 10; |
| | | // background: rgba(var(--base-rgb),var(--op-4)); |
| | | // background: rgba(var(--base),var(--op-4)); |
| | | // border-radius: 50%; |
| | | // box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-subtle); |
| | | // box-shadow: rgba(var(--base),var(--op-45)) var(--shdw-subtle); |
| | | // border: none; |
| | | // width: 2rem; |
| | | // height: 2rem; |
| | |
| | | // &:hover { |
| | | // transform: scale(1.1); |
| | | // color: var(--pink-0); |
| | | // background: var(--base); |
| | | // background: rgb(var(--base)); |
| | | // box-shadow: 0 4px 8px rgba(0,0,0,0.15); |
| | | // } |
| | | // |
| | |
| | | ///** Item Information **/ |
| | | //.item-info { |
| | | // padding: .25rem; |
| | | // border-left: 1px solid var(--base-200); |
| | | // border-left: 1px solid rgb(var(--base-200)); |
| | | // >div + div { |
| | | // margin-top: .5em; |
| | | // position: relative; |
| | |
| | | // top: -.3em; |
| | | // left: -.25rem; |
| | | // width: 66.6%; |
| | | // border-bottom: 1px solid var(--base-200); |
| | | // border-bottom: 1px solid rgb(var(--base-200)); |
| | | // } |
| | | // } |
| | | // h3 { |
| | |
| | | // &:hover, |
| | | // &:focus { |
| | | // background-color: transparent; |
| | | // border-color: var(--contrast); |
| | | // color: var(--contrast); |
| | | // border-color: rgb(var(--contrast)); |
| | | // color: rgb(var(--contrast)); |
| | | // } |
| | | // } |
| | | //} |
| | |
| | | // left: 0; |
| | | // right: 0; |
| | | // bottom: 0; |
| | | // background-color: rgba(var(--base-rgb),var(--op-4)); |
| | | // background-color: rgba(var(--base),var(--op-4)); |
| | | // display: flex; |
| | | // align-items: center; |
| | | // justify-content: center; |
| | |
| | | // } |
| | | // |
| | | // .wrapper { |
| | | // background-color: rgba(var(--base-rgb),var(--op-6)); |
| | | // background-color: rgba(var(--base),var(--op-6)); |
| | | // padding: 2rem; |
| | | // border-radius: var(--radius); |
| | | // text-align: center; |
| | |
| | | // |
| | | // h3 { |
| | | // margin: 1.5rem 0 .25rem!important; |
| | | // color: var(--contrast-200); |
| | | // color: rgb(var(--contrast-200)); |
| | | // } |
| | | // .message { |
| | | // margin: 0; |
| | | // max-width: 275px; |
| | | // color: var(--contrast-100); |
| | | // color: rgb(var(--contrast-100)); |
| | | // font-size: var(--txt-x-small); |
| | | // animation: flicker 2s infinite; |
| | | // } |
| | |
| | | //.feed-block .item { |
| | | // summary { |
| | | // a { |
| | | // background-color: var(--action-0); |
| | | // background-color: rgb(var(--action-0)); |
| | | // display: flex; |
| | | // gap: .25rem; |
| | | // flex-wrap: nowrap; |
| | |
| | | /** PLACEHOLDERS **/ |
| | | .placeholder { |
| | | aspect-ratio: 1; |
| | | background: var(--base); |
| | | border: 1rem solid var(--base-50); |
| | | background: rgb(var(--base)); |
| | | border: 1rem solid rgb(var(--base-50)); |
| | | border-radius: 1rem; |
| | | display: flex; |
| | | justify-content: center; |
| | |
| | | |
| | | i.icon { |
| | | --w: 50%; |
| | | color: var(--base-200); |
| | | color: rgb(var(--base-200)); |
| | | animation: dance 2.5s ease-in-out infinite; |
| | | } |
| | | } |
| | |
| | | position: relative; |
| | | border-radius: 0.5rem; |
| | | overflow: hidden; |
| | | background: var(--base-50); |
| | | background: rgb(var(--base-50)); |
| | | box-shadow: 0 2px 4px rgba(0,0,0,0.1); |
| | | height: fit-content; |
| | | padding: 0; |
| | |
| | | top: -3rem; |
| | | left:0; |
| | | width: 100%; |
| | | background-color: rgba(var(--base-rgb),var(--op-2)); |
| | | background-color: rgba(var(--base),var(--op-2)); |
| | | backdrop-filter: blur(5px); |
| | | &:hover { |
| | | background-color: rgba(var(--action-rgb),var(--op-45)); |
| | | background-color: rgba(var(--action-0),var(--op-45)); |
| | | } |
| | | } |
| | | &[open] { |
| | |
| | | span { |
| | | width: 50%; |
| | | position: absolute; |
| | | background-color: var(--action-0); |
| | | background-color: rgb(var(--action-0)); |
| | | color: var(--action-contrast); |
| | | padding: .25rem .5rem; |
| | | &:first-of-type { |
| | |
| | | object-fit: cover; |
| | | height: 100%; |
| | | &:first-of-type { |
| | | border-right: 1px solid var(--action-0); |
| | | border-right: 1px solid rgb(var(--action-0)); |
| | | } |
| | | } |
| | | } |
| | |
| | | |
| | | .items-wrap [type=radio] + label:hover, |
| | | .items-wrap [type=checkbox] + label:hover { |
| | | color: var(--action-0); |
| | | color: rgb(var(--action-0)); |
| | | } |
| | | |
| | | .items-wrap [type=radio] + label::before, |
| | |
| | | transform: translateY(-50%); |
| | | width: 1rem; |
| | | height: 1rem; |
| | | border: 2px solid var(--contrast-200); |
| | | background-color: var(--base); |
| | | border: 2px solid rgb(var(--contrast-200)); |
| | | background-color: rgb(var(--base)); |
| | | border-radius: var(--radius); |
| | | } |
| | | |
| | | .items-wrap [type=radio]:hover + label::before, |
| | | .items-wrap [type=checkbox]:hover + label::before { |
| | | border-color: var(--action-200); |
| | | border-color: rgb(var(--action-200)); |
| | | } |
| | | |
| | | .items-wrap [type=radio]:checked + label::before, |
| | | .items-wrap [type=checkbox]:checked + label::before{ |
| | | background-color: var(--action-0); |
| | | border-color: var(--action-100); |
| | | background-color: rgb(var(--action-0)); |
| | | border-color: rgb(var(--action-100)); |
| | | } |
| | | |
| | | .items-wrap [type=radio]:checked + label::before { |
| | |
| | | |
| | | .items-wrap :disabled + label { |
| | | cursor: not-allowed; |
| | | background-color: var(--base-50); |
| | | color: var(--base-200); |
| | | border-color: var(--base-200); |
| | | background-color: rgb(var(--base-50)); |
| | | color: rgb(var(--base-200)); |
| | | border-color: rgb(var(--base-200)); |
| | | } |
| | | |
| | | .items-wrap :disabled + label:hover { |
| | | background-color: var(--base-50); |
| | | color: var(--base-200); |
| | | border-color: var(--base-200); |
| | | background-color: rgb(var(--base-50)); |
| | | color: rgb(var(--base-200)); |
| | | border-color: rgb(var(--base-200)); |
| | | } |
| | | |
| | | .items-wrap :disabled + label::before { |
| | | border-color: var(--base-200); |
| | | border-color: rgb(var(--base-200)); |
| | | } |
| | | |
| | | #jvb-selector .items-wrap [type=radio] + label, |
| | |
| | | grid-column: full; |
| | | padding: 0!important; |
| | | margin: 0; |
| | | background-color: var(--base-50); |
| | | background-color: rgb(var(--base-50)); |
| | | z-index: 0; |
| | | display: flex; |
| | | justify-content: flex-end; |
| | |
| | | // margin: 4rem 0 0 0!important; |
| | | // height: var(--btn); |
| | | // padding: 0; |
| | | // background-color: var(--base); |
| | | // box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | // background-color: rgb(var(--base)); |
| | | // box-shadow: rgba(var(--base),var(--op-45)) var(--shdw); |
| | | //} |
| | | //main>* { |
| | | // max-width: min(768px, 90vw)!important; |
| | |
| | | // height: var(--btn); |
| | | // min-width: var(--btn); |
| | | // padding: 0 .75rem; |
| | | // color: var(--contrast)!important; |
| | | // color: rgb(var(--contrast))!important; |
| | | //} |
| | | //.dashboard-nav a .icon { |
| | | // margin: 0; |
| | |
| | | //} |
| | | //.dashboard-nav .current a:hover, |
| | | //.dashboard-nav a:hover { |
| | | // background-color: var(--action-0)!important; |
| | | // background-color: rgb(var(--action-0))!important; |
| | | // color: var(--action-contrast)!important; |
| | | //} |
| | | //.dashboard-nav .current a { |
| | | // background-color: var(--base-100)!important; |
| | | // color: var(--contrast)!important; |
| | | // background-color: rgb(var(--base-100))!important; |
| | | // color: rgb(var(--contrast))!important; |
| | | //} |
| | | //.dashboard-nav .current a span { |
| | | // display: block; |
| | |
| | | // left: 0; |
| | | // right: 0; |
| | | // bottom: 0; |
| | | // background-color: rgba(var(--base-rgb),var(--op-4)); |
| | | // background-color: rgba(var(--base),var(--op-4)); |
| | | // display: flex; |
| | | // align-items: center; |
| | | // justify-content: center; |
| | |
| | | //} |
| | | // |
| | | //.loading-overlay .wrapper { |
| | | // background-color: var(--base); |
| | | // background-color: rgb(var(--base)); |
| | | // padding: 2rem; |
| | | // border-radius: 8px; |
| | | // text-align: center; |
| | |
| | | //.upload-spinner { |
| | | // width: 50px; |
| | | // height: 50px; |
| | | // border: 5px solid var(--base-200); |
| | | // border-top: 5px solid var(--action-0); |
| | | // border: 5px solid rgb(var(--base-200)); |
| | | // border-top: 5px solid rgb(var(--action-0)); |
| | | // border-radius: 50%; |
| | | // margin: 0 auto 1rem; |
| | | // animation: spin 1s linear infinite; |
| | |
| | | // |
| | | //.upload-status h3 { |
| | | // margin: 0 0 .5rem; |
| | | // color: var(--contrast); |
| | | // color: rgb(var(--contrast)); |
| | | //} |
| | | // |
| | | //.upload-message { |
| | | // margin: 0; |
| | | // color: var(--contrast-100); |
| | | // color: rgb(var(--contrast-100)); |
| | | // font-size: var(--txt-x-small); |
| | | //} |
| | | // |
| | |
| | | // bottom: 3rem; |
| | | // left: 0; |
| | | // right: 0; |
| | | // background-color: var(--base-100); |
| | | // box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | // background-color: rgb(var(--base-100)); |
| | | // box-shadow: rgba(var(--base),var(--op-45)) var(--shdw); |
| | | // z-index: 10; |
| | | //} |
| | | //.form-sections ul { |
| | |
| | | //.form-sections a { |
| | | // padding: .25rem; |
| | | // width: 100%; |
| | | // color: var(--contrast); |
| | | // color: rgb(var(--contrast)); |
| | | //} |
| | | //.replace:not(:has(.form-section.active)) .form-sections li:first-of-type a, |
| | | //.current a { |
| | | // background-color: var(--base-200); |
| | | // color: var(--contrast); |
| | | // background-color: rgb(var(--base-200)); |
| | | // color: rgb(var(--contrast)); |
| | | //} |
| | | //.form-sections .icon { |
| | | // margin: 0; |
| | |
| | | // padding: 0; |
| | | // width: 3rem; |
| | | // height: 3rem; |
| | | // color: var(--contrast-200); |
| | | // background-color: var(--base-200); |
| | | // color: rgb(var(--contrast-200)); |
| | | // background-color: rgb(var(--base-200)); |
| | | // justify-content: center; |
| | | // border: 3px solid transparent; |
| | | //} |
| | |
| | | // z-index: -1; |
| | | // top: calc(50% - (1.875rem / 2)); |
| | | // font-size: var(--txt-x-small); |
| | | // background-color: var(--action-0); |
| | | // background-color: rgb(var(--action-0)); |
| | | // color: var(--action-contrast); |
| | | // padding: .25rem .5rem; |
| | | // border-radius: 4px; |
| | |
| | | // } |
| | | // .save-popup:before{ |
| | | // right: -.25rem; |
| | | // border-left: .5rem solid var(--action-0); |
| | | // border-left: .5rem solid rgb(var(--action-0)); |
| | | // } |
| | | // .save-popup.show { |
| | | // right: calc(100% + .5rem); |
| | |
| | | // } |
| | | // .save-popup:before{ |
| | | // left: -.25rem; |
| | | // border-right: .5rem solid var(--action-0); |
| | | // border-right: .5rem solid rgb(var(--action-0)); |
| | | // } |
| | | // .save-popup.show { |
| | | // left: calc(100% + .5rem); |
| | |
| | | // |
| | | //.autosaving span.save, |
| | | //.autosaving button[type=submit] { |
| | | // border-color: var(--base-200); |
| | | // border-top-color: var(--action-0); |
| | | // border-bottom-color: var(--action-50); |
| | | // border-color: rgb(var(--base-200)); |
| | | // border-top-color: rgb(var(--action-0)); |
| | | // border-bottom-color: rgb(var(--action-50)); |
| | | // border-radius: 50%; |
| | | // color: var(--contrast-200); |
| | | // color: rgb(var(--contrast-200)); |
| | | // transition: color .25s var(--trans-t) var(--trans-fn); |
| | | // transition-property: color, background-color, border; |
| | | // animation: spin 1s linear infinite; |
| | |
| | | // bottom: 5rem; |
| | | // right: 1.5rem; |
| | | // text-transform: uppercase; |
| | | // color: var(--action-0); |
| | | // background-color: var(--base); |
| | | // color: rgb(var(--action-0)); |
| | | // background-color: rgb(var(--base)); |
| | | // border-radius: 4px; |
| | | // padding: .25rem .5rem; |
| | | // box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-subtle); |
| | | // box-shadow: rgba(var(--base),var(--op-45)) var(--shdw-subtle); |
| | | //} |
| | | //.field { |
| | | // margin: 3rem .5rem; |
| | |
| | | // |
| | | //.add-item-btn { |
| | | // padding: .5em; |
| | | // background: var(--base-100); |
| | | // border: 1px solid var(--contrast-200); |
| | | // background: rgb(var(--base-100)); |
| | | // border: 1px solid rgb(var(--contrast-200)); |
| | | // border-radius: .25rem; |
| | | // cursor: pointer; |
| | | // font-size: .875rem; |
| | |
| | | //} |
| | | // |
| | | //.add-item-btn:hover { |
| | | // background: var(--base-200); |
| | | // background: rgb(var(--base-200)); |
| | | //} |
| | | //summary .type-label { |
| | | // display: flex; |
| | |
| | | //.tabs { |
| | | // display: flex; |
| | | // margin-bottom: 1.5rem; |
| | | // border-bottom: 2px solid var(--base-200); |
| | | // border-bottom: 2px solid rgb(var(--base-200)); |
| | | // flex-wrap: wrap; |
| | | //} |
| | | //.tabs.parent { |
| | | // max-width: 100vw; |
| | | // background-color: var(--base); |
| | | // background-color: rgb(var(--base)); |
| | | // padding: .5rem; |
| | | // width: 100vw; |
| | | // position: relative; |
| | |
| | | //.tab-content button[type=submit] { |
| | | // display: inline-flex; |
| | | // width: 48%; |
| | | // background-color: var(--action-200); |
| | | // color: var(--contrast-200); |
| | | // background-color: rgb(var(--action-200)); |
| | | // color: rgb(var(--contrast-200)); |
| | | //} |
| | | // |
| | | //.tab-navigation.next { |
| | |
| | | //} |
| | | //.tabs > button:hover, |
| | | //.tabs > button:focus { |
| | | // background-color: var(--base-200); |
| | | // background-color: rgb(var(--base-200)); |
| | | //} |
| | | //.tabs > button::after { |
| | | // content: ''; |
| | |
| | | // left: 0; |
| | | // width: 0; |
| | | // height: 3px; |
| | | // background-color: var(--action-50); |
| | | // background-color: rgb(var(--action-50)); |
| | | // transition: width .3s; |
| | | //} |
| | | //.tabs > button.active::after { |
| | |
| | | // |
| | | //.tabs > button.add-item-btn { |
| | | // margin-left: auto; |
| | | // background-color: var(--action-50); |
| | | // background-color: rgb(var(--action-50)); |
| | | // border-radius: 4px; |
| | | // padding: .5em; |
| | | // font-weight: normal; |
| | | // border: 1px solid var(--action-50); |
| | | // border: 1px solid rgb(var(--action-50)); |
| | | //} |
| | | //.tabs > button.add-item-btn:focus, |
| | | //.tabs > button.add-item-btn:hover { |
| | | // background-color: var(--base); |
| | | // background-color: rgb(var(--base)); |
| | | //} |
| | | // |
| | | //.type-filter:not(.active) span:not(.count){ |
| | |
| | | //} |
| | | //.item.news summary .image { |
| | | // width: 5rem; |
| | | // background-color: var(--base-200); |
| | | // background-color: rgb(var(--base-200)); |
| | | // border-radius: 4px; |
| | | // aspect-ratio: 1; |
| | | //} |
| | |
| | | //details .no-items { |
| | | // text-align: center; |
| | | // font-style: italic; |
| | | // background-color: var(--base-50); |
| | | // background-color: rgb(var(--base-50)); |
| | | // padding: var(--p-outer); |
| | | // border-radius: var(--radius); |
| | | //} |
| | |
| | | // width: fit-content; |
| | | // height: fit-content; |
| | | // cursor: pointer; |
| | | // border: 1px solid var(--base-200); |
| | | // border: 1px solid rgb(var(--base-200)); |
| | | // border-radius: 4px; |
| | | // font-size: .875rem; |
| | | // transition: border-color var(--trans-base); |
| | |
| | | //details.type-filters label:hover, |
| | | //details.type-filters input:checked + label { |
| | | // background-color: var(--light-0); |
| | | // border-color: var(--action-0); |
| | | // color: var(--action-0); |
| | | // border-color: rgb(var(--action-0)); |
| | | // color: rgb(var(--action-0)); |
| | | //} |
| | | //details.type-filters .order-direction { |
| | | // justify-content: flex-end; |
| | |
| | | //.item-grid.empty div { |
| | | // text-align: center; |
| | | // border-radius: var(--radius); |
| | | // background-color: var(--base-100); |
| | | // background-color: rgb(var(--base-100)); |
| | | //} |
| | | //.item-grid.empty h3 .icon { |
| | | // display: inline-flex; |
| | |
| | | // top: .125rem; |
| | | // padding: 0!important; |
| | | // border-radius: var(--radius); |
| | | // background-color: rgba(var(--base-rgb),var(--op-3)); |
| | | // color: var(--base-200); |
| | | // background-color: rgba(var(--base),var(--op-3)); |
| | | // color: rgb(var(--base-200)); |
| | | //} |
| | | //.item-grid:not(.list-view) button.favourite:hover, |
| | | //.item-grid:not(.list-view) .item-select label:hover { |
| | | // background-color: rgba(var(--base-rgb),var(--op-6)); |
| | | // color: var(--contrast); |
| | | // background-color: rgba(var(--base),var(--op-6)); |
| | | // color: rgb(var(--contrast)); |
| | | //} |
| | | //.item-grid:not(.list-view) .item-select label::before { |
| | | // border-color: var(--base-200); |
| | | // border-color: rgb(var(--base-200)); |
| | | // position: relative; |
| | | // top: 0; |
| | | // left: 0; |
| | |
| | | // left: calc(50% - 4px)!important; |
| | | //} |
| | | //.item-grid:not(.list-view) .item-select label:hover::before { |
| | | // border-color: var(--contrast); |
| | | // border-color: rgb(var(--contrast)); |
| | | //} |
| | | //.item-grid:not(.list-view) .item-select label { |
| | | // left: .1255rem; |
| | |
| | | ///** List View **/ |
| | | //.replace:not(:has(.list-view)) button[data-view=grid], |
| | | //.replace:has(.list-view) button[data-view=list] { |
| | | // background-color: var(--base); |
| | | // background-color: rgb(var(--base)); |
| | | //} |
| | | //.item-grid.list-view .item { |
| | | // display: flex; |
| | |
| | | // gap: .5rem; |
| | | //} |
| | | //.item-grid.list-view .item:nth-of-type(even){ |
| | | // background-color: var(--base-100); |
| | | // background-color: rgb(var(--base-100)); |
| | | //} |
| | | // |
| | | //.item-grid.list-view .item-select label{ |
| | |
| | | // transform: none; |
| | | //} |
| | | //.item-grid.list-view .item-select label:hover { |
| | | // background-color: var(--base); |
| | | // background-color: rgb(var(--base)); |
| | | //} |
| | | // |
| | | //.item-grid.list-view .item-select label:hover::before { |
| | | // border-color: var(--action-0); |
| | | // border-color: rgb(var(--action-0)); |
| | | //} |
| | | //.item-grid.list-view img { |
| | | // width: 200px; |
| | |
| | | //Limit reached |
| | | // */ |
| | | //.reached .current { |
| | | // color: var(--action-50); |
| | | // color: rgb(var(--action-50)); |
| | | //} |
| | | //.reached textarea, |
| | | //.reached input { |
| | | // border: 2px solid var(--action-50); |
| | | // border: 2px solid rgb(var(--action-50)); |
| | | //} |
| | | ///** |
| | | //Groups |
| | |
| | | // top: 3rem; |
| | | // left: 100%; |
| | | // border: 1px solid transparent; |
| | | // background-color: var(--action-50); |
| | | // box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | // background-color: rgb(var(--action-50)); |
| | | // box-shadow:rgba(var(--base),var(--op-45)) var(--shdw); |
| | | // z-index: 5; |
| | | //} |
| | | //.selection-container #save-changes:hover { |
| | | // background-color: var(--base); |
| | | // border: 1px solid var(--action-50); |
| | | // color: 1px solid var(--action-50); |
| | | // background-color: rgb(var(--base)); |
| | | // border: 1px solid rgb(var(--action-50)); |
| | | // color: 1px solid rgb(var(--action-50)); |
| | | //} |
| | | // |
| | | //.group { |
| | | // padding: 1rem .66rem; |
| | | // background-color: var(--base-50); |
| | | // background-color: rgb(var(--base-50)); |
| | | // border-radius: var(--radius-outer); |
| | | //} |
| | | //.group.empty { |
| | |
| | | // flex-direction: column; |
| | | // align-items: center; |
| | | // justify-content: center; |
| | | // border: 4px dashed var(--base-200); |
| | | // border: 4px dashed rgb(var(--base-200)); |
| | | //} |
| | | //.group.empty .items { |
| | | // padding: 0; |
| | |
| | | // margin-top: 1rem; |
| | | // padding: 1rem; |
| | | // border-radius: var(--radius); |
| | | // background-color: var(--base); |
| | | // background-color: rgb(var(--base)); |
| | | //} |
| | | //.group .item-actions { |
| | | // display: flex; |
| | |
| | | // margin-bottom: 0; |
| | | //} |
| | | //.group .item-actions :checked + label { |
| | | // background-color: var(--action-50); |
| | | // color: var(--contrast); |
| | | // background-color: rgb(var(--action-50)); |
| | | // color: rgb(var(--contrast)); |
| | | //} |
| | | //.group .item-actions :checked + label:hover { |
| | | // border: 1px solid var(--action-50); |
| | | // border: 1px solid rgb(var(--action-50)); |
| | | // background-color: transparent; |
| | | // color: var(--action-50); |
| | | // color: rgb(var(--action-50)); |
| | | //} |
| | | //.group .item-actions label::before { |
| | | // display: none!important; |
| | |
| | | //} |
| | | // |
| | | //.group.drop { |
| | | // border: 2px dashed var(--action-0); |
| | | // border: 2px dashed rgb(var(--action-0)); |
| | | // background: var(--action-rgb-subtle); |
| | | //} |
| | | // |
| | |
| | | // |
| | | //.group.drop { |
| | | // background: var(--action-rgb-subtle); |
| | | // border: 2px dashed var(--action-0); |
| | | // border: 2px dashed rgb(var(--action-0)); |
| | | //} |
| | | //.gallery .group-item, |
| | | //.gallery .preview-item { |
| | |
| | | // display: grid; |
| | | // grid-template-columns: repeat(3, 1fr); |
| | | // padding: .5rem; |
| | | // background-color: var(--base-100); |
| | | // background-color: rgb(var(--base-100)); |
| | | // border-radius: var(--radius-outer); |
| | | //} |
| | | //.gallery-preview .preview-item { |
| | | // padding: .5rem; |
| | | // background-color: var(--base); |
| | | // background-color: rgb(var(--base)); |
| | | // border-radius: var(--radius); |
| | | //} |
| | | // |
| | |
| | | // text-align: right; |
| | | //} |
| | | //table tr:nth-of-type(even){ |
| | | // background-color: var(--base-200); |
| | | // background-color: rgb(var(--base-200)); |
| | | //} |
| | | //thead th { |
| | | // width: 50%; |
| | | //} |
| | | //thead tr, |
| | | //tfoot tr { |
| | | // background-color: var(--base); |
| | | // background-color: rgb(var(--base)); |
| | | // text-transform: uppercase; |
| | | // padding: .5rem 0; |
| | | // line-height: 2; |
| | |
| | | // |
| | | ///** Favourites Lists **/ |
| | | //.list-card { |
| | | // background-color: var(--base-50); |
| | | // background-color: rgb(var(--base-50)); |
| | | // padding: 1rem; |
| | | // border-radius: var(--radius); |
| | | //} |
| | |
| | | ///** Repeater **/ |
| | | //.add-repeater-row { |
| | | // margin-left: auto; |
| | | // border: 1px solid var(--contrast-200); |
| | | // border: 1px solid rgb(var(--contrast-200)); |
| | | //} |
| | | // |
| | | ///** Image **/ |
| | |
| | | //} |
| | | // |
| | | //.file-upload-wrapper { |
| | | // border: 2px dashed var(--action-0); |
| | | // border: 2px dashed rgb(var(--action-0)); |
| | | // border-radius: 4px; |
| | | // padding: 2rem; |
| | | // text-align: center; |
| | |
| | | //.file-upload-wrapper:hover, |
| | | //.dragover { |
| | | // background: var(--action-rgb-subtle-hover); |
| | | // border-color: var(--action-0)!important; |
| | | // border-color: rgb(var(--action-0))!important; |
| | | //} |
| | | // |
| | | //.file-upload-wrapper input[type="file"] { |
| | |
| | | //} |
| | | // |
| | | //.file-upload-text { |
| | | // color: var(--contrast); |
| | | // color: rgb(var(--contrast)); |
| | | // margin: 0; |
| | | // font-family: var(--body); |
| | | //} |
| | | // |
| | | //.file-upload-text strong { |
| | | // color: var(--action-0); |
| | | // color: rgb(var(--action-0)); |
| | | // text-decoration: underline; |
| | | //} |
| | | // |
| | | ///* Error state */ |
| | | //.file-error { |
| | | // color: var(--action-0); |
| | | // color: rgb(var(--action-0)); |
| | | // margin-top: .5rem; |
| | | // font-size: .9em; |
| | | //} |
| | |
| | | //.item-grid.selecting { |
| | | // --padding: .5rem; |
| | | // transition: none; |
| | | // background-color: var(--base); |
| | | // background-color: rgb(var(--base)); |
| | | //} |
| | | //.item { |
| | | // --padding: 0; |
| | |
| | | //.selecting .item:has(.select-checkbox:checked) { |
| | | // --padding: .5rem; |
| | | // opacity: 1; |
| | | // background-color: var(--action-0); |
| | | // background-color: rgb(var(--action-0)); |
| | | // transition: none; |
| | | //} |
| | | // |
| | |
| | | //} |
| | | //.preview-item .remove-file { |
| | | // width: 100%; |
| | | // background-color: var(--base); |
| | | // color: var(--contrast); |
| | | // background-color: rgb(var(--base)); |
| | | // color: rgb(var(--contrast)); |
| | | //} |
| | | //.preview-item .field:first-of-type { |
| | | // margin-top: 0!important; |
| | |
| | | //.preview-item + .preview-item { |
| | | // margin-top: 2rem; |
| | | // padding-top: 2rem; |
| | | // border-top: 2px solid var(--contrast-200); |
| | | // border-top: 2px solid rgb(var(--contrast-200)); |
| | | //} |
| | | // |
| | | //.item-grid.preview:empty + .hint { |
| | |
| | | // display: grid; |
| | | // grid-template-columns: repeat(5, 1fr); |
| | | // gap: .5rem; |
| | | // background-color: var(--base); |
| | | // background-color: rgb(var(--base)); |
| | | // padding: .5rem; |
| | | // border-radius: var(--radius-outer); |
| | | //} |
| | |
| | | //} |
| | | //.pagination-info { |
| | | // position: sticky; |
| | | // background-color: rgba(var(--base-rgb),var(--op-6)); |
| | | // background-color: rgba(var(--base),var(--op-6)); |
| | | // top: 0; |
| | | //} |
| | | //.pagination-info:empty { |
| | |
| | | // flex-wrap: wrap; |
| | | // padding: .25rem; |
| | | // gap: 1rem; |
| | | // background-color: var(--base); |
| | | // background-color: rgb(var(--base)); |
| | | // border-top-left-radius: var(--radius); |
| | | // border-top-right-radius: var(--radius); |
| | | // border-bottom: 4px solid var(--base-50); |
| | | // border-bottom: 4px solid rgb(var(--base-50)); |
| | | //} |
| | | //.ql-toolbar .ql-formats { |
| | | // display: flex; |
| | |
| | | //} |
| | | //.editor-container .ql-container { |
| | | // --padding: 1rem; |
| | | // background-color: var(--base); |
| | | // background-color: rgb(var(--base)); |
| | | // border-bottom-left-radius: var(--radius); |
| | | // border-bottom-right-radius: var(--radius); |
| | | // height: fit-content; |
| | |
| | | //.ql-tooltip { |
| | | // position: absolute; |
| | | // transform: translateY(10px); |
| | | // background-color: var(--base-100); |
| | | // border: 1px solid var(--base); |
| | | // box-shadow: 0px 0px 5px rgba(var(--base-rgb),var(--op-6)); |
| | | // color: var(--contrast); |
| | | // background-color: rgb(var(--base-100)); |
| | | // border: 1px solid rgb(var(--base)); |
| | | // box-shadow: 0px 0px 5px rgba(var(--base),var(--op-6)); |
| | | // color: rgb(var(--contrast)); |
| | | // padding: 5px 12px; |
| | | // white-space: nowrap; |
| | | //} |
| | |
| | | ///** Content Grid **/ |
| | | //.all-filters { |
| | | // position: relative; |
| | | // background-color: var(--base); |
| | | // background-color: rgb(var(--base)); |
| | | // border-radius: var(--radius-outer); |
| | | // padding: .5rem; |
| | | // display: flex; |
| | |
| | | // padding: .25rem .5rem!important; |
| | | //} |
| | | //.controls .radio-options input:not(.ch):checked+label { |
| | | // background-color: var(--base-100); |
| | | // border-color: var(--contrast-200); |
| | | // color: var(--contrast)!important; |
| | | // background-color: rgb(var(--base-100)); |
| | | // border-color: rgb(var(--contrast-200)); |
| | | // color: rgb(var(--contrast))!important; |
| | | // gap: .5rem; |
| | | //} |
| | | // |
| | |
| | | // width: 2em; |
| | | // height: 2em; |
| | | // border-radius: var(--radius); |
| | | // background-color: rgba(var(--base-rgb),var(--op-3)); |
| | | // background-color: rgba(var(--base),var(--op-3)); |
| | | // display: flex; |
| | | // justify-content: center; |
| | | // align-items: center; |
| | | //} |
| | | //.item-grid .item-actions button:focus, |
| | | //.item-grid .item-actions button:hover { |
| | | // background-color: rgba(var(--base-rgb),var(--op-6)); |
| | | // color: var(--action-0); |
| | | // background-color: rgba(var(--base),var(--op-6)); |
| | | // color: rgb(var(--action-0)); |
| | | //} |
| | | // |
| | | // |
| | |
| | | // position: relative; |
| | | // text-align: center; |
| | | // margin: 1rem 0; |
| | | // border-bottom: 1px solid var(--base-200); |
| | | // border-bottom: 1px solid rgb(var(--base-200)); |
| | | //} |
| | | // |
| | | //.term-divider span { |
| | | // background: var(--base); |
| | | // background: rgb(var(--base)); |
| | | // padding: 0 1rem; |
| | | // color: var(--contrast); |
| | | // color: rgb(var(--contrast)); |
| | | // font-size: .9rem; |
| | | // position: relative; |
| | | // top: .5em; |
| | | //} |
| | | // |
| | | //.common-term { |
| | | // background: var(--base-50); |
| | | // background: rgb(var(--base-50)); |
| | | // border-radius: var(--radius); |
| | | //} |
| | | // |
| | |
| | | // justify-content: center; |
| | | // gap: .5rem; |
| | | // padding: 1rem; |
| | | // color: var(--contrast-100); |
| | | // color: rgb(var(--contrast-100)); |
| | | // font-size: .9rem; |
| | | //} |
| | | // |
| | |
| | | // text-align: center; |
| | | // padding: .5rem; |
| | | // font-size: .9rem; |
| | | // color: var(--contrast-100); |
| | | // border-top: 1px solid var(--base-100); |
| | | // color: rgb(var(--contrast-100)); |
| | | // border-top: 1px solid rgb(var(--base-100)); |
| | | //} |
| | | // |
| | | //@keyframes spin { |
| | |
| | | //.term-breadcrumb { |
| | | // margin-bottom: 1rem; |
| | | // padding: .5rem; |
| | | // background: var(--base-50); |
| | | // background: rgb(var(--base-50)); |
| | | // border-radius: 4px; |
| | | //} |
| | | // |
| | |
| | | // gap: .5rem; |
| | | // border: none; |
| | | // background: none; |
| | | // color: var(--contrast); |
| | | // color: rgb(var(--contrast)); |
| | | // cursor: pointer; |
| | | // padding: .5rem; |
| | | // border-radius: 4px; |
| | |
| | | //} |
| | | // |
| | | //.back-to-parent:hover { |
| | | // background: var(--base-100); |
| | | // background: rgb(var(--base-100)); |
| | | //} |
| | | // |
| | | //.term-row { |
| | |
| | | // background: none; |
| | | // padding: .25rem; |
| | | // cursor: pointer; |
| | | // color: var(--contrast); |
| | | // color: rgb(var(--contrast)); |
| | | // display: flex; |
| | | // align-items: center; |
| | | // justify-content: center; |
| | |
| | | //} |
| | | // |
| | | //.toggle-children:hover { |
| | | // background: var(--base-50); |
| | | // background: rgb(var(--base-50)); |
| | | //} |
| | | // |
| | | //.loading-indicator { |
| | |
| | | //.loading-indicator .loading { |
| | | // width: 16px; |
| | | // height: 16px; |
| | | // border: 2px solid var(--base-100); |
| | | // border-top-color: var(--contrast); |
| | | // border: 2px solid rgb(var(--base-100)); |
| | | // border-top-color: rgb(var(--contrast)); |
| | | // border-radius: 50%; |
| | | // animation: spin 1s linear infinite; |
| | | //} |
| | |
| | | // gap: .5rem; |
| | | // margin-bottom: 1rem; |
| | | // padding: .5rem; |
| | | // background: var(--base-50); |
| | | // background: rgb(var(--base-50)); |
| | | // border-radius: 4px; |
| | | //} |
| | | // |
| | |
| | | // padding: .25rem .5rem; |
| | | // border-radius: 4px; |
| | | // cursor: pointer; |
| | | // color: var(--contrast); |
| | | // color: rgb(var(--contrast)); |
| | | // font-size: var(--txt-x-small); |
| | | //} |
| | | // |
| | | //.term-breadcrumb button:hover { |
| | | // background: var(--base-100); |
| | | // background: rgb(var(--base-100)); |
| | | //} |
| | | // |
| | | //.path-separator { |
| | | // color: var(--contrast-50); |
| | | // color: rgb(var(--contrast-50)); |
| | | //} |
| | | // |
| | | //.path-level { |
| | |
| | | //.create-new-term { |
| | | // margin-top: 2rem; |
| | | // padding-top: 1rem; |
| | | // border-top: 1px solid var(--base-100); |
| | | // border-top: 1px solid rgb(var(--base-100)); |
| | | //} |
| | | //.create-new-term button { |
| | | // width: 100%; |
| | |
| | | // |
| | | //.suggestion-prompt { |
| | | // font-size: var(--txt-x-small); |
| | | // color: var(--contrast-50); |
| | | // color: rgb(var(--contrast-50)); |
| | | // margin-bottom: 1rem; |
| | | //} |
| | | // |
| | |
| | | //.name-row input { |
| | | // width: 100%!important; |
| | | // padding: .5rem; |
| | | // border: 2px solid var(--base-100); |
| | | // border: 2px solid rgb(var(--base-100)); |
| | | // border-radius: 4px; |
| | | // background: var(--base); |
| | | // color: var(--contrast); |
| | | // background: rgb(var(--base)); |
| | | // color: rgb(var(--contrast)); |
| | | //} |
| | | // |
| | | //.name-row input:focus { |
| | | // border-color: var(--action-0); |
| | | // border-color: rgb(var(--action-0)); |
| | | // outline: none; |
| | | //} |
| | | // |
| | |
| | | // padding: .5rem 1rem; |
| | | // border: none; |
| | | // border-radius: 4px; |
| | | // background: var(--action-0); |
| | | // color: var(--base); |
| | | // background: rgb(var(--action-0)); |
| | | // color: rgb(var(--base)); |
| | | // cursor: pointer; |
| | | // font-size: var(--txt-x-small); |
| | | // transition: all .2s ease; |
| | | //} |
| | | // |
| | | //.create-term-form button:hover { |
| | | // background: var(--action-50); |
| | | // background: rgb(var(--action-50)); |
| | | //} |
| | | // |
| | | //.create-term-form button:disabled { |
| | |
| | | //.create-term-form { |
| | | // position: relative; |
| | | // z-index: 1; |
| | | // background: var(--base); |
| | | // border: 2px solid var(--action-0); |
| | | // background: rgb(var(--base)); |
| | | // border: 2px solid rgb(var(--action-0)); |
| | | // border-radius: 4px; |
| | | // padding: 1rem; |
| | | // margin-top: -2px; |
| | |
| | | //} |
| | | // |
| | | //.actions .send-invites { |
| | | // background-color: var(--action-50); |
| | | // background-color: rgb(var(--action-50)); |
| | | //} |
| | | //.actions .send-invites:hover, |
| | | //.actions .send-invites:focus { |
| | | // background-color: var(--base); |
| | | // border-color: var(--action-50); |
| | | // background-color: rgb(var(--base)); |
| | | // border-color: rgb(var(--action-50)); |
| | | //} |
| | | // |
| | | //.dashboard .queue-status-panel { |
| | |
| | | ///** UPLOADER **/ |
| | | //.upload-item { |
| | | // position: relative; |
| | | // border: 1px solid var(--base-200); |
| | | // border: 1px solid rgb(var(--base-200)); |
| | | // border-radius: 8px; |
| | | // background: var(--base-50); |
| | | // background: rgb(var(--base-50)); |
| | | // transition: all .3s ease; |
| | | //} |
| | | //.upload-item:hover { |
| | | // box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | // box-shadow: rgba(var(--base),var(--op-45)) var(--shdw); |
| | | // transform: translateY(-2px); |
| | | //} |
| | | //.upload-item[data-status=processing] { |
| | | // border-color: var(--action-200); |
| | | // background: var(--action-100); |
| | | // border-color: rgb(var(--action-200)); |
| | | // background: rgb(var(--action-100)); |
| | | //} |
| | | //.upload-item[data-status=cached] { |
| | | // border-color: var(--secondary-0); |
| | | // background: var(--secondary-200); |
| | | // border-color: rgb(var(--secondary-0)); |
| | | // background: rgb(var(--secondary-200)); |
| | | //} |
| | | //.upload-item[data-status=uploading] { |
| | | // border-color: var(--contrast); |
| | | // background-color: var(--base-50); |
| | | // border-color: rgb(var(--contrast)); |
| | | // background-color: rgb(var(--base-50)); |
| | | //} |
| | | //.upload-item .preview { |
| | | // position: relative; |
| | |
| | | // position: absolute; |
| | | // bottom: .25rem; |
| | | // right: .25rem; |
| | | // background-color: rgba(var(--base-rgb),var(--op-3)); |
| | | // box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | // background-color: rgba(var(--base),var(--op-3)); |
| | | // box-shadow: rgba(var(--base),var(--op-45)) var(--shdw); |
| | | // border-radius: 50%; |
| | | //} |
| | | //.upload-item img { |
| | |
| | | // left: 0; |
| | | // right: 0; |
| | | // bottom: 0; |
| | | // background: rgba(var(--base-rgb),var(--op-6)); |
| | | // background: rgba(var(--base),var(--op-6)); |
| | | // display: flex; |
| | | // flex-direction: column; |
| | | // justify-content: space-between; |
| | |
| | | // position: fixed; |
| | | // bottom: calc(var(--btn) + 1rem); |
| | | // right: 1rem; |
| | | // background-color: var(--base); |
| | | // background-color: rgb(var(--base)); |
| | | // height: var(--btn); |
| | | // box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | // box-shadow: rgba(var(--base),var(--op-45)) var(--shdw); |
| | | //} |
| | | ///*** UPLOADER GROUPS ***/ |
| | | //.group-display { |
| | |
| | | // padding: .5rem; |
| | | // top: calc(var(--btn) + .25rem); |
| | | // left: 0; |
| | | // background-color: var(--base-50); |
| | | // background-color: rgb(var(--base-50)); |
| | | // z-index: 5; |
| | | //} |
| | | //.preview-actions .selected { |
| | |
| | | // gap: 1rem; |
| | | // margin-top: 1rem; |
| | | // padding: .5rem; |
| | | // background: var(--base); |
| | | // border: 1px solid var(--contrast-200); |
| | | // background: rgb(var(--base)); |
| | | // border: 1px solid rgb(var(--contrast-200)); |
| | | // border-radius: 8px; |
| | | // min-height: 60px; |
| | | //} |
| | |
| | | //} |
| | | //.upload-item:has([type=checkbox]:checked) .preview { |
| | | // padding: 1rem; |
| | | // background-color: var(--secondary-200); |
| | | // background-color: rgb(var(--secondary-200)); |
| | | //} |
| | | //.upload-item:has([open]) { |
| | | // grid-column: 1 / -1; |
| | |
| | | // |
| | | //.dragover:not(.item-grid.groups) { |
| | | // background-color: var(--overlay-action-medium); |
| | | // border: 2px dashed var(--action-0); |
| | | // border: 2px dashed rgb(var(--action-0)); |
| | | //} |
| | | // |
| | | //@keyframes dragHover { |
| | |
| | | // display: flex; |
| | | // justify-content: center; |
| | | // align-items: center; |
| | | // border: 2px dashed var(--action-200); |
| | | // border: 2px dashed rgb(var(--action-200)); |
| | | // border-radius: var(--radius); |
| | | // margin: 10px 0; |
| | | // cursor: pointer; |
| | |
| | | // display: grid; |
| | | // grid-template-columns: repeat(3, 1fr); |
| | | // gap: .5rem; |
| | | // border: 2px dashed var(--action-200); |
| | | // border: 2px dashed rgb(var(--action-200)); |
| | | // border-radius: var(--radius); |
| | | // margin: 10px 0; |
| | | // cursor: pointer; |
| | |
| | | //.empty-group.dragover, |
| | | //.item-grid.group .item-grid.group:hover, |
| | | //.item-grid.group .item-grid.group.dragover { |
| | | // border-color: var(--action-0); |
| | | // border-color: rgb(var(--action-0)); |
| | | // background-color: var(--overlay-action-light); |
| | | // color: var(--action-50); |
| | | // color: rgb(var(--action-50)); |
| | | //} |
| | | // |
| | | //.upload-group { |
| | | // background-color: var(--base-100); |
| | | // background-color: rgb(var(--base-100)); |
| | | // border-radius: var(--radius); |
| | | // border: 1px solid var(--contrast-200); |
| | | // border: 1px solid rgb(var(--contrast-200)); |
| | | //} |
| | | //.group-actions { |
| | | // width: 100%; |
| | |
| | | ///** RESTORE FROM CACHE **/ |
| | | //.restore-notification { |
| | | // border-radius: var(--radius); |
| | | // box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | // box-shadow: rgba(var(--base),var(--op-45)) var(--shdw); |
| | | // padding: 1rem; |
| | | // background: var(--base-200); |
| | | // border: 1px solid var(--contrast-200); |
| | | // background: rgb(var(--base-200)); |
| | | // border: 1px solid rgb(var(--contrast-200)); |
| | | // border-top-width: 4px; |
| | | // border-bottom-width: 4px; |
| | | //} |
| | |
| | | // filter: grayscale(0); |
| | | // opacity: 1; |
| | | // padding: 1rem; |
| | | // background-color: var(--secondary-200); |
| | | // background-color: rgb(var(--secondary-200)); |
| | | //} |
| | | // |
| | | //.upload-item .featured + label { |
| | | // width: 2em; |
| | | // height: 2em; |
| | | // border-radius: var(--radius); |
| | | // background-color: rgba(var(--base-rgb),var(--op-3)); |
| | | // background-color: rgba(var(--base),var(--op-3)); |
| | | // display: flex; |
| | | // justify-content: center; |
| | | // align-items: center; |
| | |
| | | // |
| | | ///*.all-uploads .active {*/ |
| | | ///* font-weight: 500;*/ |
| | | ///* color: var(--contrast);*/ |
| | | ///* color: rgb(var(--contrast));*/ |
| | | ///* font-size: .9rem;*/ |
| | | ///*}*/ |
| | | // |
| | |
| | | ///* border: 1px solid var(--border);*/ |
| | | ///* border-radius: 4px;*/ |
| | | ///* background: var(--surface);*/ |
| | | ///* color: var(--contrast);*/ |
| | | ///* color: rgb(var(--contrast));*/ |
| | | ///* cursor: pointer;*/ |
| | | ///* transition: all .3s ease;*/ |
| | | ///* font-size: .875rem;*/ |
| | |
| | | ///*}*/ |
| | | // |
| | | ///*.upload-summary button:hover {*/ |
| | | ///* background: var(--action-0);*/ |
| | | ///* background: rgb(var(--action-0));*/ |
| | | ///* color: var(--action-contrast);*/ |
| | | ///* border-color: var(--action-0);*/ |
| | | ///* border-color: rgb(var(--action-0));*/ |
| | | ///*}*/ |
| | | // |
| | | ///*!* Upload Drop Zones *!*/ |
| | |
| | | // |
| | | ///*.file-upload-container.dragover {*/ |
| | | ///* background-color: var(--action-rgb-subtle);*/ |
| | | ///* border-color: var(--action-0);*/ |
| | | ///* border-color: rgb(var(--action-0));*/ |
| | | ///* padding: .75rem;*/ |
| | | ///*}*/ |
| | | ///* .dragover .file-upload-wrapper {*/ |
| | |
| | | ///*}*/ |
| | | // |
| | | ///*.status.uploading {*/ |
| | | ///* background: var(--action-0);*/ |
| | | ///* background: rgb(var(--action-0));*/ |
| | | ///* color: var(--action-contrast);*/ |
| | | ///*}*/ |
| | | // |
| | |
| | | ///* margin-bottom: .25rem;*/ |
| | | ///* font-weight: 500;*/ |
| | | ///* font-size: .9rem;*/ |
| | | ///* color: var(--contrast);*/ |
| | | ///* color: rgb(var(--contrast));*/ |
| | | ///*}*/ |
| | | // |
| | | ///*.upload .metadata input,*/ |
| | |
| | | ///*.upload .metadata input:focus,*/ |
| | | ///*.upload .metadata textarea:focus {*/ |
| | | ///* outline: none;*/ |
| | | ///* border-color: var(--action-0);*/ |
| | | ///* border-color: rgb(var(--action-0));*/ |
| | | ///* box-shadow: 0 0 0 2px var(--action-rgb-subtle);*/ |
| | | ///*}*/ |
| | | // |
| | |
| | | // |
| | | ///*!* Focus Management *!*/ |
| | | ///*.upload-item:focus-within {*/ |
| | | ///* outline: 2px solid var(--action-0);*/ |
| | | ///* outline: 2px solid rgb(var(--action-0));*/ |
| | | ///* outline-offset: 2px;*/ |
| | | ///*}*/ |
| | | // |
| | | ///*.upload .actions button:focus {*/ |
| | | ///* outline: 2px solid var(--action-0);*/ |
| | | ///* outline: 2px solid rgb(var(--action-0));*/ |
| | | ///* outline-offset: 2px;*/ |
| | | ///*}*/ |
| | | // |
| | |
| | | ///* align-items: center;*/ |
| | | ///* gap: 1rem;*/ |
| | | ///* padding: .5rem 1rem;*/ |
| | | ///* background-color: var(--action-50);*/ |
| | | ///* background-color: rgb(var(--action-50));*/ |
| | | ///* border-radius: var(--radius);*/ |
| | | ///* color: var(--contrast);*/ |
| | | ///* color: rgb(var(--contrast));*/ |
| | | ///* font-size: .9rem;*/ |
| | | ///*}*/ |
| | | // |
| | |
| | | ///* justify-content: space-between;*/ |
| | | ///* align-items: center;*/ |
| | | ///* padding: 1rem;*/ |
| | | ///* background-color: var(--base-100);*/ |
| | | ///* background-color: rgb(var(--base-100));*/ |
| | | ///* border-radius: var(--radius-outer);*/ |
| | | ///* margin-bottom: 1rem;*/ |
| | | ///*}*/ |
| | |
| | | ///*!* Upload Item Enhancements *!*/ |
| | | ///*.upload-item {*/ |
| | | ///* position: relative;*/ |
| | | ///* background: var(--base);*/ |
| | | ///* background: rgb(var(--base));*/ |
| | | ///* border-radius: var(--radius);*/ |
| | | ///* overflow: hidden;*/ |
| | | ///* cursor: pointer;*/ |
| | |
| | | // |
| | | ///*.upload-item:hover {*/ |
| | | ///* transform: translateY(-2px);*/ |
| | | ///* box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);*/ |
| | | ///* box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);*/ |
| | | ///*}*/ |
| | | // |
| | | ///*.upload-item[draggable="true"] {*/ |
| | |
| | | ///*}*/ |
| | | // |
| | | ///*.upload-item.selected {*/ |
| | | ///* border: 2px solid var(--action-50);*/ |
| | | ///* border: 2px solid rgb(var(--action-50));*/ |
| | | ///* background: rgba(255, 0, 128, .05);*/ |
| | | ///*}*/ |
| | | // |
| | |
| | | ///* width: 1.5rem;*/ |
| | | ///* height: 1.5rem;*/ |
| | | ///* border-radius: 50%;*/ |
| | | ///* background: var(--base);*/ |
| | | ///* background: rgb(var(--base));*/ |
| | | ///* display: flex;*/ |
| | | ///* align-items: center;*/ |
| | | ///* justify-content: center;*/ |
| | |
| | | // |
| | | ///*!* Group Enhancements *!*/ |
| | | ///*.upload-group {*/ |
| | | ///* background: var(--base-50);*/ |
| | | ///* background: rgb(var(--base-50));*/ |
| | | ///* border-radius: var(--radius-outer);*/ |
| | | ///* padding: 1rem;*/ |
| | | ///* margin-bottom: 1rem;*/ |
| | |
| | | ///*}*/ |
| | | // |
| | | ///*.upload-group.dragover {*/ |
| | | ///* border-color: var(--action-50);*/ |
| | | ///* border-color: rgb(var(--action-50));*/ |
| | | ///* background: rgba(255, 0, 128, .05);*/ |
| | | ///*}*/ |
| | | // |
| | |
| | | // |
| | | ///*.group-name:focus {*/ |
| | | ///* outline: none;*/ |
| | | ///* border-bottom-color: var(--action-50);*/ |
| | | ///* border-bottom-color: rgb(var(--action-50));*/ |
| | | ///*}*/ |
| | | // |
| | | ///*.group-count {*/ |
| | |
| | | ///*}*/ |
| | | // |
| | | ///*.group-actions button {*/ |
| | | ///* background: var(--base);*/ |
| | | ///* border: 1px solid var(--base-200);*/ |
| | | ///* background: rgb(var(--base));*/ |
| | | ///* border: 1px solid rgb(var(--base-200));*/ |
| | | ///* border-radius: var(--radius);*/ |
| | | ///* padding: .5rem;*/ |
| | | ///* cursor: pointer;*/ |
| | |
| | | ///*}*/ |
| | | // |
| | | ///*.group-actions button:hover {*/ |
| | | ///* background: var(--action-50);*/ |
| | | ///* color: var(--contrast);*/ |
| | | ///* border-color: var(--action-50);*/ |
| | | ///* background: rgb(var(--action-50));*/ |
| | | ///* color: rgb(var(--contrast));*/ |
| | | ///* border-color: rgb(var(--action-50));*/ |
| | | ///*}*/ |
| | | // |
| | | ///*.group-actions .delete-group:hover {*/ |
| | |
| | | // |
| | | ///*.group-drop-zone:hover,*/ |
| | | ///*.group-drop-zone.dragover {*/ |
| | | ///* border-color: var(--action-50);*/ |
| | | ///* border-color: rgb(var(--action-50));*/ |
| | | ///* background: rgba(255, 0, 128, .05);*/ |
| | | ///* color: var(--action-50);*/ |
| | | ///* color: rgb(var(--action-50));*/ |
| | | ///*}*/ |
| | | // |
| | | ///*.group-items {*/ |
| | |
| | | ///* aspect-ratio: 1;*/ |
| | | ///* border-radius: var(--radius);*/ |
| | | ///* overflow: hidden;*/ |
| | | ///* background: var(--base);*/ |
| | | ///* background: rgb(var(--base));*/ |
| | | ///* transition: transform .2s ease;*/ |
| | | ///*}*/ |
| | | // |
| | |
| | | // |
| | | ///*!* Empty Group State *!*/ |
| | | ///*.empty-group {*/ |
| | | ///* border: 4px dashed var(--base-200);*/ |
| | | ///* border: 4px dashed rgb(var(--base-200));*/ |
| | | ///* border-radius: var(--radius);*/ |
| | | ///* padding: 2rem;*/ |
| | | ///* text-align: center;*/ |
| | |
| | | // |
| | | ///*.empty-group:hover,*/ |
| | | ///*.empty-group.dragover {*/ |
| | | ///* border-color: var(--action-50);*/ |
| | | ///* border-color: rgb(var(--action-50));*/ |
| | | ///* background: rgba(255, 0, 128, .05);*/ |
| | | ///* color: var(--action-50);*/ |
| | | ///* color: rgb(var(--action-50));*/ |
| | | ///*}*/ |
| | | // |
| | | ///*!* Sidebar *!*/ |
| | | ///*.sidebar {*/ |
| | | ///* background: var(--base-50);*/ |
| | | ///* background: rgb(var(--base-50));*/ |
| | | ///* border-radius: var(--radius-outer);*/ |
| | | ///* padding: 1.5rem;*/ |
| | | ///* min-height: 400px;*/ |
| | |
| | | // |
| | | ///*.new-group {*/ |
| | | ///* width: 100%;*/ |
| | | ///* background: var(--action-50);*/ |
| | | ///* color: var(--contrast);*/ |
| | | ///* background: rgb(var(--action-50));*/ |
| | | ///* color: rgb(var(--contrast));*/ |
| | | ///* border: none;*/ |
| | | ///* border-radius: var(--radius);*/ |
| | | ///* padding: .75rem;*/ |
| | |
| | | ///* grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));*/ |
| | | ///* gap: 1rem;*/ |
| | | ///* padding: 1rem;*/ |
| | | ///* background: var(--base-100);*/ |
| | | ///* background: rgb(var(--base-100));*/ |
| | | ///* border-radius: var(--radius-outer);*/ |
| | | ///* min-height: 200px;*/ |
| | | ///*}*/ |
| | |
| | | // |
| | | ///*!* File Upload Container *!*/ |
| | | ///*.file-upload-container.dragover {*/ |
| | | ///* border-color: var(--action-50);*/ |
| | | ///* border-color: rgb(var(--action-50));*/ |
| | | ///* background: rgba(255, 0, 128, .05);*/ |
| | | ///*}*/ |
| | | // |
| | |
| | | ///*.upload-item:focus-within,*/ |
| | | ///*.group-item:focus-within,*/ |
| | | ///*.upload-group:focus-within {*/ |
| | | ///* outline: 2px solid var(--action-50);*/ |
| | | ///* outline: 2px solid rgb(var(--action-50));*/ |
| | | ///* outline-offset: 2px;*/ |
| | | ///*}*/ |
| | | // |
| | |
| | | // |
| | | ///*.confirmation-content {*/ |
| | | ///* padding: 2rem;*/ |
| | | ///* background: var(--base);*/ |
| | | ///* background: rgb(var(--base));*/ |
| | | ///* border-radius: var(--radius-outer);*/ |
| | | ///*}*/ |
| | | // |
| | |
| | | ///* justify-content: flex-end;*/ |
| | | ///* margin-top: 1.5rem;*/ |
| | | ///* padding-top: 1rem;*/ |
| | | ///* border-top: 1px solid var(--base-200);*/ |
| | | ///* border-top: 1px solid rgb(var(--base-200));*/ |
| | | ///*}*/ |
| | | // |
| | | ///*.confirm-start-over {*/ |
| | |
| | | ///*}*/ |
| | | // |
| | | ///*.cancel-start-over {*/ |
| | | ///* background: var(--base-100);*/ |
| | | ///* background: rgb(var(--base-100));*/ |
| | | ///* color: var(--text);*/ |
| | | ///* border: 1px solid var(--base-300);*/ |
| | | ///* border-radius: var(--radius);*/ |
| | |
| | | ///*}*/ |
| | | // |
| | | ///*.cancel-start-over:hover {*/ |
| | | ///* background: var(--base-200);*/ |
| | | ///* background: rgb(var(--base-200));*/ |
| | | ///*}*/ |
| | | // |
| | | ///*!* Responsive Design *!*/ |
| | |
| | | // } |
| | | // /* Preview section - top half of screen */ |
| | | // .preview-wrap { |
| | | // background: var(--base); |
| | | // border-bottom: 2px solid var(--action-0); |
| | | // background: rgb(var(--base)); |
| | | // border-bottom: 2px solid rgb(var(--action-0)); |
| | | // } |
| | | // |
| | | // /* Preview actions - sticky at top */ |
| | |
| | | // position: sticky; |
| | | // top: 0; |
| | | // z-index: 10; |
| | | // background: var(--base); |
| | | // border-bottom: 1px solid var(--base-200); |
| | | // background: rgb(var(--base)); |
| | | // border-bottom: 1px solid rgb(var(--base-200)); |
| | | // flex-shrink: 0; |
| | | // } |
| | | // |
| | |
| | | // |
| | | // /* Groups section - bottom half with sticky header */ |
| | | // .sidebar { |
| | | // background: var(--base-200); |
| | | // border-top: 3px solid var(--action-50); |
| | | // background: rgb(var(--base-200)); |
| | | // border-top: 3px solid rgb(var(--action-50)); |
| | | // } |
| | | // |
| | | // /* Groups header - sticky */ |
| | | // .sidebar .header { |
| | | // border-bottom: 1px solid var(--base-200); |
| | | // border-bottom: 1px solid rgb(var(--base-200)); |
| | | // padding: 1rem; |
| | | // flex-shrink: 0; |
| | | // } |
| | |
| | | // |
| | | // .empty-group:hover, |
| | | // .empty-group.dragover { |
| | | // border-color: var(--action-0); |
| | | // border-color: rgb(var(--action-0)); |
| | | // background: var(--action-rgb-subtle-hover); |
| | | // transform: scale(1.02); |
| | | // } |
| | |
| | | // height: 3rem; |
| | | // font-size: 1.1rem; |
| | | // font-weight: 600; |
| | | // box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | // box-shadow: rgba(var(--base),var(--op-45)) var(--shdw); |
| | | // border-radius: var(--radius-outer); |
| | | // } |
| | | // |
| | |
| | | // .upload-item { |
| | | // border-radius: var(--radius); |
| | | // overflow: hidden; |
| | | // background: var(--base); |
| | | // border: 1px solid var(--base-200); |
| | | // background: rgb(var(--base)); |
| | | // border: 1px solid rgb(var(--base-200)); |
| | | // transition: transform .2s ease; |
| | | // } |
| | | // |
| | |
| | | // |
| | | // /* Enhanced group styling for mobile */ |
| | | // .upload-group { |
| | | // background: var(--base-100); |
| | | // background: rgb(var(--base-100)); |
| | | // border-radius: var(--radius); |
| | | // border: 1px solid var(--base-200); |
| | | // border: 1px solid rgb(var(--base-200)); |
| | | // padding: 1rem; |
| | | // margin-bottom: 1rem; |
| | | // } |
| | |
| | | // align-items: center; |
| | | // margin-bottom: 1rem; |
| | | // padding-bottom: .5rem; |
| | | // border-bottom: 1px solid var(--base-200); |
| | | // border-bottom: 1px solid rgb(var(--base-200)); |
| | | // flex-wrap: wrap; |
| | | // gap: .5rem; |
| | | // } |
| | |
| | | // aspect-ratio: 1; |
| | | // border-radius: 4px; |
| | | // overflow: hidden; |
| | | // border: 1px solid var(--base-200); |
| | | // border: 1px solid rgb(var(--base-200)); |
| | | // } |
| | | // |
| | | // /* Hide file upload container on mobile when in grouping mode */ |
| | |
| | | // |
| | | // .dragover { |
| | | // background: var(--action-rgb-subtle) !important; |
| | | // border-color: var(--action-0) !important; |
| | | // border-color: rgb(var(--action-0)) !important; |
| | | // transform: scale(1.05); |
| | | // animation: mobile-drop-pulse .8s infinite ease-in-out; |
| | | // } |
| | |
| | | // |
| | | // /* Enhanced selection states */ |
| | | // .upload-item.selected { |
| | | // border: 2px solid var(--action-0); |
| | | // border: 2px solid rgb(var(--action-0)); |
| | | // background-color: var(--action-rgb-subtle); |
| | | // } |
| | | // |
| | |
| | | // position: absolute; |
| | | // top: .5rem; |
| | | // right: .5rem; |
| | | // background: var(--action-0); |
| | | // background: rgb(var(--action-0)); |
| | | // color: white; |
| | | // border-radius: 50%; |
| | | // width: 24px; |
| | |
| | | // /* Enhanced details/summary for mobile */ |
| | | // .upload-item details summary { |
| | | // padding: .75rem; |
| | | // background: var(--base-100); |
| | | // background: rgb(var(--base-100)); |
| | | // border-radius: var(--radius); |
| | | // cursor: pointer; |
| | | // display: flex; |
| | |
| | | // |
| | | // .upload-item details[open] summary { |
| | | // border-radius: var(--radius) var(--radius) 0 0; |
| | | // border-bottom: 1px solid var(--base-200); |
| | | // border-bottom: 1px solid rgb(var(--base-200)); |
| | | // } |
| | | // |
| | | // /* Enhanced forms for mobile */ |
| | |
| | | // padding: .75rem; |
| | | // font-size: 16px; /* Prevents zoom on iOS */ |
| | | // border-radius: var(--radius); |
| | | // border: 2px solid var(--base-200); |
| | | // border: 2px solid rgb(var(--base-200)); |
| | | // transition: border-color .2s ease; |
| | | // } |
| | | // |
| | | // .upload-meta input:focus, |
| | | // .upload-meta textarea:focus { |
| | | // border-color: var(--action-0); |
| | | // border-color: rgb(var(--action-0)); |
| | | // outline: none; |
| | | // box-shadow: 0 0 0 3px var(--action-rgb-subtle); |
| | | // } |
| | |
| | | // left: 0; |
| | | // right: 0; |
| | | // z-index: 50; |
| | | // background: var(--base); |
| | | // background: rgb(var(--base)); |
| | | //} |
| | | // |
| | | //.form-actions { |
| | |
| | | // width: 12px; |
| | | // height: 12px; |
| | | // border: 2px solid transparent; |
| | | // border-top: 2px solid var(--action-50); |
| | | // border-top: 2px solid rgb(var(--action-50)); |
| | | // border-radius: 50%; |
| | | // animation: spin 1s linear infinite; |
| | | //} |
| | |
| | | --justify: center; |
| | | padding: .25rem .5rem; |
| | | hyphens: auto; |
| | | background-color: rgba(var(--base-rgb),var(--op-45)); |
| | | background-color: rgba(var(--base),var(--op-45)); |
| | | word-wrap: anywhere; |
| | | white-space: wrap; |
| | | } |
| | | a:hover, |
| | | a:focus, |
| | | a.active { |
| | | background-color: rgba(var(--action-rgb), var(--op-6)); |
| | | background-color: rgba(var(--action-0), var(--op-6)); |
| | | color: var(--action-contrast); |
| | | } |
| | | } |
| | |
| | | outline: none; |
| | | left: -1.5rem; |
| | | padding: 0; |
| | | color: var(--action-0); |
| | | color: rgb(var(--action-0)); |
| | | } |
| | | .glossary dt:target + dd, |
| | | .glossary dt.active + dd { |
| | |
| | | max-width: none; |
| | | padding: 4rem 1rem; |
| | | &:nth-of-type(odd) { |
| | | background-color: var(--base-50); |
| | | background-color: rgb(var(--base-50)); |
| | | blockquote { |
| | | --background: var(--base-50); |
| | | --background: rgb(var(--base-50)); |
| | | } |
| | | } |
| | | &:nth-of-type(even) { |
| | | background-color: var(--base-100); |
| | | background-color: rgb(var(--base-100)); |
| | | blockquote { |
| | | --background: var(--base-100); |
| | | --background: rgb(var(--base-100)); |
| | | } |
| | | } |
| | | } |
| | |
| | | } |
| | | } |
| | | .stars .icon { |
| | | background-color: var(--action-0); |
| | | background-color: rgb(var(--action-0)); |
| | | } |
| | | article { |
| | | padding: 1rem; |
| | | border-radius: var(--radius-outer); |
| | | background-color: var(--base); |
| | | background-color: rgb(var(--base)); |
| | | header { |
| | | --align: center; |
| | | >img { |
| | |
| | | width: max-content; |
| | | } |
| | | .icon { |
| | | color: var(--action-0); |
| | | color: rgb(var(--action-0)); |
| | | } |
| | | } |
| | | .footer .button { |
| | |
| | | img { |
| | | width: 100%; |
| | | height: auto; |
| | | border: 2px solid var(--action-0); |
| | | border: 2px solid rgb(var(--action-0)); |
| | | } |
| | | h3 { |
| | | font-size: var(--txt-x-small); |
| | |
| | | --gap: 2rem; |
| | | padding: 0; |
| | | margin:0; |
| | | background-color: var(--base); |
| | | background-color: rgb(var(--base)); |
| | | max-width: 100vw; |
| | | position: relative; |
| | | overflow: hidden; |
| | |
| | | position: absolute; |
| | | left: -2.5rem; |
| | | top: .25rem; |
| | | background-color: var(--action-100); |
| | | background-color: rgb(var(--action-100)); |
| | | } |
| | | } |
| | | |
| | |
| | | left: 45%; |
| | | height: 100%; |
| | | width: var(--lineWidth); |
| | | background-color: var(--action-0); |
| | | background-color: rgb(var(--action-0)); |
| | | //box-shadow: var(--action-shadow); |
| | | } |
| | | &::before { |
| | |
| | | overflow: hidden; |
| | | display: flex; |
| | | .wrap { |
| | | background-color: var(--contrast-200); |
| | | background-color: rgb(var(--contrast-200)); |
| | | //&::before { |
| | | // position: absolute; |
| | | // top: 0; |
| | | // bottom: 0; |
| | | // left: 0; |
| | | // right: 0; |
| | | // background-color: var(--base); |
| | | // background-color: rgb(var(--base)); |
| | | // mix-blend-mode: lighten; |
| | | // content: ''; |
| | | // z-index: 1; |
| | |
| | | min-height: 100%; |
| | | z-index: 0; |
| | | display: flex; |
| | | background-color: var(--action-50); |
| | | background-color: rgb(var(--action-50)); |
| | | |
| | | &.fade { |
| | | animation: fadeIn 1s ease-in; |
| | |
| | | } |
| | | } |
| | | &:hover { |
| | | background-color: var(--action-0); |
| | | background-color: rgb(var(--action-0)); |
| | | color: var(--action-contrast); |
| | | } |
| | | } |
| | | |
| | | .outline a { |
| | | background-color: rgba(var(--base-rgb), rgba(var(--base-rgb),var(--op-3))); |
| | | background-color: rgba(var(--base), rgba(var(--base),var(--op-3))); |
| | | } |
| | | .buttons { |
| | | margin: 3rem 0; |
| | | li { |
| | | background-color: rgba(var(--action-rgb), var(--op-4)); |
| | | background-color: rgba(var(--action-0), var(--op-4)); |
| | | } |
| | | } |
| | | /* Button styles */ |