Skip to content

Commit cb868c4

Browse files
ToinaneToinane
committed
fix osx buttons and cmd+c/cmd+v inputs
1 parent a3d56a4 commit cb868c4

File tree

5 files changed

+444
-7
lines changed

5 files changed

+444
-7
lines changed

‎css/index_osx.css

+331
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,331 @@
1+
body, p, h1, h2{
2+
margin: 0;
3+
font-family: sans-serif;
4+
}
5+
body{
6+
overflow: hidden;
7+
}
8+
a{color: inherit;text-decoration: none;}
9+
10+
11+
/**
12+
* TOOLBAR
13+
*/
14+
.toolbar{
15+
margin: 3px;
16+
padding: 10px;
17+
position: relative;
18+
z-index: 10000;
19+
box-sizing: border-box;
20+
-webkit-app-region: drag;
21+
}
22+
.toolbar p{
23+
color: rgba(0, 0, 0, 0.3);
24+
font-weight: bold;
25+
cursor: default;
26+
display: inline-block;
27+
margin-right: 20px;
28+
-webkit-app-region: no-drag;
29+
cursor: pointer;
30+
transition: 0.3s;
31+
}
32+
.toolbar p:hover{
33+
color: rgba(0, 0, 0, 0.4);
34+
}
35+
.toolbar .active{
36+
color: rgba(0, 0, 0, 0.5);
37+
}
38+
.whited p{
39+
color: rgba(255, 255, 255, 0.3);
40+
}
41+
.whited p:hover{
42+
color: rgba(255, 255, 255, 0.4);
43+
}
44+
.whited .active{
45+
color: rgba(255, 255, 255, 0.5);
46+
}
47+
.toolbar p::selection, .toolbar li::selection, .toolbar div::selection{
48+
background: rgba(0, 0, 0, 0);
49+
}
50+
.toolbar ul{
51+
-webkit-app-region: no-drag;
52+
display: inline-block;
53+
position: relative;
54+
bottom: 3px; right: 3px;
55+
margin: 0;
56+
margin-right: 10px;;
57+
padding: 0;
58+
}
59+
.toolbar li{
60+
display: inline-block;
61+
vertical-align: middle;
62+
cursor: pointer;
63+
}
64+
.toolbar li div{
65+
cursor: pointer;
66+
transition: 0.2s;
67+
width: 13px; height: 13px;
68+
margin-left: 4px;
69+
border-radius: 15px;
70+
}
71+
.toolbar .minimize{
72+
background: #FEBF3C;
73+
}
74+
.toolbar li:hover .minimize{
75+
background: #FEB219;
76+
}
77+
.toolbar .square{
78+
background: #35CC48;
79+
}
80+
.toolbar li:hover .square{
81+
background: #32C544;
82+
}
83+
.toolbar .close{
84+
background: #FC635C;
85+
}
86+
.toolbar li:hover .close{
87+
background: #FC4B43;
88+
}
89+
90+
91+
92+
93+
/**
94+
* HEADER CSS
95+
*/
96+
header{
97+
position: relative;
98+
z-index: 900;
99+
width: 100%;
100+
}
101+
header .nu, header .ni{
102+
display: flex;
103+
}
104+
header .nu aside{
105+
background: rgb(40, 40, 40);
106+
flex: 1 100%;
107+
height: 65px;
108+
cursor: pointer;
109+
}
110+
header .ni aside{
111+
background: rgb(70, 70, 70);
112+
flex: 1 100%;
113+
height: 50px;
114+
cursor: pointer;
115+
}
116+
117+
/**
118+
* HEADER BOX CSS
119+
*/
120+
.nuance, .alea, .mode{
121+
display: inline-block;
122+
width: 80px;
123+
padding: 5px 0;
124+
background: rgba(0, 0, 0, 0.2);
125+
cursor: pointer;
126+
text-align: center;
127+
color: white;
128+
font-weight: 300;
129+
}
130+
.alea{ left: 200px;}
131+
.mode{ left: 110px;}
132+
133+
134+
/**
135+
* BOX COLORPICKER CSS
136+
*/
137+
.edit-box{
138+
background: rgba(0, 0, 0, 0);
139+
position: absolute;
140+
z-index: 200;
141+
bottom: 0; left: 0;
142+
padding-top: 15px;
143+
padding-bottom: 3px;
144+
padding-left: 10px;
145+
width: 100%;
146+
text-align: center;
147+
display: flex;
148+
align-items: flex-end;
149+
}
150+
151+
.sliders{
152+
153+
}
154+
155+
.redBar, .greenBar, .blueBar{
156+
position: relative;
157+
width: 220px;
158+
height: 20px;
159+
padding: 6px 0;
160+
}
161+
162+
/* STYLING SLIDER */
163+
input[type=range]{
164+
margin: 0;
165+
padding: 3px 0;
166+
-webkit-appearance: none;
167+
outline: none;
168+
background: none;
169+
width: 100%;
170+
box-sizing: border-box;
171+
}
172+
input[type=range]::-webkit-slider-thumb {
173+
position: relative;
174+
z-index: 100;
175+
-webkit-appearance: none;
176+
border: none;
177+
height: 22px;
178+
width: 22px;
179+
border-radius: 50%;
180+
background: white;
181+
margin-top: -10px;
182+
cursor: pointer;
183+
}
184+
185+
progress[value]::-webkit-progress-bar {
186+
position: absolute;
187+
width: 99%;
188+
top: 5px; left: 1px;
189+
background-color: white;
190+
border-radius: 6px;
191+
height: 10px;
192+
}
193+
.redBar progress[value]::-webkit-progress-value {
194+
background: rgb(255, 87, 57);
195+
border-radius: 6px;
196+
height: 10px;
197+
}
198+
.greenBar progress[value]::-webkit-progress-value {
199+
background: rgb(105, 195, 59);
200+
border-radius: 6px;
201+
height: 10px;
202+
}
203+
.blueBar progress[value]::-webkit-progress-value {
204+
background: rgb(65, 165, 225);
205+
border-radius: 6px;
206+
height: 10px;
207+
}
208+
progress{
209+
-webkit-appearance: none;
210+
appearance: none;
211+
}
212+
213+
/* INPUTS STYLE */
214+
.inputs{
215+
216+
}
217+
.inputs input{
218+
display: block;
219+
margin-bottom: 8px;
220+
margin-left: 10px;
221+
}
222+
223+
.inputs input[type=number]::-webkit-inner-spin-button,
224+
.inputs input[type=number]::-webkit-outer-spin-button {
225+
-webkit-appearance: none;
226+
-moz-appearance: none;
227+
appearance: none;
228+
margin: 0;
229+
}
230+
231+
.inputs input[type="number"], input[type="text"]{
232+
width: 30px;
233+
text-align: center;
234+
background: rgba(0, 0, 0, 0.1);
235+
color: rgba(0, 0, 0, 0.5);
236+
border: none;
237+
padding: 2px;
238+
font-family: "Source Sans Pro", sans-serif;
239+
font-size: 1.1em;
240+
font-weight: bold;
241+
outline: none;
242+
transition: 0.3s;
243+
}
244+
.whited .inputs input[type="number"], .whited input[type="text"], .whited .value p{
245+
background: rgba(255, 255, 255, 0.1);
246+
color: rgba(255, 255, 255, 0.5);
247+
}
248+
249+
.value{
250+
margin-bottom: 8px;
251+
margin-left: 10px;
252+
}
253+
.value input{
254+
display: block;
255+
margin-bottom: 8px;
256+
width: 105px;
257+
}
258+
.value p{
259+
background: rgba(0, 0, 0, 0.1);
260+
color: rgba(0, 0, 0, 0.5);
261+
font-weight: bold;
262+
padding: 4px 2px;
263+
width: 105px;
264+
transition: 0.3s;
265+
}
266+
267+
#newBox{
268+
position: absolute;
269+
bottom: 15px; right: 30px;
270+
border: 3px solid rgba(0, 0, 0, 0.15);
271+
width: 12px; height: 12px;
272+
cursor: pointer;
273+
z-index: 999;
274+
transition: 0.3s;
275+
}
276+
#newBox:hover{
277+
border: 3px solid rgba(0, 0, 0, 0.25);
278+
}
279+
.whited #newBox{
280+
border: 3px solid rgba(255, 255, 255, 0.15);
281+
}
282+
.whited #newBox:hover{
283+
border: 3px solid rgba(255, 255, 255, 0.25);
284+
}
285+
#newBox.active{
286+
border: 3px solid rgba(0, 0, 0, 0.3);
287+
}
288+
.whited #newBox.active{
289+
border: 3px solid rgba(255, 255, 255, 0.3);
290+
}
291+
292+
.box{
293+
position: absolute;
294+
top: 0; right: -200px;
295+
height: 100%;
296+
width: 200px;
297+
transition: right 0.5s;
298+
}
299+
300+
#numberBoxHex{
301+
cursor: default;
302+
visibility: hidden;
303+
opacity: 0;
304+
transition: 0.4s;
305+
}
306+
307+
308+
309+
/**
310+
* RESPONSIVE CSS
311+
*/
312+
@media screen and (max-width: 500px){
313+
314+
}
315+
316+
@media screen and (max-height: 200px){
317+
.edit-box{
318+
background: none;
319+
}
320+
}
321+
/**
322+
* VIEWPORT CSS
323+
*/
324+
@viewport{
325+
zoom: 1.0;
326+
width: extend-to-zoom;
327+
}
328+
@-ms-viewport{
329+
zoom: 1.0;
330+
width: extend-to-zoom;
331+
}

0 commit comments

Comments
 (0)