~ubuntuone-pqm-team/canonical-identity-provider/trunk
» Revision
1172.1.2
: src/identityprovider/static/css/ubuntuone.css
« back to all changes in this revision
Viewing changes to src/identityprovider/static/css/ubuntuone.css
- browse files at revision 1172.1.2
- compare with another revision
- download diff
- download tarball
- view history from revision 1172.1.2
- Committer: Stephen Stewart
- Date: 2014-08-06 11:25:32 UTC
- mto: This revision was merged to the branch mainline in revision 1173.
- Revision ID: stephen.stewart@canonical.com-20140806112532-c2273u97hxgtqqb9
* add vendor auto prefixing
* comment out linting for now
* comment out linting for now
- files added:
- package.json
- files removed:
- src/identityprovider/static/css/all.css
- files modified:
- README
added
removed
src/identityprovider/static/css/ubuntuone.css
1
/* Boxes -------------------------------------------------------------------*/
2
.box {
3
background: none repeat scroll 0 0 #F7F6F5;
4
border-radius: 4px;
5
margin-bottom: 3em;
6
padding: 0 1em 1em;
7
}
8
.box .title {
9
border-bottom: 1px dotted #CCCCCC;
10
margin: 0 -1em 1em;
11
padding: .5em 1em;
12
}
13
14
.info-items {
15
margin:2em;
16
}
17
18
th.cookie,
19
th.cookie-name {
20
width:15%;
21
}
22
th.purpose {
23
width:30%;
24
}
25
26
.legal th,
27
.legal td {
28
padding:0.5em;
29
border:1px dotted #ccc;
30
}
31
32
/* Header -------------------------------------------------------------------*/
33
header .wrapper {
34
background: url(../identityprovider/ubuntuone/img/dots.png) no-repeat 100% -10px;
35
min-height:34px;
36
overflow: visible;
37
}
38
@media all and (min-width:768px) {
39
header .wrapper {
40
background: url(../identityprovider/ubuntuone/img/dots.png) no-repeat 100% 8px;
41
min-height:64px;
42
}
43
}
44
header .wrapper h1 {
45
float: left;
46
}
47
#ac-status {
48
text-align: right;
49
float: right;
50
margin-top: -10px;
51
}
52
#u1-logo {
53
top:-10px;
54
float: left;
55
text-indent: -999em;
56
display: block;
57
background: url(../identityprovider/ubuntuone/img/u1-small.png) no-repeat left;
58
width: 91px;
59
height: 33px;
60
position: relative;
61
z-index: 1;
62
}
63
64
.user-name {
65
display: block;
66
}
67
68
@media all and (min-width:480px) {
69
70
#ac-status {
71
margin-bottom: 20px;
72
max-width: 50%;
73
}
74
75
.user-name {
76
display: inline;
77
}
78
79
}
80
81
.strapline {
82
margin:0 0 1em;
83
color:#676767;
84
}
85
86
/* Messages -------------------------------------------------------------------*/
87
88
.message:last-child {
89
margin-bottom: 1em;
90
}
91
92
.message {
93
border-radius: 4px;
94
padding: 5px;
95
margin-top: 1em;
96
background: #f3f2f1;
97
}
98
99
#missing_backup_device, .unverified-email-warning {
100
margin-bottom: 1em
101
}
102
103
@media all and (min-width:768px) {
104
105
.message {
106
padding: 0.6em 1em;
107
}
108
}
109
110
.message p:last-child {
111
margin: 0;
112
}
113
114
.error {
115
background: #DF382C;
116
color: white;
117
}
118
119
.error a {
120
color: white;
121
text-decoration: underline;
122
}
123
124
.success,
125
.informational,
126
.info {}
127
128
/* Form box -------------------------------------------------------------------*/
129
.form-box {
130
background: #F7F7F7;
131
border-top: 1px solid #CDCDCD;
132
border-bottom: 1px solid #CDCDCD;
133
padding: 20px 15px;
134
margin: 0 -15px;
135
}
136
137
.form-box .title {
138
border-bottom: 1px dotted #D1D1D1;
139
padding-bottom: 18px;
140
margin-bottom: 1em;
141
line-height: 1;
142
}
143
144
.action-title:before {
145
content: " → ";
146
display: inline;
147
}
148
149
a.trusted-rp-name:link,
150
a.trusted-rp-name:active,
151
a.trusted-rp-name:hover,
152
a.trusted-rp-name:focus,
153
a.trusted-rp-name:visited {
154
color: inherit;
155
}
156
157
a.trusted-rp-name:hover {
158
text-decoration: underline;
159
}
160
161
.form-box .input-row,
162
.edit-account-details .input-row {
163
width: inherit;
164
}
165
166
.input-row {
167
width: 290px;
168
margin-bottom: 20px;
169
}
170
171
.radio-label-row input[type=radio],
172
.radio-label-row input[type=checkbox] {
173
display:inline-block;
174
margin-right: 0.5em;
175
}
176
177
.radio-label-row label {
178
display:inline-block;
179
}
180
181
input[type=text],
182
input[type=email],
183
input[type=password] {
184
border: 1px solid #AEA79F;
185
padding: 0.3em;
186
display: block;
187
width: 100%;
188
box-sizing: border-box;
189
}
190
191
192
.ie8 input[type=text],
193
.ie8 input[type=email],
194
.ie8 input[type=password] {
195
line-height: 1;
196
}
197
.ie8 input[type=password] {
198
font-family: Arial, sans-serif;
199
}
200
201
.haserrors input[type=text],
202
.haserrors input[type=email],
203
.haserrors input[type=password] {
204
border: 1px solid #DF382C;
205
}
206
207
form .error {
208
color: #DF382C;
209
font-weight: bold;
210
font-size: 14px;
211
background: transparent;
212
}
213
label {
214
display: block;
215
margin-bottom:12px;
216
line-height: 1;
217
}
218
p > label {
219
line-height: inherit;
220
}
221
222
.form-box .actions {
223
border-top: 1px dotted #D1D1D1;
224
padding-top: 20px;
225
margin-top: 20px;
226
}
227
228
.captcha {
229
margin-top: 20px;
230
}
231
232
.accept-tos-input {
233
margin-top: 30px;
234
position: relative;
235
}
236
237
.accept-tos-input input {
238
position: absolute;
239
top: 5px;
240
}
241
242
.accept-tos-input label {
243
margin-left: 20px;
244
line-height: 1.5em;
245
}
246
247
.accept-tos-input .error {
248
display: block;
249
}
250
251
/* password meter */
252
.yui3-passwordmeter-indicatorNode div {
253
margin: 1em 0 0;
254
}
255
256
.yui3-passwordmeter-indicatorNode p {
257
text-shadow: 1px 1px 0 #fff;
258
}
259
260
@media all and (min-width:480px) {
261
262
.form-box {
263
border: 1px solid #CDCDCD;
264
border-radius: 4px;
265
margin: 0 0 1em 0;
266
padding: 18px 22px;
267
}
268
269
270
}
271
@media all and (min-width:768px) {
272
273
.form-box {
274
margin: 0 1em 1em 0;
275
min-width: 315px;
276
}
277
278
279
}
280
281
/* Login -------------------------------------------------------------------*/
282
283
.login .cta {
284
margin-right: 1em;
285
}
286
287
.new-user,
288
.returning-user {
289
margin-bottom: 20px;
290
}
291
292
.readonly .new-user {
293
color: #ccc;
294
}
295
296
.login .forgot-password {
297
display: inline-block;
298
margin-bottom: 0;
299
}
300
301
.related-information {
302
margin-top: 1em;
303
}
304
305
/* Create account ------------------------------------------------------------*/
306
307
.recaptcha-noscript {
308
width: 100%;
309
}
310
311
.recaptcha-challenge-field {
312
width: 100%;
313
box-sizing: border-box;
314
}
315
316
.recaptcha_input_area input {
317
display: inline;
318
}
319
320
.captcha .recaptcha_only_if_privacy {
321
margin-top: -5px;
322
}
323
324
.captchaError #recaptcha_response_field {
325
border: 2px solid #c00 !important;
326
}
327
328
@media all and (min-width:768px) {
329
330
.recaptcha-noscript {
331
height: 330px;
332
}
333
334
}
335
336
/* Login: Dual forms -------------------------------------------------------*/
337
338
.create-form .input-row {
339
margin-bottom: 12px;
340
}
341
342
.create-form .email-input {
343
margin-bottom: 20px;
344
}
345
346
.js .create-form.show-no-js {
347
display: none;
348
}
349
350
.dual-forms {
351
position: relative;
352
}
353
354
.js .user-intention i {
355
font-style: normal;
356
display: none;
357
}
358
359
.js .selected-login .login-form {
360
display: block;
361
}
362
.js .selected-login .create-form {
363
position: absolute;
364
top: 0;
365
right: 0;
366
left: 0;
367
display: none;
368
}
369
370
.js .selected-login i {
371
display: inline;
372
}
373
374
.selected-login .create-title {
375
display: none;
376
}
377
378
/* selected create */
379
.selected-create .login-title {
380
display: none;
381
}
382
.js .selected-create .create-form {
383
position: relative;
384
display: block;
385
}
386
.js .selected-create .login-form {
387
display: none;
388
}
389
390
391
.no-js-create-account {
392
border-top: 1px dotted #ccc;
393
border-bottom: 1px dotted #ccc;
394
padding: 1em 0;
395
margin: 3em 0;
396
text-align: center;
397
color: #666;
398
text-shadow: 1px 1px #fff;
399
font-size: 13px;
400
}
401
402
.user-intention span {
403
cursor: pointer;
404
}
405
406
.user-intention input {
407
vertical-align: top;
408
}
409
410
@media all and (min-width:768px) {
411
412
.related-information {
413
margin-left: 3em;
414
margin-top: 0;
415
padding: 0 0 0 1em;
416
border-left: 1px dotted #ccc;
417
padding: 0 1em;
418
}
419
420
.js .login .returning-user span {
421
display: inline;
422
}
423
424
}
425
426
/* Edit account -----------------------------------------------------------*/
427
428
.edit-account-details {
429
margin-bottom: 2em;
430
}
431
432
.site-date {
433
text-align: right;
434
}
435
436
.listing-section .subtitle {
437
float: right;
438
}
439
440
@media all and (min-width:768px) {
441
442
.edit-account-details input,
443
.edit-account-details select,
444
.edit-account-details .yui3-passwordmeter-content {
445
max-width: 50%;
446
}
447
448
.edit-account-details .yui3-passwordmeter-content input {
449
max-width: none;
450
}
451
452
453
.listing-section {
454
max-width: 70%;
455
}
456
457
.listing-section .subtitle {
458
line-height: 32px;
459
}
460
461
}
462
463
464
.manage-email-adresses {
465
padding-bottom: 2em;
466
margin-bottom: 2em;
467
border-bottom: 1px dotted #ccc;
468
}
469
470
.preferred-email-input select {
471
width: 100%;
472
}
473
474
.device-prefs .legend {
475
margin-top: 15px;
476
margin-bottom: 10px;
477
}
478
479
/* Important! Keeps the delete button separate from Cancel ----------------*/
480
481
.delete-button {
482
float: right;
483
}
484
485
/* Devices ----------------------------------------------------------------*/
486
487
.backupdevice-warn-input label {
488
display: inline;
489
}
490
491
.devices-you-added {
492
margin-bottom: 2em;
493
}
494
495
.codelist {
496
background-color: #F9F9F9;
497
text-align: center;
498
margin: 2em 0;
499
}
500
501
.codelist li {
502
color: #444444;
503
font-family: monospace;
504
text-shadow: 1px 1px 0 #fff;
505
}
506
507
.codelist li:first-child {
508
padding-top: 1em;
509
}
510
.codelist li:last-child {
511
padding-bottom: 1em;
512
}
513
514
.device-name {
515
font-weight: bold;
516
}
517
518
.print-new-codes {
519
float: right;
520
}
521
522
.device-types dt {
523
font-weight: bold;
524
list-style:none;
525
}
526
.device-types dd {
527
margin-left: 18px;
528
}
529
530
/* Applications -----------------------------------------------------------*/
531
532
.used-applications .subtitle {
533
float: right;
534
position: relative;
535
top: 1em;
536
}
537
.application-date {
538
text-align: right;
539
}
540
.application-date + td {
541
text-align: right;
542
}
543
544
/* Emails -----------------------------------------------------------*/
545
546
.preferred-email .email {
547
font-weight: bold;
548
}
549
550
.preferred-label {
551
font-style: italic;
552
color: #999;
553
}
554
555
.verified-emails, .unverified-emails {
556
margin-bottom: 2em;
557
}
558
559
/* Menu -------------------------------------------------------------------*/
560
561
562
.menu li span {
563
display: block;
564
border-bottom: 1px dotted #ccc;
565
line-height: 2.5em;
566
color: #333;
567
padding: 0 23px;
568
}
569
570
.menu li .active {
571
background-color: #F7F6F5;
572
}
573
574
.menu li .active:after {
575
content: '▶';
576
font-size: 10px;
577
float: right
578
}
579
580
@media all and (min-width:768px) {
581
582
.menu {
583
width: 15em;
584
border-right: 1px dotted #ccc;
585
position: absolute;
586
bottom: 0;
587
top: 102px;
588
}
589
590
.menu li span {
591
padding: 0 1em;
592
}
593
594
595
.with-menu #content {
596
padding-bottom: 2em;
597
margin-left: 15em;
598
}
599
600
.with-menu footer {
601
margin-top: 0;
602
}
603
}
604
605
606
/* Information ---------------------------------------------------------------*/
607
608
.account-information {
609
font-weight: 300;
610
}
611
612
.account-information h2,
613
.account-information h3 {
614
margin-bottom: 0.5em;
615
}
616
617
.account-faq {
618
float: right;
619
}
620
621
.account-faq li {
622
margin-bottom: .5em;
623
}
624
625
.benefits {
626
border: 1px solid #D3D3D3;
627
padding: 1.5em;
628
border-radius: 4px;
629
margin: 40px 0 40px;
630
}
631
632
.benefits .apps,
633
.benefits .music,
634
.benefits .photos,
635
.benefits .cloud {
636
margin-bottom: 1em;
637
padding-left: 60px;
638
background: url("../identityprovider/ubuntuone/img/icons.png") no-repeat scroll 0 50% transparent;
639
height: 40px;
640
display: table;
641
line-height: 1.2em;
642
}
643
.benefits p {
644
display: table-cell;
645
vertical-align: middle;
646
}
647
648
.benefits .apps {
649
background-position: 0 -160px;
650
}
651
.benefits .music {
652
background-position: 0 -200px;
653
}
654
.benefits .photos {
655
background-position: 0 -240px;
656
}
657
.benefits .cloud {
658
background-position: 0 -280px;
659
}
660
661
.benefits li:last-child {
662
margin-bottom: 0;
663
}
664
665
.questions {
666
margin: 0 0 0 1em;
667
}
668
.questions li {
669
list-style: disc outside none;
670
margin-bottom: .5em;
671
}
672
673
.more-help {
674
margin: .5em 0 1px;
675
676
}
677
678
.password-reset-advice {
679
margin-top:5em;
680
}
681
682
.legal h2,
683
.legal h3 {
684
margin-bottom:0.6em;
685
}
686
687
.legal .content-updates {
688
border-left:2px solid #ccc;
689
padding:2em;
690
margin-bottom:2em;
691
}
692
693
.legal .section {
694
margin-bottom:2em;
695
}
696
697
.legal .account-faq {
698
min-width:350px;
699
margin-left:3em;
700
}
701
702
.faq-q {
703
margin:2em 0 1em;
704
}
705
706
.faq-q::before {
707
content: "Q. ";
708
}
709
710
.faq .faq-q:first-child {
711
margin-top:0;
712
}
713
714
.faq-body ol, .faq-body ul {
715
margin: 1em 0;
716
padding: 0 0 0 40px;
717
}
718
719
.faq-body ol li {
720
list-style: decimal outside;
721
}
722
723
.faq-body ul li {
724
list-style: circle outside;
725
}
726
727
@media screen and (max-width:756px) {
728
.legal .account-faq {
729
min-width:100%;
730
margin-left:0;
731
float:none;
732
}
733
}
734
735
736
737
/* Language select -----------------------------------------------------------*/
738
739
.language-select {
740
margin-bottom: 1em;
741
}
742
743
.language-select p {
744
border-bottom: 1px dotted #ccc;
745
margin-bottom: 0.5em;
746
padding-bottom: 0.5em;
747
}
748
749
.language-select label {
750
display: inline-block;
751
cursor: pointer;
752
margin: 0;
753
}
754
755
.language-select button {
756
margin-top: 1em;
757
}
758
759
.cannot-find-language {
760
float: right;
761
}
762
763
764
/* Messages ------------------------------------------------------------------*/
765
766
@media all and (min-width:768px) {
767
.readonly {
768
margin-top: 56px;
769
}
770
.readonly-message {
771
position: fixed;
772
top: 0;
773
left: 0;
774
right: 0;
775
text-align: center;
776
z-index: 10;
777
padding: .25em;
778
border-radius: 0;
779
margin-top: 0;
780
}
781
.readonly .readonly-message p {
782
margin: 0 auto;
783
max-width: 700px;
784
}
785
}
786
787
/* Tooltips -------------------------------------------------------------------*/
788
789
.question-mark {
790
background-color: #AEA79F;
791
border-radius: 100px 100px 100px 100px;
792
color: white;
793
cursor: pointer;
794
795
font-size: 1em;
796
font-weight: bold;
797
line-height: 1.1em;
798
padding: 0 0.3em;
799
}
800
801
.yui3-hastooltip {
802
cursor:default;
803
}
804
805
.yui3-tooltip {
806
position:absolute;
807
opacity:1;
808
-webkit-transition:opacity 750ms ease-in-out;
809
transition:opacity 750ms ease-in-out;
810
padding:10px;
811
max-width:10em;
812
}
813
814
.yui3-tooltip-content {
815
position:relative;
816
background:rgba(30,30,30,1);
817
border-color:rgba(30,30,30,1);
818
border-radius:4px;
819
padding:8px 15px 2px 15px;
820
color:rgb(200,200,200);
821
font-size:14px;
822
line-height:1.4;
823
}
824
825
div.yui3-tooltip-hidden {
826
opacity:0;
827
visibility:hidden;
828
display: block;
829
}
830
831
.yui3-tooltip .yui3-tooltip-content::before {
832
content: "";
833
position:absolute;
834
}
835
836
.yui3-tooltip-position-north .yui3-tooltip-content::before {
837
bottom:-4px;
838
left:50%;
839
margin-left:-4px;
840
border-top: 4px solid black;
841
border-top-color: inherit;
842
border-left: 4px solid transparent;
843
border-right: 4px solid transparent;
844
}
845
846
.yui3-tooltip-position-east .yui3-tooltip-content::before {
847
top:50%;
848
left:-4px;
849
margin-top:-4px;
850
border-right: 4px solid black;
851
border-right-color: inherit;
852
border-top: 4px solid transparent;
853
border-bottom: 4px solid transparent;
854
}
855
856
.yui3-tooltip-position-south .yui3-tooltip-content::before {
857
top:-4px;
858
left:50%;
859
margin-left:-4px;
860
border-bottom: 4px solid black;
861
border-bottom-color: inherit;
862
border-left: 4px solid transparent;
863
border-right: 4px solid transparent;
864
}
865
866
.yui3-tooltip-position-west .yui3-tooltip-content::before {
867
top:50%;
868
right:-4px;
869
margin-top:-4px;
870
border-left: 4px solid black;
871
border-left-color: inherit;
872
border-top: 4px solid transparent;
873
border-bottom: 4px solid transparent;
874
}
875
876
877
/* General -------------------------------------------------------------------*/
878
879
td.actions {
880
text-align: right;
881
882
}
883
884
table.listing {
885
margin: 0 0 2em 0;
886
}
887
888
#content {
889
padding: 0 15px;
890
}
891
892
.teams-list {
893
margin:0 0 0 1em;
894
}
895
896
@media all and (min-width:480px) {
897
898
#cont {
899
border: 4px solid #E6E3E1;
900
border-width: 0 4px;
901
}
902
903
}
904
@media all and (min-width:768px) {
905
906
#cont {
907
border-width: 0 16px;
908
}
909
910
#u1-logo {
911
background: url(../identityprovider/ubuntuone/img/u1_logo_med.png) no-repeat left;
912
height: 60px;
913
width: 167px;
914
}
915
916
#content {
917
padding: 0 20px;
918
}
919
920
921
}
922
@media all and (min-width:980px) {
923
924
925
}
Loggerhead is a web-based interface for Breezy
Version: 2.0.1