diff --git a/src/components/catalog/CatalogView.tsx b/src/components/catalog/CatalogView.tsx index fbc700e..2859f24 100644 --- a/src/components/catalog/CatalogView.tsx +++ b/src/components/catalog/CatalogView.tsx @@ -1,10 +1,21 @@ -import { FC } from 'react'; -import { useCatalogData } from '../../hooks'; +import { FC, useEffect } from 'react'; +import { useCatalogClassicStyle, useCatalogData } from '../../hooks'; import { CatalogClassicView } from './CatalogClassicView'; export const CatalogView: FC<{}> = () => { const { catalogLocalizationVersion = 0 } = useCatalogData(); + const [ catalogClassicStyle ] = useCatalogClassicStyle(); + + // Toggle the legacy-skin marker on so the scoped overrides in + // CatalogClassicLegacy.css (the pre-merge catalog look) take effect for + // every catalog element without touching the modern stylesheet. + useEffect(() => + { + document.body.classList.toggle('catalog-skin-legacy', !!catalogClassicStyle); + + return () => document.body.classList.remove('catalog-skin-legacy'); + }, [ catalogClassicStyle ]); return ( <> diff --git a/src/css/catalog/CatalogClassicLegacy.css b/src/css/catalog/CatalogClassicLegacy.css new file mode 100644 index 0000000..db5c6ef --- /dev/null +++ b/src/css/catalog/CatalogClassicLegacy.css @@ -0,0 +1,354 @@ +/* Auto-generated: pre-merge catalog CSS scoped under .catalog-skin-legacy (classic style toggle). Source: CatalogClassicView.css @ b360595. Do not edit by hand. */ +body.catalog-skin-legacy .nitro-catalog-classic-window { + width: 640px !important; + height: 600px !important; + max-width: 640px !important; + min-width: 640px !important; + min-height: 600px !important; + max-height: 600px !important; +} +body.catalog-skin-legacy .nitro-catalog-classic-window .nitro-card-title { + font-size: 18px; + letter-spacing: 0.2px; +} +body.catalog-skin-legacy .nitro-catalog-classic-window .nitro-card-header-shell { + min-height: 38px; + max-height: 38px; +} +body.catalog-skin-legacy .nitro-catalog-classic-admin-banner { + border-bottom: 1px solid rgba(0, 0, 0, 0.18); + background: linear-gradient(180deg, #f4d45d 0%, #d8b43e 100%); +} +body.catalog-skin-legacy .nitro-catalog-classic-tabs-shell { + flex-wrap: nowrap; + gap: 1px; + min-height: 30px; + max-height: 30px; + padding: 0 6px; + overflow-x: auto; + overflow-y: hidden; + align-items: end; + background: #e7e8df; + border-bottom: 1px solid #b8beb4; +} +body.catalog-skin-legacy .nitro-catalog-classic-tabs-shell .nitro-card-tab-item { + min-height: 28px; + padding: 5px 10px 4px; + border: 1px solid #8f8f8b; + border-bottom: 0; + border-radius: 5px 5px 0 0; + background: linear-gradient(180deg, #fafaf7 0%, #dde2d9 100%); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); + white-space: nowrap; +} +body.catalog-skin-legacy .nitro-catalog-classic-tabs-shell .nitro-card-tab-item:hover { + background: linear-gradient(180deg, #ffffff 0%, #e7ece4 100%); +} +body.catalog-skin-legacy .nitro-catalog-classic-tabs-shell .nitro-card-tab-item-active { + background: #f2f2eb; + transform: translateY(0); + position: relative; + top: 1px; +} +body.catalog-skin-legacy .nitro-catalog-classic-content-shell { + padding: 6px 8px 8px !important; +} +body.catalog-skin-legacy .nitro-catalog-classic-stage { + display: grid; + grid-template-columns: 196px minmax(0, 1fr); + gap: 8px; + min-height: 0; + height: 100%; +} +body.catalog-skin-legacy .nitro-catalog-classic-stage.is-navigation-hidden { + grid-template-columns: minmax(0, 1fr); +} +body.catalog-skin-legacy .nitro-catalog-classic-sidebar { + display: flex; + flex-direction: column; + gap: 4px; + min-height: 0; + height: 100%; +} +body.catalog-skin-legacy .nitro-catalog-classic-search-shell { + padding: 3px; + border: 1px solid #a7aba1; + border-radius: 4px; + background: linear-gradient(180deg, #f9f8f2 0%, #eaede5 100%); +} +body.catalog-skin-legacy .nitro-catalog-classic-search-shell input { + height: 18px; + padding-top: 0 !important; + padding-bottom: 0 !important; + border-width: 1px !important; + border-color: #8f9588 !important; + border-radius: 3px !important; + background: #fff !important; + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.08); +} +body.catalog-skin-legacy .nitro-catalog-classic-search-shell svg { + color: #61645b !important; +} +body.catalog-skin-legacy .nitro-catalog-classic-navigation-shell { + flex: 1 1 auto; + min-height: 0; + padding: 3px 2px 3px 3px; + border: 1px solid #a7aba1; + border-radius: 4px; + background: linear-gradient(180deg, #f1f2ec 0%, #d8ddd3 100%); + overflow: auto; +} +body.catalog-skin-legacy .nitro-catalog-classic-navigation-list { + display: flex; + flex-direction: column; + gap: 2px; +} +body.catalog-skin-legacy .nitro-catalog-classic-navigation-node.is-child { + margin-left: 10px; +} +body.catalog-skin-legacy .nitro-catalog-classic-navigation-item { + display: flex; + align-items: center; + gap: 4px; + min-height: 21px; + padding: 1px 6px 1px 5px; + border: 1px solid #bdc2ba; + border-radius: 4px; + background: linear-gradient(180deg, #f6f7f2 0%, #e6e9e1 100%); + color: #2e2e2e; + cursor: pointer; + transition: background-color 0.12s ease, border-color 0.12s ease; +} +body.catalog-skin-legacy .nitro-catalog-classic-navigation-item:hover { + background: linear-gradient(180deg, #ffffff 0%, #ebeee6 100%); + border-color: #9ea79b; +} +body.catalog-skin-legacy .nitro-catalog-classic-navigation-item.is-active { + background: linear-gradient(180deg, #dae7f0 0%, #c4d2de 100%); + border-color: #8e9ba5; + font-weight: 700; +} +body.catalog-skin-legacy .nitro-catalog-classic-navigation-item.is-drag-over { + outline: 2px solid rgba(48, 114, 140, 0.35); + outline-offset: 1px; +} +body.catalog-skin-legacy .nitro-catalog-classic-navigation-icon { + display: flex; + align-items: center; + justify-content: center; + width: 18px; + min-width: 18px; + height: 18px; +} +body.catalog-skin-legacy .nitro-catalog-classic-navigation-icon img, +body.catalog-skin-legacy .nitro-catalog-classic-navigation-icon canvas { + width: auto; + height: auto; + max-width: 18px; + max-height: 18px; +} +body.catalog-skin-legacy .nitro-catalog-classic-navigation-label { + flex: 1 1 auto; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 11px; + line-height: 1; +} +body.catalog-skin-legacy .nitro-catalog-classic-navigation-caret, +body.catalog-skin-legacy .nitro-catalog-classic-navigation-favorite, +body.catalog-skin-legacy .nitro-catalog-classic-navigation-admin, +body.catalog-skin-legacy .nitro-catalog-classic-navigation-drag { + flex-shrink: 0; +} +body.catalog-skin-legacy .nitro-catalog-classic-navigation-caret { + color: #676d66 !important; +} +body.catalog-skin-legacy .nitro-catalog-classic-layout-shell { + display: flex; + flex-direction: column; + min-width: 0; + min-height: 0; + height: 100%; + border: 1px solid #a7aba1; + border-radius: 4px; + background: linear-gradient(180deg, #eceee7 0%, #dfe4da 100%); + overflow: hidden; +} +body.catalog-skin-legacy .nitro-catalog-classic-layout-header-shell { + display: flex; + flex-direction: column; + gap: 3px; + min-height: 66px; + padding: 5px 7px; + border-bottom: 1px solid #c8cdc3; + background: linear-gradient(180deg, #f6f6f2 0%, #e9ece4 100%); +} +body.catalog-skin-legacy .nitro-catalog-classic-layout-hero { + display: flex; + align-items: center; + justify-content: center; + flex: 1 1 auto; + min-height: 32px; + overflow: hidden; +} +body.catalog-skin-legacy .nitro-catalog-classic-layout-hero img { + max-width: 100%; + max-height: 32px; + width: auto; + height: auto; + object-fit: contain; +} +body.catalog-skin-legacy .nitro-catalog-classic-layout-container { + flex: 1 1 auto; + min-height: 0; + padding: 6px; + background: #f2f2eb; + overflow: hidden; +} +body.catalog-skin-legacy .nitro-catalog-classic-default-layout { + gap: 8px; +} +body.catalog-skin-legacy .nitro-catalog-classic-offer-panel, +body.catalog-skin-legacy .nitro-catalog-classic-welcome { + border: 1px solid #bfc4bc; + border-radius: 6px; + background: linear-gradient(180deg, #ffffff 0%, #f3f3ed 100%); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92); +} +body.catalog-skin-legacy .nitro-catalog-classic-offer-preview { + width: 136px; + min-width: 136px; + padding: 8px; + border-right: 1px solid #c9cec5; + background: linear-gradient(180deg, #eef2ea 0%, #dde3d8 100%); +} +body.catalog-skin-legacy .nitro-catalog-classic-offer-info { + padding: 10px; +} +body.catalog-skin-legacy .nitro-catalog-classic-welcome { + min-height: 128px; + padding: 10px; +} +body.catalog-skin-legacy .nitro-catalog-classic-grid-shell { + min-height: 150px; + padding: 4px; + border: 1px solid #bcc2b8; + border-radius: 6px; + background: linear-gradient(180deg, #f5f5f0 0%, #e4e7de 100%); + height: auto; + flex: 1 1 auto; +} +body.catalog-skin-legacy .nitro-catalog-classic-grid { + gap: 4px !important; + align-content: start; +} +body.catalog-skin-legacy .nitro-catalog-classic-window .layout-grid-item { + height: 54px; + border: 1px solid #b8beb6 !important; + border-radius: 6px !important; + background-color: #d7dde2; + background-image: none; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55); +} +body.catalog-skin-legacy .nitro-catalog-classic-window .layout-grid-item.is-active { + background-color: #e5ebef !important; + border-color: #8f978b !important; +} +body.catalog-skin-legacy .nitro-catalog-classic-grid-offer-icon { + position: absolute; + inset: 4px; + background-repeat: no-repeat; + background-position: center; + pointer-events: none; +} +body.catalog-skin-legacy .nitro-catalog-classic-window .nitro-catalog-header { + justify-content: flex-start; + min-height: 56px; + margin-bottom: 6px; + padding: 4px 6px; + border: 1px solid #bec3ba; + border-radius: 6px; + background: linear-gradient(180deg, #ffffff 0%, #f2f2ec 100%); +} +body.catalog-skin-legacy .nitro-catalog-classic-window .nitro-catalog-header img { + max-width: 100%; + max-height: 48px; + width: auto; + height: auto; + object-fit: contain; +} +body.catalog-skin-legacy .nitro-catalog-classic-breadcrumb { + display: flex; + align-items: center; + gap: 5px; + min-height: 16px; + overflow: hidden; + color: #666a63; + font-size: 10px; + line-height: 1; + white-space: nowrap; +} +body.catalog-skin-legacy .nitro-catalog-classic-breadcrumb-segment { + display: inline-flex; + align-items: center; + gap: 5px; + min-width: 0; +} +body.catalog-skin-legacy .nitro-catalog-classic-breadcrumb-separator { + color: #9ea395; +} +body.catalog-skin-legacy .nitro-catalog-classic-navigation-shell::-webkit-scrollbar, +body.catalog-skin-legacy .nitro-catalog-classic-layout-container :is(.overflow-auto, +body.catalog-skin-legacy .nitro-card-content-shell, +body.catalog-skin-legacy .nitro-catalog-classic-grid-shell)::-webkit-scrollbar { + width: 12px; +} +body.catalog-skin-legacy .nitro-catalog-classic-navigation-shell::-webkit-scrollbar-track, +body.catalog-skin-legacy .nitro-catalog-classic-layout-container :is(.overflow-auto, +body.catalog-skin-legacy .nitro-card-content-shell, +body.catalog-skin-legacy .nitro-catalog-classic-grid-shell)::-webkit-scrollbar-track { + border-left: 1px solid #c2c6be; + background: #dde2d8; +} +body.catalog-skin-legacy .nitro-catalog-classic-navigation-shell::-webkit-scrollbar-thumb, +body.catalog-skin-legacy .nitro-catalog-classic-layout-container :is(.overflow-auto, +body.catalog-skin-legacy .nitro-card-content-shell, +body.catalog-skin-legacy .nitro-catalog-classic-grid-shell)::-webkit-scrollbar-thumb { + border: 1px solid #7d8680; + border-radius: 6px; + background: linear-gradient(180deg, #a8b3ae 0%, #89948f 100%); +} +body.catalog-skin-legacy .nitro-catalog-classic-navigation-shell::-webkit-scrollbar-button:single-button:vertical:decrement, +body.catalog-skin-legacy .nitro-catalog-classic-layout-container :is(.overflow-auto, +body.catalog-skin-legacy .nitro-card-content-shell, +body.catalog-skin-legacy .nitro-catalog-classic-grid-shell)::-webkit-scrollbar-button:single-button:vertical:decrement { + height: 12px; + background: #dde2d8; +} +body.catalog-skin-legacy .nitro-catalog-classic-navigation-shell::-webkit-scrollbar-button:single-button:vertical:increment, +body.catalog-skin-legacy .nitro-catalog-classic-layout-container :is(.overflow-auto, +body.catalog-skin-legacy .nitro-card-content-shell, +body.catalog-skin-legacy .nitro-catalog-classic-grid-shell)::-webkit-scrollbar-button:single-button:vertical:increment { + height: 12px; + background: #dde2d8; +} +@media (max-width: 991.98px) { +body.catalog-skin-legacy .nitro-catalog-classic-window { + width: min(calc(100vw - 16px), 570px) !important; + min-width: 0 !important; + height: min(calc(100vh - 16px), 635px) !important; + min-height: 0 !important; + max-width: calc(100vw - 16px) !important; + } +body.catalog-skin-legacy .nitro-catalog-classic-stage { + grid-template-columns: minmax(0, 1fr); + } +body.catalog-skin-legacy .nitro-catalog-classic-sidebar { + max-height: 180px; + } + + +} + diff --git a/src/index.tsx b/src/index.tsx index 3825168..a9dacf1 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -20,6 +20,7 @@ import './css/index.css'; import './css/backgrounds/BackgroundsView.css'; import './css/badges/BadgeLeaderboardView.css'; import './css/catalog/CatalogClassicView.css'; +import './css/catalog/CatalogClassicLegacy.css'; import './css/emustats/EmuStatsView.css'; import './css/chat/Chats.css';