Skip to content

Commit 20e79e4

Browse files
egrace479annavik
egrace479
and
annavik
committed
Pull generalization and full color fix from Collab Guide
[PR 60](Imageomics/Collaborative-distributed-science-guide#60) Implement new color scheme * Set colors to be more modular with some added instructions * Small tweaks to color scheme [PR 61](Imageomics/Collaborative-distributed-science-guide#61) * Adjust colors for admonition tip * Adjust colors for small screen navigation * Make links more distinguishable * Adjust colors for admonition info * Tweak link appearance * Apply link tweak suggestions from code review Co-authored-by: Elizabeth Campolongo <38985481+egrace479@users.noreply.github.com> * Tweak logic for admonition colors * Set colors for summary component * Add background color definition clarification from main theme, not overridden --------- Co-authored-by: Elizabeth Campolongo <38985481+egrace479@users.noreply.github.com> Co-authored-by: Anna Viklund <annamariaviklund@gmail.com>
1 parent 6755606 commit 20e79e4

1 file changed

Lines changed: 109 additions & 41 deletions

File tree

‎docs/stylesheets/extra.css‎

Lines changed: 109 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -26,25 +26,29 @@ based on this suggestion: https://github.com/squidfunk/mkdocs-material/discussio
2626
padding-bottom: .175rem;
2727
}
2828

29-
/*
30-
Define Imageomics colors for theme (light and dark) */
29+
/*
30+
Define Imageomics colors for theme
31+
*/
3132
body {
32-
--color-imageomics-green: #92991c;
33-
--color-imageomics-blue: #5d8095;
34-
--color-dark-teal: #0097b2;
35-
--color-dark-teal-10: #0097b21a; /* 10% alpha */
36-
--color-white: #FFFFFF;
37-
--color-light-green: #9bcb5e;
38-
--color-light-green-10: #9bcb5e1a; /* 10% alpha */
33+
--color-lm-primary: #5d8095; /* light mode primary color (Imageomics blue) */
34+
--color-lm-url: #0097b2; /* light mode URL + note color (dark teal) */
35+
--color-lm-url-10: #0097b21a; /* 10% alpha */
36+
--color-lm-accent: #9bcb5e; /* light mode accent color (light green) */
37+
--color-lm-accent-10: #9bcb5e1a; /* 10% alpha */
38+
--color-dm-primary: #5d8095; /* dark mode primary color (Imageomics blue) */
39+
--color-dm-url: #0097b2; /* dark mode url (dark teal, contrast ok) */
40+
--color-dm-accent: #92991c; /* dark mode accent color (Imageomics green) */
41+
--color-dm-accent-10: #92991c1a; /* 10% alpha */
3942
}
4043

4144
/* Light mode colors */
4245
[data-md-color-scheme="default"] {
43-
--md-primary-fg-color: var(--color-imageomics-blue);
44-
--md-accent-fg-color: var(--color-light-green);
46+
--md-primary-fg-color: var(--color-lm-primary);
47+
--md-accent-fg-color: var(--color-lm-accent);
48+
--md-accent-fg-color-10: var(--color-lm-accent-10);
4549
}
4650

47-
/* GitHub panel color (mobile and small screen, issue 87) */
51+
/* GitHub panel color (mobile and small screen, issue 18) */
4852
.md-nav__source {
4953
background-color: var(--md-primary-fg-color);
5054
}
@@ -53,67 +57,131 @@ body {
5357
background-color: var(--md-primary-fg-color);
5458
}
5559

56-
/* Set admonition (Note) colors to match Dark Teal used for URLs */
57-
/* border color */
58-
.md-typeset .admonition.note, .md-typeset details.note {
59-
border-color: var(--color-dark-teal);
60-
box-shadow: var(--color-dark-teal-10);
60+
/* Set colors for collapsible summary component */
61+
.md-typeset details {
62+
border-color: var(--color-lm-url);
63+
box-shadow: none !important;
6164
}
6265

6366
/* icon color */
64-
.md-typeset .admonition.note > .admonition-title::before {
65-
background-color: var(--color-dark-teal);
67+
.md-typeset summary:before {
68+
background-color: var(--color-lm-url);
6669
}
6770

6871
/* shaded part (title/heading) */
69-
.md-typeset .note>.admonition-title,.md-typeset .note>summary {
70-
background-color: var(--color-dark-teal-10);
72+
.md-typeset summary {
73+
background-color: var(--color-lm-url-10);
7174
}
7275

73-
/* Set admonition (question) colors to match the accent green
74-
Light Green for light mode, Imageomics Green for dark mode */
75-
/* border color */
76-
.md-typeset .admonition.question, .md-typeset details.question {
76+
/*
77+
Set admonition (note and info) colors to stand out better
78+
Define through LM/DM scheme color variables to change with mode
79+
*/
80+
.md-typeset .admonition.note, .md-typeset details.note,
81+
.md-typeset .admonition.info, .md-typeset details.info {
82+
border-color: var(--color-lm-url);
83+
box-shadow: var(--color-lm-url-10);
84+
}
85+
86+
/* icon color */
87+
.md-typeset .admonition.note > .admonition-title::before,
88+
.md-typeset .admonition.info > .admonition-title::before {
89+
background-color: var(--color-lm-url);
90+
}
91+
92+
/* shaded part (title/heading) */
93+
.md-typeset .note>.admonition-title,.md-typeset .note>summary,
94+
.md-typeset .info>.admonition-title, .md-typeset .info>summary {
95+
background-color: var(--color-lm-url-10);
96+
}
97+
98+
/*
99+
Set admonition (question and tip) colors
100+
Change with LM/DM (set through scheme color variables)
101+
*/
102+
.md-typeset .admonition.question, .md-typeset details.question,
103+
.md-typeset .admonition.tip, .md-typeset details.tip {
77104
border-color: var(--md-accent-fg-color);
78-
box-shadow: var(--color-light-green-10);
105+
box-shadow: var(--md-accent-fg-color-10);
79106
}
80107

81108
/* icon color */
82-
.md-typeset .admonition.question > .admonition-title::before {
109+
.md-typeset .admonition.question > .admonition-title::before,
110+
.md-typeset .admonition.tip > .admonition-title::before {
83111
background-color: var(--md-accent-fg-color);
84112
}
85113

86114
/* shaded part (title/heading) */
87-
.md-typeset .question>.admonition-title,.md-typeset .question>summary {
88-
background-color: var(--color-light-green-10);
115+
.md-typeset .question>.admonition-title, .md-typeset .question>summary,
116+
.md-typeset .tip>.admonition-title, .md-typeset .tip>summary {
117+
background-color: var(--md-accent-fg-color-10);
89118
}
90119

91-
/* Set URL colors to Dark Teal for better contrast */
120+
/* Set lightmode URL colors */
92121
/* Content URLs */
93-
.md-typeset a {
94-
color: var(--color-dark-teal);
122+
[data-md-color-scheme="default"] .md-typeset a {
123+
color: var(--color-lm-url);
124+
font-weight: bold;
125+
}
126+
127+
[data-md-color-scheme="default"] .md-typeset a:hover {
128+
color: var(--md-accent-fg-color);
129+
}
130+
131+
/* Navigation URL (side panel contents)
132+
to better distinguish from those that are above */
133+
[data-md-color-scheme="default"] .md-nav .md-nav__link--active {
134+
color: var(--color-lm-url);
135+
font-weight: bold;
95136
}
96137

97-
/* Navigation URL (side panel contents) */
98-
.md-nav .md-nav__link--active {
99-
color: var(--color-dark-teal);
138+
[data-md-color-scheme="default"] .md-nav .md-nav__link--active:hover {
139+
color: var(--md-accent-fg-color);
100140
}
101141

102-
/* Dark mode colors: Imageomics Blue and Imageomics Green */
142+
/* Dark mode colors */
103143
[data-md-color-scheme="slate"] {
104-
--md-primary-fg-color: var(--color-imageomics-blue);
105-
--md-accent-fg-color: var(--color-imageomics-green);
144+
--md-primary-fg-color: var(--color-dm-primary);
145+
--md-accent-fg-color: var(--color-dm-accent);
146+
--md-accent-fg-color-10: var(--color-dm-accent-10);
147+
}
148+
149+
/* Dark mode custom link color */
150+
[data-md-color-scheme="slate"] .md-typeset a {
151+
color: var(--color-dm-url);
152+
font-weight: bold;
153+
}
154+
155+
[data-md-color-scheme="slate"] .md-typeset a:hover {
156+
color: var(--md-accent-fg-color);
106157
}
107158

108-
/* Small screen adjustments (from ABC-Guide) */
159+
/* Dark mode custom active link color (side panel) */
160+
[data-md-color-scheme="slate"] .md-nav .md-nav__link--active {
161+
color: var(--color-dm-url);
162+
font-weight: bold;
163+
}
164+
165+
[data-md-color-scheme="slate"] .md-nav .md-nav__link--active:hover {
166+
color: var(--md-accent-fg-color);
167+
}
168+
169+
/* Small screen adjustments */
109170
@media screen and (max-width: 76.2344em) {
171+
.md-nav--primary .md-nav__title {
172+
background-color: var(--md-primary-fg-color);
173+
/* bg defined by main theme as #fff */
174+
color: var(--md-primary-bg-color);
175+
}
176+
110177
/* Dark mode custom active parent color (side panel) */
111178
[data-md-color-scheme="slate"] .md-nav .md-nav__item--active > .md-nav__link {
112-
color: var(--color-dark-teal);
179+
color: var(--color-dm-url);
180+
font-weight: bold;
113181
}
114182

115183
/* Dark mode custom active parent hover color (side panel) */
116184
[data-md-color-scheme="slate"] .md-nav .md-nav__item--active:hover > .md-nav__link {
117-
color: var(--color-imageomics-green);
185+
color: var(--md-accent-fg-color);
118186
}
119187
}

0 commit comments

Comments
 (0)