| | |
| | | --action-100: #8e2824; |
| | | --action-200: #7a221f; |
| | | --action-contrast: var(--light-0); |
| | | --action-rgb: 183,51,46; |
| | | --action-0: 183,51,46; |
| | | --secondary-0: #E8A737; |
| | | --secondary-50: #e59d20; |
| | | --secondary-100: #d48f18; |
| | | --secondary-200: #bd7f16; |
| | | --secondary-contrast: var(--light-0); |
| | | --secondary-rgb: 232,167,55; |
| | | --secondary-0: 232,167,55; |
| | | |
| | | --success: #22C55E; |
| | | --successBack: #d4edda; |
| | |
| | | --base-50: var(--light-50); |
| | | --base-100: var(--light-100); |
| | | --base-200: var(--light-200); |
| | | --base-rgb: var(--light-rgb); |
| | | --base: var(--light-rgb); |
| | | --contrast: var(--dark-0); |
| | | --contrast-50: var(--dark-50); |
| | | --contrast-100: var(--dark-100); |
| | | --contrast-200: var(--dark-200); |
| | | --contrast-rgb: var(--dark-rgb); |
| | | --contrast: var(--dark-rgb); |
| | | |
| | | --shimmer: rgba(var(--dark-rgb),0) 0%, |
| | | rgba(var(--dark-rgb),.05) 50%, |
| | |
| | | --contrast-50: var(--light-50); |
| | | --contrast-100: var(--light-100); |
| | | --contrast-200: var(--light-200); |
| | | --contrast-rgb: var(--light-rgb); |
| | | --contrast: var(--light-rgb); |
| | | |
| | | --base: var(--dark-0); |
| | | --base-50: var(--dark-50); |
| | | --base-100: var(--dark-100); |
| | | --base-200: var(--dark-200); |
| | | --base-rgb: var(--dark-rgb); |
| | | --base: var(--dark-rgb); |
| | | |
| | | --successBack: #155724; |
| | | --successText:#d4edda; |
| | |
| | | top: 0; |
| | | z-index: var(--z-8); |
| | | background-color: var(--base); |
| | | box-shadow: rgba(var(--base-rgb), var(--op-45)) var(--shdw-down); |
| | | box-shadow: rgba(var(--base), var(--op-45)) var(--shdw-down); |
| | | transition: top var(--trans-base); |
| | | } |
| | | header a[rel="home"] { |
| | |
| | | align-items: center; |
| | | border: 4px solid transparent; |
| | | transition: var(--trans-t); |
| | | box-shadow: 0 0 .25rem 0 rgba(var(--contrast-rgb), .125) inset; |
| | | box-shadow: 0 0 .25rem 0 rgba(var(--contrast), .125) inset; |
| | | cursor: pointer; |
| | | margin: 5px; |
| | | } |
| | |
| | | transform: translateX(-1rem); |
| | | border-radius: .75rem; |
| | | transition: var(--trans-transform); |
| | | box-shadow: 0 0 .25rem 3px rgba(var(--contrast-rgb), .125); |
| | | box-shadow: 0 0 .25rem 3px rgba(var(--contrast), .125); |
| | | } |
| | | |
| | | .toggle-switch input:checked ~ .slider::before { |
| | | transform: translateX(1rem); |
| | | box-shadow: 0 0 .25rem 3px rgba(var(--base-rgb), .25); |
| | | box-shadow: 0 0 .25rem 3px rgba(var(--base), .25); |
| | | } |
| | | |
| | | .toggle-switch input:checked ~ .slider { |
| | |
| | | .favourite { |
| | | position: absolute; |
| | | z-index: var(--z-1); |
| | | box-shadow: rgba(var(--base-rgb),var(--op-2)) var(--shdw); |
| | | background-color: rgba(var(--base-rgb),var(--op-2)); |
| | | box-shadow: rgba(var(--base),var(--op-2)) var(--shdw); |
| | | background-color: rgba(var(--base),var(--op-2)); |
| | | } |
| | | .favourite .icon-heart-fi, |
| | | .favourited .icon-heart { |
| | |
| | | flex-wrap: var(--wrap); |
| | | flex-direction: var(--dir); |
| | | position: relative; |
| | | box-shadow: rgba(var(--base-rgb),var(--op-6)) var(--shdw-inset); |
| | | box-shadow: rgba(var(--base),var(--op-6)) var(--shdw-inset); |
| | | } |
| | | |
| | | [data-filter], .btn + label { |
| | |
| | | display: inline-flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | box-shadow: rgba(var(--base-rgb),var(--op-6)) var(--shdw-inset); |
| | | box-shadow: rgba(var(--base),var(--op-6)) var(--shdw-inset); |
| | | } |
| | | |
| | | /****************************************************************** |
| | |
| | | input:focus-within { |
| | | outline: 2px solid var(--action-0) !important; |
| | | outline-offset: 2px !important; |
| | | box-shadow: 0 0 0 4px rgba(var(--action-rgb), var(--op-3))!important; |
| | | box-shadow: 0 0 0 4px rgba(var(--action-0), var(--op-3))!important; |
| | | } |
| | | |
| | | [aria-busy="true"] { |
| | |
| | | border-radius: 0; |
| | | margin: 4rem auto; |
| | | padding: 3rem; |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-down), rgba(var(--base-rgb),var(--op-45)) var(--shdw-up);; |
| | | box-shadow: rgba(var(--base),var(--op-45)) var(--shdw-down), rgba(var(--base),var(--op-45)) var(--shdw-up);; |
| | | } |
| | | |
| | | blockquote.pull cite { |
| | |
| | | dialog[open], |
| | | aside.expanded { |
| | | background-color: var(--base); |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | box-shadow: rgba(var(--base),var(--op-45)) var(--shdw); |
| | | z-index: var(--z-5); |
| | | } |
| | | |
| | | dialog::backdrop { |
| | | backdrop-filter: blur(5px); |
| | | background-color: rgba(var(--base-rgb),var(--op-4)); |
| | | background-color: rgba(var(--base),var(--op-4)); |
| | | } |
| | | |
| | | dialog[open], |
| | |
| | | width: 100%; |
| | | z-index: var(--z-6); |
| | | background-color: var(--action-100); |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-up); |
| | | box-shadow: rgba(var(--base),var(--op-45)) var(--shdw-up); |
| | | } |
| | | |
| | | .m-actions button { |
| | |
| | | } |
| | | |
| | | thead tr, tfoot tr { |
| | | background-color: rgba(var(--base-rgb),var(--op-6)); |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | background-color: rgba(var(--base),var(--op-6)); |
| | | box-shadow: rgba(var(--base),var(--op-45)) var(--shdw); |
| | | } |
| | | |
| | | thead tr { |
| | |
| | | } |
| | | |
| | | [data-stuck] { |
| | | background-color: rgba(var(--base-rgb),var(--op-4)); |
| | | background-color: rgba(var(--base),var(--op-4)); |
| | | position: sticky; |
| | | left: -1rem; |
| | | z-index: 15; |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-subtle-right); |
| | | box-shadow: rgba(var(--base),var(--op-45)) var(--shdw-subtle-right); |
| | | } |
| | | |
| | | tbody [data-stuck] { |
| | |
| | | max-width: 50vw; |
| | | padding: .5rem; |
| | | 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); |
| | | background: var(--action-0); |
| | | color: var(--action-contrast); |
| | | } |
| | |
| | | .status.failed, |
| | | .status-badge.error, |
| | | #queue .item .status.failed { |
| | | background: var(--error); |
| | | background: rgb(var(--error)); |
| | | color: var(--errorText); |
| | | } |
| | | |
| | |
| | | height: fit-content; |
| | | width: min(400px, 60vw); |
| | | border-radius: var(--radius-outer); |
| | | background-color: rgba(var(--base-rgb),var(--op-4)); |
| | | background-color: rgba(var(--base),var(--op-4)); |
| | | padding: 2rem; |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | box-shadow: rgba(var(--base),var(--op-45)) var(--shdw); |
| | | position: relative; |
| | | } |
| | | |
| | |
| | | width: min(500px, calc(100vw - 2rem)); |
| | | background-color: var(--base); |
| | | z-index: var(--z-5); |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | box-shadow: rgba(var(--base),var(--op-45)) var(--shdw); |
| | | padding: 1rem 1rem var(--btn); |
| | | overflow: hidden auto; |
| | | } |
| | |
| | | bottom: var(--btn_); |
| | | width: var(--btn); |
| | | height: var(--btn); |
| | | background-color: rgba(var(--base-rgb),var(--op-4)); |
| | | background-color: rgba(var(--base),var(--op-4)); |
| | | color: var(--contrast); |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | box-shadow: rgba(var(--base),var(--op-45)) var(--shdw); |
| | | transition: var(--trans-size), var(--trans-color); |
| | | } |
| | | |
| | | .qtoggle:hover, |
| | | .qtoggle:focus { |
| | | background-color: rgba(var(--action-rgb),var(--op-6)); |
| | | background-color: rgba(var(--action-0),var(--op-6)); |
| | | color: var(--action-contrast); |
| | | } |
| | | |
| | |
| | | .qtoggle:disabled:hover, |
| | | .qtoggle:disabled:focus { |
| | | opacity: .5; |
| | | background-color: rgba(var(--base-rgb),var(--op-3)); |
| | | background-color: rgba(var(--base),var(--op-3)); |
| | | color: var(--contrast); |
| | | } |
| | | |
| | |
| | | |
| | | #cart nav.tabs { |
| | | position: sticky; |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | box-shadow: rgba(var(--base),var(--op-45)) var(--shdw); |
| | | } |
| | | |
| | | #cart button[data-tab] { |
| | |
| | | bottom: var(--btn); |
| | | width: 100%; |
| | | max-width: 100%; |
| | | background-color: rgba(var(--base-rgb),var(--op-6)); |
| | | background-color: rgba(var(--base),var(--op-6)); |
| | | z-index: var(--z-6); |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-up); |
| | | box-shadow: rgba(var(--base),var(--op-45)) var(--shdw-up); |
| | | } |
| | | |
| | | .cart-total p { |
| | |
| | | } |
| | | |
| | | #cart .restored { |
| | | background-color: rgba(var(--action-rgb), var(--op-3)); |
| | | background-color: rgba(var(--action-0), var(--op-3)); |
| | | border-radius: var(--radius-outer); |
| | | padding: 1rem; |
| | | } |
| | |
| | | } |
| | | |
| | | .toast { |
| | | background-color: rgba(var(--base-rgb),var(--op-6)); |
| | | background-color: rgba(var(--base),var(--op-6)); |
| | | border-left: 4px solid var(--action-0); |
| | | padding: 1rem; |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | box-shadow: rgba(var(--base),var(--op-45)) var(--shdw); |
| | | left: 0; |
| | | position: relative; |
| | | opacity: 0; |
| | |
| | | } |
| | | |
| | | .toast.error { |
| | | border-left-color: var(--error); |
| | | border-left-color: rgb(var(--error)); |
| | | } |
| | | |
| | | .toast.info { |
| | |
| | | --offset: 0; |
| | | position: absolute; |
| | | top: var(--offset); |
| | | background-color: rgba(var(--base-rgb),var(--op-3)); |
| | | background-color: rgba(var(--base),var(--op-3)); |
| | | } |
| | | |
| | | .expanded + .qtoggle .indicator, |
| | |
| | | } |
| | | #queue .failed .bar, |
| | | #queue .failed_permanent .bar { |
| | | background-color: var(--error); |
| | | background-color: rgb(var(--error)); |
| | | opacity: .2; |
| | | } |
| | | #queue span.completed { |
| | |
| | | } |
| | | |
| | | #queue .item:hover { |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | box-shadow: rgba(var(--base),var(--op-45)) var(--shdw); |
| | | } |
| | | |
| | | #queue .item .header { |
| | |
| | | .additional-actions .buttons button { |
| | | height: var(--btn); |
| | | width: var(--btn); |
| | | background-color: rgba(var(--base-rgb),var(--op-4)); |
| | | background-color: rgba(var(--base),var(--op-4)); |
| | | color: var(--contrast); |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | box-shadow: rgba(var(--base),var(--op-45)) var(--shdw); |
| | | } |
| | | |
| | | .additional-actions .buttons button:hover { |
| | |
| | | .additional-actions .buttons button:disabled:hover, |
| | | .additional-actions .buttons button:disabled:focus { |
| | | opacity: .5; |
| | | background-color: rgba(var(--base-rgb),var(--op-3)); |
| | | background-color: rgba(var(--base),var(--op-3)); |
| | | color: var(--contrast); |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | [type=submit]:hover { |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | box-shadow: rgba(var(--base),var(--op-45)) var(--shdw); |
| | | border: 2px solid var(--action-0); |
| | | color: var(--action-0); |
| | | background-color: var(--action-contrast); |
| | |
| | | } |
| | | |
| | | .restore-form { |
| | | background-color: rgba(var(--action-rgb), var(--op-3)); |
| | | background-color: rgba(var(--action-0), var(--op-3)); |
| | | border: 1px solid var(--action-200); |
| | | padding: .5rem; |
| | | border-radius: var(--radius-outer); |
| | |
| | | |
| | | .fstatus { |
| | | z-index: var(--z-5); |
| | | background-color: rgba(var(--base-rgb),var(--op-6)); |
| | | background-color: rgba(var(--base),var(--op-6)); |
| | | border-radius: 4px; |
| | | padding: 0 .5rem; |
| | | position: fixed; |
| | |
| | | width: calc(100% - 2rem); |
| | | height: calc(100% - 2rem); |
| | | padding: 0; |
| | | background: rgba(var(--base-rgb),var(--op-6)); |
| | | background: rgba(var(--base),var(--op-6)); |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | |
| | | } |
| | | |
| | | dialog.gallery::backdrop { |
| | | background: rgba(var(--base-rgb), var(--op-4)); |
| | | background: rgba(var(--base), var(--op-4)); |
| | | } |
| | | |
| | | dialog.gallery .wrap { |
| | |
| | | } |
| | | |
| | | dialog.gallery .cancel:hover { |
| | | background: rgba(var(--base-rgb),var(--op-4)); |
| | | background: rgba(var(--base),var(--op-4)); |
| | | } |
| | | |
| | | dialog.gallery .content { |
| | |
| | | position: absolute; |
| | | bottom: 1rem; |
| | | left: 1rem; |
| | | background: rgba(var(--base-rgb),var(--op-4)); |
| | | background: rgba(var(--base),var(--op-4)); |
| | | color: var(--contrast); |
| | | padding: 0.4rem 0.8rem; |
| | | border-radius: 3px; |
| | |
| | | aside button:not(.button, .qtoggle, :disabled):hover, |
| | | aside a.button:hover { |
| | | top: -4px; |
| | | box-shadow: rgba(var(--contrast-rgb),var(--op-45)) var(--shdw-down); |
| | | box-shadow: rgba(var(--contrast),var(--op-45)) var(--shdw-down); |
| | | } |
| | | |
| | | .view-dashboard-btn:visited { |
| | |
| | | /*.auto-wrapper {*/ |
| | | /* position: absolute;*/ |
| | | /* bottom: -105%;*/ |
| | | /* background-color: rgba(var(--base-rgb), var(--op-5));*/ |
| | | /* background-color: rgba(var(--base), var(--op-5));*/ |
| | | /* backdrop-filter: blur(2px);*/ |
| | | /* border-radius: var(--radius);*/ |
| | | /* z-index: 1;*/ |
| | |
| | | width: 100%; |
| | | background-color: var(--base-100); |
| | | padding: .5rem; |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | box-shadow: rgba(var(--base),var(--op-45)) var(--shdw); |
| | | } |
| | | li.autocomplete { |
| | | list-style: none; |
| | |
| | | |
| | | @keyframes pulse-color { |
| | | 0% { |
| | | box-shadow: 0 0 0 0 rgba(var(--action-rgb), .4); |
| | | box-shadow: 0 0 0 0 rgba(var(--action-0), .4); |
| | | } |
| | | 30% { |
| | | box-shadow: 0 0 0 .75rem rgba(var(--action-rgb), 0); |
| | | box-shadow: 0 0 0 .75rem rgba(var(--action-0), 0); |
| | | } |
| | | 100% { |
| | | box-shadow: 0 0 0 0 rgba(var(--action-rgb), 0); |
| | | box-shadow: 0 0 0 0 rgba(var(--action-0), 0); |
| | | } |
| | | } |
| | | |