Update spotify.css
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
@@ -22,7 +22,7 @@
|
||||
format('woff');
|
||||
}
|
||||
|
||||
[data-theme='dark'][data-theme-name='spotify'] {
|
||||
[data-theme-name='spotify'] {
|
||||
--canon-font-text: CircularSp, CircularSp-Arab, CircularSp-Hebr,
|
||||
CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva;
|
||||
--canon-font-title: CircularSpTitle, CircularSp-Arab, CircularSp-Hebr,
|
||||
@@ -30,20 +30,118 @@
|
||||
--canon-font-regular: CircularSp, CircularSp-Arab, CircularSp-Hebr,
|
||||
CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva;
|
||||
|
||||
/* Gray scale */
|
||||
--canon-gray-1: #191919;
|
||||
--canon-gray-2: #242424;
|
||||
--canon-gray-3: #373737;
|
||||
--canon-gray-4: #464646;
|
||||
--canon-gray-5: #575757;
|
||||
--canon-gray-6: #7b7b7b;
|
||||
--canon-gray-7: #9e9e9e;
|
||||
--canon-gray-8: #b4b4b4;
|
||||
.canon-Button {
|
||||
border-radius: var(--canon-radius-3);
|
||||
padding-inline: var(--canon-space-3);
|
||||
}
|
||||
|
||||
/* Background Colors */
|
||||
--canon-bg: #000000;
|
||||
--canon-bg-surface-1: #191919;
|
||||
--canon-bg-surface-2: #242424;
|
||||
.canon-ButtonIcon {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.canon-MenuTrigger {
|
||||
all: unset;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.canon-MenuPopup {
|
||||
box-sizing: border-box;
|
||||
max-width: 21.25rem;
|
||||
}
|
||||
|
||||
.canon-MenuSubmenuTrigger,
|
||||
.canon-MenuItem {
|
||||
height: auto;
|
||||
min-height: 2rem;
|
||||
}
|
||||
|
||||
.canon-Text {
|
||||
font-family: var(--canon-font-text);
|
||||
}
|
||||
|
||||
.canon-Heading {
|
||||
font-family: var(--canon-font-title);
|
||||
}
|
||||
|
||||
.canon-TableRow {
|
||||
border: none;
|
||||
border-radius: var(--canon-radius-4);
|
||||
}
|
||||
|
||||
.canon-TableRow:hover td:first-child {
|
||||
border-top-left-radius: var(--canon-radius-2);
|
||||
border-bottom-left-radius: var(--canon-radius-2);
|
||||
}
|
||||
|
||||
.canon-TableRow:hover td:last-child {
|
||||
border-top-right-radius: var(--canon-radius-2);
|
||||
border-bottom-right-radius: var(--canon-radius-2);
|
||||
}
|
||||
|
||||
.canon-TableBody:before,
|
||||
.canon-TableBody:after {
|
||||
line-height: var(--canon-space-1);
|
||||
content: '\200C';
|
||||
display: block;
|
||||
}
|
||||
|
||||
.canon-TableHeader .canon-TableRow {
|
||||
border-bottom: 1px solid var(--canon-border);
|
||||
}
|
||||
|
||||
.canon-TableHead {
|
||||
font-size: var(--canon-font-size-2);
|
||||
color: var(--canon-fg-secondary);
|
||||
font-weight: var(--canon-font-weight-regular);
|
||||
}
|
||||
|
||||
.canon-ScrollAreaRoot {
|
||||
width: 100%;
|
||||
/* TODO: Bring this as a fix in OS */
|
||||
height: unset;
|
||||
}
|
||||
|
||||
.canon-TabsIndicator {
|
||||
background-color: var(--canon-bg-underline);
|
||||
}
|
||||
|
||||
.canon-TabsTab[data-selected] {
|
||||
background: radial-gradient(
|
||||
ellipse at bottom,
|
||||
rgba(209, 110, 203, 0.25) 0%,
|
||||
transparent 95%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme='light'][data-theme-name='spotify'] {
|
||||
--canon-bg: var(--canon-gray-1);
|
||||
--canon-bg-surface-1: var(--canon-white);
|
||||
--canon-bg-surface-2: var(--canon-gray-2);
|
||||
--canon-bg-solid: #1ed760;
|
||||
--canon-bg-solid-hover: #3be477;
|
||||
--canon-bg-solid-pressed: #1abc54;
|
||||
--canon-bg-solid-disabled: var(--canon-gray-2);
|
||||
|
||||
--canon-fg-primary: var(--canon-black);
|
||||
--canon-fg-secondary: var(--canon-gray-7);
|
||||
--canon-fg-solid: var(--canon-black);
|
||||
|
||||
--canon-border: var(--canon-gray-3);
|
||||
--canon-border-hover: rgba(255, 255, 255, 0.4);
|
||||
--canon-border-pressed: rgba(255, 255, 255, 0.5);
|
||||
--canon-border-disabled: rgba(255, 255, 255, 0.2);
|
||||
--canon-border-danger: #f87a7a;
|
||||
--canon-border-warning: #e36d05;
|
||||
--canon-border-success: #53db83;
|
||||
|
||||
--canon-ring: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
[data-theme='dark'][data-theme-name='spotify'] {
|
||||
--canon-bg: var(--canon-black);
|
||||
--canon-bg-surface-1: var(--canon-gray-1);
|
||||
--canon-bg-surface-2: var(--canon-gray-2);
|
||||
--canon-bg-solid: #1ed760;
|
||||
--canon-bg-solid-hover: #3be477;
|
||||
--canon-bg-solid-pressed: #1abc54;
|
||||
@@ -57,21 +155,19 @@
|
||||
--canon-bg-success: #132d21;
|
||||
--canon-bg-underline: #d16ecb;
|
||||
|
||||
/* Foreground Colors */
|
||||
--canon-fg-primary: #ffffff;
|
||||
--canon-fg-secondary: #9e9e9e;
|
||||
--canon-fg-link: #ffffff;
|
||||
--canon-fg-link-hover: #ffffff;
|
||||
--canon-fg-disabled: #575757;
|
||||
--canon-fg-solid: #000000;
|
||||
--canon-fg-primary: var(--canon-white);
|
||||
--canon-fg-secondary: var(--canon-gray-7);
|
||||
--canon-fg-link: var(--canon-white);
|
||||
--canon-fg-link-hover: var(--canon-white);
|
||||
--canon-fg-disabled: var(--canon-gray-5);
|
||||
--canon-fg-solid: var(--canon-black);
|
||||
--canon-fg-solid-disabled: #083618;
|
||||
--canon-fg-tint: #ffffff;
|
||||
--canon-fg-tint-disabled: #575757;
|
||||
--canon-fg-tint: var(--canon-white);
|
||||
--canon-fg-tint-disabled: var(--canon-gray-5);
|
||||
--canon-fg-danger: #e22b2b;
|
||||
--canon-fg-warning: #e36d05;
|
||||
--canon-fg-success: #1db954;
|
||||
|
||||
/* Border Colors */
|
||||
--canon-border: var(--canon-gray-3);
|
||||
--canon-border-hover: rgba(255, 255, 255, 0.4);
|
||||
--canon-border-pressed: rgba(255, 255, 255, 0.5);
|
||||
@@ -80,115 +176,5 @@
|
||||
--canon-border-warning: #e36d05;
|
||||
--canon-border-success: #53db83;
|
||||
|
||||
/* Ring Colors */
|
||||
--canon-ring: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
#root {
|
||||
padding-top: var(--header-height);
|
||||
}
|
||||
|
||||
.canon-Button,
|
||||
.canon-IconButton {
|
||||
border-radius: var(--canon-radius-3);
|
||||
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out,
|
||||
box-shadow 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.canon-Button--variant-primary,
|
||||
.canon-IconButton--variant-primary {
|
||||
&:hover {
|
||||
box-shadow: inset 0 0 0 1px var(--canon-bg-solid);
|
||||
background-color: transparent;
|
||||
color: var(--canon-fg-primary);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: rgba(30, 215, 96, 0.1);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: var(--canon-bg-solid-disabled);
|
||||
color: var(--canon-fg-solid-disabled);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.canon-Button[data-size='medium'],
|
||||
.canon-Button[data-size='small'] {
|
||||
padding-inline: var(--canon-space-3);
|
||||
}
|
||||
|
||||
.canon-MenuTrigger {
|
||||
all: unset;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.canon-MenuPopup {
|
||||
box-sizing: border-box;
|
||||
max-width: 21.25rem;
|
||||
}
|
||||
|
||||
.canon-MenuSubmenuTrigger,
|
||||
.canon-MenuItem {
|
||||
height: auto;
|
||||
min-height: 2rem;
|
||||
}
|
||||
|
||||
.canon-Text {
|
||||
font-family: var(--canon-font-text);
|
||||
}
|
||||
|
||||
.canon-Heading {
|
||||
font-family: var(--canon-font-title);
|
||||
}
|
||||
|
||||
.canon-TableRow {
|
||||
border: none;
|
||||
border-radius: var(--canon-radius-4);
|
||||
}
|
||||
|
||||
.canon-TableRow:hover td:first-child {
|
||||
border-top-left-radius: var(--canon-radius-2);
|
||||
border-bottom-left-radius: var(--canon-radius-2);
|
||||
}
|
||||
|
||||
.canon-TableRow:hover td:last-child {
|
||||
border-top-right-radius: var(--canon-radius-2);
|
||||
border-bottom-right-radius: var(--canon-radius-2);
|
||||
}
|
||||
|
||||
.canon-TableBody:before,
|
||||
.canon-TableBody:after {
|
||||
line-height: var(--canon-space-1);
|
||||
content: '\200C';
|
||||
display: block;
|
||||
}
|
||||
|
||||
.canon-TableHeader .canon-TableRow {
|
||||
border-bottom: 1px solid var(--canon-border);
|
||||
}
|
||||
|
||||
.canon-TableHead {
|
||||
font-size: var(--canon-font-size-2);
|
||||
color: var(--canon-fg-secondary);
|
||||
font-weight: var(--canon-font-weight-regular);
|
||||
}
|
||||
|
||||
.canon-ScrollAreaRoot {
|
||||
width: 100%;
|
||||
/* TODO: Bring this as a fix in OS */
|
||||
height: unset;
|
||||
}
|
||||
|
||||
.canon-TabsIndicator {
|
||||
background-color: var(--canon-bg-underline);
|
||||
}
|
||||
|
||||
.canon-TabsTab[data-selected] {
|
||||
background: radial-gradient(
|
||||
ellipse at bottom,
|
||||
rgba(209, 110, 203, 0.25) 0%,
|
||||
transparent 95%
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user