refactor: ♻️ follow commit 980d2ff

Signed-off-by: WaitSpring <[email protected]>

resources/skins.citizen.styles/Drawer.less

@@ -31,10 +31,14 @@
 
  &__menu {
  // Fallback
+ display: flex;
+ flex-direction: column;
+ max-height: 46.25vh;
+ // End fallback
  overflow-y: auto;
+ /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
  display: grid;
  max-width: 92.5vw;
- max-height: 46.25vh;
  justify-content: center;
  padding: var(--space-xs) var(--space-md);
  font-size: 0.875rem; // TODO: Make this a variable

resources/skins.citizen.styles/Header.less

@@ -21,9 +21,8 @@
  }
 
  &__button {
- // Fallback
- justify-content: center;
  display: flex;
+ justify-content: center;
  width: var(--header-button-size);
  height: var(--header-button-size);
  border-radius: var(--border-radius--small);

resources/skins.citizen.styles/Pagetools.less

@@ -16,7 +16,10 @@
  // TODO: Merge this with header__button
  &__button {
  // Fallback
+ display: flex;
  justify-content: center;
+ // End fallback
+ /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
  display: grid;
  width: 2.75rem; // Same width as other buttons
  height: 2.25rem; // Same height as other buttons
@@ -121,7 +124,7 @@
 // Language counter badge
 // TODO: Maybe this should be in a mixin
 #citizen-languages__buttonCheckbox {
- position: relative; // So that the badge doesn't take a stroll to the far left
+ position: relative; // So that the badge doesn't take a stroll to the far left
 
  &::after {
  position: absolute;
@@ -143,7 +146,7 @@
 
 .citizen-languages {
  // Special handling for ULS
- // ULS won't be triggered by the label button
+ // ULS won't be triggered by the label button
  // so we need to overlay the checkbox on top of it
  .mw-interlanguage-selector {
  position: absolute;
@@ -210,7 +213,7 @@
  }
 }
 
-// VE styles shouldn't be core but it is just a few lines :/
+// VE styles shouldn't be core but it is just a few lines :/
 #ca-ve-edit {
  order: 98; // Before source edit
 

resources/skins.citizen.styles/layout.less

@@ -10,12 +10,15 @@
 
 .citizen-body-container {
  // Fallback
+ display: flex;
  flex-direction: column;
+ // End fallback
+ /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
  display: grid;
  justify-content: center;
  padding: var(--space-xl) var(--padding-page);
  gap: var(--space-md) var(--space-md);
- grid-template-areas:
+ grid-template-areas:
  'header'
  'content'
  'footer';
@@ -61,7 +64,7 @@ a.image {
  .citizen-toc-enabled {
  .citizen-body-container {
  display: grid;
- grid-template-areas:
+ grid-template-areas:
  'header header'
  'content toc'
  'footer .';

skinStyles/extensions/MultimediaViewer/mmv.less

@@ -1,11 +1,11 @@
-/*
+/*
  * Citizen
  *
  * SkinStyles for Extension:MultimediaViewer
  * Module: mmv
  * Version: REL1_39 (1b97775)
  *
- * Date: 2022-11-26
+ * Date: 2022-11-26
 */
 
 @import '../../../resources/variables.less';
@@ -277,7 +277,7 @@
  background-position: left 8px center;
 
  &:hover {
- // Changing margin is expensive and we don't want to move the hover background
+ // Changing margin is expensive and we don't want to move the hover background
  margin-left: 0;
  background-position: left 4px center;
  }
@@ -288,7 +288,7 @@
  background-position: right 8px center;
 
  &:hover {
- // Changing margin is expensive and we don't want to move the hover background
+ // Changing margin is expensive and we don't want to move the hover background
  margin-right: 0;
  background-position: right 4px center;
  }
@@ -500,17 +500,19 @@
 
 .mw-mmv-image-metadata {
  // Fallback
+ display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  // Use grid instead
+ /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
  display: grid;
  width: auto;
  padding: 0 var(--space-md) var(--space-md) var(--space-md);
  border-top: 0;
  margin-top: -4px;
  // Sync with title
  gap: var(--space-xs);
- grid-template-areas:
+ grid-template-areas:
  'desc links'
  'about about';
  grid-template-columns: 2fr 1fr;
@@ -521,7 +523,7 @@
  gap: var(--space-xl);
 
  @media (max-width: @width-breakpoint-tablet) {
- grid-template-areas:
+ grid-template-areas:
  'desc desc'
  'links links'
  'about about';