diff --git a/Custom-CSS-themes.md b/Custom-CSS-themes.md index 04305e5..46b30a8 100644 --- a/Custom-CSS-themes.md +++ b/Custom-CSS-themes.md @@ -2,9 +2,15 @@ There will be upcoming Custom CSS feature with input box and Save button in Admi [Policy about Wekan UI changes](https://github.com/wekan/wekan/wiki/FAQ#policy-about-wekan-ui-changes) -## Dark mode +Contents: +- Dark theme +- White theme -[by @lonix1, info and screenshot](https://github.com/wekan/wekan/issues/1149) +## Dark theme + +[by @lonix1](https://github.com/wekan/wekan/issues/1149), could look a little like screenshot beloe + +![dark wekan](https://user-images.githubusercontent.com/11541071/28684178-574c0852-72fb-11e7-9c39-d11281863c3a.png) lonix1 created some css overrides with Stylish. It's not complete but I'm happy with it. I work in swimlanes mode, so that is what I changed (not list mode or calendar mode). @@ -91,4 +97,86 @@ Other: .sidebar-content h3, .sidebar-content .activity-desc { color:rgba(255,255,255,.7) !important; } ``` -If anyone improves on this, please share here. \ No newline at end of file +If anyone improves on this, please share here. + +## White theme + +[pravdomil](https://github.com/wekan/wekan/issues/1690) has created small script for tampermonkey to redesign wekan board. + +![image](https://user-images.githubusercontent.com/2387356/41285077-7c5b1c64-6e3b-11e8-91b9-503ffb39eb4a.png) + +**script for tampermonkey** +```js +// ==UserScript== +// @name Kanban +// @namespace https://pravdomil.com/ +// @version 0.1 +// @match https://wekan.indie.host/* +// @grant none +// ==/UserScript== + +;(function() { + const el = document.createElement("style") + // language=CSS + el.textContent = ` +/* white background */ +body { background-color: white; } + +/* header bar next to top bar */ +#header #header-main-bar { + position: absolute; + right: 70px; + left: 300px; + top: -3px; + padding: 0; + height: calc(28px + 3px); +} + +/* swimlane white background, no borders, fix ellipsis */ +.swimlane { background-color: white; } +.swimlane-header-wrap { border: 0 !important; } +.swimlane-header { text-overflow: initial !important; } + +/* column header only for first row */ +.swimlane .list-header { margin: 4px 12px 4px; } +.swimlane .list-header-name { display: none; } +div:nth-child(1 of .swimlane) .list-header { margin: 20px 12px 4px; } +div:nth-child(1 of .swimlane) .list-header-name { display: inline; } + +/* cells no borders, fix height, less padding, no add new card */ +.list { border: 0; background-color: white; flex: 300px 0 0; } +.list .list-body { height: 160px; padding: 0 2px; } +.list .open-minicard-composer { display: none; } +.list .open-list-composer { opacity: 0; transition: opacity .2s; } +.list .open-list-composer:hover { opacity: 1; } + +/* card style */ +.minicard-wrapper { margin-bottom: 2px !important; } +.minicard { box-shadow: 0 0 16px rgba(0,0,0,0.15) inset; } + +/* card style for first and last column */ +.swimlane .list:nth-child(2) .minicard { opacity: .5 !important; } +.swimlane .list:nth-last-child(2) .minicard { opacity: .1 !important; } + +/* card details always center, menu items tweaks */ +.card-details { + position: absolute; + z-index: 10000 !important; + top: 0; + bottom: 0; + left: calc(50% - 510px / 2); +} +.pop-over-list .js-labels { display: none } +.pop-over-list .js-move-card-to-top { display: none } +.pop-over-list .js-move-card-to-bottom { display: none } +.pop-over-list .js-archive { color: darkred } + +/* not needed */ +.wekan-logo, .js-member, .attachments-galery { display: none; } + +` + + document.body.appendChild(el) +})() + +``` \ No newline at end of file