1165 lines
16 KiB
SCSS
1165 lines
16 KiB
SCSS
/*
|
|
* @copyright Copyright (c) 2016 Julius Härtl <jus@bitgrid.net>
|
|
*
|
|
* @author Julius Härtl <jus@bitgrid.net>
|
|
* @author Artem Anufrij <artem.anufrij@live.de>
|
|
* @author Marin Treselj <marin@pixelipo.com>
|
|
*
|
|
* @license GNU AGPL version 3 or any later version
|
|
*
|
|
* This program is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU Affero General Public License as
|
|
* published by the Free Software Foundation, either version 3 of the
|
|
* License, or (at your option) any later version.
|
|
*
|
|
* This program is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU Affero General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU Affero General Public License
|
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* Variables
|
|
*/
|
|
$color-main-background: #fff;
|
|
$color-primary-text: #fff;
|
|
$color-error: #e9322d;
|
|
$color-warning: #fbd850;
|
|
$color-warning-light: nc-lighten($color-warning, 15%);
|
|
$color-success: #46ba61;
|
|
$color-lightgrey: nc-darken($color-main-background, 4%);
|
|
$color-grey: nc-darken($color-main-background, 7%);
|
|
$color-darkgrey: nc-darken($color-main-background, 32%);
|
|
|
|
/**
|
|
* General styles
|
|
*/
|
|
button,
|
|
.button,
|
|
.app-deck .icon {
|
|
display: flex;
|
|
&.button-inline {
|
|
border: 0;
|
|
background-color: transparent;
|
|
}
|
|
&.button-inline:hover {
|
|
border: 0;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
input.input-inline {
|
|
font-size: inherit !important;
|
|
font-weight: inherit;
|
|
background-color: transparent;
|
|
padding: 0;
|
|
border: none;
|
|
width: 100%;
|
|
-webkit-border-radius: 0;
|
|
}
|
|
|
|
|
|
|
|
#searchbox {
|
|
display: flex !important;
|
|
}
|
|
|
|
.editable-inline {
|
|
cursor: text;
|
|
}
|
|
|
|
/**
|
|
* Navigation sidebar
|
|
*/
|
|
.app-navigation-entry-menu {
|
|
ul {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
|
|
#app-navigation {
|
|
.app-navigation-entry-edit {
|
|
height: auto;
|
|
|
|
form {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.colorselect {
|
|
width: 100%;
|
|
div{
|
|
height: 32px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.board-bullet {
|
|
position: absolute;
|
|
margin-left: 17px;
|
|
margin-top: 16px;
|
|
width: 12px;
|
|
height: 12px;
|
|
border: none;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.app-navigation-entry-utils {
|
|
.app-navigation-entry-utils-menu-button {
|
|
display: block !important; // TODO: is this needed?
|
|
}
|
|
|
|
.app-navigation-entry-utils-menu-share {
|
|
display: flex !important;
|
|
padding: 14px;
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
.app-navigation-entry-menu ul {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Board view
|
|
*/
|
|
#board-status {
|
|
position: absolute;
|
|
z-index: 999;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: $color-main-background;
|
|
}
|
|
|
|
#board {
|
|
position: absolute;
|
|
white-space: nowrap;
|
|
overflow: auto;
|
|
z-index: 100;
|
|
width: 100%;
|
|
bottom: 0px;
|
|
top: 44px;
|
|
|
|
&.as-sortable-un-selectable {
|
|
.card-list {
|
|
min-height: 96px;
|
|
}
|
|
}
|
|
}
|
|
|
|
#innerBoard {
|
|
padding: 10px;
|
|
|
|
> .as-sortable-placeholder {
|
|
display: inline-block !important;
|
|
margin-top: 0;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
#controls {
|
|
width: inherit;
|
|
z-index: 120;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14pt;
|
|
position: inherit;
|
|
width: 100% !important;
|
|
padding-left: 44px;
|
|
|
|
.crumb,
|
|
#controls a {
|
|
top: 12px;
|
|
}
|
|
|
|
> h1 {
|
|
white-space: nowrap;
|
|
padding: 7px;
|
|
}
|
|
|
|
button {
|
|
height: inherit;
|
|
}
|
|
|
|
input[type='text'] {
|
|
padding: 6px;
|
|
border: 0px none transparent;
|
|
min-height: initial;
|
|
background-color: transparent;
|
|
height: inherit;
|
|
}
|
|
|
|
.icon-home { // TODO: deprecate this
|
|
background-position: 8px center;
|
|
padding: 10px 24px 10px 14px;
|
|
}
|
|
}
|
|
|
|
#app-navigation-toggle {
|
|
width: 44px;
|
|
height: 44px;
|
|
cursor: pointer;
|
|
opacity: 1;
|
|
display: inline-block !important;
|
|
position: fixed;
|
|
}
|
|
|
|
.board-header-controls {
|
|
margin-left: auto;
|
|
align-items: center;
|
|
|
|
&.app-popover-menu-utils {
|
|
display: flex;
|
|
|
|
#popover-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.popovermenu {
|
|
margin-top: 35px;
|
|
margin-right: 6px;
|
|
}
|
|
}
|
|
|
|
> button {
|
|
padding: 16px 20px;
|
|
}
|
|
}
|
|
|
|
.filter-select {
|
|
position: absolute;
|
|
right: auto;
|
|
top: 42px;
|
|
left: -21%;
|
|
|
|
li {
|
|
padding: 3px;
|
|
overflow: hidden;
|
|
width: auto;
|
|
|
|
span {
|
|
display: block;
|
|
float: left;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
#stack-add {
|
|
background-color: $color-lightgrey;
|
|
border-radius: 3px;
|
|
margin: 3px;
|
|
display: flex;
|
|
align-content: center;
|
|
|
|
> form {
|
|
display: flex;
|
|
align-content: center;
|
|
}
|
|
|
|
input {
|
|
&:invalid,
|
|
&:-moz-submit-invalid,
|
|
&:-moz-ui-invalid {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.stack {
|
|
width: 100%;
|
|
vertical-align: top;
|
|
|
|
h2 {
|
|
padding: 10px 10px 8px;
|
|
margin: 0;
|
|
font-size: 12pt;
|
|
font-weight: 700;
|
|
overflow: hidden;
|
|
display: flex;
|
|
min-height: 40px;
|
|
|
|
&:hover button {
|
|
display: flex;
|
|
}
|
|
|
|
input {
|
|
padding: 0;
|
|
width: 100%;
|
|
margin: 0;
|
|
font-size: 12pt;
|
|
font-weight: 700;
|
|
border: 0;
|
|
background-color: $color-main-background;
|
|
min-height: initial;
|
|
}
|
|
|
|
span {
|
|
white-space: normal;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
button {
|
|
margin-left: auto;
|
|
display: flex;
|
|
opacity: 0.3;
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
|
|
form {
|
|
width: 100%;
|
|
}
|
|
|
|
.as-sortable-placeholder {
|
|
margin: 10px 10px 20px 10px;
|
|
border: 1px dashed $color-darkgrey;
|
|
|
|
&:last-child {
|
|
margin: 10px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
.card {
|
|
background-color: $color-main-background;
|
|
margin: 10px 10px 20px 10px;
|
|
white-space: normal;
|
|
position: relative;
|
|
opacity: 1.0;
|
|
-webkit-box-shadow: 0 0 5px $color-darkgrey;
|
|
|
|
&:last-child {
|
|
margin: 10px;
|
|
}
|
|
|
|
&.archived .card-upper {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.card-upper {
|
|
overflow: hidden;
|
|
position: relative;
|
|
padding: 5px;
|
|
}
|
|
|
|
.card-controls {
|
|
padding: 10px;
|
|
background: $color-lightgrey;
|
|
display: flex;
|
|
position: relative;
|
|
|
|
.card-options {
|
|
opacity: 0.3;
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 8px;
|
|
}
|
|
|
|
&:hover .card-options {
|
|
opacity: 1;
|
|
}
|
|
|
|
.icon-filetype-text {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
button {
|
|
padding: 0px;
|
|
margin-right: 0px;
|
|
}
|
|
}
|
|
|
|
a {
|
|
display: block;
|
|
}
|
|
|
|
h3 {
|
|
font-weight: bold;
|
|
font-size: 10pt;
|
|
padding: 0;
|
|
margin: 5px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
&.has-labels h3 {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.labels {
|
|
position: absolute;
|
|
top: -5px;
|
|
left: 10px;
|
|
|
|
li {
|
|
padding: 0;
|
|
width: 15px;
|
|
height: 20px;
|
|
-webkit-border-radius: 3px;
|
|
font-size: 80%;
|
|
border: none transparent;
|
|
float: left;
|
|
|
|
span {
|
|
display: none;
|
|
}
|
|
|
|
&:hover span {
|
|
position: absolute;
|
|
padding: 3px;
|
|
background-color: inherit;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.create {
|
|
text-align: center;
|
|
padding: 10px;
|
|
margin: 10px;
|
|
border: none;
|
|
overflow: hidden;
|
|
-webkit-box-shadow: none;
|
|
|
|
&:hover {
|
|
text-align: center;
|
|
opacity: 1;
|
|
}
|
|
|
|
h3 {
|
|
width: 100%;
|
|
padding: 0;
|
|
margin: 0 0 1px;
|
|
|
|
input {
|
|
width: 100%;
|
|
border: 0;
|
|
font-weight: bold;
|
|
font-size: 10pt;
|
|
margin: 0;
|
|
padding: 0;
|
|
border-bottom: 1px solid $color-primary-text;
|
|
border-radius: 0;
|
|
color: $color-primary-text;
|
|
background-color: transparent !important;
|
|
min-height: initial;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.app-popover-menu-utils {
|
|
margin-left: auto;
|
|
min-height: 16px;
|
|
}
|
|
|
|
.popovermenu {
|
|
z-index: 999;
|
|
opacity: 1;
|
|
display: block;
|
|
margin-top: 25px;
|
|
margin-right: 0px;
|
|
|
|
&.hidden {
|
|
display: none;
|
|
}
|
|
|
|
ul {
|
|
display: flex !important;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
.info {
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
display: inline-block;
|
|
opacity: 0.5;
|
|
|
|
i {
|
|
margin-left: 2px;
|
|
}
|
|
|
|
span {
|
|
margin-right: 2px;
|
|
}
|
|
}
|
|
|
|
.due {
|
|
border-radius: 3px;
|
|
margin: -4px 4px -4px -4px;
|
|
padding: 0px 4px;
|
|
font-size: 90%;
|
|
opacity: 0.5;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.icon {
|
|
background-size: contain;
|
|
}
|
|
|
|
&.overdue {
|
|
background-color: $color-error;
|
|
color: $color-primary-text;
|
|
|
|
.icon-badge {
|
|
background-image: url('../img/calendar-white.svg');
|
|
}
|
|
}
|
|
&.now {
|
|
background-color: $color-warning;
|
|
}
|
|
&.next {
|
|
background-color: $color-warning-light;
|
|
}
|
|
|
|
span {
|
|
margin-left: 3px;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* App sidebar
|
|
*/
|
|
#app-sidebar {
|
|
right: -500px;
|
|
max-width: 100%;
|
|
width: 500px;
|
|
display:flex;
|
|
flex-direction: column;
|
|
|
|
&.details-visible {
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
#sidebar-header {
|
|
h2 {
|
|
font-size: 14pt;
|
|
padding: 9px 10px;
|
|
overflow: hidden;
|
|
margin-bottom: 0;
|
|
background-color: $color-lightgrey;
|
|
|
|
input {
|
|
min-height: 0px;
|
|
margin: 0px;
|
|
}
|
|
}
|
|
|
|
.icon-close {
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 0px;
|
|
padding: 14px;
|
|
height: 44px;
|
|
width: 44px;
|
|
}
|
|
}
|
|
|
|
#card-meta { // TODO: use .card-block instead?
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 15px;
|
|
|
|
.duedate {
|
|
display: flex;
|
|
align-content: center;
|
|
min-height: 38px;
|
|
|
|
.timepicker-input {
|
|
width: 50px;
|
|
border-left: 0;
|
|
border-radius: 0px 3px 3px 0px;
|
|
}
|
|
|
|
.datepicker-input {
|
|
width: 85px;
|
|
margin: 3px 0px;
|
|
border-radius: 3px 0px 0px 3px;
|
|
}
|
|
|
|
.icon {
|
|
opacity: 0.5;
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.select2-container {
|
|
margin: 0px;
|
|
}
|
|
|
|
h3 {
|
|
border-bottom: 1px solid $color-lightgrey;
|
|
padding: 15px 0px 5px 0px;
|
|
|
|
> div {
|
|
display: flex;
|
|
align-content: center;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
.save-indicator {
|
|
background-color: $color-success;
|
|
color: $color-primary-text;
|
|
border-radius: 3px;
|
|
float: right;
|
|
padding: 0px 10px;
|
|
font-size: 8pt !important;
|
|
display: none;
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.icon-help {
|
|
opacity: 0.5;
|
|
padding: 5px 15px;
|
|
display: inline;
|
|
}
|
|
|
|
#card-dates {
|
|
font-size: 80%;
|
|
opacity: 0.5;
|
|
text-align: right;
|
|
}
|
|
|
|
#card-tag-label {
|
|
padding-top: 0px !important;
|
|
margin-top: 0px;
|
|
}
|
|
|
|
#card-description {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
> div {
|
|
height: 100%;
|
|
}
|
|
|
|
textarea {
|
|
width: 100%;
|
|
height: 200px;
|
|
border: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.container {
|
|
background-color: $color-main-background;
|
|
}
|
|
}
|
|
}
|
|
|
|
#card-attachments {
|
|
ul {
|
|
margin: 5px;
|
|
}
|
|
|
|
.details {
|
|
font-size: 8pt;
|
|
padding-left: 15px;
|
|
}
|
|
}
|
|
|
|
#app-content {
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
&.details-visible {
|
|
margin-right: 500px;
|
|
}
|
|
}
|
|
|
|
.labels {
|
|
display: block;
|
|
overflow: hidden;
|
|
|
|
li {
|
|
padding: 0px 0px 5px 0px;
|
|
-webkit-border-radius: 3px;
|
|
margin: 1px;
|
|
color: $color-primary-text;
|
|
min-width: 20px;
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Color selection
|
|
*/
|
|
.colorselect {
|
|
overflow: hidden;
|
|
border-radius:3px;
|
|
flex-direction: row;
|
|
display: flex;
|
|
|
|
.color {
|
|
opacity: 0.7;
|
|
height: 100%;
|
|
flex-grow: 1;
|
|
border: none;
|
|
}
|
|
|
|
.selected {
|
|
background-image: url('../../../core/img/actions/checkmark.svg');
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
opacity: 1;
|
|
&.selected {
|
|
background-image: url('../../../core/img/actions/checkmark-white.svg');
|
|
}
|
|
}
|
|
}
|
|
|
|
.labels {
|
|
.colorselect {
|
|
padding: 0;
|
|
clear: none;
|
|
overflow: visible;
|
|
|
|
.color {
|
|
width: 26px;
|
|
height: 26px;
|
|
}
|
|
}
|
|
|
|
.label-edit {
|
|
display: flex;
|
|
width: 100%;
|
|
|
|
.colorselect {
|
|
margin: 0px 0px 0px 3px;
|
|
}
|
|
|
|
input {
|
|
border-bottom: 1px solid $color-lightgrey;
|
|
padding: 5px 5px 4px 5px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* Board list main screen area
|
|
*/
|
|
#boardlist {
|
|
position: absolute;
|
|
overflow: auto;
|
|
width: 100%;
|
|
bottom: 0px;
|
|
top: 44px;
|
|
|
|
thead td {
|
|
opacity: .5;
|
|
padding: 15px;
|
|
}
|
|
|
|
td {
|
|
padding: 0 10px;
|
|
border-bottom: 1px solid $color-grey;
|
|
|
|
.board-bullet {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
margin: 6px;
|
|
}
|
|
|
|
form {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
|
|
.colorselect {
|
|
flex-grow: 1;
|
|
|
|
div {
|
|
min-width: 32px;
|
|
}
|
|
}
|
|
|
|
input[type=text] {
|
|
flex-grow: 2;
|
|
}
|
|
|
|
input[type=submit] {
|
|
width: 32px;
|
|
}
|
|
|
|
.app-popover-menu-utils {
|
|
position: relative;
|
|
|
|
button {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
&:hover button {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
padding: 25px;
|
|
margin: 0 0 0 auto;
|
|
}
|
|
|
|
tr.deleted td *,
|
|
tbody .board-create td {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.popovermenu {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.board-edit-controls {
|
|
display: flex;
|
|
}
|
|
|
|
input {
|
|
margin: 0px;
|
|
}
|
|
|
|
#assigned-users {
|
|
display: flex;
|
|
|
|
.avatardiv {
|
|
margin: 6px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Board details
|
|
*/
|
|
#shareWithList {
|
|
list-style-type: none;
|
|
padding: 0 0 16px;
|
|
|
|
li {
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
font-weight: bold;
|
|
white-space: normal;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.username {
|
|
padding-right: 8px;
|
|
padding-left: 8px;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.icon-delete {
|
|
display: inline-block;
|
|
background-size: 16px 16px;
|
|
width: 16px;
|
|
height: 16px;
|
|
padding: 0;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.shareOption {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.avatardiv {
|
|
background-color: $color-lightgrey;
|
|
border-radius: 16px;
|
|
width: 32px;
|
|
height: 32px;
|
|
|
|
.icon-group {
|
|
padding: 16px;
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
#board-detail-labels {
|
|
ul li {
|
|
input {
|
|
margin: 0px;
|
|
padding: 5px;
|
|
min-height: 0px;
|
|
}
|
|
|
|
.label-title {
|
|
width: 100%;
|
|
padding: 4px;
|
|
border: none;
|
|
border-radius: 0px 0px 5px 5px;
|
|
}
|
|
|
|
a.icon {
|
|
padding: 5px;
|
|
opacity: 0.5;
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.color {
|
|
width: 28px;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.label-create {
|
|
width: 100%;
|
|
padding: 0px 56px 0px 0px !important;
|
|
|
|
a {
|
|
margin: 0px;
|
|
}
|
|
|
|
.icon {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
.tabHeaders {
|
|
clear: both;
|
|
overflow: hidden;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.tabsContainer {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.ui-select-offscreen {
|
|
display: none;
|
|
}
|
|
|
|
.ui-select-match-item {
|
|
padding: 0;
|
|
float: left !important;
|
|
display: block;
|
|
border-radius: 0px 0px 5px 5px !important;
|
|
|
|
.select-label {
|
|
color: $color-primary-text;
|
|
padding: 6px 23px 6px 6px;
|
|
margin-right: -23px !important;
|
|
}
|
|
|
|
.select2-search-choice-close {
|
|
z-index: 100;
|
|
position: relative;
|
|
display: inline-flex !important;
|
|
margin-right: 7px;
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
|
|
.select2-container-multi .select2-choices .select2-search-choice {
|
|
padding: 3px 0 !important;
|
|
border: 0 !important;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ui-select-container[disabled] .ui-select-match-item {
|
|
margin-right: 0 !important;
|
|
|
|
.select-label {
|
|
padding: 4px;
|
|
min-width: 26px !important;
|
|
height: 100%;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.select2-search input {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.select2-result-label {
|
|
padding: 0px !important;
|
|
|
|
span {
|
|
display: flex;
|
|
padding: 6px;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Markdown rendering
|
|
*/
|
|
#markdown {
|
|
width: 100% !important;
|
|
|
|
p {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
* {
|
|
white-space: normal;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
a {
|
|
opacity: 0.5;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
ol,
|
|
ul {
|
|
margin-left: 20px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: disc;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
h6 {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
pre {
|
|
background-color: $color-lightgrey;
|
|
padding: 3px;
|
|
overflow: auto;
|
|
|
|
code {
|
|
white-space: pre;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Mobile optimizations
|
|
*/
|
|
@media (min-width: 481px) {
|
|
/* hide board actions on mobile */
|
|
.board-header-controls {
|
|
display: flex;
|
|
|
|
&.app-popover-menu-utils {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
#innerBoard {
|
|
display: flex;
|
|
}
|
|
|
|
.stack {
|
|
width: 320px;
|
|
min-width: 320px;
|
|
display: inline-block;
|
|
border-right: 1px solid $color-lightgrey;
|
|
margin-right: 10px;
|
|
padding-right: 10px;
|
|
|
|
&:last-child {
|
|
border-right: 1px solid transparent;
|
|
}
|
|
|
|
h2 button {
|
|
display: none;
|
|
}
|
|
h2:hover button {
|
|
display: inline-flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Custom icons
|
|
*/
|
|
.icon-deck {
|
|
background-image: url('../img/deck-dark.svg');
|
|
}
|
|
|
|
.icon-group {
|
|
background-image: url('../../../settings/img/users.svg');
|
|
}
|
|
|
|
.icon-help {
|
|
background-image: url('../../../settings/img/help.svg');
|
|
}
|
|
|
|
.icon-add-white {
|
|
background-image: url('../img/add-white.svg');
|
|
}
|
|
|
|
.icon-archive {
|
|
background-image: url('../img/archive.svg');
|
|
}
|
|
|
|
.icon-archive-white {
|
|
background-image: url('../img/archive-white.svg');
|
|
}
|
|
|
|
.icon-details {
|
|
background-image: url('../img/details.svg');
|
|
}
|
|
|
|
.icon-details-white {
|
|
background-image: url('../img/details-white.svg');
|
|
}
|
|
|
|
.icon-home {
|
|
background-image: url('../../../core/img/places/home.svg');
|
|
}
|
|
|
|
.icon-badge {
|
|
background-image: url('../../../core/img/places/calendar-dark.svg');
|
|
}
|
|
|
|
/**
|
|
* Hotfix for https://github.com/angular-ui/ui-select/issues/1652
|
|
*/
|
|
.ui-select-dropdown.select2-drop-active {
|
|
opacity: 1 !important;
|
|
}
|