Skip to content

Commit 944b3da

Browse files
zombieFoxzombieFox
committed
[design] add theme presets previews
1 parent e439e13 commit 944b3da

File tree

7 files changed

+411
-31
lines changed

7 files changed

+411
-31
lines changed

‎gulpfile.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ const cssFiles = [
6464
path.src+'/css/background.css',
6565
path.src+'/css/group.css',
6666
path.src+'/css/link.css',
67+
path.src+'/css/theme.css',
6768
path.src+'/css/auto-suggest.css',
6869
path.src+'/css/fontawesome.css'
6970
]

‎src/css/theme.css‎

Lines changed: 221 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,221 @@
1+
.theme-preset-button{
2+
padding:0;
3+
flex-direction: column;
4+
justify-content: center;
5+
overflow: hidden;
6+
max-width:6em;
7+
}
8+
9+
.theme-preset-button .button-text{
10+
margin-top:0.75em;
11+
margin-bottom:1em;
12+
margin-left:0;
13+
font-size:0.75em;
14+
}
15+
16+
.theme-preset-button:after{
17+
content: none;
18+
}
19+
20+
.theme-preset-preview{
21+
width:6em;
22+
height:6em;
23+
position: relative;
24+
}
25+
26+
.theme-preset-background-01,
27+
.theme-preset-background-02,
28+
.theme-preset-background-03,
29+
.theme-preset-background-04,
30+
.theme-preset-accent{
31+
width:100%;
32+
height:100%;
33+
position: absolute;
34+
top:0;
35+
left:0;
36+
display: block;
37+
}
38+
39+
.theme-preset-background-01{
40+
z-index:1;
41+
}
42+
43+
.theme-preset-background-02{
44+
z-index:2;
45+
clip-path:polygon(040%,60%100%,100%100%,100%0,00);
46+
}
47+
48+
.theme-preset-background-03{
49+
z-index:3;
50+
clip-path:polygon(00,100%100%,100%0);
51+
}
52+
53+
.theme-preset-background-04{
54+
z-index:4;
55+
clip-path:polygon(40%0,100%60%,100%0);
56+
}
57+
58+
.theme-preset-accent{
59+
z-index:5;
60+
clip-path:polygon(100%50%,100%100%,50%100%);
61+
}
62+
63+
.theme-preset-background-nighttab-01{
64+
background-color:rgb(var(--theme-preset-background-nighttab-01))
65+
}
66+
67+
.theme-preset-background-nighttab-02{
68+
background-color:rgb(var(--theme-preset-background-nighttab-02))
69+
}
70+
71+
.theme-preset-background-nighttab-03{
72+
background-color:rgb(var(--theme-preset-background-nighttab-03))
73+
}
74+
75+
.theme-preset-background-nighttab-04{
76+
background-color:rgb(var(--theme-preset-background-nighttab-04))
77+
}
78+
79+
.theme-preset-accent-nighttab{
80+
background-color:rgb(var(--theme-preset-accent-nighttab))
81+
}
82+
83+
.theme-preset-background-midnightblue-01{
84+
background-color:rgb(var(--theme-preset-background-midnightblue-01))
85+
}
86+
87+
.theme-preset-background-midnightblue-02{
88+
background-color:rgb(var(--theme-preset-background-midnightblue-02))
89+
}
90+
91+
.theme-preset-background-midnightblue-03{
92+
background-color:rgb(var(--theme-preset-background-midnightblue-03))
93+
}
94+
95+
.theme-preset-background-midnightblue-04{
96+
background-color:rgb(var(--theme-preset-background-midnightblue-04))
97+
}
98+
99+
.theme-preset-accent-midnightblue{
100+
background-color:rgb(var(--theme-preset-accent-midnightblue))
101+
}
102+
103+
.theme-preset-background-bluegum-01{
104+
background-color:rgb(var(--theme-preset-background-bluegum-01))
105+
}
106+
107+
.theme-preset-background-bluegum-02{
108+
background-color:rgb(var(--theme-preset-background-bluegum-02))
109+
}
110+
111+
.theme-preset-background-bluegum-03{
112+
background-color:rgb(var(--theme-preset-background-bluegum-03))
113+
}
114+
115+
.theme-preset-background-bluegum-04{
116+
background-color:rgb(var(--theme-preset-background-bluegum-04))
117+
}
118+
119+
.theme-preset-accent-bluegum{
120+
background-color:rgb(var(--theme-preset-accent-bluegum))
121+
}
122+
123+
.theme-preset-background-sharpmint-01{
124+
background-color:rgb(var(--theme-preset-background-sharpmint-01))
125+
}
126+
127+
.theme-preset-background-sharpmint-02{
128+
background-color:rgb(var(--theme-preset-background-sharpmint-02))
129+
}
130+
131+
.theme-preset-background-sharpmint-03{
132+
background-color:rgb(var(--theme-preset-background-sharpmint-03))
133+
}
134+
135+
.theme-preset-background-sharpmint-04{
136+
background-color:rgb(var(--theme-preset-background-sharpmint-04))
137+
}
138+
139+
.theme-preset-accent-sharpmint{
140+
background-color:rgb(var(--theme-preset-accent-sharpmint))
141+
}
142+
143+
.theme-preset-background-snowblue-01{
144+
background-color:rgb(var(--theme-preset-background-snowblue-01))
145+
}
146+
147+
.theme-preset-background-snowblue-02{
148+
background-color:rgb(var(--theme-preset-background-snowblue-02))
149+
}
150+
151+
.theme-preset-background-snowblue-03{
152+
background-color:rgb(var(--theme-preset-background-snowblue-03))
153+
}
154+
155+
.theme-preset-background-snowblue-04{
156+
background-color:rgb(var(--theme-preset-background-snowblue-04))
157+
}
158+
159+
.theme-preset-accent-snowblue{
160+
background-color:rgb(var(--theme-preset-accent-snowblue))
161+
}
162+
163+
.theme-preset-background-coralgreen-01{
164+
background-color:rgb(var(--theme-preset-background-coralgreen-01))
165+
}
166+
167+
.theme-preset-background-coralgreen-02{
168+
background-color:rgb(var(--theme-preset-background-coralgreen-02))
169+
}
170+
171+
.theme-preset-background-coralgreen-03{
172+
background-color:rgb(var(--theme-preset-background-coralgreen-03))
173+
}
174+
175+
.theme-preset-background-coralgreen-04{
176+
background-color:rgb(var(--theme-preset-background-coralgreen-04))
177+
}
178+
179+
.theme-preset-accent-coralgreen{
180+
background-color:rgb(var(--theme-preset-accent-coralgreen))
181+
}
182+
183+
.theme-preset-background-purplegem-01{
184+
background-color:rgb(var(--theme-preset-background-purplegem-01))
185+
}
186+
187+
.theme-preset-background-purplegem-02{
188+
background-color:rgb(var(--theme-preset-background-purplegem-02))
189+
}
190+
191+
.theme-preset-background-purplegem-03{
192+
background-color:rgb(var(--theme-preset-background-purplegem-03))
193+
}
194+
195+
.theme-preset-background-purplegem-04{
196+
background-color:rgb(var(--theme-preset-background-purplegem-04))
197+
}
198+
199+
.theme-preset-accent-purplegem{
200+
background-color:rgb(var(--theme-preset-accent-purplegem))
201+
}
202+
203+
.theme-preset-background-hotpepper-01{
204+
background-color:rgb(var(--theme-preset-background-hotpepper-01))
205+
}
206+
207+
.theme-preset-background-hotpepper-02{
208+
background-color:rgb(var(--theme-preset-background-hotpepper-02))
209+
}
210+
211+
.theme-preset-background-hotpepper-03{
212+
background-color:rgb(var(--theme-preset-background-hotpepper-03))
213+
}
214+
215+
.theme-preset-background-hotpepper-04{
216+
background-color:rgb(var(--theme-preset-background-hotpepper-04))
217+
}
218+
219+
.theme-preset-accent-hotpepper{
220+
background-color:rgb(var(--theme-preset-accent-hotpepper))
221+
}

‎src/css/variables.css‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,46 @@
2626
--theme-shade-pos-08:25,25,25;
2727
--theme-shade-pos-09:25,25,25;
2828
--theme-shade-pos-10:25,25,25;
29+
--theme-preset-background-nighttab-01:25,25,25;
30+
--theme-preset-background-nighttab-02:25,25,25;
31+
--theme-preset-background-nighttab-03:25,25,25;
32+
--theme-preset-background-nighttab-04:25,25,25;
33+
--theme-preset-accent-nighttab:25,25,25;
34+
--theme-preset-background-midnightblue-01:25,25,25;
35+
--theme-preset-background-midnightblue-02:25,25,25;
36+
--theme-preset-background-midnightblue-03:25,25,25;
37+
--theme-preset-background-midnightblue-04:25,25,25;
38+
--theme-preset-accent-midnightblue:25,25,25;
39+
--theme-preset-background-bluegum-01:25,25,25;
40+
--theme-preset-background-bluegum-02:25,25,25;
41+
--theme-preset-background-bluegum-03:25,25,25;
42+
--theme-preset-background-bluegum-04:25,25,25;
43+
--theme-preset-accent-bluegum:25,25,25;
44+
--theme-preset-background-sharpmint-01:25,25,25;
45+
--theme-preset-background-sharpmint-02:25,25,25;
46+
--theme-preset-background-sharpmint-03:25,25,25;
47+
--theme-preset-background-sharpmint-04:25,25,25;
48+
--theme-preset-accent-sharpmint:25,25,25;
49+
--theme-preset-background-snowblue-01:25,25,25;
50+
--theme-preset-background-snowblue-02:25,25,25;
51+
--theme-preset-background-snowblue-03:25,25,25;
52+
--theme-preset-background-snowblue-04:25,25,25;
53+
--theme-preset-accent-snowblue:25,25,25;
54+
--theme-preset-background-coralgreen-01:25,25,25;
55+
--theme-preset-background-coralgreen-02:25,25,25;
56+
--theme-preset-background-coralgreen-03:25,25,25;
57+
--theme-preset-background-coralgreen-04:25,25,25;
58+
--theme-preset-accent-coralgreen:25,25,25;
59+
--theme-preset-background-purplegem-01:25,25,25;
60+
--theme-preset-background-purplegem-02:25,25,25;
61+
--theme-preset-background-purplegem-03:25,25,25;
62+
--theme-preset-background-purplegem-04:25,25,25;
63+
--theme-preset-accent-purplegem:25,25,25;
64+
--theme-preset-background-hotpepper-01:25,25,25;
65+
--theme-preset-background-hotpepper-02:25,25,25;
66+
--theme-preset-background-hotpepper-03:25,25,25;
67+
--theme-preset-background-hotpepper-04:25,25,25;
68+
--theme-preset-accent-hotpepper:25,25,25;
2969
/* header */
3070
--header-area-width:100%;
3171
--header-shade-color:var(--theme-color-01);

‎src/index.html‎

Lines changed: 81 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
<linkrel="stylesheet" href="css/background.css">
3535
<linkrel="stylesheet" href="css/group.css">
3636
<linkrel="stylesheet" href="css/link.css">
37+
<linkrel="stylesheet" href="css/theme.css">
3738
<linkrel="stylesheet" href="css/auto-suggest.css">
3839
<linkrel="stylesheet" href="css/fontawesome.css">
3940
<!-- end-css-block -->
@@ -1309,28 +1310,100 @@ <h1 class="menu-item-header-text">Presets</h1>
13091310
</div>
13101311
<divclass="menu-item-form">
13111312
<divclass="button-wrap form-inline">
1312-
<buttonclass="control-theme-preset-nighttab button mb-0" tabindex="-1">nightTab</button>
1313+
<buttonclass="control-theme-preset-nighttab theme-preset-button button mb-0" tabindex="-1">
1314+
<divclass="theme-preset-preview">
1315+
<spanclass="theme-preset-background-01 theme-preset-background-nighttab-01"></span>
1316+
<spanclass="theme-preset-background-02 theme-preset-background-nighttab-02"></span>
1317+
<spanclass="theme-preset-background-03 theme-preset-background-nighttab-03"></span>
1318+
<spanclass="theme-preset-background-04 theme-preset-background-nighttab-04"></span>
1319+
<spanclass="theme-preset-accent theme-preset-accent-nighttab"></span>
1320+
</div>
1321+
<spanclass="button-text">nightTab</span>
1322+
</button>
13131323
</div>
13141324
<divclass="button-wrap form-inline">
1315-
<buttonclass="control-theme-preset-nightingaleblue button mb-0" tabindex="-1">Nightingale Blue</button>
1325+
<buttonclass="control-theme-preset-midnightblue theme-preset-button button mb-0" tabindex="-1">
1326+
<divclass="theme-preset-preview">
1327+
<spanclass="theme-preset-background-01 theme-preset-background-midnightblue-01"></span>
1328+
<spanclass="theme-preset-background-02 theme-preset-background-midnightblue-02"></span>
1329+
<spanclass="theme-preset-background-03 theme-preset-background-midnightblue-03"></span>
1330+
<spanclass="theme-preset-background-04 theme-preset-background-midnightblue-04"></span>
1331+
<spanclass="theme-preset-accent theme-preset-accent-midnightblue"></span>
1332+
</div>
1333+
<spanclass="button-text">Midnight Blue</span>
1334+
</button>
13161335
</div>
13171336
<divclass="button-wrap form-inline">
1318-
<buttonclass="control-theme-preset-bluegum button mb-0" tabindex="-1">Blue Gum</button>
1337+
<buttonclass="control-theme-preset-bluegum theme-preset-button button mb-0" tabindex="-1">
1338+
<divclass="theme-preset-preview">
1339+
<spanclass="theme-preset-background-01 theme-preset-background-bluegum-01"></span>
1340+
<spanclass="theme-preset-background-02 theme-preset-background-bluegum-02"></span>
1341+
<spanclass="theme-preset-background-03 theme-preset-background-bluegum-03"></span>
1342+
<spanclass="theme-preset-background-04 theme-preset-background-bluegum-04"></span>
1343+
<spanclass="theme-preset-accent theme-preset-accent-bluegum"></span>
1344+
</div>
1345+
<spanclass="button-text">Blue Gum</span>
1346+
</button>
13191347
</div>
13201348
<divclass="button-wrap form-inline">
1321-
<buttonclass="control-theme-preset-sharpmint button mb-0" tabindex="-1">Sharp Mint</button>
1349+
<buttonclass="control-theme-preset-sharpmint theme-preset-button button mb-0" tabindex="-1">
1350+
<divclass="theme-preset-preview">
1351+
<spanclass="theme-preset-background-01 theme-preset-background-sharpmint-01"></span>
1352+
<spanclass="theme-preset-background-02 theme-preset-background-sharpmint-02"></span>
1353+
<spanclass="theme-preset-background-03 theme-preset-background-sharpmint-03"></span>
1354+
<spanclass="theme-preset-background-04 theme-preset-background-sharpmint-04"></span>
1355+
<spanclass="theme-preset-accent theme-preset-accent-sharpmint"></span>
1356+
</div>
1357+
<spanclass="button-text">Sharp Mint</span>
1358+
</button>
13221359
</div>
13231360
<divclass="button-wrap form-inline">
1324-
<buttonclass="control-theme-preset-snowblue button mb-0" tabindex="-1">Snow Blue</button>
1361+
<buttonclass="control-theme-preset-snowblue theme-preset-button button mb-0" tabindex="-1">
1362+
<divclass="theme-preset-preview">
1363+
<spanclass="theme-preset-background-01 theme-preset-background-snowblue-01"></span>
1364+
<spanclass="theme-preset-background-02 theme-preset-background-snowblue-02"></span>
1365+
<spanclass="theme-preset-background-03 theme-preset-background-snowblue-03"></span>
1366+
<spanclass="theme-preset-background-04 theme-preset-background-snowblue-04"></span>
1367+
<spanclass="theme-preset-accent theme-preset-accent-snowblue"></span>
1368+
</div>
1369+
<spanclass="button-text">Snow Blue</span>
1370+
</button>
13251371
</div>
13261372
<divclass="button-wrap form-inline">
1327-
<buttonclass="control-theme-preset-coralgreen button mb-0" tabindex="-1">Coral Green</button>
1373+
<buttonclass="control-theme-preset-coralgreen theme-preset-button button mb-0" tabindex="-1">
1374+
<divclass="theme-preset-preview">
1375+
<spanclass="theme-preset-background-01 theme-preset-background-coralgreen-01"></span>
1376+
<spanclass="theme-preset-background-02 theme-preset-background-coralgreen-02"></span>
1377+
<spanclass="theme-preset-background-03 theme-preset-background-coralgreen-03"></span>
1378+
<spanclass="theme-preset-background-04 theme-preset-background-coralgreen-04"></span>
1379+
<spanclass="theme-preset-accent theme-preset-accent-coralgreen"></span>
1380+
</div>
1381+
<spanclass="button-text">Coral Green</span>
1382+
</button>
13281383
</div>
13291384
<divclass="button-wrap form-inline">
1330-
<buttonclass="control-theme-preset-purplegem button mb-0" tabindex="-1">Purple Gem</button>
1385+
<buttonclass="control-theme-preset-purplegem theme-preset-button button mb-0" tabindex="-1">
1386+
<divclass="theme-preset-preview">
1387+
<spanclass="theme-preset-background-01 theme-preset-background-purplegem-01"></span>
1388+
<spanclass="theme-preset-background-02 theme-preset-background-purplegem-02"></span>
1389+
<spanclass="theme-preset-background-03 theme-preset-background-purplegem-03"></span>
1390+
<spanclass="theme-preset-background-04 theme-preset-background-purplegem-04"></span>
1391+
<spanclass="theme-preset-accent theme-preset-accent-purplegem"></span>
1392+
</div>
1393+
<spanclass="button-text">Purple Gem</span>
1394+
</button>
13311395
</div>
13321396
<divclass="button-wrap form-inline">
1333-
<buttonclass="control-theme-preset-hotpepper button mb-0" tabindex="-1">Hot Pepper</button>
1397+
<buttonclass="control-theme-preset-hotpepper theme-preset-button button mb-0" tabindex="-1">
1398+
<divclass="theme-preset-preview">
1399+
<spanclass="theme-preset-background-01 theme-preset-background-hotpepper-01"></span>
1400+
<spanclass="theme-preset-background-02 theme-preset-background-hotpepper-02"></span>
1401+
<spanclass="theme-preset-background-03 theme-preset-background-hotpepper-03"></span>
1402+
<spanclass="theme-preset-background-04 theme-preset-background-hotpepper-04"></span>
1403+
<spanclass="theme-preset-accent theme-preset-accent-hotpepper"></span>
1404+
</div>
1405+
<spanclass="button-text">Hot Pepper</span>
1406+
</button>
13341407
</div>
13351408
</div>
13361409
</div>

0 commit comments

Comments
(0)