mirror of
https://github.com/nextcloud/server.git
synced 2026-02-03 20:41:22 -05:00
04fc1a4418
The `security_password` was last used in the personal setting security section, but already migrated to vue. So it can be safely removed. The styles can also be removed by moving the required ones directly to the Vue component. Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
676 lines
10 KiB
SCSS
676 lines
10 KiB
SCSS
/*!
|
|
* SPDX-FileCopyrightText: 2016 Nextcloud GmbH and Nextcloud contributors
|
|
* SPDX-FileCopyrightText: 2011 Jan-Christoph Borchardt, http://jancborchardt.net
|
|
* SPDX-License-Identifier: AGPL-3.0-or-later
|
|
*/
|
|
@use 'variables';
|
|
@use 'sass:math';
|
|
@use 'functions';
|
|
|
|
input {
|
|
&#openid, &#webdav {
|
|
width: 20em;
|
|
}
|
|
}
|
|
|
|
/* PERSONAL */
|
|
.clear {
|
|
clear: both;
|
|
}
|
|
|
|
/* icons for sidebar */
|
|
.nav-icon-personal-settings {
|
|
@include functions.icon-color('personal', 'settings', variables.$color-black);
|
|
}
|
|
|
|
.nav-icon-security {
|
|
@include functions.icon-color('toggle-filelist', 'settings', variables.$color-black);
|
|
}
|
|
|
|
.nav-icon-clientsbox {
|
|
@include functions.icon-color('change', 'settings', variables.$color-black);
|
|
}
|
|
|
|
.nav-icon-federated-cloud {
|
|
@include functions.icon-color('share', 'settings', variables.$color-black);
|
|
}
|
|
|
|
.nav-icon-second-factor-backup-codes, .nav-icon-ssl-root-certificate {
|
|
@include functions.icon-color('password', 'settings', variables.$color-black);
|
|
}
|
|
|
|
#personal-settings-avatar-container {
|
|
display: inline-grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 2fr 1fr 2fr;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.profile-settings-container {
|
|
display: inline-grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
}
|
|
|
|
.personal-show-container {
|
|
width: 100%;
|
|
}
|
|
|
|
.personal-settings-setting-box {
|
|
.section {
|
|
padding: 10px 30px;
|
|
.headerbar-label {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
input {
|
|
&[type='text'], &[type='email'], &[type='tel'], &[type='url'] {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-profile {
|
|
grid-row: 3/5;
|
|
}
|
|
|
|
&-detail {
|
|
grid-row: 5;
|
|
}
|
|
&-detail--without-profile {
|
|
grid-row: 3;
|
|
}
|
|
}
|
|
|
|
select {
|
|
&#timezone {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
#personal-settings {
|
|
display: grid;
|
|
padding: 20px;
|
|
max-width: 1700px;
|
|
grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
|
|
grid-column-gap: 10px;
|
|
|
|
.section {
|
|
padding: 10px 10px;
|
|
border: 0;
|
|
|
|
h2 {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
h3 {
|
|
> label {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.personal-info {
|
|
margin-inline-end: 10%;
|
|
margin-bottom: 12px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.personal-info[class^='icon-'], .personal-info[class*=' icon-'] {
|
|
background-position: 0px 2px;
|
|
padding-inline-start: 30px;
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
|
|
// Button for 'Reasons to use Nextcloud in your organization'
|
|
.development-notice {
|
|
text-align: center;
|
|
a:not(.link-button) {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
.link-button {
|
|
display: inline-flex;
|
|
margin: calc(2 * var(--default-grid-baseline));
|
|
padding: calc(2 * var(--default-grid-baseline)) calc(4 * var(--default-grid-baseline));
|
|
background-color: var(--color-primary-element);
|
|
color: var(--color-primary-element-text);
|
|
border-radius: var(--border-radius-element);
|
|
border: 1px solid var(--color-primary-element);
|
|
box-shadow: 0 2px 9px var(--color-box-shadow);
|
|
align-items: center;
|
|
gap: calc(var(--default-grid-baseline) * 2);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: var(--color-primary-element-hover);
|
|
}
|
|
|
|
&:active,
|
|
&:focus-visible {
|
|
box-shadow: 0 0 0 4px var(--color-main-background) !important;
|
|
outline: 2px solid var(--color-main-text) !important;
|
|
}
|
|
|
|
.icon-file-text {
|
|
filter: var(--primary-invert-if-dark);
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
|
|
.personal-settings-container {
|
|
display: inline-grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
|
|
&:after {
|
|
clear: both;
|
|
}
|
|
|
|
> div {
|
|
h3 {
|
|
position: relative;
|
|
display: inline-flex;
|
|
flex-wrap: nowrap;
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
align-items: center;
|
|
gap: 8px;
|
|
|
|
> label {
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
> form span {
|
|
&[class^='icon-checkmark'], &[class^='icon-error'] {
|
|
position: relative;
|
|
inset-inline-end: 8px;
|
|
top: -28px;
|
|
pointer-events: none;
|
|
float: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
.verify {
|
|
position: relative;
|
|
inset-inline-start: 100%;
|
|
top: 0;
|
|
height: 0;
|
|
|
|
img {
|
|
padding: 12px 7px 6px;
|
|
}
|
|
}
|
|
|
|
.verify-action {
|
|
cursor: pointer;
|
|
}
|
|
|
|
input:disabled {
|
|
background-color: white;
|
|
color: black;
|
|
border: none;
|
|
opacity: 100;
|
|
}
|
|
}
|
|
|
|
/* verify accounts */
|
|
/* only show pointer cursor when popup will be there */
|
|
.verification-dialog {
|
|
display: none;
|
|
inset-inline-end: -9px;
|
|
top: 40px;
|
|
width: 275px;
|
|
|
|
p {
|
|
padding: 10px;
|
|
}
|
|
|
|
.verificationCode {
|
|
font-family: monospace;
|
|
display: block;
|
|
overflow-wrap: break-word;
|
|
}
|
|
}
|
|
|
|
.clientsbox img {
|
|
height: 60px;
|
|
}
|
|
|
|
#sslCertificate {
|
|
tr.expired {
|
|
background-color: rgba(255, 0, 0, 0.5);
|
|
}
|
|
|
|
td {
|
|
padding: 5px;
|
|
}
|
|
}
|
|
|
|
#displaynameerror,
|
|
#displaynamechanged {
|
|
display: none;
|
|
}
|
|
|
|
input#identity {
|
|
width: 20em;
|
|
}
|
|
|
|
#showWizard {
|
|
display: inline-block;
|
|
}
|
|
|
|
.msg {
|
|
&.success {
|
|
color: #fff;
|
|
background-color: #47a447;
|
|
padding: 3px;
|
|
}
|
|
|
|
&.error {
|
|
color: #fff;
|
|
background-color: #d2322d;
|
|
padding: 3px;
|
|
}
|
|
}
|
|
|
|
|
|
table.nostyle {
|
|
label {
|
|
margin-inline-end: 2em;
|
|
}
|
|
|
|
td {
|
|
padding: 0.2em 0;
|
|
}
|
|
}
|
|
|
|
/* Two-Factor Authentication (2FA) */
|
|
|
|
#two-factor-auth {
|
|
h3 {
|
|
margin-top: 24px;
|
|
}
|
|
|
|
li > div {
|
|
margin-inline-start: 20px;
|
|
}
|
|
|
|
.two-factor-provider-settings-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
filter: var(--background-invert-if-dark);
|
|
}
|
|
}
|
|
|
|
/* USERS */
|
|
|
|
.isgroup {
|
|
.groupname {
|
|
width: 85%;
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
&.active .groupname {
|
|
width: 65%;
|
|
}
|
|
}
|
|
|
|
li.active {
|
|
.delete,
|
|
.rename {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.app-navigation-entry-utils {
|
|
.delete,
|
|
.rename {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
#usersearchform {
|
|
position: absolute;
|
|
top: 2px;
|
|
inset-inline-end: 0;
|
|
|
|
input {
|
|
width: 150px;
|
|
}
|
|
|
|
label {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
/* display table at full width */
|
|
table.grid {
|
|
width: 100%;
|
|
|
|
th {
|
|
height: 2em;
|
|
padding: 0;
|
|
padding-inline-end: 1em;
|
|
border-bottom: 1px solid var(--color-border);
|
|
text-align: start;
|
|
font-weight: normal;
|
|
}
|
|
|
|
td {
|
|
border-bottom: 1px solid var(--color-border);
|
|
padding: 0;
|
|
padding-inline-end: 1em;
|
|
text-align: start;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
td, th {
|
|
&.name {
|
|
padding-inline-start: .8em;
|
|
min-width: 5em;
|
|
max-width: 12em;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
&.password {
|
|
padding-inline-start: .8em;
|
|
|
|
> img {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
&.displayName > img {
|
|
visibility: hidden;
|
|
}
|
|
|
|
&.password,
|
|
&.mailAddress {
|
|
min-width: 5em;
|
|
max-width: 12em;
|
|
cursor: pointer;
|
|
|
|
span {
|
|
width: 90%;
|
|
display: inline-block;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
&.mailAddress {
|
|
cursor: pointer;
|
|
}
|
|
|
|
&.password > span {
|
|
margin-inline-end: 1.2em;
|
|
color: #C7C7C7;
|
|
}
|
|
}
|
|
|
|
span.usersLastLoginTooltip {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* SETTINGS NAVIGATION */
|
|
#app-navigation {
|
|
/* Navigation icons */
|
|
img {
|
|
margin-bottom: -3px;
|
|
margin-inline-end: 6px;
|
|
width: 16px;
|
|
}
|
|
|
|
li span.no-icon {
|
|
padding-inline-start: 32px;
|
|
}
|
|
|
|
ul li.active > span.utils {
|
|
.delete, .rename {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* SETTINGS SECTIONS */
|
|
// to match with NcSettingsSection component
|
|
.section {
|
|
margin-bottom: 0;
|
|
/* section divider lines, none needed for last one */
|
|
&:not(:last-child) {
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
/* correctly display help icons next to headings */
|
|
h2 {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
max-width: 900px;
|
|
margin-top: 0;
|
|
|
|
.icon-info {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: var(--default-clickable-area);
|
|
height: var(--default-clickable-area);
|
|
margin: calc((var(--default-clickable-area) - 16px) / 2 * -1);
|
|
margin-inline-start: 0;
|
|
color: var(--color-text-maxcontrast);
|
|
}
|
|
|
|
}
|
|
|
|
p {
|
|
margin-top: -0.2em;
|
|
margin-bottom: 1em;
|
|
color: var(--color-text-maxcontrast);
|
|
max-width: 900px;
|
|
}
|
|
}
|
|
|
|
/* LOG */
|
|
#log {
|
|
white-space: normal;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
#lessLog {
|
|
display: none;
|
|
}
|
|
|
|
table.grid td.date {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#log-section p {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
#shareAPI {
|
|
&.loading > div {
|
|
display: none;
|
|
}
|
|
|
|
p {
|
|
padding-bottom: 0.8em;
|
|
}
|
|
|
|
.indent {
|
|
padding-inline-start: 28px;
|
|
}
|
|
|
|
.double-indent {
|
|
padding-inline-start: 56px;
|
|
}
|
|
|
|
.nocheckbox {
|
|
padding-inline-start: 20px;
|
|
}
|
|
|
|
#s2id_linksExcludedGroups {
|
|
width: 200px !important;
|
|
}
|
|
}
|
|
|
|
#shareApiDefaultPermissionsSection label {
|
|
margin-inline-end: 20px;
|
|
}
|
|
|
|
#fileSharingSettings h3 {
|
|
display: inline-block;
|
|
}
|
|
|
|
#publicShareDisclaimerText {
|
|
width: calc(100% - 23px);
|
|
/* 20 px left margin, 3 px right margin */
|
|
max-width: 600px;
|
|
height: 150px;
|
|
margin-inline-start: 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* correctly display help icons next to headings */
|
|
|
|
.icon-info {
|
|
padding: 11px 20px;
|
|
vertical-align: text-bottom;
|
|
opacity: .5;
|
|
}
|
|
|
|
#two-factor-auth h2,
|
|
#shareAPI h2,
|
|
#mail_general_settings h2 {
|
|
display: inline-block;
|
|
}
|
|
|
|
.mail_settings p {
|
|
label:first-child {
|
|
display: inline-block;
|
|
width: 300px;
|
|
text-align: end;
|
|
}
|
|
|
|
select:nth-child(2),
|
|
input:not([type='button']) {
|
|
width: 143px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: calc(variables.$breakpoint-mobile * 0.75)) {
|
|
.mail_settings p label:first-child {
|
|
width: unset;
|
|
text-align: start;
|
|
display: block;
|
|
margin-top: calc(var(--default-grid-baseline) * 2);
|
|
}
|
|
}
|
|
|
|
#mail_smtpport {
|
|
width: 60px;
|
|
}
|
|
|
|
.cronlog {
|
|
margin-inline-start: 10px;
|
|
}
|
|
|
|
.status {
|
|
display: inline-block;
|
|
height: 16px;
|
|
width: 16px;
|
|
vertical-align: text-bottom;
|
|
|
|
&.success {
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
#selectGroups select {
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
height: 36px;
|
|
padding: 7px 10px;
|
|
}
|
|
|
|
#log .log-message {
|
|
word-break: break-all;
|
|
min-width: 180px;
|
|
}
|
|
|
|
span {
|
|
&.success {
|
|
background-color: var(--color-success);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
&.error {
|
|
background-color: var(--color-error);
|
|
}
|
|
|
|
&.indeterminate {
|
|
background-color: var(--color-warning);
|
|
border-radius: 40% 0;
|
|
}
|
|
}
|
|
|
|
|
|
/* OPERA hack for strengthify*/
|
|
doesnotexist:-o-prefocus, .strengthify-wrapper {
|
|
inset-inline-start: 185px;
|
|
width: 129px;
|
|
}
|
|
|
|
.trusted-domain-warning {
|
|
color: #fff;
|
|
padding: 5px;
|
|
background: #ce3702;
|
|
border-radius: 5px;
|
|
font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
|
}
|
|
|
|
#warning {
|
|
color: red;
|
|
}
|
|
|
|
.settings-hint {
|
|
color: var(--color-text-maxcontrast);
|
|
margin-block: -12px 12px;
|
|
}
|
|
|
|
.animated {
|
|
animation: blink-animation 1s steps(5, start) 4;
|
|
}
|
|
|
|
@keyframes blink-animation {
|
|
to {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
@-webkit-keyframes blink-animation {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
#sendtestmail_msg {
|
|
&.error {
|
|
display: inline-block;
|
|
margin-top: 5px;
|
|
border-radius: var(--border-radius);
|
|
padding: 5px 10px;
|
|
}
|
|
}
|