diff --git a/settings/css/settings.css b/settings/css/settings.css index 0777f7e4cf..95649fc23e 100644 --- a/settings/css/settings.css +++ b/settings/css/settings.css @@ -2,8 +2,13 @@ This file is licensed under the Affero General Public License version 3 or later. See the COPYING-README file. */ -select#languageinput, select#timezone { width:15em; } -input#openid, input#webdav { width:20em; } +select#languageinput, select#timezone { + width: 15em; +} + +input#openid, input#webdav { + width: 20em; +} /* PERSONAL */ @@ -11,21 +16,27 @@ input#openid, input#webdav { width:20em; } .nav-icon-personal-settings { background-image: url('../img/personal.svg?v=1'); } + .nav-icon-sessions { background-image: url('../img/toggle-filelist.svg?v=1'); } + .nav-icon-apppasswords { background-image: url('../img/password.svg?v=1'); } + .nav-icon-clientsbox { background-image: url('../img/change.svg?v=1'); } + .nav-icon-federated-cloud { background-image: url('../img/share.svg?v=1'); } + .nav-icon-second-factor-backup-codes { background-image: url('../img/password.svg?v=1'); } + .nav-icon-ssl-root-certificate { background-image: url('../img/password.svg?v=1'); } @@ -34,15 +45,19 @@ input#openid, input#webdav { width:20em; } min-width: 145px; padding-right: 0; } + #avatarform .avatardiv { margin-bottom: 10px; } + #avatarform .warning { width: 100%; } + #displayavatar { text-align: center; } + #displayavatar p { text-align: left; } @@ -53,9 +68,11 @@ input#openid, input#webdav { width:20em; } width: 33px; height: 33px; } + .jcrop-holder { z-index: 500; } + #cropper { float: left; z-index: 500; @@ -68,6 +85,7 @@ input#openid, input#webdav { width:20em; } width: 100%; height: calc(100% - 45px); } + #cropper .inner-container { z-index: 2001; /* above the top bar if needed */ position: absolute; @@ -84,9 +102,11 @@ input#openid, input#webdav { width:20em; } #cropper .inner-container .jcrop-holder { box-shadow: 0 0 7px #888; } + #cropper .inner-container .button { margin-top: 15px; } + #cropper .inner-container .primary { float: right; } @@ -94,6 +114,7 @@ input#openid, input#webdav { width:20em; } #personal-settings-avatar-container { float: left; } + #personal-settings-container { position: relative; float: left; @@ -101,22 +122,27 @@ input#openid, input#webdav { width:20em; } max-width: 700px; width: calc(100% - 200px); } + #personal-settings-container:after { clear: both; } + #personal-settings-container > div { float: left; height: 100px; min-width: 300px; } + #personal-settings-container.no-edit > div { height: 20px; min-width: 200px; } + #avatarform > h2, #personal-settings-container > div h2 { position: relative; } + #personal-settings-container > div h2 span[class^="icon-"], #personal-settings-avatar-container h2 span[class^="icon-"] { display: inline-block; @@ -127,11 +153,13 @@ input#openid, input#webdav { width:20em; } opacity: .3; cursor: pointer; } + .personal-settings-setting-box input[type="text"], .personal-settings-setting-box input[type="email"], .personal-settings-setting-box input[type="tel"] { width: 17em; } + #personal-settings-container > div > form span[class^="icon-checkmark"] { position: absolute; left: 228px; @@ -145,22 +173,27 @@ input#openid, input#webdav { width:20em; } right: 14px; top: 70px; } + #personal-settings-container .verify img { padding: 12px 7px 6px; } + /* only show pointer cursor when popup will be there */ #personal-settings-container .verify-action { cursor: pointer; } + .verification-dialog { display: none; right: -9px; top: 40px; width: 275px; } + .verification-dialog p { padding: 10px; } + .verification-dialog .verificationCode { font-family: monospace; display: block; @@ -171,16 +204,19 @@ input#openid, input#webdav { width:20em; } top: 44px; margin: -5px 0px 0; } + .federationScopeMenu.bubble::after { right: 50%; transform: translate(50%, 0); } + .federationScopeMenu.popovermenu a.menuitem, .federationScopeMenu.popovermenu label.menuitem, .federationScopeMenu.popovermenu .menuitem { font-size: 12.8px; line-height: 1.6em; } + .federationScopeMenu.popovermenu .menuitem .menuitem-text-detail { opacity: .75; } @@ -194,11 +230,13 @@ input#openid, input#webdav { width:20em; } padding-right: 0; min-width: 60%; } + #avatarform, #passwordform { margin-bottom: 0; padding-bottom: 0; } + #groups { overflow-wrap: break-word; max-width: 75%; @@ -213,17 +251,19 @@ input#openid, input#webdav { width:20em; } #sslCertificate tr.expired { background-color: rgba(255, 0, 0, 0.5); } + #sslCertificate td { padding: 5px; } - #displaynameerror { display: none; } + #displaynamechanged { display: none; } + input#identity { width: 20em; } @@ -237,6 +277,7 @@ input#identity { background-color: #47a447; padding: 3px; } + .msg.error { color: #fff; background-color: #d2322d; @@ -247,8 +288,13 @@ input#identity { display: inline-block; } -table.nostyle label { margin-right: 2em; } -table.nostyle td { padding: 0.2em 0; } +table.nostyle label { + margin-right: 2em; +} + +table.nostyle td { + padding: 0.2em 0; +} #sessions table, #apppasswords table { @@ -257,10 +303,12 @@ table.nostyle td { padding: 0.2em 0; } padding-top: 5px; max-width: 580px; } + #sessions table th, #apppasswords table th { opacity: .5; } + #sessions table th, #sessions table td, #apppasswords table th, @@ -286,10 +334,11 @@ table.nostyle td { padding: 0.2em 0; } position: relative; } -#sessions tr>*:nth-child(2), -#apppasswords tr>*:nth-child(2) { +#sessions tr > *:nth-child(2), +#apppasswords tr > *:nth-child(2) { text-align: right; } + #sessions .token-list td > a.icon, #apppasswords .token-list td > a.icon { opacity: 0; @@ -305,7 +354,7 @@ table.nostyle td { padding: 0.2em 0; } #sessions .token-list tr:hover td > a.icon, #apppasswords .token-list tr:hover td > a.icon, #sessions .token-list tr.active td > a.icon, -#apppasswords .token-list tr.active td > a.icon{ +#apppasswords .token-list tr.active td > a.icon { opacity: 0.6; } @@ -329,7 +378,7 @@ table.nostyle td { padding: 0.2em 0; } } #sessions .token-list tr.active div.configure > *, -#apppasswords .token-list tr.active div.configure > *{ +#apppasswords .token-list tr.active div.configure > * { margin-top: 5px; margin-bottom: 5px; display: inline-block; @@ -347,6 +396,7 @@ table.nostyle td { padding: 0.2em 0; } font-family: monospace; background-color: lightyellow; } + .app-password-row { display: table-row; } @@ -369,21 +419,29 @@ table.nostyle td { padding: 0.2em 0; } padding-left: 0 !important; margin-left: -10px } + .social-button img { padding: 10px; } - /* USERS */ -#newgroup-init a span { margin-left: 20px; } +#newgroup-init a span { + margin-left: 20px; +} + #newgroup-init a span:before { - position: absolute; left: 12px; top:-2px; - content: '+'; font-weight: bold; font-size: 150%; + position: absolute; + left: 12px; + top: -2px; + content: '+'; + font-weight: bold; + font-size: 150%; } #newgroup-form { height: 44px; } + #newgroupname { margin: 0; width: 100%; @@ -394,6 +452,7 @@ table.nostyle td { padding: 0.2em 0; } border-bottom: 1px solid #eee; border-radius: 0; } + #newgroup-form .button { position: absolute; right: 0; @@ -410,36 +469,70 @@ table.nostyle td { padding: 0.2em 0; } overflow: hidden; text-overflow: ellipsis; } + .isgroup.active .groupname { width: 65%; } -.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; +.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; +} + li.active .rename { padding: 8px 14px 20px 14px; - top: 0px; position: absolute; width: 16px; height: 16px; + top: 0px; + position: absolute; + width: 16px; + height: 16px; opacity: 0.5; display: inline-block !important; } -li.active span.utils .delete img { margin: 14px; } -li.active .rename { opacity: 0.5; } -li.active span.utils .delete:hover, li.active .rename:hover { opacity: 1; } -span.utils .delete, .rename { display: none; } + +li.active span.utils .delete img { + margin: 14px; +} + +li.active .rename { + opacity: 0.5; +} + +li.active span.utils .delete:hover, li.active .rename:hover { + opacity: 1; +} + +span.utils .delete, .rename { + display: none; +} + #app-navigation ul li.active > span.utils .delete, -#app-navigation ul li.active > span.utils .rename { display: block; } +#app-navigation ul li.active > span.utils .rename { + display: block; +} + #usersearchform { position: absolute; top: 2px; right: 0; } + #usersearchform input { width: 150px; } -#usersearchform label { font-weight: 700; } + +#usersearchform label { + font-weight: 700; +} /* display table at full width */ table.grid { @@ -450,6 +543,7 @@ table.grid th { height: 2em; color: #999; } + table.grid th, table.grid td { border-bottom: 1px solid #eee; padding: 0 .5em; @@ -457,11 +551,28 @@ table.grid th, table.grid td { text-align: left; font-weight: normal; } -td.name, td.password { padding-left:.8em; } -td.password>img,td.displayName>img, td.quota>img { visibility:hidden; } -td.password, td.quota, td.displayName { width:12em; cursor:pointer; } -td.password>span, td.quota>span { margin-right: 1.2em; color: #C7C7C7; } -span.usersLastLoginTooltip { white-space: nowrap; } + +td.name, td.password { + padding-left: .8em; +} + +td.password > img, td.displayName > img, td.quota > img { + visibility: hidden; +} + +td.password, td.quota, td.displayName { + width: 12em; + cursor: pointer; +} + +td.password > span, td.quota > span { + margin-right: 1.2em; + color: #C7C7C7; +} + +span.usersLastLoginTooltip { + white-space: nowrap; +} /* dropdowns will be relative to this element */ #userlist { @@ -472,7 +583,7 @@ span.usersLastLoginTooltip { white-space: nowrap; } #userlist .storageLocation, #userlist .userBackend, #userlist .lastLogin { - display : none; + display: none; } /* because of accessibility the name cell is