resources/src/mediawiki.special/contribute.less

   1 /*!
   2  * Styles for Special:Contribute page.
   3  */
   4 @import 'mediawiki.skin.variables.less';
   5
   6 .mw-special-Contribute {
   7         .mw-contribute-wrapper {
   8                 // Ensure this is user's specified font size.
   9                 // This works around the fact that Vector skin uses 14px rather than 16px.
  10                 font-size: 1rem;
  11         }
  12
  13         .mw-contribute-tab {
  14                 display: inline-block;
  15         }
  16
  17         .mw-contribute-tabs-content {
  18                 background-color: @background-color-neutral-subtle;
  19         }
  20
  21         /* Flexbox gap not supported by all browsers */
  22         /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  23         .mw-contribute-content-area {
  24                 display: flex;
  25                 flex-flow: row wrap;
  26                 gap: 24px 24px;
  27         }
  28
  29         .mw-contribute-card {
  30                 background-color: @background-color-base;
  31                 border: @border-subtle;
  32                 border-radius: @border-radius-base;
  33                 box-shadow: 0 1px 2px 0 rgba( 0, 0, 0, 0.1 );
  34                 text-decoration: none;
  35
  36                 &:hover {
  37                         text-decoration: none;
  38                 }
  39
  40                 &:last-of-type .mw-contribute-card-content {
  41                         margin-bottom: 0;
  42                 }
  43         }
  44
  45         .mw-contribute-card-content {
  46                 color: @color-base;
  47                 padding: 12px;
  48         }
  49
  50         .mw-contribute-card-title {
  51                 font-weight: bold;
  52         }
  53
  54         .mw-contribute-card-icon {
  55                 padding-right: 8px;
  56
  57                 &--article {
  58                         .cdx-mixin-css-icon(@cdx-icon-article);
  59                 }
  60
  61                 &--language {
  62                         .cdx-mixin-css-icon(@cdx-icon-language);
  63                 }
  64
  65                 &--upload {
  66                         .cdx-mixin-css-icon(@cdx-icon-upload);
  67                 }
  68
  69                 &--lightbulb {
  70                         // This is required by the design but not available in the codex icon set
  71                         // so we use the info icon instead and override teh svg with the correct one
  72                         // we can replace the below with the correct icon once it is available in the codex set
  73                         // remove and replace with the below, when T346320 is resolved
  74                         //.cdx-mixin-css-icon(@cdx-icon-lightbulb);
  75                         .cdx-mixin-css-icon(@cdx-icon-info);
  76                         background-image: url( data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" fill="%23202122"><path d="M8 19a1 1 0 001 1h2a1 1 0 001-1v-1H8zm9-12a7 7 0 10-12 4.9S7 14 7 15v1a1 1 0 001 1h4a1 1 0 001-1v-1c0-1 2-3.1 2-3.1A7 7 0 0017 7z"/></svg> );
  77                 }
  78         }
  79
  80         .mw-contribute-card-description {
  81                 padding-left: 28px;
  82                 font-size: @font-size-base * 0.875;
  83         }
  84
  85         .mw-contribute-card-action {
  86                 color: @color-progressive;
  87                 padding-left: 28px;
  88                 padding-top: 4px;
  89                 font-size: @font-size-base * 0.875;
  90                 font-weight: bold;
  91         }
  92
  93         // Narrow screens
  94         @media only screen and ( max-width: @max-width-breakpoint-mobile ) {
  95                 /* stylelint-disable-next-line selector-class-pattern */
  96                 .content {
  97                         margin: 0;
  98                 }
  99
 100                 .mw-contribute-content-area {
 101                         padding: 24px 16px;
 102                 }
 103
 104                 .mw-contribute-card {
 105                         width: 100%;
 106                 }
 107         }
 108
 109         // Wide screens
 110         @media only screen and ( min-width: @min-width-breakpoint-tablet ) {
 111                 .mw-contribute-content-area {
 112                         padding: 32px;
 113                 }
 114
 115                 .mw-contribute-card {
 116                         // We need 2 cards per row. that is 50% width.
 117                         // Then reduce 24px for column gap and 2px for border margins
 118                         width: ~'calc(50% - (1/2)*24px - 2px)';
 119                 }
 120         }
 121 }