From 4f48b9154270c83324ef6c98f990adbcbe59d073 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Sun, 24 May 2026 02:27:26 +0000
Subject: [PATCH] =switching over
---
dash.css | 1281 +++++++++++----------------------------------------------
1 files changed, 258 insertions(+), 1,023 deletions(-)
diff --git a/dash.css b/dash.css
index 611fab8..cc105ef 100644
--- a/dash.css
+++ b/dash.css
@@ -1,341 +1,265 @@
-:target {
- outline: none!important;
- padding: 0!important;
+header > a {
+ margin: 0 auto;
}
-.dashboard .qtoggle {
- left: 0;
+
+nav.sidebar {
+ position: fixed;
+ top: var(--btn);
bottom: 0;
-}
-.dashboard > header {
- justify-content: flex-end;
-}
-.dashboard > header img {
+ 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);
}
-.dashboard h1:first-of-type {
- margin-top: 4rem!important;
-}
-nav.dashboard-nav,
-nav.dashboard-nav ul {
- --dir: row;
-}
-nav.dashboard-nav ul {
- touch-action: pan-x;
- overflow: auto hidden;
-}
-main > footer {
- /*max-width: 100%!important;*/
- /*position: fixed;*/
- /*z-index: var(--z-7);*/
- /*bottom: 0;*/
- /*left: 0;*/
- /*right: 0;*/
- /*width: 100%;*/
- /*margin: 4rem 0 0 0!important;*/
- /*height: var(--btn);*/
- /*padding: 0!important;*/
- /*background-color: var(--base);*/
- /*box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);*/
- padding: 0;
-}
-main>* {
- max-width: min(768px, 90vw)!important;
- margin: 0 auto!important;
-}
-main h1 {
- margin: 0!important;
- font-size: var(--txt-large);
-}
-
-.item-grid .item {
- position: relative;
-}
-img {
- width: 100%;
- height: auto;
- aspect-ratio: 1;
- object-fit: cover;
-}
-
-.replace.replace {
- grid-column: full;
- padding: 0 var(--btn_) var(--btnbtn);
- max-width: none!important;
- margin: 0!important;
-}
-.replace .dashboard-page {
- max-width: var(--wide);
-}
-.group-display .item-grid {
- grid-template-columns: repeat(2, 1fr);
-}
-/********************************************
-GRID VIEW
-********************************************/
-.item-grid {
- margin-bottom: 4rem;
-}
-.item-grid:has(.select-item:checked) .item {
- padding: .75rem;
- opacity : .8;
- filter: var(--filter);
-}
-.item-grid .item:has(.select-item:checked) {
- padding: .5rem;
- filter: none;
- opacity: 1;
- background-color: var(--action-0);
-}
-
-.grid-view .item > input[type=checkbox]:not(.label-button) + label {
- padding-left: 0;
- margin: 0;
-}
-.grid-view .item > input[type=checkbox] + label::before {
- transform: unset;
- top: .5rem;
- left: .5rem;
-}
-.grid-view .item > input[type=checkbox] + label::after {
- top: .5rem;
- left: .75rem;
- transform: translateY(20%) rotate(45deg);
-}
-
-.grid-view .item .item-actions {
- bottom: 0;
- right: 0;
-}
-.item-actions button {
- min-height: 0;
- width: var(--chipchip);
- height: var(--chipchip);
- background-color: rgba(var(--base-rgb), var(--op-45));
-}
- .item-actions button:hover {
- background-color: var(--base);
+ 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);
}
-.list-view h3,
-.list-view p {
- margin: 0!important;
-}
-.list-view h3 {
- font-size: var(--txt-medium);
-}
-
-@media (min-width: 768px) {
- .grid-view {
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ nav.sidebar.open {
+ width: fit-content;
+ max-width: 100%;
}
-}
-@media (max-width: 768px) {
- .bulk-controls.bulk-controls.nowrap {
- --wrap: wrap;
- }
-}
-.bulk-controls {
- margin: 1rem 0;
-}
-.bulk-controls .selected-count {
- font-weight: normal;
- font-size: var(--txt-small);
- text-transform: none;
- font-style: italic;
- display: flex;
- gap: .25rem;
- margin-left: 2rem;
-}
-.selected-count::before {
- content: '{';
-}
-.selected-count::after {
- content: '}';
-}
-.bulk-edit-form .selected {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
- gap: 4px;
-}
-.selected label {
- padding: .5rem;
- opacity: .6;
- filter: var(--filter);
- border: 2px solid transparent;
- transition: filter var(--trans-base), opacity var(--trans-base), border var(--trans-base), padding var(--trans-base);
-}
-.selected label:has(:checked) {
- border-color: var(--action-0);
- padding: 0;
- opacity: 1;
- filter: none;
- transition: filter var(--trans-base), opacity var(--trans-base), border var(--trans-base), padding var(--trans-base);
-}
-/******************************************************
-TABLE VIEW
-******************************************************/
-form.table label.select-item,
-form.table img {
- width: 6rem;
- height: 6rem;
-}
-form.table .item-grid.preview {
- margin: 0;
-}
-td p {
- width: max-content;
-}
-
-/* Dragging state */
-.timeline-point.is-dragging {
- opacity: 0.4;
- position: relative;
-}
-
-/* Drop indicators with gap */
-.timeline-point.drop-above {
- position: relative;
-}
-
-.timeline-point.drop-above::before {
- content: '';
- position: absolute;
- top: -4px;
- left: 0;
- right: 0;
- height: 8px;
- background: var(--action-0);
- border-radius: 4px;
- z-index: 10;
- animation: pulse 0.6s ease-in-out infinite;
-}
-
-.timeline-point.drop-below {
- position: relative;
-}
-
-.timeline-point.drop-below::after {
- content: '';
- position: absolute;
- bottom: -4px;
- left: 0;
- right: 0;
- height: 8px;
- background: var(--action-0);
- border-radius: 4px;
- z-index: 10;
- animation: pulse 0.6s ease-in-out infinite;
-}
-
-@keyframes pulse {
- 0%, 100% {
- opacity: 0.6;
- transform: scaleY(1);
- }
- 50% {
- opacity: 1;
- transform: scaleY(1.2);
- }
-}
-
-/* Make space for the indicator */
-.timeline-point.drop-above {
- margin-top: 8px;
- transition: margin-top 0.2s ease;
-}
-
-.timeline-point.drop-below {
- margin-bottom: 8px;
- transition: margin-bottom 0.2s ease;
-}
-
-/* Drag handle styling */
-.drag-handle {
- cursor: grab;
- padding: 0.5rem;
- background: transparent;
- border: none;
- opacity: 0.6;
- transition: opacity 0.2s ease;
-}
-
-.drag-handle:hover {
- opacity: 1;
-}
-
-.drag-handle:active,
-.is-dragging .drag-handle {
- cursor: grabbing;
-}
-
-/* Preview styling */
-.drag-preview .drag-handle {
- pointer-events: none;
-}
-
-/******************************************************
-FILTERS
-******************************************************/
-.all-filters {
- margin: 0;
- padding: 1rem 0;
- border-top: 1px solid var(--base-200);
- border-bottom: 1px solid var(--base-200);
- --gap: 0;
-}
-
-.all-filters .row {
- --justify: flex-start;
-}
- .all-filters[open] {
- --gap: .5rem;
- }
- .all-filters summary {
+ nav.sidebar ul {
+ height: max-content;
width: 100%;
- display: flex;
- justify-content: space-between;
+ --gap: 0;
}
- .all-filters summary [data-action="clear-filters"] {
- --w: 1em!important;
- width: max-content;
- font-size: var(--txt-x-small);
+
+ nav.sidebar .toggle {
+ width: var(--btn);
+ height: var(--chipchip);
+ box-shadow: none;
+ background-color: transparent;
+ min-height: 0;
}
- .all-filters [data-action="refresh"] {
- margin-left: auto;
- --w: 1em!important;
- flex-wrap: nowrap;
- justify-content:flex-start;
- transition: var(--trans-size);
- display: flex;
- font-size: var(--txt-x-small);
- }
- .all-filters [data-action="refresh"]:focus,
- .all-filters [data-action="refresh"]:hover {
- width: max-content;
+ nav.sidebar .toggle:hover,
+ nav.sidebar .toggle:focus {
+ background-color: rgb(var(--action-0));
+ color: var(--action-contrast);
}
- .all-filters [data-action="refresh"] span {
- display: none;
- white-space: nowrap;
- }
- .all-filters [data-action="refresh"]:focus span,
- .all-filters [data-action="refresh"]:hover span {
- display: block;
- }
- .all-filters .btn + label {
- box-shadow: var(--shdw-none);
- color: var(--base-200);
+
+ nav.sidebar .title {
+ max-width: 0;
+ opacity: 0;
+ transition: max-width var(--trans-base);
}
- .all-filters .radio-options input:not(.ch):checked + label {
- box-shadow: rgba(var(--base-rgb),var(--op-6)) var(--shdw-inset);
- color: var(--contrast-200);
- border-color: var(--contrast-200);
+ nav.sidebar.open .title {
+ white-space: nowrap;
+ max-width: max-content;
+ opacity: 1;
}
-details.uploader + .items-list .all-filters {
- border-top: none;
+ 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;
+ }
+
+
+
+/** Queue Modifications **/
+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 > footer,
+ .dashboard .main-actions {
+ position: absolute;
+ left: var(--offScreen);
+ width: 0;
+ padding: 0;
+ }
+
+/** FILTERS **/
+.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%;
}
@@ -361,7 +285,7 @@
.all-filters span.label {
padding-top: .5rem;
width: 100%;
- border-top: 1px solid var(--base-200);
+ border-top: 1px solid rgb(var(--base-200));
}
}
.controls .icon {
@@ -383,8 +307,8 @@
.all-filters button:hover,
.all-filters button:focus {
background-color: transparent;
- color: var(--action-0);
- border-color: var(--action-0);
+ color: rgb(var(--action-0));
+ border-color: rgb(var(--action-0));
}
/******************************************************
SEARCH
@@ -416,707 +340,18 @@
width: 100%;
}
-/***********************************************************
-TABLE FIELDS
-***********************************************************/
-.crud form.table td .label,
-.crud form.table td label:not(.select-item-label):not(.radio-option) {
- display: none;
-}
-form.table textarea {
- width: 250px;
- padding: .5rem;
-}
-
-.multi-select summary {
- --gap: 2rem;
- padding-right: 2.5rem;
-}
-
-/************************************************************
+/********************************************************
TABS
-************************************************************/
-dialog.edit[open],
-dialog.bulk-edit[open],
-dialog.create[open] {
- height: 85vh;
- top: 5vh;
-}
-.tab-content h2 {
- display: none;
-}
-
-/**********************************************************
-HOURS
-**********************************************************/
-.group-fields.hours .group-fields,
-.group-fields.hours .group-fields .field {
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-.group-fields.hours .group-fields {
- padding: 1rem .5rem;
- gap: 1rem;
-}
-.group-fields.hours .group-fields:nth-of-type(2n+1) {
- background-color: var(--base);
-}
-.group-fields.hours .group-fields .field {
- margin: 0;
-}
-
-.group-fields.hours .true-false {
- flex: 1;
-}
-.group-fields.hours .time {
- position: relative;
-}
-.group-fields.hours .time label {
- margin: 0;
- font-size: var(--txt-small);
- position: absolute;
- top: -1rem;
- left: 0;
- color: var(--contrast-200);
-}
-/************************************************************
-TODAY HOURS, specific to North'eh
-************************************************************/
-.today_hours {
- width: min(500px, 90vw);
-}
-.today_hours .group-fields {
- width: 100%;
- padding: 0;
- display: flex;
- justify-content: center;
- gap: .5rem;
-}
-@media (min-width: 768px) {
- .today_hours .group-fields {
- padding: 2rem;
- }
-}
-.today_hours .field {
- margin: 0;
-}
-.dash .true-false {
- margin: 0;
-}
-.dash [type=submit] {
- width: 90%;
-}
-.dashboard.dash h2 {
- text-transform: none;
- font-size: var(--txt-large);
-}
- .dashboard.dash .replace > ul {
- display: flex;
- list-style: none;
- align-items: flex-start;
- justify-content: flex-start;
- flex-wrap: wrap;
- gap: .5rem;
- }
- nav.tabs.tabs {
- bottom: 0;
- left: 0;
- right: var(--btn);
- }
-.dashboard.settings nav.tabs.tabs {
- --height: 3.5rem;
- --x: var(--btn_);
+********************************************************/
+nav.tabs {
position: fixed;
- bottom: var(--btn);
- left: var(--x);
- right: var(--x);
- z-index:99;
- width: calc(100% - var(--x) - var(--x));
- background-color: var(--base);
-}
-.jvb-seo-admin nav.tabs.tabs {
- position: sticky;
- padding-bottom: 0;
- bottom: unset;
- left: 0;
- right: 0;
+ 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);
}
- .jvb-seo-admin nav.tabs button {
- border: none;
- margin: 0 .125rem;
- background-color: var(--base-200);
- box-shadow:var(--shdw-none);
- }
- .jvb-seo-admin nav.tabs button.active {
- background-color: var(--base);
- color: var(--action-0);
- }
-nav.integrations ul,
-nav.integrations li,
-nav.integrations a,
-nav.integrations {
- height: auto;
-}
-
-/***************************************
-
-***************************************/
-.replace {
- overflow: hidden;
-}
-body.dash form#options {
- display: flex;
- flex-flow: column nowrap;
- justify-content: center;
- align-items: center;
-}
-
-/***************************************
- INTEGRATIONS
-***************************************/
-.item-grid.integrations {
- grid-template-columns: repeat(2, 1fr);
- gap: 2rem;
-}
-.integration {
- background: var(--base);
- border: 2px solid var(--base-200);
- border-radius: var(--radius-outer);
- padding: 1rem;
- position: relative;
- transition: all var(--trans-base);
- box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
-}
-.integration.connected {
- border-color: var(--success);
-}
-.integration.error,
-.integration.disconnected {
- border-color: var(--error);
-}
-.integration.hasChanges {
- border-color: var(--warning);
-}
-.integration .header {
- margin-bottom: .75rem;
- padding-bottom: .75rem;
- border-bottom: 2px solid var(--base-200);
-}
-.integration h3 {
- letter-spacing: 1px;
- font-size: var(--txt-medium);
- margin: 0;
-}
-.integration .meta {
- margin-bottom: 1rem;
- text-align: right;
- color: var(--contrast-200);
- font-size: var(--txt-small);
-}
-
-.integration .setup {
- font-size: var(--txt-small);
- font-weight: bold;
- text-transform: uppercase;
-}
-.integration .setup .indicator {
- font-size: var(--txt-medium);
-}
-.integration .connected .indicator,
-.integration .setup .connected {
- color: var(--success);
-}
-.integration .disconnected .indicator,
-.integration .setup .disconnected {
- color: var(--error);
-}
-.integration.hasChanges .disconnected {
- color: var(--warning);
-}
-
-.connection-status.connected {
- background-color: var(--successBack);
- color: var(--successText);
-}
-.connection-status.disconnected {
- background-color: var(--errorBack);
- color: var(--errorText);
-}
-
-.integration code {
- display: inline-block;
- width: 90%;
- margin: 0 .5rem;
- user-select: all;
- padding: .75rem;
- border: 2px solid var(--base);
- background-color: var(--base-200);
- word-break: break-all;
-}
-.integration details + details {
- margin-top: 1rem;
-}
-.integration .actions {
- margin-top: 1rem;
-}
-
-.hasChanges button[data-action=save_credentials] {
- border-color: var(--warning);
- animation: pulse-color 1s infinite;
- animation-delay: 1s;
-}
-
-.flash {
- animation: flash .5s;
-}
-.flash.connected {
- --b: var(--success);
-}
-.flash.disconnected {
- --b: var(--error);
-}
-.flash.syncing {
- --b: var(--success);
-}
-.flash.hasChanges,
-.flash.error {
- --b: var(--warning);
-}
-
-@keyframes flash {
- 0%, 100% {border-color: inherit}
- 50% {border-color: var(--b)}
-}
-
-.location.field {
- width: 80vw;
-}
-.location.field > p {
- text-align: center;
-}
-.location.field > p + p {
- margin: 0 .5rem 0 0;
-}
-.location.field .location-map {
- height: 20vh;
-}
-.location.field .location-links {
- padding: .5rem 0;
- display: flex;
- justify-content: space-evenly;
-}
-
-.item-grid .item,
-.field.upload [data-upload-id] {
- touch-action: none;
-}
-
-.empty-state {
- grid-column: 1/-1;
- padding: 1rem 10vw;
- margin: 0 10vw;
- border-radius: var(--radius-outer);
- background-color: var(--base-100);
-}
-
-/****************** TEST ***/
-.jvb-oauth-connect {
- position: relative;
- transition: opacity 0.2s;
-}
-
-.jvb-oauth-connect.loading {
- opacity: 0.6;
- pointer-events: none;
-}
-
-.jvb-oauth-connect.loading::after {
- content: '';
- position: absolute;
- right: -30px;
- top: 50%;
- transform: translateY(-50%);
- width: 16px;
- height: 16px;
- border: 2px solid #ccc;
- border-top-color: #0073aa;
- border-radius: 50%;
- animation: oauth-spin 0.8s linear infinite;
-}
-
-@keyframes oauth-spin {
- to { transform: translateY(-50%) rotate(360deg); }
-}
-
-/* Status Messages */
-.integration-status-message {
- padding: 12px 16px;
- margin: 16px 0;
- border-radius: 4px;
- display: none;
- font-size: 14px;
- line-height: 1.5;
-}
-
-.integration-status-message.success {
- display: block;
- background: #d4edda;
- color: #155724;
- border-left: 4px solid #28a745;
-}
-
-.integration-status-message.error {
- display: block;
- background: #f8d7da;
- color: #721c24;
- border-left: 4px solid #dc3545;
-}
-
-.integration-status-message.info {
- display: block;
- background: #d1ecf1;
- color: #0c5460;
- border-left: 4px solid #17a2b8;
-}
-
-/* Connection Status Indicator */
-.connection-status {
- display: inline-flex;
- align-items: center;
- gap: 8px;
- padding: 6px 12px;
- border-radius: 4px;
- font-size: 13px;
- font-weight: 500;
-}
-
-.connection-status.connected {
- background: #d4edda;
- color: #155724;
-}
-
-.connection-status.disconnected {
- background: #f8d7da;
- color: #721c24;
-}
-
-.status-indicator {
- font-size: 10px;
- line-height: 1;
-}
-
-.connection-status.connected .status-indicator {
- color: #28a745;
-}
-
-.connection-status.disconnected .status-indicator {
- color: #dc3545;
-}
-
-
-
-/*******************************************
-REFERRAL
- */
-.referral-dashboard {
- max-width: var(--wide);
-}
-.card {
- background-color: var(--base-100);
- padding: 30px;
- border-radius: var(--radius-outer);
- text-align: center;
- margin-bottom: 2rem;
-}
-
-.dashboard-page.referral {
- text-align: center;
-}
-.referral-dashboard .empty-state {
- padding: 3rem 7vw;
-}
-.referral-dashboard .empty-state h3 {
- margin-top: 0;
-}
-.referral-dashboard .empty-state h3 .icon:first-of-type {
- margin-right: 1rem;
-}
-.referral-dashboard .empty-state h3 .icon:last-of-type {
- margin-left: 1rem;
-}
-
-.item-grid.stats .card {
- border: 1px solid var(--base);
- display: flex;
- justify-content: flex-end;
- align-items: center;
- flex-direction: column;
-}
-.item-grid.stats .card.highlight {
- box-shadow: var(--contrast-rgb) var(--shadow);
- background-color: var(--action-200);
- color: var(--action-contrast);
- grid-column: 1/-1;
- margin: 0 4rem 30px;
- aspect-ratio: unset;
-}
-.card h4 {
- font-size: var(--medium);
- color: var(--contrast-200);
- font-weight: var(--fw-b-bold);
- margin: 0 0 .5rem;
-}
-.card span {
- color: var(--action-0);
- font-weight: var(--fw-b-bold);
- font-size: var(--txt-xx-large);
-}
- .card.highlight span {
- color: var(--action-contrast);
- }
-
-
-/*.referral-dashboard {*/
-/* max-width: 1200px;*/
-/* margin: 0 auto;*/
-/*}*/
-/*.referral-header {*/
-/* text-align: center;*/
-/* margin-bottom: 30px;*/
-/*}*/
-/*.referral-code-card {*/
-/* background: var(--base-100);*/
-/* padding: 30px;*/
-/* border-radius: 8px;*/
-/* text-align: center;*/
-/* margin-bottom: 30px;*/
-/*}*/
-/*.code-display {*/
-/* display: flex;*/
-/* align-items: center;*/
-/* justify-content: center;*/
-/* gap: 15px;*/
-/* margin: 20px 0;*/
-/*}*/
-/*.code-display .code {*/
-/* font-size: 32px;*/
-/* font-weight: bold;*/
-/* letter-spacing: 2px;*/
-/* color: var(--action-0);*/
-/* user-select: all;*/
-/*}*/
-/*.stats-grid {*/
-/* display: grid;*/
-/* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));*/
-/* gap: 20px;*/
-/* margin-bottom: 30px;*/
-/*}*/
-/*.stat-card {*/
-/* background: white;*/
-/* padding: 25px;*/
-/* border-radius: 8px;*/
-/* border: 1px solid #ddd;*/
-/* text-align: center;*/
-/*}*/
-/*.stat-card.highlight {*/
-/* background: #d4edda;*/
-/* border-color: #c3e6cb;*/
-/*}*/
-/*.stat-card h4 {*/
-/* margin: 0 0 10px 0;*/
-/* color: #666;*/
-/* font-size: 14px;*/
-/* font-weight: 600;*/
-/* text-transform: uppercase;*/
-/*}*/
-/*.stat-number {*/
-/* font-size: 36px;*/
-/* font-weight: bold;*/
-/* color: #2271b1;*/
-/*}*/
-/*.referrals-list-card {*/
-/* background: white;*/
-/* padding: 25px;*/
-/* border-radius: 8px;*/
-/* border: 1px solid #ddd;*/
-/*}*/
-/*.referrals-table {*/
-/* width: 100%;*/
-/* border-collapse: collapse;*/
-/* margin-top: 15px;*/
-/*}*/
-/*.referrals-table th,*/
-/*.referrals-table td {*/
-/* padding: 12px;*/
-/* text-align: left;*/
-/* border-bottom: 1px solid #eee;*/
-/*}*/
-/*.referrals-table th {*/
-/* background: #f5f5f5;*/
-/* font-weight: 600;*/
-/*}*/
-/*.status-badge {*/
-/* padding: 4px 12px;*/
-/* border-radius: 12px;*/
-/* font-size: 12px;*/
-/* font-weight: 500;*/
-/*}*/
-/*.status-badge.pending {*/
-/* background: #fff3cd;*/
-/* color: #856404;*/
-/*}*/
-/*.status-badge.consulted {*/
-/* background: #d1ecf1;*/
-/* color: #0c5460;*/
-/*}*/
-/*.status-badge.treated {*/
-/* background: #d4edda;*/
-/* color: #155724;*/
-/*}*/
-
-nav.sidebar {
- --wrap: nowrap;
- position: fixed;
- top: var(--btn);
- bottom: 0;
- left: 0;
- z-index: var(--z-4);
- height: calc(100% - var(--btn));
- 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;
-}
-nav.sidebar .icon {
- --w: var(--chip_);
- width: var(--btn);
- transition: var(--trans-size), margin var(--trans-base);
-}
-nav.sidebar.open {
- width: fit-content;
- max-width: 100%;
-}
-nav.sidebar.open .icon {
- --w: var(--chip);
- margin: .75rem;
- width: var(--w);
-}
-
-nav.sidebar ul {
- height: max-content;
- width: 100%;
- --gap: 0;
-}
-nav.sidebar .title {
- display: block;
-}
-/*nav.sidebar .title,*/
-/*nav.sidebar .toggle {*/
-/* transition: var(--trans-size);*/
-/*}*/
-nav.sidebar .toggle {
- width: var(--btn);
- height: var(--chipchip);
- box-shadow: none;
- background-color: transparent;
- min-height: 0;
-}
-nav.sidebar .toggle:hover,
-nav.sidebar .toggle:focus {
- background-color:var(--action-0);
- color: var(--action-contrast);
-}
-
-/*nav.sidebar:not(.open) .title,*/
-/*nav.sidebar:not(.open) .toggle:not(.main) {*/
-/* position: absolute;*/
-/* left: var(--offScreen);*/
-/* width: 0;*/
-/* height: 0;*/
-/* max-width: 0;*/
-/* max-height: 0;*/
-/*}*/
-nav.sidebar .toggle.main {
- position: fixed;
- left: unset;
- bottom: 0;
- right: 0;
- width: var(--btn);
- height: var(--btn);
- z-index: var(--z-8);
- box-shadow: rgba(var(--base-rgb), var(--op-45)) var(--shdw);
-}
-
-nav.sidebar .title {
- white-space: nowrap;
-}
-
-nav.sidebar li {
- --justify: center;
- flex-wrap: nowrap;
- overflow: hidden;
- align-items: flex-start;
-}
-nav.sidebar.open li > div {
- width: 100%;
- padding-right: var(--btn);
-}
-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);
- /*width: var(--btn);*/
- 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;
-}
-
-
-
-header .title,
-header .title a {
- height: var(--btn);
- margin: 0;
- display:block;
-}
-header .title {
- margin-left: var(--btn);
-}
-header .title a {
- width: var(--btn);
-}
-
-.dashboard #queue{
- bottom:0;
+.replace:has(nav.tabs) {
+ margin-top: var(--btn);
}
\ No newline at end of file
--
Gitblit v1.10.0