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

Merge pull request #9723 from nextcloud/css4-variables 

Css4 variables migration
This commit is contained in:
Morris Jobke 2018-06-20 19:54:10 +02:00 committed by GitHub
parent 9d37c191a3 b188b2d133
commit 9b6f235015
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
41 changed files with 609 additions and 471 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
apps/comments/css/autocomplete.scss
View File

@ -9,11 +9,11 @@
left: 0;
display: none;
margin-top: 18px;
background: $color-main-background;
color: $color-main-text;
border: 1px solid $color-border;
border-radius: $border-radius;
box-shadow: 0 0 5px $color-box-shadow;
background: var(--color-main-background);
color: var(--color-main-text);
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
box-shadow: 0 0 5px var(--color-box-shadow);
min-width: 120px;
z-index: 11110 !important;
}
@ -22,14 +22,14 @@
padding: 5px;
margin: 5px;
cursor: pointer;
border-bottom: solid 1px $color-border;
color: $color-main-text;
border-bottom: solid 1px var(--color-border);
color: var(--color-main-text);
font-size: 11px;
font-weight: bold;
}
.atwho-view .atwho-header .small {
color: $color-main-text;
color: var(--color-main-text);
float: right;
padding-top: 2px;
margin-right: -5px;
@ -42,18 +42,18 @@
}
.atwho-view .cur {
background: $color-primary;
color: $color-primary-text;
background: var(--color-primary);
color: var(--color-primary-text);
}
.atwho-view .cur small {
color: $color-primary-text;
color: var(--color-primary-text);
}
.atwho-view strong {
color: $color-main-text;
color: var(--color-main-text);
font-weight: normal;
}
.atwho-view .cur strong {
color: $color-primary-text;
color: var(--color-primary-text);
font-weight: normal;
}
.atwho-view ul {
@ -67,11 +67,11 @@
.atwho-view ul li {
display: block;
padding: 5px 10px;
border-bottom: 1px solid $color-border;
border-bottom: 1px solid var(--color-border);
cursor: pointer;
}
.atwho-view small {
font-size: smaller;
color: $color-main-text;
color: var(--color-main-text);
font-weight: normal;
}

2
apps/comments/css/comments.scss
View File

@ -70,7 +70,7 @@
}
#commentsTabView .comments .comment {
border-top: 1px solid $color-border;
border-top: 1px solid var(--color-border);
}
#commentsTabView .comment .avatar,

2
apps/files/css/detailsView.scss
View File

@ -100,7 +100,7 @@
}
#app-sidebar .file-details {
color: $color-text-details;
color: var(--color-text-maxcontrast);
}
#app-sidebar .action-favorite {

24
apps/files/css/files.scss
View File

@ -41,8 +41,8 @@
.newFileMenu .error,
.newFileMenu .error + .icon-confirm,
#fileList .error {
color: $color-error;
border-color: $color-error;
color: var(--color-error);
border-color: var(--color-error);
}
/* FILE TABLE */
@ -71,7 +71,7 @@
}
.app-files #app-content.dir-drop {
background-color: $color-main-background !important;
background-color: var(--color-main-background) !important;
}
.file-drag #filestable tbody tr, .file-drag #filestable tbody tr:hover{
@ -140,12 +140,12 @@
#filestable tbody tr.searchresult,
table tr.mouseOver td {
transition: background-color 0.3s ease;
background-color: nc-darken($color-main-background, 3%);
background-color: var(--color-background-dark);
}
tbody a { color: $color-main-text; }
tbody a { color: var(--color-main-text); }
span.conflict-path, span.extension, span.uploading, td.date {
color: $color-text-details;
color: var(--color-text-maxcontrast);
}
span.conflict-path, span.extension {
-webkit-transition: opacity 300ms;
@ -159,11 +159,11 @@ tr:focus span.conflict-path,
tr:hover span.extension,
tr:focus span.extension {
opacity: 1;
color: $color-text-details;
color: var(--color-text-maxcontrast);
}
table th, table th a {
color: $color-text-details;
color: var(--color-text-maxcontrast);
}
table.multiselect th a {
color: #000;
@ -208,7 +208,7 @@ table th:focus .sort-indicator.hidden {
table th,
table td {
border-bottom: 1px solid $color-border;
border-bottom: 1px solid var(--color-border);
text-align: left;
font-weight: normal;
}
@ -625,7 +625,7 @@ table.dragshadow td.size {
left: 0;
right: 0;
bottom: 0;
background-color: $color-main-background;
background-color: var(--color-main-background);
background-repeat: no-repeat no-repeat;
background-position: 50%;
opacity: 0.7;
@ -703,11 +703,11 @@ table.dragshadow td.size {
.quota-container {
height: 5px;
border-radius: $border-radius;
border-radius: var(--border-radius);
div {
height: 100%;
background-color: $color-primary;
background-color: var(--color-primary);
}
}
}

6
apps/files/css/upload.scss
View File

@ -51,7 +51,7 @@
left: 0px;
position: absolute;
overflow: hidden;
background-color: $color-primary;
background-color: var(--color-primary);
}
#uploadprogressbar .label {
top: 6px;
@ -61,14 +61,14 @@
font-weight: normal;
}
#uploadprogressbar .label.inner {
color: $color-primary-text;
color: var(--color-primary-text);
position: absolute;
display: block;
width: 200px;
}
#uploadprogressbar .label.outer {
position: relative;
color: $color-main-text;
color: var(--color-main-text);
}
#uploadprogressbar .desktop {
display: block;

2
apps/files_sharing/css/public.scss
View File

@ -161,7 +161,7 @@ thead {
#header .header-shared-by {
display: inline-block;
color: $color-primary-text;
color: var(--color-primary-text);
position: relative;
top: -10px;
font-weight: 300;

8
apps/theming/css/settings-admin.scss
View File

@ -122,3 +122,11 @@
background-size: contain;
}
}
/* transition effects for theming value changes */
#header {
transition: background-color 500ms linear;
svg, img {
transition: 500ms filter linear;
}
}

8
apps/theming/css/theming.scss
View File

@ -94,7 +94,7 @@
@if variable_exists('theming-logo-mime') and $theming-logo-mime != '' {
#theming-preview-logo,
#header .logo {
background-image: url(#{$image-logo});
background-image: $image-logo;
background-size: contain;
}
#body-login #header .logo {
@ -102,7 +102,7 @@
}
} @else {
#theming-preview-logo {
background-image: url(#{$image-logo});
background-image: $image-logo;
}
}
@ -110,12 +110,12 @@
#body-login,
#firstrunwizard .firstrunwizard-header,
#theming-preview {
background-image: url(#{$image-login-background});
background-image: $image-login-background;
background-color: $color-primary;
}
} @else {
#theming-preview {
background-image: url(#{$image-login-background});
background-image: $image-login-background;
background-color: $color-primary;
}
}

12
apps/theming/lib/Controller/ThemingController.php
View File

@ -201,14 +201,14 @@ class ThemingController extends Controller {
$this->themingDefaults->set($setting, $value);
// reprocess server scss for preview
$cssCached = $this->scssCacher->process(\OC::$SERVERROOT, 'core/css/server.scss', 'core');
$cssCached = $this->scssCacher->process(\OC::$SERVERROOT, 'core/css/css-variables.scss', 'core');
return new DataResponse(
[
'data' =>
[
'message' => $this->l10n->t('Saved'),
'serverCssUrl' => $this->urlGenerator->linkTo('', $this->scssCacher->getCachedSCSS('core', '/core/css/server.scss'))
'serverCssUrl' => $this->urlGenerator->linkTo('', $this->scssCacher->getCachedSCSS('core', '/core/css/css-variables.scss'))
],
'status' => 'success'
]
@ -302,7 +302,7 @@ class ThemingController extends Controller {
$this->themingDefaults->set($key.'Mime', $image['type']);
$cssCached = $this->scssCacher->process(\OC::$SERVERROOT, 'core/css/server.scss', 'core');
$cssCached = $this->scssCacher->process(\OC::$SERVERROOT, 'core/css/css-variables.scss', 'core');
return new DataResponse(
[
@ -311,7 +311,7 @@ class ThemingController extends Controller {
'name' => $name,
'url' => $this->imageManager->getImageUrl($key),
'message' => $this->l10n->t('Saved'),
'serverCssUrl' => $this->urlGenerator->linkTo('', $this->scssCacher->getCachedSCSS('core', '/core/css/server.scss'))
'serverCssUrl' => $this->urlGenerator->linkTo('', $this->scssCacher->getCachedSCSS('core', '/core/css/css-variables.scss'))
],
'status' => 'success'
]
@ -328,7 +328,7 @@ class ThemingController extends Controller {
public function undo(string $setting): DataResponse {
$value = $this->themingDefaults->undo($setting);
// reprocess server scss for preview
$cssCached = $this->scssCacher->process(\OC::$SERVERROOT, 'core/css/server.scss', 'core');
$cssCached = $this->scssCacher->process(\OC::$SERVERROOT, 'core/css/css-variables.scss', 'core');
if (strpos($setting, 'Mime') !== -1) {
$imageKey = str_replace('Mime', '', $setting);
@ -341,7 +341,7 @@ class ThemingController extends Controller {
[
'value' => $value,
'message' => $this->l10n->t('Saved'),
'serverCssUrl' => $this->urlGenerator->linkTo('', $this->scssCacher->getCachedSCSS('core', '/core/css/server.scss'))
'serverCssUrl' => $this->urlGenerator->linkTo('', $this->scssCacher->getCachedSCSS('core', '/core/css/css-variables.scss'))
],
'status' => 'success'
]

4
apps/theming/lib/ThemingDefaults.php
View File

@ -272,10 +272,10 @@ class ThemingDefaults extends \OC_Defaults {
'theming-favicon-mime' => "'" . $this->config->getAppValue('theming', 'faviconMime') . "'"
];
$variables['image-logo'] = "'".$this->imageManager->getImageUrl('logo')."'";
$variables['image-logo'] = "url('".$this->imageManager->getImageUrl('logo')."')";
$variables['image-logoheader'] = "'".$this->imageManager->getImageUrl('logoheader')."'";
$variables['image-favicon'] = "'".$this->imageManager->getImageUrl('favicon')."'";
$variables['image-login-background'] = "'".$this->imageManager->getImageUrl('background')."'";
$variables['image-login-background'] = "url('".$this->imageManager->getImageUrl('background')."')";
$variables['image-login-plain'] = 'false';
if ($this->config->getAppValue('theming', 'color', null) !== null) {

30
apps/theming/tests/Controller/ThemingControllerTest.php
View File

@ -151,20 +151,20 @@ class ThemingControllerTest extends TestCase {
$this->scssCacher
->expects($this->once())
->method('getCachedSCSS')
->with('core', '/core/css/server.scss')
->willReturn('/core/css/someHash-server.scss');
->with('core', '/core/css/css-variables.scss')
->willReturn('/core/css/someHash-css-variables.scss');
$this->urlGenerator
->expects($this->once())
->method('linkTo')
->with('', '/core/css/someHash-server.scss')
->willReturn('/nextcloudWebroot/core/css/someHash-server.scss');
->with('', '/core/css/someHash-css-variables.scss')
->willReturn('/nextcloudWebroot/core/css/someHash-css-variables.scss');
$expected = new DataResponse(
[
'data' =>
[
'message' => $message,
'serverCssUrl' => '/nextcloudWebroot/core/css/someHash-server.scss',
'serverCssUrl' => '/nextcloudWebroot/core/css/someHash-css-variables.scss',
],
'status' => 'success',
]
@ -604,13 +604,13 @@ class ThemingControllerTest extends TestCase {
$this->scssCacher
->expects($this->once())
->method('getCachedSCSS')
->with('core', '/core/css/server.scss')
->willReturn('/core/css/someHash-server.scss');
->with('core', '/core/css/css-variables.scss')
->willReturn('/core/css/someHash-css-variables.scss');
$this->urlGenerator
->expects($this->once())
->method('linkTo')
->with('', '/core/css/someHash-server.scss')
->willReturn('/nextcloudWebroot/core/css/someHash-server.scss');
->with('', '/core/css/someHash-css-variables.scss')
->willReturn('/nextcloudWebroot/core/css/someHash-css-variables.scss');
$expected = new DataResponse(
[
@ -618,7 +618,7 @@ class ThemingControllerTest extends TestCase {
[
'value' => 'MyValue',
'message' => 'Saved',
'serverCssUrl' => '/nextcloudWebroot/core/css/someHash-server.scss',
'serverCssUrl' => '/nextcloudWebroot/core/css/someHash-css-variables.scss',
],
'status' => 'success'
]
@ -648,13 +648,13 @@ class ThemingControllerTest extends TestCase {
$this->scssCacher
->expects($this->once())
->method('getCachedSCSS')
->with('core', '/core/css/server.scss')
->willReturn('/core/css/someHash-server.scss');
->with('core', '/core/css/css-variables.scss')
->willReturn('/core/css/someHash-css-variables.scss');
$this->urlGenerator
->expects($this->once())
->method('linkTo')
->with('', '/core/css/someHash-server.scss')
->willReturn('/nextcloudWebroot/core/css/someHash-server.scss');
->with('', '/core/css/someHash-css-variables.scss')
->willReturn('/nextcloudWebroot/core/css/someHash-css-variables.scss');
$this->imageManager->expects($this->once())
->method('delete')
->with($filename);
@ -665,7 +665,7 @@ class ThemingControllerTest extends TestCase {
[
'value' => $value,
'message' => 'Saved',
'serverCssUrl' => '/nextcloudWebroot/core/css/someHash-server.scss',
'serverCssUrl' => '/nextcloudWebroot/core/css/someHash-css-variables.scss',
],
'status' => 'success'
]

4
apps/theming/tests/ThemingDefaultsTest.php
View File

@ -645,8 +645,8 @@ class ThemingDefaultsTest extends TestCase {
'theming-cachebuster' => '\'0\'',
'theming-logo-mime' => '\'jpeg\'',
'theming-background-mime' => '\'jpeg\'',
'image-logo' => "'custom-logo?v=0'",
'image-login-background' => "'custom-background?v=0'",
'image-logo' => "url('custom-logo?v=0')",
'image-login-background' => "url('custom-background?v=0')",
'color-primary' => $this->defaults->getColorPrimary(),
'color-primary-text' => '#ffffff',
'image-login-plain' => 'false',

102
core/css/apps.scss
View File

@ -58,7 +58,7 @@ kbd {
padding: 4px 10px;
border: 1px solid #ccc;
box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
border-radius: $border-radius;
border-radius: var(--border-radius);
display: inline-block;
white-space: nowrap;
}
@ -83,13 +83,13 @@ kbd {
height: 100%;
float: left;
box-sizing: border-box;
background-color: $color-main-background;
background-color: var(--color-main-background);
padding-bottom: 44px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-right: 1px solid $color-border;
border-right: 1px solid var(--color-border);
display: flex;
flex-direction: column;
@ -152,7 +152,7 @@ kbd {
&,
> a {
opacity: 1;
box-shadow: inset 4px 0 $color-primary;
box-shadow: inset 4px 0 var(--color-primary);
}
}
@ -174,6 +174,23 @@ kbd {
}
}
&.app-navigation-caption {
font-weight: bold;
line-height: 44px;
padding: 0 44px;
white-space: nowrap;
text-overflow: ellipsis;
// !important to overwrite specific hover and focus
opacity: .7;
box-shadow: none !important;
user-select: none;
pointer-events:none;
&:not(:first-child) {
margin-top: 22px;
}
}
/* Second level nesting for lists */
> ul {
flex: 0 1 auto;
@ -198,7 +215,7 @@ kbd {
}
&.active {
box-shadow: inset 4px 0 $color-primary;
box-shadow: inset 4px 0 var(--color-primary);
}
/* align loader */
@ -250,7 +267,7 @@ kbd {
box-sizing: border-box;
white-space: nowrap;
text-overflow: ellipsis;
color: $color-main-text;
color: var(--color-main-text);
opacity: .57;
flex: 1 1 0px;
z-index: 100; /* above the bullet to allow click*/
@ -442,8 +459,8 @@ kbd {
span {
padding: 2px 5px;
border-radius: 10px;
background-color: $color-primary;
color: $color-primary-text;
background-color: var(--color-primary);
color: var(--color-primary-text);
}
}
}
@ -460,7 +477,7 @@ kbd {
transition: opacity 250ms ease-in-out;
opacity: 0;
position: absolute;
background-color: $color-main-background;
background-color: var(--color-main-background);
z-index: -1;
form,
div {
@ -537,7 +554,7 @@ kbd {
z-index 250ms ease-in-out;
position: absolute;
left: 0;
background-color: $color-main-background;
background-color: var(--color-main-background);
box-sizing: border-box;
}
@ -551,10 +568,7 @@ kbd {
}
.error {
color: $color-error;
}
.app-navigation-separator {
border-bottom: 1px solid nc-lighten($color-main-text, 86%);
color: var(--color-error);
}
.app-navigation-entry-utils ul,
@ -599,8 +613,8 @@ kbd {
width: 27%;
min-width: 300px;
display: block;
background: $color-main-background;
border-left: 1px solid $color-border;
background: var(--color-main-background);
border-left: 1px solid var(--color-border);
-webkit-transition: margin-right 300ms;
transition: margin-right 300ms;
overflow-x: hidden;
@ -632,11 +646,11 @@ kbd {
#app-settings-content {
display: none;
padding: 10px;
background-color: $color-main-background;
background-color: var(--color-main-background);
/* restrict height of settings and make scrollable */
max-height: 300px;
overflow-y: auto;
border-right: 1px solid $color-border;
border-right: 1px solid var(--color-border);
width: 250px;
box-sizing: border-box;
@ -647,7 +661,7 @@ kbd {
.info-text {
padding: 5px 0 7px 22px;
color: rgba($color-main-text, .4);
color: var(--color-text-lighter);
}
input {
&[type='checkbox'],
@ -665,10 +679,10 @@ kbd {
}
#app-settings-header {
border-right: 1px solid $color-border;
border-right: 1px solid var(--color-border);
width: 250px;
box-sizing: border-box;
background-color: $color-main-background;
background-color: var(--color-main-background);
}
.settings-button {
@ -677,7 +691,7 @@ kbd {
width: 100%;
padding: 0;
margin: 0;
background-color: $color-main-background;
background-color: var(--color-main-background);
background-image: url('../img/actions/settings-dark.svg?v=1');
background-position: 14px center;
background-repeat: no-repeat;
@ -689,14 +703,14 @@ kbd {
font-weight: 400;
/* like app-navigation a */
color: $color-main-text;
color: var(--color-main-text);
opacity: .57;
&.opened,
&:hover {
background-color: $color-main-background;
background-color: var(--color-main-background);
opacity: 1;
box-shadow: inset 4px 0 $color-primary;
box-shadow: inset 4px 0 var(--color-primary);
}
}
@ -704,7 +718,7 @@ kbd {
.section {
display: block;
padding: 30px;
color: nc-lighten($color-main-text, 33%);
color: var(--color-text-lighter);
margin-bottom: 24px;
&.hidden {
display: none !important;
@ -745,25 +759,25 @@ kbd {
float: left;
padding: 5px;
cursor: pointer;
color: nc-lighten($color-main-text, 33%);
color: var(--color-text-lighter);
margin-bottom: 1px;
a {
color: nc-lighten($color-main-text, 33%);
color: var(--color-text-lighter);
margin-bottom: 1px;
}
&.selected {
font-weight: 600;
border-bottom: 1px solid nc-lighten($color-main-text, 20%);
border-bottom: 1px solid var(--color-border);
}
&:hover {
border-bottom: 1px solid nc-lighten($color-main-text, 20%);
border-bottom: 1px solid var(--color-border);
}
&.selected, &:hover {
margin-bottom: 0px;
color: $color-main-text;
color: var(--color-main-text);
a {
margin-bottom: 0px;
color: $color-main-text;
color: var(--color-main-text);
}
}
}
@ -785,7 +799,7 @@ $popovericon-size: 16px;
.popovermenu, .popovermenu:after,
#app-navigation .app-navigation-entry-menu,
#app-navigation .app-navigation-entry-menu:after {
border: 1px solid $color-border;
border: 1px solid var(--color-border);
}
}
@ -793,14 +807,14 @@ $popovericon-size: 16px;
.app-navigation-entry-menu,
.popovermenu {
position: absolute;
background-color: $color-main-background;
color: $color-main-text;
border-radius: $border-radius;
background-color: var(--color-main-background);
color: var(--color-main-text);
border-radius: var(--border-radius);
z-index: 110;
margin: 5px;
margin-top: -5px;
right: 0;
filter: drop-shadow(0 1px 3px $color-box-shadow);
filter: drop-shadow(0 1px 3px var(--color-box-shadow));
display: none;
&:after {
@ -815,7 +829,7 @@ $popovericon-size: 16px;
width: 0;
position: absolute;
pointer-events: none;
border-bottom-color: $color-main-background;
border-bottom-color: var(--color-main-background);
border-width: 10px;
}
/* Center the popover */
@ -865,7 +879,7 @@ $popovericon-size: 16px;
font-weight: 300;
box-shadow: none;
width: 100%;
color: $color-main-text;
color: var(--color-main-text);
/* Override the app-navigation li opacity */
opacity: .7 !important;
span[class^='icon-'],
@ -1013,7 +1027,7 @@ $popovericon-size: 16px;
/* CONTENT LIST ------------------------------------------------------------- */
.app-content-list {
width: 300px;
border-right: 1px solid nc-darken($color-main-background, 8%);
border-right: 1px solid var(--color-border);
display: flex;
flex-direction: column;
transition: transform 250ms ease-in-out;
@ -1022,7 +1036,7 @@ $popovericon-size: 16px;
.app-content-list-item {
position: relative;
height: 68px;
border-top: 1px solid nc-darken($color-main-background, 8%);
border-top: 1px solid var(--color-border);
cursor: pointer;
padding: 10px 7px;
display: flex;
@ -1061,7 +1075,7 @@ $popovericon-size: 16px;
&:hover, &:focus,
&.active {
background-color: nc-darken($color-main-background, 6%);
background-color: var(--color-background-dark);
}
.app-content-list-item-checkbox.checkbox + label,
@ -1177,14 +1191,14 @@ $popovericon-size: 16px;
/* full width for message list on mobile */
.app-content-list {
width: 100%;
background: $color-main-background;
background: var(--color-main-background);
position: relative;
z-index: 100;
}
/* overlay message detail on top of message list */
.app-content-detail {
background: $color-main-background;
background: var(--color-main-background);
width: 100%;
left: 0;
height: 100%;

39
core/css/css-variables.scss Normal file
View File

@ -0,0 +1,39 @@
// CSS4 Variables
// Remember, you cannot use scss functions with css4 variables
// All css4 variables must be fixed! Scss is a PRE processor
// css4 variables are processed after scss!
:root {
--color-main-text: $color-main-text;
--color-main-background: $color-main-background;
--color-background-dark: $color-background-dark;
--color-background-darker: $color-background-darker;
--color-primary: $color-primary;
--color-primary-text: $color-primary-text;
--color-primary-text-dark: $color-primary-text-dark;
--color-primary-element: $color-primary-element;
--color-primary-element-light: $color-primary-element-light;
--color-error: $color-error;
--color-warning: $color-warning;
--color-success: $color-success;
--color-text-maxcontrast: $color-text-maxcontrast;
--color-text-light: $color-text-light;
--color-text-lighter: $color-text-lighter;
--image-logo: $image-logo;
--image-login-background: $image-login-background;
--color-loading-light: $color-loading-light;
--color-loading-dark: $color-loading-dark;
--color-box-shadow: $color-box-shadow;
--color-border: $color-border;
--color-border-dark: $color-border-dark;
--border-radius: $border-radius;
--font-face: $font-face;
}

2
core/css/fixes.scss
View File

@ -22,5 +22,5 @@ select {
.ie .ui-timepicker.ui-widget,
.ie #appmenu li span,
.ie .tooltip-inner {
box-shadow: 0 1px 10px $color-box-shadow;
box-shadow: 0 1px 10px var(--color-box-shadow);
}

9
core/css/fonts.scss
View File

@ -4,7 +4,8 @@
font-family: 'Open Sans';
font-style: normal;
font-weight: normal;
src: local('Open Sans'), local('OpenSans'), url('../fonts/OpenSans-Regular.woff') format('woff');
src: local('Open Sans'), local('OpenSans'),
url('../fonts/OpenSans-Regular.woff') format('woff');
}
}
@ -12,12 +13,14 @@
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url('../fonts/OpenSans-Light.woff') format('woff');
src: local('Open Sans Light'), local('OpenSans-Light'),
url('../fonts/OpenSans-Light.woff') format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('../fonts/OpenSans-Semibold.woff') format('woff');
src: local('Open Sans Semibold'), local('OpenSans-Semibold'),
url('../fonts/OpenSans-Semibold.woff') format('woff');
}

41
core/css/header.scss
View File

@ -33,7 +33,7 @@
&:focus {
left: 76px;
top: -9px;
color: $color-primary-text;
color: var(--color-primary-text);
width: auto;
height: auto;
}
@ -50,7 +50,7 @@
right: 0;
z-index: 2000;
height: 50px;
background-color: $color-primary;
background-color: var(--color-primary);
box-sizing: border-box;
justify-content: space-between;
}
@ -72,8 +72,8 @@
#header {
/* Header menu */
.menu {
background-color: $color-main-background;
filter: drop-shadow(0 1px 10px $color-box-shadow);
background-color: var(--color-main-background);
filter: drop-shadow(0 1px 5px var(--color-box-shadow));
border-radius: 0 0 3px 3px;
box-sizing: border-box;
z-index: 2000;
@ -91,7 +91,7 @@
/* Dropdown arrow */
&:after {
border: 10px solid transparent;
border-bottom-color: $color-main-background;
border-bottom-color: var(--color-main-background);
bottom: 100%;
content: ' ';
height: 0;
@ -103,7 +103,7 @@
}
.logo {
display: inline-flex;
background-image: url($image-logo);
background-image: var(--image-logo);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
@ -207,7 +207,7 @@
.header-appname {
display: inline-block;
position: relative;
color: $color-primary-text;
color: var(--color-primary-text);
font-size: 16px;
font-weight: 300;
margin: 0;
@ -239,8 +239,8 @@ nav[role='navigation'] {
.header-left #navigation,
.ui-datepicker,
.ui-timepicker.ui-widget {
background-color: $color-main-background;
filter: drop-shadow(0 1px 10px $color-box-shadow);
background-color: var(--color-main-background);
filter: drop-shadow(0 1px 10px var(--color-box-shadow));
&:after {
/* position of dropdown arrow */
left: 50%;
@ -252,7 +252,7 @@ nav[role='navigation'] {
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
border-bottom-color: $color-main-background;
border-bottom-color: var(--color-main-background);
border-width: 10px;
margin-left: -10px; /* border width */
}
@ -276,7 +276,7 @@ nav[role='navigation'] {
display: inline-block;
padding-bottom: 0;
padding-left: 10px;
color: $color-main-text;
color: var(--color-main-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@ -340,7 +340,6 @@ nav[role='navigation'] {
#settings {
display: inline-block;
height: 100%;
color: rgba($color-primary-text, 0.7);
cursor: pointer;
flex: 0 0 auto;
@ -356,7 +355,7 @@ nav[role='navigation'] {
&:hover,
&:focus,
&:active {
color: $color-primary-text;
color: var(--color-primary-text);
img, #expandDisplayName {
opacity: 1;
@ -397,7 +396,7 @@ nav[role='navigation'] {
position: absolute;
pointer-events: none;
border: 0 solid transparent;
border-bottom-color: $color-main-background;
border-bottom-color: var(--color-main-background);
border-width: 10px;
bottom: 0;
z-index: 100;
@ -414,7 +413,7 @@ nav[role='navigation'] {
display: inline-flex;
align-items: center;
height: 40px;
color: $color-main-text;
color: var(--color-main-text);
padding: 12px;
box-sizing: border-box;
opacity: .7;
@ -434,7 +433,7 @@ nav[role='navigation'] {
&:active,
&.active {
opacity: 1;
box-shadow: inset 4px 0 $color-primary;
box-shadow: inset 4px 0 var(--color-primary);
}
}
}
@ -494,19 +493,19 @@ nav[role='navigation'] {
display: none;
position: absolute;
overflow: visible;
background-color: $color-main-background;
background-color: var(--color-main-background);
white-space: nowrap;
border: none;
border-radius: $border-radius;
border-radius: var(--border-radius);
border-top-left-radius: 0;
border-top-right-radius: 0;
color: rgba($color-main-text, .7);
color: var(--color-text-lighter);
width: auto;
left: 50%;
top: 100%;
transform: translateX(-50%);
padding: 4px 10px;
filter: drop-shadow(0 1px 10px $color-box-shadow);
filter: drop-shadow(0 1px 10px var(--color-box-shadow));
z-index: 100;
}
@ -523,7 +522,7 @@ nav[role='navigation'] {
position: absolute;
pointer-events: none;
border: 0 solid transparent;
border-bottom-color: $color-main-background;
border-bottom-color: var(--color-main-background);
border-width: 10px;
transform: translateX(-50%);
left: 50%;

58
core/css/icons.scss
View File

@ -25,7 +25,12 @@
}
/* LOADING ------------------------------------------------------------------ */
.loading, .loading-small, .icon-loading, .icon-loading-dark, .icon-loading-small, .icon-loading-small-dark {
.loading,
.loading-small,
.icon-loading,
.icon-loading-dark,
.icon-loading-small,
.icon-loading-small-dark {
position: relative;
&:after {
z-index: 2;
@ -42,15 +47,15 @@
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
border: 2px solid rgba($color-loading, 0.5);
border-top-color: $color-loading;
border: 2px solid var(--color-loading-light);
border-top-color: var(--color-loading-dark);
}
}
.icon-loading-dark:after,
.icon-loading-small-dark:after {
border: 2px solid rgba($color-loading-dark, 0.5);
border-top-color: $color-loading-dark;
border: 2px solid var(--color-loading-dark);
border-top-color: var(--color-loading-light);
}
.icon-loading-small:after,
@ -61,7 +66,7 @@
}
/* Css replaced elements don't have ::after nor ::before */
img, object, video, button, textarea, input, select, div[contenteditable=true] {
img, object, video, button, textarea, input, select, div[contenteditable='true'] {
.icon-loading {
background-image: url('../img/loading.gif');
}
@ -92,7 +97,7 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
.icon-white {
filter: invert(100%);
&.icon-shadow {
filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow));
}
}
@ -112,7 +117,7 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
/* TODO: to be deprecated; use .icon-audio.icon-white.icon-shadow */
.icon-audio-white {
background-image: url('../img/actions/audio.svg?v=2');
filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow));
}
.icon-audio-off {
@ -122,7 +127,7 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
/* TODO: to be deprecated; use .icon-audio-off.icon-white.icon-shadow */
.icon-audio-off-white {
background-image: url('../img/actions/audio-off.svg?v=1');
filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow));
}
.icon-caret {
@ -176,11 +181,13 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
.icon-delete {
background-image: url('../img/actions/delete.svg?v=1');
&.no-permission {
&:hover, &:focus {
&:hover,
&:focus {
background-image: url('../img/actions/delete.svg?v=1');
}
}
&:hover, &:focus {
&:hover,
&:focus {
background-image: url('../img/actions/delete-hover.svg?v=1');
filter: initial;
}
@ -189,11 +196,13 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
.icon-delete-white {
background-image: url('../img/actions/delete-white.svg?v=1');
&.no-permission {
&:hover, &:focus {
&:hover,
&:focus {
background-image: url('../img/actions/delete-white.svg?v=1');
}
}
&:hover, &:focus {
&:hover,
&:focus {
background-image: url('../img/actions/delete-hover.svg?v=1');
}
}
@ -237,7 +246,7 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
/* TODO: to be deprecated; use .icon-fullscreen.icon-white.icon-shadow */
.icon-fullscreen-white {
background-image: url('../img/actions/fullscreen.svg?v=1');
filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow));
}
.icon-history {
@ -315,7 +324,7 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
/* TODO: to be deprecated; use .icon-screen.icon-white.icon-shadow */
.icon-screen-white {
background-image: url('../img/actions/screen.svg?v=1');
filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow));
}
.icon-screen-off {
@ -325,7 +334,7 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
/* TODO: to be deprecated; use .icon-screen-off.icon-white.icon-shadow */
.icon-screen-off-white {
background-image: url('../img/actions/screen-off.svg?v=1');
filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow));
}
.icon-search {
@ -375,14 +384,16 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
}
.icon-starred {
&:hover, &:focus {
&:hover,
&:focus {
background-image: url('../img/actions/star.svg?v=1');
}
background-image: url('../img/actions/starred.svg?v=1');
}
.icon-star {
&:hover, &:focus {
&:hover,
&:focus {
background-image: url('../img/actions/starred.svg?v=1');
}
}
@ -434,7 +445,7 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
/* TODO: to be deprecated; use .icon-video-off.icon-white.icon-shadow */
.icon-video-white {
background-image: url('../img/actions/video.svg?v=2');
filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow));
}
.icon-video-off {
@ -444,7 +455,7 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
/* TODO: to be deprecated; use .icon-video-off.icon-white.icon-shadow */
.icon-video-off-white {
background-image: url('../img/actions/video-off.svg?v=1');
filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow));
}
.icon-video-switch {
@ -500,11 +511,13 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
background-image: url('../img/places/files-dark.svg?v=1');
}
.icon-file, .icon-filetype-text {
.icon-file,
.icon-filetype-text {
background-image: url('../img/filetypes/text.svg?v=1');
}
.icon-folder, .icon-filetype-folder {
.icon-folder,
.icon-filetype-folder {
background-image: url('../img/filetypes/folder.svg?v=1');
}
@ -614,4 +627,3 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
.icon-category-search {
background-image: url('../img/actions/search.svg?v=1');
}

208
core/css/inputs.scss
View File

@ -14,10 +14,10 @@
/* Specifically override browser styles */
input, textarea, select, button, div[contenteditable=true], div[contenteditable=false] {
font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
font-family: var(--font-face)
}
.select2-container-multi .select2-choices .select2-search-field input, .select2-search input, .ui-widget {
font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !important;
font-family: var(--font-face) !important;
}
/* Simple selector to allow easy overriding */
@ -32,6 +32,13 @@ div[contenteditable=false] {
box-sizing: border-box;
}
/**
* color-text-lighter normal state
* color-text-lighter active state
* color-text-maxcontrast disabled state
*/
/* Default global values */
select,
button, .button,
@ -42,28 +49,29 @@ div[contenteditable=true],
margin: 3px 3px 3px 0;
padding: 7px 6px;
font-size: 13px;
background-color: $color-main-background;
color: nc-lighten($color-main-text, 33%);
border: 1px solid nc-darken($color-main-background, 14%);
background-color: var(--color-main-background);
color: var(--color-text-lighter);
border: 1px solid var(--color-border-dark);
outline: none;
border-radius: $border-radius;
border-radius: var(--border-radius);
cursor: text;
&:not(:disabled):not(.primary) {
&:hover,
&:focus,
&.active {
/* active class used for multiselect */
border-color: $color-primary-element;
border-color: var(--color-primary-element);
outline: none;
}
&:active {
outline: none;
background-color: $color-main-background;
background-color: var(--color-main-background);
color: var(--color-text-light);
}
}
&:disabled {
background-color: nc-darken($color-main-background, 8%);
color: rgba($color-main-text, 0.4);
background-color: var(--color-background-dark);
color: var(--color-text-maxcontrast);
cursor: default;
opacity: 0.5;
}
@ -72,26 +80,28 @@ div[contenteditable=true],
}
&:invalid {
box-shadow: none !important;
border-color: $color-error;
border-color: var(--color-error);
}
/* Primary action button, use sparingly */
&.primary {
background-color: $color-primary-element;
border: 1px solid $color-primary-text;
color: $color-primary-text;
background-color: var(--color-primary-element);
border: 1px solid var(--color-primary-text);
color: var(--color-primary-text);
cursor: pointer;
&:not(:disabled) {
&:hover,
&:focus {
background-color: rgba($color-primary-element, .85);
&:focus,
&:active {
background-color: var(--color-primary-element-light)
}
&:active {
background-color: rgba($color-primary-element, .7);
color: var(--color-primary-text-dark);
}
}
&:disabled {
background-color: rgba($color-primary-element, .7);
color: nc-lighten($color-main-text, 73%);
// opacity is already defined to .5 if disabled
background-color: var(--color-primary-element);
color: var(--color-primary-text-dark);
}
}
}
@ -100,15 +110,15 @@ div[contenteditable=false] {
margin: 3px 3px 3px 0;
padding: 7px 6px;
font-size: 13px;
background-color: $color-main-background;
color: nc-lighten($color-main-text, 33%);
border: 1px solid nc-darken($color-main-background, 14%);
background-color: var(--color-main-background);
color: var(--color-text-lighter);
border: 1px solid var(--color-background-darker);
outline: none;
border-radius: $border-radius;
border-radius: var(--border-radius);
cursor: text;
background-color: nc-darken($color-main-background, 8%);
color: rgba($color-main-text, 0.4);
background-color: var(--color-background-dark);
color: var(--color-text-lighter);
cursor: default;
opacity: 0.5;
}
@ -155,7 +165,7 @@ input[type='reset'] {
min-height: 34px;
cursor: pointer;
box-sizing: border-box;
background-color: nc-darken($color-main-background, 3%);
background-color: var(--color-background-dark);
}
/* Buttons */
@ -182,7 +192,7 @@ button, .button {
}
textarea, div[contenteditable=true] {
color: nc-lighten($color-main-text, 33%);
color: var(--color-text-lighter);
cursor: text;
font-family: inherit;
height: auto;
@ -190,14 +200,14 @@ textarea, div[contenteditable=true] {
&:active,
&:hover,
&:focus {
border-color: nc-darken($color-main-background, 14%) !important;
background-color: $color-main-background !important;
border-color: var(--color-background-darker) !important;
background-color: var(--color-main-background) !important;
}
}
}
div[contenteditable=false] {
color: nc-lighten($color-main-text, 33%);
color: var(--color-text-lighter);
cursor: text;
font-family: inherit;
height: auto;
@ -222,10 +232,10 @@ input {
+ .icon-confirm {
margin-left: -8px !important;
border-left-color: transparent !important;
border-radius: 0 $border-radius $border-radius 0 !important;
border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
background-clip: padding-box;
/* Avoid background under border */
background-color: $color-main-background !important;
background-color: var(--color-main-background) !important;
opacity: 1;
width: 34px;
padding: 7px 6px;
@ -242,10 +252,10 @@ input {
&:active,
&:hover,
&:focus {
border-color: $color-primary-element !important;
border-radius: $border-radius !important;
border-color: var(--color-primary-element) !important;
border-radius: var(--border-radius) !important;
&:disabled {
border-color: nc-darken($color-main-background, 14%) !important;
border-color: var(--color-background-darker) !important;
}
}
}
@ -255,11 +265,11 @@ input {
&:focus {
&:invalid {
+ .icon-confirm {
border-color: $color-error;
border-color: var(--color-error);
}
}
+ .icon-confirm {
border-color: $color-primary-element !important;
border-color: var(--color-primary-element) !important;
border-left-color: transparent !important;
/* above previous input */
z-index: 2;
@ -280,9 +290,11 @@ select,
}
/* Radio & Checkboxes */
input, label {
--color-checkbox-radio-disabled: nc-darken($color-main-background, 27%);
--color-checkbox-radio-border: nc-darken($color-main-background, 47%);
}
input {
$color-checkbox-radio-disabled: nc-darken($color-main-background, 27%);
$color-checkbox-radio-border: nc-darken($color-main-background, 47%);
&[type='checkbox'],
&[type='radio'] {
&.radio,
@ -309,26 +321,26 @@ input {
border-radius: 50%;
margin: 3px;
margin-top: 1px;
border: 1px solid $color-checkbox-radio-border;
border: 1px solid var(--color-checkbox-radio-border);
}
&:not(:disabled):not(:checked) + label:hover:before,
&:focus + label:before {
border-color: $color-primary-element;
border-color: var(--color-primary-element);
}
&:checked + label:before,
&.checkbox:indeterminate + label:before {
/* ^ :indeterminate have a strange behavior on radio,
so we respecified the checkbox class again to be safe */
box-shadow: inset 0px 0px 0px 2px $color-main-background;
background-color: $color-primary-element;
border-color: $color-primary-element;
box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
background-color: var(--color-primary-element);
border-color: var(--color-primary-element);
}
&:disabled + label:before {
border: 1px solid $color-checkbox-radio-border;
background-color: $color-checkbox-radio-disabled !important; /* override other status */
border: 1px solid var(--color-checkbox-radio-border);
background-color: var(--color-checkbox-radio-disabled) !important; /* override other status */
}
&:checked:disabled + label:before {
background-color: $color-checkbox-radio-disabled;
background-color: var(--color-checkbox-radio-disabled);
}
}
&.checkbox {
@ -347,7 +359,7 @@ input {
}
}
/* We do not use the nc-darken function as this si 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;
&.radio--white,
&.checkbox--white {
@ -359,7 +371,7 @@ input {
border-color: $color-checkbox-radio-white;
}
&:checked + label:before {
box-shadow: inset 0px 0px 0px 2px $color-main-background;
box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
background-color: darken($color-checkbox-radio-white, 14%);
border-color: darken($color-checkbox-radio-white, 14%);
}
@ -368,7 +380,7 @@ input {
border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */
}
&:checked:disabled + label:before {
box-shadow: inset 0px 0px 0px 2px $color-main-background;
box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */
background-color: darken($color-checkbox-radio-white, 27%);
}
@ -393,9 +405,9 @@ input {
/* Select2 overriding. Merged to core with vendor stylesheet */
.select2-drop {
margin-top: -2px;
background-color: $color-main-background;
background-color: var(--color-main-background);
&.select2-drop-active {
border-color: nc-darken($color-main-background, 14%);
border-color: var(--color-border-dark);
}
.avatar {
display: inline-block;
@ -430,16 +442,16 @@ input {
padding: 12px;
background-color: transparent;
cursor: pointer;
color: nc-lighten($color-main-text, 33%);
color: var(--color-text-lighter);
}
.select2-result {
&.select2-selected {
background-color: nc-darken($color-main-background, 3%);
background-color: var(--color-background-dark);
}
}
.select2-highlighted {
background-color: nc-darken($color-main-background, 3%);
color: $color-main-text;
background-color: var(--color-background-dark);
color: var(--color-main-text);
}
}
}
@ -456,11 +468,11 @@ input {
box-shadow: none;
white-space: nowrap;
text-overflow: ellipsis;
background: $color-main-background;
color: nc-lighten($color-main-text, 33%);
background: var(--color-main-background);
color: var(--color-text-lighter);
box-sizing: content-box;
border-radius: $border-radius;
border: 1px solid nc-darken($color-main-background, 14%);
border-radius: var(--border-radius);
border: 1px solid var(--color-border-dark);
margin: 0;
padding: 2px 0;
min-height: auto;
@ -472,9 +484,9 @@ input {
&:active,
& {
background-image: none;
background-color: $color-main-background;
color: nc-lighten($color-main-text, 33%);
border: 1px solid nc-darken($color-main-background, 14%);
background-color: var(--color-main-background);
color: var(--color-text-lighter);
border: 1px solid var(--color-border-dark);
}
.select2-search-choice-close {
display: none;
@ -501,11 +513,11 @@ input {
box-shadow: none;
white-space: nowrap;
text-overflow: ellipsis;
background: $color-main-background;
color: nc-lighten($color-main-text, 33%);
background: var(--color-main-background);
color: var(--color-text-lighter);
box-sizing: content-box;
border-radius: $border-radius;
border: 1px solid nc-darken($color-main-background, 14%);
border-radius: var(--border-radius);
border: 1px solid var(--color-border-dark);
margin: 0;
padding: 2px 0;
padding-left: 6px;
@ -514,15 +526,15 @@ input {
line-height: 20px;
padding-left: 5px;
background-image: none;
background-color: nc-darken($color-main-background, 3%);
border-color: nc-darken($color-main-background, 3%);
background-color: var(--color-background-dark);
border-color: var(--color-background-dark);
.select2-search-choice-close {
display: none;
}
&.select2-search-choice-focus,
&:hover {
background-color: $color-border;
border-color: $color-border;
background-color: var(--color-border);
border-color: var(--color-border);
}
}
.select2-arrow {
@ -556,9 +568,9 @@ input {
line-height: 20px;
padding-left: 5px;
background-image: none;
background-color: $color-main-background;
color: nc-lighten($color-main-text, 33%);
border: 1px solid nc-darken($color-main-background, 14%);
background-color: var(--color-main-background);
color: var(--color-text-lighter);
border: 1px solid var(--color-border-dark);
display: inline-flex;
align-items: center;
.close {
@ -574,7 +586,7 @@ input {
display: list-item;
background-color: transparent;
cursor: pointer;
color: nc-lighten($color-main-text, 33%);
color: var(--color-text-lighter);
a {
white-space: nowrap;
overflow: hidden;
@ -607,11 +619,11 @@ input {
}
}
&.highlight {
color: $color-main-text;
color: var(--color-main-text);
}
&.active > a {
background-color: nc-darken($color-main-background, 3%);
color: $color-main-text;
background-color: var(--color-background-dark);
color: var(--color-main-text);
&::before {
visibility: visible;
}
@ -628,7 +640,7 @@ input {
display: inline-block;
width: 160px;
position: relative;
background-color: $color-main-background;
background-color: var(--color-main-background);
&.multiselect--active {
/* Opened: force display the input */
input.multiselect__input {
@ -638,7 +650,7 @@ input {
}
&.multiselect--disabled,
&.multiselect--disabled .multiselect__single {
background-color: nc-darken($color-main-background, 8%) !important;
background-color: var(--color-background-dark) !important;
}
.multiselect__tags {
/* space between tags and limit tag */
@ -647,7 +659,7 @@ input {
display: flex;
flex-wrap: nowrap;
overflow: hidden;
border: 1px solid nc-darken($color-main-background, 14%);
border: 1px solid var(--color-border-dark);
cursor: pointer;
position: relative;
border-radius: 3px;
@ -676,8 +688,8 @@ input {
line-height: 20px;
padding: 1px 5px;
background-image: none;
color: nc-lighten($color-main-text, 33%);
border: 1px solid nc-darken($color-main-background, 14%);
color: var(--color-text-lighter);
border: 1px solid var(--color-border-dark);
display: inline-flex;
align-items: center;
border-radius: 3px;
@ -709,7 +721,7 @@ input {
padding: 8px 10px;
flex: 0 0 100%;
z-index: 1; /* above input */
background-color: $color-main-background;
background-color: var(--color-main-background);
cursor: pointer;
}
/* displayed text if tag limit reached */
@ -717,7 +729,7 @@ input {
.multiselect__limit {
flex: 0 0 auto;
line-height: 20px;
color: nc-lighten($color-main-text, 33%);
color: var(--color-text-lighter);
display: inline-flex;
align-items: center;
opacity: .7;
@ -745,8 +757,8 @@ input {
position: absolute;
width: 100%;
margin-top: -1px;
border: 1px solid nc-darken($color-main-background, 14%);
background: $color-main-background;
border: 1px solid var(--color-border-dark);
background: var(--color-main-background);
z-index: 50;
max-height: 250px;
overflow-y: auto;
@ -779,7 +791,7 @@ input {
display: inline-flex;
align-items: center;
background-color: transparent !important;
color: nc-lighten($color-main-text, 33%);
color: var(--color-text-lighter);
width: 100%;
/* selected checkmark icon */
&::before {
@ -795,7 +807,7 @@ input {
visibility: hidden;
}
&.multiselect__option--disabled {
background-color: nc-darken($color-main-background, 8%);
background-color: var(--color-background-dark);
opacity: .5;
}
/* add the prop tag-placeholder="create" to add the +
@ -808,7 +820,7 @@ input {
}
}
&.multiselect__option--highlight {
color: $color-main-text;
color: var(--color-main-text);
}
&:not(.multiselect__option--disabled):hover::before {
opacity: .3;
@ -830,30 +842,30 @@ progress {
width: 100%;
padding: 0;
border: 0 none;
background-color: nc-darken($color-main-background, 10%);
border-radius: $border-radius;
background-color: var(--color-background-dark);
border-radius: var(--border-radius);
flex-basis: 100%;
height: 5px;
overflow: hidden;
&.warn {
&::-moz-progress-bar {
background: $color-error;
background: var(--color-error);
}
&::-webkit-progress-value {
background: $color-error;
background: var(--color-error);
}
}
&::-webkit-progress-bar {
background: transparent;
}
&::-moz-progress-bar {
border-radius: $border-radius;
background: $color-primary;
border-radius: var(--border-radius);
background: var(--color-primary);
transition: 250ms all ease-in-out;
}
&::-webkit-progress-value {
border-radius: $border-radius;
background: $color-primary;
border-radius: var(--border-radius);
background: var(--color-primary);
transition: 250ms all ease-in-out;
}
}

58
core/css/jquery-ui-fixes.scss
View File

@ -1,20 +1,20 @@
/* Component containers
----------------------------------*/
.ui-widget-content {
border: 1px solid nc-darken($color-main-background, 20%);
background: $color-main-background none;
color: $color-main-text;
border: 1px solid var(--color-border);
background: var(--color-main-background) none;
color: var(--color-main-text);
}
.ui-widget-content a {
color: $color-main-text;
color: var(--color-main-text);
}
.ui-widget-header {
border: none;
color: $color-main-text;
color: var(--color-main-text);
background-image: none;
}
.ui-widget-header a {
color: $color-main-text;
color: var(--color-main-text);
}
/* Interaction states
@ -22,8 +22,8 @@
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
border: 1px solid nc-darken($color-main-background, 20%);
background: $color-main-background none;
border: 1px solid var(--color-border);
background: var(--color-main-background) none;
font-weight: bold;
color: #555;
}
@ -39,28 +39,28 @@
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
border: 1px solid #ddd;
background: $color-main-background none;
background: var(--color-main-background) none;
font-weight: bold;
color: $color-main-text;
color: var(--color-main-text);
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited {
color: $color-main-text;
color: var(--color-main-text);
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
border: 1px solid $color-primary;
background: $color-main-background none;
border: 1px solid var(--color-primary);
background: var(--color-main-background) none;
font-weight: bold;
color: $color-main-text;
color: var(--color-main-text);
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
color: $color-main-text;
color: var(--color-main-text);
}
/* Interaction Cues
@ -68,20 +68,20 @@
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
border: 1px solid $color-main-background;
background: $color-main-background none;
color: nc-lighten($color-main-text, 30%);
border: 1px solid var(--color-main-background);
background: var(--color-main-background) none;
color: var(--color-text-lighter);
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
color: nc-lighten($color-main-text, 30%);
color: var(--color-text-lighter);
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
border: $color-error;
background: $color-error none;
border: var(--color-error);
background: var(--color-error) none;
color: #ffffff;
}
.ui-state-error a,
@ -154,10 +154,10 @@
.ui-state-hover,
.ui-state-active {
border: none;
border-bottom: 1px solid $color-main-text;
color: $color-main-text;
border-bottom: 1px solid var(--color-main-text);
color: var(--color-main-text);
a, a:link, a:hover, a:visited {
color: $color-main-text;
color: var(--color-main-text);
}
}
.ui-state-active {
@ -178,7 +178,7 @@
}
&.ui-widget-content {
background: $color-main-background;
background: var(--color-main-background);
border-top: none;
}
@ -191,13 +191,13 @@
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
border: 1px solid transparent;
background: inherit;
color: $color-primary-element;
color: var(--color-primary-element);
}
}
.ui-button.primary {
background-color: $color-primary;
color: $color-primary-text;
border: 1px solid $color-primary-text;
background-color: var(--color-primary);
color: var(--color-primary-text);
border: 1px solid var(--color-primary-text);
}

12
core/css/jquery.ocdialog.scss
View File

@ -1,8 +1,8 @@
.oc-dialog {
background: $color-main-background;
color: nc-darken($color-main-text, 20%);
border-radius: $border-radius;
box-shadow: 0 0 7px $color-box-shadow;
background: var(--color-main-background);
color: var(--color-text-light);
border-radius: var(--border-radius);
box-shadow: 0 0 7px var(--color-box-shadow);
padding: 15px;
z-index: 10000;
font-size: 100%;
@ -16,7 +16,7 @@
overflow: auto;
}
.oc-dialog-title {
background: $color-main-background;
background: var(--color-main-background);
margin-left: 12px;
}
.oc-dialog-buttonrow {
@ -29,7 +29,7 @@
padding-bottom: 0;
box-sizing: border-box;
width: 100%;
background-image: linear-gradient(rgba(255, 255, 255, 0.0), $color-main-background);
background-image: linear-gradient(rgba(255, 255, 255, 0.0), var(--color-main-background));
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}

6
core/css/mobile.scss
View File

@ -53,7 +53,7 @@
#app-content {
width: 100% !important;
left: 0 !important;
background-color: $color-main-background;
background-color: var(--color-main-background);
overflow-x: hidden !important;
z-index: 1000;
}
@ -72,7 +72,7 @@
width: 44px;
height: 44px;
z-index: 149;
background-color: rgba($color-main-background, .7);
background-color: var(--color-main-background-darker);
cursor: pointer;
opacity: .6;
}
@ -149,7 +149,7 @@ table.multiselect thead {
}
&::after {
border: 10px solid transparent;
border-bottom-color: $color-main-background;
border-bottom-color: var(--color-main-background);
bottom: 0;
content: ' ';
height: 0;

10
core/css/multiselect.scss
View File

@ -17,10 +17,10 @@
*/
ul.multiselectoptions {
background-color: $color-main-background;
border: 1px solid $color-primary;
background-color: var(--color-main-background);
border: 1px solid var(--color-primary);
border-top: none;
box-shadow: 0 1px 10px $color-box-shadow;
box-shadow: 0 1px 10px var(--color-box-shadow);
padding-top: 8px;
position: absolute;
max-height: 20em;
@ -31,7 +31,7 @@ ul.multiselectoptions {
border-bottom-right-radius: 3px;
width: 100%;
/* do not cut off group names */
box-shadow: 0 1px 10px $color-box-shadow;
box-shadow: 0 1px 10px var(--color-box-shadow);
}
&.up {
border-top-left-radius: 3px;
@ -95,7 +95,7 @@ select.multiselect {
/* To make a select look like a multiselect until it's initialized */
div.multiselect {
&.active {
background-color: $color-main-background;
background-color: var(--color-main-background);
position: relative;
z-index: 150;
}

4
core/css/public.scss
View File

@ -2,7 +2,7 @@
.header-right {
#header-primary-action a {
color: $color-primary-text;
color: var(--color-primary-text);
}
.menutoggle,
@ -10,7 +10,7 @@
padding: 14px;
padding-right: 40px;
background-position: right 15px center;
color: $color-primary-text;
color: var(--color-primary-text);
cursor: pointer;
}

9
core/css/share.scss
View File

@ -59,9 +59,8 @@
margin-right: 0;
}
.error {
color: $color-error;
border-color: $color-error;
box-shadow: 0 0 6px rgba($color-error, 0.35);
color: var(--color-error);
border-color: var(--color-error);
}
.mailView .icon-mail {
opacity: 0.5;
@ -131,7 +130,7 @@
}
#link {
border-top: 1px solid nc-darken($color-main-background, 14%);
border-top: 1px solid var(--color-border);
padding-top: 8px;
#showPassword img {
padding-left: 5px;
@ -173,7 +172,7 @@
.notCreatable {
padding-left: 12px;
padding-top: 12px;
color: rgba($color-main-text, .4);
color: var(--color-text-lighter);
}
.contactsmenu-popover {

152
core/css/styles.scss
View File

@ -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;
font-family: var(--font-face);
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: var(--color-background-darker) !important;
border: none !important;
}
.two-factor-link {
display: inline-block;
padding: 12px;
color: rgba($color-main-background, 0.75);
color: var(--color-text-lighter);
}
.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: var(--color-background-darker);
color: var(--color-primary-text);
line-height: 125%;
font-size: 24px;
div {
@ -150,10 +150,10 @@ 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%);
color: var(--color-primary-text-dark);
}
}
}
@ -170,8 +170,8 @@ body {
}
::-webkit-scrollbar-thumb {
background: nc-darken($color-main-background, 14%);
border-radius: $border-radius;
background: var(--color-background-darker);
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 var(--color-primary-text-dark) !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: var(--color-main-background-light);
z-index: 60;
-webkit-user-select: none;
-moz-user-select: none;
@ -303,7 +303,7 @@ body {
#emptycontent,
.emptycontent {
color: nc-lighten($color-main-text, 53%);
color: var(--color-text-maxcontrast);
text-align: center;
margin-top: 30vh;
width: 100%;
@ -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,8 +362,8 @@ body {
margin: 0 0 20px;
}
a {
color: $color-primary-text;
border-bottom: 1px solid nc-darken($color-main-background, 27%);
color: var(--color-primary-text);
border-bottom: 1px solid var(--color-background-darker);
}
}
.infogroup {
@ -488,7 +488,6 @@ 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;
}
#body-login .groupbottom input, .groupbottom input {
@ -496,7 +495,6 @@ 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;
}
#body-login .groupbottom input[type=submit] {
@ -522,16 +520,14 @@ label.infield {
user-select: none;
}
.errors {
background: rgba($color-error, .35);
border: 1px solid $color-error;
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;
border: 1px solid var(--color-success);
width: 35%;
margin: 30px auto;
padding: 1em;
@ -542,7 +538,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 {
@ -616,7 +612,6 @@ label.infield {
}
/* Database selector */
#body-login {
form #selectDbType {
text-align: center;
@ -629,27 +624,27 @@ label.infield {
position: static;
margin: 0 -3px 5px;
font-size: 12px;
background: nc-darken($color-main-background, 3%);
color: nc-lighten($color-main-text, 53%);
background: var(--color-background-dark);
color: var(--color-text-lighter);
cursor: pointer;
border: 1px solid nc-darken($color-main-background, 14%);
border: 1px solid var(--color-border-dark);
span {
cursor: pointer;
padding: 10px 20px;
}
&.ui-state-hover, &.ui-state-active {
color: $color-main-text;
background-color: nc-darken($color-main-background, 8%);
color: var(--color-main-text);
background-color: var(--color-border);
}
}
}
.warning, .update, .error {
display: block;
padding: 10px;
background-color: rgba($color-main-text, 0.3);
color: $color-primary-text;
background-color: var(--color-background-darker);
color: var(--color-primary-text);
text-align: left;
border-radius: $border-radius;
border-radius: var(--border-radius);
cursor: default;
}
.update {
@ -675,23 +670,22 @@ label.infield {
#body-user .warning, #body-settings .warning {
margin-top: 8px;
padding: 5px;
background: rgba($color-error, .15);
border-radius: $border-radius;
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;
color: var(--color-text-lighter) !important;
display: inline-block;
text-align: center;
}
@ -711,7 +705,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 +801,7 @@ label.infield {
#forgot-password {
padding: 11px;
float: right;
color: $color-primary-text;
color: var(--color-primary-text);
}
.wrapper {
min-height: 100%;
@ -847,7 +841,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;
@ -922,7 +916,7 @@ tr {
tbody tr {
&:hover, &:focus, &:active {
background-color: nc-darken($color-main-background, 3%);
background-color: var(--color-background-dark);
}
}
@ -958,7 +952,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 +965,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;
@ -995,7 +989,7 @@ code {
.ui-datepicker-calendar {
th {
font-weight: normal;
color: nc-lighten($color-main-text, 33%);
color: var(--color-text-lighter);
opacity: .8;
width: 26px;
padding: 2px;
@ -1005,20 +999,20 @@ code {
}
td {
&.ui-datepicker-today a:not(.ui-state-hover) {
background-color: nc-lighten($color-main-text, 86%);
background-color: var(--color-background-darker);
}
&.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;
}
&.ui-datepicker-week-end:not(.ui-state-disabled) :not(.ui-state-hover),
.ui-priority-secondary:not(.ui-state-hover) {
color: nc-lighten($color-main-text, 33%);
color: var(--color-text-lighter);
opacity: .8;
}
}
@ -1026,8 +1020,8 @@ code {
}
.ui-datepicker-prev, .ui-datepicker-next {
border: nc-darken($color-main-background, 14%);
background: $color-main-background;
border: var(--color-border-dark);
background: var(--color-main-background);
}
@ -1035,7 +1029,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 +1045,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;
@ -1066,7 +1060,7 @@ code {
.ui-timepicker-table {
th {
font-weight: normal;
color: nc-lighten($color-main-text, 33%);
color: var(--color-text-lighter);
opacity: .8;
&.periods {
padding: 0;
@ -1082,17 +1076,17 @@ 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;
}
&.ui-timepicker-minutes:not(.ui-state-hover) {
color: nc-lighten($color-main-text, 33%);
color: var(--color-text-lighter);
}
&.ui-timepicker-hours {
border-right: 1px solid $color-border;
border-right: 1px solid var(--color-border);
}
}
}
@ -1118,7 +1112,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;
@ -1163,14 +1157,14 @@ code {
width: 100%;
}
.emptycontent {
color: nc-lighten($color-main-text, 53%);
color: var(--color-text-details);
text-align: center;
margin-top: 80px;
width: 100%;
display: none;
}
.filelist {
background-color: $color-main-background;
background-color: var(--color-main-background);
width: 100%;
}
#filestable.filelist {
@ -1181,7 +1175,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 +1264,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;
@ -1348,7 +1342,7 @@ span.ui-icon {
}
.scrollarea {
overflow: auto;
border: 1px solid nc-darken($color-main-background, 14%);
border: 1px solid var(--color-background-darker);
width: 100%;
height: 240px;
}
@ -1360,7 +1354,7 @@ span.ui-icon {
}
}
.taglist li {
background: nc-darken($color-main-background, 3%);
background: var(--color-background-dark);
padding: .3em .8em;
white-space: nowrap;
overflow: hidden;
@ -1368,7 +1362,7 @@ span.ui-icon {
-webkit-transition: background-color 500ms;
transition: background-color 500ms;
&:hover, &:active {
background: nc-darken($color-main-background, 8%);
background: var(--color-background-darker);
}
}
.addinput {
@ -1483,12 +1477,12 @@ div.crumb {
position: relative;
text-align: center;
.info {
color: nc-lighten($color-main-text, 33%);
color: var(--color-text-lighter);
text-align: center;
margin: 0 auto;
padding: 20px 0;
a {
color: nc-lighten($color-main-text, 33%);
color: var(--color-text-lighter);
font-weight: 600;
padding: 13px;
margin: -13px;

16
core/css/tooltip.scss
View File

@ -34,7 +34,7 @@
/* default to top */
margin-top: -3px;
padding: 10px 0;
filter: drop-shadow(0 1px 10px $color-box-shadow);
filter: drop-shadow(0 1px 10px var(--color-box-shadow));
&.in,
&.tooltip[aria-hidden='false'] {
visibility: visible;
@ -60,7 +60,7 @@
left: 0;
margin-top: -10px;
border-width: 10px 10px 10px 0;
border-right-color: $color-main-background;
border-right-color: var(--color-main-background);
}
}
&.left,
@ -72,7 +72,7 @@
right: 0;
margin-top: -10px;
border-width: 10px 0 10px 10px;
border-left-color: $color-main-background;
border-left-color: var(--color-main-background);
}
}
/* TOP */
@ -83,7 +83,7 @@
.tooltip-arrow {
bottom: 0;
border-width: 10px 10px 0;
border-top-color: $color-main-background;
border-top-color: var(--color-main-background);
}
}
&.top-left .tooltip-arrow {
@ -102,7 +102,7 @@
.tooltip-arrow {
top: 0;
border-width: 0 10px 10px;
border-bottom-color: $color-main-background;
border-bottom-color: var(--color-main-background);
}
}
&[x-placement^='bottom'] .tooltip-arrow,
@ -123,10 +123,10 @@
.tooltip-inner {
max-width: 350px;
padding: 5px 8px;
background-color: $color-main-background;
color: $color-main-text;
background-color: var(--color-main-background);
color: var(--color-main-text);
text-align: center;
border-radius: $border-radius;
border-radius: var(--border-radius);
}
.tooltip-arrow {

56
core/css/variables.scss
View File

@ -1,30 +1,52 @@
$color-main-text: #000000;
$color-main-background: #ffffff;
// SCSS darken/lighten function override
@function nc-darken($color, $value) {
@return darken($color, $value);
}
@function nc-lighten($color, $value) {
@return lighten($color, $value);
}
// SCSS variables
// DEPRECATED, please use CSS4 vars
$color-main-text: #000 !default;
$color-main-background: #fff !default;
// used for different active/disabled states
$color-background-dark: nc-darken($color-main-background, 7%) !default;
$color-background-darker: nc-darken($color-main-background, 14%) !default;
$color-primary: #0082c9;
$color-primary-text: #ffffff;
// do not use nc-darken/lighten in case of overriding because
// primary-text is independent of color-main-text
$color-primary-text-dark: darken($color-primary-text, 7%) !default;
$color-primary-element: $color-primary !default;
$color-primary-element-light: lighten($color-primary-element, 15%) !default;
$color-error: #e9322d;
$color-warning: #eca700;
$color-success: #46ba61;
$color-primary-element: $color-primary;
// rgb(118, 118, 118) / #767676
// min. color contrast for normal text on white background according to WCAG AA
// (Works as well: color: #000; opacity: 0.57;)
$color-text-details: #767676;
$color-text-maxcontrast: nc-lighten($color-main-text, 46.2%) !default;
$color-text-light: nc-lighten($color-main-text, 15%) !default;
$color-text-lighter: nc-lighten($color-main-text, 30%) !default;
@function nc-darken($color, $value) {
@return darken($color, $value);
}
$image-logo: url('../img/logo.svg?v=1');
$image-login-background: url('../img/background.png?v=2');
@function nc-lighten($color, $value) {
@return lighten($color, $value);
}
$color-loading-light: #ccc !default;
$color-loading-dark: #777 !default;
$image-logo: '../img/logo.svg?v=1';
$image-login-background: '../img/background.png?v=2';
$color-box-shadow: rgba(nc-darken($color-main-background, 70%), 0.75) !default;
$color-loading: #969696;
$color-loading-dark: #bbbbbb;
$color-box-shadow: rgba(nc-darken($color-main-background, 70%), 0.75);
$color-border: nc-darken($color-main-background, 8%);
$border-radius: 3px;
// light border like file table or app-content list
$color-border: nc-darken($color-main-background, 7%) !default;
// darker border like inputs or very visible elements
$color-border-dark: nc-darken($color-main-background, 14%) !default;
$border-radius: 3px !default;
$font-face: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !default;

3
core/js/core.json
View File

@ -15,7 +15,8 @@
"autosize/dist/autosize.min.js",
"DOMPurify/dist/purify.min.js",
"snapjs/dist/latest/snap.js",
"select2/select2.js"
"select2/select2.js",
"css-vars-ponyfill/dist/css-vars-ponyfill.min.js"
],
"libraries": [
"jquery-showpassword.js",

5
core/js/js.js
View File

@ -1342,6 +1342,11 @@ function initCore() {
$('html').addClass('edge');
}
// css variables fallback for IE
if (msie > 0 || trident > 0) {
cssVars();
}
$(window).on('unload.main', function() {
OC._unloadCalled = true;
});

7
core/vendor/.gitignore vendored
View File

@ -176,3 +176,10 @@ DOMPurify/**
# strengthify
strengthify/examples.html
strengthify/examples.png
# underscore
css-vars-ponyfill/**
!css-vars-ponyfill/dist
!css-vars-ponyfill/dist/css-vars-ponyfill.min.js
!css-vars-ponyfill/dist/css-vars-ponyfill.min.js.map
!css-vars-ponyfill/LICENSE

21
core/vendor/css-vars-ponyfill/LICENSE vendored Normal file
View File

@ -0,0 +1,21 @@
MIT License
Copyright (c) 2018 John Hildenbiddle
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

9
core/vendor/css-vars-ponyfill/dist/css-vars-ponyfill.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
core/vendor/css-vars-ponyfill/dist/css-vars-ponyfill.min.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
lib/private/legacy/template.php
View File

@ -109,6 +109,7 @@ class OC_Template extends \OC\Template\Base {
}
}
OC_Util::addStyle('css-variables', null, true);
OC_Util::addStyle('server', null, true);
OC_Util::addStyle('jquery-ui-fixes',null,true);
OC_Util::addVendorStyle('jquery-ui/themes/base/jquery-ui',null,true);

81
settings/css/settings.scss
View File

@ -78,7 +78,7 @@ input {
transform: translate(-50%, -50%);
background: #fff;
color: #333;
border-radius: $border-radius;
border-radius: var(--border-radius);
box-shadow: 0 0 7px #888;
padding: 15px;
.jcrop-holder {
@ -130,11 +130,6 @@ input {
width: 100%;
}
}
#personal-settings {
.section {
border: 0;
}
}
#personal-settings {
display: grid;
@ -143,8 +138,11 @@ input {
grid-template-columns:1fr 2fr 1fr;
.section {
padding: 10px 10px;
border: 0;
h2 {
margin-bottom: 12px;
}
}
.personal-info {
margin-right: 10%;
margin-bottom: 20px;
@ -223,7 +221,6 @@ input {
> div {
h2 {
position: relative;
margin-bottom: 12px;
display: inline-flex;
flex-wrap: nowrap;
justify-content: flex-start;
@ -328,7 +325,7 @@ input {
opacity: .75;
}
&.active {
box-shadow: inset 2px 0 $color-primary;
box-shadow: inset 2px 0 var(--color-primary);
.menuitem-text {
font-weight: 600;
}
@ -426,7 +423,7 @@ table.nostyle {
padding-top: 5px;
}
}
border-top: 1px solid #DDD;
border-top: 1px solid var(--color-border);
text-overflow: ellipsis;
max-width: 200px;
white-space: nowrap;
@ -482,7 +479,6 @@ table.nostyle {
#new-app-password {
width: 245px;
font-family: monospace;
background-color: lightyellow;
}
.app-password-row {
@ -556,14 +552,14 @@ table.grid {
th {
height: 2em;
color: #999;
border-bottom: 1px solid $color-border;
border-bottom: 1px solid var(--color-border);
padding: 0 .5em;
padding-left: .8em;
text-align: left;
font-weight: normal;
}
td {
border-bottom: 1px solid $color-border;
border-bottom: 1px solid var(--color-border);
padding: 0 .5em;
padding-left: .8em;
text-align: left;
@ -639,7 +635,7 @@ span.usersLastLoginTooltip {
thead th,
thead tr {
z-index: 100;
background-color: $color-main-background;
background-color: var(--color-main-background);
position: sticky;
// positional attribute is required for position to take affect.
top: 0;
@ -734,7 +730,7 @@ span.version {
color: #555;
background-color: transparent;
border: 1px solid #555;
border-radius: $border-radius;
border-radius: var(--border-radius);
padding: 3px 6px;
}
a {
@ -804,7 +800,7 @@ span.version {
margin-bottom: 10px;
}
.app-author, .app-licence {
color: $color-text-details;
color: var(--color-text-maxcontrast);
}
.app-dependencies {
margin: 10px 0;
@ -819,7 +815,7 @@ span.version {
padding: 14px;
opacity: 0.5;
z-index: 1;
}.
}
.actions {
display: flex;
}
@ -885,7 +881,7 @@ span.version {
margin-bottom: 0;
/* use 2nd child since app-navigation-toggle is the first */
&:not(:nth-child(2)) {
border-top: 1px solid $color-border;
border-top: 1px solid var(--color-border);
}
/* correctly display help icons next to headings */
@ -980,12 +976,12 @@ span.version {
height: initial;
vertical-align: middle;
float: none;
border-bottom: 1px solid $color-border;
border-bottom: 1px solid var(--color-border);
padding: 6px;
box-sizing: border-box;
}
&.selected {
background-color: nc-darken($color-main-background, 3%);
background-color: var(--color-background-dark);
}
}
.groups-enable {
@ -1126,13 +1122,13 @@ table.grid td.date {
border-radius: 50%;
}
&.icon-checkmark-white {
background-color: $color-success;
background-color: var(--color-success);
}
&.icon-error-white {
background-color: $color-warning;
background-color: var(--color-warning);
}
&.icon-close-white {
background-color: $color-error;
background-color: var(--color-error);
}
}
}
@ -1233,14 +1229,14 @@ table.grid td.date {
span {
&.success {
background-color: $color-success;
border-radius: $border-radius;
background-color: var(--color-success);
border-radius: var(--border-radius);
}
&.error {
background-color: $color-error;
background-color: var(--color-error);
}
&.indeterminate {
background-color: $color-warning;
background-color: var(--color-warning);
border-radius: 40% 0;
}
}
@ -1303,10 +1299,10 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
background-position: left center;
}
.errors, .errors a {
color: $color-error;
color: var(--color-error);
}
.warnings, .warnings a {
color: $color-warning;
color: var(--color-warning);
}
.hint {
@ -1351,21 +1347,6 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
opacity: .7;
}
.settings-caption {
font-weight: bold;
line-height: 44px;
padding: 0 44px;
white-space: nowrap;
text-overflow: ellipsis;
// !important to overwrite specific hover and focus
opacity: .4 !important;
box-shadow: none !important;
&:not(:first-child) {
margin-top: 22px;
}
}
/* USERS LIST -------------------------------------------------------------- */
#body-settings {
@ -1402,7 +1383,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
what follows will be manually defined */
grid-template-columns: 44px;
grid-auto-columns: min-content;
border-top: $color-border 1px solid;
border-top: var(--color-border) 1px solid;
&.disabled {
opacity: .5;
}
@ -1438,11 +1419,11 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
&#new-user {
position: sticky;
align-self: normal;
background-color: $color-main-background;
background-color: var(--color-main-background);
z-index: 55; /* above multiselect */
top: 0;
&.sticky {
box-shadow: 0 -2px 10px 1px $color-box-shadow;
box-shadow: 0 -2px 10px 1px var(--color-box-shadow);
}
/* fake input for groups validation */
input#newgroups {
@ -1458,12 +1439,12 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
top: $grid-row-height;
}
&#grid-header {
color: nc-lighten($color-main-text, 60%);
color: var(--color-background-darker);
z-index: 60; /* above new-user */
}
&:hover {
input:not([type='submit']):not(:focus):not(:active) {
border-color: nc-darken($color-main-background, 14%) !important;
border-color: var(--color-border) !important;
}
}
> div,
@ -1471,7 +1452,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
grid-row: 1;
display: inline-flex;
align-items: center;
color: nc-lighten($color-main-text, 33%);
color: var(--color-text-lighter);
position: relative;
> input:not(:focus):not(:active) {
border-color: transparent;

4
settings/templates/settings/frame.php
View File

@ -30,7 +30,7 @@ script('files', 'jquery.fileupload');
<div id="app-navigation">
<ul>
<li class="settings-caption"><?php p($l->t('Personal')); ?></li>
<li class="app-navigation-caption"><?php p($l->t('Personal')); ?></li>
<?php
foreach($_['forms']['personal'] as $form) {
if (isset($form['anchor'])) {
@ -57,7 +57,7 @@ script('files', 'jquery.fileupload');
<?php
if(!empty($_['forms']['admin'])) {
?>
<li class="settings-caption"><?php p($l->t('Administration')); ?></li>
<li class="app-navigation-caption"><?php p($l->t('Administration')); ?></li>
<?php
}
foreach($_['forms']['admin'] as $form) {

2
settings/templates/settings/personal/personal.info.php
View File

@ -78,7 +78,7 @@ vendor_style('jcrop/css/jquery.Jcrop');
<div class="personal-settings-setting-box personal-settings-group-box section">
<h2><?php p($l->t('Details')); ?></h2>
<div id="groups" class="personal-info icon-user">
<p class="icon-groups"><?php p($l->t('You are a member of the following groups:')); ?></p>
<p><?php p($l->t('You are a member of the following groups:')); ?></p>
<p id="groups-groups">
<strong><?php p(implode(', ', $_['groups'])); ?></strong>
</p>

11
tests/acceptance/features/app-theming.feature
View File

@ -5,10 +5,13 @@ Feature: app-theming
And I visit the settings page
And I open the "Theming" section
And I see that the color selector in the Theming app has loaded
And I see that the header color is "#0082C9"
# The "eventually" part is not really needed here, as the colour is not
# being animated at this point, but there is no need to create a specific
# step just for this.
And I see that the header color is eventually "#0082C9"
When I set the "Color" parameter in the Theming app to "#C9C9C9"
Then I see that the parameters in the Theming app are eventually saved
And I see that the header color is "#C9C9C9"
And I see that the header color is eventually "#C9C9C9"
Scenario: resetting the color updates the header color
Given I am logged in as the admin
@ -17,7 +20,7 @@ Feature: app-theming
And I see that the color selector in the Theming app has loaded
And I set the "Color" parameter in the Theming app to "#C9C9C9"
And I see that the parameters in the Theming app are eventually saved
And I see that the header color is "#C9C9C9"
And I see that the header color is eventually "#C9C9C9"
When I reset the "Color" parameter in the Theming app to its default value
Then I see that the parameters in the Theming app are eventually saved
And I see that the header color is "#0082C9"
And I see that the header color is eventually "#0082C9"

2
tests/acceptance/features/bootstrap/SettingsMenuContext.php
View File

@ -79,7 +79,7 @@ class SettingsMenuContext implements Context, ActorAwareInterface {
* @return Locator
*/
private static function settingsPanelFor($itemText) {
return Locator::forThe()->xpath("//div[@id = 'app-navigation']//ul//li[@class = 'settings-caption' and normalize-space() = '$itemText']")->
return Locator::forThe()->xpath("//div[@id = 'app-navigation']//ul//li[@class = 'app-navigation-caption' and normalize-space() = '$itemText']")->
describedAs($itemText . " item in Settings panel");
}

19
tests/acceptance/features/bootstrap/ThemingAppContext.php
View File

@ -125,13 +125,20 @@ class ThemingAppContext implements Context, ActorAwareInterface {
}
/**
* @Then I see that the header color is :color
* @Then I see that the header color is eventually :color
*/
public function iSeeThatTheHeaderColorIs($color) {
$headerColor = $this->actor->getSession()->evaluateScript("return $('#header').css('background-color');");
$headerColor = $this->getRGBArray($headerColor);
$color = $this->getRGBArray($color);
PHPUnit_Framework_Assert::assertEquals($color, $headerColor);
public function iSeeThatTheHeaderColorIsEventually($color) {
$headerColorMatchesCallback = function() use($color) {
$headerColor = $this->actor->getSession()->evaluateScript("return $('#header').css('background-color');");
$headerColor = $this->getRGBArray($headerColor);
$color = $this->getRGBArray($color);
return $headerColor == $color;
};
if (!Utils::waitFor($headerColorMatchesCallback, $timeout = 10 * $this->actor->getFindTimeoutMultiplier(), $timeoutStep = 1)) {
PHPUnit_Framework_Assert::fail("The header color is not $color yet after $timeout seconds");
}
}
/**