mirror of
https://github.com/wekan/wekan.git
synced 2025-12-16 15:30:13 +01:00
Updated Custom CSS themes (markdown)
parent
65756e727e
commit
3f8c4bd3f9
1 changed files with 91 additions and 3 deletions
|
|
@ -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)
|
[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
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
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).
|
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; }
|
.sidebar-content h3, .sidebar-content .activity-desc { color:rgba(255,255,255,.7) !important; }
|
||||||
```
|
```
|
||||||
|
|
||||||
If anyone improves on this, please share here.
|
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.
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
**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)
|
||||||
|
})()
|
||||||
|
|
||||||
|
```
|
||||||
Loading…
Add table
Add a link
Reference in a new issue