ahtlon/deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Fix css variable usage on Nextcloud 13

Browse Source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2018-11-08 18:33:50 +01:00
parent fc5cabedd0
commit 47fc2eb20d
3 changed files with 37 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
css/icons.scss
View File

@@ -34,13 +34,11 @@
} }
.icon-home { .icon-home {
background-image: url('../../../core/img/places/home.svg'); background-image: var(--icon-home-000, url('../../../core/img/places/home.svg'));
background-image: var(--icon-home-000);
} }
.icon-description { .icon-description {
background-image: url('../img/description.svg'); background-image: var(--icon-text-000, url('../img/description.svg'));
background-image: var(--icon-text-000);
} }
.icon-badge { .icon-badge {

68
css/style.scss
View File

@@ -156,8 +156,7 @@ input.input-inline {
z-index: 999; z-index: 999;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: $color-main-background; background-color: var(--color-main-background, $color-main-background);
background-color: var(--color-main-background);
} }
#board { #board {
@@ -186,12 +185,10 @@ input.input-inline {
&.card-selected { &.card-selected {
.card { .card {
box-shadow: 0px 0px 7px 0px $color-grey; box-shadow: 0px 0px 7px 0px var(--color-background-dark, $color-grey);
box-shadow: 0px 0px 7px 0px var(--color-grey);
&.current { &.current {
box-shadow: 0px 0px 7px 0px $color-darkgrey; box-shadow: 0px 0px 7px 0px var(--color-background-darker, $color-darkgrey);
box-shadow: 0px 0px 7px 0px var(--color-background-dark);
} }
} }
} }
@@ -224,10 +221,7 @@ input.input-inline {
} }
> .as-sortable-drag { > .as-sortable-drag {
background-color: $color-main-background; background-color: var(--color-main-background $color-main-background);
background-color: var(--color-main-background);
box-shadow: 0 0 7px 0 $color-background-dark;
box-shadow: 0 0 7px 0 var(--color-background-dark);
} }
} }
@@ -266,9 +260,17 @@ input.input-inline {
} }
button { button {
height: inherit; width: 36px;
height: 36px;
padding: 9px;
} }
#stack-add form {
button {
height: auto;
width: 32px;
}
}
input[type='text'] { input[type='text'] {
padding: 6px; padding: 6px;
border: 0 none transparent; border: 0 none transparent;
@@ -333,8 +335,7 @@ input.input-inline {
} }
#stack-add { #stack-add {
background-color: $color-lightgrey; background-color: var(--color-background-dark, $color-lightgrey);
background-color: var(--color-background-dark);
border-radius: 3px; border-radius: 3px;
margin: 3px; margin: 3px;
display: flex; display: flex;
@@ -380,8 +381,7 @@ input.input-inline {
margin: 0; margin: 0;
font-size: 12pt; font-size: 12pt;
border: 0; border: 0;
background-color: $color-main-background; background-color: var(--color-main-background, $color-main-background);
background-color: var(--color-main-background);
min-height: initial; min-height: initial;
} }
@@ -427,13 +427,11 @@ input.input-inline {
} }
.card { .card {
background-color: $color-main-background; background-color: var(--color-main-background, $color-main-background);
background-color: var(--color-main-background);
margin: $board-item-margin; margin: $board-item-margin;
white-space: normal; white-space: normal;
position: relative; position: relative;
box-shadow: 0 0 3px $color-darkgrey; box-shadow: 0 0 3px var(--color-background-dark, $color-darkgrey);
box-shadow: 0 0 3px --var(color-darkgrey);
border-radius: 3px; border-radius: 3px;
transition: margin 250ms linear; transition: margin 250ms linear;
@@ -462,8 +460,7 @@ input.input-inline {
} }
.card-controls { .card-controls {
background: $color-lightgrey; background: var(--color-background-dark, $color-lightgrey);
background: var(--color-background-dark);
display: flex; display: flex;
position: relative; position: relative;
padding-left: 10px; padding-left: 10px;
@@ -497,8 +494,7 @@ input.input-inline {
&.overdue { &.overdue {
background-color: $color-error; background-color: $color-error;
color: $color-primary-text; color: var(--color-primary-text, $color-primary-text);
color: var(--color-primary-text);
.icon-badge { .icon-badge {
background-image: url('../img/calendar-white.svg'); background-image: url('../img/calendar-white.svg');
@@ -680,8 +676,7 @@ input.input-inline {
position: sticky; position: sticky;
top: 0; top: 0;
background-color: $color-main-background; background-color: var(--color-main-background, $color-main-background);
background-color: var(--color-main-background);
z-index: 200; z-index: 200;
h3 { h3 {
@@ -721,8 +716,7 @@ input.input-inline {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: $color-main-background; background-color: var(--color-main-background, $color-main-background);
background-color: var(--color-main-background);
z-index: 100; z-index: 100;
opacity: 0.9; opacity: 0.9;
text-align: center; text-align: center;
@@ -809,10 +803,8 @@ input.input-inline {
color: $color-primary-text; color: $color-primary-text;
} }
&.unsaved { &.unsaved {
background-color: $color-lightgrey; background-color: var(--color-background-dark, $color-lightgrey);
background-color: var(--color-background-dark); color: var(--color-text-light, $color-darkgrey);
color: $color-darkgrey;
color: var(--color-text-light);
} }
} }
@@ -853,9 +845,9 @@ input.input-inline {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba($color-darkgrey, 0.5); background-color: rgba($color-darkgrey, 0.5);
background-color: var(--color-background-dark);
left: 0; left: 0;
top: 0; top: 0;
z-index: 300;
} }
.attachment-list { .attachment-list {
&.selector { &.selector {
@@ -868,12 +860,10 @@ input.input-inline {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background-color: $color-main-background; background-color: var(--color-main-background, $color-main-background);
background-color: var(--color-main-background);
z-index: 2; z-index: 2;
border-radius: 3px; border-radius: 3px;
box-shadow: 0 0 3px $color-darkgrey; box-shadow: 0 0 3px var(--color-background-dark, $color-darkgrey);
box-shadow: 0 0 3px var(--color-background-dark);
overflow: scroll; overflow: scroll;
} }
h3.attachment-selector { h3.attachment-selector {
@@ -967,8 +957,7 @@ input.input-inline {
} }
.container { .container {
background-color: $color-main-background; background-color: var(--color-main-background, $color-main-background);
background-color: var(--color-main-background);
} }
} }
@@ -1493,8 +1482,7 @@ input.input-inline {
} }
pre { pre {
background-color: $color-lightgrey; background-color: var(--color-background-dark, $color-lightgrey);
background-color: var(--color-background-dark);
padding: 3px; padding: 3px;
overflow: auto; overflow: auto;

9
templates/part.card.php
View File

@@ -96,12 +96,17 @@
<span class="save-indicator unsaved"><?php p($l->t('Unsaved changes')); ?></span> <span class="save-indicator unsaved"><?php p($l->t('Unsaved changes')); ?></span>
<div style="flex-grow: 1;"> </div> <div style="flex-grow: 1;"> </div>
<a ng-if="params.tab === 0" href="https://github.com/nextcloud/deck/wiki/Markdown-Help" target="_blank" class="icon icon-help" data-toggle="tooltip" data-placement="left" title="<?php p($l->t('Formatting help')); ?>"><span class="hidden-visually"><?php p($l->t('Formatting help')); ?></span></a> <a ng-if="params.tab === 0" href="https://github.com/nextcloud/deck/wiki/Markdown-Help" target="_blank" class="icon icon-help" data-toggle="tooltip" data-placement="left" title="<?php p($l->t('Formatting help')); ?>"><span class="hidden-visually"><?php p($l->t('Formatting help')); ?></span></a>
<label ng-if="params.tab === 1" for="attachment-upload" class="button icon-upload" ng-class="{'icon-loading-small': fileservice.uploader.isUploading}" data-toggle="tooltip" data-placement="left" title="<?php p($l->t('Upload attachment')); ?>"></label>
<input id="attachment-upload" type="file" nv-file-select="" uploader="fileservice.uploader" class="hidden" options="{cardId: cardservice.getCurrent().id}"/>
<input ng-if="status.cardEditDescription" type="button" ng-mousedown="status.continueEdit = true; status.selectAttachment = true;" class="icon-files-dark" data-toggle="tooltip" data-placement="left" title="<?php p($l->t('Insert attachment')); ?>"/> <input ng-if="status.cardEditDescription" type="button" ng-mousedown="status.continueEdit = true; status.selectAttachment = true;" class="icon-files-dark" data-toggle="tooltip" data-placement="left" title="<?php p($l->t('Insert attachment')); ?>"/>
</div> </div>
<div class="section-content card-attachments"> <div class="section-content card-attachments">
<div>
<label ng-if="params.tab === 1" for="attachment-upload" class="button data-toggle="tooltip" data-placement="left" title="<?php p($l->t('Upload attachment')); ?>">
<span class="icon-upload" ng-class="{'icon-loading-small': fileservice.uploader.isUploading}"></span>
<?php p($l->t('Upload attachment')); ?>
</label>
<input id="attachment-upload" type="file" nv-file-select="" uploader="fileservice.uploader" class="hidden" options="{cardId: cardservice.getCurrent().id}"/>
</div>
<div class="error icon-error" ng-if="fileservice.status"><strong>{{ fileservice.status.error }}</strong><br />{{ fileservice.status.message }}</div> <div class="error icon-error" ng-if="fileservice.status"><strong>{{ fileservice.status.error }}</strong><br />{{ fileservice.status.message }}</div>
<attachment-list-component ng-if="params.tab === 1 && cardservice.getCurrent() && isArray(cardservice.getCurrent().attachments)" attachments="cardservice.getCurrent().attachments"></attachment-list-component> <attachment-list-component ng-if="params.tab === 1 && cardservice.getCurrent() && isArray(cardservice.getCurrent().attachments)" attachments="cardservice.getCurrent().attachments"></attachment-list-component>
</div> </div>