Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>tags/v14.0.0beta1
box-sizing: border-box; | box-sizing: border-box; | ||||
white-space: nowrap; | white-space: nowrap; | ||||
text-overflow: ellipsis; | text-overflow: ellipsis; | ||||
color: var(--color-error); | |||||
color: var(--color-main-text); | |||||
opacity: .57; | opacity: .57; | ||||
flex: 1 1 0px; | flex: 1 1 0px; | ||||
z-index: 100; /* above the bullet to allow click*/ | z-index: 100; /* above the bullet to allow click*/ | ||||
.info-text { | .info-text { | ||||
padding: 5px 0 7px 22px; | padding: 5px 0 7px 22px; | ||||
color: rgba(var(--color-main-text), .4); | |||||
color: var(--color-text-lighter); | |||||
} | } | ||||
input { | input { | ||||
&[type='checkbox'], | &[type='checkbox'], |
--color-primary-text: $color-primary-text; | --color-primary-text: $color-primary-text; | ||||
--color-primary-text-dark: $color-primary-text-dark; | --color-primary-text-dark: $color-primary-text-dark; | ||||
--color-primary-element: $color-primary-element; | --color-primary-element: $color-primary-element; | ||||
--color-primary-element-light: $color-primary-element-light; | |||||
--color-error: $color-error; | --color-error: $color-error; | ||||
--color-warning: $color-warning; | --color-warning: $color-warning; | ||||
--color-success: $color-success; | --color-success: $color-success; | ||||
--color-text-maxcontrast: $color-text-maxcontrast; | --color-text-maxcontrast: $color-text-maxcontrast; | ||||
--color-text-light: $color-text-light; | |||||
--color-text-lighter: $color-text-lighter; | --color-text-lighter: $color-text-lighter; | ||||
--color-text-details: $color-text-details; | |||||
--image-logo: $image-logo; | --image-logo: $image-logo; | ||||
--image-login-background: $image-login-background; | --image-login-background: $image-login-background; | ||||
--color-loading: $color-loading; | |||||
--color-loading-light: $color-loading-light; | |||||
--color-loading-dark: $color-loading-dark; | --color-loading-dark: $color-loading-dark; | ||||
--color-box-shadow: $color-box-shadow; | --color-box-shadow: $color-box-shadow; |
#settings { | #settings { | ||||
display: inline-block; | display: inline-block; | ||||
height: 100%; | height: 100%; | ||||
color: rgba(var(--color-primary-text), 0.7); | |||||
cursor: pointer; | cursor: pointer; | ||||
flex: 0 0 auto; | flex: 0 0 auto; | ||||
border-radius: var(--border-radius); | border-radius: var(--border-radius); | ||||
border-top-left-radius: 0; | border-top-left-radius: 0; | ||||
border-top-right-radius: 0; | border-top-right-radius: 0; | ||||
color: rgba(var(--color-main-text), .7); | |||||
color: var(--color-text-lighter); | |||||
width: auto; | width: auto; | ||||
left: 50%; | left: 50%; | ||||
top: 100%; | top: 100%; |
-webkit-transform-origin: center; | -webkit-transform-origin: center; | ||||
-ms-transform-origin: center; | -ms-transform-origin: center; | ||||
transform-origin: center; | transform-origin: center; | ||||
border: 2px solid rgba(var(--color-loading), 0.5); | |||||
border-top-color: var(--color-loading); | |||||
border: 2px solid var(--color-loading-dark); | |||||
border-top-color: var(--color-loading-light); | |||||
} | } | ||||
} | } | ||||
.icon-loading-dark:after, | .icon-loading-dark:after, | ||||
.icon-loading-small-dark:after { | .icon-loading-small-dark:after { | ||||
border: 2px solid rgba(var(--color-loading-dark), 0.5); | |||||
border: 2px solid var(--color-loading-light); | |||||
border-top-color: var(--color-loading-dark); | border-top-color: var(--color-loading-dark); | ||||
} | } | ||||
box-sizing: border-box; | box-sizing: border-box; | ||||
} | } | ||||
/** | |||||
* color-text-lighter normal state | |||||
* color-text-lighter active state | |||||
* color-text-maxcontrast disabled state | |||||
*/ | |||||
/* Default global values */ | /* Default global values */ | ||||
select, | select, | ||||
button, .button, | button, .button, | ||||
&:active { | &:active { | ||||
outline: none; | outline: none; | ||||
background-color: var(--color-main-background); | background-color: var(--color-main-background); | ||||
color: var(--color-text-light); | |||||
} | } | ||||
} | } | ||||
&:disabled { | &:disabled { | ||||
background-color: var(--color-background-dark); | background-color: var(--color-background-dark); | ||||
color: rgba(var(--color-main-text), 0.4); | |||||
color: var(--color-text-maxcontrast); | |||||
cursor: default; | cursor: default; | ||||
opacity: 0.5; | opacity: 0.5; | ||||
} | } | ||||
cursor: pointer; | cursor: pointer; | ||||
&:not(:disabled) { | &:not(:disabled) { | ||||
&:hover, | &:hover, | ||||
&:focus { | |||||
background-color: rgba(var(--color-primary-element), .85); | |||||
&:focus, | |||||
&:active { | |||||
background-color: var(--color-primary-element-light) | |||||
} | } | ||||
&:active { | &:active { | ||||
background-color: rgba(var(--color-primary-element), .7); | |||||
color: var(--color-primary-text-dark); | |||||
} | } | ||||
} | } | ||||
&:disabled { | &:disabled { | ||||
background-color: rgba(var(--color-primary-element), .7); | |||||
// opacity is already defined to .5 if disabled | |||||
background-color: var(--color-primary-element); | |||||
color: var(--color-primary-text-dark); | color: var(--color-primary-text-dark); | ||||
} | } | ||||
} | } | ||||
cursor: text; | cursor: text; | ||||
background-color: var(--color-background-dark); | background-color: var(--color-background-dark); | ||||
color: rgba(var(--color-main-text), 0.4); | |||||
color: var(--color-text-lighter); | |||||
cursor: default; | cursor: default; | ||||
opacity: 0.5; | opacity: 0.5; | ||||
} | } | ||||
/* We do not use the nc-darken function as this is not supposed to be changed */ | /* We do not use the nc-darken function as this is not supposed to be changed */ | ||||
$color-checkbox-radio-white: #fff; | $color-checkbox-radio-white: #fff; | ||||
--color-checkbox-radio-white: $color-checkbox-radio-white; | |||||
&.radio--white, | &.radio--white, | ||||
&.checkbox--white { | &.checkbox--white { | ||||
+ label:before, | + label:before, | ||||
border-color: darken($color-checkbox-radio-white, 27%); | border-color: darken($color-checkbox-radio-white, 27%); | ||||
} | } | ||||
&:not(:disabled):not(:checked) + label:hover:before { | &:not(:disabled):not(:checked) + label:hover:before { | ||||
border-color: var(--color-checkbox-radio-white); | |||||
border-color: $color-checkbox-radio-white; | |||||
} | } | ||||
&:checked + label:before { | &:checked + label:before { | ||||
box-shadow: inset 0px 0px 0px 2px var(--color-main-background); | box-shadow: inset 0px 0px 0px 2px var(--color-main-background); | ||||
} | } | ||||
&:disabled + label:before { | &:disabled + label:before { | ||||
background-color: darken($color-checkbox-radio-white, 27%) !important; /* override other status */ | background-color: darken($color-checkbox-radio-white, 27%) !important; /* override other status */ | ||||
border-color: rgba(var(--color-checkbox-radio-white), 0.4) !important; /* override other status */ | |||||
border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */ | |||||
} | } | ||||
&:checked:disabled + label:before { | &:checked:disabled + label:before { | ||||
box-shadow: inset 0px 0px 0px 2px var(--color-main-background); | box-shadow: inset 0px 0px 0px 2px var(--color-main-background); | ||||
border-color: rgba(var(--color-checkbox-radio-white), 0.4) !important; /* override other status */ | |||||
border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */ | |||||
background-color: darken($color-checkbox-radio-white, 27%); | background-color: darken($color-checkbox-radio-white, 27%); | ||||
} | } | ||||
} | } | ||||
&:checked + label:before, | &:checked + label:before, | ||||
&:indeterminate + label:before { | &:indeterminate + label:before { | ||||
background-color: transparent !important; /* Override default checked */ | background-color: transparent !important; /* Override default checked */ | ||||
border-color: var(--color-checkbox-radio-white) !important; /* Override default checked */ | |||||
border-color: $color-checkbox-radio-white !important; /* Override default checked */ | |||||
background-image: url('../img/actions/checkbox-mark-white.svg'); | background-image: url('../img/actions/checkbox-mark-white.svg'); | ||||
} | } | ||||
&:indeterminate + label:before { | &:indeterminate + label:before { |
width: 44px; | width: 44px; | ||||
height: 44px; | height: 44px; | ||||
z-index: 149; | z-index: 149; | ||||
background-color: rgba(var(--color-main-background), .7); | |||||
background-color: var(--color-main-background-darker); | |||||
cursor: pointer; | cursor: pointer; | ||||
opacity: .6; | opacity: .6; | ||||
} | } |
.error { | .error { | ||||
color: var(--color-error); | color: var(--color-error); | ||||
border-color: var(--color-error); | border-color: var(--color-error); | ||||
box-shadow: 0 0 6px rgba(var(--color-error), 0.35); | |||||
} | } | ||||
.mailView .icon-mail { | .mailView .icon-mail { | ||||
opacity: 0.5; | opacity: 0.5; | ||||
.notCreatable { | .notCreatable { | ||||
padding-left: 12px; | padding-left: 12px; | ||||
padding-top: 12px; | padding-top: 12px; | ||||
color: rgba(var(--color-main-text), .4); | |||||
color: var(--color-text-lighter); | |||||
} | } | ||||
.contactsmenu-popover { | .contactsmenu-popover { |
width: 258px !important; | width: 258px !important; | ||||
display: inline-block; | display: inline-block; | ||||
margin-bottom: 0 !important; | margin-bottom: 0 !important; | ||||
background-color: rgba(var(--color-main-text), 0.3) !important; | |||||
background-color: var(--color-background-darker) !important; | |||||
border: none !important; | border: none !important; | ||||
} | } | ||||
.two-factor-link { | .two-factor-link { | ||||
display: inline-block; | display: inline-block; | ||||
padding: 12px; | padding: 12px; | ||||
color: rgba(var(--color-main-background), 0.75); | |||||
color: var(--color-text-lighter); | |||||
} | } | ||||
.float-spinner { | .float-spinner { | ||||
width: 100%; | width: 100%; | ||||
z-index: 9000; | z-index: 9000; | ||||
text-align: center; | text-align: center; | ||||
background-color: rgba(var(--color-main-text), 0.5); | |||||
background-color: var(--color-background-darker); | |||||
color: var(--color-primary-text); | color: var(--color-primary-text); | ||||
line-height: 125%; | line-height: 125%; | ||||
font-size: 24px; | font-size: 24px; | ||||
width: 155px; | width: 155px; | ||||
cursor: text; | cursor: text; | ||||
background-color: var(--color-primary) !important; | background-color: var(--color-primary) !important; | ||||
border: 1px solid rgba(var(--color-primary-text), 0.5) !important; | |||||
border: 1px solid var(--color-primary-text-dark) !important; | |||||
} | } | ||||
&:hover, &:focus, &:active { | &:hover, &:focus, &:active { | ||||
opacity: 1; | opacity: 1; | ||||
height: 44px; | height: 44px; | ||||
padding: 0; | padding: 0; | ||||
margin: 0; | margin: 0; | ||||
background-color: rgba(var(--color-main-background), 0.95); | |||||
background-color: var(--color-main-background-light); | |||||
z-index: 60; | z-index: 60; | ||||
-webkit-user-select: none; | -webkit-user-select: none; | ||||
-moz-user-select: none; | -moz-user-select: none; | ||||
border-top: 0 !important; | border-top: 0 !important; | ||||
border-bottom: 0 !important; | border-bottom: 0 !important; | ||||
border-radius: 0 !important; | border-radius: 0 !important; | ||||
box-shadow: 0 1px 0 rgba(var(--color-main-text), 0.1) inset !important; | |||||
} | } | ||||
#body-login .groupbottom input, .groupbottom input { | #body-login .groupbottom input, .groupbottom input { | ||||
border-top: 0 !important; | border-top: 0 !important; | ||||
border-top-right-radius: 0 !important; | border-top-right-radius: 0 !important; | ||||
border-top-left-radius: 0 !important; | border-top-left-radius: 0 !important; | ||||
box-shadow: 0 1px 0 rgba(var(--color-main-text), 0.1) inset !important; | |||||
} | } | ||||
#body-login .groupbottom input[type=submit] { | #body-login .groupbottom input[type=submit] { | ||||
user-select: none; | user-select: none; | ||||
} | } | ||||
.errors { | .errors { | ||||
background: rgba(var(--color-error), .35); | |||||
border: 1px solid var(--color-error); | border: 1px solid var(--color-error); | ||||
list-style-indent: inside; | list-style-indent: inside; | ||||
margin: 0 0 2em; | margin: 0 0 2em; | ||||
} | } | ||||
} | } | ||||
.success { | .success { | ||||
background: rgba(var(--color-success), .35); | |||||
border: 1px solid var(--color-success); | border: 1px solid var(--color-success); | ||||
width: 35%; | width: 35%; | ||||
margin: 30px auto; | margin: 30px auto; | ||||
.warning, .update, .error { | .warning, .update, .error { | ||||
display: block; | display: block; | ||||
padding: 10px; | padding: 10px; | ||||
background-color: rgba(var(--color-main-text), 0.3); | |||||
background-color: var(--color-background-darker); | |||||
color: var(--color-primary-text); | color: var(--color-primary-text); | ||||
text-align: left; | text-align: left; | ||||
border-radius: var(--border-radius); | border-radius: var(--border-radius); | ||||
#body-user .warning, #body-settings .warning { | #body-user .warning, #body-settings .warning { | ||||
margin-top: 8px; | margin-top: 8px; | ||||
padding: 5px; | padding: 5px; | ||||
background: rgba(var(--color-error), .15); | |||||
border-radius: var(--border-radius); | border-radius: var(--border-radius); | ||||
} | } | ||||
} | } | ||||
// SCSS variables | // SCSS variables | ||||
$color-main-text: #000000; | |||||
$color-main-background: #ffffff; | |||||
// DEPRECATED, please use CSS4 vars | |||||
$color-main-text: #000; | |||||
$color-main-background: #fff; | |||||
// used for different active/disabled states | // used for different active/disabled states | ||||
$color-background-dark: nc-darken($color-main-background, 7%); | $color-background-dark: nc-darken($color-main-background, 7%); | ||||
$color-primary-text: #ffffff; | $color-primary-text: #ffffff; | ||||
$color-primary-text-dark: nc-darken($color-primary-text, 7%); | $color-primary-text-dark: nc-darken($color-primary-text, 7%); | ||||
$color-primary-element: $color-primary; | $color-primary-element: $color-primary; | ||||
$color-primary-element-light: nc-lighten($color-primary-element, 15%); | |||||
$color-error: #e9322d; | $color-error: #e9322d; | ||||
$color-warning: #eca700; | $color-warning: #eca700; | ||||
$image-logo: url('../img/logo.svg?v=1'); | $image-logo: url('../img/logo.svg?v=1'); | ||||
$image-login-background: url('../img/background.png?v=2'); | $image-login-background: url('../img/background.png?v=2'); | ||||
$color-loading: #969696; | |||||
$color-loading-dark: #bbbbbb; | |||||
$color-loading-light: #777; | |||||
$color-loading-dark: #ccc; | |||||
$color-box-shadow: rgba(nc-darken($color-main-background, 70%), 0.75); | $color-box-shadow: rgba(nc-darken($color-main-background, 70%), 0.75); | ||||