forked from hesabix/arc
325 lines
6.5 KiB
CSS
325 lines
6.5 KiB
CSS
/* فونتهای محلی — همان خانوادهٔ Flutter (YekanBakhFaNum / Roboto)
|
|
WOFF2 برای مسیر بحرانی؛ font-display:swap تا متن با فونت سیستم دیده شود. */
|
|
@font-face {
|
|
font-family: 'YekanBakhFaNum';
|
|
src: url('fonts/YekanBakhFaNum-Regular.woff2') format('woff2');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'YekanBakhFaNum';
|
|
src: url('fonts/YekanBakhFaNum-SemiBold.woff2') format('woff2');
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'YekanBakhFaNum';
|
|
src: url('fonts/YekanBakhFaNum-Bold.woff2') format('woff2');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Roboto';
|
|
src: url('fonts/roboto.woff2') format('woff2');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
:root {
|
|
--brand: #0F4C81;
|
|
--brand-soft: rgba(15, 76, 129, 0.14);
|
|
}
|
|
|
|
html[data-loader-theme='light'] {
|
|
--loader-bg: #f6f8fc;
|
|
--loader-fg: #0f1c2e;
|
|
--loader-muted: #5a6d82;
|
|
--loader-logo-bg: #ffffff;
|
|
--loader-logo-shadow: 0 8px 32px rgba(15, 76, 129, 0.1);
|
|
--loader-track: rgba(15, 76, 129, 0.1);
|
|
--loader-fill: #0F4C81;
|
|
--loader-quote-bg: rgba(15, 76, 129, 0.06);
|
|
}
|
|
|
|
html[data-loader-theme='dark'] {
|
|
--loader-bg: #0a1018;
|
|
--loader-fg: #eef3f9;
|
|
--loader-muted: #9aadc0;
|
|
--loader-logo-bg: rgba(255, 255, 255, 0.06);
|
|
--loader-logo-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
|
|
--loader-track: rgba(255, 255, 255, 0.1);
|
|
--loader-fill: #4a9fd4;
|
|
--loader-quote-bg: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
overflow: hidden;
|
|
background: var(--loader-bg);
|
|
min-height: var(--app-height, 100vh);
|
|
}
|
|
|
|
html[lang='fa'] body,
|
|
html[dir='rtl'] body {
|
|
font-family: 'YekanBakhFaNum', Tahoma, sans-serif;
|
|
}
|
|
|
|
html[lang='en'] body,
|
|
html[dir='ltr'] body {
|
|
font-family: 'Roboto', 'Segoe UI', sans-serif;
|
|
}
|
|
|
|
body.flutter-ready {
|
|
overflow: auto;
|
|
background: #fff;
|
|
}
|
|
|
|
@supports (height: 100dvh) {
|
|
body { min-height: 100dvh; }
|
|
}
|
|
|
|
flt-glass-pane, flt-scene-host {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
}
|
|
|
|
#flutter-loading-screen {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 9999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 24px;
|
|
box-sizing: border-box;
|
|
background: var(--loader-bg);
|
|
transition: opacity 0.38s ease, visibility 0.38s ease;
|
|
}
|
|
|
|
html[lang='fa'] #flutter-loading-screen,
|
|
html[dir='rtl'] #flutter-loading-screen {
|
|
font-family: 'YekanBakhFaNum', Tahoma, sans-serif;
|
|
}
|
|
|
|
html[lang='en'] #flutter-loading-screen,
|
|
html[dir='ltr'] #flutter-loading-screen {
|
|
font-family: 'Roboto', 'Segoe UI', sans-serif;
|
|
}
|
|
|
|
#flutter-loading-screen.hidden {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.loader-center {
|
|
width: min(100%, 300px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.loader-logo-wrap {
|
|
width: 76px;
|
|
height: 76px;
|
|
margin-bottom: 28px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 20px;
|
|
background: var(--loader-logo-bg);
|
|
box-shadow: var(--loader-logo-shadow);
|
|
border: 1px solid var(--brand-soft);
|
|
}
|
|
|
|
.loader-logo {
|
|
width: 44px;
|
|
height: 44px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
/* رنگآمیزی لوگوی روشن با primary تم (حالت light) */
|
|
.loader-logo-wrap.loader-logo-wrap--tinted {
|
|
position: relative;
|
|
}
|
|
|
|
.loader-logo-wrap.loader-logo-wrap--tinted::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 16px;
|
|
background-color: var(--loader-logo-tint, var(--brand));
|
|
-webkit-mask: url('images/logo-light.png') center / contain no-repeat;
|
|
mask: url('images/logo-light.png') center / contain no-repeat;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.loader-title {
|
|
margin: 0;
|
|
color: var(--loader-fg);
|
|
font-size: 1.375rem;
|
|
font-weight: 600;
|
|
letter-spacing: -0.01em;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.loader-tagline {
|
|
margin: 10px 0 0;
|
|
color: var(--loader-muted);
|
|
font-size: 0.875rem;
|
|
font-weight: 400;
|
|
line-height: 1.55;
|
|
max-width: 260px;
|
|
}
|
|
|
|
.loader-progress-block {
|
|
width: 100%;
|
|
margin-top: 36px;
|
|
}
|
|
|
|
.loader-progress-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-bottom: 10px;
|
|
min-height: 1.2em;
|
|
}
|
|
|
|
.loader-step {
|
|
color: var(--loader-muted);
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.loader-step:empty {
|
|
display: none;
|
|
}
|
|
|
|
.loader-percent {
|
|
color: var(--loader-fill);
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.loader-percent:empty {
|
|
display: none;
|
|
}
|
|
|
|
.loader-progress-track {
|
|
width: 100%;
|
|
height: 3px;
|
|
border-radius: 999px;
|
|
background: var(--loader-track);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.loader-progress-bar {
|
|
height: 100%;
|
|
width: 0%;
|
|
border-radius: inherit;
|
|
background: var(--loader-fill);
|
|
transition: width 0.22s ease-out;
|
|
}
|
|
|
|
.loader-progress-track.is-indeterminate .loader-progress-bar {
|
|
width: 32% !important;
|
|
animation: loaderSlide 1.1s ease-in-out infinite;
|
|
}
|
|
|
|
.loader-status {
|
|
margin: 14px 0 0;
|
|
color: var(--loader-muted);
|
|
font-size: 0.8125rem;
|
|
font-weight: 400;
|
|
min-height: 1.25em;
|
|
}
|
|
|
|
.loader-spinner {
|
|
width: 28px;
|
|
height: 28px;
|
|
margin-top: 20px;
|
|
border: 2px solid var(--loader-track);
|
|
border-top-color: var(--loader-fill);
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
.loader-spinner[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
#flutter-loading-screen.has-definite-progress .loader-spinner {
|
|
display: none !important;
|
|
}
|
|
|
|
.loader-quote {
|
|
display: none;
|
|
margin: 20px 0 0;
|
|
padding: 12px 14px;
|
|
border-radius: 12px;
|
|
background: var(--loader-quote-bg);
|
|
color: var(--loader-muted);
|
|
font-size: 0.78rem;
|
|
line-height: 1.65;
|
|
max-width: 280px;
|
|
}
|
|
|
|
#flutter-loading-screen.is-slow .loader-quote {
|
|
display: block;
|
|
}
|
|
|
|
#loader-retry-wrap {
|
|
margin-top: 18px;
|
|
}
|
|
|
|
#loader-retry-wrap[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
#loader-retry-btn {
|
|
background: transparent;
|
|
border: 1px solid var(--brand-soft);
|
|
color: var(--loader-muted);
|
|
border-radius: 10px;
|
|
padding: 8px 18px;
|
|
font: inherit;
|
|
font-size: 0.8125rem;
|
|
cursor: pointer;
|
|
transition: border-color 0.15s, color 0.15s;
|
|
}
|
|
|
|
#loader-retry-btn:hover {
|
|
border-color: var(--brand);
|
|
color: var(--brand);
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes loaderSlide {
|
|
0% { transform: translateX(-120%); }
|
|
100% { transform: translateX(380%); }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
#flutter-loading-screen { transition: none; }
|
|
.loader-spinner,
|
|
.loader-progress-track.is-indeterminate .loader-progress-bar {
|
|
animation: none;
|
|
}
|
|
}
|