Twine Theme Studio @ A11ySpot  //  twine.A11ySpot.com

1/* SugarCube 2 theme made with Twine Theme Studio.
2   Paste into Twine: Story > Details > Stylesheet. */
3
4/* Page */
5
6html {
7  font-family: Helmet, Freesans, sans-serif;
8  font-size: 16px;
9}
10
11body {
12  background-color: #111111;
13  color: #eeeeee;
14}
15
16/* Story area */
17
18#story {
19  margin-left: 20em;
20}
21
22.passage {
23  line-height: 1.75;
24  text-align: left;
25  transition: opacity 400ms ease-in;
26}
27
28.passage h1, .passage h2, .passage h3 {
29  font-family: Helmet, Freesans, sans-serif;
30  color: #eeeeee;
31  line-height: 1.25;
32}
33
34.passage blockquote {
35  border-left: 3px solid #eeeeee;
36  margin-left: 0;
37  padding-left: 1em;
38  color: #c2c2c2;
39  font-style: italic;
40}
41
42.passage hr {
43  border: none;
44  border-top: 1px solid #535353;
45}
46
47/* Links */
48
49a, .link-internal {
50  color: #6283d8;
51  text-decoration: none;
52}
53
54a:hover, .link-internal:hover {
55  color: #88aaff;
56  text-decoration: underline;
57}
58
59/* Sidebar (UI bar) */
60
61#ui-bar {
62  width: 17.5em;
63  background-color: #222222;
64  color: #eeeeee;
65  border-right-color: #444444;
66}
67
68#ui-bar.stowed {
69  left: -15.5em;
70}
71
72#ui-bar.stowed ~ #story {
73  margin-left: 4.5em;
74}
75
76#story-title {
77  font-family: Helmet, Freesans, sans-serif;
78  color: #eeeeee;
79}
80
81#menu ul, #menu li:not(:first-child) {
82  border-color: #444444;
83}
84
85#menu li a {
86  color: #eeeeee;
87  text-decoration: none;
88  text-transform: uppercase;
89  letter-spacing: 0.05em;
90}
91
92#menu li a:hover {
93  background-color: #2f3546;
94  border-color: #444444;
95  text-decoration: none;
96}
97
98#ui-bar-toggle, #ui-bar-history [id|="history"] {
99  color: #eeeeee;
100  border-color: #444444;
101  border-radius: 0px;
102}
103
104#ui-bar-toggle:hover, #ui-bar-history [id|="history"]:hover {
105  background-color: #2f3546;
106  border-color: #444444;
107}
108
109/* Buttons and inputs */
110
111button {
112  background-color: #2e4d9c;
113  color: #eeeeee;
114  border: 1px solid #5e75b1;
115  border-radius: 0px;
116  padding: 0.4em 0.9em;
117  text-decoration: none;
118}
119
120button:hover {
121  background-color: #4b65a8;
122  color: #eeeeee;
123  text-decoration: none;
124  border-color: #7b8dbd;
125}
126
127button.link-internal, button.link-internal:hover {
128  color: #eeeeee;
129  text-decoration: none;
130}
131
132input, select, textarea {
133  background-color: #1e1e1e;
134  color: #eeeeee;
135  border: 1px solid #8b8b8b;
136  border-radius: 0px;
137}
138
139input:focus, select:focus, textarea:focus {
140  border-color: #6283d8;
141  outline: none;
142}