diff --git a/exam/Styles/ealg/dark.css b/exam/Styles/ealg/dark.css index d01d265..3dc8bdd 100644 --- a/exam/Styles/ealg/dark.css +++ b/exam/Styles/ealg/dark.css @@ -46,6 +46,22 @@ body::-webkit-scrollbar { box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: all 0.2s ease; 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 { @@ -53,7 +69,7 @@ body::-webkit-scrollbar { } #settings-btn { - right: 120px; + right: 140px; } #settings-btn:hover, #fullscreen-btn:hover { @@ -273,6 +289,10 @@ tr:hover { justify-content: flex-end; gap: 16px; margin-top: 32px; + position: relative; + background-color: #404040; + padding: 16px 0; + border-top: 1px solid #555555; } #save-settings-btn, #close-settings-btn { @@ -283,6 +303,9 @@ tr:hover { border: none; cursor: pointer; transition: all 0.2s ease; + display: flex; + align-items: center; + gap: 8px; } #save-settings-btn { @@ -290,11 +313,21 @@ tr:hover { color: #1C1B1F; } +#save-settings-btn::before { + content: "✓"; + font-size: 18px; +} + #close-settings-btn { background-color: #4A4458; color: #E6E1E5; } +#close-settings-btn::before { + content: "✕"; + font-size: 18px; +} + #save-settings-btn:hover, #close-settings-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.4); diff --git a/exam/Styles/ealg/light.css b/exam/Styles/ealg/light.css index 14538b7..7184fe1 100644 --- a/exam/Styles/ealg/light.css +++ b/exam/Styles/ealg/light.css @@ -46,6 +46,8 @@ body::-webkit-scrollbar { box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: all 0.2s ease; z-index: 1001; + display: flex; + align-items: center; } #fullscreen-btn { @@ -53,7 +55,7 @@ body::-webkit-scrollbar { } #settings-btn { - right: 120px; + right: 140px; } #settings-btn:hover, #fullscreen-btn:hover { @@ -62,6 +64,20 @@ body::-webkit-scrollbar { 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 { padding: 24px; max-width: 100%; @@ -273,6 +289,10 @@ tr:hover { justify-content: flex-end; gap: 16px; margin-top: 32px; + position: relative; + background-color: #FFFFFF; + padding: 16px 0; + border-top: 1px solid #E8DEF8; } #save-settings-btn, #close-settings-btn { @@ -283,6 +303,9 @@ tr:hover { border: none; cursor: pointer; transition: all 0.2s ease; + display: flex; + align-items: center; + gap: 8px; } #save-settings-btn { @@ -300,6 +323,16 @@ tr:hover { 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 { position: fixed; bottom: 24px; diff --git a/exam/Styles/md3/dark.css b/exam/Styles/md3/dark.css index 31125a0..e3dd43a 100644 --- a/exam/Styles/md3/dark.css +++ b/exam/Styles/md3/dark.css @@ -46,6 +46,22 @@ body::-webkit-scrollbar { box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: all 0.2s ease; 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 { @@ -53,7 +69,7 @@ body::-webkit-scrollbar { } #settings-btn { - right: 120px; + right: 140px; } #settings-btn:hover, #fullscreen-btn:hover { @@ -274,6 +290,10 @@ tr:hover { justify-content: flex-end; gap: 16px; margin-top: 32px; + position: relative; + background-color: #2B2930; + padding: 16px 0; + border-top: 1px solid #4A4458; } #save-settings-btn, #close-settings-btn { @@ -284,6 +304,9 @@ tr:hover { border: none; cursor: pointer; transition: all 0.2s ease; + display: flex; + align-items: center; + gap: 8px; } #save-settings-btn { @@ -301,6 +324,16 @@ tr:hover { 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 { position: fixed; bottom: 24px; diff --git a/exam/Styles/md3/light.css b/exam/Styles/md3/light.css index 7b9ffb4..a9af202 100644 --- a/exam/Styles/md3/light.css +++ b/exam/Styles/md3/light.css @@ -46,6 +46,22 @@ body::-webkit-scrollbar { box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: all 0.2s ease; 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 { @@ -53,7 +69,7 @@ body::-webkit-scrollbar { } #settings-btn { - right: 120px; + right: 140px; } #settings-btn:hover, #fullscreen-btn:hover { @@ -274,31 +290,26 @@ tr:hover { justify-content: flex-end; gap: 16px; margin-top: 32px; + position: relative; + background-color: #FFFFFF; + padding: 16px 0; + border-top: 1px solid #E8DEF8; } #save-settings-btn, #close-settings-btn { - padding: 12px 24px; - border-radius: 20px; - font-size: 16px; - font-weight: 500; - border: none; - cursor: pointer; - transition: all 0.2s ease; + display: flex; + align-items: center; + gap: 12px; } -#save-settings-btn { - background-color: #6750A4; - color: #FFFFFF; +#save-settings-btn::before { + content: "✓"; + font-size: 18px; } -#close-settings-btn { - background-color: #E8DEF8; - color: #1C1B1F; -} - -#save-settings-btn:hover, #close-settings-btn:hover { - transform: translateY(-1px); - box-shadow: 0 2px 6px rgba(0,0,0,0.2); +#close-settings-btn::before { + content: "✕"; + font-size: 18px; } .error-container {