From e76a40c2270908529a1a4a75809aef13ebc34c88 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Tue, 23 Dec 2025 20:11:59 +0000
Subject: [PATCH] =Legacy rebrand finished
---
dash.css | 549 ++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 501 insertions(+), 48 deletions(-)
diff --git a/dash.css b/dash.css
index 6ed6b8e..25ad7be 100644
--- a/dash.css
+++ b/dash.css
@@ -6,24 +6,33 @@
justify-content: flex-end;
}
.dashboard > header img {
- width: var(--height);
+ width: 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-top);
- 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);
+ /*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;
@@ -31,7 +40,7 @@
}
main h1 {
margin: 0!important;
- font-size: var(--large);
+ font-size: var(--txt-large);
}
.item-grid .item {
@@ -45,7 +54,7 @@
}
.replace {
- margin-bottom: var(--offHeight)!important;
+ margin: 0 auto 0 var(--btn_) !important;
}
/********************************************
GRID VIEW
@@ -81,10 +90,18 @@
}
.grid-view .item .item-actions {
- position: absolute;
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);
+ }
.list-view h3,
.list-view p {
@@ -95,9 +112,10 @@
.grid-view {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
- .grid-view .item .item-actions {
- bottom: unset;
- top: 0;
+}
+@media (max-width: 768px) {
+ .bulk-controls.bulk-controls.nowrap {
+ --wrap: wrap;
}
}
.bulk-controls {
@@ -105,7 +123,7 @@
}
.bulk-controls .selected-count {
font-weight: normal;
- font-size: var(--small);
+ font-size: var(--txt-small);
text-transform: none;
font-style: italic;
display: flex;
@@ -129,31 +147,137 @@
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);
+ 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(--transition-base), opacity var(--transition-base), border var(--transition-base), padding var(--transition-base);
+ 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 {
- max-height: 4rem;
+ 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: 2rem 0;
+ 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 {
+ width: 100%;
+ }
details.uploader + .items-list .all-filters {
border-top: none;
}
@@ -168,22 +292,33 @@
}
.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 var(--base-200);
+ }
+}
.controls .icon {
--w: 1.4rem;
}
.all-filters .btn + label,
.all-filters button {
- height: fit-content;
+ height: var(--chipchip);
padding: .5rem!important;
min-width: 0;
- min-height: 0;
+ min-height: var(--chipchip);
+ width: var(--chipchip);
}
.all-filters .btn + label:hover,
.all-filters .btn + label:focus,
@@ -203,7 +338,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 +350,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],
@@ -277,7 +412,7 @@
}
.group-fields.hours .time label {
margin: 0;
- font-size: var(--small);
+ font-size: var(--txt-small);
position: absolute;
top: -1rem;
left: 0;
@@ -312,7 +447,7 @@
}
.dashboard.dash h2 {
text-transform: none;
- font-size: var(--large);
+ font-size: var(--txt-large);
}
.dashboard.dash .replace > ul {
display: flex;
@@ -322,17 +457,40 @@
flex-wrap: wrap;
gap: .5rem;
}
-.dashboard.settings nav.tabs {
+ nav.tabs.tabs {
+ bottom: 0;
+ left: 0;
+ right: var(--btn);
+ }
+.dashboard.settings nav.tabs.tabs {
--height: 3.5rem;
- --x: var(--offHeight);
+ --x: var(--btn_);
position: fixed;
- bottom: var(--height);
+ 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;
+ top: var(--btn);
+}
+ .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,
@@ -363,11 +521,11 @@
.integration {
background: var(--base);
border: 2px solid var(--base-200);
- border-radius: var(--outerRadius);
+ border-radius: var(--radius-outer);
padding: 1rem;
position: relative;
- transition: all var(--transition-base);
- box-shadow: var(--shadow);
+ transition: all var(--trans-base);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
}
.integration.connected {
border-color: var(--success);
@@ -386,23 +544,23 @@
}
.integration h3 {
letter-spacing: 1px;
- font-size: var(--medium);
+ font-size: var(--txt-medium);
margin: 0;
}
.integration .meta {
margin-bottom: 1rem;
text-align: right;
color: var(--contrast-200);
- font-size: var(--small);
+ font-size: var(--txt-small);
}
.integration .setup {
- font-size: var(--small);
+ font-size: var(--txt-small);
font-weight: bold;
text-transform: uppercase;
}
.integration .setup .indicator {
- font-size: var(--medium);
+ font-size: var(--txt-medium);
}
.integration .connected .indicator,
.integration .setup .connected {
@@ -442,12 +600,6 @@
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;
@@ -503,7 +655,7 @@
grid-column: 1/-1;
padding: 1rem 10vw;
margin: 0 10vw;
- border-radius: var(--outerRadius);
+ border-radius: var(--radius-outer);
background-color: var(--base-100);
}
@@ -601,3 +753,304 @@
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);
+}
\ No newline at end of file
--
Gitblit v1.10.0