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

Refactor theme toggle button positioning and styles

Browse Source 
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.
This commit is contained in:
DJObleezy 2025-04-22 17:57:11 -07:00
parent 0d0a707019
commit e87993a252
1 changed files with 10 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,7 @@
/* Responsive Theme Toggle Button Styles */ /* Theme Toggle Button with positioning logic similar to topRightLink */
/* Common styles for the theme toggle button regardless of device */
#themeToggle, #themeToggle,
.theme-toggle-btn { .theme-toggle-btn {
position: fixed; position: absolute; /* Change from fixed to absolute like topRightLink */
z-index: 1000; z-index: 1000;
background: transparent; background: transparent;
border-width: 1px; border-width: 1px;
@ -16,14 +15,14 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
top: 30px; /* Match the top positioning of topRightLink */
left: 15px; /* Keep on left side */
} }
/* Default positioning and styling for desktop */ /* Desktop specific styling */
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
#themeToggle, #themeToggle,
.theme-toggle-btn { .theme-toggle-btn {
top: 15px;
left: 15px;
padding: 6px 12px; padding: 6px 12px;
font-size: 14px; font-size: 14px;
border-radius: 3px; border-radius: 3px;
@ -46,17 +45,15 @@
} }
} }
/* Mobile-specific styling - MODIFIED to keep left positioning */ /* Mobile-specific styling */
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
#themeToggle, #themeToggle,
.theme-toggle-btn { .theme-toggle-btn {
top: 60px; padding: 6px;
left: 10px; /* Keep on left side */
padding: 8px;
font-size: 12px; font-size: 12px;
border-radius: 50%; border-radius: 50%;
width: 40px; width: 35px;
height: 40px; height: 35px;
} }
/* Use just icon for mobile to save space */ /* Use just icon for mobile to save space */
@ -64,7 +61,7 @@
.theme-toggle-btn:before { .theme-toggle-btn:before {
content: "☀/☾"; content: "☀/☾";
margin-right: 0; margin-right: 0;
font-size: 16px; font-size: 14px;
} }
/* Hide text on mobile */ /* Hide text on mobile */