refact: update for jellyfin v10.10.x
This commit is contained in:
Adam Perkowski
@@ -0,0 +1,21 @@
|
||||
# EditorConfig helps developers define and maintain consistent
|
||||
# coding styles between different editors and IDEs
|
||||
# EditorConfig is awesome: https://EditorConfig.org
|
||||
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_size = 2
|
||||
indent_style = space
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
# css
|
||||
[*.{css,scss}]
|
||||
indent_size = 2
|
||||
|
||||
# documentation, utils
|
||||
[*.{md,mdx,diff}]
|
||||
trim_trailing_whitespace = false
|
||||
@@ -0,0 +1,41 @@
|
||||
name: Deploy to GitHub Pages
|
||||
|
||||
on:
|
||||
push:
|
||||
tags:
|
||||
- '*'
|
||||
workflow_dispatch:
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
pages: write
|
||||
id-token: write
|
||||
|
||||
concurrency:
|
||||
group: 'pages'
|
||||
cancel-in-progress: false
|
||||
|
||||
jobs:
|
||||
deploy:
|
||||
environment:
|
||||
name: github-pages
|
||||
url: ${{ steps.deployment.outputs.page_url }}
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
- name: Setup Pages
|
||||
uses: actions/configure-pages@v5
|
||||
- name: Prepare files
|
||||
run: |
|
||||
mkdir -p build
|
||||
cp src/*.css build
|
||||
cd build
|
||||
sed -i 's/\[URL\]/https:\/\/adamperkowski.github.io\/jellyfin/g' *.css
|
||||
- name: Upload artifact
|
||||
uses: actions/upload-pages-artifact@v3
|
||||
with:
|
||||
path: build
|
||||
- name: Deploy to GitHub Pages
|
||||
id: deployment
|
||||
uses: actions/deploy-pages@v4
|
||||
@@ -0,0 +1,18 @@
|
||||
name: Whiskers Check
|
||||
|
||||
on:
|
||||
push:
|
||||
paths: ['template.tera', 'src', '.github/workflows/whiskers.yml']
|
||||
pull_request:
|
||||
workflow_dispatch:
|
||||
|
||||
jobs:
|
||||
check:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
- uses: catppuccin/setup-whiskers@v1.0.0
|
||||
with:
|
||||
whiskers-version: '2.5.1'
|
||||
- run: whiskers template.tera --check
|
||||
@@ -6,9 +6,9 @@
|
||||
</h3>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/isabelroses/jellyfin/stargazers"><img src="https://img.shields.io/github/stars/isabelroses/jellyfin?colorA=363a4f&colorB=b7bdf8&style=for-the-badge"></a>
|
||||
<a href="https://github.com/catppuccin/template/issues"><img src="https://img.shields.io/github/issues/isabelroses/jellyfin?colorA=363a4f&colorB=f5a97f&style=for-the-badge"></a>
|
||||
<a href="https://github.com/isabelroses/jellyfin/contributors"><img src="https://img.shields.io/github/contributors/isabelroses/jellyfin?colorA=363a4f&colorB=a6da95&style=for-the-badge"></a>
|
||||
<a href="https://github.com/adamperkowski/jellyfin/stargazers"><img src="https://img.shields.io/github/stars/adamperkowski/jellyfin?colorA=363a4f&colorB=b7bdf8&style=for-the-badge"></a>
|
||||
<a href="https://github.com/catppuccin/template/issues"><img src="https://img.shields.io/github/issues/adamperkowski/jellyfin?colorA=363a4f&colorB=f5a97f&style=for-the-badge"></a>
|
||||
<a href="https://github.com/adamperkowski/jellyfin/contributors"><img src="https://img.shields.io/github/contributors/adamperkowski/jellyfin?colorA=363a4f&colorB=a6da95&style=for-the-badge"></a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
@@ -36,17 +36,43 @@
|
||||
|
||||
## Usage
|
||||
|
||||
1. Copy your theme from:
|
||||
- [🌻 Catppuccin Latte](/src/latte.css?raw=1)
|
||||
- [🪴 Catppuccin Frappe](/src/frappe.css?raw=1)
|
||||
- [🌺 Catppuccin Macchiato](/src/macchiato.css?raw=1)
|
||||
- [🌿 Catppuccin Mocha](/src/mocha.css?raw=1)
|
||||
2. Open settings navigate to Display and from there paste the css into the section called "Custom CSS code:"
|
||||
3. Then press save and you're done!
|
||||
1. Copy the theme import rule:
|
||||
```css
|
||||
@import url('https://adamperkowski.github.io/jellyfin/theme.css');
|
||||
```
|
||||
2. Open settings, navigate to Display and paste the CSS into the section called "Custom CSS code"
|
||||
3. Copy your preferred flavor's import rule and paste it **after** the theme import:
|
||||
- 🌻 Latte
|
||||
```css
|
||||
@import url('https://adamperkowski.github.io/jellyfin/latte.css');
|
||||
```
|
||||
- 🪴 Frappé
|
||||
```css
|
||||
@import url('https://adamperkowski.github.io/jellyfin/frappe.css');
|
||||
```
|
||||
- 🌺 Macchiato
|
||||
```css
|
||||
@import url('https://adamperkowski.github.io/jellyfin/macchiato.css');
|
||||
```
|
||||
- 🌿 Mocha
|
||||
```css
|
||||
@import url('https://adamperkowski.github.io/jellyfin/mocha.css');
|
||||
```
|
||||
4. Press save and you're done!
|
||||
|
||||
## Customization
|
||||
|
||||
The accent color can be overrided by adding the following **after** the imports:
|
||||
```css
|
||||
:root {
|
||||
--main-color: var(--mauve);
|
||||
}
|
||||
```
|
||||
|
||||
## 💝 Thanks to
|
||||
|
||||
- [Isabel](https://github.com/isabelroses)
|
||||
- [Adam](https://github.com/adamperkowski)
|
||||
|
||||
|
||||
|
||||
|
||||
+19
-214
@@ -1,220 +1,25 @@
|
||||
:root {
|
||||
--main-color: #85c1dc;
|
||||
--rosewater: #f2d5cf;
|
||||
--flamingo: #eebebe;
|
||||
--pink: #f4b8e4;
|
||||
--mauve: #ca9ee6;
|
||||
--red: #e78284;
|
||||
--maroon: #ea999c;
|
||||
--peach: #ef9f76;
|
||||
--yellow: #e5c890;
|
||||
--green: #a6d189;
|
||||
--teal: #81c8be;
|
||||
--sky: #99d1db;
|
||||
--sapphire: #85c1dc;
|
||||
--blue: #8caaee;
|
||||
--lavender: #babbf1;
|
||||
|
||||
--main-color: var(--sapphire);
|
||||
--main-background: #303446;
|
||||
--second-background: #292c3c;
|
||||
--hover-background: #737994;
|
||||
--hover-background: #414559;
|
||||
--main-text: #c6d0f5;
|
||||
--dimmer-text: #949cbb;
|
||||
--green-color: #a6d189;
|
||||
--red-color: #e78284;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background: var(--main-color);
|
||||
color: var(--main-background);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--main-color);
|
||||
color: var(--main-background);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.backgroundContainer,
|
||||
.formDialogHeader,
|
||||
.dialog,
|
||||
.dashboardGeneralForm,
|
||||
html {
|
||||
background-color: var(--main-background);
|
||||
}
|
||||
|
||||
.skinHeader,
|
||||
.nowPlayingBar {
|
||||
background-color: var(--second-background);
|
||||
}
|
||||
|
||||
.mainDrawer,
|
||||
.cardBox,
|
||||
.paperList {
|
||||
background: var(--main-background);
|
||||
}
|
||||
|
||||
.navMenuOption-selected {
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
|
||||
.itemName {
|
||||
color: var(--main-text);
|
||||
}
|
||||
|
||||
.emby-input,
|
||||
.emby-textarea,
|
||||
.emby-select {
|
||||
background: var(--second-background);
|
||||
border-color: var(--second-background);
|
||||
}
|
||||
|
||||
.emby-input:focus,
|
||||
.emby-textarea:focus,
|
||||
.emby-input:hover,
|
||||
.emby-textarea:hover,
|
||||
.emby-select-withcolor {
|
||||
border-color: var(--main-color) !important;
|
||||
}
|
||||
|
||||
.emby-button-foreground {
|
||||
color: var(--main-text);
|
||||
}
|
||||
|
||||
.emby-button-foreground:hover,
|
||||
.emby-button-foreground:focus {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
.paper-icon-button-light {
|
||||
color: var(--main-text);
|
||||
}
|
||||
|
||||
.paper-icon-button-light:hover,
|
||||
.paper-icon-button-light:focus,
|
||||
.listItem:hover,
|
||||
.listItem:focus,
|
||||
.navMenuOption:hover,
|
||||
.navMenuOption:focus {
|
||||
color: var(--main-color);
|
||||
background-color: var(--hover-background);
|
||||
}
|
||||
|
||||
.emby-tab-button-active>.emby-button-foreground {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
.button-submit,
|
||||
.button-submit:focus,
|
||||
.button-alt,
|
||||
.button-alt:focus,
|
||||
.submit,
|
||||
.submit:focus,
|
||||
#btnAddPerson,
|
||||
#btnAddPerson:focus,
|
||||
.btnAddTrigger,
|
||||
.btnAddTrigger:focus,
|
||||
.btnAddUser,
|
||||
.btnAddUser:focus {
|
||||
color: var(--main-background);
|
||||
background: var(--main-color);
|
||||
}
|
||||
|
||||
.cardText-secondary {
|
||||
color: var(--dimmer-text);
|
||||
}
|
||||
|
||||
.button-cancel,
|
||||
.button-cancel:focus {
|
||||
color: var(--main-color);
|
||||
background: var(--main-background);
|
||||
}
|
||||
|
||||
#btnShutdown,
|
||||
#deviceDeleteAll,
|
||||
.btnDeleteImage,
|
||||
.btnResetPassword {
|
||||
color: var(--main-background);
|
||||
background: var(--red-color);
|
||||
}
|
||||
|
||||
.btnRefresh {
|
||||
background: var(--main-color);
|
||||
color: var(--main-background);
|
||||
}
|
||||
|
||||
.backgroundContainer.withBackdrop,
|
||||
.backdropContainer,
|
||||
.backgroundContainer {
|
||||
background: var(--main-background);
|
||||
}
|
||||
|
||||
.headerRight,
|
||||
.headerLeft {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
.listItemButton,
|
||||
.lnkMediaFolder {
|
||||
color: var(--main-text);
|
||||
}
|
||||
|
||||
.listItemButton:hover,
|
||||
.listItemButton:focus {
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
|
||||
.indicator {
|
||||
background-color: var(--main-color);
|
||||
color: var(--main-background);
|
||||
}
|
||||
|
||||
.playedIndicator {
|
||||
background-color: var(--green-color);
|
||||
color: var(--main-background);
|
||||
}
|
||||
|
||||
.alphaPickerRow {
|
||||
color: var(--dimmer-text);
|
||||
}
|
||||
|
||||
.itemAction:hover,
|
||||
.itemAction:focus {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
/* General focus element color */
|
||||
|
||||
.layout-tv .paper-icon-button-light.show-focus:focus {
|
||||
color: var(--main-color) !important;
|
||||
}
|
||||
|
||||
.emby-button.show-focus:focus {
|
||||
background: var(--main-color) !important;
|
||||
}
|
||||
|
||||
.button-flat:focus,
|
||||
.button-flat:hover {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
.sectionTitle,
|
||||
.cardText,
|
||||
.pageTitle,
|
||||
.detailSectionContent,
|
||||
.trackSelections,
|
||||
.emby-input,
|
||||
.checkboxLabel,
|
||||
.itemDetailsGroup,
|
||||
.checkboxOutline,
|
||||
.emby-textarea,
|
||||
.emby-select,
|
||||
.label,
|
||||
.selectLabel,
|
||||
.sidebarHeader,
|
||||
.listItem,
|
||||
.dashboardGeneralForm,
|
||||
.dashboardSections,
|
||||
.navMenuOption,
|
||||
.inputLabel,
|
||||
.content-primary,
|
||||
legend {
|
||||
color: var(--main-text);
|
||||
}
|
||||
|
||||
.fieldDescription,
|
||||
.secondary,
|
||||
.listItemBodyText {
|
||||
color: var(--dimmer-text);
|
||||
}
|
||||
|
||||
.sessionAppName,
|
||||
.sessionNowPlayingInfo {
|
||||
color: var(--main-background);
|
||||
--green-color: var(--green);
|
||||
--red-color: var(--red);
|
||||
}
|
||||
+18
-215
@@ -1,222 +1,25 @@
|
||||
:root {
|
||||
--main-color: #209fb5;
|
||||
--rosewater: #dc8a78;
|
||||
--flamingo: #dd7878;
|
||||
--pink: #ea76cb;
|
||||
--mauve: #8839ef;
|
||||
--red: #d20f39;
|
||||
--maroon: #e64553;
|
||||
--peach: #fe640b;
|
||||
--yellow: #df8e1d;
|
||||
--green: #40a02b;
|
||||
--teal: #179299;
|
||||
--sky: #04a5e5;
|
||||
--sapphire: #209fb5;
|
||||
--blue: #1e66f5;
|
||||
--lavender: #7287fd;
|
||||
|
||||
--main-color: var(--sapphire);
|
||||
--main-background: #eff1f5;
|
||||
--second-background: #e6e9ef;
|
||||
--hover-background: #ccd0da;
|
||||
--main-text: #4c4f69;
|
||||
--dimmer-text: #7c7f93;
|
||||
--green-color: #40a02b;
|
||||
--red-color: #d20f39;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background: var(--main-color);
|
||||
color: var(--main-background);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--main-color);
|
||||
color: var(--main-background);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.backgroundContainer,
|
||||
.formDialogHeader,
|
||||
.dialog,
|
||||
.dashboardGeneralForm,
|
||||
html {
|
||||
background-color: var(--main-background);
|
||||
}
|
||||
|
||||
.skinHeader,
|
||||
.nowPlayingBar {
|
||||
background-color: var(--second-background);
|
||||
}
|
||||
|
||||
.mainDrawer,
|
||||
.cardBox,
|
||||
.paperList {
|
||||
background: var(--main-background);
|
||||
}
|
||||
|
||||
.navMenuOption-selected,
|
||||
.navMenuOption-selected:hover {
|
||||
background-color: var(--main-color);
|
||||
color: var(--main-background);
|
||||
}
|
||||
|
||||
.itemName {
|
||||
color: var(--main-text);
|
||||
}
|
||||
|
||||
.emby-input,
|
||||
.emby-textarea,
|
||||
.emby-select {
|
||||
background: var(--second-background);
|
||||
border-color: var(--second-background);
|
||||
}
|
||||
|
||||
.emby-input:focus,
|
||||
.emby-textarea:focus,
|
||||
.emby-input:hover,
|
||||
.emby-textarea:hover,
|
||||
.emby-select-withcolor {
|
||||
border-color: var(--main-color) !important;
|
||||
}
|
||||
|
||||
.emby-button-foreground {
|
||||
color: var(--main-text);
|
||||
}
|
||||
|
||||
.emby-button-foreground:hover,
|
||||
.emby-button-foreground:focus {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
.paper-icon-button-light {
|
||||
color: var(--main-text);
|
||||
}
|
||||
|
||||
.paper-icon-button-light:hover,
|
||||
.paper-icon-button-light:focus,
|
||||
.listItem:hover,
|
||||
.listItem:focus,
|
||||
.navMenuOption:hover,
|
||||
.navMenuOption:focus {
|
||||
color: var(--main-color);
|
||||
background-color: var(--hover-background);
|
||||
}
|
||||
|
||||
.emby-tab-button-active>.emby-button-foreground {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
.button-submit,
|
||||
.button-submit:focus,
|
||||
.button-alt,
|
||||
.button-alt:focus,
|
||||
.submit,
|
||||
.submit:focus,
|
||||
#btnAddPerson,
|
||||
#btnAddPerson:focus,
|
||||
.btnAddTrigger,
|
||||
.btnAddTrigger:focus,
|
||||
.btnAddUser,
|
||||
.btnAddUser:focus {
|
||||
color: var(--main-background);
|
||||
background: var(--main-color);
|
||||
}
|
||||
|
||||
.cardText-secondary {
|
||||
color: var(--dimmer-text);
|
||||
}
|
||||
|
||||
.button-cancel,
|
||||
.button-cancel:focus {
|
||||
color: var(--main-color);
|
||||
background: var(--main-background);
|
||||
}
|
||||
|
||||
#btnShutdown,
|
||||
#deviceDeleteAll,
|
||||
.btnDeleteImage,
|
||||
.btnResetPassword {
|
||||
color: var(--main-background);
|
||||
background: var(--red-color);
|
||||
}
|
||||
|
||||
.btnRefresh {
|
||||
background: var(--main-color);
|
||||
color: var(--main-background);
|
||||
}
|
||||
|
||||
.backgroundContainer.withBackdrop,
|
||||
.backdropContainer,
|
||||
.backgroundContainer {
|
||||
background: var(--main-background);
|
||||
}
|
||||
|
||||
.headerRight,
|
||||
.headerLeft {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
.listItemButton,
|
||||
.lnkMediaFolder {
|
||||
color: var(--main-text);
|
||||
}
|
||||
|
||||
.listItemButton:hover,
|
||||
.listItemButton:focus {
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
|
||||
.indicator {
|
||||
background-color: var(--main-color);
|
||||
color: var(--main-background);
|
||||
}
|
||||
|
||||
.playedIndicator {
|
||||
background-color: var(--green-color);
|
||||
color: var(--main-background);
|
||||
}
|
||||
|
||||
.alphaPickerRow {
|
||||
color: var(--dimmer-text);
|
||||
}
|
||||
|
||||
.itemAction:hover,
|
||||
.itemAction:focus {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
/* General focus element color */
|
||||
|
||||
.layout-tv .paper-icon-button-light.show-focus:focus {
|
||||
color: var(--main-color) !important;
|
||||
}
|
||||
|
||||
.emby-button.show-focus:focus {
|
||||
background: var(--main-color) !important;
|
||||
}
|
||||
|
||||
.button-flat:focus,
|
||||
.button-flat:hover {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
.sectionTitle,
|
||||
.cardText,
|
||||
.pageTitle,
|
||||
.detailSectionContent,
|
||||
.trackSelections,
|
||||
.emby-input,
|
||||
.checkboxLabel,
|
||||
.itemDetailsGroup,
|
||||
.checkboxOutline,
|
||||
.emby-textarea,
|
||||
.emby-select,
|
||||
.label,
|
||||
.selectLabel,
|
||||
.sidebarHeader,
|
||||
.listItem,
|
||||
.dashboardGeneralForm,
|
||||
.dashboardSections,
|
||||
.navMenuOption,
|
||||
.inputLabel,
|
||||
.content-primary,
|
||||
legend {
|
||||
color: var(--main-text);
|
||||
}
|
||||
|
||||
.fieldDescription,
|
||||
.secondary,
|
||||
.listItemBodyText {
|
||||
color: var(--dimmer-text);
|
||||
}
|
||||
|
||||
.sessionAppName,
|
||||
.sessionNowPlayingInfo {
|
||||
color: var(--main-background);
|
||||
--green-color: var(--green);
|
||||
--red-color: var(--red);
|
||||
}
|
||||
+18
-213
@@ -1,220 +1,25 @@
|
||||
:root {
|
||||
--main-color: #7dc4e4;
|
||||
--rosewater: #f4dbd6;
|
||||
--flamingo: #f0c6c6;
|
||||
--pink: #f5bde6;
|
||||
--mauve: #c6a0f6;
|
||||
--red: #ed8796;
|
||||
--maroon: #ee99a0;
|
||||
--peach: #f5a97f;
|
||||
--yellow: #eed49f;
|
||||
--green: #a6da95;
|
||||
--teal: #8bd5ca;
|
||||
--sky: #91d7e3;
|
||||
--sapphire: #7dc4e4;
|
||||
--blue: #8aadf4;
|
||||
--lavender: #b7bdf8;
|
||||
|
||||
--main-color: var(--sapphire);
|
||||
--main-background: #24273a;
|
||||
--second-background: #1e2030;
|
||||
--hover-background: #363a4f;
|
||||
--main-text: #cad3f5;
|
||||
--dimmer-text: #939ab7;
|
||||
--green-color: #a6da95;
|
||||
--red-color: #ed8796;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background: var(--main-color);
|
||||
color: var(--main-background);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--main-color);
|
||||
color: var(--main-background);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.backgroundContainer,
|
||||
.formDialogHeader,
|
||||
.dialog,
|
||||
.dashboardGeneralForm,
|
||||
html {
|
||||
background-color: var(--main-background);
|
||||
}
|
||||
|
||||
.skinHeader,
|
||||
.nowPlayingBar {
|
||||
background-color: var(--second-background);
|
||||
}
|
||||
|
||||
.mainDrawer,
|
||||
.cardBox,
|
||||
.paperList {
|
||||
background: var(--main-background);
|
||||
}
|
||||
|
||||
.navMenuOption-selected {
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
|
||||
.itemName {
|
||||
color: var(--main-text);
|
||||
}
|
||||
|
||||
.emby-input,
|
||||
.emby-textarea,
|
||||
.emby-select {
|
||||
background: var(--second-background);
|
||||
border-color: var(--second-background);
|
||||
}
|
||||
|
||||
.emby-input:focus,
|
||||
.emby-textarea:focus,
|
||||
.emby-input:hover,
|
||||
.emby-textarea:hover,
|
||||
.emby-select-withcolor {
|
||||
border-color: var(--main-color) !important;
|
||||
}
|
||||
|
||||
.emby-button-foreground {
|
||||
color: var(--main-text);
|
||||
}
|
||||
|
||||
.emby-button-foreground:hover,
|
||||
.emby-button-foreground:focus {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
.paper-icon-button-light {
|
||||
color: var(--main-text);
|
||||
}
|
||||
|
||||
.paper-icon-button-light:hover,
|
||||
.paper-icon-button-light:focus,
|
||||
.listItem:hover,
|
||||
.listItem:focus,
|
||||
.navMenuOption:hover,
|
||||
.navMenuOption:focus {
|
||||
color: var(--main-color);
|
||||
background-color: var(--hover-background);
|
||||
}
|
||||
|
||||
.emby-tab-button-active>.emby-button-foreground {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
.button-submit,
|
||||
.button-submit:focus,
|
||||
.button-alt,
|
||||
.button-alt:focus,
|
||||
.submit,
|
||||
.submit:focus,
|
||||
#btnAddPerson,
|
||||
#btnAddPerson:focus,
|
||||
.btnAddTrigger,
|
||||
.btnAddTrigger:focus,
|
||||
.btnAddUser,
|
||||
.btnAddUser:focus {
|
||||
color: var(--main-background);
|
||||
background: var(--main-color);
|
||||
}
|
||||
|
||||
.cardText-secondary {
|
||||
color: var(--dimmer-text);
|
||||
}
|
||||
|
||||
.button-cancel,
|
||||
.button-cancel:focus {
|
||||
color: var(--main-color);
|
||||
background: var(--main-background);
|
||||
}
|
||||
|
||||
#btnShutdown,
|
||||
#deviceDeleteAll,
|
||||
.btnDeleteImage,
|
||||
.btnResetPassword {
|
||||
color: var(--main-background);
|
||||
background: var(--red-color);
|
||||
}
|
||||
|
||||
.btnRefresh {
|
||||
background: var(--main-color);
|
||||
color: var(--main-background);
|
||||
}
|
||||
|
||||
.backgroundContainer.withBackdrop,
|
||||
.backdropContainer,
|
||||
.backgroundContainer {
|
||||
background: var(--main-background);
|
||||
}
|
||||
|
||||
.headerRight,
|
||||
.headerLeft {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
.listItemButton,
|
||||
.lnkMediaFolder {
|
||||
color: var(--main-text);
|
||||
}
|
||||
|
||||
.listItemButton:hover,
|
||||
.listItemButton:focus {
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
|
||||
.indicator {
|
||||
background-color: var(--main-color);
|
||||
color: var(--main-background);
|
||||
}
|
||||
|
||||
.playedIndicator {
|
||||
background-color: var(--green-color);
|
||||
color: var(--main-background);
|
||||
}
|
||||
|
||||
.alphaPickerRow {
|
||||
color: var(--dimmer-text);
|
||||
}
|
||||
|
||||
.itemAction:hover,
|
||||
.itemAction:focus {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
/* General focus element color */
|
||||
|
||||
.layout-tv .paper-icon-button-light.show-focus:focus {
|
||||
color: var(--main-color) !important;
|
||||
}
|
||||
|
||||
.emby-button.show-focus:focus {
|
||||
background: var(--main-color) !important;
|
||||
}
|
||||
|
||||
.button-flat:focus,
|
||||
.button-flat:hover {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
.sectionTitle,
|
||||
.cardText,
|
||||
.pageTitle,
|
||||
.detailSectionContent,
|
||||
.trackSelections,
|
||||
.emby-input,
|
||||
.checkboxLabel,
|
||||
.itemDetailsGroup,
|
||||
.checkboxOutline,
|
||||
.emby-textarea,
|
||||
.emby-select,
|
||||
.label,
|
||||
.selectLabel,
|
||||
.sidebarHeader,
|
||||
.listItem,
|
||||
.dashboardGeneralForm,
|
||||
.dashboardSections,
|
||||
.navMenuOption,
|
||||
.inputLabel,
|
||||
.content-primary,
|
||||
legend {
|
||||
color: var(--main-text);
|
||||
}
|
||||
|
||||
.fieldDescription,
|
||||
.secondary,
|
||||
.listItemBodyText {
|
||||
color: var(--dimmer-text);
|
||||
}
|
||||
|
||||
.sessionAppName,
|
||||
.sessionNowPlayingInfo {
|
||||
color: var(--main-background);
|
||||
--green-color: var(--green);
|
||||
--red-color: var(--red);
|
||||
}
|
||||
+21
-216
@@ -1,220 +1,25 @@
|
||||
:root {
|
||||
--main-color: #74c7ec;
|
||||
--main-background: #1E1E2E;
|
||||
--rosewater: #f5e0dc;
|
||||
--flamingo: #f2cdcd;
|
||||
--pink: #f5c2e7;
|
||||
--mauve: #cba6f7;
|
||||
--red: #f38ba8;
|
||||
--maroon: #eba0ac;
|
||||
--peach: #fab387;
|
||||
--yellow: #f9e2af;
|
||||
--green: #a6e3a1;
|
||||
--teal: #94e2d5;
|
||||
--sky: #89dceb;
|
||||
--sapphire: #74c7ec;
|
||||
--blue: #89b4fa;
|
||||
--lavender: #b4befe;
|
||||
|
||||
--main-color: var(--sapphire);
|
||||
--main-background: #1e1e2e;
|
||||
--second-background: #181825;
|
||||
--hover-background: #313244;
|
||||
--main-text: #CDD6F4;
|
||||
--dimmer-text: #9399B2;
|
||||
--green-color: #a6e3a1;
|
||||
--red-color: #f38ba8;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background: var(--main-color);
|
||||
color: var(--main-background);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--main-color);
|
||||
color: var(--main-background);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.backgroundContainer,
|
||||
.formDialogHeader,
|
||||
.dialog,
|
||||
.dashboardGeneralForm,
|
||||
html {
|
||||
background-color: var(--main-background);
|
||||
}
|
||||
|
||||
.skinHeader,
|
||||
.nowPlayingBar {
|
||||
background-color: var(--second-background);
|
||||
}
|
||||
|
||||
.mainDrawer,
|
||||
.cardBox,
|
||||
.paperList {
|
||||
background: var(--main-background);
|
||||
}
|
||||
|
||||
.navMenuOption-selected {
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
|
||||
.itemName {
|
||||
color: var(--main-text);
|
||||
}
|
||||
|
||||
.emby-input,
|
||||
.emby-textarea,
|
||||
.emby-select {
|
||||
background: var(--second-background);
|
||||
border-color: var(--second-background);
|
||||
}
|
||||
|
||||
.emby-input:focus,
|
||||
.emby-textarea:focus,
|
||||
.emby-input:hover,
|
||||
.emby-textarea:hover,
|
||||
.emby-select-withcolor {
|
||||
border-color: var(--main-color) !important;
|
||||
}
|
||||
|
||||
.emby-button-foreground {
|
||||
color: var(--main-text);
|
||||
}
|
||||
|
||||
.emby-button-foreground:hover,
|
||||
.emby-button-foreground:focus {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
.paper-icon-button-light {
|
||||
color: var(--main-text);
|
||||
}
|
||||
|
||||
.paper-icon-button-light:hover,
|
||||
.paper-icon-button-light:focus,
|
||||
.listItem:hover,
|
||||
.listItem:focus,
|
||||
.navMenuOption:hover,
|
||||
.navMenuOption:focus {
|
||||
color: var(--main-color);
|
||||
background-color: var(--hover-background);
|
||||
}
|
||||
|
||||
.emby-tab-button-active>.emby-button-foreground {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
.button-submit,
|
||||
.button-submit:focus,
|
||||
.button-alt,
|
||||
.button-alt:focus,
|
||||
.submit,
|
||||
.submit:focus,
|
||||
#btnAddPerson,
|
||||
#btnAddPerson:focus,
|
||||
.btnAddTrigger,
|
||||
.btnAddTrigger:focus,
|
||||
.btnAddUser,
|
||||
.btnAddUser:focus {
|
||||
color: var(--main-background);
|
||||
background: var(--main-color);
|
||||
}
|
||||
|
||||
.cardText-secondary {
|
||||
color: var(--dimmer-text);
|
||||
}
|
||||
|
||||
.button-cancel,
|
||||
.button-cancel:focus {
|
||||
color: var(--main-color);
|
||||
background: var(--main-background);
|
||||
}
|
||||
|
||||
#btnShutdown,
|
||||
#deviceDeleteAll,
|
||||
.btnDeleteImage,
|
||||
.btnResetPassword {
|
||||
color: var(--main-background);
|
||||
background: var(--red-color);
|
||||
}
|
||||
|
||||
.btnRefresh {
|
||||
background: var(--main-color);
|
||||
color: var(--main-background);
|
||||
}
|
||||
|
||||
.backgroundContainer.withBackdrop,
|
||||
.backdropContainer,
|
||||
.backgroundContainer {
|
||||
background: var(--main-background);
|
||||
}
|
||||
|
||||
.headerRight,
|
||||
.headerLeft {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
.listItemButton,
|
||||
.lnkMediaFolder {
|
||||
color: var(--main-text);
|
||||
}
|
||||
|
||||
.listItemButton:hover,
|
||||
.listItemButton:focus {
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
|
||||
.indicator {
|
||||
background-color: var(--main-color);
|
||||
color: var(--main-background);
|
||||
}
|
||||
|
||||
.playedIndicator {
|
||||
background-color: var(--green-color);
|
||||
color: var(--main-background);
|
||||
}
|
||||
|
||||
.alphaPickerRow {
|
||||
color: var(--dimmer-text);
|
||||
}
|
||||
|
||||
.itemAction:hover,
|
||||
.itemAction:focus {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
/* General focus element color */
|
||||
|
||||
.layout-tv .paper-icon-button-light.show-focus:focus {
|
||||
color: var(--main-color) !important;
|
||||
}
|
||||
|
||||
.emby-button.show-focus:focus {
|
||||
background: var(--main-color) !important;
|
||||
}
|
||||
|
||||
.button-flat:focus,
|
||||
.button-flat:hover {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
.sectionTitle,
|
||||
.cardText,
|
||||
.pageTitle,
|
||||
.detailSectionContent,
|
||||
.trackSelections,
|
||||
.emby-input,
|
||||
.checkboxLabel,
|
||||
.itemDetailsGroup,
|
||||
.checkboxOutline,
|
||||
.emby-textarea,
|
||||
.emby-select,
|
||||
.label,
|
||||
.selectLabel,
|
||||
.sidebarHeader,
|
||||
.listItem,
|
||||
.dashboardGeneralForm,
|
||||
.dashboardSections,
|
||||
.navMenuOption,
|
||||
.inputLabel,
|
||||
.content-primary,
|
||||
legend {
|
||||
color: var(--main-text);
|
||||
}
|
||||
|
||||
.fieldDescription,
|
||||
.secondary,
|
||||
.listItemBodyText {
|
||||
color: var(--dimmer-text);
|
||||
}
|
||||
|
||||
.sessionAppName,
|
||||
.sessionNowPlayingInfo {
|
||||
color: var(--main-background);
|
||||
--main-text: #cdd6f4;
|
||||
--dimmer-text: #9399b2;
|
||||
--green-color: var(--green);
|
||||
--red-color: var(--red);
|
||||
}
|
||||
+274
@@ -0,0 +1,274 @@
|
||||
* {
|
||||
scrollbar-color: var(--hover-background) var(--second-background);
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background: var(--main-color);
|
||||
color: var(--main-background);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--main-color);
|
||||
color: var(--main-background);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.mdl-slider {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
.mdl-slider-background-upper {
|
||||
background-color: var(--dimmer-text);
|
||||
}
|
||||
|
||||
.mdl-slider::-webkit-slider-thumb,
|
||||
.mdl-slider-background-lower {
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
|
||||
.mdl-slider-background-flex {
|
||||
background-color: var(--hover-background);
|
||||
}
|
||||
|
||||
.backgroundContainer,
|
||||
.formDialogHeader,
|
||||
.dialog,
|
||||
.dashboardGeneralForm,
|
||||
html {
|
||||
color: var(--main-text);
|
||||
background-color: var(--main-background);
|
||||
}
|
||||
|
||||
.sliderBubble,
|
||||
.skinHeader,
|
||||
.nowPlayingBar {
|
||||
color: var(--main-text);
|
||||
background-color: var(--second-background);
|
||||
}
|
||||
|
||||
.nowPlayingBarSecondaryText {
|
||||
color: var(--dimmer-text);
|
||||
}
|
||||
|
||||
.mainDrawer,
|
||||
.cardBox,
|
||||
.paperList {
|
||||
background: var(--main-background);
|
||||
}
|
||||
|
||||
.navMenuOption-selected {
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
|
||||
.itemName {
|
||||
color: var(--main-text);
|
||||
}
|
||||
|
||||
.ratingbutton-icon-withrating {
|
||||
color: var(--red-color);
|
||||
}
|
||||
|
||||
.emby-input,
|
||||
.emby-textarea,
|
||||
.emby-select {
|
||||
background: var(--second-background);
|
||||
border-color: var(--second-background);
|
||||
}
|
||||
|
||||
.emby-input:focus,
|
||||
.emby-textarea:focus,
|
||||
.emby-select-withcolor:focus {
|
||||
border-color: var(--main-color) !important;
|
||||
}
|
||||
|
||||
.emby-checkbox:checked + span + .checkboxOutline,
|
||||
.itemProgressBarForeground {
|
||||
color: var(--main-text);
|
||||
background-color: var(--main-color);
|
||||
border-color: var(--main-color);
|
||||
}
|
||||
|
||||
.fab, .raised {
|
||||
background-color: var(--second-background);
|
||||
color: var(--main-text);
|
||||
}
|
||||
|
||||
.emby-button-foreground {
|
||||
color: var(--main-text);
|
||||
}
|
||||
|
||||
.emby-button-foreground:focus {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
.paper-icon-button-light {
|
||||
color: var(--main-text);
|
||||
}
|
||||
|
||||
.paper-icon-button-light:hover:not(:disabled),
|
||||
.paper-icon-button-light:focus,
|
||||
.listItem:hover,
|
||||
.listItem:focus,
|
||||
.navMenuOption:hover,
|
||||
.navMenuOption:focus {
|
||||
color: var(--main-color);
|
||||
background-color: var(--hover-background);
|
||||
}
|
||||
|
||||
.emby-tab-button-active>.emby-button-foreground {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
.button-submit,
|
||||
.button-submit:focus,
|
||||
.button-alt,
|
||||
.button-alt:focus,
|
||||
.submit,
|
||||
.submit:focus,
|
||||
#btnAddPerson,
|
||||
#btnAddPerson:focus,
|
||||
.btnAddTrigger,
|
||||
.btnAddTrigger:focus,
|
||||
.btnAddUser,
|
||||
.btnAddUser:focus {
|
||||
color: var(--main-background);
|
||||
background: var(--main-color);
|
||||
}
|
||||
|
||||
.cardText-secondary {
|
||||
color: var(--dimmer-text);
|
||||
}
|
||||
|
||||
.button-cancel,
|
||||
.button-cancel:focus {
|
||||
color: var(--main-color);
|
||||
background: var(--main-background);
|
||||
}
|
||||
|
||||
#btnShutdown,
|
||||
#deviceDeleteAll,
|
||||
.btnDeleteImage,
|
||||
.btnResetPassword {
|
||||
color: var(--main-background);
|
||||
background: var(--red-color);
|
||||
}
|
||||
|
||||
.btnRefresh {
|
||||
background: var(--main-color);
|
||||
color: var(--main-background);
|
||||
}
|
||||
|
||||
.backgroundContainer.withBackdrop,
|
||||
.backdropContainer,
|
||||
.backgroundContainer {
|
||||
background: var(--main-background);
|
||||
}
|
||||
|
||||
.headerRight,
|
||||
.headerLeft {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
.MuiButtonBase-root,
|
||||
.MuiSvgIcon-root,
|
||||
.listItemButton,
|
||||
.lnkMediaFolder {
|
||||
color: var(--main-text) !important;
|
||||
}
|
||||
|
||||
.Mui-selected {
|
||||
background-color: var(--main-background) !important;
|
||||
}
|
||||
|
||||
.MuiPaper-root,
|
||||
.MuiBox-root,
|
||||
.MuiTableContainer-root,
|
||||
.MuiTableRow-root,
|
||||
.MuiTableCell-root,
|
||||
.MuiTableFooter-root,
|
||||
.MuiList-root {
|
||||
background-color: var(--second-background);
|
||||
border-color: var(--hover-background) !important;
|
||||
outline-color: var(--main-color);
|
||||
}
|
||||
|
||||
.MuiToolbar-root {
|
||||
background-color: var(--main-background);
|
||||
}
|
||||
|
||||
.listItemButton:focus {
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
|
||||
.indicator {
|
||||
background-color: var(--main-color);
|
||||
color: var(--main-background);
|
||||
}
|
||||
|
||||
.playedIndicator {
|
||||
background-color: var(--green-color);
|
||||
color: var(--main-background);
|
||||
}
|
||||
|
||||
.alphaPickerRow {
|
||||
color: var(--dimmer-text);
|
||||
}
|
||||
|
||||
.itemAction:focus {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
/* General focus element color */
|
||||
|
||||
.layout-tv .paper-icon-button-light.show-focus:focus {
|
||||
color: var(--main-color) !important;
|
||||
}
|
||||
|
||||
.emby-button.show-focus:focus {
|
||||
background: var(--main-color) !important;
|
||||
}
|
||||
|
||||
.button-flat:focus {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
.sectionTitle,
|
||||
.cardText,
|
||||
.pageTitle,
|
||||
.detailSectionContent,
|
||||
.trackSelections,
|
||||
.emby-input,
|
||||
.checkboxLabel,
|
||||
.itemDetailsGroup,
|
||||
.checkboxOutline,
|
||||
.emby-textarea,
|
||||
.emby-select,
|
||||
.label,
|
||||
.selectLabel,
|
||||
.sidebarHeader,
|
||||
.listItem,
|
||||
.MuiMenuItem-root,
|
||||
.dashboardGeneralForm,
|
||||
.dashboardSections,
|
||||
.navMenuOption,
|
||||
.inputLabel,
|
||||
.content-primary,
|
||||
legend {
|
||||
color: var(--main-text);
|
||||
}
|
||||
|
||||
.fieldDescription,
|
||||
.secondary,
|
||||
.listItemBodyText {
|
||||
color: var(--dimmer-text);
|
||||
}
|
||||
|
||||
.listItem-border {
|
||||
border-color: var(--hover-background) !important;
|
||||
}
|
||||
|
||||
.sessionAppName,
|
||||
.sessionNowPlayingInfo {
|
||||
color: var(--main-background);
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
---
|
||||
whiskers:
|
||||
version: 2.5.1
|
||||
matrix:
|
||||
- flavor
|
||||
filename: 'src/{{flavor.identifier}}.css'
|
||||
---
|
||||
:root {
|
||||
--rosewater: #{{rosewater.hex}};
|
||||
--flamingo: #{{flamingo.hex}};
|
||||
--pink: #{{pink.hex}};
|
||||
--mauve: #{{mauve.hex}};
|
||||
--red: #{{red.hex}};
|
||||
--maroon: #{{maroon.hex}};
|
||||
--peach: #{{peach.hex}};
|
||||
--yellow: #{{yellow.hex}};
|
||||
--green: #{{green.hex}};
|
||||
--teal: #{{teal.hex}};
|
||||
--sky: #{{sky.hex}};
|
||||
--sapphire: #{{sapphire.hex}};
|
||||
--blue: #{{blue.hex}};
|
||||
--lavender: #{{lavender.hex}};
|
||||
|
||||
--main-color: var(--sapphire);
|
||||
--main-background: #{{base.hex}};
|
||||
--second-background: #{{mantle.hex}};
|
||||
--hover-background: #{{surface0.hex}};
|
||||
--main-text: #{{text.hex}};
|
||||
--dimmer-text: #{{overlay2.hex}};
|
||||
--green-color: var(--green);
|
||||
--red-color: var(--red);
|
||||
}
|
||||
Reference in New Issue
Block a user