feat: 添加 Material Icons 字体支持,优化按钮样式和布局

This commit is contained in:
MKStoler1024 2025-04-12 14:49:27 +00:00
parent 5d9879a964
commit ffbf6569f5
4 changed files with 132 additions and 22 deletions

View File

@ -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);

View File

@ -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;

View File

@ -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;

View File

@ -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 {