From 92e80666d516de64e488e04911c09e65a32e2a05 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Sat, 23 May 2026 18:48:30 +0000
Subject: [PATCH] =Base Styles overhaul. MAJOR NOTE: colour vars changed from hex codes to the rgb numbers (ex: 0,0,0) - this makes setting colour opacity much easier throughout. Likely breaking for most existing themes though
---
dash.css | 798 +++++++++++++++++++-------------------------------------
1 files changed, 276 insertions(+), 522 deletions(-)
diff --git a/dash.css b/dash.css
index 6ed6b8e..cc105ef 100644
--- a/dash.css
+++ b/dash.css
@@ -1,162 +1,265 @@
-:target {
- outline: none!important;
- padding: 0!important;
+header > a {
+ margin: 0 auto;
}
-.dashboard > header {
- justify-content: flex-end;
-}
-.dashboard > header img {
- width: var(--height);
-}
-.dashboard h1:first-of-type {
- margin-top: 4rem!important;
-}
-main > footer {
- max-width: 100%!important;
+
+nav.sidebar {
position: fixed;
- z-index: var(--z-top);
+ top: var(--btn);
bottom: 0;
left: 0;
- right: 0;
- width: 100%;
- margin: 4rem 0 0 0!important;
- height: var(--height);
- padding: 0!important;
- background-color: var(--base);
- box-shadow: var(--shadow);
+ 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);
}
-main>* {
- max-width: min(768px, 90vw)!important;
- margin: 0 auto!important;
-}
-main h1 {
- margin: 0!important;
- font-size: var(--large);
-}
+ 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);
+ }
-.item-grid .item {
- position: relative;
-}
-img {
- width: 100%;
- height: auto;
- aspect-ratio: 1;
- object-fit: cover;
-}
+ nav.sidebar.open {
+ width: fit-content;
+ max-width: 100%;
+ }
-.replace {
- margin-bottom: var(--offHeight)!important;
-}
-/********************************************
-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);
-}
+ nav.sidebar ul {
+ height: max-content;
+ width: 100%;
+ --gap: 0;
+ }
-.grid-view .item .item-actions {
- position: absolute;
+ 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: 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;
+ }
+
+
+
+/** Queue Modifications **/
+aside.main.main#queue {
bottom: 0;
- right: 0;
}
-.list-view h3,
-.list-view p {
- margin: 0!important;
+button.qtoggle.sticky {
+ bottom: 0;
+ left: 0;
}
-@media (min-width: 768px) {
- .grid-view {
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+section.replace {
+ margin: 0 var(--btn_) 0 calc(var(--btn) + var(--chipchip));
+}
+ section.replace > * {
+ max-width: 100%;
}
- .grid-view .item .item-actions {
- bottom: unset;
- top: 0;
- }
-}
-.bulk-controls {
- margin: 1rem 0;
-}
-.bulk-controls .selected-count {
- font-weight: normal;
- font-size: var(--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(--transition-base), opacity var(--transition-base), border var(--transition-base), padding var(--transition-base);
-}
-.selected label:has(:checked) {
- border-color: var(--action-0);
+ .dashboard :is(h1,h2,h3,h4,h5,h6) {
+ text-transform: none;
+ margin: .5em 0 1em;
+ }
+
+ul.dashboard {
+ margin: 0;
padding: 0;
- opacity: 1;
- filter: none;
- transition: filter var(--transition-base), opacity var(--transition-base), border var(--transition-base), padding var(--transition-base);
+ display: flex;
+ justify-content: flex-start;
+ gap: .5rem;
+ flex-wrap: wrap;
}
-/******************************************************
-TABLE VIEW
-******************************************************/
-form.table img {
- max-height: 4rem;
+ 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));
}
-/******************************************************
-FILTERS
-******************************************************/
-.all-filters {
- margin: 2rem 0;
- padding: 1rem 0;
- border-top: 1px solid var(--base-200);
- border-bottom: 1px solid var(--base-200);
-}
-details.uploader + .items-list .all-filters {
- border-top: none;
-}
+
+
.all-filters .filters{
width: 100%;
}
@@ -168,30 +271,44 @@
}
.all-filters span.label {
text-transform: uppercase;
- font-size: var(--small);
+ 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: fit-content;
- padding: .5rem!important;
+ height: var(--chip_);
+ padding: .125rem!important;
min-width: 0;
- min-height: 0;
+ min-height: var(--chip_);
+ width: var(--chip_);
+}
+.all-filters > .row {
+ padding: .25rem 0;
}
.all-filters .btn + label:hover,
.all-filters .btn + label:focus,
.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
@@ -203,7 +320,7 @@
transform-origin: left;
width: 0;
padding: 0;
- transition: transform var(--transition-base), width var(--transition-base), padding var(--transition-base);
+ transition: transform var(--trans-base), width var(--trans-base), padding var(--trans-base);
}
.search-container button {
padding: .5rem;
@@ -215,7 +332,7 @@
.search-container.open .clear-search {
transform: scaleX(1);
transform-origin: left;
- transition: transform var(--transition-base), width var(--transition-base), padding var(--transition-base);
+ transition: transform var(--trans-base), width var(--trans-base), padding var(--trans-base);
}
.all-filters > .search,
input[type=search],
@@ -223,381 +340,18 @@
width: 100%;
}
-/***********************************************************
-TABLE FIELDS
-***********************************************************/
-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(--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(--large);
-}
- .dashboard.dash .replace > ul {
- display: flex;
- list-style: none;
- align-items: flex-start;
- justify-content: flex-start;
- flex-wrap: wrap;
- gap: .5rem;
- }
-.dashboard.settings nav.tabs {
- --height: 3.5rem;
- --x: var(--offHeight);
+********************************************************/
+nav.tabs {
position: fixed;
- bottom: var(--height);
- left: var(--x);
- right: var(--x);
- z-index:99;
- width: calc(100% - var(--x) - var(--x));
- background-color: var(--base);
+ 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);
}
-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(--outerRadius);
- padding: 1rem;
- position: relative;
- transition: all var(--transition-base);
- box-shadow: var(--shadow);
-}
-.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(--medium);
- margin: 0;
-}
-.integration .meta {
- margin-bottom: 1rem;
- text-align: right;
- color: var(--contrast-200);
- font-size: var(--small);
-}
-
-.integration .setup {
- font-size: var(--small);
- font-weight: bold;
- text-transform: uppercase;
-}
-.integration .setup .indicator {
- font-size: var(--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;
-}
-
-.hint {
- line-height: 1.2;
- font-style: italic;
- font-size: var(--small);
-}
-
-.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(--outerRadius);
- 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;
-}
-
+.replace:has(nav.tabs) {
+ margin-top: var(--btn);
+}
\ No newline at end of file
--
Gitblit v1.10.0