diff options
| -rw-r--r-- | core/css/inputs.scss | 41 | ||||
| -rw-r--r-- | core/css/styles.scss | 33 | ||||
| -rw-r--r-- | settings/templates/settings/personal/personal.info.php | 20 |
3 files changed, 71 insertions, 23 deletions
diff --git a/core/css/inputs.scss b/core/css/inputs.scss index 5fe65935ec5..de09db958a5 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -35,7 +35,7 @@ select, button, .button, input:not([type='range']), textarea, -#quota, .pager li a { +.pager li a { margin: 3px 3px 3px 0; padding: 7px 6px; font-size: 13px; @@ -45,8 +45,7 @@ textarea, outline: none; border-radius: 3px; &:not(:disabled):not(.primary) { - /* no border on quota */ - &:not(#quota):hover, + &:hover, &:focus, &.active { /* active class used for multiselect */ @@ -185,9 +184,6 @@ button img, .button img { cursor: pointer; } -#quota { - color: nc-lighten($color-main-text, 33%); -} select, .button.multiselect { font-weight: 400; @@ -472,6 +468,39 @@ input { } } +/* Progressbar */ +progress { + display: block; + width: 100%; + padding: 0; + border: 0 none; + background-color: nc-darken($color-main-background, 10%); + border-radius: 3px; + flex-basis: 100%; + height: 5px; + &.warn { + &::-moz-progress-bar { + background: $color-error; + } + &::-webkit-progress-value { + background: $color-error; + } + } + &::-webkit-progress-bar { + background: transparent; + } + &::-moz-progress-bar { + border-radius: 3px; + background: $color-primary; + transition: 250ms all ease-in-out; + } + &::-webkit-progress-value { + border-radius: 3px; + background: $color-primary; + transition: 250ms all ease-in-out; + } +} + /* Animation */ @keyframes shake { 10%, diff --git a/core/css/styles.scss b/core/css/styles.scss index be0b200ce35..4a47d192ef4 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -930,26 +930,31 @@ code { margin: 30px !important; position: relative; padding: 0 !important; + progress { + height: 36px; + } div { - padding: 0; - background-color: nc-darken($color-main-background, 10%); font-weight: normal; white-space: nowrap; - border-bottom-left-radius: 3px; - border-top-left-radius: 3px; - min-width: 1%; - max-width: 100%; + position: absolute;; + top: 0; + &.quota-warning { + background-color: $color-warning; + } + &.quotatext-bg { + mix-blend-mode: luminosity; + } + &.quotatext-fg { + color: $color-primary-text; + overflow: hidden; + z-index: 50; + } + .quotatext { + padding: .6em 1em; + } } } -#quotatext { - padding: .6em 1em; -} - -#quota div.quota-warning { - background-color: $color-warning; -} - .pager { list-style: none; float: right; diff --git a/settings/templates/settings/personal/personal.info.php b/settings/templates/settings/personal/personal.info.php index 084b34af96c..d6f6061ebf2 100644 --- a/settings/templates/settings/personal/personal.info.php +++ b/settings/templates/settings/personal/personal.info.php @@ -38,9 +38,23 @@ vendor_style('jcrop/css/jquery.Jcrop'); ?> <div id="quota" class="section"> - <div style="width:<?php p($_['usage_relative']);?>%" - <?php if($_['usage_relative'] > 80): ?> class="quota-warning" <?php endif; ?>> - <p id="quotatext"> + <progress value="<?php p($_['usage_relative']); ?>" max="100" + <?php if($_['usage_relative'] > 80): ?> class="quota-warning" <?php endif; ?>></progress> + + <div style="width:<?php p($_['usage_relative']);?>%" class="quotatext-fg + <?php if($_['usage_relative'] > 80): ?> quota-warning <?php endif; ?>"> + <p class="quotatext"> + <?php if ($_['quota'] === \OCP\Files\FileInfo::SPACE_UNLIMITED): ?> + <?php print_unescaped($l->t('You are using <strong>%s</strong> of <strong>%s</strong>', + [$_['usage'], $_['total_space']]));?> + <?php else: ?> + <?php print_unescaped($l->t('You are using <strong>%s</strong> of <strong>%s</strong> (<strong>%s %%</strong>)', + [$_['usage'], $_['total_space'], $_['usage_relative']]));?> + <?php endif ?> + </p> + </div> + <div class="quotatext-bg"> + <p class="quotatext"> <?php if ($_['quota'] === \OCP\Files\FileInfo::SPACE_UNLIMITED): ?> <?php print_unescaped($l->t('You are using <strong>%s</strong> of <strong>%s</strong>', [$_['usage'], $_['total_space']]));?> |