Skip to content

Commit b22f871

Browse files
mohammedyhmohammedyh
authored
fix: change track color for media controls in all themes (#39)
This fixes an issue where the color of the track and progress bar were the same, making it difficult to see the remaining playback time. Normalise CSS formatting
1 parent 0893393 commit b22f871

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+840
-168
lines changed

‎themes/Frappe/Blue/userChrome.css‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/* Catppuccin Frappe Blue userChrome.css*/
22

33
@media (prefers-color-scheme: dark) {
4-
54
:root {
65
--zen-colors-primary: #414559 !important;
76
--zen-primary-color: #8caaee !important;
@@ -27,7 +26,7 @@
2726
--toolbox-bgcolor-inactive: #292c3c !important;
2827
}
2928

30-
#permissions-granted-icon{
29+
#permissions-granted-icon {
3130
color: #292c3c !important;
3231
}
3332

@@ -60,9 +59,22 @@
6059
background: #232634 !important;
6160
}
6261

62+
#zen-media-controls-toolbar {
63+
& #zen-media-progress-bar {
64+
&::-moz-range-track {
65+
background: var(--zen-colors-secondary) !important;
66+
}
67+
}
68+
}
69+
6370
toolbar .toolbarbutton-1 {
6471
&:not([disabled]) {
65-
&:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
72+
&:is([open], [checked])
73+
> :is(
74+
.toolbarbutton-icon,
75+
.toolbarbutton-text,
76+
.toolbarbutton-badge-stack
77+
) {
6678
fill: #232634;
6779
}
6880
}

‎themes/Frappe/Flamingo/userChrome.css‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/* Catppuccin Frappe Flamingo userChrome.css*/
22

33
@media (prefers-color-scheme: dark) {
4-
54
:root {
65
--zen-colors-primary: #414559 !important;
76
--zen-primary-color: #eebebe !important;
@@ -27,7 +26,7 @@
2726
--toolbox-bgcolor-inactive: #292c3c !important;
2827
}
2928

30-
#permissions-granted-icon{
29+
#permissions-granted-icon {
3130
color: #292c3c !important;
3231
}
3332

@@ -60,9 +59,22 @@
6059
background: #232634 !important;
6160
}
6261

62+
#zen-media-controls-toolbar {
63+
& #zen-media-progress-bar {
64+
&::-moz-range-track {
65+
background: var(--zen-colors-secondary) !important;
66+
}
67+
}
68+
}
69+
6370
toolbar .toolbarbutton-1 {
6471
&:not([disabled]) {
65-
&:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
72+
&:is([open], [checked])
73+
> :is(
74+
.toolbarbutton-icon,
75+
.toolbarbutton-text,
76+
.toolbarbutton-badge-stack
77+
) {
6678
fill: #232634;
6779
}
6880
}

‎themes/Frappe/Green/userChrome.css‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/* Catppuccin Frappe Green userChrome.css*/
22

33
@media (prefers-color-scheme: dark) {
4-
54
:root {
65
--zen-colors-primary: #414559 !important;
76
--zen-primary-color: #a6d189 !important;
@@ -27,7 +26,7 @@
2726
--toolbox-bgcolor-inactive: #292c3c !important;
2827
}
2928

30-
#permissions-granted-icon{
29+
#permissions-granted-icon {
3130
color: #292c3c !important;
3231
}
3332

@@ -60,9 +59,22 @@
6059
background: #232634 !important;
6160
}
6261

62+
#zen-media-controls-toolbar {
63+
& #zen-media-progress-bar {
64+
&::-moz-range-track {
65+
background: var(--zen-colors-secondary) !important;
66+
}
67+
}
68+
}
69+
6370
toolbar .toolbarbutton-1 {
6471
&:not([disabled]) {
65-
&:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
72+
&:is([open], [checked])
73+
> :is(
74+
.toolbarbutton-icon,
75+
.toolbarbutton-text,
76+
.toolbarbutton-badge-stack
77+
) {
6678
fill: #232634;
6779
}
6880
}

‎themes/Frappe/Lavender/userChrome.css‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/* Catppuccin Frappe Lavender userChrome.css*/
22

33
@media (prefers-color-scheme: dark) {
4-
54
:root {
65
--zen-colors-primary: #414559 !important;
76
--zen-primary-color: #babbf1 !important;
@@ -27,7 +26,7 @@
2726
--toolbox-bgcolor-inactive: #292c3c !important;
2827
}
2928

30-
#permissions-granted-icon{
29+
#permissions-granted-icon {
3130
color: #292c3c !important;
3231
}
3332

@@ -60,9 +59,22 @@
6059
background: #232634 !important;
6160
}
6261

62+
#zen-media-controls-toolbar {
63+
& #zen-media-progress-bar {
64+
&::-moz-range-track {
65+
background: var(--zen-colors-secondary) !important;
66+
}
67+
}
68+
}
69+
6370
toolbar .toolbarbutton-1 {
6471
&:not([disabled]) {
65-
&:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
72+
&:is([open], [checked])
73+
> :is(
74+
.toolbarbutton-icon,
75+
.toolbarbutton-text,
76+
.toolbarbutton-badge-stack
77+
) {
6678
fill: #232634;
6779
}
6880
}

‎themes/Frappe/Maroon/userChrome.css‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/* Catppuccin Frappe Maroon userChrome.css*/
22

33
@media (prefers-color-scheme: dark) {
4-
54
:root {
65
--zen-colors-primary: #414559 !important;
76
--zen-primary-color: #ea999c !important;
@@ -27,7 +26,7 @@
2726
--toolbox-bgcolor-inactive: #292c3c !important;
2827
}
2928

30-
#permissions-granted-icon{
29+
#permissions-granted-icon {
3130
color: #292c3c !important;
3231
}
3332

@@ -60,9 +59,22 @@
6059
background: #232634 !important;
6160
}
6261

62+
#zen-media-controls-toolbar {
63+
& #zen-media-progress-bar {
64+
&::-moz-range-track {
65+
background: var(--zen-colors-secondary) !important;
66+
}
67+
}
68+
}
69+
6370
toolbar .toolbarbutton-1 {
6471
&:not([disabled]) {
65-
&:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
72+
&:is([open], [checked])
73+
> :is(
74+
.toolbarbutton-icon,
75+
.toolbarbutton-text,
76+
.toolbarbutton-badge-stack
77+
) {
6678
fill: #232634;
6779
}
6880
}

‎themes/Frappe/Mauve/userChrome.css‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/* Catppuccin Frappe Mauve userChrome.css*/
22

33
@media (prefers-color-scheme: dark) {
4-
54
:root {
65
--zen-colors-primary: #414559 !important;
76
--zen-primary-color: #ca9ee6 !important;
@@ -27,7 +26,7 @@
2726
--toolbox-bgcolor-inactive: #292c3c !important;
2827
}
2928

30-
#permissions-granted-icon{
29+
#permissions-granted-icon {
3130
color: #292c3c !important;
3231
}
3332

@@ -60,9 +59,22 @@
6059
background: #232634 !important;
6160
}
6261

62+
#zen-media-controls-toolbar {
63+
& #zen-media-progress-bar {
64+
&::-moz-range-track {
65+
background: var(--zen-colors-secondary) !important;
66+
}
67+
}
68+
}
69+
6370
toolbar .toolbarbutton-1 {
6471
&:not([disabled]) {
65-
&:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
72+
&:is([open], [checked])
73+
> :is(
74+
.toolbarbutton-icon,
75+
.toolbarbutton-text,
76+
.toolbarbutton-badge-stack
77+
) {
6678
fill: #232634;
6779
}
6880
}

‎themes/Frappe/Peach/userChrome.css‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/* Catppuccin Frappe Peach userChrome.css*/
22

33
@media (prefers-color-scheme: dark) {
4-
54
:root {
65
--zen-colors-primary: #414559 !important;
76
--zen-primary-color: #ef9f76 !important;
@@ -27,7 +26,7 @@
2726
--toolbox-bgcolor-inactive: #292c3c !important;
2827
}
2928

30-
#permissions-granted-icon{
29+
#permissions-granted-icon {
3130
color: #292c3c !important;
3231
}
3332

@@ -60,9 +59,22 @@
6059
background: #232634 !important;
6160
}
6261

62+
#zen-media-controls-toolbar {
63+
& #zen-media-progress-bar {
64+
&::-moz-range-track {
65+
background: var(--zen-colors-secondary) !important;
66+
}
67+
}
68+
}
69+
6370
toolbar .toolbarbutton-1 {
6471
&:not([disabled]) {
65-
&:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
72+
&:is([open], [checked])
73+
> :is(
74+
.toolbarbutton-icon,
75+
.toolbarbutton-text,
76+
.toolbarbutton-badge-stack
77+
) {
6678
fill: #232634;
6779
}
6880
}

‎themes/Frappe/Pink/userChrome.css‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/* Catppuccin Frappe Pink userChrome.css*/
22

33
@media (prefers-color-scheme: dark) {
4-
54
:root {
65
--zen-colors-primary: #414559 !important;
76
--zen-primary-color: #f4b8e4 !important;
@@ -27,7 +26,7 @@
2726
--toolbox-bgcolor-inactive: #292c3c !important;
2827
}
2928

30-
#permissions-granted-icon{
29+
#permissions-granted-icon {
3130
color: #292c3c !important;
3231
}
3332

@@ -60,9 +59,22 @@
6059
background: #232634 !important;
6160
}
6261

62+
#zen-media-controls-toolbar {
63+
& #zen-media-progress-bar {
64+
&::-moz-range-track {
65+
background: var(--zen-colors-secondary) !important;
66+
}
67+
}
68+
}
69+
6370
toolbar .toolbarbutton-1 {
6471
&:not([disabled]) {
65-
&:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
72+
&:is([open], [checked])
73+
> :is(
74+
.toolbarbutton-icon,
75+
.toolbarbutton-text,
76+
.toolbarbutton-badge-stack
77+
) {
6678
fill: #232634;
6779
}
6880
}

‎themes/Frappe/Red/userChrome.css‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/* Catppuccin Frappe Red userChrome.css*/
22

33
@media (prefers-color-scheme: dark) {
4-
54
:root {
65
--zen-colors-primary: #414559 !important;
76
--zen-primary-color: #e78284 !important;
@@ -27,7 +26,7 @@
2726
--toolbox-bgcolor-inactive: #292c3c !important;
2827
}
2928

30-
#permissions-granted-icon{
29+
#permissions-granted-icon {
3130
color: #292c3c !important;
3231
}
3332

@@ -60,9 +59,22 @@
6059
background: #232634 !important;
6160
}
6261

62+
#zen-media-controls-toolbar {
63+
& #zen-media-progress-bar {
64+
&::-moz-range-track {
65+
background: var(--zen-colors-secondary) !important;
66+
}
67+
}
68+
}
69+
6370
toolbar .toolbarbutton-1 {
6471
&:not([disabled]) {
65-
&:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
72+
&:is([open], [checked])
73+
> :is(
74+
.toolbarbutton-icon,
75+
.toolbarbutton-text,
76+
.toolbarbutton-badge-stack
77+
) {
6678
fill: #232634;
6779
}
6880
}

0 commit comments

Comments
 (0)