jellyfin/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2026-09-03 03:50:02 +03:00
Code Issues Packages Projects Releases Wiki Activity

Remove var mixin

Browse Source
This commit is contained in:
Bill Thornton
2026-03-19 12:53:21 -04:00
parent 2757cf7ace
commit 2b0578880a
5 changed files with 90 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
postcss.config.js
+3 -1
View File
@@ -3,13 +3,15 @@ const postcssPresetEnv = require('postcss-preset-env');
const autoprefixer = require('autoprefixer'); const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano'); const cssnano = require('cssnano');
const DEV_MODE = process.env.NODE_ENV !== 'production';
const config = () => ({ const config = () => ({
plugins: [ plugins: [
// Explicitly specify browserslist to override ones from node_modules // Explicitly specify browserslist to override ones from node_modules
// For example, Swiper has it in its package.json // For example, Swiper has it in its package.json
postcssPresetEnv({ browsers: packageConfig.browserslist }), postcssPresetEnv({ browsers: packageConfig.browserslist }),
autoprefixer({ overrideBrowserslist: packageConfig.browserslist }), autoprefixer({ overrideBrowserslist: packageConfig.browserslist }),
cssnano() DEV_MODE ? null : cssnano()
] ]
}); });
src/styles/_mixins.scss
-8
View File
@@ -10,11 +10,3 @@
#{$property}: max($max-value, $default); #{$property}: max($max-value, $default);
} }
} }
/**
* Helper mixin to add properties using css variables with fallback values.
*/
@mixin var($property, $variable, $default, $important: false) {
#{$property}: $default if($important, !important, null);
#{$property}: var($variable) if($important, !important, null);
}
src/themes/_base/_theme.scss
+84 -85
View File
@@ -1,4 +1,3 @@
@use '../../styles/mixins' as *;
@use './palette' as palette; @use './palette' as palette;
// Theme options // Theme options
@@ -47,25 +46,25 @@ $snackbarContent-color: rgba(255, 255, 255, 0.87) !default;
.skinHeader, .skinHeader,
html { html {
@include var(color, --jf-palette-text-secondary, $text-secondary); color: var(--jf-palette-text-secondary, $text-secondary);
} }
.wizardStartForm, .wizardStartForm,
.ui-corner-all, .ui-corner-all,
.ui-shadow { .ui-shadow {
@include var(background-color, --jf-palette-background-default, $background-default); background-color: var(--jf-palette-background-default, $background-default);
} }
.emby-collapsible-button { .emby-collapsible-button {
@include var(border-color, --jf-palette-divider, $divider); border-color: var(--jf-palette-divider, $divider);
} }
.skinHeader-withBackground { .skinHeader-withBackground {
@include var(background-color, --jf-palette-AppBar-defaultBg, $appBar-defaultBg); background-color: var(--jf-palette-AppBar-defaultBg, $appBar-defaultBg);
} }
.skinHeader.semiTransparent { .skinHeader.semiTransparent {
@include var(background-color, --jf-palette-AppBar-transparentBg, $appBar-transparentBg); background-color: var(--jf-palette-AppBar-transparentBg, $appBar-transparentBg);
backdrop-filter: none !important; backdrop-filter: none !important;
.layout-tv & { .layout-tv & {
@@ -86,7 +85,7 @@ html {
.nowPlayingPlaylist, .nowPlayingPlaylist,
.nowPlayingContextMenu, .nowPlayingContextMenu,
html { html {
@include var(background-color, --jf-palette-background-default, $background-default); background-color: var(--jf-palette-background-default, $background-default);
} }
.backgroundContainer.withBackdrop { .backgroundContainer.withBackdrop {
@@ -95,47 +94,47 @@ html {
@media (hover: hover) and (pointer: fine) { @media (hover: hover) and (pointer: fine) {
.paper-icon-button-light:hover:not(:disabled) { .paper-icon-button-light:hover:not(:disabled) {
@include var(color, --jf-palette-primary-main, $primary-main); color: var(--jf-palette-primary-main, $primary-main);
background-color: $primary-hover; background-color: $primary-hover;
background-color: rgba(var(--jf-palette-primary-mainChannel) / var(--jf-palette-action-selectedOpacity)); background-color: rgba(var(--jf-palette-primary-mainChannel) / var(--jf-palette-action-selectedOpacity));
} }
} }
.paper-icon-button-light:active:not(:disabled) { .paper-icon-button-light:active:not(:disabled) {
@include var(color, --jf-palette-primary-main, $primary-main); color: var(--jf-palette-primary-main, $primary-main);
background-color: $primary-hover; background-color: $primary-hover;
background-color: rgba(var(--jf-palette-primary-mainChannel) / var(--jf-palette-action-selectedOpacity)); background-color: rgba(var(--jf-palette-primary-mainChannel) / var(--jf-palette-action-selectedOpacity));
} }
.paper-icon-button-light.show-focus:focus { .paper-icon-button-light.show-focus:focus {
@include var(color, --jf-palette-primary-main, $primary-main); color: var(--jf-palette-primary-main, $primary-main);
} }
a[data-role=button], a[data-role=button],
.fab, .fab,
.raised { .raised {
@include var(background, --jf-palette-Button-inheritContainedBg, $button-inheritContainedBg); background: var(--jf-palette-Button-inheritContainedBg, $button-inheritContainedBg);
@include var(color, --jf-palette-text-secondary, $text-secondary); color: var(--jf-palette-text-secondary, $text-secondary);
&:focus, &:focus,
&:hover { &:hover {
@include var(background, --jf-palette-Button-inheritContainedHoverBg, $button-inheritContainedHoverBg); background: var(--jf-palette-Button-inheritContainedHoverBg, $button-inheritContainedHoverBg);
} }
} }
.button-submit { .button-submit {
@include var(background, --jf-palette-primary-main, $primary-main); background: var(--jf-palette-primary-main, $primary-main);
@include var(color, --jf-palette-primary-contrastText, $primary-contrastText); color: var(--jf-palette-primary-contrastText, $primary-contrastText);
&:focus, &:focus,
&:hover { &:hover {
@include var(background, --jf-palette-primary-dark, $primary-dark); background: var(--jf-palette-primary-dark, $primary-dark);
} }
} }
.button-delete { .button-delete {
@include var(background, --jf-palette-error-main, $error-main); background: var(--jf-palette-error-main, $error-main);
@include var(color, --jf-palette-error-contrastText, $error-contrastText); color: var(--jf-palette-error-contrastText, $error-contrastText);
} }
.checkboxLabel { .checkboxLabel {
@@ -147,13 +146,13 @@ a[data-role=button],
.inputLabelUnfocused, .inputLabelUnfocused,
.paperListLabel, .paperListLabel,
.textareaLabelUnfocused { .textareaLabelUnfocused {
@include var(color, --jf-palette-text-secondary, $text-secondary); color: var(--jf-palette-text-secondary, $text-secondary);
} }
.inputLabelFocused, .inputLabelFocused,
.selectLabelFocused, .selectLabelFocused,
.textareaLabelFocused { .textareaLabelFocused {
@include var(color, --jf-palette-primary-main, $primary-main); color: var(--jf-palette-primary-main, $primary-main);
} }
.checkboxOutline { .checkboxOutline {
@@ -165,7 +164,7 @@ a[data-role=button],
.formDialogHeader:not(.formDialogHeader-clear), .formDialogHeader:not(.formDialogHeader-clear),
.paperList, .paperList,
.visualCardBox { .visualCardBox {
@include var(background-color, --jf-palette-background-paper, $background-paper); background-color: var(--jf-palette-background-paper, $background-paper);
} }
.layout-tv .formDialogFooter:not(.formDialogFooter-clear) { .layout-tv .formDialogFooter:not(.formDialogFooter-clear) {
@@ -179,11 +178,11 @@ a[data-role=button],
.nowPlayingBarSecondaryText, .nowPlayingBarSecondaryText,
.programSecondaryTitle, .programSecondaryTitle,
.secondaryText { .secondaryText {
@include var(color, --jf-palette-text-secondary, $text-secondary); color: var(--jf-palette-text-secondary, $text-secondary);
} }
.actionsheetDivider { .actionsheetDivider {
@include var(background, --jf-palette-divider, $divider); background: var(--jf-palette-divider, $divider);
} }
.cardFooter-vibrant .cardText-secondary { .cardFooter-vibrant .cardText-secondary {
@@ -192,72 +191,72 @@ a[data-role=button],
} }
.toast { .toast {
@include var(background, --jf-palette-SnackbarContent-bg, $snackbarContent-bg); background: var(--jf-palette-SnackbarContent-bg, $snackbarContent-bg);
@include var(color, --jf-palette-SnackbarContent-color, $snackbarContent-color); color: var(--jf-palette-SnackbarContent-color, $snackbarContent-color);
} }
.appfooter, .appfooter,
.playlistSectionButton { .playlistSectionButton {
@include var(background, --jf-palette-background-paper, $background-paper); background: var(--jf-palette-background-paper, $background-paper);
@include var(color, --jf-palette-text-secondary, $text-secondary); color: var(--jf-palette-text-secondary, $text-secondary);
} }
.itemSelectionPanel { .itemSelectionPanel {
@include var(border-color, --jf-palette-primary-main, $primary-main); border-color: var(--jf-palette-primary-main, $primary-main);
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
} }
.selectionCommandsPanel { .selectionCommandsPanel {
@include var(background, --jf-palette-primary-main, $primary-main); background: var(--jf-palette-primary-main, $primary-main);
@include var(color, --jf-palette-primary-contrastText, $primary-contrastText); color: var(--jf-palette-primary-contrastText, $primary-contrastText);
} }
.upNextDialog-countdownText { .upNextDialog-countdownText {
@include var(color, --jf-palette-primary-main, $primary-main); color: var(--jf-palette-primary-main, $primary-main);
} }
.alphaPickerButton { .alphaPickerButton {
@include var(color, --jf-palette-text-secondary, $text-secondary); color: var(--jf-palette-text-secondary, $text-secondary);
background-color: transparent; background-color: transparent;
&-selected { &-selected {
@include var(color, --jf-palette-text-primary, $text-primary); color: var(--jf-palette-text-primary, $text-primary);
} }
&-tv:focus { &-tv:focus {
@include var(background-color, --jf-palette-primary-main, $primary-main); background-color: var(--jf-palette-primary-main, $primary-main);
@include var(color, --jf-palette-primary-contrastText, $primary-contrastText); color: var(--jf-palette-primary-contrastText, $primary-contrastText);
} }
} }
.noBackdropTransparency .detailPagePrimaryContainer, .noBackdropTransparency .detailPagePrimaryContainer,
.noBackdropTransparency .detailPageSecondaryContainer { .noBackdropTransparency .detailPageSecondaryContainer {
@include var(background-color, --jf-palette-background-default, $background-default); background-color: var(--jf-palette-background-default, $background-default);
} }
.listItem-border { .listItem-border {
@include var(border-color, --jf-palette-divider, $divider); border-color: var(--jf-palette-divider, $divider);
} }
.listItem:focus { .listItem:focus {
@include var(background-color, --jf-palette-action-focus, $action-focus); background-color: var(--jf-palette-action-focus, $action-focus);
} }
.listItem:hover { .listItem:hover {
@include var(background-color, --jf-palette-action-hover, $action-hover); background-color: var(--jf-palette-action-hover, $action-hover);
} }
.progressring-spiner { .progressring-spiner {
@include var(border-color, --jf-palette-primary-main, $primary-main); border-color: var(--jf-palette-primary-main, $primary-main);
} }
.button-flat:hover { .button-flat:hover {
@include var(color, --jf-palette-primary-main, $primary-main); color: var(--jf-palette-primary-main, $primary-main);
} }
.button-link { .button-link {
@include var(color, --jf-palette-primary-main, $primary-main); color: var(--jf-palette-primary-main, $primary-main);
} }
.mediaInfoText { .mediaInfoText {
@@ -268,23 +267,23 @@ a[data-role=button],
.emby-input, .emby-input,
.emby-textarea { .emby-textarea {
@include var(background, --jf-palette-FilledInput-bg, $filledInput-bg); background: var(--jf-palette-FilledInput-bg, $filledInput-bg);
@include var(border-color, --jf-palette-FilledInput-bg, $filledInput-bg); border-color: var(--jf-palette-FilledInput-bg, $filledInput-bg);
color: inherit; color: inherit;
border-width: 0.16em; border-width: 0.16em;
border-style: solid; border-style: solid;
border-radius: 0.2em; border-radius: 0.2em;
&:focus { &:focus {
@include var(border-color, --jf-palette-primary-main, $primary-main); border-color: var(--jf-palette-primary-main, $primary-main);
} }
} }
.emby-select-withcolor { .emby-select-withcolor {
// NOTE: This should use `FilledInput-bg` to match other form elements, // NOTE: This should use `FilledInput-bg` to match other form elements,
// but that will break the native dropdown styling // but that will break the native dropdown styling
@include var(background, --jf-palette-background-paper, $background-paper); background: var(--jf-palette-background-paper, $background-paper);
@include var(border-color, --jf-palette-FilledInput-bg, $filledInput-bg); border-color: var(--jf-palette-FilledInput-bg, $filledInput-bg);
color: inherit; color: inherit;
border-width: 0.16em; border-width: 0.16em;
border-style: solid; border-style: solid;
@@ -292,78 +291,78 @@ a[data-role=button],
} }
.emby-select-withcolor > option { .emby-select-withcolor > option {
@include var(background, --jf-palette-background-paper, $background-paper); background: var(--jf-palette-background-paper, $background-paper);
color: inherit; color: inherit;
} }
.emby-select-withcolor:focus { .emby-select-withcolor:focus {
@include var(border-color, --jf-palette-primary-main, $primary-main, true); border-color: var(--jf-palette-primary-main, $primary-main) !important;
} }
.emby-select-tv-withcolor:focus { .emby-select-tv-withcolor:focus {
@include var(background-color, --jf-palette-primary-main, $primary-main, true); background-color: var(--jf-palette-primary-main, $primary-main) !important;
@include var(color, --jf-palette-primary-contrastText, $primary-contrastText, true); color: var(--jf-palette-primary-contrastText, $primary-contrastText) !important;
} }
.emby-checkbox:checked + span + .checkboxOutline { .emby-checkbox:checked + span + .checkboxOutline {
@include var(border-color, --jf-palette-primary-main, $primary-main); border-color: var(--jf-palette-primary-main, $primary-main);
} }
.emby-checkbox:focus + span + .checkboxOutline { .emby-checkbox:focus + span + .checkboxOutline {
@include var(border-color, --jf-palette-common-white, $common-white); border-color: var(--jf-palette-common-white, $common-white);
} }
.emby-checkbox:checked + span + .checkboxOutline, .emby-checkbox:checked + span + .checkboxOutline,
.itemProgressBarForeground { .itemProgressBarForeground {
@include var(background-color, --jf-palette-primary-main, $primary-main); background-color: var(--jf-palette-primary-main, $primary-main);
} }
.emby-checkbox:focus:not(:checked) + span + .checkboxOutline { .emby-checkbox:focus:not(:checked) + span + .checkboxOutline {
@include var(border-color, --jf-palette-primary-main, $primary-main); border-color: var(--jf-palette-primary-main, $primary-main);
} }
.itemProgressBarForeground-recording { .itemProgressBarForeground-recording {
@include var(background-color, --jf-palette-error-light, $error-light); background-color: var(--jf-palette-error-light, $error-light);
} }
.countIndicator, .countIndicator,
.fullSyncIndicator, .fullSyncIndicator,
.mediaSourceIndicator, .mediaSourceIndicator,
.playedIndicator { .playedIndicator {
@include var(background, --jf-palette-primary-main, $primary-main); background: var(--jf-palette-primary-main, $primary-main);
@include var(color, --jf-palette-primary-contrastText, $primary-contrastText); color: var(--jf-palette-primary-contrastText, $primary-contrastText);
} }
.mainDrawer, .mainDrawer,
.drawer-open { .drawer-open {
@include var(background-color, --jf-palette-background-default, $background-default); background-color: var(--jf-palette-background-default, $background-default);
} }
.navMenuOption:hover { .navMenuOption:hover {
@include var(background, --jf-palette-action-hover, $action-hover); background: var(--jf-palette-action-hover, $action-hover);
} }
.navMenuOption-selected { .navMenuOption-selected {
@include var(background, --jf-palette-primary-main, $primary-main, true); background: var(--jf-palette-primary-main, $primary-main) !important;
@include var(color, --jf-palette-primary-contrastText, $primary-contrastText); color: var(--jf-palette-primary-contrastText, $primary-contrastText);
} }
.emby-button.show-focus:focus { .emby-button.show-focus:focus {
@include var(background, --jf-palette-primary-main, $primary-main); background: var(--jf-palette-primary-main, $primary-main);
@include var(color, --jf-palette-primary-contrastText, $primary-contrastText); color: var(--jf-palette-primary-contrastText, $primary-contrastText);
} }
.emby-tab-button { .emby-tab-button {
@include var(color, --jf-palette-text-secondary, $text-secondary); color: var(--jf-palette-text-secondary, $text-secondary);
} }
.emby-tab-button-active { .emby-tab-button-active {
@include var(color, --jf-palette-text-primary, $text-primary); color: var(--jf-palette-text-primary, $text-primary);
} }
.emby-tab-button.show-focus:focus, .emby-tab-button.show-focus:focus,
.emby-tab-button:hover { .emby-tab-button:hover {
@include var(color, --jf-palette-primary-main, $primary-main); color: var(--jf-palette-primary-main, $primary-main);
} }
.channelPrograms, .channelPrograms,
@@ -394,8 +393,8 @@ a[data-role=button],
.guide-channelHeaderCell:focus, .guide-channelHeaderCell:focus,
.programCell:focus { .programCell:focus {
@include var(background-color, --jf-palette-primary-main, $primary-main, true); background-color: var(--jf-palette-primary-main, $primary-main) !important;
@include var(color, --jf-palette-primary-contrastText, $primary-contrastText, true); color: var(--jf-palette-primary-contrastText, $primary-contrastText) !important;
} }
.guide-programTextIcon { .guide-programTextIcon {
@@ -409,33 +408,33 @@ a[data-role=button],
.guide-date-tab-button.emby-tab-button-active, .guide-date-tab-button.emby-tab-button-active,
.guide-date-tab-button:focus { .guide-date-tab-button:focus {
@include var(color, --jf-palette-primary-main, $primary-main); color: var(--jf-palette-primary-main, $primary-main);
} }
.guide-date-tab-button.show-focus:focus { .guide-date-tab-button.show-focus:focus {
@include var(background-color, --jf-palette-primary-main, $primary-main); background-color: var(--jf-palette-primary-main, $primary-main);
@include var(color, --jf-palette-primary-contrastText, $primary-contrastText); color: var(--jf-palette-primary-contrastText, $primary-contrastText);
} }
.infoBanner { .infoBanner {
@include var(background, --jf-palette-Alert-infoFilledBg, $alert-infoFilledBg); background: var(--jf-palette-Alert-infoFilledBg, $alert-infoFilledBg);
@include var(color, --jf-palette-Alert-infoFilledColor, $alert-infoFilledColor); color: var(--jf-palette-Alert-infoFilledColor, $alert-infoFilledColor);
padding: 1em; padding: 1em;
border-radius: 0.25em; border-radius: 0.25em;
} }
.ratingbutton-icon-withrating, .ratingbutton-icon-withrating,
.playstatebutton-icon-played { .playstatebutton-icon-played {
@include var(color, --jf-palette-error-light, $error-light); color: var(--jf-palette-error-light, $error-light);
} }
.buttonActive { .buttonActive {
@include var(color, --jf-palette-primary-main, $primary-main, true); color: var(--jf-palette-primary-main, $primary-main) !important;
} }
.card:focus .cardBox.visualCardBox, .card:focus .cardBox.visualCardBox,
.card:focus .cardBox:not(.visualCardBox) .cardScalable { .card:focus .cardBox:not(.visualCardBox) .cardScalable {
@include var(border-color, --jf-palette-primary-main, $primary-main, true); border-color: var(--jf-palette-primary-main, $primary-main) !important;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
@@ -463,36 +462,36 @@ a[data-role=button],
} }
.metadataSidebarIcon { .metadataSidebarIcon {
@include var(color, --jf-palette-primary-main, $primary-main); color: var(--jf-palette-primary-main, $primary-main);
} }
#comicsPlayer, #comicsPlayer,
#bookPlayer, #bookPlayer,
#pdfPlayer { #pdfPlayer {
@include var(background-color, --jf-palette-background-default, $background-default); background-color: var(--jf-palette-background-default, $background-default);
} }
#comicsPlayer .swiper-pagination { #comicsPlayer .swiper-pagination {
@include var(background-color, --jf-palette-background-default, $background-default); background-color: var(--jf-palette-background-default, $background-default);
@include var(color, --jf-palette-text-primary, $text-primary); color: var(--jf-palette-text-primary, $text-primary);
} }
#bookPlayer .topButtons, #bookPlayer .topButtons,
#comicsPlayer .actionButtonIcon, #comicsPlayer .actionButtonIcon,
#pdfPlayer .actionButtonIcon { #pdfPlayer .actionButtonIcon {
@include var(color, --jf-palette-text-primary, $text-primary); color: var(--jf-palette-text-primary, $text-primary);
} }
#dialogToc { #dialogToc {
@include var(background-color, --jf-palette-background-default, $background-default); background-color: var(--jf-palette-background-default, $background-default);
} }
#dialogToc .toc li a, #dialogToc .toc li a,
#dialogToc .bookplayerButtonIcon { #dialogToc .bookplayerButtonIcon {
@include var(color, --jf-palette-text-secondary, $text-secondary); color: var(--jf-palette-text-secondary, $text-secondary);
&:active, &:active,
&:hover { &:hover {
@include var(color, --jf-palette-primary-main, $primary-main); color: var(--jf-palette-primary-main, $primary-main);
} }
} }
src/themes/dark/theme.scss
+1 -2
View File
@@ -24,8 +24,7 @@
/* Detail ribbon on item details pages */ /* Detail ribbon on item details pages */
.detailRibbon { .detailRibbon {
background: rgba(32, 32, 32, 0.8); background: rgba(var(--jf-palette-background-paperChannel, 32 32 32) / 0.8);
background: rgba(var(--jf-palette-background-paperChannel) / 0.8);
.layout-tv & { .layout-tv & {
background: none; background: none;
src/themes/light/theme.scss
+2 -3
View File
@@ -1,4 +1,3 @@
@use '../../styles/mixins' as *;
@use '../_base/palette' as palette; @use '../_base/palette' as palette;
/* Import the base theme with overrides */ /* Import the base theme with overrides */
@@ -26,8 +25,8 @@
// Override the alpha picker selected colors // Override the alpha picker selected colors
.alphaPickerButton-selected { .alphaPickerButton-selected {
@include var(background-color, --jf-palette-primary-main, palette.$primary-main); background-color: var(--jf-palette-primary-main, palette.$primary-main);
@include var(color, --jf-palette-primary-contrastText, palette.$primary-contrastText); color: var(--jf-palette-primary-contrastText, palette.$primary-contrastText);
} }
/* Card background color variants */ /* Card background color variants */