mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-09-05 19:08:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

format

Browse Source
This commit is contained in:
Slowlife01
2025-03-11 09:17:11 +07:00
parent e6552c8dda
commit 5867ae2f93
2 changed files with 201 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

391
src/browser/base/content/zen-styles/zen-media-controls.css
View File

@@ -1,191 +1,200 @@
#zen-media-controls-toolbar {
--progress-height: 5px;
--button-spacing: 2px;
display: flex;
justify-content: space-between;
min-width: 0;
padding: 5px;
border-radius: 10px;
background: var(--zen-toolbar-element-bg) !important;
container-type: inline-size;
.toolbarbutton-1 {
border-radius: 5px;
color: white;
}
#zen-media-prev-button,
#zen-media-play-pause-button,
#zen-media-next-button {
margin: 0;
}
image.toolbarbutton-icon {
padding: 5px;
width: 26px;
height: 26px;
}
#zen-media-progress-bar {
appearance: none;
width: 100%;
height: var(--progress-height);
margin: 0 8px;
border-radius: 2px;
background-color: rgba(255, 255, 255, 0.2);
cursor: pointer;
transition: height 0.15s ease-out;
&::-moz-range-track {
background: var(--zen-colors-border);
border-radius: 999px;
height: var(--progress-height);
}
&::-moz-range-progress {
background: var(--zen-primary-color);
border-radius: 999px;
height: var(--progress-height);
}
&::-moz-range-thumb {
background: var(--zen-primary-color);
border: none;
width: 14px;
height: 14px;
border-radius: 50%;
cursor: pointer;
}
}
&:hover {
.show-on-hover {
max-height: 50px;
opacity: 1;
transform: translateY(0);
}
}
#zen-media-focus-button {
width: 34px;
height: 26px;
align-self: center;
transition: opacity 0.2s ease, transform 0.2s ease;
@container (max-width: 185px) {
width: 0;
height: 0;
opacity: 0;
padding: 0;
transform: translateX(-20px);
}
@container (min-width: 185px) {
opacity: 1;
transform: translateX(0);
}
}
toolbaritem {
flex-grow: 1;
padding: 0;
transition: padding 0.3s ease-out;
}
.show-on-hover {
padding-inline: 4px;
max-height: 0;
opacity: 0;
overflow: hidden;
transform: translateY(5px);
transition: max-height 0.35s ease-in-out,
opacity 0.25s ease-in-out,
transform 0.3s ease-in-out;
}
#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); }
}
#zen-media-controls-toolbar {
&:not([hidden]) {
animation: zen-media-controls-show 0.2s ease-out;
display: flex;
}
&[hidden] {
display: none;
animation: none;
transition: none;
}
}
#zen-media-service-title,
#zen-media-title,
#zen-media-artist {
white-space: nowrap;
width: 0;
margin-left: 0;
}
#zen-media-service-title {
align-self: center;
font-size: 13px;
margin-bottom: 5px;
margin-left: 6px;
}
#zen-media-title,
#zen-media-artist {
align-self: start;
margin-top: 5px;
}
#zen-media-title {
height: 16px;
font-size: 16px;
font-weight: bold;
}
#zen-media-artist {
height: 5px;
padding-bottom: 20px;
}
#zen-media-main-vbox,
#zen-media-service-hbox,
#zen-media-info-vbox,
#zen-media-progress-hbox {
width: 100%;
}
#zen-media-main-vbox {
height: 100%;
justify-content: space-between;
overflow: hidden;
}
#zen-media-progress-hbox {
flex-grow: 1;
align-items: center;
}
#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;
}
#zen-media-controls-toolbar {
--progress-height: 5px;
--button-spacing: 2px;
display: flex;
justify-content: space-between;
min-width: 0;
padding: 5px;
border-radius: 10px;
background: var(--zen-toolbar-element-bg) !important;
container-type: inline-size;
.toolbarbutton-1 {
border-radius: 5px;
color: white;
}
#zen-media-prev-button,
#zen-media-play-pause-button,
#zen-media-next-button {
margin: 0;
}
image.toolbarbutton-icon {
padding: 5px;
width: 26px;
height: 26px;
}
#zen-media-progress-bar {
appearance: none;
width: 100%;
height: var(--progress-height);
margin: 0 8px;
border-radius: 2px;
background-color: rgba(255, 255, 255, 0.2);
cursor: pointer;
transition: height 0.15s ease-out;
&::-moz-range-track {
background: var(--zen-colors-border);
border-radius: 999px;
height: var(--progress-height);
}
&::-moz-range-progress {
background: var(--zen-primary-color);
border-radius: 999px;
height: var(--progress-height);
}
&::-moz-range-thumb {
background: var(--zen-primary-color);
border: none;
width: 14px;
height: 14px;
border-radius: 50%;
cursor: pointer;
}
}
&:hover {
.show-on-hover {
max-height: 50px;
opacity: 1;
transform: translateY(0);
}
}
#zen-media-focus-button {
width: 34px;
height: 26px;
align-self: center;
transition:
opacity 0.2s ease,
transform 0.2s ease;
@container (max-width: 185px) {
width: 0;
height: 0;
opacity: 0;
padding: 0;
transform: translateX(-20px);
}
@container (min-width: 185px) {
opacity: 1;
transform: translateX(0);
}
}
toolbaritem {
flex-grow: 1;
padding: 0;
transition: padding 0.3s ease-out;
}
.show-on-hover {
padding-inline: 4px;
max-height: 0;
opacity: 0;
overflow: hidden;
transform: translateY(5px);
transition:
max-height 0.35s ease-in-out,
opacity 0.25s ease-in-out,
transform 0.3s ease-in-out;
}
#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);
}
}
#zen-media-controls-toolbar {
&:not([hidden]) {
animation: zen-media-controls-show 0.2s ease-out;
display: flex;
}
&[hidden] {
display: none;
animation: none;
transition: none;
}
}
#zen-media-service-title,
#zen-media-title,
#zen-media-artist {
white-space: nowrap;
width: 0;
margin-left: 0;
}
#zen-media-service-title {
align-self: center;
font-size: 13px;
margin-bottom: 5px;
margin-left: 6px;
}
#zen-media-title,
#zen-media-artist {
align-self: start;
margin-top: 5px;
}
#zen-media-title {
height: 16px;
font-size: 16px;
font-weight: bold;
}
#zen-media-artist {
height: 5px;
padding-bottom: 20px;
}
#zen-media-main-vbox,
#zen-media-service-hbox,
#zen-media-info-vbox,
#zen-media-progress-hbox {
width: 100%;
}
#zen-media-main-vbox {
height: 100%;
justify-content: space-between;
overflow: hidden;
}
#zen-media-progress-hbox {
flex-grow: 1;
align-items: center;
}
#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;
}

2
src/browser/themes/shared/zen-icons/icons.css
View File

@@ -1179,7 +1179,7 @@ menupopup > menuitem:is([type='checkbox']) .menu-iconic-left {
list-style-image: url('close.svg') !important;
}
#zen-media-controls-toolbar:hover {
#zen-media-controls-toolbar:hover {
#zen-media-focus-button {
list-style-image: url('screen.svg') !important;
}