-
Notifications
You must be signed in to change notification settings - Fork 1.3k
/
common.sass
657 lines (564 loc) · 12.3 KB
/
common.sass
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
// Fat Free CRM
// Copyright (C) 2008-2011 by Michael Dvorkin
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU Affero General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU Affero General Public License for more details.
//
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>.
//------------------------------------------------------------------------------
$color_title: #342d7e
$color_subtitle: darkslateblue
$sidebar_width: 210px
// Common page elements.
//------------------------------------------------------------------------------
.title
border-bottom: 1px gray solid
color: $color_title
font:
size: 17px
weight: bold
padding-bottom: 2px
img
position: relative
top: 2px
.title_tools
font-size: 12px
float: right
margin: 4px 0px 0px 0px
.subtitle
border-bottom: 1px silver solid
color: #2f2f2f
font:
size: 13px
weight: bold
a:link, a:visited
color: $color_subtitle
text-decoration: none
ahover:
background: none
.subtitle_tools
font-size: 11px
float: right
.radio_box
line-height: 20px
input
position: relative
top: -2px
.check_box
line-height: 20px
input
position: relative
top: -3px
label
font-size: 11px
// Main area (page and form).
//------------------------------------------------------------------------------
.tabless
margin: auto
width: 480px
.standalone
background: whitesmoke
border: 20px lightsteelblue solid
margin: 75px auto 6px auto
padding: 20px
width: 400px
-moz-border-radius: 6px
-moz-box-shadow: 5px 5px 15px #bbb, -5px 0px 15px #bbb
-webkit-border-radius: 6px
-webkit-box-shadow: 5px 5px 15px #bbb, -5px 0px 15px #bbb
input[type="text"], input[type="password"]
font-size: 16px
padding: 2px
width: 355px
input[type="submit"]
font-size: 14px
.tabbed
padding: 12px 12px 12px 16px
.main
background: white
padding: 8px 15px 15px 15px
-moz-border-radius: 4px
-moz-box-shadow: 2px 2px 8px #bbb, -2px 0px 8px #bbb
-webkit-border-radius: 4px
-webkit-box-shadow: 2px 2px 8px #bbb, -2px 0px 8px #bbb
.sidebar
color: #3f3f3f
font-size: 11px
padding: 0px 12px 0px 0px
width: $sidebar_width
.form
background: white
h4
font-size: 18px
height: 30px
.tools
font-size: 10px
float: right
padding: 0px 0px 0px 4px
&#comment_new_tools
margin: 8px 0px 0px 0px
.label
color: #3f3f3f
font-size: 12px
margin: 8px 0px 0px 0px
padding: 0px 8px 0px 0px
.top
margin: 5px 0px 0px 0px
.req
background: url("/images/asterisk.gif") no-repeat scroll center right transparent
color: navy
display: inline-block
.intro
color: dimgray
font-size: 12px
padding-top: 5px
.section
background: whitesmoke
color: #3f3f3f
margin: 0px 0px 2px 0px
padding: 4px 15px 8px 15px
table
width: 500px
&.address
width: 240px
border-spacing: 0px
border-collapse: collapse /* IE */
td
vertical-align: top
padding: 0px
input[type="text"], input[type="password"], select
width: 240px
display: block
.remote
border: 5px lightblue solid
background: whitesmoke
margin: 0px
padding: 0px 10px 0px 10px
position: relative
.close
background: lightblue
border:
top: 1px gainsboro solid
left: 1px gainsboro solid
bottom: 1px grey solid
right: 1px grey solid
color: navy
cursor: pointer
height: 16px
margin: 3px
position: absolute
right: 0px
text-align: center
top: 0px
width: 17px
.buttonbar
border-top: 1px gray solid
margin: 8px auto
padding-top: 8px
.section input, .sidebar input, .inline input,
.section select, .sidebar select, .inline select,
.section textarea, .sidebar textarea, .inline textarea
margin: 3px 0px 0px 0px
vertical-align: middle
.cool
color: darkgreen
.warn
color: crimson
.urgent
color: darkred
.black
color: black
.white
color: white !important
.grayed
color: silver !important
.amount
background: palegreen
color: black
font-size: 11px
text-align: center
padding: 0px 3px 0px 3px
-moz-border-radius:
topleft: 3px
topright: 3px
bottomleft: 3px
bottomright: 3px
-webkit-border:
top-left-radius: 3px
top-right-radius: 3px
bottom-left-radius: 3px
bottom-right-radius: 3px
.strip
background: gainsboro
color: black
float: left
font-size: 11px
margin: 0px 6px 0px 0px
padding: 1px 4px 1px 3px
text-align: right
width: 75px
-moz-border-radius:
topleft: 7px
bottomleft: 7px
-webkit-border:
top-left-radius: 7px
bottom-left-radius: 7px
// Indentation classes:
// - indent: for use with strip (regular indentation).
// - indentslim: for use with avatar and no strip (Contacts).
// - indentwide: for use with strip + checkbox (Tasks).
// - indentfull: for use with strip + avatar (Admin/Users).
.indent
margin-left: 88px
.indentslim
margin-left: 38px
.indentwide
margin-left: 106px
.indentfull
margin-left: 126px
.bucket
margin: 0px 0px 10px 0px
.prefix
width: 30px
font-size: 10px
.comment
background: #f2f2f2
border-bottom: 1px gainsboro solid
margin: 2px 0px 0px 0px
overflow: hidden
padding: 4px
list-style: none
// -moz-border-radius:
// bottomleft: 8px
// bottomright: 8px
// -webkit-border-radius:
// bottom-left-radius: 8px
// bottom-right-radius: 8px
&#comment_new
margin: 3px 0px 0px 0px
input[type=text]
border: 1px #cfcfcf solid
color: grey
font-size: 11px
margin: 3px 0px 0px 0px
padding: 3px
width: 500px
textarea
font-size: 11px
height: 110px
margin: 3px 0px 0px 0px
padding: 3px
width: 500px
.gravatar
float: left
margin: 3px 10px 3px 3px
.body
display: inline
font-size: 11px
tt
font-size: 10px
color: #666666
dt
padding: 0px
margin: -10px 0px 0px 36px
p
margin: 10px 0px 0px 0px
// Avoid collision with .email CSS class which is used to display Task category strip.
.mail
background: #f2f2f2
border-bottom: 1px gainsboro solid
margin: 2px 0px 0px 0px
overflow: hidden
padding: 4px
list-style: none
.gravatar
float: left
margin: 3px 10px 3px 3px
.subject
color: black
.body
display: inline
font-size: 11px
tt
font-size: 10px
color: #666666
dt
padding: 0px
margin: -10px 0px 0px 36px
p
margin: 10px 0px 0px 0px
.toggle
font-weight: normal
#export
font-size: 9px
margin: 12px 0px 0px 0px
#paginate
float: right
font-size: 10px
margin: 4px 0px 0px 0px
#paging
float: right
margin: 7px 5px 0px 0px
.confirm
background: #cdfecd
border-left: 10px palegreen solid
font-size: 11px
margin: 0px 0px 6px 0px
padding: 6px
// Single-row lists.
//------------------------------------------------------------------------------
.log
padding: 8px 0px 0px 0px
h3
border-bottom: 1px #2f2f2f dotted
color: #2f2f2f
margin: 0px 0px 4px 0px
padding: 2px 0px 2px 86px
&.overdue
color: crimson
border-bottom: 1px crimson dotted
&.due_asap
color: darkred
border-bottom: 1px darkred dotted
&.due_today
color: darkgreen
border-bottom: 1px darkgreen dotted
li
color: #3f3f3f
font-size: 12px
list-style: none
padding: 3px 0px 3px 0px
tt
color: dimgray
font-size: 11px
input[type=checkbox]
float: left
margin: 0px 4px 0px 0px
// Two-row lists.
//------------------------------------------------------------------------------
.list
padding: 8px 0px 0px 0px
li
border-bottom: 1px silver dotted
clear: both
color: #3f3f3f
font-size: 12px
list-style: none
padding: 6px 0px 6px 0px
.gravatar
float: left
padding: 0px 8px 0px 0px
tt
color: dimgray
font-size: 11px
dt
color: #3f3f3f
font-size: 11px
padding: 2px 0px 0px 0px
dt a:link, dt a:visited
color: #3f3f3f
font-weight: bold
text-decoration: none
dt a:hover
background: dimgray
color: white
font-weight: bold
text-decoration: none
// Sidebar, filters, and selectors.
//------------------------------------------------------------------------------
.filters, .panel
background: snow
margin: 0px 0px 12px 0px
padding: 6px 8px 6px 8px
-moz-border-radius: 4px
-webkit-border-radius: 4px
-moz-box-shadow: 2px 2px 8px #bbb, -2px 0px 8px #bbb
-webkit-box-shadow: 2px 2px 8px #bbb, -2px 0px 8px #bbb
.filters
h4
color: navy
font-size: 12px
font-weight: bold
input[type=text]
margin-bottom: 4px
.panel
div
margin: 0px 0px 10px 0px
h4
font-size: 13px
font-weight: bold
li
border-bottom: 1px silver dotted
font-size: 12px
list-style: none
padding: 2px 0px 3px 0px
dt
float: right
font-size: 11px
font-weight: bold
tt
font-size: 11px
&.last
border-bottom: none
.caption
border-bottom: 1px grey solid
color: navy
font:
size: 12px
weight: bold
margin: 4px 0px 2px 0px
padding: 2px 0px 2px 0px
&#recently
background: floralwhite
&#summary
background: oldlace
p
margin: 4px 0px 4px 0px
.selector
color: black
cursor: pointer
font-size: 10px
text-align: center
.on
background: lightgoldenrodyellow
border: 1px silver inset
.off
background: lightgrey
border: 1px silver outset
.arrow
font-size: 9px
padding: 0px 2px 3px 0px
.left
-moz-border-radius:
bottomleft: 9px
topleft: 9px
-webkit-border:
bottom-left-radius: 9px
top-left-radius: 9px
.right
-moz-border-radius:
bottomright: 9px
topright: 9px
-webkit-border:
bottom-right-radius: 9px
top-right-radius: 9px
// Dropdown menu.
//------------------------------------------------------------------------------
.menu
background: #f4f5eb
border:
top: 1px solid #ddd
left: 1px solid #ddd
right: 1px solid #666
bottom: 1px solid #666
left: 0px
padding: 2px 0px
position: absolute
top: 0px
width: 12em
-webkit-box-shadow: 10px 10px 15px gainsboro
ul
list-style: none
margin: 0px
padding: 0px
li
list-style-position: outside
a
color: #555
cursor: default
display: block
margin: 0px 2px
outline: none
padding: 4px 15px
text-decoration: none
ahover:
background: mediumblue //#006
color: #fff
// Star ratings.
//------------------------------------------------------------------------------
// .rating .stars {
// width: 125px;
// height: 25px;
// float: left;
// background: transparent url('../images/stars.gif') repeat-x right top;
// margin-right: 5px;
// }
//
// .rating .clearer {
// clear: left;
// }
//
// .rating .label {
// line-height: 16px;
// font-size: 90%;
// }
//
// .rating .stars .star {
// width: 25px;
// height: 25px;
// cursor: pointer;
// background: transparent url('../images/stars.gif') no-repeat 0 0;
// float: left;
// }
//
// .rating .stars .star.on {
// background-position: 0 -25px;
// }
//
// .rating.selected .stars .star.on {
// background-position: 0 -50px;
// }
//
// .rating .stars .star.on.half {
// background-position: 0 -25px;
// width: 12px;
// margin-right: 12px;
// }
//
// .rating.selected .stars .star.on.half {
// width: 25px;
// margin-right: 0px;
// background-position: 0 -50px;
// }
// Admin Tabs
.inline_tabs ul
margin: 20px 0
li
display: inline
a
display: inline-block
background: #FAFAFA
padding: 5px
border: 1px solid #BBB
margin-right: 5px
width: 75px
text-align: center
color: black
&.selected a
background: #1E4262
color: white
font-weight: bold
.list li
cursor: move
span.handle img
vertical-align: middle
margin-right: 5px
.tags, .list li dt .tags
a:link, a:visited
:background lightsteelblue
:color white
:font-weight normal
:padding 0px 6px 1px 6px
:-moz-border-radius 8px
:-webkit-border-radius 8px
a:hover
:background steelblue
:color yellow