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

78
index.html
View File

@ -250,15 +250,20 @@
display: none !important;
/* Hide the dashboard completely when not needed */
}
#alert-container {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1055; /* Ensure it overlays important elements only */
z-index: 1055;
/* Ensure it overlays important elements only */
display: flex;
flex-direction: column-reverse; /* Stack alerts upwards */
gap: 10px; /* Add space between alerts */
pointer-events: none; /* Prevent container from blocking clicks */
flex-direction: column-reverse;
/* Stack alerts upwards */
gap: 10px;
/* Add space between alerts */
pointer-events: none;
/* Prevent container from blocking clicks */
}
.alert {
@ -277,15 +282,18 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: auto; /* Allow alerts to be interactive */
pointer-events: auto;
/* Allow alerts to be interactive */
}
.alert.success {
border-left: 6px solid #28a745; /* Green border for success */
border-left: 6px solid #28a745;
/* Green border for success */
}
.alert.danger {
border-left: 6px solid #dc3545; /* Red border for danger */
border-left: 6px solid #dc3545;
/* Red border for danger */
}
.alert .close-btn {
@ -294,7 +302,8 @@
color: #e0e0e0;
font-size: 16px;
cursor: pointer;
margin-left: auto; /* Align to the far right */
margin-left: auto;
/* Align to the far right */
}
@media (max-width: 768px) {
@ -307,20 +316,65 @@
max-width: 90%;
font-size: 12px;
padding: 10px 15px;
white-space: normal; /* Allow wrapping on small screens */
text-overflow: clip; /* Disable ellipsis when wrapping */
white-space: normal;
/* Allow wrapping on small screens */
text-overflow: clip;
/* Disable ellipsis when wrapping */
}
}
@media (min-width: 768px) {
.alert {
white-space: nowrap; /* Re-enable nowrap for larger screens */
text-overflow: ellipsis; /* Add ellipsis for overflowed text */
white-space: nowrap;
/* Re-enable nowrap for larger screens */
text-overflow: ellipsis;
/* Add ellipsis for overflowed text */
}
}
#sidebar.collapsed .btn-danger {
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>
</head>