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
---
feed.css | 110 +++++++++++++++++++++++++++---------------------------
1 files changed, 55 insertions(+), 55 deletions(-)
diff --git a/feed.css b/feed.css
index 97057b1..56009af 100644
--- a/feed.css
+++ b/feed.css
@@ -54,7 +54,7 @@
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);
@@ -160,7 +160,7 @@
}
.label a:hover {
- color: var(--action-0);
+ color: rgb(var(--action-0));
}
/* Favorite Button */
@@ -169,7 +169,7 @@
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: var(--subtle);
border: none;
@@ -185,8 +185,8 @@
button.favourite:hover {
transform: scale(1.1);
- color: var(--action-0);
- background: var(--base);
+ color: rgb(var(--action-0));
+ background: rgb(var(--base));
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
@@ -222,7 +222,7 @@
/* border-radius: var(--radius);*/
}
.feed-filters details[open] summary {
- background-color: var(--base-50);
+ background-color: rgb(var(--base-50));
}
.feed-filters summary:after {
position:absolute;
@@ -240,7 +240,7 @@
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);
@@ -250,8 +250,8 @@
margin-right: .5rem;
}
.type-filter:hover {
- color: var(--action-0);
- border-color: var(--action-0);
+ color: rgb(var(--action-0));
+ border-color: rgb(var(--action-0));
transition: var(--trans-color);
}
.feed-filters .type-filter > label {
@@ -329,7 +329,7 @@
background-color: transparent;
}
.has-filters.filters {
- background-color: var(--base-50);
+ background-color: rgb(var(--base-50));
}
.filter-group {
display: flex;
@@ -355,7 +355,7 @@
max-width: none!important;
width: 100%;
height: 100%;
- background: rgba(var(--base-rgb),var(--op-4));
+ background: rgba(var(--base),var(--op-4));
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
display: flex;
@@ -367,10 +367,10 @@
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.feed-overlay-content {
- background: var(--base);
+ background: rgb(var(--base));
padding: 2rem;
border-radius: 1rem;
- box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+ box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
text-align: center;
width: min(400px, 60vw);
}
@@ -403,7 +403,7 @@
}
.loading .loading-dots {
- color: var(--action-0);
+ color: rgb(var(--action-0));
width: 4px;
aspect-ratio: 1;
border-radius: 50%;
@@ -418,7 +418,7 @@
grid-column-end: 2;
text-align: center;
padding: 2rem;
- background: var(--base);
+ background: rgb(var(--base));
border-radius: 1rem;
margin: 0 auto;
max-width: 600px;
@@ -429,7 +429,7 @@
font-family: var(--heading);
font-size: clamp(1.5rem, 3vw, 2.5rem);
margin: 0 0 2rem 0;
- color: var(--action-0);
+ color: rgb(var(--action-0));
}
.feed-empty-state p {
@@ -440,7 +440,7 @@
}
.feed-empty-state p:last-child {
- color: var(--action-0);
+ color: rgb(var(--action-0));
margin-top: 2rem;
}
@@ -450,7 +450,7 @@
box-shadow: none;
}
50% {
- box-shadow: 0 0 0 4px var(--action-0);
+ box-shadow: 0 0 0 4px rgb(var(--action-0));
}
}
@@ -480,7 +480,7 @@
.artist-tattoos a:has(img) {
overflow: hidden;
- background-color: var(--base-100);
+ background-color: rgb(var(--base-100));
}
.artist-tattoos a:not(.feed-image) img{
width: 100%;
@@ -503,7 +503,7 @@
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;
@@ -530,8 +530,8 @@
width: fit-content;
margin: 1rem auto!important;
color: transparent;
- -webkit-text-stroke: 1px var(--contrast);
- --g: conic-gradient(var(--action-0) 0 0) no-repeat text;
+ -webkit-text-stroke: 1px rgb(var(--contrast));
+ --g: conic-gradient(rgb(var(--action-0)) 0 0) no-repeat text;
background: var(--g) 0, var(--g) 1ch, var(--g) 2ch, var(--g) 3ch, var(--g) 4ch, var(--g) 5ch, var(--g) 6ch;
animation: l17-0 1s linear infinite alternate,
l17-1 2s linear infinite;
@@ -631,8 +631,8 @@
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
- background: var(--base-200);
- color: var(--contrast-200);
+ background: rgb(var(--base-200));
+ color: rgb(var(--contrast-200));
border: none;
border-radius: 4px;
font-size: var(--txt-medium);
@@ -645,12 +645,12 @@
}
.load-more:hover {
- background: var(--action-0);
+ background: rgb(var(--action-0));
transform: translateY(-2px);
}
.load-more:focus-visible {
- outline: 2px solid var(--action-0);
+ outline: 2px solid rgb(var(--action-0));
outline-offset: 2px;
}
@@ -901,20 +901,20 @@
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: 0.9rem;
position: relative;
top: 0.5em;
}
.common-term {
- background: var(--base-50);
+ background: rgb(var(--base-50));
border-radius: var(--radius);
}
@@ -924,7 +924,7 @@
justify-content: center;
gap: 0.5rem;
padding: 1rem;
- color: var(--contrast-100);
+ color: rgb(var(--contrast-100));
font-size: 0.9rem;
}
@@ -936,8 +936,8 @@
text-align: center;
padding: 0.5rem;
font-size: 0.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 {
@@ -949,7 +949,7 @@
.term-breadcrumb {
margin-bottom: 1rem;
padding: 0.5rem;
- background: var(--base-50);
+ background: rgb(var(--base-50));
border-radius: 4px;
}
@@ -959,7 +959,7 @@
gap: 0.5rem;
border: none;
background: none;
- color: var(--contrast);
+ color: rgb(var(--contrast));
cursor: pointer;
padding: 0.5rem;
border-radius: 4px;
@@ -967,7 +967,7 @@
}
.back-to-parent:hover {
- background: var(--base-100);
+ background: rgb(var(--base-100));
}
.term-row {
@@ -983,7 +983,7 @@
background: none;
padding: 0.25rem;
cursor: pointer;
- color: var(--contrast);
+ color: rgb(var(--contrast));
display: flex;
align-items: center;
justify-content: center;
@@ -992,7 +992,7 @@
}
.toggle-children:hover {
- background: var(--base-50);
+ background: rgb(var(--base-50));
}
.loading-indicator {
@@ -1006,8 +1006,8 @@
.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;
}
@@ -1022,7 +1022,7 @@
gap: 0.5rem;
margin-bottom: 1rem;
padding: 0.5rem;
- background: var(--base-50);
+ background: rgb(var(--base-50));
border-radius: 4px;
}
@@ -1039,16 +1039,16 @@
padding: 0.25rem 0.5rem;
border-radius: 4px;
cursor: pointer;
- color: var(--contrast);
+ color: rgb(var(--contrast));
font-size: var(--txt-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 {
@@ -1058,12 +1058,12 @@
.create-term-section {
margin-top: 2rem;
padding-top: 1rem;
- border-top: 1px solid var(--base-100);
+ border-top: 1px solid rgb(var(--base-100));
}
.suggestion-prompt {
font-size: var(--txt-small);
- color: var(--contrast-50);
+ color: rgb(var(--contrast-50));
margin-bottom: 1rem;
}
@@ -1086,14 +1086,14 @@
.name-row input {
width: 100%;
padding: 0.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;
}
@@ -1111,7 +1111,7 @@
dialog[open].gallery-modal {
width: calc(100vw - var(--padding) * 2);
height: 99vh;
- background: var(--base);
+ background: rgb(var(--base));
display: flex;
align-items: center;
justify-content: center;
@@ -1162,7 +1162,7 @@
z-index: 5;
transform: translateY(-50%);
border: none;
- color: var(--contrast);
+ color: rgb(var(--contrast));
cursor: pointer;
padding: 1rem;
transition: color 0.3s ease;
@@ -1171,7 +1171,7 @@
align-items: center;
}
.gallery-nav:hover {
- background-color: rgba(var(--base-rgb),var(--op-6));
+ background-color: rgba(var(--base),var(--op-6));
}
.gallery-nav:hover {
@@ -1199,11 +1199,11 @@
bottom: 1rem;
left: 2rem;
width: calc(100% - 4rem);
- background-color: rgba(var(--base-rgb),var(--op-3));
+ background-color: rgba(var(--base),var(--op-3));
padding: 0;
}
.gallery-content details:hover,
.gallery-content details[open] {
- background-color: rgba(var(--base-rgb),var(--op-6));
+ background-color: rgba(var(--base),var(--op-6));
backdrop-filter: blur(5px);
}
--
Gitblit v1.10.0