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         /* @embed */
  34         .background-image-svg('bookletlayout/option2/ownwork.svg', 'bookletlayout/option2/ownwork.png');
  35         background-position: right center;
  36         padding-right: 4.5em;
  37 }
  38
  39 .mw-foreignStructuredUpload-bookletLayout-noderiv {
  40         /* @embed */
  41         .background-image-svg('bookletlayout/option2/noderiv.svg', 'bookletlayout/option2/noderiv.png');
  42         background-position: right center;
  43         padding-right: 4.5em;
  44 }
  45
  46 .mw-foreignStructuredUpload-bookletLayout-useful {
  47         /* @embed */
  48         .background-image-svg('bookletlayout/option2/useful.svg', 'bookletlayout/option2/useful.png');
  49         background-position: right center;
  50         padding-right: 4.5em;
  51 }
  52
  53 .mw-foreignStructuredUpload-bookletLayout-ccbysa {
  54         /* @embed */
  55         .background-image-svg('bookletlayout/option2/ccbysa.svg', 'bookletlayout/option2/ccbysa.png');
  56         background-position: right center;
  57         padding-right: 4.5em;
  58 }
  59
  60 /* Option 3 */
  61
  62 .mw-foreignStructuredUpload-bookletLayout-question .oo-ui-radioOptionWidget {
  63         display: inline-block;
  64         margin-right: 2em;
  65 }
  66
  67 .mw-foreignStructuredUpload-bookletLayout-checkbox.oo-ui-fieldLayout-disabled > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label {
  68         /* No unreadable greys, please. This is the lightest WCAG AA compliant grey. */
  69         color: #707070;
  70 }
  71
  72 /* Option 4 */
  73
  74 .mw-foreignStructuredUpload-bookletLayout-guide {
  75         position: relative;
  76         height: 315px;
  77 }
  78
  79 .mw-foreignStructuredUpload-bookletLayout-guide-text-wrapper-good,
  80 .mw-foreignStructuredUpload-bookletLayout-guide-text-wrapper-bad {
  81         display: table;
  82         width: 150px;
  83         height: 140px;
  84         position: absolute;
  85 }
  86
  87 .mw-foreignStructuredUpload-bookletLayout-guide-text-wrapper-good span,
  88 .mw-foreignStructuredUpload-bookletLayout-guide-text-wrapper-bad span {
  89         display: table-cell;
  90         vertical-align: middle;
  91 }
  92
  93 .mw-foreignStructuredUpload-bookletLayout-guide-text-wrapper-good {
  94         top: 0;
  95         left: 0;
  96 }
  97
  98 .mw-foreignStructuredUpload-bookletLayout-guide-text-wrapper-bad {
  99         bottom: 0;
 100         right: 0;
 101 }
 102
 103 .mw-foreignStructuredUpload-bookletLayout-guide-image {
 104         position: absolute;
 105         width: 200px;
 106         height: 122px;
 107         background-color: #fff;
 108         background-size: 200px;
 109         background-repeat: no-repeat;
 110         border: 1px solid #e5e5e5;
 111 }
 112
 113 .mw-foreignStructuredUpload-bookletLayout-guide-image-camera {
 114         /* @embed */
 115         .background-image-svg('bookletlayout/option4/camera.svg','bookletlayout/option4/camera.png');
 116         top: 0;
 117         right: 80px;
 118 }
 119
 120 .mw-foreignStructuredUpload-bookletLayout-guide-image-graphics {
 121         /* @embed */
 122         .background-image-svg('bookletlayout/option4/graphics.svg','bookletlayout/option4/graphics.png');
 123         top: 50px;
 124         right: 0;
 125 }
 126
 127 .mw-foreignStructuredUpload-bookletLayout-guide-image-website {
 128         /* @embed */
 129         .background-image-svg('bookletlayout/option4/website-ltr.svg','bookletlayout/option4/website-ltr.png');
 130         left: 0;
 131         bottom: 50px;
 132 }
 133
 134 .mw-foreignStructuredUpload-bookletLayout-guide-image-search {
 135         /* @embed */
 136         .background-image-svg('bookletlayout/option4/search-ltr.svg','bookletlayout/option4/search-ltr.png');
 137         left: 80px;
 138         bottom: 0;
 139 }
 140
 141 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline.mw-foreignStructuredUpload-bookletLayout-guide-checkbox {
 142         /* We're really tight on vertical space. */
 143         margin-bottom: 0;
 144 }