Retropex/custom-ocean.xyz-dashboard
1
0
Fork 0
mirror of https://github.com/Retropex/custom-ocean.xyz-dashboard.git synced 2025-05-12 19:20:45 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add theme styles for Bitcoin and update DeepSea theme

Browse Source 
Introduce new theme-specific styles for Bitcoin, including primary color and RGB values. Update DeepSea theme styles and implement a CSS variable for the graph container's shadow. Revise focus styles for theme toggle buttons to align with the new themes.
This commit is contained in:
DJObleezy 2025-04-25 17:41:12 -07:00
parent 0d5ddda2f8
commit 312031dcae
1 changed files with 12 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
static/css/theme-toggle.css
View File

@ -91,14 +91,20 @@
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
} }
/* Bitcoin theme graph container (default orange) */ /* Add RGB values for primary colors */
body:not(.deepsea-theme) #graphContainer { html.deepsea-theme {
box-shadow: 0 0 10px rgba(247, 147, 26, 0.2); /* Orange shadow */ --primary-color: #0088cc;
--primary-color-rgb: 0, 136, 204;
} }
/* DeepSea theme graph container (blue) */ html.bitcoin-theme {
body.deepsea-theme #graphContainer { --primary-color: #f2a900;
box-shadow: 0 0 10px rgba(0, 136, 204, 0.2); /* Blue shadow matching DeepSea theme */ --primary-color-rgb: 242, 169, 0;
}
/* Theme-specific graph container shadow using CSS variable */
#graphContainer {
box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.2) !important;
} }
/* Bitcoin theme specific styling (orange) */ /* Bitcoin theme specific styling (orange) */
@ -152,15 +158,6 @@ body.deepsea-theme .theme-toggle-btn:focus {
box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.3); box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.3);
} }
/* Add to your common.css or theme-toggle.css */
html.deepsea-theme {
--primary-color: #0088cc;
}
html.bitcoin-theme {
--primary-color: #f2a900;
}
/* Add these theme-specific loading styles */ /* Add these theme-specific loading styles */
#theme-loader { #theme-loader {
position: fixed; position: fixed;