ExamAware/ExamCloudSchedule
3
0
Fork 0
mirror of https://hub.gitmirror.com/https://github.com/ExamAware/ExamCloudSchedule synced 2025-04-29 13:46:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(style): 统一MD3

Browse Source
This commit is contained in:
MKStoler1024 2025-04-10 06:47:00 +08:00 committed by GitHub
parent c31c20f705
commit 970b521074
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 360 additions and 434 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

403
present/Styles/dark.css
View File

@ -1,34 +1,28 @@
body { body {
font-family: 'HarmonyOS Sans SC Regular', 'Roboto', Arial, sans-serif; font-family: 'Roboto', 'HarmonyOS Sans SC', sans-serif;
margin: 0; margin: 0;
padding: 0; padding: 0;
background: #1C1B1F; background: #1C1B1F;
color: #E6E1E5; color: #E6E1E5;
overflow: auto; overflow: auto;
animation: fadeIn 1s;
} }
body::-webkit-scrollbar { body::-webkit-scrollbar {
display: none; display: none;
} }
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
#fullscreen-btn, #settings-btn { #fullscreen-btn, #settings-btn {
position: absolute; position: absolute;
top: 20px; top: 20px;
padding: 12px 24px; padding: 12px 24px;
font-size: 0.875rem; font-size: 1rem;
cursor: pointer; cursor: pointer;
background-color: #D0BCFF; background-color: #4A4458;
color: #1C1B1F; color: #E6E1E5;
border: none; border: none;
border-radius: 100px; border-radius: 20px;
box-shadow: 0 1px 3px rgba(0,0,0,0.3); box-shadow: 0 1px 3px rgba(0,0,0,0.3);
transition: box-shadow 0.3s, background-color 0.3s; transition: all 0.2s ease;
z-index: 1001; z-index: 1001;
} }
@ -41,21 +35,25 @@ body::-webkit-scrollbar {
} }
#settings-btn:hover, #fullscreen-btn:hover { #settings-btn:hover, #fullscreen-btn:hover {
background-color: #EADDFF; background-color: #635B70;
box-shadow: 0 4px 8px rgba(0,0,0,0.4); transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0,0,0,0.4);
} }
.container { .container {
padding: 24px;
max-width: 1400px; max-width: 1400px;
margin: auto; margin: auto;
background-color: rgba(45, 44, 49, 0.4); background-color: #2B2930;
border-radius: 28px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
} }
h1 { h1 {
font-size: 3.5rem; font-size: 3.5rem;
font-weight: bold; font-weight: 400;
text-align: left; text-align: left;
margin-bottom: 10px; margin-bottom: 16px;
color: #E6E1E5; color: #E6E1E5;
display: flex; display: flex;
align-items: center; align-items: center;
@ -64,29 +62,27 @@ h1 {
#room { #room {
font-size: 3.5rem; font-size: 3.5rem;
font-weight: bold; font-weight: 400;
color: #E6E1E5; color: #E6E1E5;
position: relative;
right: 0;
margin-left: 20px; margin-left: 20px;
} }
#message { #message {
font-size: 1.5rem; font-size: 1.5rem;
color: #D0BCFF; color: #D0BCFF;
margin-bottom: 20px; margin-bottom: 24px;
} }
.content { .content {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
gap: 3px; gap: 24px;
} }
.left-column, .right-column { .left-column, .right-column {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 3px; gap: 24px;
} }
.left-column { .left-column {
@ -98,83 +94,79 @@ h1 {
} }
.clock-section, .info-section, .right-column { .clock-section, .info-section, .right-column {
background-color: #2D2C31; background-color: #332D41;
border-radius: 28px;
padding: 24px; padding: 24px;
box-shadow: 0 1px 3px rgba(0,0,0,0.3); border-radius: 28px;
margin-bottom: 20px; /* 增加时钟和信息板块之间的间隔 */ box-shadow: 0 2px 6px rgba(0,0,0,0.2);
} }
#current-time { #current-time {
font-size: 8rem; font-size: 8rem;
text-align: center; text-align: center;
color: #E6E1E5; color: #D0BCFF;
margin: 0; margin: 0;
font-weight: bold; font-weight: 400;
} }
#current-subject, #exam-timing, #remaining-time, #status { #current-subject, #exam-timing, #remaining-time, #status {
font-size: 3rem; font-size: 3rem;
margin: 10px 0; margin: 16px 0;
text-align: left; text-align: left;
color: #E6E1E5; color: #E6E1E5;
} }
table { table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: separate;
margin-top: 20px; border-spacing: 0;
margin-top: 24px;
background-color: #332D41;
border-radius: 16px; border-radius: 16px;
border: none;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
background-color: #2D2C31;
overflow: hidden; overflow: hidden;
} }
th, td { th, td {
border: none; padding: 1px;
padding: 0px;
font-size: 1.8rem; font-size: 1.8rem;
text-align: center; text-align: center;
color: #E6E1E5; border-bottom: 1px solid #4A4458;
} }
th { th {
background-color: #49454F; background-color: #4A4458;
color: #E6E1E5; color: #D0BCFF;
font-weight: 500; font-weight: 500;
padding: 12px;
} }
tr:hover { tr:hover {
background-color: #49454F; background-color: #4A4458;
} }
.exam-status-tag { .exam-status-tag {
padding: 6px 12px; padding: 6px 12px;
border-radius: 100px; border-radius: 8px;
font-size: 0.875rem; font-size: 1.2rem;
font-weight: 500; font-weight: 500;
} }
.exam-status-进行中 { .exam-status-进行中 {
background-color: rgba(54, 177, 51, 0.2); background-color: #365534;
color: #81c995; color: #90D480;
} }
.exam-status-即将开始 { .exam-status-即将开始 {
background-color: rgba(255, 180, 0, 0.2); background-color: #594300;
color: #fdd663; color: #FFB960;
} }
.exam-status-已结束 { .exam-status-已结束 {
background-color: rgba(234, 67, 53, 0.2); background-color: #5C1130;
color: #f28b82; color: #FFB3B3;
} }
.exam-status-未开始 { .exam-status-未开始 {
background-color: rgba(255, 255, 255, 0.1); background-color: #4A4458;
color: #dadce0; color: #E6E1E5;
} }
#settings-modal { #settings-modal {
@ -185,149 +177,128 @@ tr:hover {
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.6); background-color: rgba(0,0,0,0.6);
padding-top: 60px; backdrop-filter: blur(8px);
} }
#settings-modal-content { #settings-modal-content {
background: #2D2C31; background: #2B2930;
color: #E6E1E5; padding: 32px 48px 32px 32px;
margin: 32px auto;
border-radius: 28px; border-radius: 28px;
padding: 32px; width: 600px;
max-height: 60vh;
overflow-y: auto;
box-shadow: 0 8px 24px rgba(0,0,0,0.4); box-shadow: 0 8px 24px rgba(0,0,0,0.4);
max-width: 500px; }
width: 90%;
margin: 25px auto; #settings-modal-content::-webkit-scrollbar {
animation: fadeIn 0.5s ease; width: 8px;
}
#settings-modal-content::-webkit-scrollbar-track {
background: transparent;
margin: 4px;
}
#settings-modal-content::-webkit-scrollbar-thumb {
background: #4A4458;
border-radius: 8px;
border: 2px solid #2B2930;
}
#settings-modal-content::-webkit-scrollbar-thumb:hover {
background: #635B70;
} }
#settings-modal-content h3 { #settings-modal-content h3 {
margin: 0 0 20px; margin: 0 0 24px;
color: #E6E1E5; color: #E6E1E5;
font-size: 20px; font-size: 24px;
font-weight: 400;
} }
#settings-modal-content label { #settings-modal-content label {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 16px;
margin: 12px 0; margin: 16px 0;
font-size: 16px; font-size: 16px;
color: #CAC4D0; color: #E6E1E5;
}
#settings-modal-content label[for="offset-time"],
#settings-modal-content label[for="room-input"],
#settings-modal-content label[for="zoom-input"] {
justify-content: space-between;
} }
#settings-modal-content input[type="number"], #settings-modal-content input[type="number"],
#settings-modal-content input[type="text"] { #settings-modal-content input[type="text"] {
background-color: #49454F; font-size: 1.5rem;
color: #E6E1E5; padding: 12px 16px;
border: 1px solid #938F99; margin: 8px 0 24px;
border-radius: 5px;
padding: 12px;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
font-size: 1rem; border: 2px solid #4A4458;
margin-top: 8px; border-radius: 12px;
margin-bottom: 16px; background-color: #332D41;
color: #E6E1E5;
transition: all 0.2s ease;
} }
#settings-modal-content input:focus { #settings-modal-content input:focus {
border-color: #D0BCFF;
box-shadow: 0 0 0 1px #D0BCFF;
outline: none; outline: none;
} border-color: #D0BCFF;
background-color: #4A4458;
#settings-modal-content button {
padding: 12px 24px;
font-size: 0.875rem;
font-weight: 500;
border: none;
border-radius: 100px;
cursor: pointer;
background: #D0BCFF;
color: #1C1B1F;
transition: all 0.3s ease;
}
#settings-modal-content button:hover {
background: #EADDFF;
transform: translateY(-1px);
}
#close-settings-btn {
padding: 10px 20px;
font-size: 2rem;
cursor: pointer;
background-color: #B3261E !important;
color: #E6E1E5 !important;
border: none;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
transition: background-color 0.3s ease;
}
#close-settings-btn:hover {
background-color: #930D0D !important;
} }
.button-group { .button-group {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: 10px; gap: 16px;
margin-top: 24px; margin-top: 32px;
} }
.config-file-container { #save-settings-btn, #close-settings-btn {
margin: 12px 0; padding: 12px 24px;
padding: 16px; border-radius: 20px;
border: 1px solid #938F99; font-size: 16px;
border-radius: 8px; font-weight: 500;
background-color: #49454F; border: none;
}
.config-file-container label {
display: block;
margin-bottom: 8px;
color: #E6E1E5;
}
.config-file-container input[type="file"] {
display: block;
width: 100%;
padding: 12px;
border: 1px solid #938F99;
border-radius: 4px;
background-color: #49454F;
color: #E6E1E5;
cursor: pointer; cursor: pointer;
margin-bottom: 8px; transition: all 0.2s ease;
} }
.config-file-container input[type="file"]:hover { #save-settings-btn {
background-color: #605D64; background-color: #D0BCFF;
color: #1C1B1F;
} }
.file-hint { #close-settings-btn {
color: #CAC4D0; background-color: #4A4458;
color: #E6E1E5;
}
#save-settings-btn:hover, #close-settings-btn:hover {
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.error-container {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
background: #5C1130;
color: #FFB3B3;
padding: 16px 24px;
border-radius: 16px;
display: none;
z-index: 10001;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
animation: slideUp 0.3s ease;
} }
.switch { .switch {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 60px; width: 52px;
height: 34px; height: 32px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
} }
.slider { .slider {
@ -337,20 +308,20 @@ tr:hover {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: #49454F; background-color: #4A4458;
transition: .4s; transition: .3s;
border-radius: 34px; border-radius: 16px;
} }
.slider:before { .slider:before {
position: absolute; position: absolute;
content: ""; content: "";
height: 26px; height: 24px;
width: 26px; width: 24px;
left: 4px; left: 4px;
bottom: 4px; bottom: 4px;
background-color: #E6E1E5; background-color: #E6E1E5;
transition: .4s; transition: .3s;
border-radius: 50%; border-radius: 50%;
} }
@ -359,69 +330,77 @@ input:checked + .slider {
} }
input:checked + .slider:before { input:checked + .slider:before {
transform: translateX(26px); transform: translateX(20px);
background-color: #1C1B1F;
} }
.theme-toggle-container { .config-file-container {
display: flex; margin: 24px 0;
align-items: center; padding: 24px;
justify-content: space-between; border: 2px solid #4A4458;
gap: 10px; border-radius: 20px;
margin: 12px 0; background-color: #2B2930;
transition: all 0.2s ease;
}
.config-file-container:hover {
border-color: #D0BCFF;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.config-file-container input[type="file"] {
max-width: 100%;
width: auto;
box-sizing: border-box;
padding: 12px;
border: 2px dashed #4A4458;
border-radius: 16px;
background-color: #332D41;
color: #E6E1E5;
cursor: pointer;
transition: all 0.2s ease;
}
.config-file-container input[type="file"]::-webkit-file-upload-button {
padding: 8px 16px;
margin-right: 12px;
background-color: #4A4458;
color: #E6E1E5;
border: none;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
}
.config-file-container input[type="file"]::-webkit-file-upload-button:hover {
background-color: #635B70;
}
.file-hint {
margin-top: 12px;
font-size: 14px;
color: #CAC4D0;
line-height: 1.5;
} }
.config-control-btn { .config-control-btn {
margin-top: 10px; margin-top: 20px;
padding: 8px 16px; padding: 12px 28px;
background-color: #B3261E !important; background-color: #4A4458;
color: #E6E1E5 !important; color: #E6E1E5;
border: none; border: none;
border-radius: 4px; border-radius: 24px;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
transition: background-color 0.3s ease; font-weight: 500;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
} }
.config-control-btn:hover { .config-control-btn:hover {
background-color: #930D0D !important; background-color: #635B70;
} transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
.error-container {
background: #B3261E;
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 16px 24px;
color: white;
display: none;
z-index: 10001;
animation: slideUp 0.3s ease;
}
@keyframes slideUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.error-content {
max-width: 800px;
margin: 0 auto;
font-size: 15px;
display: flex;
align-items: center;
gap: 12px;
}
.error-content:before {
content: '!';
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: #E6E1E5;
color: #B3261E;
border-radius: 50%;
font-weight: bold;
} }

385
present/Styles/light.css
View File

@ -1,8 +1,8 @@
body { body {
font-family: 'HarmonyOS Sans SC Regular', 'Roboto', Arial, sans-serif; font-family: 'Roboto', 'HarmonyOS Sans SC', sans-serif;
margin: 0; margin: 0;
padding: 0; padding: 0;
background: #FAFBFF; background: #FFFBFE;
color: #1C1B1F; color: #1C1B1F;
overflow: auto; overflow: auto;
} }
@ -11,23 +11,19 @@ body::-webkit-scrollbar {
display: none; display: none;
} }
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
#fullscreen-btn, #settings-btn { #fullscreen-btn, #settings-btn {
position: absolute; position: absolute;
top: 20px; top: 20px;
padding: 12px 24px; padding: 12px 24px;
font-size: 0.875rem; font-size: 1rem;
cursor: pointer; cursor: pointer;
background-color: #6750A4; background-color: #E8DEF8;
color: #fff; color: #1C1B1F;
border: none; border: none;
border-radius: 100px; border-radius: 20px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12); box-shadow: 0 1px 3px rgba(0,0,0,0.1);
transition: box-shadow 0.3s, background-color 0.3s; transition: all 0.2s ease;
z-index: 1001;
} }
#fullscreen-btn { #fullscreen-btn {
@ -39,22 +35,26 @@ body::-webkit-scrollbar {
} }
#settings-btn:hover, #fullscreen-btn:hover { #settings-btn:hover, #fullscreen-btn:hover {
background-color: #7965AF; background-color: #D0BCFF;
box-shadow: 0 4px 8px rgba(0,0,0,0.2); transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
} }
.container { .container {
padding: 24px;
max-width: 1400px; max-width: 1400px;
margin: auto; margin: auto;
background-color: #FAFBFF; background-color: #F7F2FA;
border-radius: 28px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
} }
h1 { h1 {
font-size: 3.5rem; font-size: 3.5rem;
font-weight: bold; font-weight: 400;
text-align: left; text-align: left;
margin-bottom: 10px; margin-bottom: 16px;
color: #333; color: #1C1B1F;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -62,29 +62,27 @@ h1 {
#room { #room {
font-size: 3.5rem; font-size: 3.5rem;
font-weight: bold; font-weight: 400;
color: #333; color: #1C1B1F;
position: relative;
right: 0;
margin-left: 20px; margin-left: 20px;
} }
#message { #message {
font-size: 1.5rem; font-size: 1.5rem;
color: #6750A4; color: #6750A4;
margin-bottom: 20px; margin-bottom: 24px;
} }
.content { .content {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
gap: 3px; gap: 24px;
} }
.left-column, .right-column { .left-column, .right-column {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 3px; gap: 24px;
} }
.left-column { .left-column {
@ -96,103 +94,79 @@ h1 {
} }
.clock-section, .info-section, .right-column { .clock-section, .info-section, .right-column {
background-color: #fff; background-color: #FFFFFF;
border-radius: 28px;
padding: 24px; padding: 24px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1); border-radius: 28px;
} box-shadow: 0 2px 6px rgba(0,0,0,0.1);
.clock-section, .info-section {
margin-bottom: 20px; /* 增加时钟和信息板块之间的间隔 */
} }
#current-time { #current-time {
font-size: 8rem; font-size: 8rem;
text-align: center; text-align: center;
color: #333; color: #6750A4;
margin: 0; margin: 0;
font-weight: bold; font-weight: 400;
} }
#current-subject, #exam-timing, #remaining-time, #status { #current-subject, #exam-timing, #remaining-time, #status {
font-size: 3rem; font-size: 3rem;
margin: 10px 0; margin: 16px 0;
text-align: left; text-align: left;
color: #333; color: #1C1B1F;
} }
table { table {
width: 100%; width: 100%;
border-collapse: separate; border-collapse: separate;
border-spacing: 0; border-spacing: 0;
margin-top: 20px; margin-top: 24px;
background-color: #FFFFFF;
border-radius: 16px; border-radius: 16px;
border: none;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
background-color: #fff;
overflow: hidden; overflow: hidden;
} }
th:first-child {
border-top-left-radius: 16px;
}
th:last-child {
border-top-right-radius: 16px;
}
th, td { th, td {
border: none; padding: 1px;
padding: 0px;
font-size: 1.8rem; font-size: 1.8rem;
text-align: center; text-align: center;
border-bottom: 1px solid #E8DEF8;
} }
th { th {
background-color: #F4EEFF; background-color: #E8DEF8;
color: #1C1B1F; color: #1C1B1F;
font-weight: 500; font-weight: 500;
} }
tr:hover { tr:hover {
background-color: #f0f0f0; background-color: #F7F2FA;
}
td:first-child {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
td:last-child {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
} }
.exam-status-tag { .exam-status-tag {
padding: 6px 12px; padding: 6px 12px;
border-radius: 100px; border-radius: 8px;
font-size: 0.875rem; font-size: 1.2rem;
font-weight: 500; font-weight: 500;
} }
.exam-status-进行中 { .exam-status-进行中 {
background-color: #E6F4EA; background-color: #DDF4D7;
color: #1E8E3E; color: #365534;
} }
.exam-status-即将开始 { .exam-status-即将开始 {
background-color: #FEF7E0; background-color: #FFF2D6;
color: #B95000; color: #594300;
} }
.exam-status-已结束 { .exam-status-已结束 {
background-color: #FCE8E6; background-color: #FFDAD6;
color: #D93025; color: #5C1130;
} }
.exam-status-未开始 { .exam-status-未开始 {
background-color: #F3F3F3; background-color: #E8DEF8;
color: #5F6368; color: #1C1B1F;
} }
#settings-modal { #settings-modal {
@ -203,168 +177,128 @@ td:last-child {
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto; background-color: rgba(0,0,0,0.3);
background-color: rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px);
padding-top: 60px;
} }
#settings-modal-content { #settings-modal-content {
background: #fff; background: #FFFFFF;
padding: 32px 48px 32px 32px;
margin: 32px auto;
border-radius: 28px; border-radius: 28px;
padding: 32px; width: 600px;
box-shadow: 0 8px 24px rgba(0,0,0,0.12); max-height: 60vh;
max-width: 500px; overflow-y: auto;
width: 90%; box-shadow: 0 8px 24px rgba(0,0,0,0.2);
margin: 25px auto;
animation: fadeIn 0.5s ease;
} }
@keyframes fadeIn { #settings-modal-content::-webkit-scrollbar {
from { opacity: 0; transform: translateY(-20px); } width: 8px;
to { opacity: 1; transform: translateY(0); }
} }
@keyframes fadeOut { #settings-modal-content::-webkit-scrollbar-track {
from { opacity: 1; transform: translateY(0); } background: transparent;
to { opacity: 0; transform: translateY(-20px); } margin: 4px;
} }
.fade-out { #settings-modal-content::-webkit-scrollbar-thumb {
animation: fadeOut 0.3s ease; background: #E8DEF8;
border-radius: 8px;
border: 2px solid #FFFFFF;
}
#settings-modal-content::-webkit-scrollbar-thumb:hover {
background: #D0BCFF;
} }
#settings-modal-content h3 { #settings-modal-content h3 {
margin: 0 0 20px; margin: 0 0 24px;
color: #1C1B1F; color: #1C1B1F;
font-size: 20px; font-size: 24px;
font-weight: 400;
} }
#settings-modal-content label { #settings-modal-content label {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 16px;
margin: 12px 0; margin: 16px 0;
font-size: 16px; font-size: 16px;
color: #666; color: #1C1B1F;
}
#settings-modal-content label[for="offset-time"],
#settings-modal-content label[for="room-input"],
#settings-modal-content label[for="zoom-input"] {
justify-content: space-between;
} }
#settings-modal-content input[type="number"], #settings-modal-content input[type="number"],
#settings-modal-content input[type="text"] { #settings-modal-content input[type="text"] {
background-color: #F4EEFF; font-size: 1.5rem;
color: #1C1B1F; padding: 12px 16px;
border: 1px solid #938F99; margin: 8px 0 24px;
border-radius: 5px;
padding: 12px;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
font-size: 1rem; border: 2px solid #E8DEF8;
margin-top: 8px; border-radius: 12px;
margin-bottom: 16px; background-color: #FFFFFF;
color: #1C1B1F;
transition: all 0.2s ease;
} }
#settings-modal-content input:focus { #settings-modal-content input:focus {
border-color: #6750A4;
box-shadow: 0 0 0 1px #6750A4;
outline: none; outline: none;
border-color: #6750A4;
background-color: #F7F2FA;
} }
.button-group { .button-group {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: 10px; gap: 16px;
margin-top: 24px; margin-top: 32px;
} }
#settings-modal-content button { #save-settings-btn, #close-settings-btn {
padding: 12px 24px; padding: 12px 24px;
font-size: 0.875rem; border-radius: 20px;
font-size: 16px;
font-weight: 500; font-weight: 500;
border: none; border: none;
border-radius: 100px;
cursor: pointer; cursor: pointer;
background: #6750A4; transition: all 0.2s ease;
color: #fff;
transition: all 0.3s ease;
} }
#settings-modal-content button:hover { #save-settings-btn {
background: #7965AF; background-color: #6750A4;
transform: translateY(-1px); color: #FFFFFF;
} }
#close-settings-btn { #close-settings-btn {
padding: 10px 20px; background-color: #E8DEF8;
font-size: 2rem; color: #1C1B1F;
cursor: pointer;
background-color: #B3261E !important;
color: #fff !important;
border: none;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease;
} }
#close-settings-btn:hover { #save-settings-btn:hover, #close-settings-btn:hover {
background-color: #930D0D !important; transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
} }
.error-container { .error-container {
position: fixed; position: fixed;
bottom: 0; bottom: 24px;
left: 0; left: 50%;
right: 0; transform: translateX(-50%);
background: #B3261E; background: #FFDAD6;
color: #5C1130;
padding: 16px 24px; padding: 16px 24px;
color: white; border-radius: 16px;
display: none; display: none;
z-index: 10001; z-index: 10001;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
animation: slideUp 0.3s ease; animation: slideUp 0.3s ease;
} }
@keyframes slideUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.error-content {
max-width: 800px;
margin: 0 auto;
font-size: 15px;
display: flex;
align-items: center;
gap: 12px;
}
.error-content:before {
content: '!';
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: white;
color: #ff6b6b;
border-radius: 50%;
font-weight: bold;
}
.switch { .switch {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 60px; width: 52px;
height: 34px; height: 32px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
} }
.slider { .slider {
@ -374,86 +308,99 @@ td:last-child {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: #ccc; background-color: #E8DEF8;
transition: .4s; transition: .3s;
border-radius: 34px; border-radius: 16px;
} }
.slider:before { .slider:before {
position: absolute; position: absolute;
content: ""; content: "";
height: 26px; height: 24px;
width: 26px; width: 24px;
left: 4px; left: 4px;
bottom: 4px; bottom: 4px;
background-color: white; background-color: #FFFFFF;
transition: .4s; transition: .3s;
border-radius: 50%; border-radius: 50%;
} }
input:checked + .slider { input:checked + .slider {
background-color: #2196F3; background-color: #6750A4;
} }
input:checked + .slider:before { input:checked + .slider:before {
transform: translateX(26px); transform: translateX(20px);
} background-color: #FFFFFF;
theme-toggle-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 12px 0;
} }
.config-file-container { .config-file-container {
margin: 12px 0; margin: 24px 0;
padding: 10px; padding: 24px;
border: 1px solid #ccc; border: 2px solid #E8DEF8;
border-radius: 5px; border-radius: 20px;
background-color: rgba(255, 255, 255, 0.5); background-color: #F7F2FA;
transition: all 0.2s ease;
} }
.config-file-container label { .config-file-container:hover {
display: block; border-color: #6750A4;
margin-bottom: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
color: #333;
} }
.config-file-container input[type="file"] { .config-file-container input[type="file"] {
display: block; max-width: 100%;
width: 100%; width: auto;
padding: 8px; box-sizing: border-box;
border: 1px solid #ccc; padding: 12px;
border-radius: 4px; border: 2px dashed #E8DEF8;
background-color: #fff; border-radius: 16px;
color: #333; background-color: #FFFFFF;
color: #1C1B1F;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease;
} }
.config-file-container input[type="file"]:hover { .config-file-container input[type="file"]::-webkit-file-upload-button {
background-color: #f5f5f5; padding: 8px 16px;
margin-right: 12px;
background-color: #E8DEF8;
color: #1C1B1F;
border: none;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
}
.config-file-container input[type="file"]::-webkit-file-upload-button:hover {
background-color: #D0BCFF;
} }
.file-hint { .file-hint {
margin-top: 4px; margin-top: 12px;
font-size: 12px; font-size: 14px;
color: #666; color: #49454F;
line-height: 1.5;
} }
.config-control-btn { .config-control-btn {
margin-top: 10px; margin-top: 20px;
padding: 8px 16px; padding: 12px 28px;
background-color: #B3261E !important; background-color: #E8DEF8;
color: white !important; color: #1C1B1F;
border: none; border: none;
border-radius: 4px; border-radius: 24px;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
transition: background-color 0.3s ease; font-weight: 500;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
} }
.config-control-btn:hover { .config-control-btn:hover {
background-color: #930D0D !important; background-color: #D0BCFF;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
} }