ocrm.bsky.social
the game where you go into mines and start crafting! but for consoles (forked directly from smartcmd's github)
1/*standard plus html5 specific resets*/
2html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video
3{
4 margin: 0;
5 padding: 0;
6 border: 0;
7 outline: 0;
8 vertical-align: baseline;
9 background: transparent;
10}
11
12article, aside, figure, footer, header, hgroup, nav, section
13{
14 display: block;
15}
16
17img, object, embed
18{
19 max-width: 100%;
20}
21
22/*end resets*/
23
24/*setting default font size so that 1 em will approximately equal 10 pixels and so that we can use media queries to scale the fonts*/
25body
26{
27 height:100%;
28 font-size: 62.5%;
29 overflow: hidden;
30}
31
32button
33{
34 /*button is a special case and gets a default font size from the browser so we reset it to the same font-size as it's parent container*/
35 font-size: 1em;
36}
37
38a
39{
40 text-decoration: none;
41}
42
43article
44{
45 overflow: hidden;
46}
47
48.articles article
49{
50 margin-top: 0;
51 display: none;
52}
53
54.contentPanel li
55{
56 list-style-type: none;
57}
58
59article
60{
61 position: relative;
62}
63
64.menuLink {} /* marker class for links to menu pages */
65.contentLink {} /* marker class for content pages */
66
67.contentPanel
68{
69 width: 388px;
70 height: 900px;
71 background-color: #222222;
72 color: #ebebeb;
73 float: left;
74 padding: 64px 28px 64px 64px;
75 vertical-align: top;
76 font-size:2.4em;
77}
78
79.helpContent
80{
81 height: 794px;
82 overflow: hidden;
83 background-color: #282828;
84 padding: 136px 64px 64px 64px;
85 -moz-column-count: auto; /* Firefox - SmartGlass and console do not need these -moz-XXXX, but if help rendered on regular desktop it could be FF */
86 -webkit-column-count: auto; /* Safari and Chrome */
87 column-count: auto;
88 -moz-column-width: 344px;
89 -webkit-column-width: 344px;
90 column-width: 344px;
91 -moz-column-gap: 80px; /* Firefox */
92 -webkit-column-gap: 80px; /* Safari and Chrome */
93 column-gap: 80px;
94 /*without this property the columns will always try to have the same amount of content each.
95 Using auto if you set the height it will only fill as needed*/
96 -webkit-column-fill: auto;
97 -moz-column-fill: auto;
98 column-fill: auto;
99 font-size:2.4em;
100 line-height:1.5;
101 position: relative;
102}
103
104.contentPanel .articleTitle
105{
106 font-family: Segoe UI Light, Segoe UI Regular,HelveticaNeue, Droid Sans, Arial, Sans-Serif;
107 font-weight: 100;
108 font-size:1.5em;
109 margin-top:10px;
110 margin-bottom:32px;
111}
112
113.contentPanel .articleTopic
114{
115 font-family: Segoe UI Regular,HelveticaNeue, Droid Sans, Arial, Sans-Serif;
116 font-weight: normal;
117 /*Because we reset font family here we have to also reset the size or it will get the default body font size. 1em here means the same as it's parent*/
118 font-size:1em;
119
120}
121
122.panelRule
123{
124 color: #ebebeb;
125}
126
127.panelButtons
128{
129 /*if there are additional buttons or other elements in the panel you'll need to adjust this value*/
130 margin-top: 680px;
131 margin-left: 28px;
132}
133
134
135/**********button state formats***********/
136.navLinks a
137{
138 border-bottom:solid 4px #ebebeb;
139 background-color: rgba(235, 235, 235, 0);
140 width: 432px;
141 height: 108px; /*height 108px is the value that includes the focused border.*/
142 outline: 4px solid rgba(235, 235, 235, 0);
143 line-height: 2.4em;
144 padding: 36px 0 0 18px;
145}
146
147.navLinks a:focus, .pageButton:focus
148{
149 background-color: rgba(235, 235, 235, 0.1);
150 outline-color: rgba(235, 235, 235, 1);
151 border-color:rgba(235, 235, 235, 0);
152}
153
154.navLinks a:hover:not(:focus)
155{
156 background-color: transparent;
157 outline: solid 4px rgb(107, 107, 107);
158 border-bottom:solid 4px transparent;
159}
160
161.pageButton
162{
163 height: 90px;
164 color: #ebebeb;
165 text-align: left;
166 line-height: 140px;
167 width: 178px;
168 margin: 0 10px 0 0;
169 -ms-attraction: 0% 0% 0% 0%;
170 border: 1px solid #ebebeb;
171 background-color: rgba(235, 235, 235, 0);
172 outline: 4px solid rgba(235, 235, 235, 0);
173}
174
175 .pageButton:hover:not(:focus)
176 {
177 background-color: transparent;
178 outline: solid 4px rgb(107, 107, 107);
179 border:none;
180 }
181
182.pageButton.next
183{
184 line-height: 46px;
185 float: right;
186}
187
188.panelButtons .pageCounter
189{
190 display:block;
191 height:2em;
192 overflow:hidden;
193}
194
195.pageCounter
196{
197 display:none;
198}
199
200.win-voice-activelistening .pageCounter
201{
202 display:none;
203}
204
205 .pageButton.previous
206 {
207 float: left;
208 }
209
210.contentPanel .backLink
211{
212 background: transparent url(left_arrow.png) no-repeat 28px 62px;
213 display: block;
214 height: 5.1em;
215 width: 5.1em;
216 margin: -60px 0 0 -24px;
217 background-size: 49%;
218 font-size:1em;
219}
220
221.contentPanel .backLink:hover
222 {
223 background-color: transparent;
224 }
225
226.contentPanel .backLink:focus
227 {
228 background: transparent url(left_arrow_hoverFocus.png) no-repeat 28px 62px;
229 background-size: 49%;
230 outline:0;
231 }
232
233
234
235.contentPanel a
236{
237 display: inline;
238 line-height: 1;
239 color: #ebebeb;
240 -ms-attraction: 0% 0% 0% 0%;
241}
242
243.helpMenu li a
244{
245 color: #ebebeb;
246 height:4em;
247 width: 100%;
248 display: block;
249 line-height: 4em;
250 margin:0 0 0 -59px;
251 padding:0 25px 0 56px;
252 -ms-attraction: 0% 0% 0% 0%;
253}
254
255.endMark
256{
257 /*this empty element is given a width so that it will stretch to fill the last column as needed*/
258 visibility: hidden;
259 display: block;
260 height: 1px;
261 width: 100%;
262 break-before: column;
263}
264
265/*note that we use absolute postitioning here instead of static so we reset the margin to 0*/
266article .contentPanel .panelButtons
267{
268 position: absolute;
269 margin: 0;
270 bottom: 44px; /* safe region area */
271 left: 64px; /* safe region area on the left: 64px */
272 width: 386px;
273}
274
275/* The following styles are only applied when voice commands are in use on the console */
276.win-voice-activelistening[data-win-voice]
277{
278 color: green;
279}