/* ============================================================================ SolenoxSMP — purple-minimalist skin for Blessing Skin (Tier A, Stage 1) Global chrome restyle over AdminLTE 3 + Spectre.css + BS custom classes. Presentation only. Loaded last in , so high specificity + !important win over the bundled light/dark AdminLTE skins. ============================================================================ */ /* Self-hosted Inter (variable, latin + cyrillic) — same woff2 files as the main site (solenoxproject.net), so the LK and the site render REAL Inter identically (no Segoe fallback, no Google Fonts → СНГ-safe). --sx-font references 'Inter'. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/inter-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } :root { --sx-bg: #14111F; --sx-panel: #16121F; --sx-card: #241E36; --sx-field: #2A2440; --sx-border: #3A3357; --sx-accent: #8B5CF6; --sx-accent-hover: #7C3AED; --sx-accent-press: #6D28D9; --sx-accent-light: #A78BFA; --sx-grad-from: #8B5CF6; --sx-grad-to: #A855F7; --sx-text: #FFFFFF; --sx-muted: #C9C2DE; --sx-error: #F87171; --sx-ok: #34D399; --sx-warn: #FBBF24; --sx-radius: 12px; --sx-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* ─── Base ──────────────────────────────────────────────────────────────── */ html, body, body.dark-mode, body.hold-transition { background-color: var(--sx-bg) !important; color: var(--sx-text) !important; font-family: var(--sx-font) !important; } .wrapper { background-color: var(--sx-bg) !important; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--sx-text) !important; } p, span, label, li, td, th, dt, dd, small { color: inherit; } .text-muted, .text-secondary, small.text-muted { color: var(--sx-muted) !important; } .text-primary { color: var(--sx-accent) !important; } .text-danger { color: var(--sx-error) !important; } .text-success { color: var(--sx-ok) !important; } .text-warning { color: var(--sx-warn) !important; } hr { border-color: var(--sx-border) !important; } a { color: var(--sx-accent); } a:hover, a:focus { color: var(--sx-accent-light); } /* ─── Navbar (top header) ───────────────────────────────────────────────── */ .main-header.navbar, .navbar-white, .navbar-light, .navbar-dark, .main-header.navbar-expand { background-color: var(--sx-panel) !important; border-bottom: 1px solid var(--sx-border) !important; } .main-header .nav-link, .main-header .navbar-nav .nav-link { color: var(--sx-muted) !important; } .main-header .nav-link:hover { color: var(--sx-text) !important; } .navbar-badge { background-color: var(--sx-accent) !important; } /* ─── Sidebar ───────────────────────────────────────────────────────────── */ .main-sidebar, .sidebar-dark-primary, .sidebar-light-primary, .sidebar-dark-purple, .sidebar-mini .main-sidebar { background-color: var(--sx-panel) !important; border-right: 1px solid var(--sx-border) !important; } .main-sidebar .brand-link { background-color: var(--sx-panel) !important; border-bottom: 1px solid var(--sx-border) !important; color: var(--sx-text) !important; } .sidebar .nav-header { color: var(--sx-muted) !important; text-transform: uppercase; letter-spacing: .6px; font-size: .72rem; opacity: .8; } .sidebar .nav-sidebar .nav-link { color: var(--sx-muted) !important; border-radius: 8px; } .sidebar .nav-sidebar .nav-link .nav-icon { color: var(--sx-muted) !important; } .sidebar .nav-sidebar .nav-link:hover { background-color: rgba(139, 92, 246, .12) !important; color: var(--sx-text) !important; } .sidebar .nav-sidebar .nav-link:hover .nav-icon { color: var(--sx-accent-light) !important; } .sidebar .nav-sidebar > .nav-item > .nav-link.active, .nav-pills .nav-link.active { background: linear-gradient(135deg, var(--sx-grad-from), var(--sx-grad-to)) !important; color: #fff !important; box-shadow: 0 2px 10px rgba(139, 92, 246, .35); } .sidebar .nav-sidebar > .nav-item > .nav-link.active .nav-icon { color: #fff !important; } /* user-panel (sidebar head) */ .user-panel { border-bottom: 1px solid var(--sx-border) !important; } .user-panel .info a, .user-panel [data-mark="nickname"] { color: var(--sx-text) !important; } .user-panel .image .bs-avatar, .user-panel img { border: 2px solid var(--sx-accent) !important; border-radius: 8px; background: var(--sx-card); } /* ─── Content area ──────────────────────────────────────────────────────── */ .content-wrapper { background-color: var(--sx-bg) !important; } .content-header h1, .content-header .m-0 { color: var(--sx-text) !important; } .breadcrumb { background: transparent !important; } .breadcrumb-item, .breadcrumb-item a { color: var(--sx-muted) !important; } /* ─── Cards / boxes ─────────────────────────────────────────────────────── */ .card, .box, .info-box, .small-box, .callout { background-color: var(--sx-card) !important; border: 1px solid var(--sx-border) !important; border-radius: var(--sx-radius) !important; color: var(--sx-text) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, .25) !important; } .card-header, .box-header { background-color: transparent !important; border-bottom: 1px solid var(--sx-border) !important; color: var(--sx-text) !important; } .card-title, .box-title { color: var(--sx-text) !important; font-weight: 600; } .card-footer, .box-footer { background-color: transparent !important; border-top: 1px solid var(--sx-border) !important; } .card.card-primary, .card.card-outline.card-primary { border-top-color: var(--sx-accent) !important; } .card.card-primary > .card-header { background: transparent !important; } .card-tools .btn-tool { color: var(--sx-muted) !important; } /* AdminLTE accent card variants -> our accent */ .card-outline.card-maroon, .card-outline.card-info, .card-outline.card-secondary, .card-primary:not(.card-outline) > .card-header { border-color: var(--sx-border) !important; } /* ─── Tables ────────────────────────────────────────────────────────────── */ .table { color: var(--sx-text) !important; } .table thead th { border-bottom: 2px solid var(--sx-border) !important; color: var(--sx-muted) !important; } .table td, .table th { border-top: 1px solid var(--sx-border) !important; } .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, .03) !important; } .table-hover tbody tr:hover { background-color: rgba(139, 92, 246, .10) !important; color: var(--sx-text) !important; } /* ─── Forms ─────────────────────────────────────────────────────────────── */ .form-control, .custom-select, textarea, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], select, .form-input, .input-group-text { background-color: var(--sx-field) !important; border: 1px solid var(--sx-border) !important; color: var(--sx-text) !important; border-radius: 8px !important; } .form-control:focus, .custom-select:focus, textarea:focus, select:focus, .form-input:focus { border-color: var(--sx-accent) !important; box-shadow: 0 0 0 .15rem rgba(139, 92, 246, .30) !important; background-color: var(--sx-field) !important; color: var(--sx-text) !important; } .form-control::placeholder, textarea::placeholder { color: var(--sx-muted) !important; opacity: .65; } .input-group-text { color: var(--sx-muted) !important; } .custom-control-label { color: var(--sx-text) !important; } .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--sx-accent) !important; border-color: var(--sx-accent) !important; } label { color: var(--sx-text) !important; } /* ─── Buttons ───────────────────────────────────────────────────────────── */ .btn { border-radius: 8px !important; font-weight: 600; } .btn-primary, .btn.btn-primary { background: linear-gradient(135deg, var(--sx-grad-from), var(--sx-grad-to)) !important; border: none !important; color: #fff !important; box-shadow: 0 2px 10px rgba(139, 92, 246, .30); } .btn-primary:hover, .btn-primary:focus { background: linear-gradient(135deg, var(--sx-accent-hover), var(--sx-accent)) !important; color: #fff !important; } .btn-primary:active, .btn-primary:disabled { background: var(--sx-accent-press) !important; } .btn-secondary, .btn-default { background-color: var(--sx-field) !important; border: 1px solid var(--sx-border) !important; color: var(--sx-text) !important; } .btn-secondary:hover, .btn-default:hover { background-color: var(--sx-card) !important; color: var(--sx-text) !important; } .btn-outline-primary { color: var(--sx-accent) !important; border-color: var(--sx-accent) !important; background: transparent !important; } .btn-outline-primary:hover { background-color: var(--sx-accent) !important; color: #fff !important; } .btn-outline-secondary { color: var(--sx-muted) !important; border-color: var(--sx-border) !important; } .btn-outline-secondary:hover { background-color: var(--sx-field) !important; color: var(--sx-text) !important; } .btn-danger { background-color: var(--sx-error) !important; border-color: var(--sx-error) !important; color: #1a0f0f !important; } .btn-outline-danger { color: var(--sx-error) !important; border-color: var(--sx-error) !important; } .btn-success { background-color: var(--sx-ok) !important; border-color: var(--sx-ok) !important; color: #04130d !important; } .btn-outline-success { color: var(--sx-ok) !important; border-color: var(--sx-ok) !important; } .btn-warning { background-color: var(--sx-warn) !important; border-color: var(--sx-warn) !important; color: #1a1404 !important; } .btn-info { background-color: var(--sx-accent) !important; border-color: var(--sx-accent) !important; color: #fff !important; } .btn-link { color: var(--sx-accent) !important; } /* ─── Badges ────────────────────────────────────────────────────────────── */ .badge { border-radius: 6px; } .badge-primary, .badge.bg-primary, .badge-info, .badge.bg-info { background-color: var(--sx-accent) !important; color: #fff !important; } .badge-secondary, .badge.bg-secondary { background-color: var(--sx-field) !important; color: var(--sx-muted) !important; } .badge-danger, .badge.bg-danger, .badge.bg-maroon { background-color: var(--sx-error) !important; color: #1a0f0f !important; } .badge-success, .badge.bg-success { background-color: var(--sx-ok) !important; color: #04130d !important; } .badge-warning, .badge.bg-warning { background-color: var(--sx-warn) !important; color: #1a1404 !important; } .badge-light, .badge.bg-light { background-color: var(--sx-field) !important; color: var(--sx-muted) !important; } /* ─── Alerts ────────────────────────────────────────────────────────────── */ .alert { border-radius: var(--sx-radius); border: 1px solid var(--sx-border); } .alert-success { background-color: rgba(52, 211, 153, .12) !important; border-color: var(--sx-ok) !important; color: var(--sx-ok) !important; } .alert-danger, .alert-error { background-color: rgba(248, 113, 113, .12) !important; border-color: var(--sx-error) !important; color: var(--sx-error) !important; } .alert-warning { background-color: rgba(251, 191, 36, .12) !important; border-color: var(--sx-warn) !important; color: var(--sx-warn) !important; } .alert-info { background-color: rgba(139, 92, 246, .12) !important; border-color: var(--sx-accent) !important; color: var(--sx-accent-light) !important; } /* ─── Dropdowns / modals / popovers ─────────────────────────────────────── */ .dropdown-menu { background-color: var(--sx-card) !important; border: 1px solid var(--sx-border) !important; border-radius: var(--sx-radius) !important; } .dropdown-item { color: var(--sx-text) !important; } .dropdown-item:hover { background-color: rgba(139, 92, 246, .14) !important; color: var(--sx-text) !important; } .dropdown-divider { border-color: var(--sx-border) !important; } .modal-content { background-color: var(--sx-card) !important; border: 1px solid var(--sx-border) !important; border-radius: var(--sx-radius) !important; color: var(--sx-text) !important; } .modal-header, .modal-footer { border-color: var(--sx-border) !important; } .close, .modal .close { color: var(--sx-muted) !important; text-shadow: none; opacity: .8; } .popover, .tooltip-inner { background-color: var(--sx-card) !important; color: var(--sx-text) !important; border: 1px solid var(--sx-border) !important; } /* ─── Misc components ───────────────────────────────────────────────────── */ .nav-tabs { border-bottom: 1px solid var(--sx-border) !important; } .nav-tabs .nav-link { color: var(--sx-muted) !important; border-radius: 8px 8px 0 0; } .nav-tabs .nav-link.active { background-color: var(--sx-card) !important; color: var(--sx-text) !important; border-color: var(--sx-border) var(--sx-border) var(--sx-card) !important; } .list-group-item { background-color: var(--sx-card) !important; border-color: var(--sx-border) !important; color: var(--sx-text) !important; } .pagination .page-link { background-color: var(--sx-card) !important; border-color: var(--sx-border) !important; color: var(--sx-muted) !important; } .pagination .page-item.active .page-link { background-color: var(--sx-accent) !important; border-color: var(--sx-accent) !important; color: #fff !important; } .progress { background-color: var(--sx-field) !important; } .progress-bar { background-color: var(--sx-accent) !important; } .main-footer { background-color: var(--sx-panel) !important; border-top: 1px solid var(--sx-border) !important; color: var(--sx-muted) !important; } .main-footer a { color: var(--sx-accent) !important; } /* Spectre.css fallbacks (used by some Vue widgets) */ .toast { background-color: var(--sx-card) !important; border-color: var(--sx-border) !important; color: var(--sx-text) !important; } .chip { background-color: var(--sx-field) !important; color: var(--sx-text) !important; } .menu { background-color: var(--sx-card) !important; border: 1px solid var(--sx-border) !important; } .menu .menu-item > a:hover { background-color: rgba(139, 92, 246, .14) !important; color: var(--sx-text) !important; } /* Custom scrollbar — subtle purple */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--sx-panel); } ::-webkit-scrollbar-thumb { background: var(--sx-border); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: var(--sx-accent-press); } /* ─── Login / auth pages ────────────────────────────────────────────────── */ body.login-page, .login-page, .register-page, .hold-transition.login-page { background-color: var(--sx-bg) !important; background-image: none !important; } .login-box, .register-box { width: 400px; max-width: 92%; } .login-card-body, .register-card-body { background-color: var(--sx-card) !important; border: 1px solid var(--sx-border) !important; border-radius: var(--sx-radius) !important; color: var(--sx-text) !important; box-shadow: 0 8px 40px rgba(0, 0, 0, .45) !important; } .login-box-msg, .register-box-msg { color: var(--sx-muted) !important; } /* ─── Brand wordmark + amethyst cube + chromatic aberration ─────────────── */ .login-logo a, .brand-link .brand-text { font-family: var(--sx-font) !important; font-weight: 800 !important; letter-spacing: .4px; color: var(--sx-text) !important; position: relative; } /* amethyst cube before the wordmark */ .login-logo a::before, .brand-link .brand-text::before { content: ''; display: inline-block; width: 1em; height: 1em; margin-right: .42em; vertical-align: -0.16em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 L21 7 L12 12 L3 7 Z' fill='%23A78BFA'/%3E%3Cpath d='M3 7 L12 12 L12 22 L3 17 Z' fill='%237C3AED'/%3E%3Cpath d='M21 7 L12 12 L12 22 L21 17 Z' fill='%236D28D9'/%3E%3C/svg%3E") center / contain no-repeat; } /* subtle static chromatic aberration on the wordmark text */ .brand-link .brand-text { text-shadow: -0.6px 0 rgba(248, 113, 113, .45), 0.6px 0 rgba(96, 165, 250, .45); } /* login logo: a touch stronger + a very slow, gentle ambient drift */ .login-logo a { font-size: 1.9rem; text-shadow: -0.8px 0 rgba(248, 113, 113, .5), 0.8px 0 rgba(96, 165, 250, .5); animation: sx-aberration 7s ease-in-out infinite; } .login-logo a:hover { animation-duration: 2.2s; } @keyframes sx-aberration { 0%, 100% { text-shadow: -0.7px 0 rgba(248, 113, 113, .42), 0.7px 0 rgba(96, 165, 250, .42); } 50% { text-shadow: -1.4px 0 rgba(248, 113, 113, .55), 1.4px 0 rgba(96, 165, 250, .55); } } @media (prefers-reduced-motion: reduce) { .login-logo a { animation: none; } } /* ─── Stage 2 + fixes: declutter ────────────────────────────────────────── */ /* NOTE: the storage-usage widget (#usage-box) and the "Powered by Blessing Skin" footer (#copyright-text) are no longer CSS-hidden — they are removed for real: the dashboard that carries #usage-box is redirected to /user/player (so it never renders), and shared/copyright.twig is overridden to drop the powered-by notice. See view-overrides/shared/copyright.twig + RedirectHome. */ /* ─── Stage 3: topbar layout (sidebar removed) ──────────────────────────── */ /* Full-width content — no sidebar offset (belt-and-suspenders with layout-top-nav). */ .content-wrapper { margin-left: 0 !important; } .main-sidebar, .sidebar-mini .main-sidebar { display: none !important; } .main-footer { margin-left: 0 !important; } /* Topbar */ .main-header.solenox-topbar { background-color: var(--sx-panel) !important; border-bottom: 1px solid var(--sx-border) !important; padding-left: 1rem; padding-right: 1rem; } .solenox-topbar .navbar-nav .nav-link { color: var(--sx-muted) !important; } .solenox-topbar .navbar-nav .nav-link:hover { color: var(--sx-text) !important; } .solenox-topbar .bs-avatar { border: 2px solid var(--sx-accent); border-radius: 8px; } /* Brand (cube + wordmark + chromatic aberration) in the topbar left corner */ .solenox-brand { display: inline-flex; align-items: center; } .solenox-brand .brand-text { font-family: var(--sx-font) !important; font-weight: 800 !important; letter-spacing: .4px; color: var(--sx-text) !important; font-size: 1.2rem; text-shadow: -0.6px 0 rgba(248, 113, 113, .45), 0.6px 0 rgba(96, 165, 250, .45); } .solenox-brand .brand-text::before { content: ''; display: inline-block; width: 1em; height: 1em; margin-right: .42em; vertical-align: -0.16em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 L21 7 L12 12 L3 7 Z' fill='%23A78BFA'/%3E%3Cpath d='M3 7 L12 12 L12 22 L3 17 Z' fill='%237C3AED'/%3E%3Cpath d='M21 7 L12 12 L12 22 L21 17 Z' fill='%236D28D9'/%3E%3C/svg%3E") center / contain no-repeat; } /* ─── /panel horizontal tabs (replaces the panel sidebar nav) ────────────── */ .solenox-panel-tabs { border-bottom: 1px solid var(--sx-border) !important; flex-wrap: wrap; } .solenox-panel-tabs .nav-link { color: var(--sx-muted) !important; border: 1px solid transparent !important; border-radius: 8px 8px 0 0 !important; margin-right: 2px; } .solenox-panel-tabs .nav-link:hover { color: var(--sx-text) !important; background: rgba(139, 92, 246, .10) !important; } .solenox-panel-tabs .nav-link.active { background: linear-gradient(135deg, var(--sx-grad-from), var(--sx-grad-to)) !important; color: #fff !important; border-color: transparent !important; } /* ─── Polish pass ────────────────────────────────────────────────────────── */ /* #1 3D-preview controls — rename / reset-texture / delete (+ the 2D/3D switch) render directly in the viewer's .card-footer (Viewer.tsx renders {children} right after the colour swatches) with no spacing, so they touch. Give each a little horizontal + vertical room so they breathe and wrap cleanly. The colour swatches are .btn-color (not .btn) so they are untouched. */ #previewer .card-footer > .btn { margin-right: .5rem; margin-bottom: .4rem; } #previewer .card-footer > .btn:last-child { margin-right: 0; } /* #3 Topbar dropdowns (avatar menu / notifications / dark-mode): soft fade + slide instead of an instant pop. Bootstrap 4 flips display none<->block, so we keep the menu rendered but inert (visibility + pointer-events) and animate opacity + margin-top. margin-top drives the slide because Popper writes `transform` inline on .show, which would beat a CSS transform. ~180ms ease, like the launcher's LangDropdown. */ .solenox-topbar .dropdown-menu { display: block; opacity: 0; visibility: hidden; margin-top: 0; pointer-events: none; transition: opacity .18s ease, margin-top .18s ease, visibility 0s linear .18s; } .solenox-topbar .dropdown-menu.show { opacity: 1; visibility: visible; margin-top: .4rem; pointer-events: auto; transition: opacity .18s ease, margin-top .18s ease, visibility 0s; } @media (prefers-reduced-motion: reduce) { .solenox-topbar .dropdown-menu { transition: none; } } /* #4 Player page — the selector (left, #players-list) and the 3D preview (right, #previewer) are two md-6 columns of one row. The first attempt used `.row:has(> .col-md-6 > #players-list)`, but :has() is silently dropped by older browser engines (e.g. Firefox <121), so the rule never applied and on a narrow window (<768px) the md-6 columns stacked → preview below selector. Fix: a plain wrapper class (.solenox-player-grid, added in our player.twig override) + explicit forced flex — no :has(), survives any viewport and any grid-CSS conflict. Two equal columns, side by side, tops aligned. */ .solenox-player-grid > .row { display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; /* #5: equal-height columns */ } .solenox-player-grid > .row > [class*="col-"] { display: flex !important; /* let the column's content stretch down */ flex-direction: column !important; flex: 1 1 0 !important; max-width: none !important; min-width: 0 !important; } /* #5 The 3D-preview card grows to the FULL height of the left column (which stacks several widgets); the canvas area fills the extra space and keeps the 3D model centred. Height flows down: column → #previewer → mount div → card → canvas wrapper (.p-0). */ .solenox-player-grid #previewer { flex: 1 1 auto; display: flex; min-height: 0; } .solenox-player-grid #previewer > div { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; width: 100%; } .solenox-player-grid #previewer > div > .card { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } .solenox-player-grid #previewer > div > .card > .p-0 { flex: 1 1 auto; min-height: 300px; } /* phones: let the two columns stack again */ @media (max-width: 575.98px) { .solenox-player-grid > .row { flex-wrap: wrap !important; } .solenox-player-grid > .row > [class*="col-"] { flex-basis: 100% !important; } .solenox-player-grid #previewer > div > .card { height: auto; } } /* #3 Purple top-stripe on the 3D-preview card so it matches the accent border of the left-column LK widgets (.card-outline.card-primary). Applies on the Profile page AND the upload page (both portal a Viewer into #previewer). */ #previewer .card { border-top: 3px solid var(--sx-accent) !important; } /* #2 Upload page — segmented model toggle (Classic / Slim) + drag-and-drop file zone, purple-minimal, consistent with the LK cards. */ .solenox-segment { display: inline-flex; border: 1px solid var(--sx-border); border-radius: 8px; overflow: hidden; } .solenox-segment > button { background: var(--sx-field); color: var(--sx-muted); border: none; padding: .45rem 1.5rem; font-weight: 600; cursor: pointer; transition: background .15s ease, color .15s ease; } .solenox-segment > button + button { border-left: 1px solid var(--sx-border); } .solenox-segment > button:hover { color: var(--sx-text); } .solenox-segment > button.active { background: linear-gradient(135deg, var(--sx-grad-from), var(--sx-grad-to)); color: #fff; } .solenox-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; padding: 1.75rem 1rem; text-align: center; cursor: pointer; border: 2px dashed var(--sx-border); border-radius: var(--sx-radius); background: rgba(139, 92, 246, .04); color: var(--sx-muted); transition: border-color .15s ease, background .15s ease, color .15s ease; } .solenox-dropzone:hover, .solenox-dropzone.over { border-color: var(--sx-accent); background: rgba(139, 92, 246, .10); color: var(--sx-text); } .solenox-dropzone.has-file { border-style: solid; border-color: var(--sx-accent); color: var(--sx-text); } .solenox-dropzone .dz-icon { font-size: 1.8rem; color: var(--sx-accent-light); } .solenox-dropzone .dz-text { font-weight: 600; word-break: break-all; }