clean html files

move styles to css

1 files changed, 10 insertions, 459 deletions

diff --git a/web/html/login.html b/web/html/login.html
index 968aa0bc..b561b732 100644
--- a/web/html/login.html
+++ b/web/html/login.html
@@ -1,456 +1,10 @@
 {{ template "page/head_start" .}}
-<style>
-  html * {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  h1 {
-    text-align: center;
-    /*margin: 20px 0 50px 0;*/
-    height: 110px;
-  }
-
-  .ant-form-item-children .ant-btn,
-  .ant-input {
-    height: 50px;
-    border-radius: 30px;
-  }
-
-  .ant-input-group-addon {
-    border-radius: 0 30px 30px 0;
-    width: 50px;
-    font-size: 18px;
-  }
-
-  .ant-input-affix-wrapper .ant-input-prefix {
-    left: 23px;
-  }
-
-  .ant-input-affix-wrapper .ant-input:not(:first-child) {
-    padding-left: 50px;
-  }
-
-  .centered {
-    display: flex;
-    text-align: center;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-  }
-
-  .title {
-    font-size: 2rem;
-    margin-block-end: 2rem;
-  }
-
-  .title b {
-    font-weight: bold !important;
-  }
-
-  #app {
-    overflow: hidden;
-  }
-
-  #login {
-    animation: charge 0.5s both;
-    background-color: #fff;
-    border-radius: 2rem;
-    padding: 4rem 3rem;
-    transition: all 0.3s;
-    user-select: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-  }
-
-  #login:hover {
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
-  }
-
-  @keyframes charge {
-    from {
-      transform: translateY(5rem);
-      opacity: 0;
-    }
-
-    to {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-
-  .under {
-    background-color: #c7ebe2;
-    z-index: 0;
-  }
-
-  .dark .under {
-    background-color: var(--dark-color-login-wave);
-  }
-
-  .dark #login {
-    background-color: var(--dark-color-surface-100);
-  }
-
-  .dark h1 {
-    color: rgba(255, 255, 255);
-  }
-
-  .ant-btn-primary-login {
-    width: 100%;
-  }
-
-  .ant-btn-primary-login:focus,
-  .ant-btn-primary-login:hover {
-    color: #fff;
-    background-color: #006655;
-    border-color: #006655;
-    background-image: linear-gradient(270deg,
-        rgba(123, 199, 77, 0) 30%,
-        #009980,
-        rgba(123, 199, 77, 0) 100%);
-    background-repeat: no-repeat;
-    animation: ma-bg-move ease-in-out 5s infinite;
-    background-position-x: -500px;
-    width: 95%;
-    animation-delay: -0.5s;
-    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
-  }
-
-  .ant-btn-primary-login.active,
-  .ant-btn-primary-login:active {
-    color: #fff;
-    background-color: #006655;
-    border-color: #006655;
-  }
-
-  @keyframes ma-bg-move {
-    0% {
-      background-position: -500px 0;
-    }
-
-    50% {
-      background-position: 1000px 0;
-    }
-
-    100% {
-      background-position: 1000px 0;
-    }
-  }
-
-  .wave-btn-bg {
-    position: relative;
-    border-radius: 25px;
-    width: 100%;
-    transition: all 0.3s cubic-bezier(.645, .045, .355, 1);
-  }
-
-  .dark .wave-btn-bg {
-    color: #fff;
-    position: relative;
-    background-color: #0a7557;
-    border: 2px double transparent;
-    background-origin: border-box;
-    background-clip: padding-box, border-box;
-    background-size: 300%;
-    width: 100%;
-    z-index: 1;
-  }
-
-  .dark .wave-btn-bg:hover {
-    animation: wave-btn-tara 4s ease infinite;
-  }
-
-  .dark .wave-btn-bg-cl {
-    background-image: linear-gradient(rgba(13, 14, 33, 0), rgba(13, 14, 33, 0)),
-      radial-gradient(circle at left top, #006655, #009980, #006655) !important;
-    border-radius: 3em;
-  }
-
-  .dark .wave-btn-bg-cl:hover {
-    width: 95%;
-  }
-
-  .dark .wave-btn-bg-cl:before {
-    position: absolute;
-    content: "";
-    top: -5px;
-    left: -5px;
-    bottom: -5px;
-    right: -5px;
-    z-index: -1;
-    background: inherit;
-    background-size: inherit;
-    border-radius: 4em;
-    opacity: 0;
-    transition: 0.5s;
-  }
-
-  .dark .wave-btn-bg-cl:hover::before {
-    opacity: 1;
-    filter: blur(20px);
-    animation: wave-btn-tara 8s linear infinite;
-  }
-
-  @keyframes wave-btn-tara {
-    to {
-      background-position: 300%;
-    }
-  }
-
-  .dark .ant-btn-primary-login {
-    font-size: 14px;
-    color: #fff;
-    text-align: center;
-    background-image: linear-gradient(rgba(13, 14, 33, 0.45),
-        rgba(13, 14, 33, 0.35));
-    border-radius: 2rem;
-    border: none;
-    outline: none;
-    background-color: transparent;
-    height: 46px;
-    position: relative;
-    white-space: nowrap;
-    cursor: pointer;
-    touch-action: manipulation;
-    padding: 0 15px;
-    width: 100%;
-    animation: none;
-    background-position-x: 0;
-    box-shadow: none;
-  }
-
-  .waves-header {
-    position: fixed;
-    width: 100%;
-    text-align: center;
-    background-color: #dbf5ed;
-    color: white;
-    z-index: -1;
-  }
-
-  .dark .waves-header {
-    background-color: var(--dark-color-login-background);
-  }
-
-  .waves-inner-header {
-    height: 50vh;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-  }
-
-  .waves {
-    position: relative;
-    width: 100%;
-    height: 15vh;
-    margin-bottom: -8px;
-    /*Fix for safari gap*/
-    min-height: 100px;
-    max-height: 150px;
-  }
-
-  .parallax>use {
-    animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
-  }
-
-  .dark .parallax>use {
-    fill: var(--dark-color-login-wave);
-  }
-
-  .parallax>use:nth-child(1) {
-    animation-delay: -2s;
-    animation-duration: 4s;
-    opacity: 0.2;
-  }
-
-  .parallax>use:nth-child(2) {
-    animation-delay: -3s;
-    animation-duration: 7s;
-    opacity: 0.4;
-  }
-
-  .parallax>use:nth-child(3) {
-    animation-delay: -4s;
-    animation-duration: 10s;
-    opacity: 0.6;
-  }
-
-  .parallax>use:nth-child(4) {
-    animation-delay: -5s;
-    animation-duration: 13s;
-  }
-
-  @keyframes move-forever {
-    0% {
-      transform: translate3d(-90px, 0, 0);
-    }
-
-    100% {
-      transform: translate3d(85px, 0, 0);
-    }
-  }
-
-  @media (max-width: 768px) {
-    .waves {
-      height: 40px;
-      min-height: 40px;
-    }
-  }
-
-  .words-wrapper {
-    width: 100%;
-    display: inline-block;
-    position: relative;
-    text-align: center;
-  }
-
-  .words-wrapper b {
-    width: 100%;
-    display: inline-block;
-    position: absolute;
-    left: 0;
-    top: 0;
-  }
-
-  .words-wrapper b.is-visible {
-    position: relative;
-  }
-
-  .headline.zoom .words-wrapper {
-    -webkit-perspective: 300px;
-    -moz-perspective: 300px;
-    perspective: 300px;
-  }
-
-  .headline {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .headline.zoom b {
-    opacity: 0;
-  }
-
-  .headline.zoom b.is-visible {
-    opacity: 1;
-    -webkit-animation: zoom-in 0.8s;
-    -moz-animation: zoom-in 0.8s;
-    animation: cubic-bezier(0.215, 0.610, 0.355, 1.000) zoom-in 0.8s;
-  }
-
-  .headline.zoom b.is-hidden {
-    -webkit-animation: zoom-out 0.8s;
-    -moz-animation: zoom-out 0.8s;
-    animation: cubic-bezier(0.215, 0.610, 0.355, 1.000) zoom-out 0.4s;
-  }
-
-  @-webkit-keyframes zoom-in {
-    0% {
-      opacity: 0;
-      -webkit-transform: translateZ(100px);
-    }
-
-    100% {
-      opacity: 1;
-      -webkit-transform: translateZ(0);
-    }
-  }
-
-  @-moz-keyframes zoom-in {
-    0% {
-      opacity: 0;
-      -moz-transform: translateZ(100px);
-    }
-
-    100% {
-      opacity: 1;
-      -moz-transform: translateZ(0);
-    }
-  }
-
-  @keyframes zoom-in {
-    0% {
-      opacity: 0;
-      -webkit-transform: translateZ(100px);
-      -moz-transform: translateZ(100px);
-      -ms-transform: translateZ(100px);
-      -o-transform: translateZ(100px);
-      transform: translateZ(100px);
-    }
-
-    100% {
-      opacity: 1;
-      -webkit-transform: translateZ(0);
-      -moz-transform: translateZ(0);
-      -ms-transform: translateZ(0);
-      -o-transform: translateZ(0);
-      transform: translateZ(0);
-    }
-  }
-
-  @-webkit-keyframes zoom-out {
-    0% {
-      opacity: 1;
-      -webkit-transform: translateZ(0);
-    }
-
-    100% {
-      opacity: 0;
-      -webkit-transform: translateZ(-100px);
-    }
-  }
-
-  @-moz-keyframes zoom-out {
-    0% {
-      opacity: 1;
-      -moz-transform: translateZ(0);
-    }
-
-    100% {
-      opacity: 0;
-      -moz-transform: translateZ(-100px);
-    }
-  }
-
-  @keyframes zoom-out {
-    0% {
-      opacity: 1;
-      -webkit-transform: translateZ(0);
-      -moz-transform: translateZ(0);
-      -ms-transform: translateZ(0);
-      -o-transform: translateZ(0);
-      transform: translateZ(0);
-    }
-
-    100% {
-      opacity: 0;
-      -webkit-transform: translateZ(-100px);
-      -moz-transform: translateZ(-100px);
-      -ms-transform: translateZ(-100px);
-      -o-transform: translateZ(-100px);
-      transform: translateZ(-100px);
-    }
-  }
-
-  .setting-section {
-    position: absolute;
-    top: 0;
-    right: 0;
-    padding: 22px;
-  }
-
-  .ant-space-item .ant-switch {
-    margin: 2px 0 4px;
-  }
-</style>
 {{ template "page/head_end" .}}
 
 {{ template "page/body_start" .}}
-<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
+<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme + ' login-app'">
   <transition name="list" appear>
-    <a-layout-content class="under" :style="{ minHeight: '0' }">
+  <a-layout-content class="under min-h-100vh">
       <div class="waves-header">
         <div class="waves-inner-header"></div>
         <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -466,11 +20,10 @@
           </g>
         </svg>
       </div>
-      <a-row type="flex" justify="center" align="middle"
-        :style="{ height: '100%', overflow: 'auto', overflowX: 'hidden' }">
-        <a-col :xs="22" :sm="12" :md="10" :lg="8" :xl="6" :xxl="5" id="login" :style="{ margin: '3rem 0' }">
+  <a-row type="flex" justify="center" align="middle" class="h-100 overflow-hidden-auto">
+        <a-col :xs="22" :sm="12" :md="10" :lg="8" :xl="6" :xxl="5" id="login" class="my-3rem">
           <template v-if="!loadingStates.fetched">
-            <div :style="{ textAlign: 'center' }">
+            <div class="text-center">
               <a-spin size="large" />
             </div>
           </template>
@@ -482,7 +35,7 @@
                   <a-space direction="vertical" :size="10">
                     <a-theme-switch-login></a-theme-switch-login>
                     <span>{{ i18n "pages.settings.language" }}</span>
-                    <a-select ref="selectLang" :style="{ width: '100%' }" v-model="lang"
+                    <a-select ref="selectLang" class="w-100" v-model="lang"
                       @change="LanguageManager.setLanguage(lang)" :dropdown-class-name="themeSwitcher.currentTheme">
                       <a-select-option :value="l.value" label="English" v-for="l in LanguageManager.supportedLanguages">
                         <span role="img" aria-label="l.name" v-text="l.icon"></span>
@@ -511,26 +64,24 @@
                     <a-form-item>
                       <a-input autocomplete="username" name="username" v-model.trim="user.username"
                         placeholder='{{ i18n "username" }}' autofocus required>
-                        <a-icon slot="prefix" type="user" :style="{ fontSize: '1rem' }"></a-icon>
+                        <a-icon slot="prefix" type="user" class="fs-1rem"></a-icon>
                       </a-input>
                     </a-form-item>
                     <a-form-item>
                       <a-input-password autocomplete="password" name="password" v-model.trim="user.password"
                         placeholder='{{ i18n "password" }}' required>
-                        <a-icon slot="prefix" type="lock" :style="{ fontSize: '1rem' }"></a-icon>
+                        <a-icon slot="prefix" type="lock" class="fs-1rem"></a-icon>
                       </a-input-password>
                     </a-form-item>
                     <a-form-item v-if="twoFactorEnable">
                       <a-input autocomplete="one-time-code" name="twoFactorCode" v-model.trim="user.twoFactorCode"
                         placeholder='{{ i18n "twoFactorCode" }}' required>
-                        <a-icon slot="prefix" type="key" :style="{ fontSize: '1rem' }"></a-icon>
+                        <a-icon slot="prefix" type="key" class="fs-1rem"></a-icon>
                       </a-input>
                     </a-form-item>
                     <a-form-item>
                       <a-row justify="center" class="centered">
-                        <div
-                          :style="{ height: '50px', marginTop: '1rem', ...loadingStates.spinning ? { width: '52px' } : { display: 'inline-block' } }"
-                          class="wave-btn-bg wave-btn-bg-cl">
+                        <div class="wave-btn-bg wave-btn-bg-cl h-50px mt-1rem" :style="loadingStates.spinning ? 'width: 52px' : 'display: inline-block'">
                           <a-button class="ant-btn-primary-login" type="primary" :loading="loadingStates.spinning"
                             :icon="loadingStates.spinning ? 'poweroff' : undefined" html-type="submit">
                             [[ loadingStates.spinning ? '' : '{{ i18n "login" }}' ]]