summaryrefslogtreecommitdiffstats
path: root/settings/css
diff options
context:
space:
mode:
Diffstat (limited to 'settings/css')
-rw-r--r--settings/css/settings.scss220
1 files changed, 72 insertions, 148 deletions
diff --git a/settings/css/settings.scss b/settings/css/settings.scss
index 84939b01798..9a315b79151 100644
--- a/settings/css/settings.scss
+++ b/settings/css/settings.scss
@@ -13,11 +13,6 @@ input {
clear: both;
}
-.icon-federation-menu {
- width: 16px;
- float: right;
-}
-
/* icons for sidebar */
.nav-icon-personal-settings {
background-image: url('../img/personal.svg?v=1');
@@ -40,12 +35,13 @@ input {
}
#avatarform {
- > h2 {
- position: relative;
- }
.avatardiv {
margin: 10px auto;
}
+ .federationScopeMenu {
+ /* popover magic fix */
+ margin-right: calc(-50% - 7px);
+ }
.warning {
width: 100%;
}
@@ -121,12 +117,19 @@ input {
}
}
-#personal-settings-avatar-container h2 span[class^="icon-"] {
+.icon-federation-menu {
padding-left: 16px;
background-size: 16px;
background-position: left 8px;
opacity: .3;
+ margin-left: 10px;
cursor: pointer;
+
+ .icon-triangle-s {
+ display: inline-block;
+ vertical-align: middle;
+ cursor: pointer;
+ }
}
.personal-show-container {
@@ -161,18 +164,22 @@ input {
&:after {
clear: both;
}
- > div {
+ &:not(#personal-settings-avatar-container) > div {
float: left;
width: 300px;
+ }
+ > div {
h2 {
position: relative;
margin-bottom: 5px;
- span[class^="icon-"] {
- padding-left: 16px;
- background-size: 16px;
- background-position: left 8px;
- opacity: .3;
- cursor: pointer;
+ display: inline-flex;
+ flex-wrap: nowrap;
+ justify-content: space-between;
+ width: 100%;
+ > label {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
}
}
> form span {
@@ -224,7 +231,7 @@ input {
.federationScopeMenu {
top: 44px;
- margin: -5px 5px 0;
+ margin-right: calc(-50% + 30px); /* half - the triangle icon width - borders */
&.bubble::after {
right: 50%;
transform: translate(50%, 0);
@@ -241,6 +248,8 @@ input {
opacity: .75;
}
&.active {
+ box-shadow: inset 2px 0 $color-primary;
+
.menuitem-text {
font-weight: 600;
}
@@ -410,42 +419,6 @@ table.nostyle {
}
/* USERS */
-#newgroup-init a span {
- margin-left: 20px;
- &:before {
- position: absolute;
- left: 12px;
- top: -2px;
- content: '+';
- font-weight: bold;
- font-size: 150%;
- }
-}
-
-#newgroup-form {
- height: 44px;
-}
-
-#newgroupname {
- margin: 0;
- width: 100%;
- padding: 12px 40px 12px 12px;
- box-sizing: border-box;
- background-color: transparent;
- border: none;
- border-bottom: 1px solid $color-border;
- border-radius: 0;
-}
-
-#newgroup-form .button {
- position: absolute;
- right: 0;
- top: 0;
- padding: 10px 20px;
- background-color: transparent;
- border: none;
- opacity: .5;
-}
.isgroup {
.groupname {
@@ -459,44 +432,18 @@ table.nostyle {
}
}
-.usercount {
- float: left;
- margin: 5px;
-}
-
li.active {
- span.utils .delete {
- float: left;
- position: relative;
- opacity: 0.5;
- top: -7px;
- left: 7px;
- width: 44px;
- height: 44px;
- }
+ .delete,
.rename {
- padding: 8px 14px 20px 14px;
- top: 0px;
- position: absolute;
- width: 16px;
- height: 16px;
- opacity: 0.5;
- display: inline-block !important;
- }
- span.utils .delete img {
- margin: 14px;
- }
- .rename {
- opacity: 0.5;
- }
- span.utils .delete:hover, .rename:hover {
- opacity: 1;
+ display: block;
}
}
-span.utils .delete,
-.rename {
- display: none;
+.app-navigation-entry-utils {
+ .delete,
+ .rename {
+ display: none;
+ }
}
#usersearchform {
@@ -542,14 +489,17 @@ td {
visibility: hidden;
}
}
- &.displayName > img, &.quota > img {
+ &.displayName > img {
visibility: hidden;
}
- &.password, &.quota, &.displayName {
+ &.password, &.displayName {
width: 12em;
cursor: pointer;
}
- &.password > span, &.quota > span {
+ &.mailAddress {
+ cursor: pointer;
+ }
+ &.password > span {
margin-right: 1.2em;
color: #C7C7C7;
}
@@ -581,42 +531,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 */
@@ -638,11 +552,11 @@ span.usersLastLoginTooltip {
}
tr:hover > td {
- &.password > span, &.displayName > span {
+ &.password > span, &.displayName > span, &.mailAddress > span {
margin: 0;
cursor: pointer;
}
- &.password > img, &.displayName > img, &.quota > img {
+ &.password > img, &.displayName > img, &.mailAddress > img {
visibility: visible;
cursor: pointer;
}
@@ -651,10 +565,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 {
@@ -685,18 +613,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;
}
}
@@ -704,20 +644,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;
@@ -1160,8 +1086,6 @@ table.grid td.date {
}
#selectGroups select {
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
height: 36px;
generated by cgit v1.2.3 (git 2.39.1) at 2025-02-06 10:03:49 +0000