mirror of
https://github.com/ExamAware/ExamSchedule.git
synced 2025-04-29 19:16:33 +00:00
feat: 添加 Material Icons 字体支持,优化按钮样式和布局
This commit is contained in:
parent
5d9879a964
commit
ffbf6569f5
@ -46,6 +46,22 @@ body::-webkit-scrollbar {
|
|||||||
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
z-index: 1001;
|
z-index: 1001;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#fullscreen-btn::before {
|
||||||
|
content: "fullscreen";
|
||||||
|
font-family: 'Material Icons';
|
||||||
|
font-size: 20px;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings-btn::before {
|
||||||
|
content: "settings";
|
||||||
|
font-family: 'Material Icons';
|
||||||
|
font-size: 20px;
|
||||||
|
margin-right: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#fullscreen-btn {
|
#fullscreen-btn {
|
||||||
@ -53,7 +69,7 @@ body::-webkit-scrollbar {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#settings-btn {
|
#settings-btn {
|
||||||
right: 120px;
|
right: 140px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#settings-btn:hover, #fullscreen-btn:hover {
|
#settings-btn:hover, #fullscreen-btn:hover {
|
||||||
@ -273,6 +289,10 @@ tr:hover {
|
|||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
margin-top: 32px;
|
margin-top: 32px;
|
||||||
|
position: relative;
|
||||||
|
background-color: #404040;
|
||||||
|
padding: 16px 0;
|
||||||
|
border-top: 1px solid #555555;
|
||||||
}
|
}
|
||||||
|
|
||||||
#save-settings-btn, #close-settings-btn {
|
#save-settings-btn, #close-settings-btn {
|
||||||
@ -283,6 +303,9 @@ tr:hover {
|
|||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#save-settings-btn {
|
#save-settings-btn {
|
||||||
@ -290,11 +313,21 @@ tr:hover {
|
|||||||
color: #1C1B1F;
|
color: #1C1B1F;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#save-settings-btn::before {
|
||||||
|
content: "✓";
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
#close-settings-btn {
|
#close-settings-btn {
|
||||||
background-color: #4A4458;
|
background-color: #4A4458;
|
||||||
color: #E6E1E5;
|
color: #E6E1E5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#close-settings-btn::before {
|
||||||
|
content: "✕";
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
#save-settings-btn:hover, #close-settings-btn:hover {
|
#save-settings-btn:hover, #close-settings-btn:hover {
|
||||||
transform: translateY(-1px);
|
transform: translateY(-1px);
|
||||||
box-shadow: 0 2px 6px rgba(0,0,0,0.4);
|
box-shadow: 0 2px 6px rgba(0,0,0,0.4);
|
||||||
|
@ -46,6 +46,8 @@ body::-webkit-scrollbar {
|
|||||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
z-index: 1001;
|
z-index: 1001;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#fullscreen-btn {
|
#fullscreen-btn {
|
||||||
@ -53,7 +55,7 @@ body::-webkit-scrollbar {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#settings-btn {
|
#settings-btn {
|
||||||
right: 120px;
|
right: 140px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#settings-btn:hover, #fullscreen-btn:hover {
|
#settings-btn:hover, #fullscreen-btn:hover {
|
||||||
@ -62,6 +64,20 @@ body::-webkit-scrollbar {
|
|||||||
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
|
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#settings-btn::before {
|
||||||
|
content: "settings";
|
||||||
|
font-family: 'Material Icons';
|
||||||
|
font-size: 20px;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#fullscreen-btn::before {
|
||||||
|
content: "fullscreen";
|
||||||
|
font-family: 'Material Icons';
|
||||||
|
font-size: 20px;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
@ -273,6 +289,10 @@ tr:hover {
|
|||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
margin-top: 32px;
|
margin-top: 32px;
|
||||||
|
position: relative;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
padding: 16px 0;
|
||||||
|
border-top: 1px solid #E8DEF8;
|
||||||
}
|
}
|
||||||
|
|
||||||
#save-settings-btn, #close-settings-btn {
|
#save-settings-btn, #close-settings-btn {
|
||||||
@ -283,6 +303,9 @@ tr:hover {
|
|||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#save-settings-btn {
|
#save-settings-btn {
|
||||||
@ -300,6 +323,16 @@ tr:hover {
|
|||||||
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
|
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#save-settings-btn::before {
|
||||||
|
content: "✓";
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#close-settings-btn::before {
|
||||||
|
content: "✕";
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
.error-container {
|
.error-container {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 24px;
|
bottom: 24px;
|
||||||
|
@ -46,6 +46,22 @@ body::-webkit-scrollbar {
|
|||||||
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
z-index: 1001;
|
z-index: 1001;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#fullscreen-btn::before {
|
||||||
|
content: "fullscreen";
|
||||||
|
font-family: 'Material Icons';
|
||||||
|
font-size: 20px;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings-btn::before {
|
||||||
|
content: "settings";
|
||||||
|
font-family: 'Material Icons';
|
||||||
|
font-size: 20px;
|
||||||
|
margin-right: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#fullscreen-btn {
|
#fullscreen-btn {
|
||||||
@ -53,7 +69,7 @@ body::-webkit-scrollbar {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#settings-btn {
|
#settings-btn {
|
||||||
right: 120px;
|
right: 140px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#settings-btn:hover, #fullscreen-btn:hover {
|
#settings-btn:hover, #fullscreen-btn:hover {
|
||||||
@ -274,6 +290,10 @@ tr:hover {
|
|||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
margin-top: 32px;
|
margin-top: 32px;
|
||||||
|
position: relative;
|
||||||
|
background-color: #2B2930;
|
||||||
|
padding: 16px 0;
|
||||||
|
border-top: 1px solid #4A4458;
|
||||||
}
|
}
|
||||||
|
|
||||||
#save-settings-btn, #close-settings-btn {
|
#save-settings-btn, #close-settings-btn {
|
||||||
@ -284,6 +304,9 @@ tr:hover {
|
|||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#save-settings-btn {
|
#save-settings-btn {
|
||||||
@ -301,6 +324,16 @@ tr:hover {
|
|||||||
box-shadow: 0 2px 6px rgba(0,0,0,0.4);
|
box-shadow: 0 2px 6px rgba(0,0,0,0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#save-settings-btn::before {
|
||||||
|
content: "✓";
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#close-settings-btn::before {
|
||||||
|
content: "✕";
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
.error-container {
|
.error-container {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 24px;
|
bottom: 24px;
|
||||||
|
@ -46,6 +46,22 @@ body::-webkit-scrollbar {
|
|||||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
z-index: 1001;
|
z-index: 1001;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#fullscreen-btn::before {
|
||||||
|
content: "fullscreen";
|
||||||
|
font-family: 'Material Icons';
|
||||||
|
font-size: 20px;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings-btn::before {
|
||||||
|
content: "settings";
|
||||||
|
font-family: 'Material Icons';
|
||||||
|
font-size: 20px;
|
||||||
|
margin-right: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#fullscreen-btn {
|
#fullscreen-btn {
|
||||||
@ -53,7 +69,7 @@ body::-webkit-scrollbar {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#settings-btn {
|
#settings-btn {
|
||||||
right: 120px;
|
right: 140px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#settings-btn:hover, #fullscreen-btn:hover {
|
#settings-btn:hover, #fullscreen-btn:hover {
|
||||||
@ -274,31 +290,26 @@ tr:hover {
|
|||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
margin-top: 32px;
|
margin-top: 32px;
|
||||||
|
position: relative;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
padding: 16px 0;
|
||||||
|
border-top: 1px solid #E8DEF8;
|
||||||
}
|
}
|
||||||
|
|
||||||
#save-settings-btn, #close-settings-btn {
|
#save-settings-btn, #close-settings-btn {
|
||||||
padding: 12px 24px;
|
display: flex;
|
||||||
border-radius: 20px;
|
align-items: center;
|
||||||
font-size: 16px;
|
gap: 12px;
|
||||||
font-weight: 500;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#save-settings-btn {
|
#save-settings-btn::before {
|
||||||
background-color: #6750A4;
|
content: "✓";
|
||||||
color: #FFFFFF;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#close-settings-btn {
|
#close-settings-btn::before {
|
||||||
background-color: #E8DEF8;
|
content: "✕";
|
||||||
color: #1C1B1F;
|
font-size: 18px;
|
||||||
}
|
|
||||||
|
|
||||||
#save-settings-btn:hover, #close-settings-btn:hover {
|
|
||||||
transform: translateY(-1px);
|
|
||||||
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-container {
|
.error-container {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user