Scrollbars styled for chrome as well, but chrome is fucky-wucky

This commit is contained in:
Tamius Han 2019-07-02 01:23:43 +02:00
parent 3e627f5fed
commit 8ad0250d7e
2 changed files with 28 additions and 5 deletions

View File

@ -1,10 +1,10 @@
<template> <template>
<div class="popup flex flex-column"> <div class="popup flex flex-column no-overflow">
<div class="header flex-row flex-nogrow flex-noshrink"> <div class="header flex-row flex-nogrow flex-noshrink">
<span class="smallcaps">Ultrawidify</span>: <small>Quick settings</small> <span class="smallcaps">Ultrawidify</span>: <small>Quick settings</small>
</div> </div>
<div class="flex flex-row body no-overflow-y flex-grow"> <div class="flex flex-row body no-overflow flex-grow">
<!-- TABS/SIDEBAR --> <!-- TABS/SIDEBAR -->
<div id="tablist" class="flex flex-column flex-nogrow flex-noshrink h100"> <div id="tablist" class="flex flex-column flex-nogrow flex-noshrink h100">
<div class="menu-item" <div class="menu-item"
@ -517,7 +517,7 @@ html, body {
.tabitem { .tabitem {
font-variant: normal; font-variant: normal;
// font-size: 0.69em; // font-size: 0.69em;
margin-left: 1em; // margin-left: 16px;
border-left: transparent 3px solid; border-left: transparent 3px solid;
padding-left: 12px; padding-left: 12px;
margin-left: -10px; margin-left: -10px;
@ -533,7 +533,7 @@ html, body {
border-left: #f0c089 3px solid !important; border-left: #f0c089 3px solid !important;
} }
.tabitem-selected::before { .tabitem-selected::before {
padding-right: 0.5em; padding-right: 8px;
} }
.tabitem-disabled { .tabitem-disabled {

View File

@ -40,6 +40,8 @@ body {
padding-right: 1em; padding-right: 1em;
} }
/* overflow stuff */ /* overflow stuff */
.overflow-y-auto { .overflow-y-auto {
overflow: auto; overflow: auto;
@ -51,10 +53,31 @@ body {
} }
.no-overflow-y { /* scrollbars for chrome/webkit */
.overflow-y-auto::-webkit-scrollbar {
width: 3px;
}
.overflow-y-auto::-webkit-scrollbar-track {
background: $background-primary;
}
.overflow-y-auto::-webkit-scrollbar-thumb {
background: rgba($primary-color, 0.7);
}
.overflow-y-auto::-webkit-scrollbar-button {
display: none;
}
.scrollbar-darker::-webkit-scrollbar-thumb {
background: rgba($primary-color, 0.5);
}
.no-overflow {
overflow: hidden; overflow: hidden;
} }
.no-overflow-y {
overflow-y: hidden;
}
/* .SELECTED CLASSES */ /* .SELECTED CLASSES */
.selected-tab { .selected-tab {