snxraven/peardock
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style scrollbars

Browse Source
This commit is contained in:
Raven Scott 2024-11-30 15:43:02 -05:00
parent a3c5f18736
commit 57209a8159
1 changed files with 117 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
index.html
View File

@ -250,18 +250,23 @@
display: none !important; display: none !important;
/* Hide the dashboard completely when not needed */ /* Hide the dashboard completely when not needed */
} }
#alert-container { #alert-container {
position: fixed; position: fixed;
bottom: 20px; bottom: 20px;
right: 20px; right: 20px;
z-index: 1055; /* Ensure it overlays important elements only */ z-index: 1055;
/* Ensure it overlays important elements only */
display: flex; display: flex;
flex-direction: column-reverse; /* Stack alerts upwards */ flex-direction: column-reverse;
gap: 10px; /* Add space between alerts */ /* Stack alerts upwards */
pointer-events: none; /* Prevent container from blocking clicks */ gap: 10px;
} /* Add space between alerts */
pointer-events: none;
/* Prevent container from blocking clicks */
}
.alert { .alert {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -277,27 +282,31 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
pointer-events: auto; /* Allow alerts to be interactive */ pointer-events: auto;
} /* Allow alerts to be interactive */
}
.alert.success { .alert.success {
border-left: 6px solid #28a745; /* Green border for success */ border-left: 6px solid #28a745;
} /* Green border for success */
}
.alert.danger { .alert.danger {
border-left: 6px solid #dc3545; /* Red border for danger */ border-left: 6px solid #dc3545;
} /* Red border for danger */
}
.alert .close-btn { .alert .close-btn {
background: none; background: none;
border: none; border: none;
color: #e0e0e0; color: #e0e0e0;
font-size: 16px; font-size: 16px;
cursor: pointer; cursor: pointer;
margin-left: auto; /* Align to the far right */ margin-left: auto;
} /* Align to the far right */
}
@media (max-width: 768px) { @media (max-width: 768px) {
#alert-container { #alert-container {
bottom: 10px; bottom: 10px;
right: 10px; right: 10px;
@ -307,20 +316,65 @@
max-width: 90%; max-width: 90%;
font-size: 12px; font-size: 12px;
padding: 10px 15px; padding: 10px 15px;
white-space: normal; /* Allow wrapping on small screens */ white-space: normal;
text-overflow: clip; /* Disable ellipsis when wrapping */ /* Allow wrapping on small screens */
text-overflow: clip;
/* Disable ellipsis when wrapping */
}
} }
}
@media (min-width: 768px) { @media (min-width: 768px) {
.alert { .alert {
white-space: nowrap; /* Re-enable nowrap for larger screens */ white-space: nowrap;
text-overflow: ellipsis; /* Add ellipsis for overflowed text */ /* Re-enable nowrap for larger screens */
text-overflow: ellipsis;
/* Add ellipsis for overflowed text */
} }
} }
#sidebar.collapsed .btn-danger {
#sidebar.collapsed .btn-danger {
display: none; display: none;
} }
/* General scrollbar styles for dark and skinny scrollbars */
* {
scrollbar-width: thin;
/* Firefox */
scrollbar-color: #555 #1a1a1a;
/* Firefox: thumb and track color */
}
/* WebKit-based browsers (Chrome, Edge, Safari) */
*::-webkit-scrollbar {
width: 8px;
/* Width of vertical scrollbar */
height: 8px;
/* Height of horizontal scrollbar */
}
*::-webkit-scrollbar-track {
background: #1a1a1a;
/* Track color */
}
*::-webkit-scrollbar-thumb {
background-color: #555;
/* Thumb color */
border-radius: 10px;
/* Round the thumb */
border: 2px solid #1a1a1a;
/* Space between thumb and track */
}
*::-webkit-scrollbar-thumb:hover {
background-color: #777;
/* Lighter color on hover */
}
*::-webkit-scrollbar-thumb:active {
background-color: #999;
/* Even lighter color when active */
}
</style> </style>
</head> </head>