Project

General

Profile

« Previous | Next » 

Revision 8203

Redesigned the /admin configuration pages to better match our new MetacatUI design. Looks good in both /context/admin view and the #external view using metacatUI

View differences:

admin.css
26 26
  * along with this program; if not, write to the Free Software
27 27
  * Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
28 28
  */
29
body {
30
	font-family: Arial, sans-serif;
31
	font-size: 11pt;
32
	margin-left: 30px;
33
	margin-right: 30px;
34
	width: 700px;
29

  
30
/* Import font families */
31
@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);
32
/* Oswald weights:
33
Light 300
34
Normal 400
35
Bold 700
36
*/
37
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,400italic);
38
/* Source Sans Pro weights:
39
Light 300
40
Normal 400
41
Normal italic 400
42
Semi-bold 600
43
Bold 700
44
*/
45

  
46

  
47
/* THE BASICS
48
-------------------------------------------------- */
49
html{
50
	margin: 0;
51
	padding: 0;
52
	width: 100%;
53
	height: 100%;
35 54
}
55
body{
56
	font: 400 1em/1em "Source Sans Pro", Arial, sans-serif;
57
	color: #333333;
58
	margin: 20px 20px 20px 40px;
59
	padding: 0px;
60
	width: 90%;
61
}
36 62

  
63
a{
64
	color: #166194;
65
	text-decoration: none;
66
}
67

  
68
a:hover{
69
	color: #3399CC;
70
	text-decoration: none;
71
}
72

  
73
h1{
74
	font: 400 3em/3em "Oswald", Arial, sans-serif;
75
	-webkit-margin-before: 0.2em;
76
	-webkit-margin-after: 0.2em;
77
	display: block;
78
	clear: both;
79
}
80

  
37 81
h2 {
38
	margin-top: 30px;
39
	margin-bottom: 10px;
82
	font: 400 2.5em/2.5em "Oswald", Arial, sans-serif;
83
	-webkit-margin-before: 0.2em;
84
	-webkit-margin-after: 0.2em;
85
	display: block;
86
	clear: both;
40 87
}
41 88

  
42 89
h3 {
43
	margin-top: 8px;
44
	margin-bottom: 8px;
90
	font: 400 1.5em/1.5em "Oswald", Arial, sans-serif;
91
	-webkit-margin-before: 0.2em;
92
	-webkit-margin-after: 0.2em;
93
	display: block;
94
	clear: both;
95
	margin-top: 20px;
45 96
}
46 97

  
47 98
input {
48 99
	padding-left: 4px;
49 100
	width: 400px;
101
	border: 1px solid #AAAAAA;
102
	font: 400 1em/1em Source Sans Pro, Arial, sans-serif;
103
	background-color:#FFFFFF;
104
	color: #333333;
105
	border-radius: 5px;
106
	-moz-border-radius: 5px;
107
	-webkit-border-radius: 5px;
50 108
}
51 109

  
110
select{
111
	border: 1px solid #AAAAAA;
112
	font: 400 1em/1em Source Sans Pro, Arial, sans-serif;
113
	height: 2em;
114
}
115

  
52 116
input[type="submit"] {
53 117
	width: 100px;
54 118
	margin-right: 5px;
55 119
	margin-top: 20px;
120
	cursor: pointer;
56 121
}
57 122

  
58 123
input[type="radio"] {
59 124
	margin-bottom: 4px;
60
	width: 13px;
125
	width: 15px;
126
	height: 15px;
61 127
}
62 128

  
63 129
input[type="checkbox"] {
64
	width: 13px;
130
	width: 15px;
131
	height: 15px;
132
	float: left;
65 133
}
66 134

  
67 135
label {
68
	font-size: 12pt;
136
	font-size: 1.1em;
137
	line-height: 1.1em;
138
	display: block;
139
	margin-top: 10px;
69 140
}
70 141

  
71
table {
72
	margin-left: auto;
73
	margin-right: auto;
74
}
75 142

  
76
.config-line {
77
	color: #dddddd;
78
	background-color: #dddddd;
79
	height: 1px;
80
}
81 143

  
82
.username-input {
83
	width: 500px;
144
/* NAVIGATION AND HEADER
145
------------------------------------- */
146
.small-message{
147
	margin-top: 20px;
148
	float: right;
84 149
}
85 150

  
86
.login-input {
87
	width: 300px;
151
.small-message a{
152
	font: 400 20px/20px Oswald;
153
	color: #166194;
154
	text-transform: uppercase;
155
	margin: 0 10px;
156
	text-decoration: none;
88 157
}
89 158

  
90
br {
91
	clear: left;
159
body > img {
160
	float: right;
161
	max-height: 70px;
162
	width: auto;
92 163
}
93 164

  
94
br.auth-header {
95
	margin-bottom: 80px;
165
/* FORMS
166
----------------------------------------*/
167
.textinput {
168
	margin-left: 1em;
169
	vertical-align: middle;
170
	width: 30em;
171
	height: 2.2em;
172
	font: 400 1em/2em Source Sans Pro;
173
	border-radius: 5px;
174
	-moz-border-radius: 5px;
175
	-webkit-border-radius: 5px;
176
	border: 1px solid #aaa;
96 177
}
97 178

  
98
br.main-header {
99
	margin-bottom: 70px;
179
.textinput-label {
180
	text-align: right;
181
	float: left;
182
	width: 200px;
100 183
}
101 184

  
102
br.skins-header {
103
	margin-bottom: 50px;
185
.textinput-description {
186
	margin-left: 215px;
187
	color: #777777;
188
	font-size: 0.8em;
189
	margin-top: 5px;
190
	clear: both;
104 191
}
105 192

  
106
.button {
193
.button, input[type="submit"] {
107 194
	width: 100px;
108 195
	margin-right: 5px;
109 196
	margin-top: 20px;
197
	font: 400 1.2em/1.5em Oswald, Arial;
198
	cursor: pointer;
110 199
}
111 200

  
112
.left-button {
113
	width: 100px;
114
	margin-left: 275px;
115
	margin-right: 5px;
116
	margin-top: 20px;
201

  
202
.checkradio-label-inline {
203
 	display: inline;
204
 	
205
	vertical-align: middle;
117 206
}
118 207

  
119
.warning {
120
	color: red;
208
.checkradio-description {
209
	margin-left: 4.25em;
210
	color: gray;
211
	font-size: 11;
121 212
}
122 213

  
123
.heading-comment {
124
	margin-bottom: 0px;
214
.question-mark {
215
	float: left;
216
	vertical-align: middle;
217
	margin-left: 10px;
218
	height: 20px;
219
	cursor: pointer;
125 220
}
126 221

  
127
.small-message {
128
	margin-top: 10px;
129
	font-size: 11px;
222
.form-row {
223
	margin-top: .5em;
224
	clear: both;
130 225
}
131 226

  
227
.form-row input,
228
.form-row select,
229
.form-row span{
230
	float: left;
231
}
232

  
233

  
234
/* MESSAGES
235
----------------------------------------*/
236

  
132 237
.message-text {
133
	font-size: 9pt;
134
	font-weight: bold;
135
	color: blue;
136
	margin-bottom: 5px;
238
	font: 400 1em/1em Source Sans Pro, Arial, sans-serif;
239
	color: #003366;
240
	margin: 10px 0px;
241
	background-color: #B4C6CC;
242
	border: 1px solid #003366;
243
	padding: 10px;
137 244
}
138 245

  
139 246
.success-text {
140
	font-size: 9pt;
141
	font-weight: bold;
142
	color: green;
143
	margin-bottom: 5px;
247
	font: 400 1em/1em Source Sans Pro, Arial, sans-serif;
248
	color: #003300;
249
	margin: 10px 0px;
250
	padding: 10px;
251
	background-color: #99CC99;
252
	border: 1px solid #003300;
144 253
}
145 254

  
146
.error-text {
147
	font-size: 9pt;
148
	color: red;
149
	margin-bottom: 5px;
255
.error-text,
256
.formfield-error-text {
257
	font: 400 1em/1em Source Sans Pro, Arial, sans-serif;
258
	color: #660000;
259
	margin: 10px 0px;
260
	padding: 10px;
261
	background-color: #CC9999;
262
	border: 1px solid #660000;
150 263
}
151 264

  
152
.error-header {
153
	font-size: 9pt;
154
	font-weight: bold;
155
	color: red;
265
.formfield-error-header {
266
	font: 400 1em/1em Source Sans Pro, Arial, sans-serif;
267
	color: #A52A2A;
156 268
}
157 269

  
158
.formfield-error-text {
159
	font-size: 9pt;
270
.warning {
160 271
	color: red;
161
	margin-bottom: 5px;
162 272
}
163 273

  
164
.formfield-error-header {
274

  
275
/* OTHER
276
----------------------------------------*/
277

  
278
.clear{
279
	clear: both;
280
}
281

  
282
.username-input {
283
	width: 500px;
284
}
285

  
286
.login-input {
287
	width: 300px;
288
}
289

  
290
.buttons-wrapper{
291
	clear:both;
292
	margin-top: 20px;
293
}
294
.heading-comment {
295
	margin-bottom: 0px;
296
}
297

  
298

  
299
.error-header {
165 300
	font-size: 9pt;
166 301
	font-weight: bold;
167 302
	color: red;
168 303
}
169 304

  
305

  
170 306
.configured-tag {
171 307
	color: green;
172 308
	width: 115px;
......
191 327
}
192 328

  
193 329
.smaller-text {
194
	font-size: smaller;
330
	font-size: 0.5em;
195 331
	display: inline;
196 332
}
197 333

  
......
205 341
	margin-left: 2em;
206 342
}
207 343

  
208
.checkradio {
209
	text-align: left;
210
	vertical-align: middle;
211
	width: 3em;
212
}
213 344

  
214
.checkradio-label {
215
	text-align: left;
216
	vertical-align: middle;
217
	margin-left: 1em;
218
}
219

  
220
.checkradio-label-inline {
221
 	display: inline;
222
	vertical-align: middle;
223
}
224

  
225
.checkradio-description {
226
	margin-left: 4.25em;
227
	color: gray;
228
	font-size: 11;
229
}
230

  
231
.textinput {
232
	margin-left: 1em;
233
	vertical-align: middle;
234
	width: 30em;
235
}
236

  
237
.textinput-label {
238
	text-align: right;
239
	vertical-align: middle;
240
	float: left;
241
	width: 200px;
242
}
243

  
244
.textinput-description {
245
	margin-left: 210px;
246
	color: gray;
247
	font-size: 11;
248
}
249

  
250
.question-mark {
251
	float: right;
252
	vertical-align: middle;
253
	margin-right: 5px;
254
}
255

  
256
.form-row {
257
	margin-top: .5em;
258
}
259

  

Also available in: Unified diff