main.scss 5.04 KB
Newer Older
Leon Arnott's avatar
Leon Arnott committed
1
2
$color: white;
$background-color: black;
3

4
/*
Leon Arnott's avatar
Leon Arnott committed
5
	<html> should be left alone, except where needed to accomodate <tw-story>.
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
*/
html {
	margin: 0;
	// This allows <tw-story> to cover the entire page
	height:100%;
	overflow-x:hidden;
}
/*
	This enables border-box on every element by default, unless overridden
	by a parent element.
	It also enables position:relative by default, which allows top, left, etc.
	to be used heedlessly.
*/
*, :before, :after {
	position: relative;
	box-sizing: inherit;
}
// This is just a reset.
body {
	margin: 0;
Leon Arnott's avatar
Leon Arnott committed
26
27
	// This allows <tw-story> to cover the entire page
	height:100%;
28
29
30
31
32
33
34
35
36
37
38
39
}

/*
	<tw-storydata> houses the raw passage data of the story.
	Of course, it can't be visible.
*/
tw-storydata {
	display: none;
}

/*
	The <tw-story> element houses all of the <tw-passage>s.
40
	This element can be styled by setting a ChangerCommand to ?page
41
42
43
44
45
*/
tw-story {
	@include flexbox;
	@include flex-direction(column);
	
Leon Arnott's avatar
Leon Arnott committed
46
47
48
	font: 100% Georgia, serif;
	// Use the more intuitive box model.
	box-sizing: border-box;
49
50
51
52
53
	// In case enchantments opt into content-box, their descendants
	// should still use border-box.
	[style*=content-box] * {
		box-sizing: border-box;
	}
Leon Arnott's avatar
Leon Arnott committed
54
55
56
57
58

	/*
		Instead of a 60% width, this uses 40% horizontal padding (applied below).
	*/
	width: 100%;
59
	min-height: 100%;
60
	/*
61
		This is the base font size, which is permuted below.
62
63
64
65
	*/
	$font-size: 1.5em;
	
	font-size:   $font-size;
66
	line-height: $font-size;
67
68
69
70
	
	/*
		The <tw-story>'s default distance from the top and bottom of the page is 5%.
	*/
Leon Arnott's avatar
Leon Arnott committed
71
	padding: 5% 20%;
72

73
74
75
76
77
	/*
		This is necessary to make certain CSS animations (mainly slide-left) work with passages.
	*/
	overflow: hidden;

Leon Arnott's avatar
Leon Arnott committed
78
79
	background-color: $background-color;
	color: $color;
80
81

	/*
82
83
		Consecutive line breaks should consume less height than they normally would.
		Renderer converts those <br>s into this element.
84
	*/
85
	tw-consecutive-br {
86
		display: block;
87
88
		height: 1.6ex;
		visibility: hidden;
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
	}
	/*
		These are created by (dropdown:).
		This selector should be more specific, but I'm concerned about it being harder for user stylesheets
		to override... so I'm leaving it as-is.
	*/
	select {
		&:not([disabled]) {
			color: inherit;
		}
		background-color: transparent;
		font:inherit;
		border-style:solid;
		padding: 2px;
	}
104
105
106
107
	/*
		These are created by (input-box:).
	*/
	textarea {
108
		resize:none;
109
110
111
		background-color: transparent;
		font:inherit;
		color:inherit;
112
		border-style:none;
113
114
		padding: 2px;
	}
115

116
117
118
119
120
	/*
		These are created by (checkbox:).
	*/
	input[type=checkbox] {
		transform: scale(1.5);
121
		margin:0 0.5em;
122
123
	}

124
125
126
127
128
129
130
	/*
		This animation for the <noscript> element should ideally prevent a "flash of unstyled content" where the
		message is briefly visible.
	*/
	& tw-noscript {
		animation: appear 0.8s;
	}
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
}

/*
	The <tw-passage> element houses a single passage, including its sidebar.
*/
tw-passage {
	display: block;
}

/*
	The <tw-sidebar> is the first element in a <tw-passage>, and is placed to the left
	when the story begins.
*/
tw-sidebar {
	left: -5em;
	width: 3em;
	position:absolute;
	text-align:center;
	display:block;
}

/*
	A <tw-icon> is, at present, a sidebar button.
*/
tw-icon {
156
	display: inline-block;
157
	margin: 0.5em 0;
158
	font-size: 66px;
159
160
161
162
163
164
	font-family:"Verdana",sans-serif;
	&[alt] {
		opacity: 0.2;
		&:hover {
			opacity: 0.4;
		}
165
	}
166
167
168
169
170
171
	&[data-label]::after {
		font-weight:bold;
		content:attr(data-label);
		font-size:20px;
		bottom:-20px;
		left:-50%;
172
		white-space:nowrap;
173
	}
174
175
}

176
177
178
179
180
181
182
/*
	A <tw-meter> is a special element produced by (meter:).
*/
tw-meter {
	display:block;
}

183
184
185
186
187
188
189
190
191
/*** Inner passage formatting ***/

/*
	These are the primary clickable game elements:
	<tw-link>  : passage links
	.link      : enchantment links
	tw-icon    : the undo button
*/

192
193
194
195
196
197
// This ensures that hooks styled with borders, etc. won't be visible if they have their
// contents suppressed by an (if:) macro.
tw-hook:empty, tw-expression:empty {
	display:none;
}

198
199
200
201
202
203
tw-error {
	display: inline-block;
	border-radius: 0.2em;
	padding: 0.2em;
	font-size: 1rem;
	cursor: help;
204
	white-space:pre-wrap;
205
	&.error {
206
		background-color: hsla(312, 72%, 55%, 0.6); // A demure pink
Leon Arnott's avatar
Leon Arnott committed
207
		color:$color;
208
209
	}
	&.warning {
210
		background-color: hsla(30, 72%, 55%, 0.6); // A stained orange
Leon Arnott's avatar
Leon Arnott committed
211
		color:$color;
212
213
214
215
216
217
218
219
220
221
222
		display: none; // Only available in debug mode.
		.debug-mode & {
			display: inline;
		}
	}
}
tw-error-explanation {
	display: block;
	font-size: 0.8rem;
	line-height: 1rem;
}
223
tw-open-button, tw-folddown {
224
225
226
227
228
229
	cursor: pointer;
	line-height: 0em;
	border-radius: 1px;
	border: 1px solid black;
	font-size: 0.8rem;
	margin: 0 0.4rem;
230
	padding:2px;
231
	white-space:pre;
232
233
}
tw-folddown {
234
	&::after {
235
236
		content: "\25b6";
	}
237
	&.open::after {
238
		content: "\25bc";
239
240
	}
}
241
242
243
tw-open-button::after {
	content: "Open";
}
244
245
246
247
248
249
250
251
252
tw-notifier {
	border-radius: 0.2em;
	padding: 0.2em;
	font-size: 1rem;
	background-color: hsla(45, 72%, 55%, 0.4); // A bright yellow.
	display: none; // Only available in debug mode.
	.debug-mode & {
		display: inline;
	}
253
254
255
	&::before {
		content: attr(message);
	}
256
}
257
258
259
260
261
262
263
264
265
266

/*
	When a Colour type is printed, it comes out as a <tw-colour> element.
*/
tw-colour {
	border: 1px solid black;
	display: inline-block;
	width: 1em;
	height: 1em;
}