-
Notifications
You must be signed in to change notification settings - Fork 1
/
VikunjaStylized.css
142 lines (119 loc) · 3.74 KB
/
VikunjaStylized.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
/*
VIKUNJA OVERRIDE STYLES
VikunjaStylized.css - version 1.0 - 2021-03-20
https://github.com/bmscmoreira/VikunjaStyles
released under GPLv3
1. INTRO
Vikunja (https://vikunja.io/) is an open-source, self-hosted, cross-platform, to-do list application licenced under GPLv3, developed by The Vikuja Authors (so they say!)
The Vikunja Authors are having a lot of effort making this application feature-rich so styling issues are obviously less important at this time.
I find Vikunja incredibly useful already but my eyes demand a dark mode and my huge lists demand a more compact layout – that's why I made stylesheet to accomplished it.
CAUTION: this is an UNOFICIAL mod, not related with Vikunja Authors: this means it may break sometimes, altought I'll try to make it always compatible with the more recent versions of Vikunja.
NOTE: this is a WIP: may have bugs, please report them.
2. USAGE
Simply overlay this CSS file over the rendered app. This can be done with a lot of browser extensions (look for 'css inject', 'css override', etc).
I have separated the styles in three files which can be used together or independently to achive different Vikunja looks (eg. you prefer a light theme but want more items on the screen? Just overaly the 'compact' rules). The three files are:
'VikunjaDark.css' - overlaying this will bring dark colors to Vikunja (good for the eyes);
'VikunjaCompact.css' - overlaying this will make the interface more compact (good for people with LOTS of tasks);
'VikunjaStylized.css' - overlaying this will make opinionated changes like removing shadows and borders or changing alignments (good for clean-style-freaks like me);
ENJOY! And a big THANK YOU to Vikunja Authors for this wonderful piece of software.
*/
/* VARIABLES */
:root {
--white: #FFF;
--heavy-gray: #222;
--medium-gray: #333;
--red: #ff4136;
--orange: #ff851b;
}
/* GLOBAL */
/* fullscreen width */
.is-max-width-desktop {
max-width:100%;
}
/* mega special effects killer */
* {
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* priority labels */
.high-priority {
color: #FFF !important;
font-weight: 800;
background: var(--red) !important;
font-size: 0.8em;
padding-right: 10px;
}
.high-priority.not-so-high {
color: #FFF !important;
font-weight: 800;
background: var(--orange) !important;
font-size: 0.8em;
padding-right: 10px;
}
/* labels height */
.kanban .bucket .tasks .task .footer .priority-label {
height: 1.5rem;
}
/* OVERVIEW */
/* welcome message alignment */
.is-menu-enabled.home .content.has-text-centered h2 {
text-align: left;
font-weight: 800 !important;
margin-top: 15px;
}
/* UPCOMING */
/* today/next week/next month buttons alignment */
.show-tasks div.mb-4 {
text-align: left;
}
/* tasks list */
.tasks .task {
padding-left:0;
margin:0;
font-weight: 600;
font-size: 14px;
}
/* max width tasks */
.is-max-width-desktop .tasks .task {
max-width:100%;
}
/* SIDEBAR */
/* main section */
.app-container .namespace-container .menu .menu-list li > a {
font-weight: 700;
}
/* sidebar menu labels */
.app-container .namespace-container .menu .namespace-title .menu-label {
font-weight:800;
}
/* NAVBAR */
/* switch view selector alignment */
.switch-view {
padding-left:0;
}
/* LIST VIEW */
/* task add */
.task-add {
padding:0;
}
/* TABLE VIEW */
/* table borders */
.table td, .table th {
border: 1px solid var(--medium-gray) !important;
}
/* GANTT VIEW */
.gantt-options {
background: var(--medium-gray);
}
.gantt-options .range-picker .field select {
height:32px;
}
/* FOOTER */
/* powered by vikunja */
.menu-bottom-link {
position: absolute;
bottom:0;
color: #FFF !important;
font-weight: 800;
}