jellyfin/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2026-09-02 19:43:13 +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 cssnano = require('cssnano');
const DEV_MODE = process.env.NODE_ENV !== 'production';
const config = () => ({
plugins: [
// Explicitly specify browserslist to override ones from node_modules
// For example, Swiper has it in its package.json
postcssPresetEnv({ browsers: 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);
}
}
/**
* 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;
// Theme options
@@ -47,25 +46,25 @@ $snackbarContent-color: rgba(255, 255, 255, 0.87) !default;
.skinHeader,
html {
@include var(color, --jf-palette-text-secondary, $text-secondary);
color: var(--jf-palette-text-secondary, $text-secondary);
}
.wizardStartForm,
.ui-corner-all,
.ui-shadow {
@include var(background-color, --jf-palette-background-default, $background-default);
background-color: var(--jf-palette-background-default, $background-default);
}
.emby-collapsible-button {
@include var(border-color, --jf-palette-divider, $divider);
border-color: var(--jf-palette-divider, $divider);
}
.skinHeader-withBackground {
@include var(background-color, --jf-palette-AppBar-defaultBg, $appBar-defaultBg);
background-color: var(--jf-palette-AppBar-defaultBg, $appBar-defaultBg);
}
.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;
.layout-tv & {
@@ -86,7 +85,7 @@ html {
.nowPlayingPlaylist,
.nowPlayingContextMenu,
html {
@include var(background-color, --jf-palette-background-default, $background-default);
background-color: var(--jf-palette-background-default, $background-default);
}
.backgroundContainer.withBackdrop {
@@ -95,47 +94,47 @@ html {
@media (hover: hover) and (pointer: fine) {
.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: rgba(var(--jf-palette-primary-mainChannel) / var(--jf-palette-action-selectedOpacity));
}
}
.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: rgba(var(--jf-palette-primary-mainChannel) / var(--jf-palette-action-selectedOpacity));
}
.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],
.fab,
.raised {
@include var(background, --jf-palette-Button-inheritContainedBg, $button-inheritContainedBg);
@include var(color, --jf-palette-text-secondary, $text-secondary);
background: var(--jf-palette-Button-inheritContainedBg, $button-inheritContainedBg);
color: var(--jf-palette-text-secondary, $text-secondary);
&:focus,
&:hover {
@include var(background, --jf-palette-Button-inheritContainedHoverBg, $button-inheritContainedHoverBg);
background: var(--jf-palette-Button-inheritContainedHoverBg, $button-inheritContainedHoverBg);
}
}
.button-submit {
@include var(background, --jf-palette-primary-main, $primary-main);
@include var(color, --jf-palette-primary-contrastText, $primary-contrastText);
background: var(--jf-palette-primary-main, $primary-main);
color: var(--jf-palette-primary-contrastText, $primary-contrastText);
&:focus,
&:hover {
@include var(background, --jf-palette-primary-dark, $primary-dark);
background: var(--jf-palette-primary-dark, $primary-dark);
}
}
.button-delete {
@include var(background, --jf-palette-error-main, $error-main);
@include var(color, --jf-palette-error-contrastText, $error-contrastText);
background: var(--jf-palette-error-main, $error-main);
color: var(--jf-palette-error-contrastText, $error-contrastText);
}
.checkboxLabel {
@@ -147,13 +146,13 @@ a[data-role=button],
.inputLabelUnfocused,
.paperListLabel,
.textareaLabelUnfocused {
@include var(color, --jf-palette-text-secondary, $text-secondary);
color: var(--jf-palette-text-secondary, $text-secondary);
}
.inputLabelFocused,
.selectLabelFocused,
.textareaLabelFocused {
@include var(color, --jf-palette-primary-main, $primary-main);
color: var(--jf-palette-primary-main, $primary-main);
}
.checkboxOutline {
@@ -165,7 +164,7 @@ a[data-role=button],
.formDialogHeader:not(.formDialogHeader-clear),
.paperList,
.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) {
@@ -179,11 +178,11 @@ a[data-role=button],
.nowPlayingBarSecondaryText,
.programSecondaryTitle,
.secondaryText {
@include var(color, --jf-palette-text-secondary, $text-secondary);
color: var(--jf-palette-text-secondary, $text-secondary);
}
.actionsheetDivider {
@include var(background, --jf-palette-divider, $divider);
background: var(--jf-palette-divider, $divider);
}
.cardFooter-vibrant .cardText-secondary {
@@ -192,72 +191,72 @@ a[data-role=button],
}
.toast {
@include var(background, --jf-palette-SnackbarContent-bg, $snackbarContent-bg);
@include var(color, --jf-palette-SnackbarContent-color, $snackbarContent-color);
background: var(--jf-palette-SnackbarContent-bg, $snackbarContent-bg);
color: var(--jf-palette-SnackbarContent-color, $snackbarContent-color);
}
.appfooter,
.playlistSectionButton {
@include var(background, --jf-palette-background-paper, $background-paper);
@include var(color, --jf-palette-text-secondary, $text-secondary);
background: var(--jf-palette-background-paper, $background-paper);
color: var(--jf-palette-text-secondary, $text-secondary);
}
.itemSelectionPanel {
@include var(border-color, --jf-palette-primary-main, $primary-main);
border-color: var(--jf-palette-primary-main, $primary-main);
border-width: 1px;
border-style: solid;
}
.selectionCommandsPanel {
@include var(background, --jf-palette-primary-main, $primary-main);
@include var(color, --jf-palette-primary-contrastText, $primary-contrastText);
background: var(--jf-palette-primary-main, $primary-main);
color: var(--jf-palette-primary-contrastText, $primary-contrastText);
}
.upNextDialog-countdownText {
@include var(color, --jf-palette-primary-main, $primary-main);
color: var(--jf-palette-primary-main, $primary-main);
}
.alphaPickerButton {
@include var(color, --jf-palette-text-secondary, $text-secondary);
color: var(--jf-palette-text-secondary, $text-secondary);
background-color: transparent;
&-selected {
@include var(color, --jf-palette-text-primary, $text-primary);
color: var(--jf-palette-text-primary, $text-primary);
}
&-tv:focus {
@include var(background-color, --jf-palette-primary-main, $primary-main);
@include var(color, --jf-palette-primary-contrastText, $primary-contrastText);
background-color: var(--jf-palette-primary-main, $primary-main);
color: var(--jf-palette-primary-contrastText, $primary-contrastText);
}
}
.noBackdropTransparency .detailPagePrimaryContainer,
.noBackdropTransparency .detailPageSecondaryContainer {
@include var(background-color, --jf-palette-background-default, $background-default);
background-color: var(--jf-palette-background-default, $background-default);
}
.listItem-border {
@include var(border-color, --jf-palette-divider, $divider);
border-color: var(--jf-palette-divider, $divider);
}
.listItem:focus {
@include var(background-color, --jf-palette-action-focus, $action-focus);
background-color: var(--jf-palette-action-focus, $action-focus);
}
.listItem:hover {
@include var(background-color, --jf-palette-action-hover, $action-hover);
background-color: var(--jf-palette-action-hover, $action-hover);
}
.progressring-spiner {
@include var(border-color, --jf-palette-primary-main, $primary-main);
border-color: var(--jf-palette-primary-main, $primary-main);
}
.button-flat:hover {
@include var(color, --jf-palette-primary-main, $primary-main);
color: var(--jf-palette-primary-main, $primary-main);
}
.button-link {
@include var(color, --jf-palette-primary-main, $primary-main);
color: var(--jf-palette-primary-main, $primary-main);
}
.mediaInfoText {
@@ -268,23 +267,23 @@ a[data-role=button],
.emby-input,
.emby-textarea {
@include var(background, --jf-palette-FilledInput-bg, $filledInput-bg);
@include var(border-color, --jf-palette-FilledInput-bg, $filledInput-bg);
background: var(--jf-palette-FilledInput-bg, $filledInput-bg);
border-color: var(--jf-palette-FilledInput-bg, $filledInput-bg);
color: inherit;
border-width: 0.16em;
border-style: solid;
border-radius: 0.2em;
&:focus {
@include var(border-color, --jf-palette-primary-main, $primary-main);
border-color: var(--jf-palette-primary-main, $primary-main);
}
}
.emby-select-withcolor {
// NOTE: This should use `FilledInput-bg` to match other form elements,
// but that will break the native dropdown styling
@include var(background, --jf-palette-background-paper, $background-paper);
@include var(border-color, --jf-palette-FilledInput-bg, $filledInput-bg);
background: var(--jf-palette-background-paper, $background-paper);
border-color: var(--jf-palette-FilledInput-bg, $filledInput-bg);
color: inherit;
border-width: 0.16em;
border-style: solid;
@@ -292,78 +291,78 @@ a[data-role=button],
}
.emby-select-withcolor > option {
@include var(background, --jf-palette-background-paper, $background-paper);
background: var(--jf-palette-background-paper, $background-paper);
color: inherit;
}
.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 {
@include var(background-color, --jf-palette-primary-main, $primary-main, true);
@include var(color, --jf-palette-primary-contrastText, $primary-contrastText, true);
background-color: var(--jf-palette-primary-main, $primary-main) !important;
color: var(--jf-palette-primary-contrastText, $primary-contrastText) !important;
}
.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 {
@include var(border-color, --jf-palette-common-white, $common-white);
border-color: var(--jf-palette-common-white, $common-white);
}
.emby-checkbox:checked + span + .checkboxOutline,
.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 {
@include var(border-color, --jf-palette-primary-main, $primary-main);
border-color: var(--jf-palette-primary-main, $primary-main);
}
.itemProgressBarForeground-recording {
@include var(background-color, --jf-palette-error-light, $error-light);
background-color: var(--jf-palette-error-light, $error-light);
}
.countIndicator,
.fullSyncIndicator,
.mediaSourceIndicator,
.playedIndicator {
@include var(background, --jf-palette-primary-main, $primary-main);
@include var(color, --jf-palette-primary-contrastText, $primary-contrastText);
background: var(--jf-palette-primary-main, $primary-main);
color: var(--jf-palette-primary-contrastText, $primary-contrastText);
}
.mainDrawer,
.drawer-open {
@include var(background-color, --jf-palette-background-default, $background-default);
background-color: var(--jf-palette-background-default, $background-default);
}
.navMenuOption:hover {
@include var(background, --jf-palette-action-hover, $action-hover);
background: var(--jf-palette-action-hover, $action-hover);
}
.navMenuOption-selected {
@include var(background, --jf-palette-primary-main, $primary-main, true);
@include var(color, --jf-palette-primary-contrastText, $primary-contrastText);
background: var(--jf-palette-primary-main, $primary-main) !important;
color: var(--jf-palette-primary-contrastText, $primary-contrastText);
}
.emby-button.show-focus:focus {
@include var(background, --jf-palette-primary-main, $primary-main);
@include var(color, --jf-palette-primary-contrastText, $primary-contrastText);
background: var(--jf-palette-primary-main, $primary-main);
color: var(--jf-palette-primary-contrastText, $primary-contrastText);
}
.emby-tab-button {
@include var(color, --jf-palette-text-secondary, $text-secondary);
color: var(--jf-palette-text-secondary, $text-secondary);
}
.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:hover {
@include var(color, --jf-palette-primary-main, $primary-main);
color: var(--jf-palette-primary-main, $primary-main);
}
.channelPrograms,
@@ -394,8 +393,8 @@ a[data-role=button],
.guide-channelHeaderCell:focus,
.programCell:focus {
@include var(background-color, --jf-palette-primary-main, $primary-main, true);
@include var(color, --jf-palette-primary-contrastText, $primary-contrastText, true);
background-color: var(--jf-palette-primary-main, $primary-main) !important;
color: var(--jf-palette-primary-contrastText, $primary-contrastText) !important;
}
.guide-programTextIcon {
@@ -409,33 +408,33 @@ a[data-role=button],
.guide-date-tab-button.emby-tab-button-active,
.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 {
@include var(background-color, --jf-palette-primary-main, $primary-main);
@include var(color, --jf-palette-primary-contrastText, $primary-contrastText);
background-color: var(--jf-palette-primary-main, $primary-main);
color: var(--jf-palette-primary-contrastText, $primary-contrastText);
}
.infoBanner {
@include var(background, --jf-palette-Alert-infoFilledBg, $alert-infoFilledBg);
@include var(color, --jf-palette-Alert-infoFilledColor, $alert-infoFilledColor);
background: var(--jf-palette-Alert-infoFilledBg, $alert-infoFilledBg);
color: var(--jf-palette-Alert-infoFilledColor, $alert-infoFilledColor);
padding: 1em;
border-radius: 0.25em;
}
.ratingbutton-icon-withrating,
.playstatebutton-icon-played {
@include var(color, --jf-palette-error-light, $error-light);
color: var(--jf-palette-error-light, $error-light);
}
.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: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 {
@@ -463,36 +462,36 @@ a[data-role=button],
}
.metadataSidebarIcon {
@include var(color, --jf-palette-primary-main, $primary-main);
color: var(--jf-palette-primary-main, $primary-main);
}
#comicsPlayer,
#bookPlayer,
#pdfPlayer {
@include var(background-color, --jf-palette-background-default, $background-default);
background-color: var(--jf-palette-background-default, $background-default);
}
#comicsPlayer .swiper-pagination {
@include var(background-color, --jf-palette-background-default, $background-default);
@include var(color, --jf-palette-text-primary, $text-primary);
background-color: var(--jf-palette-background-default, $background-default);
color: var(--jf-palette-text-primary, $text-primary);
}
#bookPlayer .topButtons,
#comicsPlayer .actionButtonIcon,
#pdfPlayer .actionButtonIcon {
@include var(color, --jf-palette-text-primary, $text-primary);
color: var(--jf-palette-text-primary, $text-primary);
}
#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 .bookplayerButtonIcon {
@include var(color, --jf-palette-text-secondary, $text-secondary);
color: var(--jf-palette-text-secondary, $text-secondary);
&:active,
&: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 */
.detailRibbon {
background: rgba(32, 32, 32, 0.8);
background: rgba(var(--jf-palette-background-paperChannel) / 0.8);
background: rgba(var(--jf-palette-background-paperChannel, 32 32 32) / 0.8);
.layout-tv & {
background: none;
src/themes/light/theme.scss
+2 -3
View File
@@ -1,4 +1,3 @@
@use '../../styles/mixins' as *;
@use '../_base/palette' as palette;
/* Import the base theme with overrides */
@@ -26,8 +25,8 @@
// Override the alpha picker selected colors
.alphaPickerButton-selected {
@include var(background-color, --jf-palette-primary-main, palette.$primary-main);
@include var(color, --jf-palette-primary-contrastText, palette.$primary-contrastText);
background-color: var(--jf-palette-primary-main, palette.$primary-main);
color: var(--jf-palette-primary-contrastText, palette.$primary-contrastText);
}
/* Card background color variants */