Skip to content

Commit 065b190

Browse files
tessustessus
committed
Sync button improvements
1 parent 5ffc046 commit 065b190

File tree

2 files changed

+209
-0
lines changed

2 files changed

+209
-0
lines changed

‎Dark/userchrome.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,3 +174,22 @@ input {
174174
font-size: unset !important;
175175
}
176176
/*---------------------------------------------------------------------------*/
177+
178+
/*------ Sync button --------------------------------------------------------*/
179+
/* Add button background, add rounded corners */
180+
div.side-bar > div > button {
181+
background-color: #25282E !important;
182+
border-radius: 16px !important;
183+
}
184+
185+
/* Outline colour change on hover */
186+
div.side-bar > div > button:hover {
187+
border: 1px solid #3B74DF !important;
188+
border-radius: 16px !important;
189+
}
190+
191+
/* Prevent button text color changing on hover */
192+
div.side-bar > div > button > span {
193+
color: #FFFFFF !important;
194+
}
195+
/*---------------------------------------------------------------------------*/

‎Dark/userchrome.css.save‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
/*****************************************************************************
2+
* Styling for Dark Theme *
3+
* *
4+
* For styling the entire Joplin app (except the rendered Markdown, *
5+
* which is defined in `userstyle.css`) *
6+
*****************************************************************************/
7+
8+
:root {
9+
--editor-heading-color: cyan;
10+
--editor-heading-font-weight: bold; /* not used */
11+
--editor-heading-font-size: 1.1em; /* not used */
12+
--editor-code-color: greenyellow;
13+
--editor-text-in-brackets-color: #f9ee98; /* yellowish */
14+
--editor-text-in-parens-color: #dddddd; /* lightgrey */
15+
--editor-strong-color: salmon;
16+
--editor-emphasis-color: salmon;
17+
--editor-emphasis-font-style: italic;
18+
--editor-list-element-color: deepskyblue;
19+
--editor-checkbox-color: lightgrey;
20+
--editor-checkbox-checked-color: #FFCB6B; /* orange */
21+
--editor-selected-text-bgcolor: #0663d3; /* blue */
22+
}
23+
/* not used: to take effect the proper section must be uncommented */
24+
25+
/*------ Editor: Headings ---------------------------------------------------*/
26+
.ace_heading {
27+
color: var(--editor-heading-color) !important;
28+
/* font-weight: var(--editor-heading-font-weight); */
29+
/* font-size: var(--editor-heading-font-size); */
30+
}
31+
.cm-header {
32+
color: var(--editor-heading-color) !important;
33+
}
34+
/*---------------------------------------------------------------------------*/
35+
36+
/*------ Editor: inline code and codeblocks ---------------------------------*/
37+
.ace_support.ace_function {
38+
color: var(--editor-code-color) !important;
39+
}
40+
pre.CodeMirror-line span[role="presentation"] span.cm-comment {
41+
color: var(--editor-code-color) !important;
42+
}
43+
/*---------------------------------------------------------------------------*/
44+
45+
/*------ Editor: text in brackets [ ] ---------------------------------------*/
46+
.ace_string {
47+
color: var(--editor-text-in-brackets-color) !important;
48+
}
49+
.cm-link-text {
50+
color: var(--editor-text-in-brackets-color) !important;
51+
}
52+
/*---------------------------------------------------------------------------*/
53+
54+
/*------ Editor: text/link in parens ( ) ------------ ----------------------*/
55+
.cm-string.cm-url {
56+
color: var(--editor-text-in-parens-color) !important;
57+
}
58+
/*---------------------------------------------------------------------------*/
59+
60+
/*------ Editor: strong -----------------------------------------------------*/
61+
.ace_string.ace_strong {
62+
color: var(--editor-strong-color) !important;
63+
}
64+
.cm-strong {
65+
color: var(--editor-strong-color) !important;
66+
}
67+
/*---------------------------------------------------------------------------*/
68+
69+
/*------ Editor: italics ----------------------------------------------------*/
70+
.ace_string.ace_emphasis {
71+
color: var(--editor-emphasis-color) !important;
72+
font-style: var(--editor-emphasis-font-style);
73+
}
74+
.cm-em {
75+
color: var(--editor-emphasis-color) !important;
76+
}
77+
/*---------------------------------------------------------------------------*/
78+
79+
/*------ Editor: list elements and checkbox elements ------------------------*/
80+
.ace_list {
81+
color: var(--editor-list-element-color) !important;
82+
}
83+
.cm-variable-2, .cm-variable-3, .cm-keyword {
84+
color: var(--editor-list-element-color) !important;
85+
}
86+
/*---------------------------------------------------------------------------*/
87+
88+
/*------ Editor: checkbox [ ] and [x] ---------------------------------------*/
89+
.ace_variable {
90+
color: var(--editor-checkbox-color) !important;
91+
}
92+
.cm-meta {
93+
color: var(--editor-checkbox-checked-color) !important;
94+
}
95+
.cm-property {
96+
color: var(--editor-checkbox-checked-color) !important;
97+
}
98+
/*---------------------------------------------------------------------------*/
99+
100+
/*------ Editor: selected text background color -----------------------------*/
101+
.CodeMirror-selected {
102+
background: var(--editor-selected-text-bgcolor) !important;
103+
}
104+
/*---------------------------------------------------------------------------*/
105+
106+
/*------ Notebook and note list panes: Dim items ----------------------------*/
107+
/*
108+
a.list-item {
109+
color: #A3A79F !important;
110+
}
111+
112+
.fa.fa-plus-square, .fa.fa-minus-square {
113+
color: #575856 !important;
114+
}
115+
116+
.note-list input[type="checkbox"i] {
117+
opacity: .5;
118+
}
119+
*/
120+
/*---------------------------------------------------------------------------*/
121+
122+
/*------ Notebook pane: use lines for notebook tree -------------------------*/
123+
/*
124+
.folders i.fa.fa-minus-square, .folders i.fa.fa-plus-square {
125+
padding-right: 3px !important;
126+
}
127+
128+
.folders .list-item-container {
129+
margin: 0 !important;
130+
}
131+
132+
.folders a.list-item {
133+
border-left: 1px solid #575856 !important;
134+
padding-left: 9px;
135+
margin: 0 !important;
136+
}
137+
*/
138+
/*---------------------------------------------------------------------------*/
139+
140+
/*------ Remove Code View button --------------------------------------------*/
141+
/*
142+
a.button[title="Code View"] {
143+
display: none !important;
144+
}
145+
*/
146+
/*
147+
div.editor-toolbar div button {
148+
display: none !important;
149+
}
150+
*/
151+
/*---------------------------------------------------------------------------*/
152+
153+
/*------ Input fields: Search (global, local), Note Title -------------------*/
154+
/* .header input { */
155+
input {
156+
border-radius: 14px !important;
157+
border: 1px solid rgb(85, 85, 85);
158+
outline: none;
159+
/*
160+
background-color: #888888 !important;
161+
*/
162+
}
163+
/*---------------------------------------------------------------------------*/
164+
165+
/*------ Attachment pane: make first 2 columns easier to read ---------------*/
166+
#react-root > div > div > div:nth-child(2) > div:nth-child(2) > table > tbody > tr > td.titleCell,
167+
#react-root > div > div > div:nth-child(2) > div:nth-child(2) > table > tbody > tr > td:nth-child(2) {
168+
font-size: unset !important;
169+
}
170+
/*---------------------------------------------------------------------------*/
171+
172+
/* Sync button */
173+
/* Add button background */
174+
#react-root > div > div > div.resizableLayoutItem.rli-root > div.resizableLayoutItem.rli-sidebarColumn > div > div > div:nth-child(2) > button {
175+
background-color: #25282E !important;
176+
border-radius: 16px !important;
177+
width: 85% !important;
178+
margin-left: 7.5% !important;
179+
}
180+
181+
/* Outline on hover */
182+
#react-root > div > div > div.resizableLayoutItem.rli-root > div.resizableLayoutItem.rli-sidebarColumn > div > div > div:nth-child(2) > button:hover {
183+
border: 1px solid #0097DB !important;
184+
border-radius: 16px !important;
185+
}
186+
187+
/* Prevent text color changing on hover */
188+
#react-root > div > div > div.resizableLayoutItem.rli-root > div.resizableLayoutItem.rli-sidebarColumn > div > div > div:nth-child(2) > button > span {
189+
color: #FFFFFF !important;
190+
}

0 commit comments

Comments
 (0)