okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style volume silder for small display layout

Browse source
This commit is contained in:
Jason Chen 2022-01-17 21:05:38 -08:00
parent f1a247218e
commit 0e4253ea26
2 changed files with 60 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

74
src/renderer/style.less
View file

@ -836,6 +836,13 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
} }
.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb { .app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 14px;
width: 14px;
border-radius: 50%;
background: rgb(50 50 50);
cursor: default;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
transition: all var(--appleTransition); transition: all var(--appleTransition);
} }
@ -849,10 +856,6 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
transform: scale(1); transform: scale(1);
} }
.app-chrome .app-chrome-item.volume > input[type=range] {
width: 100%;
}
.app-chrome .app-chrome-item.volume > input[type=range] { .app-chrome .app-chrome-item.volume > input[type=range] {
-webkit-appearance: none; -webkit-appearance: none;
height: 4px; height: 4px;
@ -860,16 +863,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
border-radius: 5px; border-radius: 5px;
background-size: 70% 100%; background-size: 70% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
} width: 100%,
.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 14px;
width: 14px;
border-radius: 50%;
background: rgb(50 50 50);
cursor: default;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
} }
.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-runnable-track { .app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-runnable-track {
@ -1155,7 +1149,57 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
/* Window is smaller <= 1023px width */ /* Window is smaller <= 1023px width */
@media only screen and (max-width: 1023px) { @media only screen and (max-width: 1023px) {
.display--small { .display--small {
display: inherit !important; display: inherit !important;;
.slider {
width: 100%;
z-index: 1;
}
.input-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding-bottom: 10px;
}
input[type=range] {
-webkit-appearance: none;
height: 4px;
background: rgba(255, 255, 255, 0.4);
border-radius: 5px;
background-size: 70% 100%;
background-repeat: no-repeat;
&::-webkit-slider-thumb {
-webkit-appearance: none;
height: 14px;
width: 14px;
border-radius: 50%;
background: rgb(50 50 50);
cursor: default;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
transition: all var(--appleTransition);
}
&::-webkit-slider-thumb:hover {
background-image: radial-gradient(var(--keyColor) 2px, transparent 3px, transparent 10px);
transform: scale(1.2);
}
&::-webkit-slider-thumb:active {
background-image: radial-gradient(var(--keyColor) 3px, transparent 4px, transparent 10px);
transform: scale(1);
}
&::-webkit-slider-runnable-track {
-webkit-appearance: none;
box-shadow: none;
border: none;
background: transparent;
}
}
} }
.display--large { .display--large {

2
src/renderer/views/main.ejs
View file

@ -289,8 +289,8 @@
</div> </div>
</div> </div>
<div class="app-chrome-item volume"> <div class="app-chrome-item volume">
<div class="app-chrome-item volume-icon"></div>
<div class="input-container"> <div class="input-container">
<div class="app-chrome-item volume-icon"></div>
<input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" max="1" <input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" max="1"
v-model="mk.volume" v-model="mk.volume"
v-if="typeof mk.volume != 'undefined'"> v-if="typeof mk.volume != 'undefined'">