diff options
Diffstat (limited to 'SI/.obsidian/snippets/notion-cards.css')
| -rw-r--r-- | SI/.obsidian/snippets/notion-cards.css | 182 |
1 files changed, 182 insertions, 0 deletions
diff --git a/SI/.obsidian/snippets/notion-cards.css b/SI/.obsidian/snippets/notion-cards.css new file mode 100644 index 0000000..d16de11 --- /dev/null +++ b/SI/.obsidian/snippets/notion-cards.css @@ -0,0 +1,182 @@ +/* AGPLv3 License +Notion-Styled Kanban +Author: AnubisNekhet +Note: If you decide to implement it in your theme or redistribute it, please keep this comment (Especially for *certain* individuals who may try to rebrand it as their own :)) +Support me: https://buymeacoffee.com/AnubisNekhet +*/ +body.theme-light { + --notion-kanban-card: var(--background-primary); + --notion-kanban-card-hover: var(--background-primary-alt); + --notion-kanban-darken: var(--background-primary); + --notion-kanban-darken-hover: var(--background-primary-alt); +} + +body.theme-dark { + --notion-kanban-card: var(--color-base-30); + --notion-kanban-card-hover: var(--color-base-35); + --notion-kanban-darken: rgba(var(--ctp-crust, 0, 0, 0), 0.3); + --notion-kanban-darken-hover: rgba(var(--ctp-crust, 0, 0, 0), 0.2); +} + +body { + --kanban-transition: 100ms ease-out 0s; +} +body .kanban-plugin__lane { + background-color: transparent; + border: none; + border-radius: 0; +} +body .kanban-plugin__lane .kanban-plugin__lane-header-wrapper { + border-bottom: none; +} +body .kanban-plugin__lane .kanban-plugin__lane-header-wrapper .kanban-plugin__lane-grip { + color: var(--text-muted); +} +body .kanban-plugin__lane .kanban-plugin__lane-header-wrapper .kanban-plugin__lane-grip:hover { + color: var(--text-normal); + background-color: var(--background-modifier-hover); + border-radius: var(--radius-s); +} +body .kanban-plugin__lane .kanban-plugin__lane-header-wrapper .kanban-plugin__lane-title { + flex-grow: 0; + width: auto; +} +body .kanban-plugin__lane .kanban-plugin__lane-header-wrapper .kanban-plugin__lane-title .kanban-plugin__lane-title-text { + flex-grow: 0; +} +body .kanban-plugin__lane .kanban-plugin__lane-header-wrapper .kanban-plugin__lane-settings-button-wrapper { + opacity: 0; + transition: opacity var(--kanban-transition); +} +body .kanban-plugin__lane .kanban-plugin__lane-header-wrapper .kanban-plugin__lane-settings-button-wrapper .kanban-plugin__lane-settings-button .kanban-plugin__icon { + rotate: 90deg; +} +body .kanban-plugin__lane:has(.kanban-plugin__placeholder:only-child):not(:has(.kanban-plugin__item)) .kanban-plugin__item-button-wrapper { + padding: 0; +} +body .kanban-plugin__lane:has(.kanban-plugin__placeholder:only-child):not(:has(.kanban-plugin__item)) .kanban-plugin__item-button-wrapper .kanban-plugin__new-item-button { + padding: 0 10px; +} +body .kanban-plugin__lane .kanban-plugin__lane-items.kanban-plugin__scroll-container.kanban-plugin__vertical { + background-color: transparent; +} +body .kanban-plugin__lane .kanban-plugin__lane-items .kanban-plugin__placeholder { + border: none; + height: 5px; + margin-bottom: 0; + margin-top: 0; +} +body .kanban-plugin__lane .kanban-plugin__lane-items .kanban-plugin__item-wrapper .kanban-plugin__item { + border: none; + box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px; + transition: background var(--kanban-transition) !important; +} +body .kanban-plugin__lane .kanban-plugin__lane-items .kanban-plugin__item-wrapper .kanban-plugin__item.is-complete .kanban-plugin__item-markdown { + text-decoration: line-through; + color: var(--text-faint); +} +body .kanban-plugin__lane .kanban-plugin__lane-items .kanban-plugin__item-wrapper .kanban-plugin__item .kanban-plugin__item-content-wrapper { + background: var(--notion-kanban-card); + transition: background var(--kanban-transition) !important; +} +body .kanban-plugin__lane .kanban-plugin__lane-items .kanban-plugin__item-wrapper .kanban-plugin__item .kanban-plugin__item-content-wrapper .kanban-plugin__item-title-wrapper { + background: var(--notion-kanban-darken); + transition: background var(--kanban-transition) !important; +} +body .kanban-plugin__lane .kanban-plugin__lane-items .kanban-plugin__item-wrapper .kanban-plugin__item .kanban-plugin__item-content-wrapper .kanban-plugin__item-title-wrapper .kanban-plugin__item-prefix-button-wrapper { + margin-right: 6px; + box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px; + border-radius: 3px; + background: var(--notion-kanban-card); + transition: background var(--kanban-transition) !important; +} +body .kanban-plugin__lane .kanban-plugin__lane-items .kanban-plugin__item-wrapper .kanban-plugin__item .kanban-plugin__item-content-wrapper .kanban-plugin__item-title-wrapper .kanban-plugin__item-prefix-button-wrapper:hover { + transition: background var(--kanban-transition) !important; + background: var(--notion-kanban-card-hover); +} +body .kanban-plugin__lane .kanban-plugin__lane-items .kanban-plugin__item-wrapper .kanban-plugin__item .kanban-plugin__item-content-wrapper .kanban-plugin__item-title-wrapper .kanban-plugin__item-prefix-button-wrapper:hover .kanban-plugin__item-prefix-button { + background-color: transparent; +} +body .kanban-plugin__lane .kanban-plugin__lane-items .kanban-plugin__item-wrapper .kanban-plugin__item .kanban-plugin__item-content-wrapper .kanban-plugin__item-title-wrapper .kanban-plugin__item-prefix-button-wrapper .kanban-plugin__item-prefix-button { + left: 0; + background-color: var(--background-primary); + padding: var(--size-2-3); +} +body .kanban-plugin__lane .kanban-plugin__lane-items .kanban-plugin__item-wrapper .kanban-plugin__item .kanban-plugin__item-content-wrapper .kanban-plugin__item-postfix-button-wrapper { + box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px; + border-radius: 3px; + background-color: var(--notion-kanban-card); + opacity: 0; + transition: opacity var(--kanban-transition), background-color var(--kanban-transition); +} +body .kanban-plugin__lane .kanban-plugin__lane-items .kanban-plugin__item-wrapper .kanban-plugin__item .kanban-plugin__item-content-wrapper .kanban-plugin__item-postfix-button-wrapper:hover { + background-color: var(--notion-kanban-card-hover); + transition: background-color var(--kanban-transition); +} +body .kanban-plugin__lane .kanban-plugin__lane-items .kanban-plugin__item-wrapper .kanban-plugin__item .kanban-plugin__item-content-wrapper .kanban-plugin__item-postfix-button-wrapper:hover .kanban-plugin__item-postfix-button { + background-color: transparent; +} +body .kanban-plugin__lane .kanban-plugin__lane-items .kanban-plugin__item-wrapper .kanban-plugin__item .kanban-plugin__item-content-wrapper .kanban-plugin__item-postfix-button-wrapper .kanban-plugin__item-postfix-button { + right: 0; + padding: var(--size-2-3); + background-color: var(--background-primary); +} +body .kanban-plugin__lane .kanban-plugin__lane-items .kanban-plugin__item-wrapper .kanban-plugin__item .kanban-plugin__item-content-wrapper .kanban-plugin__item-postfix-button-wrapper .kanban-plugin__item-postfix-button .kanban-plugin__icon { + rotate: 90deg; +} +body .kanban-plugin__lane .kanban-plugin__lane-items .kanban-plugin__item-wrapper .kanban-plugin__item:hover { + transition: background var(--kanban-transition) !important; +} +body .kanban-plugin__lane .kanban-plugin__lane-items .kanban-plugin__item-wrapper .kanban-plugin__item:hover .kanban-plugin__item-content-wrapper { + transition: background var(--kanban-transition) !important; + background-color: var(--notion-kanban-card-hover); +} +body .kanban-plugin__lane .kanban-plugin__lane-items .kanban-plugin__item-wrapper .kanban-plugin__item:hover .kanban-plugin__item-content-wrapper .kanban-plugin__item-title-wrapper { + transition: background var(--kanban-transition) !important; + background-color: var(--notion-kanban-darken-hover); +} +body .kanban-plugin__lane .kanban-plugin__lane-items .kanban-plugin__item-wrapper .kanban-plugin__item:hover .kanban-plugin__item-content-wrapper .kanban-plugin__item-postfix-button-wrapper { + opacity: 1; + transition: opacity var(--kanban-transition), background-color var(--kanban-transition); +} +body .kanban-plugin__lane .kanban-plugin__item-button-wrapper { + border-top: none; + padding: 0; +} +body .kanban-plugin__lane .kanban-plugin__item-button-wrapper .kanban-plugin__new-item-button { + justify-content: flex-start; + color: transparent; + box-shadow: none; + border: none; + background: transparent; +} +body .kanban-plugin__lane .kanban-plugin__item-button-wrapper .kanban-plugin__new-item-button:hover { + background: var(--background-modifier-hover); +} +body .kanban-plugin__lane .kanban-plugin__item-button-wrapper .kanban-plugin__new-item-button:hover .kanban-plugin__item-button-plus { + color: var(--text-normal); +} +body .kanban-plugin__lane .kanban-plugin__item-button-wrapper .kanban-plugin__new-item-button .kanban-plugin__item-button-plus { + color: var(--text-muted); +} +body .kanban-plugin__lane .kanban-plugin__item-button-wrapper .kanban-plugin__new-item-button .kanban-plugin__item-button-plus::after { + content: " New"; +} +body .kanban-plugin__lane .kanban-plugin__item-form { + border-top: none; +} +body .kanban-plugin__lane:hover .kanban-plugin__lane-header-wrapper .kanban-plugin__lane-grip { + opacity: 1; + transition: opacity var(--kanban-transition); +} +body .kanban-plugin__lane:hover .kanban-plugin__lane-header-wrapper .kanban-plugin__lane-settings-button-wrapper { + opacity: 1; + transition: opacity var(--kanban-transition); +} +body .kanban-plugin__drag-container .kanban-plugin__item-wrapper .kanban-plugin__item { + border: none; + box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px; +} +body .kanban-plugin__item-input { + background-color: transparent; +} |