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
---
navBackup.css | 38 +++++++++++++++++++-------------------
1 files changed, 19 insertions(+), 19 deletions(-)
diff --git a/navBackup.css b/navBackup.css
index c0b5410..caf7173 100644
--- a/navBackup.css
+++ b/navBackup.css
@@ -102,15 +102,15 @@
transform-origin: top;
width: 100%;
min-width: max-content;
- background-color: rgba(var(--base-rgb),var(--op-3));
- border: 2px solid rgba(var(--base-rgb),var(--op-3));
+ background-color: rgba(var(--base),var(--op-3));
+ border: 2px solid rgba(var(--base),var(--op-3));
transition: all var(--trans-t) var(--trans-fn);
box-shadow: var(--shdw-none);
overflow: hidden;
}
.submenu li {
- background-color: rgba(var(--base-rgb),var(--op-6));
+ background-color: rgba(var(--base),var(--op-6));
border: 1px solid var(--base-50);
}
.submenu a {
@@ -121,7 +121,7 @@
.open > ul.submenu {
transform: scaleY(1);
max-height: 1000%;
- box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+ box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
}
/**************************************************************
@@ -168,7 +168,7 @@
width: 100vw;
height: 100vh;
padding-bottom: var(--btn_);
- background-color: rgba(var(--base-rgb),var(--op-6));
+ background-color: rgba(var(--base),var(--op-6));
backdrop-filter: blur(5px);
}
@@ -193,7 +193,7 @@
nav.always li {
flex-wrap: wrap;
- background-color: rgba(var(--base-rgb), var(--op-6));
+ background-color: rgba(var(--base), var(--op-6));
}
nav.always a {
@@ -223,11 +223,11 @@
top: 0;
width: 100%;
border: 2px solid var(--action-0);
- background-color: rgba(var(--contrast-rgb), var(--op-1));
+ background-color: rgba(var(--contrast), var(--op-1));
}
nav.always .submenu li {
- background-color: rgba(var(--base-rgb),var(--op-3));
+ background-color: rgba(var(--base),var(--op-3));
}
/* Toggle button */
@@ -239,7 +239,7 @@
height: var(--btn);
background-color: var(--base);
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: width var(--trans-base);
}
nav.always > button:hover {
@@ -249,7 +249,7 @@
nav.always.open > button {
width: 100%;
- background-color: rgba(var(--base-rgb),var(--op-6));
+ background-color: rgba(var(--base),var(--op-6));
backdrop-filter: blur(5px);
z-index: 1000000;
}
@@ -284,7 +284,7 @@
width: max-content;
max-width: var(--full);
position: absolute;
- background-color: rgba(var(--base-rgb),var(--op-4));
+ background-color: rgba(var(--base),var(--op-4));
font-size: var(--txt-x-small);
padding: .125em;
z-index: var(--z-7);
@@ -331,7 +331,7 @@
bottom: 0;
left: 0;
width: calc(100% - var(--btn));
- 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-9);
}
@@ -372,9 +372,9 @@
width: calc(100% - var(--btn));
max-width: none;
padding: 0 .5rem;
- background-color: rgba(var(--base-rgb),var(--op-4));
+ background-color: rgba(var(--base),var(--op-4));
color: var(--base-200);
- 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-6);
}
@@ -409,7 +409,7 @@
justify-content: center;
}
.on-this-page .active a {
- background-color: rgba(var(--base-rgb),var(--op-6));
+ background-color: rgba(var(--base),var(--op-6));
color: var(--action-contrast);
}
.on-this-page a {
@@ -461,7 +461,7 @@
nav.index {
--justify: space-between;
--padding: 0;
- background-color: rgba(var(--base-rgb),var(--op-6));
+ background-color: rgba(var(--base),var(--op-6));
}
.index ul {
@@ -513,7 +513,7 @@
height: var(--maxHeight);
width: 100%;
align-items: flex-end;
- background-color: rgba(var(--base-rgb),var(--op-6));
+ background-color: rgba(var(--base),var(--op-6));
backdrop-filter: blur(5px);
z-index: var(--z-10);
}
@@ -705,7 +705,7 @@
align-items: center;
padding: 0 .5rem;
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-9);
}
@@ -722,7 +722,7 @@
/* padding: .25rem 1rem;*/
/* background-color: var(--action-0);*/
/* color: var(--action-contrast);*/
-/* box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);*/
+/* box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);*/
/* display: flex;*/
/* justify-content: space-between;*/
/* z-index: 100;*/
--
Gitblit v1.10.0