mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Styles scss 

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv) 2018-06-03 11:25:10 +02:00
parent eb257b8dd3
commit 4ac9d1d87f
No known key found for this signature in database
GPG Key ID: 60C25B8C072916CF
1 changed files with 55 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
core/css/styles.scss
View File

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