X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=assets%2Fdefault%2Fscss%2Fshaarli.scss;h=3404ce124035b1a2d456b230901262f8c95676d7;hb=cfdd2094407e61f371c02117c8c66916a6d1d807;hp=2f49bbd21d50690d0e070553b6b3b9e131d5e74c;hpb=4e3875c0ce7f3b17e3d358dc5ecb1f8bed64546b;p=github%2Fshaarli%2FShaarli.git diff --git a/assets/default/scss/shaarli.scss b/assets/default/scss/shaarli.scss index 2f49bbd2..3404ce12 100644 --- a/assets/default/scss/shaarli.scss +++ b/assets/default/scss/shaarli.scss @@ -1023,6 +1023,10 @@ body, &.button-red { background: $red; } + + &.button-grey { + background: $light-grey; + } } .submit-buttons { @@ -1047,7 +1051,7 @@ body, } table { - margin: auto; + margin: 10px auto 25px auto; width: 90%; .order { @@ -1083,6 +1087,11 @@ body, position: absolute; right: 5%; } + + &.button-grey { + position: absolute; + left: 5%; + } } } } @@ -1257,11 +1266,15 @@ form { margin: 70px 0 25px; } + a { + color: var(--main-color); + } + pre { margin: 0 20%; padding: 20px 0; text-align: left; - line-height: .7em; + line-height: 1em; } } @@ -1273,6 +1286,57 @@ form { } } +.loading-input { + position: relative; + + @keyframes around { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } + } + + .icon-container { + position: absolute; + right: 60px; + top: calc(50% - 10px); + } + + .loader { + position: relative; + height: 20px; + width: 20px; + display: inline-block; + animation: around 5.4s infinite; + + &::after, + &::before { + content: ""; + background: $form-input-background; + position: absolute; + display: inline-block; + width: 100%; + height: 100%; + border-width: 2px; + border-color: #333 #333 transparent transparent; + border-style: solid; + border-radius: 20px; + box-sizing: border-box; + top: 0; + left: 0; + animation: around 0.7s ease-in-out infinite; + } + + &::after { + animation: around 0.7s ease-in-out 0.1s infinite; + background: transparent; + } + } +} + // LOGIN .login-form-container { .remember-me { @@ -1645,6 +1709,123 @@ form { } } +// SERVER PAGE + +.server-tables-page, +.server-tables { + .window-subtitle { + &::before { + display: block; + margin: 8px auto; + background: linear-gradient(to right, var(--background-color), $dark-grey, var(--background-color)); + width: 50%; + height: 1px; + content: ''; + } + } + + .server-row { + p { + height: 25px; + padding: 0 10px; + } + } + + .server-label { + text-align: right; + font-weight: bold; + } + + i { + &.fa-color-green { + color: $main-green; + } + + &.fa-color-orange { + color: $orange; + } + + &.fa-color-red { + color: $red; + } + } + + @media screen and (max-width: 64em) { + .server-label { + text-align: center; + } + + .server-row { + p { + text-align: center; + } + } + } +} + +// Batch creation +input[name='save_edit_batch'] { + @extend %page-form-button; +} + +.addlink-batch-show-more { + display: flex; + align-items: center; + margin: 20px 0 8px; + + a { + color: var(--main-color); + text-decoration: none; + } + + &::before, + &::after { + content: ""; + flex-grow: 1; + background: rgba(0, 0, 0, 0.35); + height: 1px; + font-size: 0; + line-height: 0; + } + + &::before { + margin: 0 16px 0 0; + } + + &::after { + margin: 0 0 0 16px; + } +} + +.dark-layer { + display: none; + position: fixed; + height: 100%; + width: 100%; + z-index: 998; + background-color: rgba(0, 0, 0, .75); + color: #fff; + + .screen-center { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + min-height: 100vh; + } + + .progressbar { + width: 33%; + } +} + +.addlink-batch-form-block { + .pure-alert { + margin: 25px 0 0 0; + } +} + // Print rules @media print { .shaarli-menu {