s.esmaeiliandClaude Haiku 5.5
532ceee189
اپ: نام برند در همه‌ی صفحه‌ها و پیام‌ها یکسان شده و از یک تنظیم مرکزی خوانده می‌شود. اپ: کارت حسابداری در صفحه‌ی مشتری بازطراحی شد؛ مانده‌ها و وضعیت لینک واضح‌تر نمایش داده می‌شوند. پنل: کارت حسابداری در پرونده‌ی مشتری بازطراحی شد؛ مانده‌ها، آخرین ارسال و فرم لینک دستی واضح‌تر شده‌اند. پنل: ستون «کد» در جدول‌ها به‌طور پیش‌فرض پنهان است و از انتخاب ستون‌ها قابل نمایش است. پنل: تغییر نمایش ستون‌ها در جدول‌ها بلافاصله اعمال می‌شود. Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
780 lines
19 KiB
Plaintext
780 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
|
|
}
|
|
|
|
// Floating "island" bottom sheet: an ant Drawer (placement="bottom") that
|
|
// sits inset from the screen edges with rounded corners all round, instead
|
|
// of a full-width sheet glued to the bottom. Add `island-sheet` to the
|
|
// Drawer's class. Global because the drawer is teleported to <body>, out of
|
|
// reach of a view's scoped styles.
|
|
.ant-drawer-bottom.island-sheet {
|
|
--island-gap: 12px;
|
|
|
|
.ant-drawer-content-wrapper {
|
|
left: var(--island-gap);
|
|
right: var(--island-gap);
|
|
bottom: calc(var(--island-gap) + env(safe-area-inset-bottom, 0px));
|
|
width: auto !important;
|
|
max-width: 480px;
|
|
margin: 0 auto;
|
|
border-radius: 26px;
|
|
}
|
|
|
|
// Closed, ant parks the sheet at translateY(100%) inline — that would
|
|
// leave the gap's worth of sheet peeking up, so push it fully off-screen.
|
|
&:not(.ant-drawer-open) .ant-drawer-content-wrapper {
|
|
transform: translateY(calc(100% + var(--island-gap) + 40px + env(safe-area-inset-bottom, 0px))) !important;
|
|
}
|
|
|
|
&.ant-drawer-open .ant-drawer-content-wrapper {
|
|
box-shadow:
|
|
0 24px 48px -18px rgba(20, 22, 26, 0.35),
|
|
0 2px 8px rgba(20, 22, 26, 0.08) !important;
|
|
}
|
|
|
|
.ant-drawer-content {
|
|
border-radius: inherit;
|
|
overflow: hidden;
|
|
}
|
|
|
|
// Grab handle, so it still reads as a sheet that can be pulled down.
|
|
.ant-drawer-body::before {
|
|
content: '';
|
|
display: block;
|
|
width: 38px;
|
|
height: 4px;
|
|
margin: 10px auto 0;
|
|
border-radius: 4px;
|
|
background: @hairline;
|
|
}
|
|
}
|
|
|
|
/* ── 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;
|
|
}
|
|
|
|
/* Browser autofill paints its own pale-blue fill (and dark text) over the
|
|
field, which can't be overridden with `background`. Cover it with an inset
|
|
shadow in the field's own colour instead. Inside an ant affix wrapper only
|
|
the inner <input> gets autofilled, so without this it shows as a blue box
|
|
floating inside the bordered wrapper. */
|
|
input:-webkit-autofill,
|
|
input:-webkit-autofill:hover,
|
|
input:-webkit-autofill:focus,
|
|
textarea:-webkit-autofill,
|
|
textarea:-webkit-autofill:hover,
|
|
textarea:-webkit-autofill:focus {
|
|
-webkit-text-fill-color: @ink;
|
|
caret-color: @ink;
|
|
-webkit-box-shadow: 0 0 0 1000px @canvas inset !important;
|
|
box-shadow: 0 0 0 1000px @canvas inset !important;
|
|
transition: background-color 9999s ease-out 0s;
|
|
}
|
|
|
|
/* ── 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 frosted glass (tab bar, toasts) 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 .tabbar__inner,
|
|
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;
|
|
}
|