mirror of
https://github.com/Retropex/custom-ocean.xyz-dashboard.git
synced 2025-05-12 11:10:44 +02:00
a802880011
Updated `theme-toggle.css` for improved mobile styling of the theme toggle button, increasing padding and width. Reorganized CSS variables in `theme.js` for the DeepSea theme to enhance structure and readability. Adjusted color selectors for consistency across elements, including pool hashrate and navigation links, and modified button hover effects to utilize new primary color variables for a cohesive theme.
144 lines
3.7 KiB
CSS
144 lines
3.7 KiB
CSS
/* Theme Toggle Button with positioning logic similar to topRightLink */
|
|
#themeToggle,
|
|
.theme-toggle-btn {
|
|
position: absolute; /* Change from fixed to absolute like topRightLink */
|
|
z-index: 1000;
|
|
background: transparent;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
font-family: 'VT323', monospace;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
text-transform: uppercase;
|
|
outline: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
top: 30px; /* Match the top positioning of topRightLink */
|
|
left: 15px; /* Keep on left side */
|
|
}
|
|
|
|
/* Desktop specific styling */
|
|
@media screen and (min-width: 768px) {
|
|
#themeToggle,
|
|
.theme-toggle-btn {
|
|
padding: 6px 12px;
|
|
font-size: 14px;
|
|
border-radius: 3px;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
/* Add theme icon for desktop view */
|
|
#themeToggle:before,
|
|
.theme-toggle-btn:before {
|
|
content: " ₿|🌊";
|
|
margin-right: 5px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Hover effects for desktop */
|
|
#themeToggle:hover,
|
|
.theme-toggle-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
|
}
|
|
}
|
|
|
|
/* Mobile-specific styling */
|
|
@media screen and (max-width: 767px) {
|
|
#themeToggle,
|
|
.theme-toggle-btn {
|
|
padding: 10px;
|
|
font-size: 12px;
|
|
border-radius: 3px;
|
|
width: 40px;
|
|
height: 35px;
|
|
}
|
|
|
|
/* Use just icon for mobile to save space */
|
|
#themeToggle:before,
|
|
.theme-toggle-btn:before {
|
|
content: " ₿|🌊";
|
|
margin-right: 0;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Hide text on mobile */
|
|
#themeToggle span,
|
|
.theme-toggle-btn span {
|
|
display: none;
|
|
}
|
|
|
|
/* Adjust position when in portrait mode on very small screens */
|
|
@media screen and (max-height: 500px) {
|
|
#themeToggle,
|
|
.theme-toggle-btn {
|
|
top: 5px;
|
|
left: 5px; /* Keep on left side */
|
|
width: 35px;
|
|
height: 35px;
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* The rest of the CSS remains unchanged */
|
|
/* Active state for the button */
|
|
#themeToggle:active,
|
|
.theme-toggle-btn:active {
|
|
transform: translateY(1px);
|
|
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* Bitcoin theme specific styling (orange) */
|
|
body:not(.deepsea-theme) #themeToggle,
|
|
body:not(.deepsea-theme) .theme-toggle-btn {
|
|
color: #f2a900;
|
|
border-color: #f2a900;
|
|
}
|
|
|
|
body:not(.deepsea-theme) #themeToggle:hover,
|
|
body:not(.deepsea-theme) .theme-toggle-btn:hover {
|
|
background-color: rgba(242, 169, 0, 0.1);
|
|
box-shadow: 0 4px 8px rgba(242, 169, 0, 0.3);
|
|
}
|
|
|
|
/* DeepSea theme specific styling (blue) */
|
|
body.deepsea-theme #themeToggle,
|
|
body.deepsea-theme .theme-toggle-btn {
|
|
color: #0088cc;
|
|
border-color: #0088cc;
|
|
}
|
|
|
|
body.deepsea-theme #themeToggle:hover,
|
|
body.deepsea-theme .theme-toggle-btn:hover {
|
|
background-color: rgba(0, 136, 204, 0.1);
|
|
box-shadow: 0 4px 8px rgba(0, 136, 204, 0.3);
|
|
}
|
|
|
|
/* Transition effect for smoother theme switching */
|
|
#themeToggle,
|
|
.theme-toggle-btn,
|
|
#themeToggle:before,
|
|
.theme-toggle-btn:before {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* Accessibility improvements */
|
|
#themeToggle:focus,
|
|
.theme-toggle-btn:focus {
|
|
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3);
|
|
outline: none;
|
|
}
|
|
|
|
body:not(.deepsea-theme) #themeToggle:focus,
|
|
body:not(.deepsea-theme) .theme-toggle-btn:focus {
|
|
box-shadow: 0 0 0 3px rgba(242, 169, 0, 0.3);
|
|
}
|
|
|
|
body.deepsea-theme #themeToggle:focus,
|
|
body.deepsea-theme .theme-toggle-btn:focus {
|
|
box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.3);
|
|
}
|