Skip to content

Commit ba1308a

Browse files
BarkingBadBarkingBad
authored
Merge pull request #13335 from BarkingBad/scaladoc/reorganize-csses
Reorganize CSSes
2 parents 609a576 + f0da72f commit ba1308a

File tree

9 files changed

+461
-454
lines changed

9 files changed

+461
-454
lines changed

‎project/Build.scala

+6-4
Original file line numberDiff line numberDiff line change
@@ -1313,10 +1313,12 @@ object Build {
13131313
Seq(jsDestinationFile)
13141314
}.taskValue,
13151315
Compile / resourceGenerators += Def.task {
1316-
val cssDesitnationFile = (Compile / resourceManaged).value / "dotty_res" / "styles" / "scaladoc-searchbar.css"
1317-
val cssSourceFile = (`scaladoc-js` / Compile / resourceDirectory).value / "scaladoc-searchbar.css"
1318-
sbt.IO.copyFile(cssSourceFile, cssDesitnationFile)
1319-
Seq(cssDesitnationFile)
1316+
Seq("code-snippets.css", "searchbar.css", "social-links.css", "ux.css", "versions-dropdown.css").map { file =>
1317+
val cssDesitnationFile = (Compile / resourceManaged).value / "dotty_res" / "styles" / file
1318+
val cssSourceFile = (`scaladoc-js` / Compile / resourceDirectory).value / file
1319+
sbt.IO.copyFile(cssSourceFile, cssDesitnationFile)
1320+
cssDesitnationFile
1321+
}
13201322
}.taskValue,
13211323
Compile / resourceGenerators += Def.task {
13221324
import _root_.scala.sys.process._

‎scaladoc-js/resources/code-snippets.css

+232
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,232 @@
1+
/* Snippets */
2+
3+
.snippet {
4+
padding: 12px 8px 10px 12px;
5+
background: var(--code-bg);
6+
margin: 1em 0px;
7+
border-radius: 2px;
8+
box-shadow: 0 0 2px #888;
9+
cursor: default;
10+
}
11+
.snippet-error {
12+
border-bottom: 2px dotted red;
13+
}
14+
.snippet-warn {
15+
border-bottom: 2px dotted orange;
16+
}
17+
.snippet-info {
18+
border-bottom: 2px dotted teal;
19+
}
20+
.snippet-debug {
21+
border-bottom: 2px dotted pink;
22+
}
23+
24+
.snippet .snippet-meta {
25+
border-top: 2px solid var(--inactive-bg);
26+
color: var(--inactive-fg);
27+
margin-top: 10px;
28+
padding-top: 10px;
29+
font-size: 0.75em;
30+
}
31+
32+
.snippet-meta .snippet-label {
33+
font-weight: bold;
34+
}
35+
36+
.snippet .buttons {
37+
--icon-size: 16px;
38+
}
39+
40+
.snippet-showhide {
41+
display: flex;
42+
flex-direction: row;
43+
align-items: center;
44+
--slider-width: 40px;
45+
--slider-height: 16px;
46+
--slider-diameter: calc(var(--slider-height) - 4px);
47+
}
48+
49+
.snippet-showhide p {
50+
margin-left: 4px;
51+
margin-bottom: 0;
52+
margin-top: 0;
53+
color: var(--inactive-fg);
54+
}
55+
56+
.snippet-showhide-button {
57+
display: inline-block;
58+
position: relative;
59+
width: var(--slider-width);
60+
height: var(--slider-height);
61+
margin-bottom: 0;
62+
}
63+
64+
.snippet-showhide-button input {
65+
opacity: 0;
66+
width: 0;
67+
height: 0;
68+
}
69+
70+
.snippet-showhide-button .slider {
71+
position: absolute;
72+
cursor: pointer;
73+
top: 0;
74+
left: 0;
75+
right: 0;
76+
bottom: 0;
77+
background-color: var(--inactive-bg);
78+
-webkit-transition: .4s;
79+
transition: .4s;
80+
border-radius: var(--slider-height);
81+
}
82+
83+
.snippet-showhide-button .slider:before {
84+
position: absolute;
85+
content: "";
86+
height: var(--slider-diameter);
87+
width: var(--slider-diameter);
88+
left: 2px;
89+
bottom: 2px;
90+
background-color: var(--inactive-fg);
91+
-webkit-transition: .4s;
92+
transition: .4s;
93+
border-radius: 50%;
94+
}
95+
96+
.snippet-showhide-button .slider:hover::before {
97+
background-color: var(--active-fg);
98+
}
99+
100+
input:checked + .slider {
101+
background-color: var(--active-bg);
102+
}
103+
104+
input:focus + .slider {
105+
box-shadow: 0 0 1px var(--active-bg-shadow);
106+
}
107+
108+
input:checked + .slider:before {
109+
--translation-size: calc(var(--slider-width) - var(--slider-diameter) - 4px);
110+
-webkit-transform: translateX(var(--translation-size));
111+
-ms-transform: translateX(var(--translation-size));
112+
transform: translateX(var(--translation-size));
113+
}
114+
115+
.tooltip {
116+
position: relative;
117+
}
118+
.tooltip:hover:after {
119+
content: attr(label);
120+
padding: 4px 8px;
121+
color: white;
122+
background-color:black;
123+
position: absolute;
124+
left: 0;
125+
z-index:10;
126+
box-shadow:0 0 3px #444;
127+
opacity: 0.8;
128+
}
129+
130+
.snippet .buttons .tooltip::after {
131+
top: 32px;
132+
}
133+
134+
.snippet .buttons {
135+
display: flex;
136+
flex-direction: row-reverse;
137+
justify-content: flex-start;
138+
}
139+
140+
.snippet .buttons button {
141+
outline: none;
142+
background: none;
143+
border: none;
144+
font-size: var(--icon-size);
145+
color: var(--inactive-fg);
146+
cursor: pointer;
147+
}
148+
149+
.snippet .buttons button:hover:not(:disabled) {
150+
color: var(--inactive-fg-shadow)
151+
}
152+
153+
.snippet .buttons button:active:not(:disabled) {
154+
transform: translateY(2px);
155+
color: var(--active-fg)
156+
}
157+
158+
.snippet .buttons button:disabled {
159+
color: var(--inactive-bg)
160+
}
161+
162+
163+
.snippet .buttons>:not(:last-child) {
164+
border-left: 2px solid var(--inactive-bg);
165+
}
166+
167+
.snippet .buttons>* {
168+
padding-left: 5px;
169+
padding-right: 5px;
170+
}
171+
172+
.unselectable {
173+
-webkit-user-select: none;
174+
-moz-user-select: none;
175+
-ms-user-select: none;
176+
user-select: none;
177+
}
178+
179+
.included-section {
180+
display: flex;
181+
flex-direction: column;
182+
}
183+
184+
.included-section a {
185+
color: var(--inactive-fg) !important;
186+
font-size: 0.75em;
187+
}
188+
189+
.included-section b {
190+
font-weight: bold;
191+
}
192+
193+
.hideable.hidden {
194+
display: none;
195+
}
196+
197+
@media(max-width: 576px) {
198+
.snippet-showhide {
199+
--slider-width: 32px;
200+
--slider-height: 16px;
201+
}
202+
203+
.snippet .buttons {
204+
--icon-size: 16px;
205+
font-size: 16px;
206+
}
207+
208+
}
209+
210+
@media(max-width: 360px) {
211+
.snippet-showhide {
212+
--slider-width: 32px;
213+
--slider-height: 16px;
214+
}
215+
216+
.snippet .buttons {
217+
--icon-size: 16px;
218+
font-size: 0px;
219+
}
220+
}
221+
222+
@media(max-width: 240px) {
223+
.snippet-showhide {
224+
--slider-width: 24px;
225+
--slider-height: 10px;
226+
}
227+
228+
.snippet .buttons {
229+
--icon-size: 16px;
230+
font-size: 0px;
231+
}
232+
}

0 commit comments

Comments
 (0)