Skip to content

Commit 1596467

Browse files
mohammedyhmohammedyh
authored
fix: change track color for media controls in all themes (#41)
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. - Update userChrome.tera template - Normalise CSS formatting
1 parent f864bde commit 1596467

Some content is hidden

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

57 files changed

+798
-114
lines changed

‎templates/userChrome.tera‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ whiskers:
1111
/* Catppuccin {{flavor.identifier | capitalize}} {{accent | capitalize}} userChrome.css*/
1212

1313
@media (prefers-color-scheme: {{ if(cond=flavor.dark, t="dark", f="light") }}) {
14-
1514
:root {
1615
--zen-colors-primary: #{{ surface0.hex }} !important;
1716
--zen-primary-color: #{{ palette[accent].hex }} !important;
@@ -70,9 +69,22 @@ whiskers:
7069
background: #{{ crust.hex }} !important;
7170
}
7271

72+
#zen-media-controls-toolbar {
73+
& #zen-media-progress-bar {
74+
&::-moz-range-track {
75+
background: #{{ surface0.hex }} !important;
76+
}
77+
}
78+
}
79+
7380
toolbar .toolbarbutton-1 {
7481
&:not([disabled]) {
75-
&:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
82+
&:is([open], [checked])
83+
> :is(
84+
.toolbarbutton-icon,
85+
.toolbarbutton-text,
86+
.toolbarbutton-badge-stack
87+
) {
7688
fill: #{{ crust.hex }};
7789
}
7890
}

‎themes/Frappe/Blue/userChrome.css‎

Lines changed: 14 additions & 2 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;
@@ -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: #414559 !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: 14 additions & 2 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;
@@ -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: #414559 !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: 14 additions & 2 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;
@@ -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: #414559 !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: 14 additions & 2 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;
@@ -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: #414559 !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: 14 additions & 2 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;
@@ -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: #414559 !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: 14 additions & 2 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;
@@ -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: #414559 !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: 14 additions & 2 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;
@@ -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: #414559 !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: 14 additions & 2 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;
@@ -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: #414559 !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: 14 additions & 2 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;
@@ -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: #414559 !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)