Styles scss
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv)
parent
eb257b8dd3
commit
4ac9d1d87f
|
|
@ -54,7 +54,7 @@ table, td, th {
|
|||
|
||||
a {
|
||||
border: 0;
|
||||
color: $color-main-text;
|
||||
color: var(--color-main-text);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
* {
|
||||
|
|
@ -83,18 +83,18 @@ ul {
|
|||
}
|
||||
|
||||
body {
|
||||
background-color: $color-main-background;
|
||||
background-color: var(--color-main-background);
|
||||
font-weight: 400;
|
||||
font-size: .8em;
|
||||
line-height: 1.6em;
|
||||
font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
|
||||
color: $color-main-text;
|
||||
color: var(--color-main-text);
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#body-login {
|
||||
text-align: center;
|
||||
background-color: $color-primary;
|
||||
background-color: var(--color-primary);
|
||||
background-image: url('../img/background.png?v=2');
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -110,14 +110,14 @@ body {
|
|||
width: 258px !important;
|
||||
display: inline-block;
|
||||
margin-bottom: 0 !important;
|
||||
background-color: rgba($color-main-text, 0.3) !important;
|
||||
background-color: rgba(var(--color-main-text), 0.3) !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.two-factor-link {
|
||||
display: inline-block;
|
||||
padding: 12px;
|
||||
color: rgba($color-main-background, 0.75);
|
||||
color: rgba(var(--color-main-background), 0.75);
|
||||
}
|
||||
|
||||
.float-spinner {
|
||||
|
|
@ -138,8 +138,8 @@ body {
|
|||
width: 100%;
|
||||
z-index: 9000;
|
||||
text-align: center;
|
||||
background-color: rgba($color-main-text, 0.5);
|
||||
color: $color-primary-text;
|
||||
background-color: rgba(var(--color-main-text), 0.5);
|
||||
color: var(--color-primary-text);
|
||||
line-height: 125%;
|
||||
font-size: 24px;
|
||||
div {
|
||||
|
|
@ -150,8 +150,8 @@ body {
|
|||
margin: 0px auto;
|
||||
}
|
||||
a {
|
||||
color: $color-primary-text;
|
||||
border-bottom: 2px dotted $color-main-background;
|
||||
color: var(--color-primary-text);
|
||||
border-bottom: 2px dotted var(--color-main-background);
|
||||
&:hover, &:focus {
|
||||
color: nc-lighten($color-main-text, 86%);
|
||||
}
|
||||
|
|
@ -171,7 +171,7 @@ body {
|
|||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: nc-darken($color-main-background, 14%);
|
||||
border-radius: $border-radius;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
/* Searchbox */
|
||||
|
|
@ -185,9 +185,9 @@ body {
|
|||
padding-left: 25px;
|
||||
padding-right: 20px;
|
||||
background: transparent url('../img/actions/search-white.svg?v=1') no-repeat center center;
|
||||
color: $color-primary-text;
|
||||
color: var(--color-primary-text);
|
||||
border: 0;
|
||||
border-radius: $border-radius;
|
||||
border-radius: var(--border-radius);
|
||||
margin-top: 9px;
|
||||
width: 0;
|
||||
cursor: pointer;
|
||||
|
|
@ -196,11 +196,11 @@ body {
|
|||
opacity: .6;
|
||||
&:focus, &:active, &:valid {
|
||||
background-position-x: 6px;
|
||||
color: $color-primary-text;
|
||||
color: var(--color-primary-text);
|
||||
width: 155px;
|
||||
cursor: text;
|
||||
background-color: $color-primary !important;
|
||||
border: 1px solid rgba($color-primary-text, 0.5) !important;
|
||||
background-color: var(--color-primary) !important;
|
||||
border: 1px solid rgba(var(--color-primary-text), 0.5) !important;
|
||||
}
|
||||
&:hover, &:focus, &:active {
|
||||
opacity: 1;
|
||||
|
|
@ -236,7 +236,7 @@ body {
|
|||
height: 44px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: rgba($color-main-background, 0.95);
|
||||
background-color: rgba(var(--color-main-background), 0.95);
|
||||
z-index: 60;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
|
|
@ -344,16 +344,16 @@ body {
|
|||
/* fix sticky footer */
|
||||
p.info, form fieldset legend, #datadirContent label {
|
||||
text-align: center;
|
||||
color: $color-primary-text;
|
||||
color: var(--color-primary-text);
|
||||
}
|
||||
form {
|
||||
fieldset .warning-info, input[type='checkbox'] + label {
|
||||
text-align: center;
|
||||
color: $color-primary-text;
|
||||
color: var(--color-primary-text);
|
||||
}
|
||||
.warning input[type='checkbox'] {
|
||||
&:hover + label, &:focus + label, + label {
|
||||
color: $color-primary-text !important;
|
||||
color: var(--color-primary-text) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -362,7 +362,7 @@ body {
|
|||
margin: 0 0 20px;
|
||||
}
|
||||
a {
|
||||
color: $color-primary-text;
|
||||
color: var(--color-primary-text);
|
||||
border-bottom: 1px solid nc-darken($color-main-background, 27%);
|
||||
}
|
||||
}
|
||||
|
|
@ -488,7 +488,7 @@ body {
|
|||
border-top: 0 !important;
|
||||
border-bottom: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: 0 1px 0 rgba($color-main-text, 0.1) inset !important;
|
||||
box-shadow: 0 1px 0 rgba(var(--color-main-text), 0.1) inset !important;
|
||||
}
|
||||
|
||||
#body-login .groupbottom input, .groupbottom input {
|
||||
|
|
@ -496,7 +496,7 @@ body {
|
|||
border-top: 0 !important;
|
||||
border-top-right-radius: 0 !important;
|
||||
border-top-left-radius: 0 !important;
|
||||
box-shadow: 0 1px 0 rgba($color-main-text, 0.1) inset !important;
|
||||
box-shadow: 0 1px 0 rgba(var(--color-main-text), 0.1) inset !important;
|
||||
}
|
||||
|
||||
#body-login .groupbottom input[type=submit] {
|
||||
|
|
@ -522,16 +522,16 @@ label.infield {
|
|||
user-select: none;
|
||||
}
|
||||
.errors {
|
||||
background: rgba($color-error, .35);
|
||||
border: 1px solid $color-error;
|
||||
background: rgba(var(--color-error), .35);
|
||||
border: 1px solid var(--color-error);
|
||||
list-style-indent: inside;
|
||||
margin: 0 0 2em;
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
.success {
|
||||
background: rgba($color-success, .35);
|
||||
border: 1px solid $color-success;
|
||||
background: rgba(var(--color-success), .35);
|
||||
border: 1px solid var(--color-success);
|
||||
width: 35%;
|
||||
margin: 30px auto;
|
||||
padding: 1em;
|
||||
|
|
@ -542,7 +542,7 @@ label.infield {
|
|||
box-sizing: border-box;
|
||||
}
|
||||
p.info a, #showAdvanced {
|
||||
color: $color-primary-text;
|
||||
color: var(--color-primary-text);
|
||||
}
|
||||
#remember_login {
|
||||
&:hover + label, &:focus + label {
|
||||
|
|
@ -638,7 +638,7 @@ label.infield {
|
|||
padding: 10px 20px;
|
||||
}
|
||||
&.ui-state-hover, &.ui-state-active {
|
||||
color: $color-main-text;
|
||||
color: var(--color-main-text);
|
||||
background-color: nc-darken($color-main-background, 8%);
|
||||
}
|
||||
}
|
||||
|
|
@ -646,10 +646,10 @@ label.infield {
|
|||
.warning, .update, .error {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
background-color: rgba($color-main-text, 0.3);
|
||||
color: $color-primary-text;
|
||||
background-color: rgba(var(--color-main-text), 0.3);
|
||||
color: var(--color-primary-text);
|
||||
text-align: left;
|
||||
border-radius: $border-radius;
|
||||
border-radius: var(--border-radius);
|
||||
cursor: default;
|
||||
}
|
||||
.update {
|
||||
|
|
@ -675,20 +675,20 @@ label.infield {
|
|||
#body-user .warning, #body-settings .warning {
|
||||
margin-top: 8px;
|
||||
padding: 5px;
|
||||
background: rgba($color-error, .15);
|
||||
border-radius: $border-radius;
|
||||
background: rgba(var(--color-error), .15);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.warning {
|
||||
legend, a {
|
||||
color: $color-primary-text !important;
|
||||
color: var(--color-primary-text) !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
a {
|
||||
color: $color-primary-text !important;
|
||||
color: var(--color-primary-text) !important;
|
||||
font-weight: 600 !important;
|
||||
&.button {
|
||||
color: nc-lighten($color-main-text, 33%) !important;
|
||||
|
|
@ -711,7 +711,7 @@ label.infield {
|
|||
}
|
||||
|
||||
.warning-input {
|
||||
border-color: $color-error !important;
|
||||
border-color: var(--color-error) !important;
|
||||
}
|
||||
|
||||
/* Fixes for log in page, TODO should be removed some time */
|
||||
|
|
@ -807,7 +807,7 @@ label.infield {
|
|||
#forgot-password {
|
||||
padding: 11px;
|
||||
float: right;
|
||||
color: $color-primary-text;
|
||||
color: var(--color-primary-text);
|
||||
}
|
||||
.wrapper {
|
||||
min-height: 100%;
|
||||
|
|
@ -847,7 +847,7 @@ td.avatar {
|
|||
margin: 0 auto;
|
||||
max-width: 60%;
|
||||
z-index: 8000;
|
||||
background-color: $color-main-background;
|
||||
background-color: var(--color-main-background);
|
||||
border: 0;
|
||||
padding: 1px 8px;
|
||||
display: none;
|
||||
|
|
@ -958,7 +958,7 @@ code {
|
|||
margin-top: 10px;
|
||||
padding: 4px 8px;
|
||||
width: auto;
|
||||
border-radius: $border-radius;
|
||||
border-radius: var(--border-radius);
|
||||
border: none;
|
||||
|
||||
.ui-state-default,
|
||||
|
|
@ -971,8 +971,8 @@ code {
|
|||
padding: 7px;
|
||||
font-size: 13px;
|
||||
border: none;
|
||||
background-color: $color-main-background;
|
||||
color: $color-main-text;
|
||||
background-color: var(--color-main-background);
|
||||
color: var(--color-main-text);
|
||||
|
||||
.ui-datepicker-title {
|
||||
line-height: 1;
|
||||
|
|
@ -1011,8 +1011,8 @@ code {
|
|||
&.ui-datepicker-current-day a.ui-state-active,
|
||||
.ui-state-hover,
|
||||
.ui-state-focus {
|
||||
background-color: $color-primary;
|
||||
color: $color-primary-text;
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-primary-text);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
@ -1027,7 +1027,7 @@ code {
|
|||
|
||||
.ui-datepicker-prev, .ui-datepicker-next {
|
||||
border: nc-darken($color-main-background, 14%);
|
||||
background: $color-main-background;
|
||||
background: var(--color-main-background);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1035,7 +1035,7 @@ code {
|
|||
.ui-widget.ui-timepicker {
|
||||
margin-top: 10px !important;
|
||||
width: auto !important;
|
||||
border-radius: $border-radius;
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
.ui-widget-content {
|
||||
border: none !important;
|
||||
|
|
@ -1051,8 +1051,8 @@ code {
|
|||
padding: 7px;
|
||||
font-size: 13px;
|
||||
border: none;
|
||||
background-color: $color-main-background;
|
||||
color: $color-main-text;
|
||||
background-color: var(--color-main-background);
|
||||
color: var(--color-main-text);
|
||||
|
||||
.ui-timepicker-title {
|
||||
line-height: 1;
|
||||
|
|
@ -1082,8 +1082,8 @@ code {
|
|||
&.ui-timepicker-minute-cell a.ui-state-active,
|
||||
.ui-state-hover,
|
||||
.ui-state-focus {
|
||||
background-color: $color-primary;
|
||||
color: $color-primary-text;
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-primary-text);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
@ -1092,7 +1092,7 @@ code {
|
|||
}
|
||||
|
||||
&.ui-timepicker-hours {
|
||||
border-right: 1px solid $color-border;
|
||||
border-right: 1px solid var(--color-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1118,7 +1118,7 @@ code {
|
|||
border-radius: 50%;
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
color: $color-main-text;
|
||||
color: var(--color-main-text);
|
||||
display: block;
|
||||
line-height: 18px;
|
||||
width: 18px;
|
||||
|
|
@ -1170,7 +1170,7 @@ code {
|
|||
display: none;
|
||||
}
|
||||
.filelist {
|
||||
background-color: $color-main-background;
|
||||
background-color: var(--color-main-background);
|
||||
width: 100%;
|
||||
}
|
||||
#filestable.filelist {
|
||||
|
|
@ -1181,7 +1181,7 @@ code {
|
|||
.filelist {
|
||||
td {
|
||||
padding: 14px;
|
||||
border-bottom: 1px solid $color-border;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
tr:last-child td {
|
||||
border-bottom: none;
|
||||
|
|
@ -1270,7 +1270,7 @@ span.ui-icon {
|
|||
position: relative;
|
||||
align-items: center;
|
||||
padding: 3px 3px 3px 10px;
|
||||
border-bottom: 1px solid $color-border;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
|
||||
:last-of-type {
|
||||
border-bottom: none;
|
||||
|
|
|
|||
Loading…
Reference in New Issue