resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.less

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