mirror of
https://github.com/Retropex/custom-ocean.xyz-dashboard.git
synced 2025-05-12 11:10:44 +02:00
e87993a252
Updated the theme toggle button's positioning from `fixed` to `absolute` for consistency with `topRightLink`. Adjusted top and left positions, clarified media queries for desktop and mobile styles, and modified mobile button dimensions and padding. Reduced icon font size for better fit. These changes enhance the layout and responsiveness across different screen sizes.
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: 6px;
|
|
font-size: 12px;
|
|
border-radius: 50%;
|
|
width: 35px;
|
|
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);
|
|
}
|