s.esmaeiliandCursor
3add0683b3
Switch the customer app to IRANSans, restyle home featured/newest and cart note sheet, refresh brand icons across apps, and add the PWA install prompt. Co-authored-by: Cursor <cursoragent@cursor.com>
795 lines
19 KiB
Plaintext
795 lines
19 KiB
Plaintext
@import './fonts.less';
|
|
/*@font-face {
|
|
font-family: iranyekan;
|
|
font-style: normal;
|
|
font-weight: bold;
|
|
src: url('iranyekan_fonts/eot/iranyekanwebboldfanum.eot');
|
|
src: url('iranyekan_fonts/eot/iranyekanwebboldfanum.eot?#iefix') format('embedded-opentype'), !* IE6-8 *!
|
|
url('iranyekan_fonts/woff/iranyekanwebboldfanum.woff') format('woff'), !* FF3.6+, IE9, Chrome6+, Saf5.1+*!
|
|
url('iranyekan_fonts/ttf/iranyekanwebboldfanum.ttf') format('truetype');
|
|
}
|
|
|
|
|
|
@font-face {
|
|
font-family: iranyekan;
|
|
font-style: normal;
|
|
font-weight: 100;
|
|
src: url('iranyekan_fonts/eot/iranyekanwebthinfanum.eot');
|
|
src: url('iranyekan_fonts/eot/iranyekanwebthinfanum.eot?#iefix') format('embedded-opentype'), !* IE6-8 *!
|
|
url('iranyekan_fonts/woff/iranyekanwebthinfanum.woff') format('woff'), !* FF3.6+, IE9, Chrome6+, Saf5.1+*!
|
|
url('iranyekan_fonts/ttf/iranyekanwebthinfanum.ttf') format('truetype');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: iranyekan;
|
|
font-style: normal;
|
|
font-weight: 300;
|
|
src: url('iranyekan_fonts/eot/iranyekanweblightfanum.eot');
|
|
src: url('iranyekan_fonts/eot/iranyekanweblightfanum.eot?#iefix') format('embedded-opentype'), !* IE6-8 *!
|
|
url('iranyekan_fonts/woff/iranyekanweblightfanum.woff') format('woff'), !* FF3.6+, IE9, Chrome6+, Saf5.1+*!
|
|
url('iranyekan_fonts/ttf/iranyekanweblightfanum.ttf') format('truetype');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: iranyekan;
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
src: url('iranyekan_fonts/eot/iranyekanwebregularfanum.eot');
|
|
src: url('iranyekan_fonts/eot/iranyekanwebregularfanum.eot?#iefix') format('embedded-opentype'), !* IE6-8 *!
|
|
url('iranyekan_fonts/woff/iranyekanwebregularfanum.woff') format('woff'), !* FF3.6+, IE9, Chrome6+, Saf5.1+*!
|
|
url('iranyekan_fonts/ttf/iranyekanwebregularfanum.ttf') format('truetype');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: iranyekan;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
src: url('iranyekan_fonts/eot/iranyekanwebmediumfanum.eot');
|
|
src: url('iranyekan_fonts/eot/iranyekanwebmediumfanum.eot?#iefix') format('embedded-opentype'), !* IE6-8 *!
|
|
url('iranyekan_fonts/woff/iranyekanwebmediumfanum.woff') format('woff'), !* FF3.6+, IE9, Chrome6+, Saf5.1+*!
|
|
url('iranyekan_fonts/ttf/iranyekanwebmediumfanum.ttf') format('truetype');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: iranyekan;
|
|
font-style: normal;
|
|
font-weight: 800;
|
|
src: url('iranyekan_fonts/eot/iranyekanwebextraboldfanum.eot');
|
|
src: url('iranyekan_fonts/eot/iranyekanwebextraboldfanum.eot?#iefix') format('embedded-opentype'), !* IE6-8 *!
|
|
url('iranyekan_fonts/woff/iranyekanwebextraboldfanum.woff') format('woff'), !* FF3.6+, IE9, Chrome6+, Saf5.1+*!
|
|
url('iranyekan_fonts/ttf/iranyekanwebextraboldfanum.ttf') format('truetype');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: iranyekan;
|
|
font-style: normal;
|
|
font-weight: 850;
|
|
src: url('iranyekan_fonts/eot/iranyekanwebblackfanum.eot');
|
|
src: url('iranyekan_fonts/eot/iranyekanwebblackfanum.eot?#iefix') format('embedded-opentype'), !* IE6-8 *!
|
|
url('iranyekan_fonts/woff/iranyekanwebblackfanum.woff') format('woff'), !* FF3.6+, IE9, Chrome6+, Saf5.1+*!
|
|
url('iranyekan_fonts/ttf/iranyekanwebblackfanum.ttf') format('truetype');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: iranyekan;
|
|
font-style: normal;
|
|
font-weight: 900;
|
|
src: url('iranyekan_fonts/eot/iranyekanwebextrablackfanum.eot');
|
|
src: url('iranyekan_fonts/eot/iranyekanwebextrablackfanum.eot?#iefix') format('embedded-opentype'), !* IE6-8 *!
|
|
url('iranyekan_fonts/woff/iranyekanwebextrablackfanum.woff') format('woff'), !* FF3.6+, IE9, Chrome6+, Saf5.1+*!
|
|
url('iranyekan_fonts/ttf/iranyekanwebextrablackfanum.ttf') format('truetype');
|
|
}*/
|
|
|
|
/*.iranyekan{
|
|
font-family: iranyekan , arial, helvetica, sans-serif !important;
|
|
}*/
|
|
|
|
/////////////////////////////////
|
|
/*@font-face {
|
|
font-family: yekan_bakh;
|
|
font-style: normal;
|
|
font-weight: 100;
|
|
src: url('fonts/woff/yekan_bakh_fanum_thin.woff') format('woff'),
|
|
url('fonts/woff2/yekan_bakh_fanum_thin.woff2') format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: yekan_bakh;
|
|
font-style: normal;
|
|
font-weight: 300;
|
|
src: url('fonts/woff/yekan_bakh_fanum_light.woff') format('woff'),
|
|
url('fonts/woff2/yekan_bakh_fanum_light.woff2') format('woff2');
|
|
|
|
}
|
|
|
|
@font-face {
|
|
font-family: yekan_bakh;
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
src: url('fonts/woff/yekan_bakh_fanum_regular.woff') format('woff'),
|
|
url('fonts/woff2/yekan_bakh_fanum_regular.woff2') format('woff2');
|
|
|
|
}
|
|
|
|
@font-face {
|
|
font-family: yekan_bakh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
src: url('fonts/woff/yekan_bakh_fanum_semi_bold.woff') format('woff'),
|
|
url('fonts/woff2/yekan_bakh_fanum_semi_bold.woff2') format('woff2');
|
|
|
|
}
|
|
|
|
@font-face {
|
|
font-family: yekan_bakh;
|
|
font-style: normal;
|
|
font-weight: bold;
|
|
src: url('fonts/woff/yekan_bakh_fanum_bold.woff') format('woff'),
|
|
url('fonts/woff2/yekan_bakh_fanum_bold.woff2') format('woff2');
|
|
|
|
}
|
|
|
|
@font-face {
|
|
font-family: yekan_bakh;
|
|
font-style: normal;
|
|
font-weight: 800;
|
|
src: url('fonts/woff/yekan_bakh_fanum_extra_bold.woff') format('woff'),
|
|
url('fonts/woff2/yekan_bakh_fanum_extra_bold.woff2') format('woff2');
|
|
|
|
}
|
|
|
|
@font-face {
|
|
font-family: yekan_bakh;
|
|
font-style: normal;
|
|
font-weight: 900;
|
|
src: url('fonts/woff/yekan_bakh_fanum_black.woff') format('woff'),
|
|
url('fonts/woff2/yekan_bakh_fanum_black.woff2') format('woff2');
|
|
|
|
}
|
|
|
|
@font-face {
|
|
font-family: yekan_bakh;
|
|
font-style: normal;
|
|
font-weight: 950;
|
|
src: url('fonts/woff/yekan_bakh_fanum_extra_black.woff') format('woff'),
|
|
url('fonts/woff2/yekan_bakh_fanum_extra_black.woff2') format('woff2');
|
|
}
|
|
.yekan_bakh{
|
|
font-family: yekan_bakh , arial, helvetica, sans-serif
|
|
}*/
|
|
|
|
|
|
//////////////////////////////////
|
|
/*@font-face {
|
|
font-family: 'sedmedgh';
|
|
src: url("./font/ligth.ttf");
|
|
font-weight: 300;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'sedmedgh';
|
|
src: url("./font/regular.ttf");
|
|
font-weight: 400;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'sedmedgh';
|
|
src: url("./font/medium.ttf");
|
|
font-weight: 500;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'sedmedgh';
|
|
src: url("./font/bold.ttf");
|
|
font-weight: 600;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'sedmedgh';
|
|
src: url("./font/heavy.ttf");
|
|
font-weight: 700;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'sedmedgh';
|
|
src: url("./font/fat.ttf");
|
|
font-weight: 800;
|
|
}*/
|
|
|
|
///////////////////////////////////////////
|
|
|
|
//@font-face {
|
|
// font-family: 'sedmedgh';
|
|
// src: url("./font/iranekan/thin.ttf");
|
|
// font-weight: 300;
|
|
//}
|
|
//
|
|
//@font-face {
|
|
// font-family: 'sedmedgh';
|
|
// src: url("./font/iranekan/light.ttf");
|
|
// font-weight: 400;
|
|
//}
|
|
//
|
|
//@font-face {
|
|
// font-family: 'sedmedgh';
|
|
// src: url("./font/iranekan/regular.ttf");
|
|
// font-weight: 500;
|
|
//}
|
|
//
|
|
//@font-face {
|
|
// font-family: 'sedmedgh';
|
|
// src: url("./font/iranekan/medium.ttf");
|
|
// font-weight: 600;
|
|
//}
|
|
//
|
|
//@font-face {
|
|
// font-family: 'sedmedgh';
|
|
// src: url("./font/iranekan/bold.ttf");
|
|
// font-weight: 700;
|
|
//}
|
|
//
|
|
//@font-face {
|
|
// font-family: 'sedmedgh';
|
|
// src: url("./font/iranekan/heavy.ttf");
|
|
// font-weight: 800;
|
|
//}
|
|
//
|
|
//@font-face {
|
|
// font-family: 'sedmedgh';
|
|
// src: url("./font/iranekan/fat.ttf");
|
|
// font-weight: 900;
|
|
//}
|
|
//
|
|
///////////////////////////////////////
|
|
//
|
|
//
|
|
//
|
|
//@font-face {
|
|
// font-family: 'sedmedgh';
|
|
// src: url("./font/iranekan/light.ttf");
|
|
// font-weight: 300;
|
|
//}
|
|
//
|
|
//@font-face {
|
|
// font-family: 'sedmedgh';
|
|
// src: url("./font/iranekan/regular.ttf");
|
|
// font-weight: 400;
|
|
//}
|
|
//
|
|
//@font-face {
|
|
// font-family: 'sedmedgh';
|
|
// src: url("./font/iranekan/medium.ttf");
|
|
// font-weight: 500;
|
|
//}
|
|
//
|
|
//@font-face {
|
|
// font-family: 'sedmedgh';
|
|
// src: url("./font/iranekan/bold.ttf");
|
|
// font-weight: 600;
|
|
//}
|
|
//
|
|
//@font-face {
|
|
// font-family: 'sedmedgh';
|
|
// src: url("./font/iranekan/heavy.ttf");
|
|
// font-weight: 700;
|
|
//}
|
|
//
|
|
//@font-face {
|
|
// font-family: 'sedmedgh';
|
|
// src: url("./font/iranekan/fat.ttf");
|
|
// font-weight: 800;
|
|
//}
|
|
|
|
|
|
|
|
|
|
body, * {
|
|
font-family: iransans, yekan_bakh, sans-serif, tahoma;
|
|
//letter-spacing: 0px !important;
|
|
font-size: @font-size;
|
|
line-height: inherit;
|
|
font-weight: inherit;
|
|
}
|
|
|
|
|
|
|
|
.rtl {
|
|
direction: rtl !important;
|
|
}
|
|
|
|
.ltr {
|
|
direction: ltr !important;
|
|
}
|
|
|
|
.no-scrollbar {
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|
|
*{
|
|
.no-scrollbar;
|
|
}
|
|
// headings
|
|
h1, h2, h3, h4, h5, h6, h7, h8 {
|
|
margin-bottom: 1.2em;
|
|
color: @primary;
|
|
}
|
|
|
|
h1, .h1 {
|
|
font-size: @h1-font-size;
|
|
}
|
|
|
|
h2, .h2 {
|
|
font-size: @h2-font-size;
|
|
}
|
|
|
|
h3, .h3 {
|
|
font-size: @h3-font-size;
|
|
}
|
|
|
|
h4, .h4 {
|
|
font-size: @h4-font-size;
|
|
}
|
|
|
|
h5, .h5 {
|
|
font-size: @h5-font-size;
|
|
}
|
|
|
|
h6, .h6 {
|
|
font-size: @h6-font-size;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
html, body {
|
|
overscroll-behavior-y: contain;
|
|
}
|
|
|
|
.overflow-x-auto {
|
|
overscroll-behavior-x: contain;
|
|
}
|
|
|
|
.overflow-y-auto {
|
|
overscroll-behavior-y: contain;
|
|
}
|
|
|
|
input:focus-visible {
|
|
outline: none;
|
|
}
|
|
|
|
.@{prefix} {
|
|
&-form {
|
|
&.ant-form {
|
|
background: transparent !important;
|
|
color: @white !important;
|
|
}
|
|
|
|
.ant-btn-primary[disabled], .ant-btn-primary[disabled]:hover, .ant-btn-primary[disabled]:focus, .ant-btn-primary[disabled]:active {
|
|
background: alpha(@white, 20%);
|
|
color: alpha(@white, 50%);
|
|
border-color: transparent;
|
|
}
|
|
|
|
.ant-form-item {
|
|
label, input {
|
|
background: transparent !important;
|
|
color: @white !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-rounded-drawer {
|
|
background: transparent;
|
|
|
|
.ant-drawer-content-wrapper {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.ant-drawer-content {
|
|
background: transparent !important;;
|
|
}
|
|
&.bg-white .ant-drawer-body {
|
|
background: white;
|
|
border-radius: 15px 15px 0px 0px;
|
|
|
|
}
|
|
&.bg-primaryLighten .ant-drawer-body {
|
|
background: @primaryLighten;
|
|
border-radius: 30px 30px 0px 0px;
|
|
}
|
|
}
|
|
|
|
&-custom-scrollbar {
|
|
padding: 0 10px;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
/* Handle */
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background: transparent;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
/* Handle on hover */
|
|
|
|
&:hover::-webkit-scrollbar-thumb {
|
|
background: #ffffff80;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ant {
|
|
&-empty-image img{
|
|
object-fit: contain;
|
|
}
|
|
|
|
&-timeline-item-content {
|
|
margin: 0 26px 0 0;
|
|
}
|
|
|
|
&-timeline-item-tail {
|
|
left: unset;
|
|
right: 4px;
|
|
}
|
|
|
|
&-btn {
|
|
display: flex !important;
|
|
flex-direction: row-reverse;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
i {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
span {
|
|
font-weight: 600;
|
|
}
|
|
|
|
&-lg {
|
|
span {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
|
|
&-secondary,
|
|
&-secondary:hover,
|
|
&-secondary:focus {
|
|
border-color: @primary;
|
|
background: @primary;
|
|
color: @white;
|
|
|
|
&.ant-btn-background-ghost {
|
|
color: @primary;
|
|
border-color: @primary;
|
|
text-shadow: none;
|
|
}
|
|
}
|
|
|
|
&-light,
|
|
&-light:hover,
|
|
&-light:focus {
|
|
color: @primary;
|
|
border-color: @light;
|
|
background: @light;
|
|
}
|
|
}
|
|
|
|
&-form-vertical .ant-form-item-label, .ant-col-24.ant-form-item-label, .ant-col-xl-24.ant-form-item-label {
|
|
text-align: right !important;
|
|
|
|
}
|
|
//&-ant-form-item-label > label{
|
|
// font-size: 50px!important;
|
|
//}
|
|
&-tabs-tab + .ant-tabs-tab {
|
|
margin: 0 32px 0 0;
|
|
}
|
|
|
|
&-tabs > .ant-tabs-nav .ant-tabs-nav-wrap, .ant-tabs > div > .ant-tabs-nav .ant-tabs-nav-wrap {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
&-drawer-bottom.rtl {
|
|
.ant-drawer-body {
|
|
.no-scrollbar;
|
|
}
|
|
}
|
|
|
|
&-radio-button-wrapper {
|
|
border-left-width: 1.02px;
|
|
|
|
&:not(:first-child)::before {
|
|
left: unset;
|
|
right: -1px;
|
|
}
|
|
|
|
&:first-child {
|
|
border-radius: 0 5px 5px 0;
|
|
}
|
|
|
|
&:last-child {
|
|
border-radius: 5px 0 0 5px;
|
|
}
|
|
}
|
|
|
|
&-radio-group.flex {
|
|
display: flex !important;
|
|
|
|
.ant-radio-button-wrapper {
|
|
flex: 1 1 0%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 8px;
|
|
}
|
|
|
|
.before {
|
|
&\:mark:before {
|
|
@apply content;
|
|
width: 4px;
|
|
padding: .2rem;
|
|
@apply top-4;
|
|
//position: absolute;
|
|
right: 0;
|
|
height: 48px;
|
|
border-radius: 5px 0 0 5px;
|
|
background: @secondary;
|
|
color: @secondary;
|
|
}
|
|
&\:bullet {
|
|
font-size: 13px;
|
|
|
|
&:before {
|
|
@apply content;
|
|
height: 8px;
|
|
border-radius: 100%;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
&\:bg {
|
|
&-secondary:before {
|
|
@apply content;
|
|
background: @secondary;
|
|
}
|
|
|
|
&-primary:before {
|
|
@apply content;
|
|
background: @primary;
|
|
}
|
|
}
|
|
|
|
&\:text {
|
|
&-secondary:before {
|
|
content: '1';
|
|
color: @secondary;
|
|
}
|
|
|
|
&-primary:before {
|
|
content: '1';
|
|
color: @primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
.hide-counter {
|
|
.ant-input-number-handler-wrap {
|
|
visibility: hidden;
|
|
display: none;
|
|
}
|
|
}
|
|
.ant-select{
|
|
width: 100% !important;
|
|
.ant-select-selector{
|
|
height: 3rem !important;
|
|
align-items: center;
|
|
}
|
|
}
|
|
*:not(input) {
|
|
user-select: none; /* supported by Chrome and Opera */
|
|
-webkit-user-select: none; /* Safari */
|
|
-khtml-user-select: none; /* Konqueror HTML */
|
|
-moz-user-select: none; /* Firefox */
|
|
-ms-user-select: none; /* Internet Explorer/Edge */
|
|
}
|
|
|
|
.ant-empty-image img,.ant-empty-image{
|
|
width: 100%;
|
|
height: 40vh
|
|
}
|
|
|
|
// v-lazy images (vue3-lazyload sets lazy="loading" | "loaded" | "error").
|
|
// Hidden until the real file has loaded, then faded in, so a card never shows
|
|
// a placeholder that is then swapped out, or a photo painting in top-down.
|
|
img[lazy='loading'] {
|
|
opacity: 0;
|
|
}
|
|
|
|
img[lazy='loaded'],
|
|
img[lazy='error'] {
|
|
opacity: 1;
|
|
transition: opacity 0.35s ease;
|
|
}
|
|
|
|
// Shimmering placeholder block for content that is still loading.
|
|
.skeleton {
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: @hairlineSoft;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
transform: translateX(100%);
|
|
background: linear-gradient(90deg, transparent, alpha(@canvas, 65%), transparent);
|
|
animation: skeleton-sweep 1.3s ease-in-out infinite;
|
|
}
|
|
}
|
|
|
|
// RTL page, so the sweep runs right to left.
|
|
@keyframes skeleton-sweep {
|
|
to {
|
|
transform: translateX(-100%);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.skeleton::after {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
// First-paint entrance (driven by composables/useReveal.ts): put `reveal` on
|
|
// each section and `is-revealed` on their container once the data is in. Each
|
|
// section rises a little, scales up from just under full size and fades in,
|
|
// one beat (--reveal-delay) after the one above it.
|
|
//
|
|
// The curve is a long decelerate with no overshoot — it starts fast, settles
|
|
// slowly and never bounces back. The travel is deliberately small (14px, 2% of
|
|
// scale): the content should look like it was always there and simply came
|
|
// into focus, not like it flew in.
|
|
//
|
|
// The settled state is `transform: none`, not an identity transform: any
|
|
// transform left on a section would make it the containing block for fixed
|
|
// elements inside it and give it a permanent stacking context.
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translate3d(0, 14px, 0) scale(0.98);
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
.is-revealed .reveal {
|
|
opacity: 1;
|
|
transform: none;
|
|
will-change: auto;
|
|
transition:
|
|
opacity 0.62s cubic-bezier(0.32, 0.72, 0, 1) var(--reveal-delay, 0ms),
|
|
transform 0.62s cubic-bezier(0.32, 0.72, 0, 1) var(--reveal-delay, 0ms);
|
|
}
|
|
|
|
// Respect a reduced-motion preference: show the content, skip the choreography.
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.reveal {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
.is-revealed .reveal {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
/* ── Appearance: theme switch & reduced motion ─────────────────
|
|
Classes set on <html> by stores/appearanceStore.ts (and, before the bundle
|
|
loads, by the boot script in index.html). */
|
|
|
|
// One-frame guard while the palette flips: without it every element with a
|
|
// colour transition animates from the old theme to the new one at once.
|
|
html.theme-switching *,
|
|
html.theme-switching *::before,
|
|
html.theme-switching *::after {
|
|
transition: none !important;
|
|
}
|
|
|
|
// "Fast & light" mode. Not "no motion": the aim is speed without the app
|
|
// going dead, so
|
|
// - every transition still runs, capped at 120ms with no delay — taps still
|
|
// press, colours still change, sheets and pages still arrive, just quick;
|
|
// - keyframe animations run one near-instant iteration, so decorative loops
|
|
// (pulses, shimmers, illustration loops) stop at rest and one-shot reveals
|
|
// land in their final state;
|
|
// - backdrop blurs (recomputed every frame anything moves behind them) and
|
|
// permanent will-change layers are dropped;
|
|
// - .keep-motion opts working motion out: spinners, and the toast progress
|
|
// bar whose animationend is what closes the toast. vant's own <Loading>
|
|
// spinner is excluded by class.
|
|
html.motion-reduced :where(*:not(.keep-motion, .keep-motion *, .van-loading, .van-loading *)),
|
|
html.motion-reduced :where(*:not(.keep-motion, .keep-motion *, .van-loading, .van-loading *))::before,
|
|
html.motion-reduced :where(*:not(.keep-motion, .keep-motion *, .van-loading, .van-loading *))::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
animation-delay: 0s !important;
|
|
transition-duration: 0.12s !important;
|
|
transition-delay: 0s !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
|
|
html.motion-reduced *,
|
|
html.motion-reduced *::before,
|
|
html.motion-reduced *::after {
|
|
-webkit-backdrop-filter: none !important;
|
|
backdrop-filter: none !important;
|
|
will-change: auto !important;
|
|
}
|
|
|
|
// Glass that was only legible because of its blur gets a near-solid fill.
|
|
html.motion-reduced .tabbar__inner,
|
|
html.motion-reduced .toast {
|
|
background: alpha(@canvas, 97%) !important;
|
|
}
|
|
|
|
/* ── Dark theme: third-party surfaces ──────────────────────────
|
|
ant-design-vue compiles its theme at build time with black text
|
|
(fade(@black, 85%)) and white fills; only its surface backgrounds were
|
|
switched to the theme tokens (themeConfig.ts). The text and input chrome it
|
|
leaves light-only are covered here. vant follows on its own through the
|
|
.van-theme-dark class. */
|
|
html.theme-dark body {
|
|
color: @ink;
|
|
}
|
|
|
|
html.theme-dark {
|
|
.ant-input,
|
|
.ant-input-affix-wrapper,
|
|
.ant-input-number,
|
|
textarea.ant-input {
|
|
color: @ink;
|
|
background-color: @canvas;
|
|
border-color: @hairline;
|
|
}
|
|
.ant-input::placeholder,
|
|
textarea.ant-input::placeholder {
|
|
color: @inkFaint;
|
|
}
|
|
.ant-input-affix-wrapper > input.ant-input {
|
|
background-color: transparent;
|
|
}
|
|
.ant-form-item-label > label,
|
|
.ant-drawer-title,
|
|
.ant-spin-text {
|
|
color: @ink;
|
|
}
|
|
.ant-form-item-explain-error {
|
|
color: @red;
|
|
}
|
|
.ant-empty-description {
|
|
color: @inkFaint;
|
|
}
|
|
.ant-drawer-header {
|
|
border-bottom-color: @hairline;
|
|
}
|
|
.ant-slider-handle {
|
|
background-color: @canvas;
|
|
}
|
|
}
|
|
|
|
// Dark: the toast's frosted glass is mostly clear by design, which on a dark
|
|
// page leaves nothing to separate it from what scrolls beneath. Give it a
|
|
// near-solid card fill and a hairline edge instead.
|
|
html.theme-dark .toast {
|
|
background: alpha(@canvas, 94%) !important;
|
|
box-shadow:
|
|
inset 0 0 0 1px @hairline,
|
|
0 18px 40px -14px rgba(0, 0, 0, 0.6) !important;
|
|
}
|