Skip to content

Commit eed4453

Browse files
paf31paf31
authored
Pure CSS menu (#102)
* Pure CSS menu * Fix warning * Add loading.gif * Fade
1 parent e1778b9 commit eed4453

8 files changed

Lines changed: 347 additions & 379 deletions

File tree

‎css/index.css‎

Lines changed: 124 additions & 170 deletions
Original file line numberDiff line numberDiff line change
@@ -21,125 +21,136 @@ body {
2121
flex-direction: column;
2222
flex: 1;
2323
}
24-
#options {
25-
border-bottom: solid 1px #ddd;
24+
25+
#menu {
2626
background-color: #1d222d;
2727
color: white;
2828
vertical-align: middle;
29-
margin-bottom: 0px;
30-
}
31-
#menu {
32-
background-color: #1d222d;
29+
margin: 0;
30+
padding: 0;
3331
}
32+
33+
#menu input {
34+
vertical-align: middle;
35+
margin-bottom: 5px;
36+
cursor: pointer;
37+
}
38+
3439
#home_link {
35-
padding: 5px 10px;
40+
padding: 0px 10px;
3641
text-decoration: none;
3742
font-weight: bold;
38-
display: none;
3943
}
4044

41-
#options input {
42-
vertical-align: middle;
43-
margin-bottom: 5px;
44-
cursor: pointer;
45-
}
46-
#showjs, #auto_compile {
47-
margin-left: 10px;
48-
margin-right: 0px;
49-
}
50-
#showjs_label, #compile_label {
51-
margin-left: 0px;
52-
}
53-
54-
#view_mode_label, #view_mode label, #showjs_label, #compile_label, #gist_save, #help, #hamburger, #backend_label, #backend label {
55-
cursor: pointer;
56-
}
57-
#view_mode_label:hover, #view_mode label:hover, #showjs:hover, #showjs_label:hover,
58-
#auto_compile:hover, #compile_label:hover, #gist_save:hover, #help:hover,
59-
#hamburger:hover, #backend_label:hover, #backend label:hover {
60-
background-color: black;
61-
}
45+
#home_link > img {
46+
vertical-align: middle;
47+
}
6248

63-
#view_mode, #backend {
64-
display: none;
65-
margin: 0px;
66-
padding: 0px;
67-
background-color: #1d222d;
49+
.menu-item {
6850
list-style: none;
69-
}
70-
#view_mode label, #view_mode_label, #backend_label, #showjs_label, #compile_label, #gist_save, #help, #hamburger, #backend_label, #backend label {
7151
display: inline-block;
72-
padding: 5px 10px;
73-
text-align: center;
74-
}
75-
#view_mode, #backend {
76-
position:absolute;
77-
top:30px;
78-
left:0px;
79-
z-index: 100000;
52+
border-left: 1px solid #454648;
8053
}
81-
#view_mode label, #backend label {
54+
55+
.menu-item a {
56+
color: white;
57+
text-decoration: none;
58+
}
59+
60+
.menu-item > label, .menu-item > a > label {
61+
text-align: center;
62+
line-height: 40px;
63+
padding: 0px 10px;
8264
display: block;
83-
text-align: left;
84-
}
65+
}
8566

86-
#backend {
87-
left: 112px;
88-
}
89-
#backend li {
90-
padding: 0px;
91-
padding-left: 0px;
92-
margin: 0px;
93-
border: 0px;
94-
}
95-
#view_mode input[type="radio"], #backend input[type="radio"] {
96-
display:none;
97-
border-top: solid 1px #fff;
98-
border-left: solid 1px #fff;
99-
border-right: solid 1px #fff;
100-
}
101-
#view_mode a {
102-
display:block;
103-
color: white;
104-
}
105-
#view_mode a:visited {
106-
color: white;
107-
}
67+
.menu-item label {
68+
cursor: pointer;
69+
}
10870

109-
#view_mode input[type="radio"]:checked + label, #backend input[type="radio"]:checked + label {
110-
color: #c4953a;
111-
}
112-
#view_mode input[type=checked]:checked + label, #backend input[type=checked]:checked + label {
113-
background-color: #eee;
114-
border: solid 1px #ddd;
115-
border-bottom: 0px;
71+
.menu-item:hover {
72+
background-color: black;
73+
}
74+
75+
.menu-item input[type="checkbox"] {
76+
display: none;
77+
}
78+
79+
.menu-item input[type="checkbox"]:checked + label {
80+
background-color: #8490a9;
81+
}
82+
83+
.menu-item input[type="checkbox"]:not(:checked) + label {
84+
text-decoration: line-through;
85+
color: #ababab;
86+
}
87+
88+
.menu-dropdown {
89+
position: relative;
11690
}
11791

92+
.menu-dropdown > label {
93+
display: block;
94+
}
95+
96+
.menu-dropdown > label:after {
97+
content: ' ▾';
98+
}
99+
100+
.menu-dropdown > ul {
101+
position:absolute;
102+
top: 40px;
103+
left: 0px;
104+
min-width: 100%;
105+
display: none;
106+
margin: 0px;
107+
padding: 0px;
108+
background-color: #1d222d;
109+
list-style: none;
110+
z-index: 100000;
111+
}
112+
113+
.menu-dropdown > ul > li {
114+
margin: 0px;
115+
padding: 10px 8px;
116+
}
117+
118+
.menu-dropdown:hover > ul {
119+
display: inherit;
120+
}
121+
122+
.menu-dropdown input[type="radio"] {
123+
display:none;
124+
}
125+
126+
.menu-dropdown input[type="radio"]:checked + label {
127+
color: #c4953a;
128+
}
129+
130+
.menu-dropdown a {
131+
display: block;
132+
color: white;
133+
}
134+
135+
.menu-dropdown a:visited {
136+
color: white;
137+
}
138+
118139
#editor_view {
119140
display: flex;
120141
flex-direction: row;
121142
flex: 1;
122143
margin-top: 0px;
123-
144+
position: relative;
124145
}
125146

126-
#gists {
127-
display: inline-block;
128-
margin: 0px;
129-
padding: 0px;
130-
}
131-
#gists li {
132-
display: inline-block;
133-
padding: 0px;
134-
padding-left: 0px;
135-
margin: 0px;
136-
border: 0px;
137-
}
147+
#editor_view[data-view-mode="output"] #column1 {
148+
display: none;
149+
}
138150

139-
#helplink {
140-
float:right;
141-
color:white;
142-
}
151+
#editor_view[data-view-mode="code"] #column2 {
152+
display: none;
153+
}
143154

144155
#column1, #column2 {
145156
position: relative;
@@ -208,96 +219,39 @@ iframe {
208219
border: 0;
209220
}
210221

211-
.loading {
222+
#loading {
212223
position: absolute;
224+
top: 0;
213225
left: 0;
214-
right: 0;
215226
width: 100%;
216227
height: 100%;
217-
border: 0;
218-
font-family: monospace;
219-
color: darkgray;
220-
margin: 15px;
221-
font-size: 15px;
228+
background: white url(../img/loading.gif);
229+
background-position: center center;
230+
background-repeat: no-repeat;
231+
opacity: 0.85;
232+
z-index: 10000;
222233
}
234+
223235
#code {
224236
overflow: visible;
225237
}
226238

227-
#hamburger {
228-
display:none;
229-
}
230-
231-
.show-sub-menu {
232-
display: inline-block ! important;
233-
}
234-
235-
@media all and (max-width: 480px) {
236-
#editor_view {
237-
flex-direction: column;
238-
}
239+
.mobile-banner {
240+
background: #dabf8b;
241+
padding: 5px;
242+
border-bottom: 1px solid #1d222d;
243+
font-size: 14px;
244+
margin-bottom: 10px;
239245
}
240246

241247
@media all and (max-width: 720px) {
242-
#home_link {
243-
display: inline-block;
244-
}
245-
#hamburger {
246-
float: right;
247-
display: inline-block;
248-
color:white;
249-
}
250-
#menu {
251-
position: absolute;
252-
top: 30px;
253-
left: 0px;
254-
z-index: 10000000;
255-
display:none;
256-
width: 100%;
257-
height: inherit;
258-
}
259-
#menu > li, #menu > span, #menu > label, #menu > a, #gists {
260-
display:block;
261-
margin-left: 40px;
262-
}
263-
#menu > span {
264-
margin-left: 10px;
265-
}
266-
#view_mode_label, #backend_label {
267-
display: block;
268-
}
269-
#view_mode, #backend {
270-
display: none;
271-
margin-left: 40px;
272-
position: relative;
273-
top: initial;
274-
left: initial;
275-
z-index: initial;
276-
}
277-
#view_mode > li, #backend > li {
278-
margin-left: 20px;
279-
display: block;
280-
}
281-
.show {
282-
display: inline-block ! important;
283-
}
284-
.show-sub-menu {
285-
display: block ! important;
286-
}
287-
#help, #helplink {
288-
float:none;
248+
.no-mobile {
249+
display: none;
289250
}
251+
}
290252

291-
#view_mode label, #backend label {
292-
display: inline-block;
293-
}
294-
#view_mode_label, #backend_label {
295-
cursor: pointer;
296-
padding: 5px 10px;
297-
width: 90px;
298-
text-align: left;
299-
}
300-
#view_mode_label:hover, #backend_label:hover {
301-
background-color: black;
253+
@media all and (min-width: 720px) {
254+
.mobile-only {
255+
display: none;
302256
}
303257
}

0 commit comments

Comments
 (0)