Skip to content

Commit e1d068d

Browse files
smessiesmessie
authored
Moved CSS styling to shacl12-common/style.css and improved dark mode support (#577)
* Move CSS styling to `shacl12-common/style.css` * Improved dark mode support
1 parent db82cbe commit e1d068d

File tree

5 files changed

+433
-1226
lines changed

5 files changed

+433
-1226
lines changed

‎shacl12-common/style.css‎

Lines changed: 291 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,291 @@
1+
pre {
2+
tab-size: 3;
3+
-moz-tab-size: 3; /* Code for Firefox */
4+
-o-tab-size: 3; /* Code for Opera */
5+
}
6+
7+
th {
8+
text-align: left;
9+
}
10+
11+
table.rule {
12+
background-color: #EBEBE0;
13+
}
14+
15+
table.rule td {
16+
text-align: center;
17+
}
18+
19+
td.up {
20+
border-bottom: 1px solid black;
21+
}
22+
23+
td {
24+
vertical-align: top;
25+
}
26+
27+
.algorithm {
28+
background: #fafafc;
29+
border-left-style: solid;
30+
border-left-width: .5em;
31+
border-color: #c0c0c0;
32+
margin-bottom: 16px;
33+
padding: 8px;
34+
}
35+
36+
.arg {
37+
font-weight: bold;
38+
color: #000080;
39+
}
40+
41+
.def {
42+
background: #fcfcfc;
43+
border-left-style: solid;
44+
border-left-width: .5em;
45+
border-color: #c0c0c0;
46+
margin-bottom: 16px;
47+
}
48+
49+
.def-text {
50+
}
51+
52+
.def-text-body {
53+
}
54+
55+
.def-header {
56+
color: #a0a0a0;
57+
font-size: 16px;
58+
padding-bottom: 8px;
59+
}
60+
61+
.diagram-class {
62+
border: 1px solid black;
63+
border-radius: 4px;
64+
width: 360px;
65+
}
66+
67+
.diagram-class-name {
68+
font-size: 16px;
69+
font-weight: bold;
70+
text-align: center;
71+
}
72+
73+
.diagram-class-properties {
74+
border-top: 1px solid black;
75+
}
76+
77+
.diagram-class-properties-start {
78+
padding: 8px;
79+
}
80+
81+
.diagram-class-properties-section {
82+
border-top: 1px dashed #808080;
83+
padding: 8px;
84+
}
85+
86+
.example {
87+
overflow-y: hidden !important;
88+
}
89+
90+
.focus-node-selected {
91+
color: blue;
92+
}
93+
94+
.focus-node-error {
95+
color: red;
96+
}
97+
98+
.focus-node-error {
99+
color: red;
100+
}
101+
102+
.component-class {
103+
font-weight: bold;
104+
font-size: 16px;
105+
}
106+
107+
.parameter-context {
108+
font-weight: bold;
109+
font-size: 16px;
110+
}
111+
112+
.parameters {
113+
font-weight: bold;
114+
font-size: 16px;
115+
}
116+
117+
.part-header {
118+
font-weight: bold;
119+
}
120+
121+
.syntax {
122+
border-left-style: solid;
123+
border-left-width: .5em;
124+
border-color: #d0d0d0;
125+
margin-bottom: 16px;
126+
padding: .5em 1em;
127+
background-color: #f6f6f6;
128+
color: black;
129+
}
130+
131+
.syntax-rule-id {
132+
padding-right: 10px;
133+
}
134+
135+
.syntax-rule-id-a {
136+
white-space: nowrap;
137+
}
138+
139+
.validator-id-a {
140+
font-weight: bold;
141+
white-space: nowrap;
142+
}
143+
144+
.term {
145+
font-style: italic;
146+
}
147+
148+
.term-def-header {
149+
font-style: italic;
150+
font-weight: bold;
151+
}
152+
153+
.term-table {
154+
border-collapse: collapse;
155+
border-color: #000000;
156+
margin: 16px;
157+
}
158+
159+
.term-table td, th {
160+
border-width: 1px;
161+
border-style: solid;
162+
padding: 5px;
163+
}
164+
165+
.todo {
166+
color: red;
167+
}
168+
169+
pre {
170+
word-wrap: normal;
171+
}
172+
173+
.turtle {
174+
font-family: Menlo, Consolas, "DejaVu Sans Mono", Monaco, monospace;
175+
font-size: 14.4px;
176+
hyphens: none;
177+
overflow-x: auto;
178+
padding: .5em;
179+
tab-size: 3;
180+
-moz-tab-size: 3; /* Code for Firefox */
181+
-o-tab-size: 3; /* Code for Opera */
182+
text-align: start;
183+
margin-bottom: -1.5em;
184+
margin-top: -1.5em;
185+
white-space: pre;
186+
}
187+
188+
.data-graph {
189+
background: #eeb;
190+
border: 1px solid #cc9;
191+
margin-top: 0.3em;
192+
color: black;
193+
}
194+
195+
.data-graph:before {
196+
color: #996;
197+
content: "Data graph";
198+
padding-left: 0.4em;
199+
}
200+
201+
.results-graph {
202+
background: #edb;
203+
border: 1px solid #bbb;
204+
margin-top: 0.3em;
205+
color: black;
206+
}
207+
208+
.results-graph:before {
209+
color: #997;
210+
content: "Validation results";
211+
padding-left: 0.4em;
212+
}
213+
214+
.shapes-graph {
215+
background: #deb;
216+
border: 1px solid #bbb;
217+
margin-top: 0.3em;
218+
color: black;
219+
}
220+
221+
.shapes-graph:before {
222+
color: #888;
223+
content: "Shapes graph";
224+
padding-left: 0.4em;
225+
}
226+
227+
/* no dark mode, keep colors for shapes-graph, data-graph, and results graph background */
228+
code.hljs {
229+
--base: transparent;
230+
--mono-1: light-dark(#383a42, #abb2bf);
231+
}
232+
233+
/* our syntax menu for switching */
234+
div.syntaxmenu {
235+
border: 1px dotted black;
236+
padding: 0.5em;
237+
margin: 1em;
238+
}
239+
240+
@media print {
241+
div.syntaxmenu {
242+
display: none;
243+
}
244+
}
245+
246+
/* example tab selection */
247+
.ds-selector-tabs .selectors {
248+
padding: 0;
249+
border-bottom: 1px solid #ccc;
250+
height: 28px;
251+
}
252+
253+
.ds-selector-tabs .selectors button {
254+
display: inline-block;
255+
min-width: 54px;
256+
text-align: center;
257+
font-size: 11px;
258+
font-weight: bold;
259+
height: 27px;
260+
padding: 0 8px;
261+
line-height: 27px;
262+
transition: all, 0.218s;
263+
border-top-right-radius: 2px;
264+
border-top-left-radius: 2px;
265+
color: light-dark(#666, #aaa);
266+
border: 1px solid transparent;
267+
}
268+
269+
.ds-selector-tabs .selectors button:first-child {
270+
margin-left: 2px;
271+
}
272+
273+
.ds-selector-tabs .selectors button.selected {
274+
color: #202020 !important;
275+
border: 1px solid #ccc;
276+
border-bottom: 1px solid #fff !important;
277+
}
278+
279+
.ds-selector-tabs .selectors button:hover {
280+
background-color: transparent;
281+
color: #202020;
282+
cursor: pointer;
283+
}
284+
285+
.ds-selector-tabs .tab {
286+
display: none;
287+
}
288+
289+
.ds-selector-tabs .selected {
290+
display: block;
291+
}

0 commit comments

Comments
 (0)