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>
|
</h3>
|
||||||
|
|
||||||
<p align="center">
|
<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/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/isabelroses/jellyfin?colorA=363a4f&colorB=f5a97f&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/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/contributors"><img src="https://img.shields.io/github/contributors/adamperkowski/jellyfin?colorA=363a4f&colorB=a6da95&style=for-the-badge"></a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
@@ -36,17 +36,43 @@
|
|||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
1. Copy your theme from:
|
1. Copy the theme import rule:
|
||||||
- [🌻 Catppuccin Latte](/src/latte.css?raw=1)
|
```css
|
||||||
- [🪴 Catppuccin Frappe](/src/frappe.css?raw=1)
|
@import url('https://adamperkowski.github.io/jellyfin/theme.css');
|
||||||
- [🌺 Catppuccin Macchiato](/src/macchiato.css?raw=1)
|
```
|
||||||
- [🌿 Catppuccin Mocha](/src/mocha.css?raw=1)
|
2. Open settings, navigate to Display and paste the CSS into the section called "Custom CSS code"
|
||||||
2. Open settings navigate to Display and from there 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:
|
||||||
3. Then press save and you're done!
|
- 🌻 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
|
## 💝 Thanks to
|
||||||
|
|
||||||
- [Isabel](https://github.com/isabelroses)
|
- [Isabel](https://github.com/isabelroses)
|
||||||
|
- [Adam](https://github.com/adamperkowski)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
+23
-218
@@ -1,220 +1,25 @@
|
|||||||
:root {
|
:root {
|
||||||
--main-color: #85c1dc;
|
--rosewater: #f2d5cf;
|
||||||
--main-background: #303446;
|
--flamingo: #eebebe;
|
||||||
--second-background: #292c3c;
|
--pink: #f4b8e4;
|
||||||
--hover-background: #737994;
|
--mauve: #ca9ee6;
|
||||||
--main-text: #c6d0f5;
|
--red: #e78284;
|
||||||
--dimmer-text: #949cbb;
|
--maroon: #ea999c;
|
||||||
--green-color: #a6d189;
|
--peach: #ef9f76;
|
||||||
--red-color: #e78284;
|
--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: #414559;
|
||||||
|
--main-text: #c6d0f5;
|
||||||
|
--dimmer-text: #949cbb;
|
||||||
|
--green-color: var(--green);
|
||||||
|
--red-color: var(--red);
|
||||||
}
|
}
|
||||||
|
|
||||||
::-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);
|
|
||||||
}
|
|
||||||
+23
-220
@@ -1,222 +1,25 @@
|
|||||||
:root {
|
:root {
|
||||||
--main-color: #209fb5;
|
--rosewater: #dc8a78;
|
||||||
--main-background: #eff1f5;
|
--flamingo: #dd7878;
|
||||||
--second-background: #e6e9ef;
|
--pink: #ea76cb;
|
||||||
--hover-background: #ccd0da;
|
--mauve: #8839ef;
|
||||||
--main-text: #4c4f69;
|
--red: #d20f39;
|
||||||
--dimmer-text: #7c7f93;
|
--maroon: #e64553;
|
||||||
--green-color: #40a02b;
|
--peach: #fe640b;
|
||||||
--red-color: #d20f39;
|
--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: var(--green);
|
||||||
|
--red-color: var(--red);
|
||||||
}
|
}
|
||||||
|
|
||||||
::-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);
|
|
||||||
}
|
|
||||||
+23
-218
@@ -1,220 +1,25 @@
|
|||||||
:root {
|
:root {
|
||||||
--main-color: #7dc4e4;
|
--rosewater: #f4dbd6;
|
||||||
--main-background: #24273a;
|
--flamingo: #f0c6c6;
|
||||||
--second-background: #1e2030;
|
--pink: #f5bde6;
|
||||||
--hover-background: #363a4f;
|
--mauve: #c6a0f6;
|
||||||
--main-text: #cad3f5;
|
--red: #ed8796;
|
||||||
--dimmer-text: #939ab7;
|
--maroon: #ee99a0;
|
||||||
--green-color: #a6da95;
|
--peach: #f5a97f;
|
||||||
--red-color: #ed8796;
|
--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: var(--green);
|
||||||
|
--red-color: var(--red);
|
||||||
}
|
}
|
||||||
|
|
||||||
::-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);
|
|
||||||
}
|
|
||||||
+23
-218
@@ -1,220 +1,25 @@
|
|||||||
:root {
|
:root {
|
||||||
--main-color: #74c7ec;
|
--rosewater: #f5e0dc;
|
||||||
--main-background: #1E1E2E;
|
--flamingo: #f2cdcd;
|
||||||
--second-background: #181825;
|
--pink: #f5c2e7;
|
||||||
--hover-background: #313244;
|
--mauve: #cba6f7;
|
||||||
--main-text: #CDD6F4;
|
--red: #f38ba8;
|
||||||
--dimmer-text: #9399B2;
|
--maroon: #eba0ac;
|
||||||
--green-color: #a6e3a1;
|
--peach: #fab387;
|
||||||
--red-color: #f38ba8;
|
--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: var(--green);
|
||||||
|
--red-color: var(--red);
|
||||||
}
|
}
|
||||||
|
|
||||||
::-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);
|
|
||||||
}
|
|
||||||
+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