djsundog/ffplayout
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style chrome scrollbar

Browse Source
This commit is contained in:
jb-alvarado 2022-10-12 20:16:13 +02:00
parent 0060d40b59
commit 0994fd00d1
1 changed files with 56 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
assets/scss/globals.scss
View File

@ -1,9 +1,12 @@
#__nuxt, #__layout, #__layout > div, #__layout > div > div {
#__nuxt,
#__layout,
#__layout > div,
#__layout > div > div {
height: 100%;
width: 100%;
}
@font-face{
@font-face {
font-family: "DigitalNumbers-Regular";
src: url("~@/assets/fonts/DigitalNumbers-Regular.woff2") format("woff2");
font-weight: normal;
@ -35,44 +38,53 @@
}
.breadcrumb {
margin-bottom: .2em;
margin-bottom: 0.2em;
}
.browser-item {
background: none;
padding: .1em;
padding: 0.1em;
border: none;
}
.browser-icons {
margin-right: .5em;
margin-right: 0.5em;
}
.breadcrumb {
background-color: #32383E;
background-color: #32383e;
background-image: none;
}
.duration {
float: right;
margin-right: .5em;
margin-right: 0.5em;
}
.form-control, .tags-list ul li div input, .custom-select, .custom-control-label::before {
.form-control,
.tags-list ul li div input,
.custom-select,
.custom-control-label::before {
color: #e4e4e4;
background-color: #32383E;
background-color: #32383e;
}
.form-control:disabled, .form-control[readonly] {
.form-control:disabled,
.form-control[readonly] {
color: #b4b4b4;
background-color:#485159;
background-color: #485159;
}
.custom-select {
background: #32383E url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='rgb(228, 228, 228)' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 1rem center/8px 10px;
background: #32383e
url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='rgb(228, 228, 228)' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
no-repeat right 1rem center/8px 10px;
}
.form-control:focus, .form-control.focus, .b-form-tags.focus, .custom-select:focus {
.form-control:focus,
.form-control.focus,
.b-form-tags.focus,
.custom-select:focus {
color: #f5f5f5;
background-color: #424a53;
}
@ -83,7 +95,7 @@
}
.custom-file-label::after {
background-color: #32383E;
background-color: #32383e;
color: #f5f5f5;
}
@ -99,7 +111,7 @@
}
.browser-div .ps {
padding-left: .4em;
padding-left: 0.4em;
}
.ps__thumb-x {
@ -112,14 +124,15 @@
.splitpanes.default-theme .splitpanes__pane {
background-color: $dark;
box-shadow: 0 0 10px rgba(0, 0, 0, .2) inset;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) inset;
justify-content: center;
align-items: center;
display: flex;
position: relative;
}
.default-theme.splitpanes--vertical > .splitpanes__splitter, .default-theme .splitpanes--vertical > .splitpanes__splitter {
.default-theme.splitpanes--vertical > .splitpanes__splitter,
.default-theme .splitpanes--vertical > .splitpanes__splitter {
border-left: 1px solid $dark;
}
@ -127,11 +140,17 @@
background-color: $dark;
}
.splitpanes.default-theme .splitpanes__splitter::after, .splitpanes.default-theme .splitpanes__splitter::before {
.splitpanes.default-theme .splitpanes__splitter::after,
.splitpanes.default-theme .splitpanes__splitter::before {
background-color: rgba(136, 136, 136, 0.38);
}
.ps .ps__rail-x:hover, .ps .ps__rail-y:hover, .ps .ps__rail-x:focus, .ps .ps__rail-y:focus, .ps .ps__rail-x.ps--clicking, .ps .ps__rail-y.ps--clicking {
.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
background-color: transparent;
}
@ -182,10 +201,27 @@
}
.progress-bar {
background-color: #ff9c36
background-color: #ff9c36;
}
.grabbing {
cursor: -webkit-grabbing;
cursor: grabbing;
}
::-webkit-scrollbar {
width: 9px;
height: 9px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: rgba(60, 65, 65, 0.705);
border-radius: 5px;
border: transparent;
min-height: 40px;
}