misc_pterodactyl-panel/resources/styles/components/miscellaneous.css
Charles Morgan 03f37e1fb9
Add global scrollbar styling
Addeding styling to the scroll bar so its not "out of place" from everything else. Open to changes to the style. Anything is better then what it was.

Maybe remove the hover color?
2020-06-14 03:45:56 -04:00

65 lines
1.4 KiB
CSS

code.clean {
@apply .font-mono .px-2 .py-1;
background-color: #eef1f6;
color: #596981;
border-radius: 2px;
border: 1px solid rgba(0, 0, 0, .1);
display: inline-block;
}
.grey-row-box {
@apply .flex .rounded .no-underline .text-neutral-200 .items-center .bg-neutral-700 .p-4 .border .border-transparent;
transition: border-color 150ms linear;
&:not(.no-hover):hover {
@apply .border-neutral-500;
}
& > div.icon {
@apply .rounded-full .bg-neutral-500 .p-3;
}
}
.grey-box {
@apply .shadow-md .bg-neutral-700 .rounded .p-3 .flex .text-xs;
&:not(.mt-0) {
@apply .mt-4;
}
}
::-webkit-scrollbar {
background: none;
width: 16px;
height: 16px;
}
::-webkit-scrollbar-thumb {
border: solid 0 rgb(0 0 0 / 0%);
border-right-width: 4px;
border-left-width: 4px;
-webkit-border-radius: 9px 4px;
-webkit-box-shadow: inset 0 0 0 1px hsl(211, 10%, 53%), inset 0 0 0 4px hsl(209deg 18% 30%);
}
::-webkit-scrollbar-track-piece {
margin: 4px 0;
}
::-webkit-scrollbar-thumb:horizontal {
border-right-width: 0;
border-left-width: 0;
border-top-width: 4px;
border-bottom-width: 4px;
-webkit-border-radius: 4px 9px;
}
::-webkit-scrollbar-thumb:hover {
-webkit-box-shadow:
inset 0 0 0 1px hsl(212, 92%, 43%),
inset 0 0 0 4px hsl(212, 92%, 43%);
}
::-webkit-scrollbar-corner {
background: transparent;
}