mirror of
https://github.com/zen-browser/desktop.git
synced 2025-09-06 03:18:19 +00:00
format
This commit is contained in:
Slowlife01
@@ -1,191 +1,200 @@
|
|||||||
#zen-media-controls-toolbar {
|
#zen-media-controls-toolbar {
|
||||||
--progress-height: 5px;
|
--progress-height: 5px;
|
||||||
--button-spacing: 2px;
|
--button-spacing: 2px;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
background: var(--zen-toolbar-element-bg) !important;
|
background: var(--zen-toolbar-element-bg) !important;
|
||||||
container-type: inline-size;
|
container-type: inline-size;
|
||||||
|
|
||||||
.toolbarbutton-1 {
|
.toolbarbutton-1 {
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
#zen-media-prev-button,
|
#zen-media-prev-button,
|
||||||
#zen-media-play-pause-button,
|
#zen-media-play-pause-button,
|
||||||
#zen-media-next-button {
|
#zen-media-next-button {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
image.toolbarbutton-icon {
|
image.toolbarbutton-icon {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
width: 26px;
|
width: 26px;
|
||||||
height: 26px;
|
height: 26px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#zen-media-progress-bar {
|
#zen-media-progress-bar {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: var(--progress-height);
|
height: var(--progress-height);
|
||||||
margin: 0 8px;
|
margin: 0 8px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
background-color: rgba(255, 255, 255, 0.2);
|
background-color: rgba(255, 255, 255, 0.2);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: height 0.15s ease-out;
|
transition: height 0.15s ease-out;
|
||||||
|
|
||||||
&::-moz-range-track {
|
&::-moz-range-track {
|
||||||
background: var(--zen-colors-border);
|
background: var(--zen-colors-border);
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
height: var(--progress-height);
|
height: var(--progress-height);
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-moz-range-progress {
|
&::-moz-range-progress {
|
||||||
background: var(--zen-primary-color);
|
background: var(--zen-primary-color);
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
height: var(--progress-height);
|
height: var(--progress-height);
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-moz-range-thumb {
|
&::-moz-range-thumb {
|
||||||
background: var(--zen-primary-color);
|
background: var(--zen-primary-color);
|
||||||
border: none;
|
border: none;
|
||||||
width: 14px;
|
width: 14px;
|
||||||
height: 14px;
|
height: 14px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
.show-on-hover {
|
.show-on-hover {
|
||||||
max-height: 50px;
|
max-height: 50px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#zen-media-focus-button {
|
#zen-media-focus-button {
|
||||||
width: 34px;
|
width: 34px;
|
||||||
height: 26px;
|
height: 26px;
|
||||||
align-self: center;
|
align-self: center;
|
||||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
transition:
|
||||||
|
opacity 0.2s ease,
|
||||||
@container (max-width: 185px) {
|
transform 0.2s ease;
|
||||||
width: 0;
|
|
||||||
height: 0;
|
@container (max-width: 185px) {
|
||||||
opacity: 0;
|
width: 0;
|
||||||
padding: 0;
|
height: 0;
|
||||||
transform: translateX(-20px);
|
opacity: 0;
|
||||||
}
|
padding: 0;
|
||||||
|
transform: translateX(-20px);
|
||||||
@container (min-width: 185px) {
|
}
|
||||||
opacity: 1;
|
|
||||||
transform: translateX(0);
|
@container (min-width: 185px) {
|
||||||
}
|
opacity: 1;
|
||||||
}
|
transform: translateX(0);
|
||||||
|
}
|
||||||
toolbaritem {
|
}
|
||||||
flex-grow: 1;
|
|
||||||
padding: 0;
|
toolbaritem {
|
||||||
transition: padding 0.3s ease-out;
|
flex-grow: 1;
|
||||||
}
|
padding: 0;
|
||||||
|
transition: padding 0.3s ease-out;
|
||||||
.show-on-hover {
|
}
|
||||||
padding-inline: 4px;
|
|
||||||
max-height: 0;
|
.show-on-hover {
|
||||||
opacity: 0;
|
padding-inline: 4px;
|
||||||
overflow: hidden;
|
max-height: 0;
|
||||||
transform: translateY(5px);
|
opacity: 0;
|
||||||
transition: max-height 0.35s ease-in-out,
|
overflow: hidden;
|
||||||
opacity 0.25s ease-in-out,
|
transform: translateY(5px);
|
||||||
transform 0.3s ease-in-out;
|
transition:
|
||||||
}
|
max-height 0.35s ease-in-out,
|
||||||
|
opacity 0.25s ease-in-out,
|
||||||
#zen-media-current-time,
|
transform 0.3s ease-in-out;
|
||||||
#zen-media-duration {
|
}
|
||||||
margin: 0 0 0 1px;
|
|
||||||
}
|
#zen-media-current-time,
|
||||||
}
|
#zen-media-duration {
|
||||||
|
margin: 0 0 0 1px;
|
||||||
@keyframes zen-media-controls-show {
|
}
|
||||||
from { opacity: 0; transform: translateY(10px); }
|
}
|
||||||
to { opacity: 1; transform: translateY(0); }
|
|
||||||
}
|
@keyframes zen-media-controls-show {
|
||||||
|
from {
|
||||||
#zen-media-controls-toolbar {
|
opacity: 0;
|
||||||
&:not([hidden]) {
|
transform: translateY(10px);
|
||||||
animation: zen-media-controls-show 0.2s ease-out;
|
}
|
||||||
display: flex;
|
to {
|
||||||
}
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
&[hidden] {
|
}
|
||||||
display: none;
|
}
|
||||||
animation: none;
|
|
||||||
transition: none;
|
#zen-media-controls-toolbar {
|
||||||
}
|
&:not([hidden]) {
|
||||||
}
|
animation: zen-media-controls-show 0.2s ease-out;
|
||||||
|
display: flex;
|
||||||
#zen-media-service-title,
|
}
|
||||||
#zen-media-title,
|
|
||||||
#zen-media-artist {
|
&[hidden] {
|
||||||
white-space: nowrap;
|
display: none;
|
||||||
width: 0;
|
animation: none;
|
||||||
margin-left: 0;
|
transition: none;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
#zen-media-service-title {
|
|
||||||
align-self: center;
|
#zen-media-service-title,
|
||||||
font-size: 13px;
|
#zen-media-title,
|
||||||
margin-bottom: 5px;
|
#zen-media-artist {
|
||||||
margin-left: 6px;
|
white-space: nowrap;
|
||||||
}
|
width: 0;
|
||||||
|
margin-left: 0;
|
||||||
#zen-media-title,
|
}
|
||||||
#zen-media-artist {
|
|
||||||
align-self: start;
|
#zen-media-service-title {
|
||||||
margin-top: 5px;
|
align-self: center;
|
||||||
}
|
font-size: 13px;
|
||||||
|
margin-bottom: 5px;
|
||||||
#zen-media-title {
|
margin-left: 6px;
|
||||||
height: 16px;
|
}
|
||||||
font-size: 16px;
|
|
||||||
font-weight: bold;
|
#zen-media-title,
|
||||||
}
|
#zen-media-artist {
|
||||||
|
align-self: start;
|
||||||
#zen-media-artist {
|
margin-top: 5px;
|
||||||
height: 5px;
|
}
|
||||||
padding-bottom: 20px;
|
|
||||||
}
|
#zen-media-title {
|
||||||
|
height: 16px;
|
||||||
#zen-media-main-vbox,
|
font-size: 16px;
|
||||||
#zen-media-service-hbox,
|
font-weight: bold;
|
||||||
#zen-media-info-vbox,
|
}
|
||||||
#zen-media-progress-hbox {
|
|
||||||
width: 100%;
|
#zen-media-artist {
|
||||||
}
|
height: 5px;
|
||||||
|
padding-bottom: 20px;
|
||||||
#zen-media-main-vbox {
|
}
|
||||||
height: 100%;
|
|
||||||
justify-content: space-between;
|
#zen-media-main-vbox,
|
||||||
overflow: hidden;
|
#zen-media-service-hbox,
|
||||||
}
|
#zen-media-info-vbox,
|
||||||
|
#zen-media-progress-hbox {
|
||||||
#zen-media-progress-hbox {
|
width: 100%;
|
||||||
flex-grow: 1;
|
}
|
||||||
align-items: center;
|
|
||||||
}
|
#zen-media-main-vbox {
|
||||||
|
height: 100%;
|
||||||
#zen-media-controls-hbox {
|
justify-content: space-between;
|
||||||
align-items: flex-end;
|
overflow: hidden;
|
||||||
justify-content: space-evenly;
|
}
|
||||||
max-width: 100%;
|
|
||||||
overflow: hidden;
|
#zen-media-progress-hbox {
|
||||||
}
|
flex-grow: 1;
|
||||||
|
align-items: center;
|
||||||
#zen-media-service-button image {
|
}
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
#zen-media-controls-hbox {
|
||||||
}
|
align-items: flex-end;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
max-width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#zen-media-service-button image {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|||||||
@@ -1179,7 +1179,7 @@ menupopup > menuitem:is([type='checkbox']) .menu-iconic-left {
|
|||||||
list-style-image: url('close.svg') !important;
|
list-style-image: url('close.svg') !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#zen-media-controls-toolbar:hover {
|
#zen-media-controls-toolbar:hover {
|
||||||
#zen-media-focus-button {
|
#zen-media-focus-button {
|
||||||
list-style-image: url('screen.svg') !important;
|
list-style-image: url('screen.svg') !important;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user