jellyfin

frappe.css

@@ -0,0 +1,185 @@
+:root {
+    --main-color: #85c1dc;
+    --main-background: #303446;
+    --second-background: #292c3c;
+    --hover-background: #737994;
+    --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);
+}

latte.css

@@ -0,0 +1,185 @@
+:root {
+    --main-color: #209fb5;
+    --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 {
+    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);
+}

macchiato.css

@@ -0,0 +1,185 @@
+:root {
+    --main-color: #7dc4e4;
+    --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);
+}

mocha.css

@@ -0,0 +1,185 @@
+:root {
+    --main-color: #74c7ec;
+    --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);
+}