about summary refs log tree commit diff stats
path: root/app/assets/stylesheets/application.css.scss
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets/stylesheets/application.css.scss')
-rw-r--r--app/assets/stylesheets/application.css.scss209
1 files changed, 209 insertions, 0 deletions
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss new file mode 100644 index 0000000..6ec040a --- /dev/null +++ b/app/assets/stylesheets/application.css.scss
@@ -0,0 +1,209 @@
1/*
2 * This is a manifest file that'll be compiled into application.css, which will include all the files
3 * listed below.
4 *
5 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
6 * vendor/assets/stylesheets directory can be referenced here using a relative path.
7 *
8 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
9 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
10 * files in this directory. Styles in this file should be added after the last require_* statement.
11 * It is generally better to create a new file per style scope.
12 *
13 *= require normalize-rails
14 *= require_tree .
15 *= require_self
16 */
17
18@import url('https://fonts.googleapis.com/css?family=Inconsolata');
19
20body#main-body {
21 background-color: #bfefff;
22 height: 100%;
23}
24
25#container {
26 height: 100%;
27 margin: 7em auto 0;
28 width: 66%;
29 box-sizing: border-box;
30 min-width: 890px;
31}
32
33#banner {
34 background-image: image-url("walk_cycle.png");
35 background-repeat: repeat-x;
36 width: 100%;
37 padding: 1em;
38 box-sizing: border-box;
39 text-indent: -9999px;
40 height: 80px;
41 margin-bottom: -80px;
42 position: relative;
43 top: -70px;
44}
45
46#main {
47 display: -webkit-flex;
48 display: flex;
49 height: 100%;
50 background-color: white;
51}
52
53#content {
54 width: 70%;
55 box-sizing: border-box;
56 padding-top: 1em;
57}
58
59#sidebar {
60 box-sizing: border-box;
61 padding: 1em;
62 width: 30%;
63 box-sizing: border-box;
64 font-size: .75em;
65 color: black;
66 height: 100%;
67 border-left: 1px solid #eee;
68}
69
70#sidebar h2 {
71 font-size: 1em;
72}
73
74#flash {
75 width: 100%;
76 text-align: center;
77 padding: .25em;
78 font-weight: bold
79}
80
81.flash-notice {
82 background-color: #fffde8;
83}
84
85.flash-alert {
86 background-color: #ff6a6a;
87}
88
89html {
90 height: 100%;
91}
92
93body#userdata-body {
94 background-color: #eeeeee;
95 height: 100%;
96}
97
98#userdata-container {
99 margin: 4em auto 0;
100 width: 25%;
101}
102
103#userdata-form {
104 background-color: #fefefe;
105 -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
106 -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
107 box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
108 border-radius: 2px 2px 2px 2px;
109 -moz-border-radius: 2px 2px 2px 2px;
110 -webkit-border-radius: 2px 2px 2px 2px;
111 padding: 1em;
112}
113
114#userdata-form .field {
115 margin-bottom: 1em;
116}
117
118#userdata-form .field label {
119 display: block;
120 margin-bottom: .25em;
121}
122
123#userdata-form input[type=text], #userdata-form input[type=password] {
124 font-size: 24px;
125 padding: 3px;
126 width: 100%;
127 box-sizing: border-box;
128 -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.7);
129 -moz-box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.7);
130 box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.7);
131 border: 1px solid #ddd;
132 outline: 0;
133 border-radius: 0;
134}
135
136.remember-me-field {
137 float: left;
138}
139
140.submit-field {
141 text-align: right;
142}
143
144.userdata-link {
145 margin: 1em;
146}
147
148.userdata-link a {
149 text-decoration: none;
150}
151
152.userdata-link a:hover {
153 text-decoration: underline;
154}
155
156#userdata-form, .userdata-link a, .userdata-link a:visited {
157 color: #555d66;
158}
159
160#userdata-form label, .userdata-link a {
161 font-size: .75em;
162}
163
164#userdata-flash {
165 color: black;
166 background-color: white;
167 padding: .75em;
168 margin-bottom: 2em;
169 font-size: .8em;
170 -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
171 -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
172 box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
173}
174
175.userdata-flash-alert {
176 border-left: 5px solid red;
177}
178
179.userdata-flash-notice {
180 border-left: 5px solid green;
181}
182
183.userdata-flash-tag {
184 font-weight: bold;
185}
186
187.sidebar-module + .sidebar-module {
188 margin-top: 2em;
189}
190
191.sidebar-module ul {
192 padding-left: 0;
193}
194
195.sidebar-module li {
196 list-style-type: none;
197}
198
199.sidebar-module a {
200 text-decoration: none;
201}
202
203.sidebar-module a:hover {
204 text-decoration: underline;
205}
206
207.sidebar-module a:visited {
208 color: #352712;
209}