X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=assets%2Fdefault%2Fscss%2Fshaarli.scss;h=3404ce124035b1a2d456b230901262f8c95676d7;hb=cfdd2094407e61f371c02117c8c66916a6d1d807;hp=61e382b69dc6837111df8a04de9d4bd0ca5eafcc;hpb=4c029779c87f049acf58676881335da103741148;p=github%2Fshaarli%2FShaarli.git diff --git a/assets/default/scss/shaarli.scss b/assets/default/scss/shaarli.scss index 61e382b6..3404ce12 100644 --- a/assets/default/scss/shaarli.scss +++ b/assets/default/scss/shaarli.scss @@ -69,20 +69,22 @@ pre { font-family: 'Roboto'; font-weight: 400; font-style: normal; - src: local('Roboto'), - local('Roboto-Regular'), - url('../fonts/Roboto-Regular.woff2') format('woff2'), - url('../fonts/Roboto-Regular.woff') format('woff'); + src: + local('Roboto'), + local('Roboto-Regular'), + url('../fonts/Roboto-Regular.woff2') format('woff2'), + url('../fonts/Roboto-Regular.woff') format('woff'); } @font-face { font-family: 'Roboto'; font-weight: 700; font-style: normal; - src: local('Roboto'), - local('Roboto-Bold'), - url('../fonts/Roboto-Bold.woff2') format('woff2'), - url('../fonts/Roboto-Bold.woff') format('woff'); + src: + local('Roboto'), + local('Roboto-Bold'), + url('../fonts/Roboto-Bold.woff2') format('woff2'), + url('../fonts/Roboto-Bold.woff') format('woff'); } body, @@ -375,7 +377,7 @@ body, } @media screen and (max-width: 64em) { - .header-search , + .header-search, .header-search * { visibility: hidden; } @@ -490,6 +492,10 @@ body, } } +.header-alert-message { + text-align: center; +} + // CONTENT - GENERAL .container { position: relative; @@ -550,7 +556,6 @@ body, color: $dark-grey; font-size: .9em; - a { display: inline-block; margin: 3px 0; @@ -612,6 +617,11 @@ body, padding: 5px; text-decoration: none; color: $dark-grey; + + &.selected { + background: var(--main-color); + color: $white; + } } input { @@ -661,6 +671,10 @@ body, content: ''; } } + + .search-highlight { + background-color: yellow; + } } .linklist-item-buttons { @@ -1009,6 +1023,10 @@ body, &.button-red { background: $red; } + + &.button-grey { + background: $light-grey; + } } .submit-buttons { @@ -1033,7 +1051,7 @@ body, } table { - margin: auto; + margin: 10px auto 25px auto; width: 90%; .order { @@ -1069,6 +1087,11 @@ body, position: absolute; right: 5%; } + + &.button-grey { + position: absolute; + left: 5%; + } } } } @@ -1236,8 +1259,23 @@ form { color: $dark-grey; } -.page404-container { +.page-error-container { color: $dark-grey; + + h2 { + margin: 70px 0 25px; + } + + a { + color: var(--main-color); + } + + pre { + margin: 0 20%; + padding: 20px 0; + text-align: left; + line-height: 1em; + } } // EDIT LINK @@ -1248,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 { @@ -1436,6 +1525,8 @@ form { -webkit-transition: opacity 500ms ease-in-out; -moz-transition: opacity 500ms ease-in-out; -o-transition: opacity 500ms ease-in-out; + min-width: 1px; + min-height: 1px; &.b-loaded { opacity: 1; @@ -1535,11 +1626,11 @@ form { text-align: center; a { + background: $almost-white; display: inline-block; - margin: 0 15px; + padding: 5px; text-decoration: none; - color: $white; - font-weight: bold; + color: $dark-grey; } } @@ -1587,13 +1678,14 @@ form { > div { border-radius: 10px; - background: repeating-linear-gradient( - -45deg, - $almost-white, - $almost-white 6px, - var(--background-color) 6px, - var(--background-color) 12px - ); + background: + repeating-linear-gradient( + -45deg, + $almost-white, + $almost-white 6px, + var(--background-color) 6px, + var(--background-color) 12px + ); width: 0%; height: 10px; } @@ -1617,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 {