From 1bdaeaf0ac12c69d9d45f36b1f5149c844d093e7 Mon Sep 17 00:00:00 2001 From: RainyXeon Date: Thu, 4 Jul 2024 23:18:43 +0700 Subject: [PATCH] add: bottom slide animation for modal This commit will add animation for modal that commit from the bottom (quite goofy) and click animation for theme-switch language-switch and close-modal icon --- webroot/css/index.css | 22 ++++++++++++++++++++-- webroot/index.html | 15 +++++++++------ webroot/js/list/lang.js | 2 +- webroot/js/modal/lang.js | 4 ++-- 4 files changed, 32 insertions(+), 11 deletions(-) diff --git a/webroot/css/index.css b/webroot/css/index.css index 7a13755..bee779a 100644 --- a/webroot/css/index.css +++ b/webroot/css/index.css @@ -29,7 +29,7 @@ a { text-decoration: none !important; } -.full_screen { +.load_screen { position: fixed; width: 100%; height: 100%; @@ -42,6 +42,16 @@ a { align-items: center; } +.full_screen { + position: fixed; + z-index: 10; + top: 0; + bottom: 0; + left: 0; + right: 0; + transition: top 0.25s ease-in-out; +} + .loader { border: 6px solid var(--icon-bc); border-top: 6px solid var(--icon); @@ -104,7 +114,7 @@ a { .list { max-height: 25px; overflow-y: hidden; - transition: max-height 0.25s ease-in-out; + transition: max-height 0.25s ease; } .full { @@ -153,6 +163,14 @@ a { background: var(--icon); } +.icon_animation { + transition: transform 0.05s ease-in-out; +} + +.icon_animation:active { + transform: scale(80%) +} + /* Card type */ .bright { border: 5px solid var(--bright); diff --git a/webroot/index.html b/webroot/index.html index d077797..011bac4 100644 --- a/webroot/index.html +++ b/webroot/index.html @@ -15,14 +15,17 @@ -
+
-