mirror
/
cyberpanel
mirror of https://github.com/usmannasir/cyberpanel.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

dark mode

This commit is contained in:
usmannasir 2025-08-02 14:30:23 +05:00
parent d4116c1e51
commit 9c5923c854
11 changed files with 468 additions and 324 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
userManagment/templates/userManagment/apiAccess.html
View File

@ -9,7 +9,7 @@
<style>
body {
background-color: #f0f0ff;
background-color: var(--bg-primary, #f0f0ff);
}
.page-wrapper {
background: transparent;
@ -25,21 +25,21 @@
.page-title {
font-size: 28px;
font-weight: 700;
color: #2f3640;
color: var(--text-heading, #2f3640);
margin-bottom: 8px;
}
.content-card {
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
padding: 30px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
border: 1px solid var(--border-color, #e8e9ff);
margin-bottom: 25px;
}
.section-title {
font-size: 18px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 25px;
display: flex;
align-items: center;
@ -49,47 +49,49 @@
content: '';
width: 4px;
height: 24px;
background: #5b5fcf;
background: var(--accent-color, #5b5fcf);
border-radius: 2px;
}
.info-box {
background: #f8f9ff;
border-left: 4px solid #5b5fcf;
background: var(--bg-hover, #f8f9ff);
border-left: 4px solid var(--accent-color, #5b5fcf);
padding: 1.5rem;
border-radius: 0 8px 8px 0;
margin-bottom: 2rem;
}
.info-box h4 {
color: #5b5fcf;
color: var(--accent-color, #5b5fcf);
font-weight: 600;
margin-bottom: 0.5rem;
}
.info-box p {
color: #4a5568;
color: var(--text-secondary, #4a5568);
margin-bottom: 0;
}
.form-label {
color: #2f3640;
color: var(--text-primary, #2f3640);
font-weight: 600;
margin-bottom: 0.5rem;
display: block;
}
.form-control {
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
padding: 0.75rem 1rem;
font-size: 1rem;
transition: all 0.3s ease;
width: 100%;
box-sizing: border-box;
background: var(--bg-secondary, white);
color: var(--text-primary, #2f3640);
}
.form-control:focus {
border-color: #5b5fcf;
border-color: var(--accent-color, #5b5fcf);
box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
outline: none;
}
.btn-primary {
background: linear-gradient(135deg, #5b5fcf 0%, #7b7fd0 100%);
background: linear-gradient(135deg, var(--accent-color, #5b5fcf) 0%, var(--accent-hover, #7b7fd0) 100%);
border: none;
border-radius: 8px;
padding: 0.75rem 2rem;
@ -101,9 +103,10 @@
display: inline-flex;
align-items: center;
gap: 8px;
color: white;
}
.btn-primary:hover {
background: linear-gradient(135deg, #4b4fbf 0%, #6b6fc0 100%);
background: linear-gradient(135deg, var(--accent-hover, #4b4fbf) 0%, var(--accent-hover, #6b6fc0) 100%);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(91, 95, 207, 0.4);
}
@ -113,7 +116,7 @@
margin-left: 10px;
}
.help-text {
color: #8893a7;
color: var(--text-secondary, #8893a7);
font-size: 0.875rem;
margin-top: 0.25rem;
}
@ -125,25 +128,27 @@
margin-left: 1rem;
}
.access-enabled {
background: #f0fdf4;
color: #166534;
background: var(--success-bg, #f0fdf4);
color: var(--success-text, #166534);
}
.access-disabled {
background: #fef2f2;
color: #991b1b;
background: var(--danger-bg, #fef2f2);
color: var(--danger-text, #991b1b);
}
.toggle-option {
display: flex;
align-items: center;
padding: 1rem;
background: #f8f9ff;
background: var(--bg-hover, #f8f9ff);
border-radius: 8px;
margin-bottom: 0.5rem;
cursor: pointer;
transition: all 0.3s ease;
border: 1px solid var(--border-color, #e8e9ff);
}
.toggle-option:hover {
background: #e8e9ff;
background: var(--bg-hover, #e8e9ff);
border-color: var(--accent-color, #5b5fcf);
}
.toggle-option input[type="radio"] {
margin-right: 0.75rem;
@ -153,10 +158,13 @@
font-size: 1.2rem;
}
.toggle-enable {
color: #10b981;
color: var(--success-text, #10b981);
}
.toggle-disable {
color: #ef4444;
color: var(--danger-text, #ef4444);
}
.text-muted {
color: var(--text-secondary, #8893a7);
}
@media (max-width: 768px) {
.content-card {

165
userManagment/templates/userManagment/changeUserACL.html
View File

@ -7,66 +7,165 @@
{% get_current_language as LANGUAGE_CODE %}
<!-- Current language: {{ LANGUAGE_CODE }} -->
<div class="container">
<div id="page-title">
<h2>{% trans "Change User ACL" %}</h2>
<p>{% trans "This page can be used to change ACL for CyberPanel users." %}</p>
</div>
<style>
body {
background-color: var(--bg-primary, #f0f0ff);
}
.page-wrapper {
background: transparent;
padding: 20px;
}
.page-container {
max-width: 1200px;
margin: 0 auto;
}
.page-header {
margin-bottom: 30px;
}
.page-title {
font-size: 28px;
font-weight: 700;
color: var(--text-heading, #2f3640);
margin-bottom: 8px;
}
.page-subtitle {
font-size: 14px;
color: var(--text-secondary, #8893a7);
}
.content-card {
background: var(--bg-secondary, white);
border-radius: 12px;
padding: 30px;
box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
border: 1px solid var(--border-color, #e8e9ff);
margin-bottom: 25px;
}
.card-title {
font-size: 18px;
font-weight: 700;
color: var(--text-primary, #2f3640);
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 10px;
}
.card-title::before {
content: '';
width: 4px;
height: 24px;
background: var(--accent-color, #5b5fcf);
border-radius: 2px;
}
.form-group {
margin-bottom: 20px;
}
.form-label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--text-secondary, #64748b);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.form-control {
width: 100%;
padding: 10px 14px;
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
font-size: 14px;
color: var(--text-primary, #2f3640);
background: var(--bg-secondary, white);
transition: all 0.2s ease;
}
.form-control:hover {
border-color: var(--accent-color, #5b5fcf);
}
.form-control:focus {
outline: none;
border-color: var(--accent-color, #5b5fcf);
box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
}
.btn-primary {
background: var(--accent-color, #5b5fcf);
color: white;
}
.btn-primary:hover {
background: var(--accent-hover, #4a4fc4);
box-shadow: 0 4px 12px rgba(91,95,207,0.3);
transform: translateY(-1px);
}
.loading-icon {
width: 20px;
height: 20px;
margin-left: 10px;
}
@media (max-width: 768px) {
.content-card {
padding: 20px;
}
}
</style>
<div ng-controller="changeUserACLCTRL" class="panel">
<div class="panel-body">
<h3 class="content-box-header">
{% trans "Change User ACL" %} <img ng-hide="aclLoading" src="{% static 'images/loading.gif' %}">
</h3>
<div class="example-box-wrapper">
<div class="page-wrapper">
<div class="page-container">
<div class="page-header">
<h1 class="page-title">{% trans "Change User ACL" %}</h1>
<p class="page-subtitle">{% trans "This page can be used to change ACL for CyberPanel users." %}</p>
</div>
<div ng-controller="changeUserACLCTRL" class="content-card">
<h2 class="card-title">
{% trans "Change User ACL" %}
<img class="loading-icon" ng-hide="aclLoading" src="{% static 'images/loading.gif' %}">
</h2>
<form action="/" class="form-horizontal bordered-row panel-body">
<form action="/" class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">{% trans "Select User" %} </label>
<div class="col-sm-6">
<label class="form-label">{% trans "Select User" %}</label>
<select ng-model="selectedUser" class="form-control">
<option value="">-- {% trans "Choose a user" %} --</option>
{% for items in usersList %}
<option>{{ items }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">{% trans "Select ACL" %} </label>
<div class="col-sm-6">
<label class="form-label">{% trans "Select ACL" %}</label>
<select ng-model="selectedACL" class="form-control">
<option value="">-- {% trans "Choose an ACL" %} --</option>
{% for items in aclNames %}
<option>{{ items }}</option>
{% endfor %}
</select>
</div>
</div>
<div ng-hide="deleteACLButton" class="form-group">
<label class="col-sm-3 control-label"></label>
<div class="col-sm-4">
<button type="button" ng-click="changeACLFunc()" class="btn btn-primary btn-lg">{% trans "Change ACL" %}</button>
<button type="button" ng-click="changeACLFunc()" class="btn btn-primary">
<i class="fas fa-save"></i>
{% trans "Change ACL" %}
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
{% endblock %}

35
userManagment/templates/userManagment/createACL.html
View File

@ -9,7 +9,7 @@
<style>
body {
background-color: #f0f0ff;
background-color: var(--bg-primary, #f0f0ff);
}
.page-wrapper {
background: transparent;
@ -20,20 +20,20 @@
margin: 0 auto;
}
.content-card {
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
padding: 2.5rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
margin-bottom: 25px;
}
.section-title {
font-size: 2rem;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 2.5rem;
padding-bottom: 1rem;
border-bottom: 3px solid #5b5fcf;
border-bottom: 3px solid var(--accent-color, #5b5fcf);
text-transform: uppercase;
letter-spacing: 0.5px;
text-align: center;
@ -54,34 +54,37 @@
margin-right: 0;
}
.form-label {
color: #2f3640;
color: var(--text-primary, #2f3640);
font-weight: 600;
margin-bottom: 0.5rem;
display: block;
}
.form-control {
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
padding: 0.75rem 1rem;
font-size: 1rem;
transition: all 0.3s ease;
width: 100%;
box-sizing: border-box;
background: var(--bg-secondary, white);
color: var(--text-primary, #2f3640);
}
.form-control:focus {
border-color: #5b5fcf;
border-color: var(--accent-color, #5b5fcf);
box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
outline: none;
}
.checkbox-wrapper {
background: #f8f9ff;
background: var(--bg-hover, #f8f9ff);
padding: 1rem;
border-radius: 8px;
margin-bottom: 1.5rem;
border: 1px solid var(--border-color, #e8e9ff);
}
.checkbox-wrapper label {
font-weight: 500;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 0;
cursor: pointer;
display: block;
@ -93,7 +96,7 @@
cursor: pointer;
}
.btn-primary {
background: linear-gradient(135deg, #5b5fcf 0%, #7b7fd0 100%);
background: linear-gradient(135deg, var(--accent-color, #5b5fcf) 0%, #7b7fd0 100%);
border: none;
border-radius: 8px;
padding: 0.75rem 2rem;
@ -117,12 +120,14 @@
border: none;
}
.alert-success {
background: rgba(16, 185, 129, 0.1);
color: #065f46;
background: var(--success-bg, rgba(16, 185, 129, 0.1));
color: var(--success-text, #065f46);
border: 1px solid var(--success-border, rgba(16, 185, 129, 0.2));
}
.alert-danger {
background: rgba(239, 68, 68, 0.1);
color: #991b1b;
background: var(--danger-bg, rgba(239, 68, 68, 0.1));
color: var(--danger-text, #991b1b);
border: 1px solid var(--danger-border, rgba(239, 68, 68, 0.2));
}
@media (max-width: 768px) {
.page-container {

52
userManagment/templates/userManagment/createUser.html
View File

@ -9,7 +9,7 @@
<style>
body {
background-color: #f0f0ff;
background-color: var(--bg-primary, #f0f0ff);
}
.page-wrapper {
background: transparent;
@ -20,20 +20,20 @@
margin: 0 auto;
}
.content-card {
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
padding: 2.5rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
border: 1px solid var(--border-color, #e8e9ff);
margin-bottom: 25px;
}
.section-title {
font-size: 2rem;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 2.5rem;
padding-bottom: 1rem;
border-bottom: 3px solid #5b5fcf;
border-bottom: 3px solid var(--accent-color, #5b5fcf);
text-transform: uppercase;
letter-spacing: 0.5px;
text-align: center;
@ -58,24 +58,26 @@
}
.form-label {
color: #2f3640;
color: var(--text-primary, #2f3640);
font-weight: 600;
margin-bottom: 0.5rem;
display: block;
}
.form-control {
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
padding: 0.75rem 1rem;
font-size: 1rem;
transition: all 0.3s ease;
width: 100%;
box-sizing: border-box;
background: var(--bg-secondary, white);
color: var(--text-primary, #2f3640);
}
.form-control:focus {
border-color: #5b5fcf;
border-color: var(--accent-color, #5b5fcf);
box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
outline: none;
}
@ -98,8 +100,8 @@
/* Windows-specific fixes */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
select.form-control {
color: #2f3640 !important;
background-color: white !important;
color: var(--text-primary, #2f3640) !important;
background-color: var(--bg-secondary, white) !important;
}
}
@ -109,18 +111,18 @@
}
select.form-control option {
color: #2f3640;
background-color: white;
color: var(--text-primary, #2f3640);
background-color: var(--bg-secondary, white);
padding: 8px;
}
select.form-control:focus {
color: #2f3640;
background-color: white;
color: var(--text-primary, #2f3640);
background-color: var(--bg-secondary, white);
}
.btn-primary {
background: linear-gradient(135deg, #5b5fcf 0%, #7b7fd0 100%);
background: linear-gradient(135deg, var(--accent-color, #5b5fcf) 0%, var(--accent-hover, #7b7fd0) 100%);
border: none;
border-radius: 8px;
padding: 0.75rem 2rem;
@ -134,13 +136,13 @@
}
.btn-primary:hover {
background: linear-gradient(135deg, #4b4fbf 0%, #6b6fc0 100%);
background: linear-gradient(135deg, var(--accent-hover, #4b4fbf) 0%, var(--accent-hover, #6b6fc0) 100%);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(91, 95, 207, 0.4);
}
.btn-generate {
background: #10b981;
background: var(--success-text, #10b981);
border: none;
color: white;
border-radius: 8px;
@ -151,7 +153,7 @@
}
.btn-generate:hover {
background: #0ea271;
background: var(--success-text, #0ea271);
transform: translateY(-2px);
}
@ -178,17 +180,17 @@
}
.alert-success {
background: rgba(16, 185, 129, 0.1);
color: #065f46;
background: var(--success-bg, rgba(16, 185, 129, 0.1));
color: var(--success-text, #065f46);
}
.alert-danger {
background: rgba(239, 68, 68, 0.1);
color: #991b1b;
background: var(--danger-bg, rgba(239, 68, 68, 0.1));
color: var(--danger-text, #991b1b);
}
.error-text {
color: #ef4444;
color: var(--danger-text, #ef4444);
font-size: 0.875rem;
margin-top: 0.5rem;
}
@ -200,7 +202,7 @@
}
.help-text {
color: #8893a7;
color: var(--text-secondary, #8893a7);
font-size: 0.875rem;
margin-top: 0.25rem;
}

50
userManagment/templates/userManagment/deleteACL.html
View File

@ -22,29 +22,29 @@
.page-title {
font-size: 28px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 8px;
}
.page-subtitle {
font-size: 14px;
color: #8893a7;
color: var(--text-secondary, #8893a7);
}
/* Card styles */
.content-card {
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
padding: 30px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
margin-bottom: 25px;
}
.card-title {
font-size: 18px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 25px;
display: flex;
align-items: center;
@ -55,7 +55,7 @@
content: '';
width: 4px;
height: 24px;
background: #5b5fcf;
background: var(--accent-color, #5b5fcf);
border-radius: 2px;
}
@ -68,7 +68,7 @@
display: block;
font-size: 13px;
font-weight: 600;
color: #64748b;
color: var(--text-secondary, #64748b);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
@ -77,21 +77,21 @@
.form-select {
width: 100%;
padding: 10px 14px;
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
font-size: 14px;
color: #2f3640;
background: white;
color: var(--text-primary, #2f3640);
background: var(--bg-secondary, white);
transition: all 0.2s ease;
}
.form-select:hover {
border-color: #5b5fcf;
border-color: var(--accent-color, #5b5fcf);
}
.form-select:focus {
outline: none;
border-color: #5b5fcf;
border-color: var(--accent-color, #5b5fcf);
box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
}
@ -150,27 +150,27 @@
}
.alert-info {
background: #e3f2fd;
border: 1px solid #bbdefb;
color: #1565c0;
background: var(--info-bg, #e3f2fd);
border: 1px solid var(--info-border, #bbdefb);
color: var(--info-text, #1565c0);
}
.alert-warning {
background: #fff3e0;
border: 1px solid #ffe0b2;
color: #ef6c00;
background: var(--warning-bg, #fff3e0);
border: 1px solid var(--warning-border, #ffe0b2);
color: var(--warning-text, #ef6c00);
}
.alert-success {
background: #e8f5e9;
border: 1px solid #c8e6c9;
color: #2e7d32;
background: var(--success-bg, #e8f5e9);
border: 1px solid var(--success-border, #c8e6c9);
color: var(--success-text, #2e7d32);
}
.alert-danger {
background: #ffebee;
border: 1px solid #ffcdd2;
color: #c62828;
background: var(--danger-bg, #ffebee);
border: 1px solid var(--danger-border, #ffcdd2);
color: var(--danger-text, #c62828);
}
/* Loading spinner */
@ -179,7 +179,7 @@
width: 16px;
height: 16px;
border: 2px solid #f3f3f3;
border-top: 2px solid #5b5fcf;
border-top: 2px solid var(--accent-color, #5b5fcf);
border-radius: 50%;
animation: spin 1s linear infinite;
margin-left: 10px;

47
userManagment/templates/userManagment/deleteUser.html
View File

@ -9,7 +9,7 @@
<style>
body {
background-color: #f0f0ff;
background-color: var(--bg-primary, #f0f0ff);
}
.page-header {
@ -35,40 +35,42 @@
}
.form-card {
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
padding: 2.5rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
}
.section-title {
font-size: 1.5rem;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 2rem;
padding-bottom: 0.75rem;
border-bottom: 3px solid #ef4444;
border-bottom: 3px solid var(--danger-text, #ef4444);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.form-label {
color: #2f3640;
color: var(--text-primary, #2f3640);
font-weight: 600;
margin-bottom: 0.5rem;
}
.form-control {
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
padding: 0.75rem 1rem;
font-size: 1rem;
transition: all 0.3s ease;
background: var(--bg-secondary, white);
color: var(--text-primary, #2f3640);
}
.form-control:focus {
border-color: #5b5fcf;
border-color: var(--accent-color, #5b5fcf);
box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
outline: none;
}
@ -117,43 +119,46 @@
}
.alert-success {
background: rgba(16, 185, 129, 0.1);
color: #065f46;
background: var(--success-bg, rgba(16, 185, 129, 0.1));
color: var(--success-text, #065f46);
border: 1px solid var(--success-border, rgba(16, 185, 129, 0.2));
}
.alert-danger {
background: rgba(239, 68, 68, 0.1);
color: #991b1b;
background: var(--danger-bg, rgba(239, 68, 68, 0.1));
color: var(--danger-text, #991b1b);
border: 1px solid var(--danger-border, rgba(239, 68, 68, 0.2));
}
.alert-warning {
background: rgba(245, 158, 11, 0.1);
color: #92400e;
border-left: 4px solid #f59e0b;
background: var(--warning-bg, rgba(245, 158, 11, 0.1));
color: var(--warning-text, #92400e);
border-left: 4px solid var(--warning-text, #f59e0b);
border: 1px solid var(--warning-border, rgba(245, 158, 11, 0.2));
}
.warning-icon {
color: #f59e0b;
color: var(--warning-text, #f59e0b);
font-size: 1.2rem;
margin-right: 0.5rem;
}
.help-text {
color: #8893a7;
color: var(--text-secondary, #8893a7);
font-size: 0.875rem;
margin-top: 0.25rem;
}
.delete-info {
background: #fff5f5;
border: 1px solid #fee2e2;
background: var(--danger-bg, #fff5f5);
border: 1px solid var(--danger-border, #fee2e2);
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 2rem;
}
.delete-info h4 {
color: #991b1b;
color: var(--danger-text, #991b1b);
font-weight: 600;
margin-bottom: 0.5rem;
}
@ -161,7 +166,7 @@
.delete-info ul {
margin: 0;
padding-left: 1.5rem;
color: #7f1d1d;
color: var(--danger-text, #7f1d1d);
}
.delete-info ul li {

90
userManagment/templates/userManagment/listUsers.html
View File

@ -9,7 +9,7 @@
<style>
body {
background-color: #f0f0ff;
background-color: var(--bg-primary, #f0f0ff);
}
.page-wrapper {
background: transparent;
@ -20,23 +20,23 @@
margin: 0 auto;
}
.content-card {
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
padding: 2rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
border: 1px solid var(--border-color, #e8e9ff);
margin-bottom: 25px;
}
.section-header {
overflow: hidden;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 3px solid #5b5fcf;
border-bottom: 3px solid var(--accent-color, #5b5fcf);
}
.section-title {
font-size: 2rem;
font-weight: 700;
color: #1a1a2e;
color: var(--text-primary, #1a1a2e);
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0;
@ -47,7 +47,7 @@
margin-top: 0.5rem;
}
.btn-primary {
background: linear-gradient(135deg, #5b5fcf 0%, #7b7fd0 100%);
background: linear-gradient(135deg, var(--accent-color, #5b5fcf) 0%, var(--accent-hover, #7b7fd0) 100%);
border: none;
border-radius: 8px;
padding: 0.625rem 1.5rem;
@ -61,7 +61,7 @@
text-decoration: none;
}
.btn-primary:hover {
background: linear-gradient(135deg, #4b4fbf 0%, #6b6fc0 100%);
background: linear-gradient(135deg, var(--accent-hover, #4b4fbf) 0%, var(--accent-hover, #6b6fc0) 100%);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(91, 95, 207, 0.4);
text-decoration: none;
@ -73,31 +73,31 @@
border-collapse: collapse;
}
.table thead th {
background: #f8f9ff;
color: #1a1a2e;
background: var(--bg-hover, #f8f9ff);
color: var(--text-primary, #1a1a2e);
font-weight: 700;
text-transform: uppercase;
font-size: 0.875rem;
letter-spacing: 0.75px;
padding: 1.25rem 1rem;
border: none;
border-bottom: 2px solid #e8e9ff;
border-bottom: 2px solid var(--border-color, #e8e9ff);
text-align: left;
}
.table tbody td {
padding: 1.25rem 1rem;
vertical-align: middle;
color: #2f3640;
color: var(--text-primary, #2f3640);
font-size: 0.9375rem;
border-bottom: 1px solid #f0f0ff;
border-bottom: 1px solid var(--border-color, #f0f0ff);
line-height: 1.5;
}
.table tbody td strong {
color: #1a1a2e;
color: var(--text-primary, #1a1a2e);
font-weight: 600;
}
.table tbody tr:hover {
background: #f8f9ff;
background: var(--bg-hover, #f8f9ff);
}
.btn-action {
padding: 0.5rem 0.875rem;
@ -113,45 +113,45 @@
letter-spacing: 0.3px;
}
.btn-suspend {
color: #ef4444;
background: rgba(239, 68, 68, 0.1);
color: var(--danger-text, #ef4444);
background: var(--danger-bg, rgba(239, 68, 68, 0.1));
border-color: rgba(239, 68, 68, 0.2);
}
.btn-suspend:hover {
background: #ef4444;
background: var(--danger-text, #ef4444);
color: white;
transform: translateY(-2px);
text-decoration: none;
}
.btn-activate {
color: #10b981;
background: rgba(16, 185, 129, 0.1);
color: var(--success-text, #10b981);
background: var(--success-bg, rgba(16, 185, 129, 0.1));
border-color: rgba(16, 185, 129, 0.2);
}
.btn-activate:hover {
background: #10b981;
background: var(--success-text, #10b981);
color: white;
transform: translateY(-2px);
text-decoration: none;
}
.btn-edit {
color: #5b5fcf;
color: var(--accent-color, #5b5fcf);
background: rgba(91, 95, 207, 0.1);
border-color: rgba(91, 95, 207, 0.2);
}
.btn-edit:hover {
background: #5b5fcf;
background: var(--accent-color, #5b5fcf);
color: white;
transform: translateY(-2px);
text-decoration: none;
}
.btn-delete {
color: #ef4444;
background: rgba(239, 68, 68, 0.1);
color: var(--danger-text, #ef4444);
background: var(--danger-bg, rgba(239, 68, 68, 0.1));
border-color: rgba(239, 68, 68, 0.2);
}
.btn-delete:hover {
background: #ef4444;
background: var(--danger-text, #ef4444);
color: white;
transform: translateY(-2px);
text-decoration: none;
@ -164,13 +164,13 @@
letter-spacing: 0.3px;
}
.state-active {
background: rgba(16, 185, 129, 0.15);
color: #065f46;
background: var(--success-bg, rgba(16, 185, 129, 0.15));
color: var(--success-text, #065f46);
border: 1px solid rgba(16, 185, 129, 0.2);
}
.state-suspended {
background: rgba(239, 68, 68, 0.15);
color: #991b1b;
background: var(--danger-bg, rgba(239, 68, 68, 0.15));
color: var(--danger-text, #991b1b);
border: 1px solid rgba(239, 68, 68, 0.2);
}
.loading-icon {
@ -180,24 +180,25 @@
}
.modal-content {
border-radius: 12px;
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
background: var(--bg-secondary, white);
}
.modal-header {
background: #f8f9ff;
border-bottom: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border-bottom: 1px solid var(--border-color, #e8e9ff);
border-radius: 12px 12px 0 0;
padding: 1.5rem;
}
.modal-title {
font-weight: 700;
color: #1a1a2e;
color: var(--text-primary, #1a1a2e);
font-size: 1.25rem;
}
.modal-body {
padding: 2rem;
}
.form-label {
color: #1a1a2e;
color: var(--text-primary, #1a1a2e);
font-weight: 600;
font-size: 0.9375rem;
margin-bottom: 0.5rem;
@ -205,43 +206,44 @@
letter-spacing: 0.3px;
}
.form-control {
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
padding: 0.875rem 1rem;
font-size: 1rem;
transition: all 0.3s ease;
width: 100%;
box-sizing: border-box;
color: #2f3640;
color: var(--text-primary, #2f3640);
background: var(--bg-secondary, white);
line-height: 1.5;
}
.form-control:focus {
border-color: #5b5fcf;
border-color: var(--accent-color, #5b5fcf);
box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
outline: none;
}
.danger-text {
color: #dc2626;
color: var(--danger-text, #dc2626);
font-weight: 600;
font-size: 1rem;
margin-bottom: 1rem;
line-height: 1.5;
}
.btn-danger {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
background: linear-gradient(135deg, var(--danger-text, #ef4444) 0%, var(--danger-text, #dc2626) 100%);
border: none;
color: white;
}
.btn-danger:hover {
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
background: linear-gradient(135deg, var(--danger-text, #dc2626) 0%, var(--danger-text, #b91c1c) 100%);
}
.btn-default {
background: #e5e7eb;
background: var(--bg-hover, #e5e7eb);
border: none;
color: #374151;
color: var(--text-secondary, #374151);
}
.btn-default:hover {
background: #d1d5db;
background: var(--bg-hover, #d1d5db);
}
@media (max-width: 768px) {
.page-container {

70
userManagment/templates/userManagment/modifyACL.html
View File

@ -22,29 +22,29 @@
.page-title {
font-size: 28px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 8px;
}
.page-subtitle {
font-size: 14px;
color: #8893a7;
color: var(--text-secondary, #8893a7);
}
/* Card styles */
.content-card {
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
padding: 30px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
margin-bottom: 25px;
}
.card-title {
font-size: 18px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 25px;
display: flex;
align-items: center;
@ -55,7 +55,7 @@
content: '';
width: 4px;
height: 24px;
background: #5b5fcf;
background: var(--accent-color, #5b5fcf);
border-radius: 2px;
}
@ -68,7 +68,7 @@
display: block;
font-size: 13px;
font-weight: 600;
color: #64748b;
color: var(--text-secondary, #64748b);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
@ -77,21 +77,21 @@
.form-select {
width: 100%;
padding: 10px 14px;
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
font-size: 14px;
color: #2f3640;
background: white;
color: var(--text-primary, #2f3640);
background: var(--bg-secondary, white);
transition: all 0.2s ease;
}
.form-select:hover {
border-color: #5b5fcf;
border-color: var(--accent-color, #5b5fcf);
}
.form-select:focus {
outline: none;
border-color: #5b5fcf;
border-color: var(--accent-color, #5b5fcf);
box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
}
@ -111,7 +111,7 @@
}
.btn-primary {
background: #5b5fcf;
background: var(--accent-color, #5b5fcf);
color: white;
}
@ -136,8 +136,8 @@
}
.permission-category {
background: #f8f9ff;
border: 1px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 10px;
padding: 20px;
}
@ -145,7 +145,7 @@
.category-title {
font-size: 14px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 0.5px;
@ -155,7 +155,7 @@
}
.category-title i {
color: #5b5fcf;
color: var(--accent-color, #5b5fcf);
font-size: 16px;
}
@ -171,16 +171,16 @@
align-items: center;
gap: 10px;
padding: 8px 12px;
background: white;
border: 1px solid #e8e9ff;
background: var(--bg-secondary, white);
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 6px;
transition: all 0.2s ease;
cursor: pointer;
}
.checkbox-wrapper:hover {
border-color: #5b5fcf;
background: #f8f9ff;
border-color: var(--accent-color, #5b5fcf);
background: var(--bg-hover, #f8f9ff);
}
.checkbox-wrapper input[type="checkbox"] {
@ -188,12 +188,12 @@
height: 18px;
border-radius: 4px;
cursor: pointer;
accent-color: #5b5fcf;
accent-color: var(--accent-color, #5b5fcf);
}
.checkbox-label {
font-size: 13px;
color: #2f3640;
color: var(--text-primary, #2f3640);
font-weight: 500;
cursor: pointer;
user-select: none;
@ -202,7 +202,7 @@
/* Master toggle */
.master-toggle {
background: #5b5fcf;
background: var(--accent-color, #5b5fcf);
color: white;
padding: 12px 20px;
border-radius: 8px;
@ -235,21 +235,21 @@
}
.alert-info {
background: #e3f2fd;
border: 1px solid #bbdefb;
color: #1565c0;
background: var(--info-bg, #e3f2fd);
border: 1px solid var(--info-border, #bbdefb);
color: var(--info-text, #1565c0);
}
.alert-success {
background: #e8f5e9;
border: 1px solid #c8e6c9;
color: #2e7d32;
background: var(--success-bg, #e8f5e9);
border: 1px solid var(--success-border, #c8e6c9);
color: var(--success-text, #2e7d32);
}
.alert-danger {
background: #ffebee;
border: 1px solid #ffcdd2;
color: #c62828;
background: var(--danger-bg, #ffebee);
border: 1px solid var(--danger-border, #ffcdd2);
color: var(--danger-text, #c62828);
}
/* Loading spinner */
@ -258,7 +258,7 @@
width: 16px;
height: 16px;
border: 2px solid #f3f3f3;
border-top: 2px solid #5b5fcf;
border-top: 2px solid var(--accent-color, #5b5fcf);
border-radius: 50%;
animation: spin 1s linear infinite;
margin-left: 10px;
@ -289,7 +289,7 @@
.save-container {
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid #e8e9ff;
border-top: 1px solid var(--border-color, #e8e9ff);
display: flex;
justify-content: flex-end;
gap: 12px;

71
userManagment/templates/userManagment/modifyUser.html
View File

@ -9,7 +9,7 @@
<style>
body {
background-color: #f0f0ff;
background-color: var(--bg-primary, #f0f0ff);
}
.page-wrapper {
background: transparent;
@ -20,20 +20,20 @@
margin: 0 auto;
}
.content-card {
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
padding: 2.5rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
border: 1px solid var(--border-color, #e8e9ff);
margin-bottom: 25px;
}
.section-title {
font-size: 2rem;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 2.5rem;
padding-bottom: 1rem;
border-bottom: 3px solid #5b5fcf;
border-bottom: 3px solid var(--accent-color, #5b5fcf);
text-transform: uppercase;
letter-spacing: 0.5px;
text-align: center;
@ -54,27 +54,29 @@
margin-right: 0;
}
.form-label {
color: #2f3640;
color: var(--text-primary, #2f3640);
font-weight: 600;
margin-bottom: 0.5rem;
display: block;
}
.form-control {
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
border-radius: 8px;
padding: 0.75rem 1rem;
font-size: 1rem;
transition: all 0.3s ease;
width: 100%;
box-sizing: border-box;
background: var(--bg-secondary, white);
color: var(--text-primary, #2f3640);
}
.form-control:focus {
border-color: #5b5fcf;
border-color: var(--accent-color, #5b5fcf);
box-shadow: 0 0 0 3px rgba(91, 95, 207, 0.1);
outline: none;
}
.btn-primary {
background: linear-gradient(135deg, #5b5fcf 0%, #7b7fd0 100%);
background: linear-gradient(135deg, var(--accent-color, #5b5fcf) 0%, var(--accent-hover, #7b7fd0) 100%);
border: none;
border-radius: 8px;
padding: 0.75rem 2rem;
@ -87,12 +89,12 @@
cursor: pointer;
}
.btn-primary:hover {
background: linear-gradient(135deg, #4b4fbf 0%, #6b6fc0 100%);
background: linear-gradient(135deg, var(--accent-hover, #4b4fbf) 0%, var(--accent-hover, #6b6fc0) 100%);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(91, 95, 207, 0.4);
}
.btn-generate {
background: #10b981;
background: var(--success-text, #10b981);
border: none;
color: white;
border-radius: 8px;
@ -102,7 +104,7 @@
cursor: pointer;
}
.btn-generate:hover {
background: #0ea271;
background: var(--success-text, #0ea271);
transform: translateY(-2px);
}
.btn-row {
@ -124,15 +126,15 @@
border: none;
}
.alert-success {
background: rgba(16, 185, 129, 0.1);
color: #065f46;
background: var(--success-bg, rgba(16, 185, 129, 0.1));
color: var(--success-text, #065f46);
}
.alert-danger {
background: rgba(239, 68, 68, 0.1);
color: #991b1b;
background: var(--danger-bg, rgba(239, 68, 68, 0.1));
color: var(--danger-text, #991b1b);
}
.error-text {
color: #ef4444;
color: var(--danger-text, #ef4444);
font-size: 0.875rem;
margin-top: 0.5rem;
}
@ -142,27 +144,28 @@
margin-left: 10px;
}
.help-text {
color: #8893a7;
color: var(--text-secondary, #8893a7);
font-size: 0.875rem;
margin-top: 0.25rem;
}
.security-info {
background: #f8f9ff;
border-left: 4px solid #5b5fcf;
background: var(--bg-hover, #f8f9ff);
border-left: 4px solid var(--accent-color, #5b5fcf);
padding: 0.75rem 1rem;
border-radius: 0 8px 8px 0;
color: #5b5fcf;
color: var(--accent-color, #5b5fcf);
font-weight: 600;
}
.checkbox-wrapper {
background: #f8f9ff;
background: var(--bg-hover, #f8f9ff);
padding: 1rem;
border-radius: 8px;
margin-top: 0.5rem;
border: 1px solid var(--border-color, #e8e9ff);
}
.checkbox-wrapper label {
font-weight: 500;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 0;
cursor: pointer;
}
@ -174,9 +177,27 @@
}
#qr {
margin-top: 1rem;
border: 2px solid #e8e9ff;
border: 2px solid var(--border-color, #e8e9ff);
border-radius: 8px;
padding: 10px;
background: var(--bg-secondary, white);
}
.text-muted {
color: var(--text-secondary, #8893a7);
}
.btn-outline-secondary {
background: transparent;
border: 1px solid var(--border-color, #e8e9ff);
color: var(--text-secondary, #8893a7);
padding: 0.75rem 1rem;
border-radius: 0 8px 8px 0;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-outline-secondary:hover {
background: var(--bg-hover, #f8f9ff);
color: var(--accent-color, #5b5fcf);
border-color: var(--accent-color, #5b5fcf);
}
@media (max-width: 768px) {
.page-container {

72
userManagment/templates/userManagment/resellerCenter.html
View File

@ -9,7 +9,7 @@
<style>
body {
background-color: #f0f0ff;
background-color: var(--bg-primary, #f0f0ff);
}
.page-wrapper {
background: transparent;
@ -22,17 +22,17 @@
/* Page Header */
.page-header {
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
padding: 25px;
margin-bottom: 25px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
}
.page-header h1 {
font-size: 28px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin: 0 0 10px 0;
display: flex;
align-items: center;
@ -41,7 +41,7 @@
.page-header .icon {
width: 48px;
height: 48px;
background: #5856d6;
background: var(--accent-color, #5856d6);
border-radius: 12px;
display: flex;
align-items: center;
@ -52,7 +52,7 @@
}
.page-header p {
font-size: 15px;
color: #64748b;
color: var(--text-secondary, #64748b);
margin: 0;
}
@ -64,11 +64,11 @@
margin-bottom: 25px;
}
.stat-card {
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
display: flex;
align-items: center;
gap: 15px;
@ -90,25 +90,25 @@
}
.stat-icon.users {
background: rgba(88,86,214,0.1);
color: #5856d6;
color: var(--accent-color, #5856d6);
}
.stat-icon.sites {
background: rgba(16,185,129,0.1);
color: #10b981;
background: var(--success-bg, rgba(16,185,129,0.1));
color: var(--success-text, #10b981);
}
.stat-icon.resellers {
background: rgba(251,146,60,0.1);
color: #fb923c;
background: var(--warning-bg, rgba(251,146,60,0.1));
color: var(--warning-text, #fb923c);
}
.stat-content h3 {
font-size: 24px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin: 0;
}
.stat-content p {
font-size: 14px;
color: #64748b;
color: var(--text-secondary, #64748b);
margin: 0;
}
@ -120,11 +120,11 @@
}
.content-card {
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
padding: 25px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
}
.content-card.full-width {
@ -134,7 +134,7 @@
.section-title {
font-size: 18px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 20px;
display: flex;
align-items: center;
@ -144,7 +144,7 @@
content: '';
width: 4px;
height: 24px;
background: #5856d6;
background: var(--accent-color, #5856d6);
border-radius: 2px;
}
@ -156,11 +156,12 @@
margin-bottom: 25px;
}
.feature-item {
background: #f8f9ff;
background: var(--bg-hover, #f8f9ff);
border-radius: 8px;
padding: 15px;
text-align: center;
transition: all 0.3s ease;
border: 1px solid var(--border-color, #e8e9ff);
}
.feature-item:hover {
background: #e8e6ff;
@ -168,19 +169,19 @@
}
.feature-item i {
font-size: 28px;
color: #5856d6;
color: var(--accent-color, #5856d6);
margin-bottom: 10px;
display: block;
}
.feature-item h4 {
font-size: 14px;
font-weight: 600;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin: 0 0 5px 0;
}
.feature-item p {
font-size: 12px;
color: #64748b;
color: var(--text-secondary, #64748b);
margin: 0;
}
@ -189,30 +190,31 @@
margin-bottom: 20px;
}
.form-label {
color: #2f3640;
color: var(--text-primary, #2f3640);
font-weight: 600;
margin-bottom: 8px;
display: block;
font-size: 14px;
}
.form-control {
border: 2px solid #e8e9ff;
border: 2px solid var(--border-color, #e8e9ff);
border-radius: 8px;
padding: 12px 16px;
font-size: 15px;
transition: all 0.3s ease;
width: 100%;
box-sizing: border-box;
background: #f8f9ff;
background: var(--bg-hover, #f8f9ff);
color: var(--text-primary, #2f3640);
}
.form-control:focus {
border-color: #5856d6;
border-color: var(--accent-color, #5856d6);
box-shadow: 0 0 0 3px rgba(88,86,214,0.1);
outline: none;
background: white;
background: var(--bg-secondary, white);
}
.help-text {
color: #94a3b8;
color: var(--text-secondary, #94a3b8);
font-size: 13px;
margin-top: 5px;
display: flex;
@ -225,7 +227,7 @@
/* Buttons */
.btn-primary {
background: #5856d6;
background: var(--accent-color, #5856d6);
border: none;
border-radius: 8px;
padding: 12px 28px;
@ -253,13 +255,13 @@
margin-bottom: 20px;
}
.quick-action {
background: #f8f9ff;
border: 2px solid #e8e9ff;
background: var(--bg-hover, #f8f9ff);
border: 2px solid var(--border-color, #e8e9ff);
border-radius: 8px;
padding: 8px 16px;
font-size: 13px;
font-weight: 600;
color: #5856d6;
color: var(--accent-color, #5856d6);
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
@ -267,9 +269,9 @@
gap: 6px;
}
.quick-action:hover {
background: #5856d6;
background: var(--accent-color, #5856d6);
color: white;
border-color: #5856d6;
border-color: var(--accent-color, #5856d6);
}
/* Loading State */

56
userManagment/templates/userManagment/userProfile.html
View File

@ -9,7 +9,7 @@
<style>
body {
background-color: #f0f0ff;
background-color: var(--bg-primary, #f0f0ff);
}
.page-wrapper {
@ -29,28 +29,28 @@
.page-title {
font-size: 28px;
font-weight: 700;
color: #2f3640;
color: var(--text-heading, #2f3640);
margin-bottom: 8px;
}
.page-subtitle {
font-size: 14px;
color: #8893a7;
color: var(--text-secondary, #8893a7);
}
.content-card {
background: white;
background: var(--bg-secondary, white);
border-radius: 12px;
padding: 30px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
border: 1px solid var(--border-color, #e8e9ff);
margin-bottom: 25px;
}
.card-title {
font-size: 18px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 25px;
display: flex;
align-items: center;
@ -61,12 +61,12 @@
content: '';
width: 4px;
height: 24px;
background: #5b5fcf;
background: var(--accent-color, #5b5fcf);
border-radius: 2px;
}
.profile-intro {
background: linear-gradient(135deg, #5b5fcf 0%, #7b7fd0 100%);
background: linear-gradient(135deg, var(--accent-color, #5b5fcf) 0%, var(--accent-hover, #7b7fd0) 100%);
color: white;
padding: 2.5rem;
border-radius: 12px 12px 0 0;
@ -79,7 +79,7 @@
.profile-avatar {
width: 80px;
height: 80px;
background: white;
background: var(--bg-secondary, white);
border-radius: 50%;
display: inline-block;
float: left;
@ -91,7 +91,7 @@
.profile-avatar i {
font-size: 32px;
color: #5b5fcf;
color: var(--accent-color, #5b5fcf);
vertical-align: middle;
line-height: 1;
}
@ -125,17 +125,17 @@
.info-section h3 {
font-size: 16px;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
border-bottom: 2px solid #e8e9ff;
border-bottom: 2px solid var(--border-color, #e8e9ff);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.info-row {
padding: 1rem 0;
border-bottom: 1px solid #f0f0ff;
border-bottom: 1px solid var(--border-color, #f0f0ff);
overflow: hidden;
}
@ -146,7 +146,7 @@
.info-label {
float: left;
width: 200px;
color: #8893a7;
color: var(--text-secondary, #8893a7);
font-weight: 600;
font-size: 13px;
line-height: 1.5;
@ -156,7 +156,7 @@
.info-value {
margin-left: 220px;
color: #2f3640;
color: var(--text-primary, #2f3640);
font-weight: 500;
font-size: 14px;
line-height: 1.5;
@ -171,15 +171,15 @@
}
.status-active {
background: #f0fdf4;
border: 1px solid #bbf7d0;
color: #166534;
background: var(--success-bg, #f0fdf4);
border: 1px solid var(--success-border, #bbf7d0);
color: var(--success-text, #166534);
}
.limit-badge {
background: #f8f9ff;
border: 1px solid #e8e9ff;
color: #5b5fcf;
background: var(--bg-hover, #f8f9ff);
border: 1px solid var(--border-color, #e8e9ff);
color: var(--accent-color, #5b5fcf);
}
.info-icon {
@ -187,7 +187,7 @@
height: 20px;
display: inline-block;
margin-right: 0.5rem;
color: #5b5fcf;
color: var(--accent-color, #5b5fcf);
text-align: center;
}
@ -203,11 +203,11 @@
}
.stat-card {
background: #f8f9ff;
background: var(--bg-hover, #f8f9ff);
padding: 1.5rem;
border-radius: 8px;
text-align: center;
border: 1px solid #e8e9ff;
border: 1px solid var(--border-color, #e8e9ff);
transition: all 0.3s ease;
float: left;
width: 30%;
@ -226,19 +226,19 @@
.stat-icon {
font-size: 2rem;
color: #5b5fcf;
color: var(--accent-color, #5b5fcf);
margin-bottom: 0.5rem;
}
.stat-value {
font-size: 1.8rem;
font-weight: 700;
color: #2f3640;
color: var(--text-primary, #2f3640);
margin-bottom: 0.25rem;
}
.stat-label {
color: #8893a7;
color: var(--text-secondary, #8893a7);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;