diff --git a/public/css/modals.css b/public/css/modals.css index af1a1a3..edf12fb 100644 --- a/public/css/modals.css +++ b/public/css/modals.css @@ -25,6 +25,7 @@ .modal-header { padding: 16px 24px; border-bottom: 1px solid #202225; + align-content: center; } .modal-title { @@ -53,6 +54,8 @@ padding: 16px 24px; font-size: 16px; line-height: 1.5; + text-align: center; + min-height: 200px; } .modal-footer { @@ -108,39 +111,48 @@ display: flex; align-items: center; justify-content: center; - padding: 16px 0; -} + margin-top: 75px; + + &:has(.loader), + &:has(.switch input:checked+.slider:before) { + animation: fadeIn 1s ease-in-out; + } +} + .switch { position: relative; - display: inline-block; - width: 60px; - height: 34px; -} + margin: auto; +} .switch input { opacity: 0; width: 0; height: 0; -} +} .slider { + -webkit-transform: translate3d(-50%, -50%, 0); + -moz-transform: translate3d(-50%, -50%, 0); + transform: translate3d(-50%, -50%, 0); position: absolute; cursor: pointer; background-color: #72767d; border-radius: 34px; + height: 50px; + width: 100px; top: 0; left: 0; right: 0; bottom: 0; transition: background-color 0.2s; -} +} .slider:before { position: absolute; content: ""; - height: 26px; - width: 26px; + height: 42px; + width: 42px; background-color: #fff; border-radius: 50%; left: 4px; @@ -149,11 +161,11 @@ } .switch input:checked+.slider { - background-color: #5865f2; + background-color: #3b5a7d; } .switch input:checked+.slider:before { - transform: translateX(26px); + transform: translateX(50px); } .switch:hover .slider { @@ -162,4 +174,40 @@ .switch input:checked:hover+.slider { background-color: #4752c4; -} \ No newline at end of file +} + +.loader { + display: inline-grid; + width: 90px; + aspect-ratio: 1; + animation: l3-0 5s steps(10) infinite; + } + .loader:before, + .loader:after { + content:""; + grid-area: 1/1; + } + .loader:before { + clip-path: polygon(100% 50%,90.45% 79.39%,65.45% 97.55%,34.55% 97.55%,9.55% 79.39%,0% 50%,9.55% 20.61%,34.55% 2.45%,65.45% 2.45%,90.45% 20.61%,100% 50%,85.6% 24.14%,63.6% 8.15%,36.4% 8.15%,14.4% 24.14%,6% 50%,14.4% 75.86%,36.4% 91.85%,63.6% 91.85%,85.6% 75.86%,94% 50%,85.6% 24.14%); + background: #4752c4; + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25); + } + .loader:after { + background: #5c5f66; + clip-path: polygon(100% 50%,65.45% 97.55%,9.55% 79.39%,9.55% 20.61%,65.45% 2.45%); + margin: 27%; + translate: 46% 0; + transform-origin: right; + animation: l3-1 .5s linear infinite; + } + @keyframes l3-0 {to{rotate: 1turn}} + @keyframes l3-1 { + 0%{rotate: 18deg} + to{rotate: -18deg} + } + + @keyframes fadeIn { + 0% { opacity: 0; } + 50% { opacity: 0; } + 100% { opacity: 1; } + } \ No newline at end of file diff --git a/public/css/userbox.css b/public/css/userbox.css index f4979ca..92c6c17 100644 --- a/public/css/userbox.css +++ b/public/css/userbox.css @@ -143,33 +143,33 @@ } .statusBubble.offline { - transition: 0.7ms; + transition: 1.7ms; background-color: var(--red); visibility: visible !important; } .statusBubble.online { - transition: 0.7ms; + transition: 1.7ms; background-color: var(--green); visibility: visible !important; } .statusBubble.unread { - transition: 0.7ms; + transition: 1.7ms; background-color: var(--blurple); visibility: visible !important; text-align: center; - font-size: 11px; + font-size: 10px; font-weight: bold; color: var(--dark-bg); } .statusBubble.unread-channel { - transition: 0.7ms; + transition: 1.7ms; background-color: var(--blurple); visibility: visible !important; text-align: center; - font-size: 12px; + font-size: 11px; font-weight: bold; color: var(--dark-bg); width: 14px; diff --git a/src/server/views/components/modals/bot/invite.pug b/src/server/views/components/modals/bot/invite.pug index 847fb85..3257acc 100644 --- a/src/server/views/components/modals/bot/invite.pug +++ b/src/server/views/components/modals/bot/invite.pug @@ -1,5 +1,4 @@ -.modal-overlay - .modal-dialog.modal-dialog-centered +.modal-dialog.modal-dialog-centered .modal-content .modal-header h5.modal-title Invite #{discordBot.bot_username} diff --git a/src/server/views/components/modals/bot/power.pug b/src/server/views/components/modals/bot/power.pug index 334137a..ff32fa4 100644 --- a/src/server/views/components/modals/bot/power.pug +++ b/src/server/views/components/modals/bot/power.pug @@ -7,21 +7,21 @@ button.modal-close-button(type="button", aria-label="Close", data-bs-dismiss="modal") × .modal-body p Do you want to turn the Discord bot #{state.discord_state ? 'off' : 'on'}? - if loading - .switch-container - img( alt="Result loading...", width="150", src="/images/bars.svg") - else - .switch-container - label.switch - input#bot-power-switch( - type="checkbox" - hx-get="/toggle-bot" - hx-target="#modals-here" - hx-trigger="click" - checked=state.discord_state - ) + if loading + .switch-container + .loader + else + .switch-container + label.switch + input#bot-power-switch( + type="checkbox" + hx-get="/toggle-bot" + hx-target="#modals-here" + hx-trigger="click" + checked=state.discord_state + ) - span.slider#bot-power-slider + span.slider#bot-power-slider diff --git a/src/server/views/components/sidebar/userControls/userControlsButtonGroup.pug b/src/server/views/components/sidebar/userControls/userControlsButtonGroup.pug index bf030ae..803f3c1 100644 --- a/src/server/views/components/sidebar/userControls/userControlsButtonGroup.pug +++ b/src/server/views/components/sidebar/userControls/userControlsButtonGroup.pug @@ -1,5 +1,6 @@ .userMenuIcons .userMenuBtnGroup - include botPowerButton - include serverPowerButton - include settingsButton \ No newline at end of file + if (state.sidebar_exp_state) + include botPowerButton + include serverPowerButton + include settingsButton \ No newline at end of file