From 551d399649a0be390c5af091eecc3f81586e9cd9 Mon Sep 17 00:00:00 2001 From: Vladimir Kidyaev Date: Sat, 12 Nov 2022 18:42:00 +0700 Subject: [PATCH] fix: add styles for new version of Kanban plugin --- theme.css | 177 ++++++++++++++++++++++++++++++++---------------------- 1 file changed, 106 insertions(+), 71 deletions(-) diff --git a/theme.css b/theme.css index 97763f7..19c1eb6 100644 --- a/theme.css +++ b/theme.css @@ -138,24 +138,12 @@ settings: description: All cards will have the same initial height type: class-toggle default: on - - - id: kanban-center-content - title: Сenter content in cards - description: For work with min-height cards - type: class-toggle - default: on - id: kanban-full-height-column title: Full height lists description: type: class-toggle default: on - - - id: kanban-metatdate-one-line - title: One line metadata - description: Date and tags on one line in a card. Don't work well with a large number of tags - type: class-toggle - default: off */ body { /* Animations */ @@ -862,13 +850,6 @@ body.kanban-metatdate-one-line .kanban-plugin__item-metadata { justify-content: space-between; } -/* Kanban-center-content */ -body.kanban-center-content .kanban-plugin__item-title { - display: flex; - flex-direction: column; - justify-content: center; -} - /* Kanban-full-height-column */ body.kanban-full-height-column button.kanban-plugin__new-item-button { align-self: flex-end; @@ -939,16 +920,19 @@ body.kanban-on .kanban-plugin__item-prefix-button-wrapper input[type=checkbox] { } /* Kanban-Full */ -body.kanban-full .kanban-plugin__markdown-preview-view>div>* { - overflow-x: unset; -} +/* Main color */ body.kanban-full .kanban-plugin { background-color: var(--kanban-background); } -body.kanban-full .kanban-plugin__lane-items>div { - margin-bottom: 8px; - margin-top: 0; + +/* LANE */ +/* Colors */ +body.kanban-full .kanban-plugin__lane { + background-color: var(--kanban-lane-background); + border: 1px solid var(--kanban-lane-border); } + +/* Grip icon hiding */ body.kanban-full .kanban-plugin__lane-grip { position: absolute; opacity: 0; @@ -956,87 +940,138 @@ body.kanban-full .kanban-plugin__lane-grip { height: 3em; z-index: 0; margin: 0; -} -body.kanban-full .kanban-plugin__lane-grip { cursor: default; } body.kanban-full .kanban-plugin__lane-header-wrapper div { z-index: 1; } -body.kanban-full .kanban-plugin__lane-header-wrapper, -body.kanban-full .kanban-plugin__item-button-wrapper, -body.kanban-full .kanban-plugin__item-form { - border: none; + +/* Header */ +body.kanban-full .kanban-plugin__lane-header-wrapper { + padding-left: 14px; } -body.kanban-full .kanban-plugin__lane { - background-color: var(--kanban-lane-background); - border: 1px solid var(--kanban-lane-border); +body.kanban-full .kanban-plugin__markdown-preview-view { + font-size: inherit; } + +/* Header + Counter */ body.kanban-full .kanban-plugin__lane-title { flex-grow: 0; width: fit-content; font-size: 1em; } -body.kanban-full .kanban-plugin__markdown-preview-view { - font-size: inherit; -} -body.kanban-full .kanban-plugin__item-content-wrapper, -body.kanban-full .kanban-plugin__item-title-wrapper, -body.kanban-full .kanban-plugin__item-metadata-wrapper:not(:empty) { - background: var(--kanban-item-background); -} -body.kanban-full .kanban-plugin__item-title-wrapper { - padding: 6px 12px 8px; -} -body.kanban-full .kanban-plugin__icon>svg { - transform: rotate(90deg); -} -body.kanban-full .kanban-plugin__lane-settings-button-wrapper { - margin-left: auto; -} + +/* Counter */ body.kanban-full div.kanban-plugin__lane-title-count { background-color: var(--kanban-lane-count); border-radius: 1em; padding: 2px 5px; } -body.kanban-full .kanban-plugin__item button.kanban-plugin__item-prefix-button, -body.kanban-full .kanban-plugin__item button.kanban-plugin__item-postfix-button, -body.kanban-full .kanban-plugin__lane button.kanban-plugin__lane-settings-button { - padding: 0 5px; - height: 24px; - box-shadow: none; - font-size: 21px; + +/* Three dot position */ +body.kanban-full .kanban-plugin__lane-settings-button-wrapper { + margin-left: auto; } -body.kanban-full .kanban-plugin__item button.kanban-plugin__item-prefix-button:hover, -body.kanban-full .kanban-plugin__item button.kanban-plugin__item-postfix-button:hover, -body.kanban-full .kanban-plugin__lane button.kanban-plugin__lane-settings-button:hover { - background-color: var(--kanban-options-btn); - cursor: pointer; + +/* Cards padding */ +body.kanban-full .kanban-plugin__lane-items { + padding: 2px 6px; } -body.kanban-full button.kanban-plugin__new-item-button { + +/* ITEM */ +/* Colors */ +body.kanban-full .kanban-plugin__item-content-wrapper, +body.kanban-full .kanban-plugin__item-title-wrapper, +body.kanban-full .kanban-plugin__item-metadata-wrapper:not(:empty) { + background: var(--kanban-item-background); +} +body.kanban-full .kanban-plugin__item { + border-color: var(--kanban-lane-border); +} + +/* Between items */ +body.kanban-full .kanban-plugin__lane-items>div { + margin-bottom: 8px; + margin-top: 0; +} + +/* Borders */ +body.kanban-full .kanban-plugin__lane-header-wrapper, +body.kanban-full .kanban-plugin__item-button-wrapper, +body.kanban-full .kanban-plugin__item-form { + border: none; +} + +/* Content */ +body.kanban-full .kanban-plugin__item-title-wrapper { + padding: 12px 12px 12px 0; +} +body.kanban-full .kanban-plugin__item-title, +body.kanban-full .kanban-plugin__item-input-wrapper { + padding-left: 12px; +} + +/* Archive/checkbox */ +body.kanban-full .kanban-plugin__item-prefix-button-wrapper { + align-self: center; + margin-left: 5px; +} + +/* Time Date Buttons */ +body.kanban-full .kanban-plugin__item-metadata .is-button:hover { + cursor: var(--cursor-link); + color: var(--text-normal); +} + +/* THREE DOT BUTTON */ +/* Rotation */ +body.kanban-full .kanban-plugin__icon>svg { + transform: rotate(90deg); +} + +/* Size */ +body.kanban-full .kanban-plugin__icon { + font-size: 1.4em; +} + +/* Item */ +body.kanban-full .kanban-plugin__item-postfix-button.clickable-icon { + opacity: 0; +} +body.kanban-full .kanban-plugin__item:hover .kanban-plugin__item-postfix-button.clickable-icon { + opacity: 1; +} + +/* ADD A CARD BUTTON */ +/* Position */ +body.kanban-full .kanban-plugin__new-item-button { border: none; justify-content: flex-start; box-shadow: none; padding-left: 0; } + +/* + Size */ body.kanban-full .kanban-plugin__item-button-plus { margin-right: 8px; font-size: 1.9em; height: inherit; } + +/* Hover */ body.kanban-full .kanban-plugin__new-item-button:hover { background-color: inherit; box-shadow: none; - color: var(--text-muted);; -} -body.kanban-full .kanban-plugin__item { - border-color: var(--kanban-lane-border); -} -body.kanban-full .kanban-plugin__lane-items { - padding: 2px 6px; + color: var(--text-muted); } + +/* FIXIES */ body.kanban-full .kanban-plugin__item-prefix-button-wrapper input[type=checkbox] { filter: none; + margin: 3px; +} +body.kanban-full .kanban-plugin__markdown-preview-view>div>* { + overflow-x: unset; } /* fix: input borders */