Merge pull request #6669 from nextcloud/various-css-fixes
Various css fixes
This commit is contained in:
John Molakvoæ
GitHub
commit
d58c0e6834
|
|
@ -50,28 +50,29 @@
|
|||
text-align: center;
|
||||
}
|
||||
#uploadprogressbar .ui-progressbar-value.ui-widget-header.ui-corner-left {
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
background-color: $color-primary;
|
||||
}
|
||||
#uploadprogressbar .label {
|
||||
top: 6px;
|
||||
opacity: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
top: 6px;
|
||||
opacity: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
font-weight: normal;
|
||||
}
|
||||
#uploadprogressbar .label.inner {
|
||||
color:white;
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 200px;
|
||||
color: $color-primary-text;
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 200px;
|
||||
}
|
||||
#uploadprogressbar .label.outer {
|
||||
position: relative;
|
||||
color: black;
|
||||
position: relative;
|
||||
color: $color-main-text;
|
||||
}
|
||||
#uploadprogressbar .desktop {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
</a>
|
||||
</li>
|
||||
<?php } ?>
|
||||
<li id="quota" class="section pinned <?php
|
||||
<li id="quota" class="pinned <?php
|
||||
if ($_['quota'] !== \OCP\Files\FileInfo::SPACE_UNLIMITED) {
|
||||
?>has-tooltip" title="<?php p($_['usage_relative'] . '%');
|
||||
} ?>">
|
||||
|
|
@ -23,9 +23,8 @@
|
|||
p($l->t('%s used', [$_['usage']]));
|
||||
} ?></p>
|
||||
<div class="quota-container">
|
||||
<div style="width:<?php p($_['usage_relative']);?>%"
|
||||
<?php if($_['usage_relative'] > 80): ?>class="quota-warning"<?php endif; ?>>
|
||||
</div>
|
||||
<progress value="<?php p($_['usage_relative']); ?>" max="100"
|
||||
<?php if($_['usage_relative'] > 80): ?> class="quota-warning" <?php endif; ?>></progress>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -610,6 +610,7 @@ kbd {
|
|||
border-right: 1px solid $color-border;
|
||||
width: 250px;
|
||||
box-sizing: border-box;
|
||||
background-color: $color-main-background;
|
||||
}
|
||||
|
||||
.settings-button {
|
||||
|
|
@ -753,7 +754,7 @@ kbd {
|
|||
margin: 5px;
|
||||
margin-top: -5px;
|
||||
right: 0;
|
||||
box-shadow: 0 1px 10px $color-box-shadow;
|
||||
filter: drop-shadow(0 1px 3px $color-box-shadow);
|
||||
display: none;
|
||||
|
||||
&:after {
|
||||
|
|
|
|||
|
|
@ -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,40 @@ 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;
|
||||
overflow: hidden;
|
||||
&.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%,
|
||||
|
|
|
|||
|
|
@ -925,31 +925,42 @@ code {
|
|||
font-family: 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', monospace;
|
||||
}
|
||||
|
||||
#quota {
|
||||
#body-settings #quota {
|
||||
cursor: default;
|
||||
margin: 30px !important;
|
||||
position: relative;
|
||||
padding: 0 !important;
|
||||
progress {
|
||||
height: 36px;
|
||||
&::-moz-progress-bar {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
&::-webkit-progress-value {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
}
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -78,11 +78,15 @@
|
|||
area.slideUp(OC.menuSpeed*4, function() {
|
||||
area.trigger(new $.Event('hide'));
|
||||
});
|
||||
area.removeClass('opened');
|
||||
$(button).removeClass('opened');
|
||||
}
|
||||
function showArea() {
|
||||
area.slideDown(OC.menuSpeed*4, function() {
|
||||
area.trigger(new $.Event('show'));
|
||||
});
|
||||
area.addClass('opened');
|
||||
$(button).addClass('opened');
|
||||
var input = $(areaSelector + ' [autofocus]');
|
||||
if (input.length === 1) {
|
||||
input.focus();
|
||||
|
|
|
|||
|
|
@ -42,7 +42,6 @@
|
|||
input.tipsy({gravity: gravity, trigger: 'manual'});
|
||||
input.tipsy('show');
|
||||
}
|
||||
select.css('background-color', 'white');
|
||||
input.focus();
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -579,42 +579,6 @@ span.usersLastLoginTooltip {
|
|||
.groupsListContainer.hidden {
|
||||
display: none;
|
||||
}
|
||||
.bubble {
|
||||
z-index: 1;
|
||||
right: -6px;
|
||||
top: auto;
|
||||
&:after {
|
||||
right: 5px;
|
||||
}
|
||||
}
|
||||
.popovermenu {
|
||||
a.menuitem {
|
||||
height: 20px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: initial;
|
||||
}
|
||||
margin-top: 4px;
|
||||
border-top-right-radius: 3px;
|
||||
right: 3px;
|
||||
opacity: 0;
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.1s, visibility 0.1s;
|
||||
}
|
||||
tr.active .popovermenu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
.popovermenu > ul.userActionsMenu {
|
||||
right: 15px;
|
||||
a {
|
||||
margin: 5px 0;
|
||||
span:last-child {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* because of accessibility the name cell is <th> - therefore we enforce the black color */
|
||||
|
|
@ -649,10 +613,24 @@ tr:hover > td {
|
|||
td.userActions {
|
||||
width: 25px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
.action {
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
.toggleUserActions {
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
margin: 0;
|
||||
opacity: 0.5;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tr.active td.userActions .action {
|
||||
|
|
@ -683,18 +661,30 @@ input#recoveryPassword {
|
|||
#userlist td.quota {
|
||||
position: relative;
|
||||
width: 10em;
|
||||
progress.quota-user-progress {
|
||||
position: absolute;
|
||||
width: calc(10em + 0px);
|
||||
margin-top: -7px;
|
||||
z-index: 0;
|
||||
margin-left: 1px;
|
||||
height: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
&.quota-user {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 10em;
|
||||
height: 34px;
|
||||
z-index: 50;
|
||||
position: relative;
|
||||
}
|
||||
&.quota.active {
|
||||
background: #fff;
|
||||
+ progress.quota-user-progress {
|
||||
position: absolute;
|
||||
width: calc(10em + 0px);
|
||||
margin-top: -7px;
|
||||
z-index: 0;
|
||||
margin-left: 1px;
|
||||
height: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -702,20 +692,6 @@ input.userFilter {
|
|||
width: 200px;
|
||||
}
|
||||
|
||||
.quota_progress_container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 10em;
|
||||
margin: 3px 3px 3px 0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.quota_progress {
|
||||
background-color: #eee;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
#newusergroups + input[type='submit'] {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
|
|
|
|||
|
|
@ -571,7 +571,12 @@ var UserList = {
|
|||
//asymptotic curve approaching 50% at 10GB to visualize used stace with infinite quota
|
||||
usedQuota = 95 * (1 - (1 / (usedInGB + 1)));
|
||||
}
|
||||
$tr.find('.quota_progress').width(usedQuota + '%');
|
||||
$tr.find('.quota-user-progress').val( isNaN(usedQuota) ? 0 : usedQuota );
|
||||
if (usedQuota > 80) {
|
||||
$tr.find('.quota-user-progress').addClass('warn');
|
||||
} else {
|
||||
$tr.find('.quota-user-progress').removeClass('warn');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -950,9 +955,12 @@ $(document).ready(function () {
|
|||
|
||||
if ($tr.is('.active')) {
|
||||
$tr.removeClass('active');
|
||||
menudiv.removeClass('open');
|
||||
return;
|
||||
}
|
||||
$('#userlist tr.active').removeClass('active');
|
||||
$('#userlist .popovermenu').removeClass('open');
|
||||
menudiv.addClass('open');
|
||||
menudiv.find('.action-togglestate').empty();
|
||||
if ($tr.data('userEnabled')) {
|
||||
$('.action-togglestate', $td).html('<span class="icon icon-close"></span><span>' + t('settings', 'Disable') + '</span>');
|
||||
|
|
|
|||
|
|
@ -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']]));?>
|
||||
|
|
|
|||
|
|
@ -43,7 +43,6 @@
|
|||
</td>
|
||||
<?php endif;?>
|
||||
<td class="quota">
|
||||
<div class="quota_progress_container"><div class="quota_progress"></div></div>
|
||||
<select class="quota-user" data-inputtitle="<?php p($l->t('Please enter storage quota (ex: "512 MB" or "12 GB")')) ?>">
|
||||
<option value='default'>
|
||||
<?php p($l->t('Default'));?>
|
||||
|
|
@ -60,12 +59,13 @@
|
|||
<?php p($l->t('Other'));?> ...
|
||||
</option>
|
||||
</select>
|
||||
<progress class="quota-user-progress" value="" max="100"></progress>
|
||||
</td>
|
||||
<td class="storageLocation"></td>
|
||||
<td class="userBackend"></td>
|
||||
<td class="lastLogin"></td>
|
||||
<td class="userActions"><span></span>
|
||||
<div class="popovermenu bubble open menu">
|
||||
<div class="popovermenu bubble menu">
|
||||
<ul class="userActionsMenu">
|
||||
<li>
|
||||
<a href="#" class="menuitem action-togglestate permanent" data-action="togglestate"></a>
|
||||
|
|
|
|||
Loading…
Reference in New Issue