coresync/ads-marketing
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modal dakr theme

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
frontend/src/styles/CampaignModal.module.css
View File

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

21
frontend/src/styles/GroupModal.module.css
View File

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

9
frontend/src/styles/Modal.module.css
View File

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

24
frontend/src/styles/MultiSelect.module.css
View File

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

21
frontend/src/styles/SmtpModal.module.css
View File

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

21
frontend/src/styles/SubscriberModal.module.css
View File

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

39
frontend/src/styles/TemplateModal.module.css
View File

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

21
frontend/src/styles/UnsubModal.module.css
View File

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

21
frontend/src/styles/UserModal.module.css
View File

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