From 48ae00c90f2b52d11c609f5ae609686eb6ddb7f6 Mon Sep 17 00:00:00 2001 From: Ben Hollis Date: Thu, 29 Aug 2024 23:15:56 -0700 Subject: [PATCH] Fix Sass mixed-declaration warning using stylelint-order --- .stylelintrc | 23 ++++++++- package.json | 1 + pnpm-lock.yaml | 21 ++++++++ src/app/App.m.scss | 19 +++---- src/app/accounts/SelectAccount.m.scss | 10 ++-- src/app/armory/Armory.m.scss | 4 +- src/app/armory/Links.m.scss | 16 +++--- src/app/character-tile/CharacterTile.m.scss | 18 +++---- src/app/character-tile/StoreHeading.m.scss | 8 +-- src/app/compare/Compare.m.scss | 6 +-- .../loadout-builder/loadout-builder.scss | 10 ++-- .../LoadoutDrawerOptions.m.scss | 10 ++-- .../loadout-drawer/loadout-drawer.scss | 4 +- src/app/dim-ui/CharacterSelect.m.scss | 6 +-- src/app/dim-ui/CheckButton.m.scss | 12 ++--- src/app/dim-ui/ClosableContainer.m.scss | 7 ++- src/app/dim-ui/CollapsibleTitle.m.scss | 8 +-- src/app/dim-ui/ConfirmButton.m.scss | 8 +-- src/app/dim-ui/FilterPills.m.scss | 8 +-- src/app/dim-ui/PageWithMenu.m.scss | 36 ++++++------- src/app/dim-ui/SetFilterButton.m.scss | 2 +- src/app/dim-ui/Sheet.m.scss | 11 ++-- src/app/dim-ui/StaticPage.m.scss | 8 +-- src/app/dim-ui/TileGrid.m.scss | 5 +- .../destiny-symbols/SymbolsPicker.m.scss | 8 +-- src/app/dim-ui/dim-button.scss | 16 +++--- .../dim-ui/text-complete/text-complete.m.scss | 26 +++++----- src/app/farming/farming.scss | 30 +++++------ src/app/gear-power/GearPower.m.scss | 2 +- src/app/infuse/InfusionFinder.m.scss | 7 ++- src/app/inventory-page/CategoryStrip.m.scss | 2 +- src/app/inventory-page/HeaderShadowDiv.m.scss | 3 +- src/app/inventory-page/Stores.scss | 25 +++++----- src/app/inventory/MoveNotifications.m.scss | 2 +- src/app/item-actions/ActionButton.m.scss | 10 ++-- src/app/item-actions/ItemMoveLocations.m.scss | 22 ++++---- src/app/item-feed/ItemFeed.m.scss | 3 +- src/app/item-feed/ItemFeedSidebar.m.scss | 4 +- src/app/item-popup/ArchetypeSocket.m.scss | 3 +- src/app/item-popup/DesktopItemActions.m.scss | 12 ++--- src/app/item-popup/ItemPerksList.m.scss | 5 +- src/app/item-popup/ItemPopupHeader.m.scss | 5 +- src/app/item-popup/ItemPopupTabs.m.scss | 6 +-- src/app/item-popup/ItemSocketsWeapons.m.scss | 2 +- src/app/item-popup/ItemStat.m.scss | 4 +- src/app/item-popup/Plug.m.scss | 2 +- src/app/item-popup/PlugTooltip.m.scss | 3 +- .../SocketDetailsSelectedPlug.m.scss | 18 +++---- src/app/loadout-builder/LoadoutBuilder.m.scss | 26 +++++----- .../filter/StatConstraintEditor.m.scss | 20 ++++---- .../generated-sets/GeneratedSet.m.scss | 8 +-- .../generated-sets/SetStats.m.scss | 8 +-- .../loadout-drawer/LoadoutDrawerFooter.m.scss | 2 +- .../loadout-drawer/LoadoutDrawerHeader.m.scss | 8 +-- src/app/loadout/LoadoutView.m.scss | 12 ++--- .../loadout/ingame/EditInGameLoadout.m.scss | 10 ++-- .../loadout-edit/LoadoutEditBucket.m.scss | 2 +- .../loadout-edit/LoadoutEditSection.m.scss | 2 +- .../loadout-edit/LoadoutEditSubclass.m.scss | 4 +- .../loadout/loadout-menu/LoadoutPopup.m.scss | 50 +++++++++---------- .../LoadoutItemCategorySection.m.scss | 2 +- src/app/loadout/loadout-ui/LoadoutMods.m.scss | 10 ++-- .../ModAssignmentDrawer.m.scss | 2 +- src/app/loadout/plug-drawer/Footer.m.scss | 2 +- .../loadout/plug-drawer/PlugSection.m.scss | 2 +- src/app/login/Login.m.scss | 3 +- src/app/main.scss | 2 +- src/app/notifications/Notification.m.scss | 2 +- .../NotificationsContainer.m.scss | 4 +- src/app/organizer/ItemTable.m.scss | 8 +-- src/app/organizer/ItemTypeSelector.m.scss | 6 +-- src/app/progress/BountyGuide.m.scss | 6 +-- src/app/progress/Pathfinder.m.scss | 48 +++++++++--------- src/app/progress/milestone.scss | 10 ++-- src/app/records/Record.m.scss | 8 +-- src/app/search/FilterHelp.m.scss | 4 +- src/app/search/SearchBar.m.scss | 24 ++++----- src/app/search/search-filter.scss | 8 +-- src/app/shell/AppInstallBanner.m.scss | 6 +-- src/app/shell/Header.m.scss | 33 ++++++------ src/app/shell/HeaderWarningBanner.m.scss | 8 +-- src/app/shell/RefreshButton.m.scss | 4 +- .../StreamDeckButton/StreamDeckButton.m.scss | 8 +-- src/app/strip-sockets/StripSockets.m.scss | 15 +++--- src/app/themes/_theme-europa.scss | 10 ++-- src/app/themes/_theme-neomuna.scss | 14 +++--- src/app/themes/_theme-pyramid.scss | 10 ++-- src/app/themes/_theme-vexnet.scss | 10 ++-- 88 files changed, 474 insertions(+), 428 deletions(-) diff --git a/.stylelintrc b/.stylelintrc index 3dc469ccce..5e8edaf4de 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -1,4 +1,5 @@ { + "plugins": ["stylelint-order"], "extends": ["stylelint-config-standard-scss", "stylelint-config-css-modules"], "rules": { "alpha-value-notation": "number", @@ -47,6 +48,26 @@ "^dim-([a-z][a-z0-9]*)(-[a-z0-9]+)*$", { "message": "Expected function name to be kebab-case and prefixed with 'dim-'" } ], - "scss/load-partial-extension": null + "scss/load-partial-extension": null, + "order/order": [ + "custom-properties", + "dollar-variables", + "declarations", + { + "type": "at-rule", + "name": "include", + "hasBlock": false + }, + { + "type": "at-rule", + "name": "include", + "hasBlock": true + }, + { + "type": "at-rule" + }, + "rules" + ], + "declaration-block-no-shorthand-property-overrides": true } } diff --git a/package.json b/package.json index 6e3b0bdec2..1737bc9960 100644 --- a/package.json +++ b/package.json @@ -179,6 +179,7 @@ "stylelint": "^16.8.2", "stylelint-config-css-modules": "^4.4.0", "stylelint-config-standard-scss": "^13.1.0", + "stylelint-order": "^6.0.4", "svgo": "^3.3.2", "svgo-loader": "^4.0.0", "terser-webpack-plugin": "^5.3.10", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8b113dd521..fb38a5c662 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -466,6 +466,9 @@ devDependencies: stylelint-config-standard-scss: specifier: ^13.1.0 version: 13.1.0(postcss@8.4.41)(stylelint@16.8.2) + stylelint-order: + specifier: ^6.0.4 + version: 6.0.4(stylelint@16.8.2) svgo: specifier: ^3.3.2 version: 3.3.2 @@ -10401,6 +10404,14 @@ packages: sort-css-media-queries: 2.2.0 dev: true + /postcss-sorting@8.0.2(postcss@8.4.41): + resolution: {integrity: sha512-M9dkSrmU00t/jK7rF6BZSZauA5MAaBW4i5EnJXspMwt4iqTh/L9j6fgMnbElEOfyRyfLfVbIHj/R52zHzAPe1Q==} + peerDependencies: + postcss: ^8.4.20 + dependencies: + postcss: 8.4.41 + dev: true + /postcss-svgo@7.0.1(postcss@8.4.41): resolution: {integrity: sha512-0WBUlSL4lhD9rA5k1e5D8EN5wCEyZD6HJk0jIvRxl+FDVOMlJ7DePHYWGGVc5QRqrJ3/06FTXM0bxjmJpmTPSA==} engines: {node: ^18.12.0 || ^20.9.0 || >= 18} @@ -11853,6 +11864,16 @@ packages: stylelint-config-recommended: 14.0.1(stylelint@16.8.2) dev: true + /stylelint-order@6.0.4(stylelint@16.8.2): + resolution: {integrity: sha512-0UuKo4+s1hgQ/uAxlYU4h0o0HS4NiQDud0NAUNI0aa8FJdmYHA5ZZTFHiV5FpmE3071e9pZx5j0QpVJW5zOCUA==} + peerDependencies: + stylelint: ^14.0.0 || ^15.0.0 || ^16.0.1 || ^16.0.2 + dependencies: + postcss: 8.4.41 + postcss-sorting: 8.0.2(postcss@8.4.41) + stylelint: 16.8.2(typescript@5.5.4) + dev: true + /stylelint-scss@6.5.1(stylelint@16.8.2): resolution: {integrity: sha512-ZLqdqihm6uDYkrsOeD6YWb+stZI8Wn92kUNDhE4M+g9g1aCnRv0JlOrttFiAJJwaNzpdQgX3YJb5vDQXVuO9Ww==} engines: {node: '>=18.12.0'} diff --git a/src/app/App.m.scss b/src/app/App.m.scss index 8b9b1e6003..a0e3a81693 100644 --- a/src/app/App.m.scss +++ b/src/app/App.m.scss @@ -4,8 +4,16 @@ padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); + @include phone-portrait { + --inventory-column-padding: 12px; + } + + @media (min-width: 1440px) { + --inventory-column-padding: 24px; + --column-padding: calc(2 * var(--inventory-column-padding) - var(--item-margin)); + } + &::before { - @include below-header; background: var(--theme-app-bg); background-position: center top; background-repeat: no-repeat; @@ -16,14 +24,7 @@ position: fixed; will-change: transform; z-index: -1; - } - @media (min-width: 1440px) { - --inventory-column-padding: 24px; - --column-padding: calc(2 * var(--inventory-column-padding) - var(--item-margin)); - } - - @include phone-portrait { - --inventory-column-padding: 12px; + @include below-header; } } diff --git a/src/app/accounts/SelectAccount.m.scss b/src/app/accounts/SelectAccount.m.scss index 6ed8377964..82e144aec7 100644 --- a/src/app/accounts/SelectAccount.m.scss +++ b/src/app/accounts/SelectAccount.m.scss @@ -20,16 +20,16 @@ border: 1px solid white; text-decoration: none; - &:focus, - &:active { - outline: none; - } - @include interactive($hover: true, $focus: true) { border-color: var(--theme-accent-primary); color: var(--theme-accent-primary); background-color: rgba(255, 255, 255, 0.1); } + + &:focus, + &:active { + outline: none; + } } .accountDetails { diff --git a/src/app/armory/Armory.m.scss b/src/app/armory/Armory.m.scss index 7184c2a303..4b394396f5 100644 --- a/src/app/armory/Armory.m.scss +++ b/src/app/armory/Armory.m.scss @@ -66,9 +66,9 @@ h1 { grid-area: title; + margin: 0 0 4px 0; @include destiny-header; - margin: 0 0 4px 0; } :global(.item) { @@ -94,10 +94,10 @@ flex-wrap: wrap; align-items: center; margin-bottom: 4px; + gap: 4px; > * { margin: 0; } - gap: 4px; } .element { diff --git a/src/app/armory/Links.m.scss b/src/app/armory/Links.m.scss index 137f469eff..cbbd65cf13 100644 --- a/src/app/armory/Links.m.scss +++ b/src/app/armory/Links.m.scss @@ -9,12 +9,8 @@ list-style: none; gap: 4px; - li { - white-space: nowrap; - img { - vertical-align: text-bottom; - margin-right: 0.2em; - } + @include phone-portrait { + margin-right: 38px; } @media (max-width: 675px) { @@ -27,7 +23,11 @@ } } - @include phone-portrait { - margin-right: 38px; + li { + white-space: nowrap; + img { + vertical-align: text-bottom; + margin-right: 0.2em; + } } } diff --git a/src/app/character-tile/CharacterTile.m.scss b/src/app/character-tile/CharacterTile.m.scss index 017962761b..263e5f1e6b 100644 --- a/src/app/character-tile/CharacterTile.m.scss +++ b/src/app/character-tile/CharacterTile.m.scss @@ -28,16 +28,16 @@ gap: 0 6px; padding: 0 6px; + // Use the emblem as a background + background-size: $emblem-width $emblem-height; + background-position: left center; + background-repeat: no-repeat; + @include phone-portrait { grid-template-areas: 'emblem class power' 'emblem bottom maxTotalPower'; } - - // Use the emblem as a background - background-size: $emblem-width $emblem-height; - background-position: left center; - background-repeat: no-repeat; } .vaultTile { @@ -50,10 +50,6 @@ box-sizing: border-box; gap: 0 6px; padding: 0 6px; - - @include phone-portrait { - grid-template-areas: 'emblem class vaultCapacity' !important; - } // The vault needs a little border to stand out against some backgrounds border: 1px solid rgba(0, 0, 0, 0.3); border-right: none; @@ -62,6 +58,10 @@ background-color: rgb(49, 50, 51); background-image: url('images/vault-background.svg'); + + @include phone-portrait { + grid-template-areas: 'emblem class vaultCapacity' !important; + } } // The "current character" triangle diff --git a/src/app/character-tile/StoreHeading.m.scss b/src/app/character-tile/StoreHeading.m.scss index 360fe670dc..613588f253 100644 --- a/src/app/character-tile/StoreHeading.m.scss +++ b/src/app/character-tile/StoreHeading.m.scss @@ -22,10 +22,6 @@ background-color: var(--theme-dropdown-menu-bg); will-change: transform; - [role='button'] { - outline: none; - } - // The phone layout version @include phone-portrait { position: fixed; @@ -35,6 +31,10 @@ var(--viewport-height) - 54px - var(--header-height) - env(safe-area-inset-bottom) ); } + + [role='button'] { + outline: none; + } } .characterHeader { diff --git a/src/app/compare/Compare.m.scss b/src/app/compare/Compare.m.scss index a812950b81..7fa86d477a 100644 --- a/src/app/compare/Compare.m.scss +++ b/src/app/compare/Compare.m.scss @@ -66,15 +66,15 @@ font-size: 12px; // button's children's spacing margin gap: 4px; - img { - margin: 0; - } @include interactive($hover: true) { img { filter: drop-shadow(0 0 1px black); } } + img { + margin: 0; + } } } diff --git a/src/app/destiny1/loadout-builder/loadout-builder.scss b/src/app/destiny1/loadout-builder/loadout-builder.scss index b08b2b13e2..5a598fd5eb 100644 --- a/src/app/destiny1/loadout-builder/loadout-builder.scss +++ b/src/app/destiny1/loadout-builder/loadout-builder.scss @@ -172,16 +172,16 @@ $and-color: #814bcf; font-size: 12px; } .currency { - img { - vertical-align: text-bottom; - height: 16px; - width: 16px; - } position: absolute; top: 4px; right: 40px; font-weight: 200; font-size: 14px; + img { + vertical-align: text-bottom; + height: 16px; + width: 16px; + } } .legendaryMarks { position: absolute; diff --git a/src/app/destiny1/loadout-drawer/LoadoutDrawerOptions.m.scss b/src/app/destiny1/loadout-drawer/LoadoutDrawerOptions.m.scss index 0fb2a0b2d5..e7600261d0 100644 --- a/src/app/destiny1/loadout-drawer/LoadoutDrawerOptions.m.scss +++ b/src/app/destiny1/loadout-drawer/LoadoutDrawerOptions.m.scss @@ -1,13 +1,13 @@ @use '../../variables.scss' as *; .loadoutOptions { + display: flex; + flex-flow: row wrap; + @include phone-portrait { font-size: 14px; } - display: flex; - flex-flow: row wrap; - input { vertical-align: middle; } @@ -19,11 +19,11 @@ align-items: center; margin-right: 4px; margin-bottom: 4px; + + gap: 4px; &:last-child { margin-bottom: 0; } - - gap: 4px; } .loadoutName { diff --git a/src/app/destiny1/loadout-drawer/loadout-drawer.scss b/src/app/destiny1/loadout-drawer/loadout-drawer.scss index ee8f2f6c8e..3b6d42f268 100644 --- a/src/app/destiny1/loadout-drawer/loadout-drawer.scss +++ b/src/app/destiny1/loadout-drawer/loadout-drawer.scss @@ -57,12 +57,12 @@ display: flex; box-sizing: border-box; margin-right: 16px; + flex-direction: column; + flex: 0; @include phone-portrait { margin-right: 0; } - flex-direction: column; - flex: 0; .loadout-bucket-name { text-transform: uppercase; diff --git a/src/app/dim-ui/CharacterSelect.m.scss b/src/app/dim-ui/CharacterSelect.m.scss index 92015e34a7..e661a4f8f4 100644 --- a/src/app/dim-ui/CharacterSelect.m.scss +++ b/src/app/dim-ui/CharacterSelect.m.scss @@ -25,13 +25,13 @@ .frame { max-width: 250px; + margin: 8px auto; + overflow: visible !important; + position: relative; @include phone-portrait { max-width: 260px; } - margin: 8px auto; - overflow: visible !important; - position: relative; } .track { diff --git a/src/app/dim-ui/CheckButton.m.scss b/src/app/dim-ui/CheckButton.m.scss index 9d4c5cdcda..87e52175d8 100644 --- a/src/app/dim-ui/CheckButton.m.scss +++ b/src/app/dim-ui/CheckButton.m.scss @@ -13,6 +13,12 @@ padding: 6px 10px 6px 16px; } + // Don't do hover + @include interactive($hover: true, $active: true) { + background-color: rgba(255, 255, 255, 0.2) !important; + color: var(--theme-text) !important; + } + > *:nth-last-child(n + 2) { margin-right: auto; } @@ -20,10 +26,4 @@ margin-left: 6px; flex-shrink: 0; } - - // Don't do hover - @include interactive($hover: true, $active: true) { - background-color: rgba(255, 255, 255, 0.2) !important; - color: var(--theme-text) !important; - } } diff --git a/src/app/dim-ui/ClosableContainer.m.scss b/src/app/dim-ui/ClosableContainer.m.scss index d353c3c9b3..82320485a7 100644 --- a/src/app/dim-ui/ClosableContainer.m.scss +++ b/src/app/dim-ui/ClosableContainer.m.scss @@ -23,13 +23,12 @@ } .showCloseOnHover { - .close { - display: none; - } - @include interactive($hover: true) { .close { display: inline-block; } } + .close { + display: none; + } } diff --git a/src/app/dim-ui/CollapsibleTitle.m.scss b/src/app/dim-ui/CollapsibleTitle.m.scss index 168313941f..6636fd492a 100644 --- a/src/app/dim-ui/CollapsibleTitle.m.scss +++ b/src/app/dim-ui/CollapsibleTitle.m.scss @@ -12,6 +12,10 @@ padding-right: 16px; gap: 8px; + @include interactive($hover: true, $focusWithin: true) { + background-color: rgba(0, 0, 0, 0.4); + } + // The interactive button within > button { // Reset button @@ -55,10 +59,6 @@ } } - @include interactive($hover: true, $focusWithin: true) { - background-color: rgba(0, 0, 0, 0.4); - } - &.disabled { color: #888; > button { diff --git a/src/app/dim-ui/ConfirmButton.m.scss b/src/app/dim-ui/ConfirmButton.m.scss index cf0e3122ba..387a299b05 100644 --- a/src/app/dim-ui/ConfirmButton.m.scss +++ b/src/app/dim-ui/ConfirmButton.m.scss @@ -22,15 +22,15 @@ } &.confirmMode { - // as elements transition into confirm mode, snap confirm message into place quickly - & > div { - transition: height 0.1s; - } color: var(--theme-text) !important; @include interactive($hover: true) { background-color: #af7d27 !important; } + // as elements transition into confirm mode, snap confirm message into place quickly + & > div { + transition: height 0.1s; + } &[class~='danger'] { @include interactive($hover: true) { diff --git a/src/app/dim-ui/FilterPills.m.scss b/src/app/dim-ui/FilterPills.m.scss index c1649b5be3..a9749041ba 100644 --- a/src/app/dim-ui/FilterPills.m.scss +++ b/src/app/dim-ui/FilterPills.m.scss @@ -26,14 +26,14 @@ gap: 4px; user-select: none; - .darkBackground & { - background-color: rgb(255, 255, 255, 0.2); - } - @include interactive($hover: true) { border-color: rgba(255, 255, 255, 0.3); } + .darkBackground & { + background-color: rgb(255, 255, 255, 0.2); + } + :global(.app-icon) { font-size: 10px; } diff --git a/src/app/dim-ui/PageWithMenu.m.scss b/src/app/dim-ui/PageWithMenu.m.scss index 40acb68de7..80cbb2caff 100644 --- a/src/app/dim-ui/PageWithMenu.m.scss +++ b/src/app/dim-ui/PageWithMenu.m.scss @@ -28,13 +28,13 @@ margin-top: 12px; // 8px to match the menu, plus 4px to match the padding width: 100%; box-sizing: border-box; - h2:first-child { - margin-top: 0; - } @include phone-portrait { margin-top: 0; } + h2:first-child { + margin-top: 0; + } :global(.issue-banner-shown) & { padding-bottom: $issue-banner-height; @@ -58,21 +58,6 @@ overscroll-behavior: none; max-height: calc(var(--viewport-height) - var(--header-height) - 8px); - // This inner container div exists to keep the contents from changing widths, - // while the outer .menu container may change size as the scrollbars appear - // and disappear. - > div { - width: var(--page-with-menu-menu-width); - padding: 4px; // To allow for the outline of the character selector to show - } - - // Add in some width when a scrollbar is present! - // It'd be cooler if https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter existed. - &.menuScrollbars { - // Windows scrollbars are 17px, then padding p - width: calc(var(--page-with-menu-menu-width) + 17px + 8px); - } - @include phone-portrait { position: static; margin: 0; @@ -88,6 +73,21 @@ } } + // This inner container div exists to keep the contents from changing widths, + // while the outer .menu container may change size as the scrollbars appear + // and disappear. + > div { + width: var(--page-with-menu-menu-width); + padding: 4px; // To allow for the outline of the character selector to show + } + + // Add in some width when a scrollbar is present! + // It'd be cooler if https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter existed. + &.menuScrollbars { + // Windows scrollbars are 17px, then padding p + width: calc(var(--page-with-menu-menu-width) + 17px + 8px); + } + ul { margin: 0; padding: 0; diff --git a/src/app/dim-ui/SetFilterButton.m.scss b/src/app/dim-ui/SetFilterButton.m.scss index 9427ec25a5..0f609a680b 100644 --- a/src/app/dim-ui/SetFilterButton.m.scss +++ b/src/app/dim-ui/SetFilterButton.m.scss @@ -8,10 +8,10 @@ padding: 0 6px; border-radius: 4px; text-align: center; + text-decoration: none; @include interactive($hover: true) { background-color: #68a0b7; color: #222; } - text-decoration: none; } diff --git a/src/app/dim-ui/Sheet.m.scss b/src/app/dim-ui/Sheet.m.scss index 0eac4eeadc..5cb2d4ef1b 100644 --- a/src/app/dim-ui/Sheet.m.scss +++ b/src/app/dim-ui/Sheet.m.scss @@ -40,10 +40,11 @@ $control-color: rgba(255, 255, 255, 0.5); } :where(h1) { - @include destiny-header; font-size: 16px; margin: 0 0 8px 0; display: block; + + @include destiny-header; } } @@ -86,15 +87,15 @@ $control-color: rgba(255, 255, 255, 0.5); padding: 18px 12px 12px 12px; color: $control-color; cursor: pointer; + + @include interactive($hover: true, $active: true, $focus: true) { + color: var(--theme-accent-primary); + } > :global(.app-icon) { height: 24px; width: 24px; font-size: 24px; } - - @include interactive($hover: true, $active: true, $focus: true) { - color: var(--theme-accent-primary); - } } .sheetDisabled { diff --git a/src/app/dim-ui/StaticPage.m.scss b/src/app/dim-ui/StaticPage.m.scss index 424c3e4123..7af309094e 100644 --- a/src/app/dim-ui/StaticPage.m.scss +++ b/src/app/dim-ui/StaticPage.m.scss @@ -18,13 +18,13 @@ flex-direction: row; align-items: center; - img { - margin-right: 8px; - } - @media (max-width: 800px) { font-size: 20px; } + + img { + margin-right: 8px; + } } h2 { a { diff --git a/src/app/dim-ui/TileGrid.m.scss b/src/app/dim-ui/TileGrid.m.scss index 888f9a33d6..7ba7640452 100644 --- a/src/app/dim-ui/TileGrid.m.scss +++ b/src/app/dim-ui/TileGrid.m.scss @@ -19,6 +19,8 @@ } .tile { + // Don't scale up items even if users have item tiles set to large + --item-size: 50px; display: grid; grid-template-columns: min-content auto min-content; grid-template-rows: max-content auto; @@ -40,9 +42,6 @@ outline: none; } - // Don't scale up items even if users have item tiles set to large - --item-size: 50px; - &.compact { grid-template-areas: 'icon title' diff --git a/src/app/dim-ui/destiny-symbols/SymbolsPicker.m.scss b/src/app/dim-ui/destiny-symbols/SymbolsPicker.m.scss index 3a380e63df..a39944a72e 100644 --- a/src/app/dim-ui/destiny-symbols/SymbolsPicker.m.scss +++ b/src/app/dim-ui/destiny-symbols/SymbolsPicker.m.scss @@ -15,14 +15,14 @@ composes: resetButton from '../common.m.scss'; font-family: unset; margin: 0 2px; - span { - font-size: 18px; - } @include interactive($hover: true) { color: black; background-color: var(--theme-accent-primary); } + span { + font-size: 18px; + } } .wrapperDiv { @@ -100,10 +100,10 @@ flex-direction: column; > span { + font-size: 12px; &:first-child { font-size: 16px; } - font-size: 12px; } } } diff --git a/src/app/dim-ui/dim-button.scss b/src/app/dim-ui/dim-button.scss index 4fe8d90091..4048af1994 100644 --- a/src/app/dim-ui/dim-button.scss +++ b/src/app/dim-ui/dim-button.scss @@ -22,6 +22,14 @@ line-height: calc(18 / 14); padding: 8px 16px; } + + @include interactive($hover: true, $active: true) { + background-color: var(--theme-accent-primary) !important; + color: var(--theme-text-invert) !important; + img { + filter: invert(1) drop-shadow(0 0 1px black); + } + } img { height: 1.3em; width: auto; @@ -34,14 +42,6 @@ } } - @include interactive($hover: true, $active: true) { - background-color: var(--theme-accent-primary) !important; - color: var(--theme-text-invert) !important; - img { - filter: invert(1) drop-shadow(0 0 1px black); - } - } - &.selected { background-color: var(--theme-accent-primary) !important; color: var(--theme-text-invert) !important; diff --git a/src/app/dim-ui/text-complete/text-complete.m.scss b/src/app/dim-ui/text-complete/text-complete.m.scss index ca19fbc259..9179b3cfa0 100644 --- a/src/app/dim-ui/text-complete/text-complete.m.scss +++ b/src/app/dim-ui/text-complete/text-complete.m.scss @@ -9,19 +9,28 @@ padding: 0; margin: 0; + @include phone-portrait { + a { + font-size: 16px; + } + li { + padding: 8px 10px; + } + } + :global(.textcomplete-header), :global(.textcomplete-footer) { display: none; } li { padding: 4px 8px; - &:nth-child(2) { - border-top: none; - } @include interactive($hover: true) { background-color: #e8a534; } + &:nth-child(2) { + border-top: none; + } } :global(.active) { background-color: #e8a534; @@ -29,19 +38,10 @@ a { color: black; font-size: 12px; + text-decoration-line: none; @include interactive($hover: true) { cursor: pointer; } - text-decoration-line: none; - } - - @include phone-portrait { - a { - font-size: 16px; - } - li { - padding: 8px 10px; - } } } diff --git a/src/app/farming/farming.scss b/src/app/farming/farming.scss index 5dbe08550c..81f612b03b 100644 --- a/src/app/farming/farming.scss +++ b/src/app/farming/farming.scss @@ -19,6 +19,21 @@ z-index: 6; padding-bottom: Max(0.5rem, env(safe-area-inset-bottom)); + @include phone-portrait { + width: auto; + right: 0; + bottom: 50px; + left: inherit; + transform: none; + + button { + margin: 0; + } + p { + display: none; + } + } + button { color: var(--theme-text); background-color: rgba(128, 128, 128, 0.4); @@ -55,19 +70,4 @@ transform: translateY(250px) translateX(-50%); transition: transform 200ms $easeInCubic; } - - @include phone-portrait { - width: auto; - right: 0; - bottom: 50px; - left: inherit; - transform: none; - - button { - margin: 0; - } - p { - display: none; - } - } } diff --git a/src/app/gear-power/GearPower.m.scss b/src/app/gear-power/GearPower.m.scss index bf22898d2d..eb7a729400 100644 --- a/src/app/gear-power/GearPower.m.scss +++ b/src/app/gear-power/GearPower.m.scss @@ -2,11 +2,11 @@ .gearPowerSheet { width: 100%; max-width: fit-content; + margin: 0 auto; @include phone-portrait { max-width: unset; } - margin: 0 auto; .gearPowerSheetContent { margin: 0 20px 20px; diff --git a/src/app/infuse/InfusionFinder.m.scss b/src/app/infuse/InfusionFinder.m.scss index 3d76b3ad51..4fcd89f5b5 100644 --- a/src/app/infuse/InfusionFinder.m.scss +++ b/src/app/infuse/InfusionFinder.m.scss @@ -9,13 +9,12 @@ } .infuseHeader { - :global(.item) { - margin-bottom: 0; - } - @include phone-portrait { flex-direction: column; } + :global(.item) { + margin-bottom: 0; + } } .infuseActions { diff --git a/src/app/inventory-page/CategoryStrip.m.scss b/src/app/inventory-page/CategoryStrip.m.scss index 72002d52e0..6a150f25ce 100644 --- a/src/app/inventory-page/CategoryStrip.m.scss +++ b/src/app/inventory-page/CategoryStrip.m.scss @@ -1,6 +1,7 @@ @use '../variables' as *; .options { + $vpadding: 15px; display: flex; background-color: var(--theme-mobile-background); position: fixed; @@ -9,7 +10,6 @@ top: inherit; left: 0; right: 0; - $vpadding: 15px; justify-content: space-around; // https://css-tricks.com/when-sass-and-new-css-features-collide/ padding-bottom: Max(#{($vpadding - 1)}, env(safe-area-inset-bottom)); diff --git a/src/app/inventory-page/HeaderShadowDiv.m.scss b/src/app/inventory-page/HeaderShadowDiv.m.scss index 62c7a37527..2dc3e73209 100644 --- a/src/app/inventory-page/HeaderShadowDiv.m.scss +++ b/src/app/inventory-page/HeaderShadowDiv.m.scss @@ -11,7 +11,6 @@ } .cover { - @include below-header; height: calc(var(--store-header-height) + 7px); width: 100%; position: absolute; @@ -21,4 +20,6 @@ background-position: center top; background-repeat: no-repeat; background-size: 100% 100vh; + + @include below-header; } diff --git a/src/app/inventory-page/Stores.scss b/src/app/inventory-page/Stores.scss index 0456c76616..e6ac9bf9cb 100644 --- a/src/app/inventory-page/Stores.scss +++ b/src/app/inventory-page/Stores.scss @@ -33,6 +33,12 @@ box-sizing: border-box; padding-right: calc(var(--sidebar-size) * var(--expanded-sidebars)); + @include phone-portrait { + // Full-width, single column + display: block; + padding-right: 0; + } + // Split evenly between character and vault .singleCharacter &.account-wide { grid-template-columns: 1fr 1fr; @@ -40,12 +46,6 @@ grid-column: auto; } } - - @include phone-portrait { - // Full-width, single column - display: block; - padding-right: 0; - } } .equipped-item { @@ -131,7 +131,6 @@ // render a diamond-shaped pseudo-element to act as the border &::before { - @include draggable-hover-border; content: ''; position: absolute; width: var(--item-size); @@ -139,6 +138,8 @@ transform: rotate(45deg) scale(0.7); outline-width: 2px; box-sizing: border-box; + + @include draggable-hover-border; } } } @@ -148,8 +149,6 @@ .store-header { position: fixed; backface-visibility: hidden; - - @include below-header; left: 0; width: 100%; z-index: 10; @@ -161,13 +160,15 @@ background-repeat: no-repeat; background-size: 100% 100vh; - &:focus { - outline: none; - } + @include below-header; @supports (position: sticky) { position: sticky; } + + &:focus { + outline: none; + } &.sticky { box-shadow: 0 1px 4px 0 black; } diff --git a/src/app/inventory/MoveNotifications.m.scss b/src/app/inventory/MoveNotifications.m.scss index bb57ff6dee..98f3e677f3 100644 --- a/src/app/inventory/MoveNotifications.m.scss +++ b/src/app/inventory/MoveNotifications.m.scss @@ -36,13 +36,13 @@ } .iconList { + --item-size: 32px; display: flex; flex-flow: row wrap; margin: 8px 0; &:last-child { margin-bottom: 0; } - --item-size: 32px; > * { margin: 0 4px 4px 0; diff --git a/src/app/item-actions/ActionButton.m.scss b/src/app/item-actions/ActionButton.m.scss index b21f2385c1..b74fe8081b 100644 --- a/src/app/item-actions/ActionButton.m.scss +++ b/src/app/item-actions/ActionButton.m.scss @@ -22,11 +22,6 @@ composes: resetButton from 'app/dim-ui/common.m.scss'; composes: entry; - &:disabled { - filter: contrast(0.5) brightness(0.5); - cursor: not-allowed; - } - @media (min-width: 541px) { @include interactive($hover: true, $focus: true) { outline: none; @@ -37,4 +32,9 @@ } } } + + &:disabled { + filter: contrast(0.5) brightness(0.5); + cursor: not-allowed; + } } diff --git a/src/app/item-actions/ItemMoveLocations.m.scss b/src/app/item-actions/ItemMoveLocations.m.scss index f49af6ed67..20f81f74ad 100644 --- a/src/app/item-actions/ItemMoveLocations.m.scss +++ b/src/app/item-actions/ItemMoveLocations.m.scss @@ -42,6 +42,17 @@ max-height: 55px; } + @include interactive($hover: true, $focus: true) { + outline: none; + &::after { + content: ''; + display: block; + position: absolute; + inset: -2px -2px -2px -2px; + border: 1px solid white; + } + } + img { position: absolute; top: 0; @@ -67,17 +78,6 @@ } } - @include interactive($hover: true, $focus: true) { - outline: none; - &::after { - content: ''; - display: block; - position: absolute; - inset: -2px -2px -2px -2px; - border: 1px solid white; - } - } - &:disabled { filter: contrast(0.5) brightness(0.5); cursor: not-allowed; diff --git a/src/app/item-feed/ItemFeed.m.scss b/src/app/item-feed/ItemFeed.m.scss index f17b0e0dd0..b78ffcc761 100644 --- a/src/app/item-feed/ItemFeed.m.scss +++ b/src/app/item-feed/ItemFeed.m.scss @@ -21,9 +21,10 @@ } .title { - @include destiny-header; text-decoration: none; font-size: 14px; + + @include destiny-header; } .classIcon { diff --git a/src/app/item-feed/ItemFeedSidebar.m.scss b/src/app/item-feed/ItemFeedSidebar.m.scss index a936ca889c..7b0ab1f031 100644 --- a/src/app/item-feed/ItemFeedSidebar.m.scss +++ b/src/app/item-feed/ItemFeedSidebar.m.scss @@ -2,13 +2,13 @@ .trayContainer { position: fixed; - - @include below-header; right: 0; height: calc(var(--viewport-height) - var(--header-height)); z-index: 10; box-sizing: border-box; width: 0; + + @include below-header; } .expanded { diff --git a/src/app/item-popup/ArchetypeSocket.m.scss b/src/app/item-popup/ArchetypeSocket.m.scss index 88c0e000d2..25ec6aed5f 100644 --- a/src/app/item-popup/ArchetypeSocket.m.scss +++ b/src/app/item-popup/ArchetypeSocket.m.scss @@ -9,9 +9,8 @@ // Shrink down the intrinsic perk - it's super large :global(.plug) { - padding: 4px; - --item-size-mod: calc(24 / 50 * var(--item-size)); + padding: 4px; img { --item-size: var(--item-size-mod); diff --git a/src/app/item-popup/DesktopItemActions.m.scss b/src/app/item-popup/DesktopItemActions.m.scss index d01562bbda..292a4e0d91 100644 --- a/src/app/item-popup/DesktopItemActions.m.scss +++ b/src/app/item-popup/DesktopItemActions.m.scss @@ -17,6 +17,12 @@ justify-content: flex-end; cursor: pointer; + @include interactive($hover: true) { + :global(.app-icon) { + color: var(--theme-accent-primary); + } + } + :global(.app-icon) { margin: 7px 10px 0; display: block; @@ -24,12 +30,6 @@ font-size: 16px; } - @include interactive($hover: true) { - :global(.app-icon) { - color: var(--theme-accent-primary); - } - } - .collapsed & { padding: 5px 0 15px; justify-content: center; diff --git a/src/app/item-popup/ItemPerksList.m.scss b/src/app/item-popup/ItemPerksList.m.scss index fe53cff51d..7926ca465b 100644 --- a/src/app/item-popup/ItemPerksList.m.scss +++ b/src/app/item-popup/ItemPerksList.m.scss @@ -43,6 +43,8 @@ } .perkIconWrapper { + // Change the size of the perk icons + --item-size-adjusted: calc(30 / 50 * var(--item-size)); grid-area: icon; align-self: flex-start; position: relative; // to position the thumbs-up correctly @@ -50,9 +52,6 @@ display: block; padding: 1px; flex-shrink: 0; - - // Change the size of the perk icons - --item-size-adjusted: calc(30 / 50 * var(--item-size)); > * { --item-size: var(--item-size-adjusted); } diff --git a/src/app/item-popup/ItemPopupHeader.m.scss b/src/app/item-popup/ItemPopupHeader.m.scss index 5fe147492f..a5b7255379 100644 --- a/src/app/item-popup/ItemPopupHeader.m.scss +++ b/src/app/item-popup/ItemPopupHeader.m.scss @@ -17,21 +17,22 @@ .armory { @include interactive($hover: true, $focus: true) { outline: none; + cursor: pointer; h1 { text-decoration: underline; } - cursor: pointer; } } .title { - @include destiny-header; font-size: 21px !important; line-height: 24px; text-decoration: none; margin: 0 !important; padding: 0; + @include destiny-header; + // Prevent the title running into the sheet close button @include phone-portrait { margin: 0 32px 0 0 !important; diff --git a/src/app/item-popup/ItemPopupTabs.m.scss b/src/app/item-popup/ItemPopupTabs.m.scss index fd3767bcb6..79ff9c06d6 100644 --- a/src/app/item-popup/ItemPopupTabs.m.scss +++ b/src/app/item-popup/ItemPopupTabs.m.scss @@ -13,9 +13,6 @@ text-align: center; border-bottom: 2px solid #222; background-color: black; - &.selected { - border-bottom-color: var(--theme-accent-primary); - } @include interactive($hover: true) { color: var(--theme-text); @@ -25,4 +22,7 @@ @include phone-portrait { font-size: 16px; } + &.selected { + border-bottom-color: var(--theme-accent-primary); + } } diff --git a/src/app/item-popup/ItemSocketsWeapons.m.scss b/src/app/item-popup/ItemSocketsWeapons.m.scss index 728f617a50..aeef101de1 100644 --- a/src/app/item-popup/ItemSocketsWeapons.m.scss +++ b/src/app/item-popup/ItemSocketsWeapons.m.scss @@ -81,8 +81,8 @@ padding: calc(2 / 50 * var(--item-size)); @include phone-portrait { - padding: 2px; --item-size: 32px; + padding: 2px; } } } diff --git a/src/app/item-popup/ItemStat.m.scss b/src/app/item-popup/ItemStat.m.scss index 817d168ea6..16a8f7715c 100644 --- a/src/app/item-popup/ItemStat.m.scss +++ b/src/app/item-popup/ItemStat.m.scss @@ -6,12 +6,12 @@ text-align: right; margin-right: 8px; max-width: 130px; + text-overflow: ellipsis; + overflow-x: clip; @include phone-portrait { max-width: 40vw; } - text-overflow: ellipsis; - overflow-x: clip; } // The numeric value of the stat diff --git a/src/app/item-popup/Plug.m.scss b/src/app/item-popup/Plug.m.scss index 12bd96d62f..8cab3b896f 100644 --- a/src/app/item-popup/Plug.m.scss +++ b/src/app/item-popup/Plug.m.scss @@ -18,10 +18,10 @@ // A global class because some things still tweak the size of the plug image. // TODO: customize with CSS vars instead :global(.plug) { + --item-size-adjusted: calc(32 / 50 * var(--item-size)); position: relative; // to position the thumbs-up correctly display: flex; flex-direction: row; - --item-size-adjusted: calc(32 / 50 * var(--item-size)); @include phone-portrait { --item-size-adjusted: 32px; diff --git a/src/app/item-popup/PlugTooltip.m.scss b/src/app/item-popup/PlugTooltip.m.scss index 4304022d4e..c00a78b9f4 100644 --- a/src/app/item-popup/PlugTooltip.m.scss +++ b/src/app/item-popup/PlugTooltip.m.scss @@ -68,9 +68,10 @@ } } .automaticallyPickedSection { - @include tooltip-section-color($dim-brand); border-radius: 0 0 $theme-tooltip-corner-radius $theme-tooltip-corner-radius; + @include tooltip-section-color($dim-brand); + // Re-define colors using accent if browser supports color-mix @supports (background: color-mix(in srgb, black 50%, white)) { &:not(:empty) { diff --git a/src/app/item-popup/SocketDetailsSelectedPlug.m.scss b/src/app/item-popup/SocketDetailsSelectedPlug.m.scss index c0edd3add9..7ad2dd0440 100644 --- a/src/app/item-popup/SocketDetailsSelectedPlug.m.scss +++ b/src/app/item-popup/SocketDetailsSelectedPlug.m.scss @@ -9,14 +9,6 @@ 'mod desc button' 'mod clarityDesc button' 'mod source button'; - &.hasStats { - grid-template-columns: var(--item-size) 1fr 1fr; - grid-template-areas: - 'mod desc stat button' - 'mod modstat stat button' - 'mod clarityDesc stat button' - 'mod source stat button'; - } gap: 0 8px; @@ -27,6 +19,7 @@ 'mod clarityDesc' 'mod source' 'mod button'; + gap: 8px 8px; &.hasStats { grid-template-columns: var(--item-size) 1fr; grid-template-areas: @@ -37,7 +30,14 @@ 'mod source' 'mod button'; } - gap: 8px 8px; + } + &.hasStats { + grid-template-columns: var(--item-size) 1fr 1fr; + grid-template-areas: + 'mod desc stat button' + 'mod modstat stat button' + 'mod clarityDesc stat button' + 'mod source stat button'; } } diff --git a/src/app/loadout-builder/LoadoutBuilder.m.scss b/src/app/loadout-builder/LoadoutBuilder.m.scss index c0cecbc202..92978898ef 100644 --- a/src/app/loadout-builder/LoadoutBuilder.m.scss +++ b/src/app/loadout-builder/LoadoutBuilder.m.scss @@ -11,12 +11,6 @@ .menuContent { box-sizing: border-box; - > div { - display: flex; - flex-direction: column; - gap: 8px; - } - @include phone-portrait { > div > div { display: flex; @@ -24,6 +18,12 @@ gap: 8px; } } + + > div { + display: flex; + flex-direction: column; + gap: 8px; + } } .wide { @@ -44,11 +44,11 @@ .guide { box-sizing: border-box; + user-select: text; @include phone-portrait { padding: 0 10px; } - user-select: text; p, li { font-size: 14px; @@ -79,19 +79,19 @@ // Style for sections borrowed from LoadoutEdit .loadoutEditSection { + // Fit 7 mods across, regardless of what the user's item size is + --item-size: 50px; font-size: 12px; // reset from where PageWithMenu sets it to 14px background-color: rgba(0, 0, 0, 0.3); padding: 8px; gap: 0; - // Fit 7 mods across, regardless of what the user's item size is - --item-size: 50px; } .subclassSection { - composes: loadoutEditSection; // Adjust these down a bit --item-size: 47px; --loadout-edit-subclass-columns: 6; + composes: loadoutEditSection; } .referenceTiersInfo { @@ -113,12 +113,12 @@ padding: 12px 12px 12px 12px; color: rgba(255, 255, 255, 0.5); cursor: pointer; + position: absolute; + right: 0; + top: 0; > :global(.app-icon) { height: 24px; width: 24px; font-size: 24px; } - position: absolute; - right: 0; - top: 0; } diff --git a/src/app/loadout-builder/filter/StatConstraintEditor.m.scss b/src/app/loadout-builder/filter/StatConstraintEditor.m.scss index ea8a517481..7312020de3 100644 --- a/src/app/loadout-builder/filter/StatConstraintEditor.m.scss +++ b/src/app/loadout-builder/filter/StatConstraintEditor.m.scss @@ -84,6 +84,10 @@ height: 20px; box-sizing: border-box; + @include interactive($hover: true) { + outline: 1px solid var(--theme-accent-primary); + } + /* stylelint-disable-next-line no-descending-specificity */ > * { display: flex; @@ -92,10 +96,6 @@ height: 100%; width: 100%; } - - @include interactive($hover: true) { - outline: 1px solid var(--theme-accent-primary); - } } // Tiers that can't be reached given the currently selected minimums @@ -122,17 +122,17 @@ padding: 0 6px; opacity: 0.9; - .ignored &, - &:disabled { - opacity: 0.9; - color: #555; - } - @include interactive($hover: true, $focus: true) { &:not(:disabled) { color: var(--theme-accent-primary); } } + + .ignored &, + &:disabled { + opacity: 0.9; + color: #555; + } } .dragging { diff --git a/src/app/loadout-builder/generated-sets/GeneratedSet.m.scss b/src/app/loadout-builder/generated-sets/GeneratedSet.m.scss index 4bc1e640ec..bb659e7775 100644 --- a/src/app/loadout-builder/generated-sets/GeneratedSet.m.scss +++ b/src/app/loadout-builder/generated-sets/GeneratedSet.m.scss @@ -10,14 +10,14 @@ padding-bottom: 14px; width: fit-content !important; - &:last-child { - border-bottom: 0; - } - @include phone-portrait { padding-left: 12px; padding-right: 12px; } + + &:last-child { + border-bottom: 0; + } } .build { diff --git a/src/app/loadout-builder/generated-sets/SetStats.m.scss b/src/app/loadout-builder/generated-sets/SetStats.m.scss index 81bc227d5d..3f6fdd7637 100644 --- a/src/app/loadout-builder/generated-sets/SetStats.m.scss +++ b/src/app/loadout-builder/generated-sets/SetStats.m.scss @@ -46,13 +46,13 @@ display: flex; margin-right: 0.5em; - .nonActiveStat { - margin-left: 0.25em; - } - @include phone-portrait { margin-right: 0; } + + .nonActiveStat { + margin-left: 0.25em; + } } .tier { diff --git a/src/app/loadout-drawer/LoadoutDrawerFooter.m.scss b/src/app/loadout-drawer/LoadoutDrawerFooter.m.scss index 9f2a72ee15..eb4d1dba42 100644 --- a/src/app/loadout-drawer/LoadoutDrawerFooter.m.scss +++ b/src/app/loadout-drawer/LoadoutDrawerFooter.m.scss @@ -13,10 +13,10 @@ margin-right: 4px; margin-bottom: 4px; width: 100%; + gap: 4px; &:last-child { margin-bottom: 0; } - gap: 4px; > a { margin-left: auto; diff --git a/src/app/loadout-drawer/LoadoutDrawerHeader.m.scss b/src/app/loadout-drawer/LoadoutDrawerHeader.m.scss index 2464434daf..65509e2d13 100644 --- a/src/app/loadout-drawer/LoadoutDrawerHeader.m.scss +++ b/src/app/loadout-drawer/LoadoutDrawerHeader.m.scss @@ -29,15 +29,15 @@ height: 32px; } - ::placeholder { - color: #999; - } - @include interactive($hover: true, $focusWithin: true) { outline: none; box-shadow: inset 0 0 0 1px var(--theme-search-dropdown-border); } + ::placeholder { + color: #999; + } + > input { all: initial; outline: none; diff --git a/src/app/loadout/LoadoutView.m.scss b/src/app/loadout/LoadoutView.m.scss index 292187d1b6..235b42bddb 100644 --- a/src/app/loadout/LoadoutView.m.scss +++ b/src/app/loadout/LoadoutView.m.scss @@ -16,17 +16,17 @@ user-select: text; gap: 1em; - h2 { - display: block; - margin: 0 !important; - font-size: 16px; - } - @include phone-portrait { flex-direction: column; align-items: flex-start; gap: 8px; } + + h2 { + display: block; + margin: 0 !important; + font-size: 16px; + } } .actions { diff --git a/src/app/loadout/ingame/EditInGameLoadout.m.scss b/src/app/loadout/ingame/EditInGameLoadout.m.scss index f46f312607..3703665c5e 100644 --- a/src/app/loadout/ingame/EditInGameLoadout.m.scss +++ b/src/app/loadout/ingame/EditInGameLoadout.m.scss @@ -25,11 +25,6 @@ .button { composes: dim-button from global; position: relative; - > img { - margin: 0 !important; - height: 48px; - width: 48px; - } @include interactive($hover: true, $active: true) { background-color: var(--theme-accent-primary); @@ -38,6 +33,11 @@ filter: none !important; } } + > img { + margin: 0 !important; + height: 48px; + width: 48px; + } &.checked { background-color: var(--theme-accent-primary); diff --git a/src/app/loadout/loadout-edit/LoadoutEditBucket.m.scss b/src/app/loadout/loadout-edit/LoadoutEditBucket.m.scss index 17a7b7bef1..ebfa140354 100644 --- a/src/app/loadout/loadout-edit/LoadoutEditBucket.m.scss +++ b/src/app/loadout/loadout-edit/LoadoutEditBucket.m.scss @@ -47,11 +47,11 @@ } .unequipped { + --item-icon-size: calc(var(--item-size) - 6px); composes: sub-bucket from global; width: 100%; padding: 0; gap: 4px; - --item-icon-size: calc(var(--item-size) - 6px); grid-template-columns: var(--item-icon-size); > * { --item-size: var(--item-icon-size); diff --git a/src/app/loadout/loadout-edit/LoadoutEditSection.m.scss b/src/app/loadout/loadout-edit/LoadoutEditSection.m.scss index 357a179a12..96633751fd 100644 --- a/src/app/loadout/loadout-edit/LoadoutEditSection.m.scss +++ b/src/app/loadout/loadout-edit/LoadoutEditSection.m.scss @@ -11,13 +11,13 @@ display: flex; flex-direction: row; align-items: baseline; + flex: 1; > h3 { margin: 0; padding: 0; margin-right: 4px; } - flex: 1; } :global(.app-icon) { diff --git a/src/app/loadout/loadout-edit/LoadoutEditSubclass.m.scss b/src/app/loadout/loadout-edit/LoadoutEditSubclass.m.scss index 877d712bed..2080b3b639 100644 --- a/src/app/loadout/loadout-edit/LoadoutEditSubclass.m.scss +++ b/src/app/loadout/loadout-edit/LoadoutEditSubclass.m.scss @@ -55,13 +55,13 @@ } .classButton { + // Smaller items to try and make it clearer that these aren't selected. + --item-size: 32px; composes: resetButton from '../../dim-ui/common.m.scss'; display: flex; align-items: center; justify-content: center; opacity: 0.5; - // Smaller items to try and make it clearer that these aren't selected. - --item-size: 32px; color: #999; diff --git a/src/app/loadout/loadout-menu/LoadoutPopup.m.scss b/src/app/loadout/loadout-menu/LoadoutPopup.m.scss index ff48f0c47e..1ff488b3df 100644 --- a/src/app/loadout/loadout-menu/LoadoutPopup.m.scss +++ b/src/app/loadout/loadout-menu/LoadoutPopup.m.scss @@ -21,6 +21,25 @@ padding: 2px 0; } + @include interactive($hover: true) { + background-color: var(--theme-accent-primary); + color: var(--theme-text-invert) !important; + > span:first-child > :global(.app-icon) { + color: var(--theme-text-invert) !important; + } + > span:first-child > img:first-child, + .modificationIcon { + filter: none; + } + .fashionIcon { + filter: invert(1); + } + + .note { + color: var(--theme-text-invert); + } + } + &:last-of-type { border: 0; } @@ -94,25 +113,6 @@ } } - @include interactive($hover: true) { - background-color: var(--theme-accent-primary); - color: var(--theme-text-invert) !important; - > span:first-child > :global(.app-icon) { - color: var(--theme-text-invert) !important; - } - > span:first-child > img:first-child, - .modificationIcon { - filter: none; - } - .fashionIcon { - filter: invert(1); - } - - .note { - color: var(--theme-text-invert); - } - } - > span:not(:first-child) { margin: 6px 4px 6px 4px; padding: 0 6px; @@ -130,6 +130,11 @@ border-radius: 4px; color: #888; background-color: #222; + + @include interactive($hover: true) { + background-color: var(--theme-accent-secondary); + color: #222; + } /* stylelint-disable-next-line no-descending-specificity */ :global(.app-icon) { font-size: 13px; @@ -138,11 +143,6 @@ font-size: 15px; } } - - @include interactive($hover: true) { - background-color: var(--theme-accent-secondary); - color: #222; - } } .loadoutTypeIcon { @@ -185,9 +185,9 @@ .inGameLoadoutButton { composes: resetButton from '../../dim-ui/common.m.scss'; + display: block; @include interactive($hover: true, $focus: true) { outline: 2px solid var(--theme-accent-primary); } - display: block; } diff --git a/src/app/loadout/loadout-ui/LoadoutItemCategorySection.m.scss b/src/app/loadout/loadout-ui/LoadoutItemCategorySection.m.scss index eb21674f21..4e0f80684e 100644 --- a/src/app/loadout/loadout-ui/LoadoutItemCategorySection.m.scss +++ b/src/app/loadout/loadout-ui/LoadoutItemCategorySection.m.scss @@ -44,10 +44,10 @@ } .unequipped { + --item-icon-size: calc(0.5 * var(--item-size) - 1px); composes: sub-bucket from global; width: 100%; padding: 0; - --item-icon-size: calc(0.5 * var(--item-size) - 1px); > * { --item-size: var(--item-icon-size); } diff --git a/src/app/loadout/loadout-ui/LoadoutMods.m.scss b/src/app/loadout/loadout-ui/LoadoutMods.m.scss index 8c0744374c..163fce98ab 100644 --- a/src/app/loadout/loadout-ui/LoadoutMods.m.scss +++ b/src/app/loadout/loadout-ui/LoadoutMods.m.scss @@ -3,16 +3,16 @@ .modsGrid { --item-icon-size: calc(0.8 * var(--item-size)); min-width: calc(5 * var(--item-icon-size) + 4 * var(--item-margin)); - - @include phone-portrait { - min-width: min(calc(5 * var(--item-icon-size) + 4 * var(--item-margin)), calc(100vw - 20px)); - max-width: calc(100vw - 20px); - } display: grid; grid-template-columns: repeat(auto-fill, var(--item-icon-size)); gap: 4px; align-content: flex-start; align-items: flex-start; + + @include phone-portrait { + min-width: min(calc(5 * var(--item-icon-size) + 4 * var(--item-margin)), calc(100vw - 20px)); + max-width: calc(100vw - 20px); + } :global(.item) { --item-size: var(--item-icon-size); } diff --git a/src/app/loadout/mod-assignment-drawer/ModAssignmentDrawer.m.scss b/src/app/loadout/mod-assignment-drawer/ModAssignmentDrawer.m.scss index 1a8b8532cd..6100ca1e42 100644 --- a/src/app/loadout/mod-assignment-drawer/ModAssignmentDrawer.m.scss +++ b/src/app/loadout/mod-assignment-drawer/ModAssignmentDrawer.m.scss @@ -38,6 +38,7 @@ } .infoSectionHeader { + margin-bottom: 10px; > h3 { margin-bottom: 2px; } @@ -45,7 +46,6 @@ color: grey; font-style: italic; } - margin-bottom: 10px; } .costs { diff --git a/src/app/loadout/plug-drawer/Footer.m.scss b/src/app/loadout/plug-drawer/Footer.m.scss index 18123d330f..7822db77be 100644 --- a/src/app/loadout/plug-drawer/Footer.m.scss +++ b/src/app/loadout/plug-drawer/Footer.m.scss @@ -13,8 +13,8 @@ } .selectedPlugs { - gap: 4px; --item-size: 32px; + gap: 4px; > * { flex-shrink: 0; diff --git a/src/app/loadout/plug-drawer/PlugSection.m.scss b/src/app/loadout/plug-drawer/PlugSection.m.scss index eb44352576..9a0176cd63 100644 --- a/src/app/loadout/plug-drawer/PlugSection.m.scss +++ b/src/app/loadout/plug-drawer/PlugSection.m.scss @@ -1,4 +1,4 @@ .section { - margin: 0 10px; --tile-grid-width: 300px; + margin: 0 10px; } diff --git a/src/app/login/Login.m.scss b/src/app/login/Login.m.scss index 641e69110f..cd0609bc97 100644 --- a/src/app/login/Login.m.scss +++ b/src/app/login/Login.m.scss @@ -17,9 +17,10 @@ margin: auto; h1 { - @include destiny-header; margin: 0; text-align: center; + + @include destiny-header; } } diff --git a/src/app/main.scss b/src/app/main.scss index 370d15a8f7..d6f54fa72e 100644 --- a/src/app/main.scss +++ b/src/app/main.scss @@ -137,10 +137,10 @@ label { background: #900; padding: 8px; text-align: center; + animation: 1s linear 10s forwards browser-warning; &.hidden { display: none; } - animation: 1s linear 10s forwards browser-warning; } /** diff --git a/src/app/notifications/Notification.m.scss b/src/app/notifications/Notification.m.scss index fa8685a368..8bfe24baab 100644 --- a/src/app/notifications/Notification.m.scss +++ b/src/app/notifications/Notification.m.scss @@ -3,11 +3,11 @@ .notification { margin: 0 0 8px; width: 350px; + box-shadow: 0 -1px 24px 4px #222; @include phone-portrait { width: 100%; } - box-shadow: 0 -1px 24px 4px #222; } .inner { diff --git a/src/app/notifications/NotificationsContainer.m.scss b/src/app/notifications/NotificationsContainer.m.scss index e990424ced..34b376cbdc 100644 --- a/src/app/notifications/NotificationsContainer.m.scss +++ b/src/app/notifications/NotificationsContainer.m.scss @@ -2,8 +2,6 @@ .container { position: fixed; - - @include below-header; right: 0; z-index: $tempContainerZindex + 1; padding: 8px; @@ -16,6 +14,8 @@ flex-direction: column; align-items: flex-end; + @include below-header; + @include phone-portrait { bottom: 0; flex-direction: column-reverse; diff --git a/src/app/organizer/ItemTable.m.scss b/src/app/organizer/ItemTable.m.scss index 84cc0b6ccc..0608a48e7f 100644 --- a/src/app/organizer/ItemTable.m.scss +++ b/src/app/organizer/ItemTable.m.scss @@ -105,10 +105,10 @@ $content-cells: 5; left: env(safe-area-inset-left); position: sticky; top: calc(var(--header-height) + var(--table-header-height) + var(--item-table-toolbar-height)); + z-index: $header-cells; &.header { top: calc(var(--header-height) + var(--item-table-toolbar-height)); } - z-index: $header-cells; } .rating { @@ -145,17 +145,17 @@ $content-cells: 5; } .icon { + --icon-item-size: calc(var(--item-size) * 0.75); padding-top: 4px !important; min-width: calc(var(--item-size) * 0.75); left: calc(30px + env(safe-area-inset-left)); position: sticky; top: calc(var(--header-height) + var(--table-header-height) + var(--item-table-toolbar-height)); + z-index: $header-cells; &.header { top: calc(var(--header-height) + var(--item-table-toolbar-height)); padding-top: 0; } - z-index: $header-cells; - --icon-item-size: calc(var(--item-size) * 0.75); > :global(.item) { --item-size: var(--icon-item-size) !important; height: var(--item-size); @@ -234,12 +234,12 @@ $content-cells: 5; white-space: nowrap; } .miniPerkContainer { + --item-size: 18px; position: relative; contain: layout paint style; box-sizing: border-box; height: 18px; width: 18px; - --item-size: 18px; margin-left: -1px; flex-shrink: 0; > img { diff --git a/src/app/organizer/ItemTypeSelector.m.scss b/src/app/organizer/ItemTypeSelector.m.scss index adc5087968..6bf5f2a616 100644 --- a/src/app/organizer/ItemTypeSelector.m.scss +++ b/src/app/organizer/ItemTypeSelector.m.scss @@ -23,9 +23,6 @@ .button { composes: dim-button from global; margin: 2px; - > img { - margin-left: 0 !important; - } @include interactive($hover: true, $active: true) { background-color: var(--theme-accent-primary); @@ -34,6 +31,9 @@ filter: none !important; } } + > img { + margin-left: 0 !important; + } &.checked { background-color: var(--theme-accent-primary); color: var(--theme-text-invert); diff --git a/src/app/progress/BountyGuide.m.scss b/src/app/progress/BountyGuide.m.scss index aca51eeef3..5e486d9579 100644 --- a/src/app/progress/BountyGuide.m.scss +++ b/src/app/progress/BountyGuide.m.scss @@ -38,13 +38,13 @@ margin-right: -2px; padding-left: 6px; border-left: 1px solid rgba(255, 255, 255, 0.2); - :global(.app-icon) { - transition: transform 150ms ease-in-out; - } @include interactive($hover: true) { :global(.app-icon) { transform: scale(1.3); } } + :global(.app-icon) { + transition: transform 150ms ease-in-out; + } } diff --git a/src/app/progress/Pathfinder.m.scss b/src/app/progress/Pathfinder.m.scss index e445c79092..d8ab0f6652 100644 --- a/src/app/progress/Pathfinder.m.scss +++ b/src/app/progress/Pathfinder.m.scss @@ -14,6 +14,7 @@ } .pathfinderRow { + --item-size: 35px; composes: flexColumn from '../dim-ui/common.m.scss'; box-sizing: border-box; gap: 8px; @@ -22,13 +23,24 @@ justify-content: center; max-width: 250px; min-width: 120px; - --item-size: 35px; - :global(.milestone-quest) { - align-items: center; - background: rgba(255, 255, 255, 0.05); - padding: 8px; - width: 100%; + @include phone-portrait { + flex-direction: row; + gap: 14px; + width: auto; + max-width: unset; + + > * { + flex: 0; + width: calc(var(--item-size) + 16px) !important; + min-width: calc(var(--item-size) + 16px) !important; + } + :global(.milestone-icon) { + margin: 0; + } + :global(.milestone-info) { + display: none !important; + } } @media (min-width: 541px) { @@ -49,8 +61,8 @@ flex-direction: column; } :global(.milestone-icon) { - flex-direction: row !important; --item-size: 25px; + flex-direction: row !important; max-width: fit-content !important; margin-top: 6px; @@ -73,23 +85,11 @@ } } - @include phone-portrait { - flex-direction: row; - gap: 14px; - width: auto; - max-width: unset; - - > * { - flex: 0; - width: calc(var(--item-size) + 16px) !important; - min-width: calc(var(--item-size) + 16px) !important; - } - :global(.milestone-icon) { - margin: 0; - } - :global(.milestone-info) { - display: none !important; - } + :global(.milestone-quest) { + align-items: center; + background: rgba(255, 255, 255, 0.05); + padding: 8px; + width: 100%; } } diff --git a/src/app/progress/milestone.scss b/src/app/progress/milestone.scss index 33f3cb67cf..400604a0ad 100644 --- a/src/app/progress/milestone.scss +++ b/src/app/progress/milestone.scss @@ -32,6 +32,11 @@ button.milestone-quest { } .milestone-icon { + margin-right: 8px; + display: flex; + flex-direction: column; + align-items: center; + max-width: var(--item-size); .milestone-img { width: var(--item-size); height: var(--item-size); @@ -40,11 +45,6 @@ button.milestone-quest { font-size: 10px; text-align: center; } - margin-right: 8px; - display: flex; - flex-direction: column; - align-items: center; - max-width: var(--item-size); .item { margin: 0; diff --git a/src/app/records/Record.m.scss b/src/app/records/Record.m.scss index 0e54ef6bef..965c73c1ce 100644 --- a/src/app/records/Record.m.scss +++ b/src/app/records/Record.m.scss @@ -177,15 +177,15 @@ @include interactive($hover: true) { transform: scale(1.5); } - img { - width: calc(var(--item-size) / 3.1) !important; - height: auto !important; - } @media (hover: none) { display: block; opacity: 0.7; } + img { + width: calc(var(--item-size) / 3.1) !important; + height: auto !important; + } .trackedInDim & { display: block; opacity: 1; diff --git a/src/app/search/FilterHelp.m.scss b/src/app/search/FilterHelp.m.scss index d94c380178..bf77d51ada 100644 --- a/src/app/search/FilterHelp.m.scss +++ b/src/app/search/FilterHelp.m.scss @@ -62,11 +62,11 @@ .entry { display: flex; + margin-bottom: 4px; + div { display: flex; } - - margin-bottom: 4px; &:last-child { margin-bottom: 0; } diff --git a/src/app/search/SearchBar.m.scss b/src/app/search/SearchBar.m.scss index 56a4437379..b264bb33c9 100644 --- a/src/app/search/SearchBar.m.scss +++ b/src/app/search/SearchBar.m.scss @@ -31,10 +31,6 @@ overflow: hidden; overscroll-behavior: none; - &:empty { - display: none !important; - } - @include phone-portrait { top: 100%; // Fallback to allow either fully or semi-transparent search box borders @@ -48,6 +44,10 @@ 0 1px 4px 1px rgba(0, 0, 0, 0.5); max-height: calc(var(--viewport-height) - var(--header-height)) !important; } + + &:empty { + display: none !important; + } } .invalid { @@ -180,6 +180,14 @@ border: 0; cursor: pointer; + @include interactive($hover: true) { + > span, + > :global(.app-icon), + button > :global(.app-icon) { + color: var(--theme-accent-primary); + } + } + &:focus-visible { outline: 1px solid var(--theme-accent-primary); } @@ -204,12 +212,4 @@ > a { margin: 0 !important; } - - @include interactive($hover: true) { - > span, - > :global(.app-icon), - button > :global(.app-icon) { - color: var(--theme-accent-primary); - } - } } diff --git a/src/app/search/search-filter.scss b/src/app/search/search-filter.scss index d8a4061f9e..a39d1e6d34 100644 --- a/src/app/search/search-filter.scss +++ b/src/app/search/search-filter.scss @@ -12,10 +12,6 @@ min-width: 350px; box-sizing: border-box; - ::placeholder { - color: #999; - } - @include phone-portrait { width: auto; height: 34px; @@ -26,6 +22,10 @@ box-shadow: inset 0 0 0 1px var(--theme-search-dropdown-border); } + ::placeholder { + color: #999; + } + > input[type='text'] { all: initial; outline: none; diff --git a/src/app/shell/AppInstallBanner.m.scss b/src/app/shell/AppInstallBanner.m.scss index 5c7e7177f6..4364ac3d08 100644 --- a/src/app/shell/AppInstallBanner.m.scss +++ b/src/app/shell/AppInstallBanner.m.scss @@ -1,9 +1,6 @@ .banner { composes: flexRow from '../dim-ui/common.m.scss'; align-items: center; - > *:first-child { - flex: 1; - } width: 100%; padding: 8px 16px; @@ -11,6 +8,9 @@ text-decoration: none; background: rgb(30, 32, 43); border-bottom: 1px solid rgb(104, 111, 139); + > *:first-child { + flex: 1; + } } .hideButton { diff --git a/src/app/shell/Header.m.scss b/src/app/shell/Header.m.scss index dc47743f9b..1b11e7c443 100644 --- a/src/app/shell/Header.m.scss +++ b/src/app/shell/Header.m.scss @@ -84,19 +84,19 @@ $header-height: 44px; user-select: none; white-space: nowrap; + color: var(--theme-text); + cursor: pointer; + @include phone-portrait { margin: 0 12px; } - color: var(--theme-text); - cursor: pointer; - - &.active { + @include interactive($hover: true) { color: var(--theme-accent-primary); transition: color 0.2s linear; } - @include interactive($hover: true) { + &.active { color: var(--theme-accent-primary); transition: color 0.2s linear; } @@ -123,15 +123,15 @@ $header-height: 44px; .logo { height: 24px; width: 68px; + color: var(--theme-accent-primary) !important; + font-size: 16px !important; + font-weight: bold; + font-weight: 400; @include phone-portrait { height: 24px * 1.2; width: 68px * 1.2; } - color: var(--theme-accent-primary) !important; - font-size: 16px !important; - font-weight: bold; - font-weight: 400; &.dev { filter: grayscale(100%) brightness(150%); } @@ -179,7 +179,6 @@ $header-height: 44px; } .dropdown { - @include below-header; box-sizing: border-box; position: absolute; display: flex; @@ -194,6 +193,8 @@ $header-height: 44px; padding-bottom: Max(4px, env(safe-area-inset-bottom)); flex-direction: column; + @include below-header; + hr { margin: 8px 0 6px 0; border: none; @@ -214,12 +215,6 @@ $header-height: 44px; margin: 0; transition: none; - &.active { - color: var(--theme-text); - border-left: 4px solid var(--theme-accent-primary); - padding-left: calc(1rem - 4px); - } - @include phone-portrait { font-size: 18px; padding-top: 6px; @@ -231,6 +226,12 @@ $header-height: 44px; color: var(--theme-text-invert); } + &.active { + color: var(--theme-text); + border-left: 4px solid var(--theme-accent-primary); + padding-left: calc(1rem - 4px); + } + .launchSeparateIcon { font-size: 1em; color: #888; diff --git a/src/app/shell/HeaderWarningBanner.m.scss b/src/app/shell/HeaderWarningBanner.m.scss index 6ff7488789..29efbe5f97 100644 --- a/src/app/shell/HeaderWarningBanner.m.scss +++ b/src/app/shell/HeaderWarningBanner.m.scss @@ -10,10 +10,6 @@ background: rgb(151, 4, 1); font-size: 14px; - > *:first-child { - margin-right: 16px; - } - @include phone-portrait { flex-direction: column-reverse; padding: 8px 14px; @@ -22,4 +18,8 @@ margin-top: 8px; } } + + > *:first-child { + margin-right: 16px; + } } diff --git a/src/app/shell/RefreshButton.m.scss b/src/app/shell/RefreshButton.m.scss index 58743e7253..f2d2b315c1 100644 --- a/src/app/shell/RefreshButton.m.scss +++ b/src/app/shell/RefreshButton.m.scss @@ -33,12 +33,12 @@ } .errorTooltip { + max-width: 800px; + @include tooltip-background-color(scale-color($red, $lightness: -90%)); @include tooltip-border-color($red); @include tooltip-ribbon-color($red); - max-width: 800px; - @include phone-portrait { max-width: 95%; } diff --git a/src/app/stream-deck/StreamDeckButton/StreamDeckButton.m.scss b/src/app/stream-deck/StreamDeckButton/StreamDeckButton.m.scss index f33dcb74d6..0b34601b1e 100644 --- a/src/app/stream-deck/StreamDeckButton/StreamDeckButton.m.scss +++ b/src/app/stream-deck/StreamDeckButton/StreamDeckButton.m.scss @@ -4,16 +4,16 @@ .streamDeckButton { composes: resetButton from '../../dim-ui/common.m.scss'; position: relative; + + @container (max-width: 540px) { + display: none; + } & img { max-width: 19px; margin: 0 8px; margin-top: 2px; height: auto; } - - @container (max-width: 540px) { - display: none; - } } .connected { diff --git a/src/app/strip-sockets/StripSockets.m.scss b/src/app/strip-sockets/StripSockets.m.scss index c4bee870be..086d14937f 100644 --- a/src/app/strip-sockets/StripSockets.m.scss +++ b/src/app/strip-sockets/StripSockets.m.scss @@ -21,10 +21,6 @@ } .socketKindButton { - > * { - margin-right: 8px; - } - border: 1px solid #666; cursor: pointer; margin: 1px 2px; @@ -37,6 +33,9 @@ @include interactive($hover: true) { background-color: rgba(255, 255, 255, 0.1); } + > * { + margin-right: 8px; + } &:focus { outline: 1px solid var(--theme-accent-secondary); } @@ -49,12 +48,12 @@ } .buttonTitle { - &.selectedTitle { - color: var(--theme-accent-primary); - } font-weight: bold; font-size: 13px; margin-bottom: 4px; + &.selectedTitle { + color: var(--theme-accent-primary); + } } .selectedButton { @@ -72,13 +71,13 @@ } .iconList { + --item-size: 32px; display: flex; flex-flow: row wrap; margin: 8px 8px; &:last-child { margin-bottom: 0; } - --item-size: 32px; > * { margin: 0 4px 4px 0; diff --git a/src/app/themes/_theme-europa.scss b/src/app/themes/_theme-europa.scss index 939cef626a..706865441c 100644 --- a/src/app/themes/_theme-europa.scss +++ b/src/app/themes/_theme-europa.scss @@ -4,11 +4,6 @@ --theme-accent-primary: #88cbed; // Interaction styles (hover, active, focus) --theme-accent-secondary: #f27b8a; // Secondary interactions - // More vibrant P3 colourspace tints for displays that support them - @supports (color: color(display-p3 1 1 1)) { - --theme-accent-primary: oklch(71% 0.18 235.97); - } - // Generic fills for modal backgrounds (see below) --theme-fill-modal: #1d2b5e; // Base fill for popups, drawers, dropdowns etc --theme-fill-modal-actions: #0b2432; // Layered/contextual modals (search, item actions) @@ -98,4 +93,9 @@ // Records --theme-record-redeemed: #17d0d2; + + // More vibrant P3 colourspace tints for displays that support them + @supports (color: color(display-p3 1 1 1)) { + --theme-accent-primary: oklch(71% 0.18 235.97); + } } diff --git a/src/app/themes/_theme-neomuna.scss b/src/app/themes/_theme-neomuna.scss index 11fb2c11a7..f7863f4bed 100644 --- a/src/app/themes/_theme-neomuna.scss +++ b/src/app/themes/_theme-neomuna.scss @@ -4,13 +4,6 @@ --theme-accent-primary: #fe2dde; // Interaction styles (hover, active, focus) --theme-accent-secondary: #f27b8a; // Secondary interactions - // More vibrant P3 colourspace tints for displays that support them - @supports (color: color(display-p3 1 1 1)) { - --theme-accent-primary: oklch(61% 0.29 336.78); - --theme-item-polaroid: oklch(74% 0.15 213.27); - --theme-item-polaroid-masterwork: oklch(55% 0.26 340.71); - } - // Generic fills for modal backgrounds (see below) --theme-fill-modal: #0b2432; // Base fill for popups, drawers, dropdowns etc --theme-fill-modal-actions: #0b2432; // Layered/contextual modals (search, item actions) @@ -101,4 +94,11 @@ // Records --theme-record-redeemed: #ee77ef; + + // More vibrant P3 colourspace tints for displays that support them + @supports (color: color(display-p3 1 1 1)) { + --theme-accent-primary: oklch(61% 0.29 336.78); + --theme-item-polaroid: oklch(74% 0.15 213.27); + --theme-item-polaroid-masterwork: oklch(55% 0.26 340.71); + } } diff --git a/src/app/themes/_theme-pyramid.scss b/src/app/themes/_theme-pyramid.scss index 188e401ee5..44e4c2895f 100644 --- a/src/app/themes/_theme-pyramid.scss +++ b/src/app/themes/_theme-pyramid.scss @@ -4,11 +4,6 @@ --theme-accent-primary: #e34400; // Interaction styles (hover, active, focus) --theme-accent-secondary: #68a0b7; // Secondary interactions - // More vibrant P3 colourspace tints for displays that support them - @supports (color: color(display-p3 1 1 1)) { - --theme-accent-primary: oklch(61% 0.21 41.64); - } - // Generic fills for modal backgrounds (see below) --theme-fill-modal: #000; // Base fill for popups, drawers, dropdowns etc --theme-fill-modal-actions: #161616; // Layered/contextual modals (search, item actions) @@ -98,4 +93,9 @@ // Records --theme-record-redeemed: #c88861; + + // More vibrant P3 colourspace tints for displays that support them + @supports (color: color(display-p3 1 1 1)) { + --theme-accent-primary: oklch(61% 0.21 41.64); + } } diff --git a/src/app/themes/_theme-vexnet.scss b/src/app/themes/_theme-vexnet.scss index 88df9f2712..8d6c738707 100644 --- a/src/app/themes/_theme-vexnet.scss +++ b/src/app/themes/_theme-vexnet.scss @@ -4,11 +4,6 @@ --theme-accent-primary: #5ed12c; // Interaction styles (hover, active, focus) --theme-accent-secondary: #f27b8a; // Secondary interactions - // More vibrant P3 colourspace tints for displays that support them - @supports (color: color(display-p3 1 1 1)) { - --theme-accent-primary: oklch(72% 0.27 140.8); - } - // Generic fills for modal backgrounds (see below) --theme-fill-modal: #0d2f63; // Base fill for popups, drawers, dropdowns etc --theme-fill-modal-actions: #0b2432; // Layered/contextual modals (search, item actions) @@ -99,4 +94,9 @@ // Records --theme-record-redeemed: #e9ec10; + + // More vibrant P3 colourspace tints for displays that support them + @supports (color: color(display-p3 1 1 1)) { + --theme-accent-primary: oklch(72% 0.27 140.8); + } }