Skip to content

Wekan ModernDarkUpgrade by hradec

Screenshot of Wekan ModernDarkUpgrade

Details

Authorhradec

LicenseNo License

Categorywekan, userstyles

Created

Updated

Size4.6 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

A more modern and interesting css dark setup for wekan. Overrides ModernDark color setting for a board.

Notes

wekan

Source code

/* ==UserStyle==
@name         WekanModernDarkUpgrade
@description  🎨wekan modern dark upgrade
@namespace    https://userstyles.world/style/311/wekan-moderndarkupgrade
@homepageURL  https://userstyles.world/style/311/wekan-moderndarkupgrade
@supportURL   https://userstyles.world/style/311/wekan-moderndarkupgrade
@author       hradec <me@hradec.com> (https://github.com/hradec)
@version      1.0.5
@license      CC-BY-4.0
@preprocessor stylus

@var range    col_size     'Set column size'  [265, 0, 500, 1, 'px']


==/UserStyle== */

@-moz-document regexp('https?://(.*)/b/(.*)?') {

.body{
    font-family: Poppins;
}
.minicard .minicard-title .viewer {
    display: block;
    word-wrap: break-word;
    max-width: col_size;
}
.board-color-moderndark .minicard {
    background-color: #2f2f36;
    color: #ccc;
    border-radius: 15px;
    font-size: .9em;
    padding: 10px;
    box-shadow: 1px 4px 7px 0px rgb(0 0 0 / 42%);
    border: 0px solid #666;
}
.board-color-moderndark .minicard:hover {
    background-color: #58acff85!important;
    border-left: 0px solid #2a2a2a;
    box-shadow: 1px 4px 12px 6px rgba(0, 153, 255, .57)!important;
    color: #a0c6fa;
}
.board-color-moderndark .is-selected .minicard {
    background-color: #58acff85;
    border-left: 0px solid #2a2a2a;
    box-shadow: 1px 4px 10px 2px rgba(0, 153, 255, .57);
}
.board-color-moderndark .card-details {
    position: inherit;
    background-color: #1b1b22;
    color: #727171;
    /*box-shadow: 0 4px 6px 11px rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);*/
    box-shadow: 1px 4px 10px 6px rgba(0, 153, 255, .57);
    border: 0px solid #111;
}
.board-color-moderndark .card-details .card-details-header {
    background: #394359;
    color: #ccc;
    border: 0px solid #2d2d2d;
}
.board-color-moderndark .card-details .card-details-item-title {
    color: #bec3dd;
}

.board-color-moderndark .swimlane .list {
    background: #202226;
    border-radius: 0;
    border: 0 solid #666;
    -o-box-flex: 0;
    -ms-flex: 0 0 col_size;
    flex: 0 0 col_size;
}
.board-color-moderndark .swimlane .list:nth-child(2n) {
    background: #232528e3;
}
.board-color-moderndark .list-header {
    background: #2b2e3a;
    padding-top: 8px;
    padding-bottom: 2px;
    border-bottom: 0px solid #333;
    box-shadow: 1px 4px 7px 0px rgb(0 0 0 / 42%);
}
.board-color-moderndark .swimlane {
    FONT-WEIGHT: 100;
    background: #18181f;
    line-height: 18px;
    max-height: 100%;
    font-family: Poppins;

}
.board-color-moderndark#header-quick-access ul li.current a {
    border-radius: 2px;
    background: #1b1b22;
}
.board-color-moderndark .board-canvas {
    background: #1b1b22;
    padding: 0px 0px 0;
}
.board-color-moderndark #header, .board-color-moderndark#header-quick-access, .board-color-moderndark .background-box {
    background-color: #1b1b22;
}
.board-color-moderndark#header #header-main-bar {
    background-color: #212129;
    height: 30px;
    padding-top: 3px;
    padding-bottom: 3px;
}
.list:first-child {
    margin-left: 0px;
}
.list-body {
    padding: 11px 11px;
}
card-label {
    color: #ffffff;
}
.pop-over.board-color-moderndark {
    background-color: #282e3c;
    color: #ccc;
    border: 1px solid #111;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}
.pop-over.board-color-moderndark .header {
    background-color: #337ab740;
    border-bottom: 0px solid #dcdcdc;
}
.sidebar .sidebar-content {
    padding: 12px;
    margin-bottom: 1.6em;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #101c2696;
}
.board-color-moderndark .sidebar .sidebar-shadow {
    background-color: #222;
    box-shadow: -10px 0 15px -10px #098dffcf;
    border-left: 0px solid #333;
    color: #ccc;
}
thead {
    background: #fff;
    background: linear-gradient(
180deg
        ,#99a6c7 0,#5b7492);
    color: #000;
}
table td, table th {
    border: 1px solid #252931;
    text-align: left;
    padding: 8px;
}

tbody {
    background-color: #2f313f;
    color: #6f8899;
}
table tr:nth-child(2n) {
    background-color: #292b36;
}
blockquote {
    margin: 8px 0 8px 8px;
    border-left: 1px solid #3eafff;
    color: #6f8899;
    padding: 0 0 0 8px;
}
.viewer a:hover {
    color: #a0c6fa;
}

/* width */
::-webkit-scrollbar {
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f100;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #cacaca;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #c5c5c5;
}

}

Reviews

No reviews yet.