mirror of
https://github.com/QIDITECH/QIDIStudio.git
synced 2026-01-31 08:58:42 +03:00
update resources\web
This commit is contained in:
wjyLearn
70
resources/web/model_new/css/accessory_dropdown.css
Normal file
70
resources/web/model_new/css/accessory_dropdown.css
Normal file
@@ -0,0 +1,70 @@
|
||||
.accessory-rule-wrapper {
|
||||
border: 1px solid rgba(0, 0, 0, 0.04);
|
||||
border-radius: 4px;
|
||||
padding: 8px 8px;
|
||||
background: #ffffff;
|
||||
position: absolute;
|
||||
width: 248px;
|
||||
right: 0;
|
||||
top: -390px;
|
||||
font-size: 12px;
|
||||
box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 8px 24px 0 rgba(0, 0, 0, 0.06), 0 12px 48px 16px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.accessory-rule-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.accessory-rule-list input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.accessory-rule-card {
|
||||
position: relative;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #E4E4E4;
|
||||
border-radius: 8px;
|
||||
/* background: #fff; */
|
||||
box-shadow: 0 2px 4px rgba(31, 35, 41, 0.08);
|
||||
}
|
||||
|
||||
.accessory-rule-card::after {
|
||||
content: '\203A';
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 8px;
|
||||
font-size: 16px;
|
||||
color: #9FA3A9;
|
||||
}
|
||||
|
||||
.accessory-rule-card:hover {
|
||||
border: 1px solid #0B3FA8;
|
||||
}
|
||||
.accessory-rule-card:hover .accessory-rule-title {
|
||||
color: #0B3FA8;
|
||||
}
|
||||
|
||||
.accessory-rule-title {
|
||||
font-weight: 600;
|
||||
color: #202124;
|
||||
}
|
||||
|
||||
.accessory-rule-meta {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
row-gap: 4px;
|
||||
column-gap: 6px;
|
||||
font-size: 13px;
|
||||
color: #4A4D52;
|
||||
}
|
||||
|
||||
.accessory-rule-meta dt {
|
||||
font-weight: 400;
|
||||
color: #575A5F;
|
||||
}
|
||||
|
||||
.accessory-rule-meta dd {
|
||||
font-weight: 400;
|
||||
text-align: right;;
|
||||
}
|
||||
39
resources/web/model_new/css/black.css
Normal file
39
resources/web/model_new/css/black.css
Normal file
@@ -0,0 +1,39 @@
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
background-color: #F4F4F4;
|
||||
}
|
||||
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.addBtn {
|
||||
background-color: #4479fb;
|
||||
padding: 9px 18px;
|
||||
box-sizing: border-box;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
flex: 0 0 auto;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.addBtn label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.content {
|
||||
color: #AAA;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
156
resources/web/model_new/css/dark.css
Normal file
156
resources/web/model_new/css/dark.css
Normal file
@@ -0,0 +1,156 @@
|
||||
|
||||
:root {
|
||||
--dark-color-base-text: #B3B3B5;
|
||||
}
|
||||
|
||||
html, body
|
||||
{
|
||||
background-color: #242428;
|
||||
color: #B3B3B5;
|
||||
}
|
||||
|
||||
.topTool {
|
||||
background-color: #242428;
|
||||
}
|
||||
|
||||
.returnBtn img {
|
||||
filter: invert(87%) sepia(1%) saturate(0%) hue-rotate(192deg)
|
||||
brightness(91%) contrast(86%);
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: #242428;
|
||||
color: #B3B3B5;
|
||||
}
|
||||
|
||||
.editorTitle {
|
||||
color: #B3B3B5;
|
||||
}
|
||||
|
||||
.accessory-rule-wrapper {
|
||||
background-color: #242428;
|
||||
border: 1px solid rgba(255, 255, 255, 0.247);
|
||||
}
|
||||
.accessory-rule-title {
|
||||
color: #B3B3B5;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
color: var(--dark-color-base-text);
|
||||
}
|
||||
|
||||
.Navigation .indicator {
|
||||
background-color: var(--dark-color-base-text);;
|
||||
}
|
||||
.Navigation .rail {
|
||||
background-color: #3d3d3d;
|
||||
}
|
||||
|
||||
/*CKEditor*/
|
||||
:root {
|
||||
/* Helper variables to avoid duplication in the colors. */
|
||||
|
||||
--ck-custom-foreground: hsl(255, 3%, 18%);
|
||||
--ck-custom-border: hsl(300, 1%, 22%);
|
||||
--ck-custom-white: hsl(0, 0%, 100%);
|
||||
|
||||
/* -- Overrides generic colors. ------------------------------------------------------------- */
|
||||
|
||||
--ck-content-font-color: var(--ck-custom-white);
|
||||
|
||||
--ck-color-base-background: #242428;
|
||||
--ck-color-base-border: hsl(240, 4%, 24%);
|
||||
|
||||
--ck-color-focus-border: hsl(208, 90%, 62%);
|
||||
--ck-color-text: hsl(0, 0%, 98%);
|
||||
--ck-color-shadow-drop: hsla(0, 0%, 0%, 0.2);
|
||||
--ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1);
|
||||
|
||||
/* -- Overrides the default .ck-button class colors. ---------------------------------------- */
|
||||
|
||||
--ck-color-button-default-hover-background: hsl(270, 1%, 22%);
|
||||
--ck-color-button-default-active-background: hsl(270, 2%, 20%);
|
||||
--ck-color-button-default-active-shadow: hsl(270, 2%, 23%);
|
||||
|
||||
--ck-color-button-on-background: var(--ck-custom-foreground);
|
||||
--ck-color-button-on-hover-background: hsl(255, 4%, 16%);
|
||||
--ck-color-button-on-active-background: hsl(255, 4%, 14%);
|
||||
--ck-color-button-on-active-shadow: hsl(240, 3%, 19%);
|
||||
--ck-color-button-on-disabled-background: var(--ck-custom-foreground);
|
||||
|
||||
--ck-color-button-action-background: hsl(168, 76%, 42%);
|
||||
--ck-color-button-action-hover-background: hsl(168, 76%, 38%);
|
||||
--ck-color-button-action-active-background: hsl(168, 76%, 36%);
|
||||
--ck-color-button-action-active-shadow: hsl(168, 75%, 34%);
|
||||
--ck-color-button-action-disabled-background: hsl(168, 76%, 42%);
|
||||
--ck-color-button-action-text: var(--ck-custom-white);
|
||||
|
||||
--ck-color-button-save: hsl(120, 100%, 46%);
|
||||
--ck-color-button-cancel: hsl(15, 100%, 56%);
|
||||
|
||||
/* -- Overrides the default .ck-dropdown class colors. -------------------------------------- */
|
||||
|
||||
--ck-color-dropdown-panel-border: var(--ck-custom-foreground);
|
||||
|
||||
/* -- Overrides the default .ck-dialog class colors. ----------------------------------- */
|
||||
|
||||
--ck-color-dialog-form-header-border: var(--ck-custom-border);
|
||||
|
||||
/* -- Overrides the default .ck-splitbutton class colors. ----------------------------------- */
|
||||
|
||||
--ck-color-split-button-hover-background: var(--ck-color-button-default-hover-background);
|
||||
--ck-color-split-button-hover-border: var(--ck-custom-foreground);
|
||||
|
||||
/* -- Overrides the default .ck-input class colors. ----------------------------------------- */
|
||||
|
||||
--ck-color-input-border: hsl(257, 3%, 43%);
|
||||
--ck-color-input-text: hsl(0, 0%, 98%);
|
||||
--ck-color-input-disabled-background: hsl(255, 4%, 21%);
|
||||
--ck-color-input-disabled-border: hsl(250, 3%, 38%);
|
||||
--ck-color-input-disabled-text: hsl(0, 0%, 78%);
|
||||
|
||||
/* -- Overrides the default .ck-list class colors. ------------------------------------------ */
|
||||
|
||||
--ck-color-list-button-hover-background: var(--ck-custom-foreground);
|
||||
--ck-color-list-button-on-background: hsl(208, 88%, 52%);
|
||||
--ck-color-list-button-on-text: var(--ck-custom-white);
|
||||
|
||||
/* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */
|
||||
|
||||
--ck-color-panel-border: var(--ck-custom-border);
|
||||
|
||||
/* -- Overrides the default .ck-toolbar class colors. --------------------------------------- */
|
||||
|
||||
--ck-color-toolbar-border: var(--ck-custom-border);
|
||||
|
||||
/* -- Overrides the default .ck-tooltip class colors. --------------------------------------- */
|
||||
|
||||
--ck-color-tooltip-background: hsl(252, 7%, 14%);
|
||||
--ck-color-tooltip-text: hsl(0, 0%, 93%);
|
||||
|
||||
/* -- Overrides the default colors used by the ckeditor5-image package. --------------------- */
|
||||
|
||||
--ck-content-color-image-caption-background: hsl(0, 0%, 97%);
|
||||
--ck-content-color-image-caption-text: hsl(0, 0%, 20%);
|
||||
|
||||
/* -- Overrides the default colors used by the ckeditor5-widget package. -------------------- */
|
||||
|
||||
--ck-color-widget-blurred-border: hsl(0, 0%, 87%);
|
||||
--ck-color-widget-hover-border: hsl(43, 100%, 68%);
|
||||
--ck-color-widget-editable-focus-background: var(--ck-custom-white);
|
||||
|
||||
/* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */
|
||||
|
||||
--ck-color-link-default: hsl(190, 100%, 75%);
|
||||
}
|
||||
|
||||
/* Improve displaying links. */
|
||||
.ck.ck-editor__editable a {
|
||||
color: hsl(210, 100%, 63%);
|
||||
}
|
||||
|
||||
/* Improve displaying code blocks. */
|
||||
.ck-content pre {
|
||||
color: hsl(0, 0%, 91%);
|
||||
border-color: hsl(0, 0%, 77%);
|
||||
}
|
||||
260
resources/web/model_new/css/editor.css
Normal file
260
resources/web/model_new/css/editor.css
Normal file
@@ -0,0 +1,260 @@
|
||||
*{
|
||||
padding: 0px;
|
||||
border: 0px;
|
||||
margin: 0px;
|
||||
font-family: "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-sans;
|
||||
border-color: #D7D7D7;
|
||||
user-select: none;
|
||||
}
|
||||
html, body {
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
padding: 0px;
|
||||
border: 0px;
|
||||
margin: 0px;
|
||||
background-color: #FFF;
|
||||
}
|
||||
body {
|
||||
/* display: flex;
|
||||
justify-content: center; */
|
||||
}
|
||||
.topTool {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: #FFF;
|
||||
padding: 0px 18px;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 2px 4px 0 rgba(55, 55, 55, 0.12);
|
||||
}
|
||||
.returnBtn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
.returnBtn label {
|
||||
cursor: pointer;
|
||||
}
|
||||
.saveBtn {
|
||||
background-color: #4479fb;
|
||||
padding: 9px 8px;
|
||||
box-sizing: border-box;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
color: #000000;
|
||||
}
|
||||
.container {
|
||||
width: 968px;
|
||||
padding: 36px 50px;
|
||||
margin: 50px auto 40px;
|
||||
}
|
||||
.editorGroup {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.editorTitle {
|
||||
color: #353535;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.required {
|
||||
text-indent: -10px;
|
||||
}
|
||||
.required::before {
|
||||
content: "*";
|
||||
color: #E14747;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.editorInput {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #E8E8E8;
|
||||
padding-left: 16px;
|
||||
}
|
||||
.editorInput:focus {
|
||||
border-color: #74a8ff;
|
||||
outline: none;
|
||||
}
|
||||
.comment {
|
||||
font-size: 12px;
|
||||
color: #898989;
|
||||
}
|
||||
/*upload button*/
|
||||
.uploadBox {
|
||||
width: 104px;
|
||||
height: 76px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #DDD;
|
||||
flex: 0 0 auto;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.3s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.uploadBox:hover {
|
||||
border-color: #74a8ff;
|
||||
}
|
||||
.uploadText {
|
||||
color: #898989;
|
||||
font-size: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.uploadIcon {
|
||||
width: 20px;
|
||||
}
|
||||
.uploadBox input[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
/*image preview*/
|
||||
.imageGroup {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
.imagePreview {
|
||||
position: relative;
|
||||
width: 104px;
|
||||
height: 76px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.imagePreview img {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;;
|
||||
}
|
||||
.imagePreview:hover .setModelCover {
|
||||
display: flex;
|
||||
}
|
||||
.imagePreview:hover img {
|
||||
display: block;
|
||||
}
|
||||
.imageList {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.modelCover {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(79, 138, 243, 0.80);
|
||||
transition: opacity 0.3s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
.setModelCover {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 90%;
|
||||
background-color: rgba(79, 138, 243, 1);
|
||||
transition: opacity 0.3s;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
/*ckeditor custom styles*/
|
||||
:root {
|
||||
--ck-color-focus-border: #23469A !important;
|
||||
--ck-color-button-on-hover-background: hsl(122, 33%, 83%) !important;
|
||||
--ck-color-button-on-color: #23469A !important;
|
||||
--ck-color-button-on-background: #3C79F141 !important;
|
||||
--ck-color-focus-outer-shadow: #C9D5FC !important;
|
||||
}
|
||||
.ck-powered-by {
|
||||
display: none !important;
|
||||
}
|
||||
.ck-editor__editable,
|
||||
.ck-content {
|
||||
min-height: 100px !important;
|
||||
}
|
||||
.ck-editor__editable_inline {
|
||||
padding: 12px 16px 12px 36px !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.ck-editor__editable, .ck-sticky-panel__content {
|
||||
border-color: #E8E8E8 !important;
|
||||
}
|
||||
/*editor accessories*/
|
||||
.editorSubTitle {
|
||||
color: #353535;
|
||||
font-size: 12px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.accessoriesButton {
|
||||
border-radius: 2px;
|
||||
border: 1px solid var(--Green-600, #23469A);
|
||||
height: 24px;
|
||||
padding: 4px 8px;
|
||||
color: #23469A;
|
||||
font-weight: 600;
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
}
|
||||
.accessory-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
.titleJustified {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.attachment {
|
||||
display: inline-block;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #DDD;
|
||||
width: 350px;
|
||||
font-size: 14px;
|
||||
padding: 6px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-all;
|
||||
cursor: pointer;
|
||||
/* background: var(--background-base, #F7F7F7); */
|
||||
}
|
||||
.attachment-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
.attachment-delete {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-left: auto;
|
||||
}
|
||||
hr {
|
||||
margin-top: 27px;
|
||||
margin-bottom: 19px;
|
||||
border-top: 1px solid #EBEBEB
|
||||
}
|
||||
70
resources/web/model_new/css/gallery.css
Normal file
70
resources/web/model_new/css/gallery.css
Normal file
@@ -0,0 +1,70 @@
|
||||
/* 简洁图片画廊样式 */
|
||||
.bs-gallery {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.bs-gallery-main {
|
||||
position: relative;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 0 0 560px;
|
||||
flex: 0 0 560px;
|
||||
width: 560px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: #f3f3f3;
|
||||
}
|
||||
|
||||
.bs-gallery-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.bs-gallery-counter {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
bottom: 12px;
|
||||
background: rgba(0,0,0,.45);
|
||||
color: #fff;
|
||||
padding: 6px 10px;
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.bs-gallery-thumbs {
|
||||
width: 180px;
|
||||
overflow-y: auto;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.bs-gallery-thumb {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bs-gallery-thumb img {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
filter: grayscale(10%);
|
||||
}
|
||||
|
||||
.bs-gallery-thumb.active {
|
||||
border: 2px solid #426DC2; /* 绿色高亮 */
|
||||
}
|
||||
|
||||
.bs-gallery-thumb:last-child { margin-bottom: 0; }
|
||||
50
resources/web/model_new/css/navigation.css
Normal file
50
resources/web/model_new/css/navigation.css
Normal file
@@ -0,0 +1,50 @@
|
||||
.Navigation {
|
||||
position: sticky;
|
||||
width: 190px;
|
||||
padding-left: 16px; /* 左侧留给导轨 */
|
||||
}
|
||||
|
||||
.Navigation .rail {
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 6px;
|
||||
background: #EBEBEB; /* 浅灰导轨 */
|
||||
}
|
||||
|
||||
.Navigation .indicator {
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
width: 6px;
|
||||
background: #1f1f1f; /* 深色活动段 */
|
||||
border-radius: 2px;
|
||||
transition: top 0.25s ease, height 0.25s ease;
|
||||
}
|
||||
|
||||
.Navigation ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.Navigation .nav-item {
|
||||
padding: 3px 12px;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.Navigation .nav-item a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Navigation .nav-item.active {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.Navigation .nav-item.active a {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: #446DC0;
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
23
resources/web/model_new/css/tool.css
Normal file
23
resources/web/model_new/css/tool.css
Normal file
@@ -0,0 +1,23 @@
|
||||
.toast {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scale(0.95);
|
||||
background: #fff3cd;
|
||||
color: #856404;
|
||||
border: 1px solid #ffeeba;
|
||||
border-radius: 8px;
|
||||
padding: 10px 20px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,.15);
|
||||
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
font-size: 15px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: all 0.3s ease;
|
||||
z-index: 9999;
|
||||
}
|
||||
.toast.show {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) scale(1);
|
||||
pointer-events: auto;
|
||||
}
|
||||
Reference in New Issue
Block a user