forked from AlpyneDreams/vgui.css
-
Notifications
You must be signed in to change notification settings - Fork 2
/
demo_greysteam.html
170 lines (161 loc) · 6.71 KB
/
demo_greysteam.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang=en>
<title>Grey Steam Theme</title>
<link rel=stylesheet type=text/css href="./styles/greysteam/greysteam.css">
<main>
<nav>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Downloads</a></li>
<li><a>Dropdown ▾</a>
<ul class=dropdown>
<li><a>Option 1</a></li>
<li><a>Option 2</a></li>
<li><a>Option 3</a></li>
</ul>
</li>
</nav>
<div class=window name="Grey Steam Theme">
<!--<div class="titlebar">Grey Steam Theme</div>-->
<h1>Heading</h1>
<p>This page is here to demonstrate this early Grey Steam UI style.</p>
<p>This is a <code>window</code> element. Its title is set through the <code>name</code> attribute.</p>
</div>
<div class="headless window" name="Steam">
<h1>Headless Window</h1>
<p>A window without controls can be created by adding the <code>headless</code> class to it.</p>
<h2>h2 Heading</h2>
<h5>h5 Heading</h5>
<p>Paragraph:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<hr>
<h1>hr Divider</h1>
<p>Paragraph:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit es se cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Here is a <a href="https://google.com">link example</a>.</p>
</div>
<div class=window-row>
<div>
<div class="window" name="Smaller Window">
<p>To make a smaller window, place it in a <code>window-row</code> class element or add the <code>half</code> class to it</p>
</div>
<div>
<img src="https://placehold.jp/340x180.png">
<br>
Image Caption Example
</div>
</div>
<div>
<div class="half window" name="LOADING...">
<progress value="14" max="28"></progress>
</div>
<div class="window headless no-resize">
<p>You can make a window have no resize handle with the <code>no-resize</code> class. This one is also <code>headless</code>.</p>
</div>
<div class=box>
<p>Or you can use the <code>box</code> class</p>
<div class=box>
Boxes are nestable.
</div>
</div>
</div>
</div>
<div class="window" name="STEAM">
<h1>Inset Box</h1>
<div class="box inset">
<p>A <code>box</code> (or anything else) can be made <code>inset</code>. This is useful for <code><blockquote></code> and <code><pre></code>, for example.</p>
<div class="box rounded">
<p>A <code>box</code> can also be made <code>rounded</code></p>
</div>
</div>
<pre class=inset>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit es se cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</pre>
<br>
<fieldset class=flex-row>
<style>.space-controls > * { margin-bottom: 16px; }</style>
<legend>Form Controls</legend>
<div class="flex-column space-controls">
<button>Button</button>
<label><input type=checkbox> Checkbox</label>
<input type=color>
<input type=date value="1998-11-19">
<input type=datetime-local value="1998-11-19T12:00">
<input type=email placeholder="gaben@valvesoftware.com">
<input type=file>
<input type=month value="1998-11">
<input type=number value=0>
<input type=password value=hunter2>
<div>
<label><input type=radio name=radio1 value=opt1 checked> Radio 1</label><br>
<label><input type=radio name=radio1 value=opt2> Radio 2</label>
</div>
<input type=range min=0 max=10 value=5 step=0.1 style="width: 200px;"">
<input type=range class=ticks min=0 max=10 value=5 step=1 style="width: 200px;"">
</div>
<div class="flex-column space-controls">
<input type=reset>
<input type=search placeholder=Search...>
<input type=submit>
<input type=tel value=1-800-FLOWERS>
<input type=text placeholder="Text">
<input type=time value="12:00">
<input type=url placeholder="https://example.com/">
<input type=week>
<textarea>Test</textarea>
<select>
<option value="volvo">Coke</option>
<option value="saab">Pepsi</option>
<option value="mercedes">Root Beer</option>
<option value="audi">RC Cola</option>
</select>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<a class="DownloadButton" href="https://github.com/leonill007/vgui.css"></a>
</div>
</fieldset>
</div>
<div class="window headless">
<div class=titlebar>Window Title</div>
<p>You can also place a custom <code>titlebar</code>, anywhere you want, like the one in this headless window.</p>
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit es se cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
</div>
<div class=window name="Valve Archive">
<h1>Title</h1>
<h5>June 20, 2021</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit es se cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
</div>
</main>
</html>