diff --git a/index.html b/index.html index 95db2dc..00e71db 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@ - + @@ -49,6 +49,8 @@ .app-theme { position: fixed; right: 1rem; top: 1rem; user-select: none; color: var(--sub-text-color); transition: 0.9s; } .app-icons-container { position: fixed; left: 0rem; bottom: 0rem; user-select: none; fill: var(--main-text-color); cursor: pointer; } .app-buttons { display: flex; flex-direction: column; gap: 0.5rem} + .app-icon-button { background: none; border: none; color: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } + .app-icon-button:focus-visible { outline: 2px solid var(--sub-text-color); outline-offset: 2px; border-radius: 8px; } .app-full { width: 24px; height: 24px; padding: 1rem; } .app-book { width: 24px; height: 24px; padding: 1rem; } .app-cog { width: 24px; height: 24px; padding: 1rem; } @@ -58,11 +60,10 @@ .theme-text { position: absolute; right: 0; transition: opacity 0.9s ease; opacity: 1; } .theme-text.hidden { opacity: 0; } /* 모달 */ - .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 20px; box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1); width: 100%; max-width: 600px; margin: 0 auto; background-color: var(--bg-color); border: 1px solid var(--sub-text-color); } .modal-content { display: flex; flex-direction: column; justify-content: center; } .modal-guide-line { font-size: 14px; font-weight: bold; letter-spacing: 1.5px; color: var(--main-text-color); } .modal-heading { margin-top: 24px; font-size: 28px; font-weight: bold; color: var(--sub-text-color); } - .modal-close-button { background-color: var(--sub-text-color); color: var(--bg-color); font-size: 14px; font-weight: 600; width: 100%; max-width: 320px; min-height: 44px; margin: 0 auto; display: grid; place-items: center; border-radius: 2rem; text-align: center; cursor: pointer; margin-top: 2rem; } + .modal-close-button { background-color: var(--sub-text-color); color: var(--bg-color); font-size: 14px; font-weight: 600; width: 100%; max-width: 320px; min-height: 44px; margin: 0 auto; display: grid; place-items: center; border-radius: 2rem; text-align: center; cursor: pointer; margin-top: 2rem; border: none; } .modal-close-button:hover { background-color: var(--main-text-color); } .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; gap: 1rem; padding: 2rem 3rem; overflow-y: auto; border-radius: 20px; box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1); width: 60%; max-width: 600px; max-height: 80%; margin: 0 auto; background-color: var(--bg-color); border: 1px solid var(--sub-text-color); opacity: 1; transition: 0.9s; z-index: 50; } @@ -201,7 +202,10 @@ select {
-
+
+
+
+
00
@@ -264,10 +268,10 @@ select {
-
-
-
-
+ + + +
@@ -294,7 +298,42 @@ select {