resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.css

   1 /* All */
   2
   3 .mw-foreignStructuredUpload-bookletLayout-license {
   4         font-size: 90%;
   5         line-height: 1.4em;
   6         color: #555;
   7 }
   8
   9 /* Option 2 */
  10
  11 .mw-foreignStructuredUpload-bookletLayout-withicon.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline {
  12         background-repeat: no-repeat;
  13         background-size: 3.5em;
  14         min-height: 4em;
  15         margin-bottom: 0.25em;
  16         display: table;
  17         vertical-align: middle;
  18         -webkit-box-sizing: border-box;
  19         -moz-box-sizing: border-box;
  20         box-sizing: border-box;
  21         width: 100%;
  22 }
  23
  24 .mw-foreignStructuredUpload-bookletLayout-withicon.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body {
  25         /* Together with 'display: table' above, and FieldLayout styles, this aligns the text */
  26         /* vertically to the middle. Don't try this at home, kids. */
  27         display: table-row;
  28 }
  29
  30 .mw-foreignStructuredUpload-bookletLayout-ownwork {
  31         /* @embed */
  32         background-image: url(bookletlayout/option2/ownwork.png);
  33         background-position: left center;
  34         padding-left: 4.5em;
  35 }
  36
  37 .mw-foreignStructuredUpload-bookletLayout-noderiv {
  38         /* @embed */
  39         background-image: url(bookletlayout/option2/noderiv.png);
  40         background-position: right center;
  41         padding-right: 4.5em;
  42 }
  43
  44 .mw-foreignStructuredUpload-bookletLayout-useful {
  45         /* @embed */
  46         background-image: url(bookletlayout/option2/useful.png);
  47         background-position: left center;
  48         padding-left: 4.5em;
  49 }
  50
  51 .mw-foreignStructuredUpload-bookletLayout-ccbysa {
  52         /* @embed */
  53         background-image: url(bookletlayout/option2/ccbysa.png);
  54         background-position: right center;
  55         padding-right: 4.5em;
  56 }
  57
  58 /* Option 3 */
  59
  60 .mw-foreignStructuredUpload-bookletLayout-question .oo-ui-radioOptionWidget {
  61         display: inline-block;
  62         margin-right: 2em;
  63 }
  64
  65 .mw-foreignStructuredUpload-bookletLayout-checkbox.oo-ui-fieldLayout-disabled > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label {
  66         /* No unreadable greys, please. This is the lightest WCAG AA compliant grey. */
  67         color: #707070;
  68 }
  69
  70 /* Option 4 */
  71
  72 .mw-foreignStructuredUpload-bookletLayout-guide {
  73         position: relative;
  74         height: 315px;
  75 }
  76
  77 .mw-foreignStructuredUpload-bookletLayout-guide-text-wrapper-good,
  78 .mw-foreignStructuredUpload-bookletLayout-guide-text-wrapper-bad {
  79         display: table;
  80         width: 150px;
  81         height: 140px;
  82         position: absolute;
  83 }
  84
  85 .mw-foreignStructuredUpload-bookletLayout-guide-text-wrapper-good span,
  86 .mw-foreignStructuredUpload-bookletLayout-guide-text-wrapper-bad span {
  87         display: table-cell;
  88         vertical-align: middle;
  89 }
  90
  91 .mw-foreignStructuredUpload-bookletLayout-guide-text-wrapper-good {
  92         top: 0;
  93         left: 0;
  94 }
  95
  96 .mw-foreignStructuredUpload-bookletLayout-guide-text-wrapper-bad {
  97         bottom: 0;
  98         right: 0;
  99 }
 100
 101 .mw-foreignStructuredUpload-bookletLayout-guide-image {
 102         position: absolute;
 103         width: 200px;
 104         height: 122px;
 105         background-size: 200px;
 106         background-repeat: no-repeat;
 107         border: 1px solid #ccc;
 108 }
 109
 110 .mw-foreignStructuredUpload-bookletLayout-guide-image-camera {
 111         /* @embed */
 112         background-image: url(bookletlayout/option4/camera.png);
 113         top: 0;
 114         right: 80px;
 115 }
 116
 117 .mw-foreignStructuredUpload-bookletLayout-guide-image-graphics {
 118         /* @embed */
 119         background-image: url(bookletlayout/option4/graphics.png);
 120         top: 50px;
 121         right: 0;
 122 }
 123
 124 .mw-foreignStructuredUpload-bookletLayout-guide-image-website {
 125         /* @embed */
 126         background-image: url(bookletlayout/option4/website.png);
 127         left: 0;
 128         bottom: 50px;
 129 }
 130
 131 .mw-foreignStructuredUpload-bookletLayout-guide-image-search {
 132         /* @embed */
 133         background-image: url(bookletlayout/option4/search.png);
 134         left: 80px;
 135         bottom: 0;
 136 }
 137
 138 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline.mw-foreignStructuredUpload-bookletLayout-guide-checkbox {
 139         /* We're really tight on vertical space. */
 140         margin-bottom: 0;
 141 }