modal dakr theme

This commit is contained in:
romantarkin 2025-08-02 16:54:15 +05:00
parent 118bdb058b
commit 5c0b8f02bd
9 changed files with 184 additions and 48 deletions

View File

@ -12,7 +12,7 @@
}
.label {
font-weight: 500;
color: #374151;
color: var(--text-color);
font-size: 15px;
display: flex;
flex-direction: column;
@ -22,12 +22,51 @@
margin-top: 4px;
padding: 10px 12px;
border-radius: 8px;
border: 1.5px solid #c7d2fe;
border: 1.5px solid var(--border-color);
font-size: 16px;
outline: none;
background: #f8fafc;
background: var(--card-background);
color: var(--text-color);
transition: border 0.2s;
}
.input:focus {
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.select {
margin-top: 4px;
padding: 10px 12px;
border-radius: 8px;
border: 1.5px solid var(--border-color);
font-size: 16px;
outline: none;
background: var(--card-background);
color: var(--text-color);
transition: border 0.2s;
cursor: pointer;
}
.select:focus {
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.textarea {
margin-top: 4px;
padding: 10px 12px;
border-radius: 8px;
border: 1.5px solid var(--border-color);
font-size: 16px;
outline: none;
background: var(--card-background);
color: var(--text-color);
transition: border 0.2s;
resize: vertical;
min-height: 120px;
font-family: inherit;
}
.textarea:focus {
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.actions {
display: flex;
gap: 12px;
@ -46,10 +85,13 @@
box-shadow: 0 2px 8px 0 rgba(99,102,241,0.10);
transition: background 0.2s;
}
.saveBtn:hover {
background: linear-gradient(90deg, #4f46e5 0%, #0891b2 100%);
}
.cancelBtn {
background: #f3f4f6;
background: var(--hover-background);
color: #6366f1;
border: none;
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 10px 18px;
font-size: 16px;
@ -57,3 +99,6 @@
cursor: pointer;
transition: background 0.2s;
}
.cancelBtn:hover {
background: var(--border-color);
}

View File

@ -12,7 +12,7 @@
}
.label {
font-weight: 500;
color: #374151;
color: var(--text-color);
font-size: 15px;
display: flex;
flex-direction: column;
@ -22,12 +22,17 @@
margin-top: 4px;
padding: 10px 12px;
border-radius: 8px;
border: 1.5px solid #c7d2fe;
border: 1.5px solid var(--border-color);
font-size: 16px;
outline: none;
background: #f8fafc;
background: var(--card-background);
color: var(--text-color);
transition: border 0.2s;
}
.input:focus {
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.actions {
display: flex;
gap: 12px;
@ -46,10 +51,13 @@
box-shadow: 0 2px 8px 0 rgba(99,102,241,0.10);
transition: background 0.2s;
}
.saveBtn:hover {
background: linear-gradient(90deg, #4f46e5 0%, #0891b2 100%);
}
.cancelBtn {
background: #f3f4f6;
background: var(--hover-background);
color: #6366f1;
border: none;
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 10px 18px;
font-size: 16px;
@ -57,3 +65,6 @@
cursor: pointer;
transition: background 0.2s;
}
.cancelBtn:hover {
background: var(--border-color);
}

View File

@ -12,17 +12,22 @@
padding: 16px;
}
[data-theme="dark"] .overlay {
background: rgba(0,0,0,0.5);
}
.modal {
background: #fff;
background: var(--card-background);
border-radius: 14px;
padding: 32px 28px 24px 28px;
min-width: 340px;
max-width: 90vw;
max-height: 90vh;
box-shadow: 0 12px 48px 0 rgba(31,38,135,0.22);
box-shadow: 0 12px 48px 0 var(--shadow-color);
position: relative;
animation: modalIn 0.18s cubic-bezier(.4,1.3,.6,1);
overflow-y: auto;
border: 1px solid var(--border-color);
}
.closeBtn {

View File

@ -7,23 +7,25 @@
display: flex;
align-items: center;
justify-content: space-between;
background: #f8fafc;
border: 1.5px solid #c7d2fe;
background: var(--card-background);
border: 1.5px solid var(--border-color);
border-radius: 8px;
padding: 10px 12px;
font-size: 16px;
cursor: pointer;
transition: border 0.2s;
min-height: 40px;
color: var(--text-color);
}
.control:focus, .control:active {
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.disabled {
background: #f3f4f6;
color: #b3b3b3;
background: var(--hover-background);
color: var(--secondary-text);
cursor: not-allowed;
}
@ -35,7 +37,7 @@
}
.placeholder {
color: #9ca3af;
color: var(--secondary-text);
}
.arrow {
@ -49,10 +51,10 @@
left: 0;
right: 0;
top: calc(100% + 4px);
background: #fff;
border: 1.5px solid #c7d2fe;
background: var(--card-background);
border: 1.5px solid var(--border-color);
border-radius: 8px;
box-shadow: 0 4px 24px 0 rgba(99,102,241,0.10);
box-shadow: 0 4px 24px 0 var(--shadow-color);
z-index: 10;
max-height: 220px;
overflow-y: auto;
@ -66,16 +68,16 @@
align-items: center;
gap: 8px;
font-size: 15px;
color: #374151;
color: var(--text-color);
transition: background 0.15s;
}
.option:hover {
background: #f3f4f6;
background: var(--hover-background);
}
.selected {
background: #e0e7ff;
background: var(--hover-background);
color: #6366f1;
}

View File

@ -12,7 +12,7 @@
}
.label {
font-weight: 500;
color: #374151;
color: var(--text-color);
font-size: 15px;
display: flex;
flex-direction: column;
@ -22,12 +22,17 @@
margin-top: 4px;
padding: 10px 12px;
border-radius: 8px;
border: 1.5px solid #c7d2fe;
border: 1.5px solid var(--border-color);
font-size: 16px;
outline: none;
background: #f8fafc;
background: var(--card-background);
color: var(--text-color);
transition: border 0.2s;
}
.input:focus {
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.actions {
display: flex;
gap: 12px;
@ -46,10 +51,13 @@
box-shadow: 0 2px 8px 0 rgba(99,102,241,0.10);
transition: background 0.2s;
}
.saveBtn:hover {
background: linear-gradient(90deg, #4f46e5 0%, #0891b2 100%);
}
.cancelBtn {
background: #f3f4f6;
background: var(--hover-background);
color: #6366f1;
border: none;
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 10px 18px;
font-size: 16px;
@ -57,3 +65,6 @@
cursor: pointer;
transition: background 0.2s;
}
.cancelBtn:hover {
background: var(--border-color);
}

View File

@ -12,7 +12,7 @@
}
.label {
font-weight: 500;
color: #374151;
color: var(--text-color);
font-size: 15px;
display: flex;
flex-direction: column;
@ -22,12 +22,17 @@
margin-top: 4px;
padding: 10px 12px;
border-radius: 8px;
border: 1.5px solid #c7d2fe;
border: 1.5px solid var(--border-color);
font-size: 16px;
outline: none;
background: #f8fafc;
background: var(--card-background);
color: var(--text-color);
transition: border 0.2s;
}
.input:focus {
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.actions {
display: flex;
gap: 12px;
@ -46,10 +51,13 @@
box-shadow: 0 2px 8px 0 rgba(99,102,241,0.10);
transition: background 0.2s;
}
.saveBtn:hover {
background: linear-gradient(90deg, #4f46e5 0%, #0891b2 100%);
}
.cancelBtn {
background: #f3f4f6;
background: var(--hover-background);
color: #6366f1;
border: none;
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 10px 18px;
font-size: 16px;
@ -57,3 +65,6 @@
cursor: pointer;
transition: background 0.2s;
}
.cancelBtn:hover {
background: var(--border-color);
}

View File

@ -12,7 +12,7 @@
}
.label {
font-weight: 500;
color: #374151;
color: var(--text-color);
font-size: 15px;
display: flex;
flex-direction: column;
@ -22,12 +22,35 @@
margin-top: 4px;
padding: 10px 12px;
border-radius: 8px;
border: 1.5px solid #c7d2fe;
border: 1.5px solid var(--border-color);
font-size: 16px;
outline: none;
background: #f8fafc;
background: var(--card-background);
color: var(--text-color);
transition: border 0.2s;
}
.input:focus {
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.textarea {
margin-top: 4px;
padding: 10px 12px;
border-radius: 8px;
border: 1.5px solid var(--border-color);
font-size: 16px;
outline: none;
background: var(--card-background);
color: var(--text-color);
transition: border 0.2s;
resize: vertical;
min-height: 120px;
font-family: inherit;
}
.textarea:focus {
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.actions {
display: flex;
gap: 12px;
@ -46,10 +69,13 @@
box-shadow: 0 2px 8px 0 rgba(99,102,241,0.10);
transition: background 0.2s;
}
.saveBtn:hover {
background: linear-gradient(90deg, #4f46e5 0%, #0891b2 100%);
}
.cancelBtn {
background: #f3f4f6;
background: var(--hover-background);
color: #6366f1;
border: none;
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 10px 18px;
font-size: 16px;
@ -57,3 +83,6 @@
cursor: pointer;
transition: background 0.2s;
}
.cancelBtn:hover {
background: var(--border-color);
}

View File

@ -12,7 +12,7 @@
}
.label {
font-weight: 500;
color: #374151;
color: var(--text-color);
font-size: 15px;
display: flex;
flex-direction: column;
@ -22,12 +22,17 @@
margin-top: 4px;
padding: 10px 12px;
border-radius: 8px;
border: 1.5px solid #c7d2fe;
border: 1.5px solid var(--border-color);
font-size: 16px;
outline: none;
background: #f8fafc;
background: var(--card-background);
color: var(--text-color);
transition: border 0.2s;
}
.input:focus {
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.actions {
display: flex;
gap: 12px;
@ -46,10 +51,13 @@
box-shadow: 0 2px 8px 0 rgba(99,102,241,0.10);
transition: background 0.2s;
}
.saveBtn:hover {
background: linear-gradient(90deg, #4f46e5 0%, #0891b2 100%);
}
.cancelBtn {
background: #f3f4f6;
background: var(--hover-background);
color: #6366f1;
border: none;
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 10px 18px;
font-size: 16px;
@ -57,3 +65,6 @@
cursor: pointer;
transition: background 0.2s;
}
.cancelBtn:hover {
background: var(--border-color);
}

View File

@ -12,7 +12,7 @@
}
.label {
font-weight: 500;
color: #374151;
color: var(--text-color);
font-size: 15px;
display: flex;
flex-direction: column;
@ -22,12 +22,17 @@
margin-top: 4px;
padding: 10px 12px;
border-radius: 8px;
border: 1.5px solid #c7d2fe;
border: 1.5px solid var(--border-color);
font-size: 16px;
outline: none;
background: #f8fafc;
background: var(--card-background);
color: var(--text-color);
transition: border 0.2s;
}
.input:focus {
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.actions {
display: flex;
gap: 12px;
@ -46,10 +51,13 @@
box-shadow: 0 2px 8px 0 rgba(99,102,241,0.10);
transition: background 0.2s;
}
.saveBtn:hover {
background: linear-gradient(90deg, #4f46e5 0%, #0891b2 100%);
}
.cancelBtn {
background: #f3f4f6;
background: var(--hover-background);
color: #6366f1;
border: none;
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 10px 18px;
font-size: 16px;
@ -57,3 +65,6 @@
cursor: pointer;
transition: background 0.2s;
}
.cancelBtn:hover {
background: var(--border-color);
}