Refactor styles to be loaded via single core.css file (#8419)

CHANGELOG.txt

@@ -27,6 +27,7 @@ Changelog
  * Add `prefetch_renditions` method to `ImageQueryset` for performance optimisation on image listings (Tidiane Dia, Karl Hobley)
  * Add ability to define a custom `get_field_clean_name` method when defining `FormField` models that extend `AbstractFormField` (LB (Ben) Johnston)
  * Migrate Home (Dashboard) view to use generic Wagtail class based view (LB (Ben) Johnston)
+ * Combine most of Wagtail’s stylesheets into the global `core.css` file (Thibaud Colas)
  * Fix: Typo in `ResumeWorkflowActionFormatter` message (Stefan Hammer)
  * Fix: Throw a meaningful error when saving an image to an unrecognised image format (Christian Franke)
  * Fix: Remove extra padding for headers with breadcrumbs on mobile viewport (Steven Steinwand)

client/scss/core.scss

@@ -41,14 +41,11 @@ OTHER PREFIXES
 
 ==============================================================================*/
 
-/* TAILWIND BASE
-These inject Tailwind's base, component and utility styles and any styles registered by plugins of each layer.
-Unused styles created within tailwinds layers won't be compiled into the compiled stylesheet
-https://tailwindcss.com/docs/adding-custom-styles#using-css-and-layer
-*/
-
-@tailwind base;
-@tailwind components;
+/* Legacy vendor styles. Do not add new styles here. */
+@use 'generic/normalize';
+@use 'vendor/jquery-ui-1.10.3.verdant';
+@use 'vendor/jquery.tagit' as tagit;
+@use 'vendor/jquery.Jcrop.min' as jcrop;
 
 /* SETTINGS
 These are variables, maps, and fonts.
@@ -76,6 +73,11 @@ These are base styles for bare HTML elements.
 * Changes to them should be very rare.
 */
 
+// These inject Tailwind's base, component and utility styles and any styles registered by plugins of each layer.
+// Unused styles created within tailwinds layers won't be compiled into the compiled stylesheet
+// https://tailwindcss.com/docs/adding-custom-styles#using-css-and-layer
+@tailwind base;
+@tailwind components;
 @import 'elements/elements';
 @import 'elements/typography';
 @import 'elements/forms';
@@ -160,3 +162,23 @@ These are classes that provide overrides.
 
 // TAILWIND: This is at the bottom so it can take precedence over other css classes
 @tailwind utilities;
+
+/* Legacy layout-specific styles. Do not add new styles here. */
+
+@import 'layouts/404';
+@import 'layouts/compare-revisions';
+@import 'layouts/home';
+@import 'layouts/page-editor';
+@import 'layouts/login';
+@import 'layouts/account';
+@import 'layouts/workflow-edit';
+@import 'layouts/workflow-progress';
+@import 'layouts/report';
+@import 'layouts/groups-edit';
+@import 'layouts/add-multiple';
+@import 'layouts/chooser-duplicate-upload';
+@import 'layouts/focal-point-chooser';
+@import 'layouts/modeladmin';
+@import 'layouts/modeladmin-choose-parent-page';
+@import 'layouts/redirects';
+@import 'layouts/listing';

client/scss/elements/_forms.scss

@@ -105,6 +105,10 @@ select,
   }
 }
 
+.tagit {
+  background-color: $color-white;
+}
+
 @media (forced-colors: $media-forced-colours) {
   .tagit,
   .field-content .tagit .tagit-choice,

client/scss/generic/_normalize.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable declaration-block-no-duplicate-properties, property-no-vendor-prefix */
 /*! normalize.css v1.1.1 | MIT License | git.io/normalize */
 
 /* ==========================================================================

client/scss/layouts/_404.scss

@@ -1,6 +1,3 @@
-@import '../../../../../../client/scss/settings';
-@import '../../../../../../client/scss/tools';
-
 .page404__bg {
   position: fixed;
   top: 0;

client/scss/layouts/_account.scss

@@ -1,5 +1,3 @@
-@import '../../../../../../client/scss/settings/variables';
-
 .top-padding {
   padding-top: $object-title-height + 12px;
 }

client/scss/layouts/_add-multiple.scss

@@ -1,8 +1,5 @@
 @use 'sass:color';
 
-@import '../../../../../client/scss/settings';
-@import '../../../../../client/scss/tools';
-
 .replace-file-input {
   display: inline-block;
   position: relative;

client/scss/layouts/_compare-revisions.scss

@@ -1,6 +1,3 @@
-@import '../../../../../../client/scss/settings';
-@import '../../../../../../client/scss/tools';
-
 $color-addition-dark: #a6f3a6;
 $color-addition-light: #ebffeb;
 $color-deletion-dark: #f8cbcb;

client/scss/layouts/_focal-point-chooser.scss

@@ -1,6 +1,3 @@
-@import '../../../../../client/scss/settings';
-@import '../../../../../client/scss/tools';
-
 .focal-point-chooser {
   position: relative;
   margin-bottom: 20px;

client/scss/layouts/_groups-edit.scss

@@ -1,5 +1,3 @@
-@import '../../../../../client/scss/tools/mixins.general';
-
 .listing {
   .field label {
     @include visuallyhidden;

client/scss/layouts/_home.scss

@@ -1,12 +1,4 @@
-@import '../../../../../../client/scss/settings';
-@import '../../../../../../client/scss/tools';
-
-h1 {
-  font-weight: 300;
-  font-size: 2.2em;
-}
-
-header {
+.homepage header {
   @apply w-text-primary;
 
   display: flex;
@@ -36,10 +28,6 @@ header {
   }
 }
 
-.panel {
-  margin-bottom: 4em;
-}
-
 .summary {
   @include clearfix();
   margin-bottom: 2em;
@@ -148,11 +136,11 @@ header {
   }
 }
 
-.object.collapsible .object-layout .title-wrapper::before {
+.homepage .object.collapsible .object-layout .title-wrapper::before {
   display: none;
 }
 
-.object-layout {
+.homepage .object-layout {
   // enforce flex display at all screen sizes
   display: flex;
   flex-flow: row-reverse wrap;
@@ -175,6 +163,6 @@ header {
   }
 }
 
-.task .icon {
+.homepage .task .icon {
   margin-inline-start: -1.75em; // pull out the icon so it aligns with no-icon text
 }

client/scss/layouts/_listing.scss

@@ -1,8 +1,5 @@
-@import '../../../../../client/scss/settings';
-@import '../../../../../client/scss/tools';
-
 @include media-breakpoint-up(sm) {
-  .fields {
+  .fields--image-search {
     max-width: 1000px;
 
     .field-col {

client/scss/layouts/_login.scss

@@ -1,206 +1,200 @@
-@import '../../../../../../client/scss/settings';
-@import '../../../../../../client/scss/tools';
-
 // overrides default nice padding defined in variables.scss
 $desktop-nice-padding: 100px;
 
-html,
-body,
-.content-wrapper {
+.login,
+.login .content-wrapper {
   background-color: $color-grey-1;
   color: $color-grey-3;
 }
 
-html {
-  height: 100%;
-}
-
-body {
+.login {
   margin-inline-start: 0;
   height: 100%;
-}
 
-.content-wrapper {
-  border: 0;
-}
+  .content-wrapper {
+    border: 0;
+  }
 
-.wrapper {
-  padding-inline-start: $mobile-nice-padding;
-  padding-inline-end: $mobile-nice-padding;
-  margin-inline-start: 0;
-  max-width: none;
-}
+  .wrapper {
+    padding-inline-start: $mobile-nice-padding;
+    padding-inline-end: $mobile-nice-padding;
+    margin-inline-start: 0;
+    max-width: none;
+  }
 
-h1 {
-  font-weight: 300;
-  font-size: 2em;
-  line-height: 1em;
-  color: $color-white;
-  white-space: nowrap;
-}
+  h1 {
+    font-weight: 300;
+    font-size: 2em;
+    line-height: 1em;
+    color: $color-white;
+    white-space: nowrap;
+  }
 
-form {
-  width: 100%;
+  form {
+    width: 100%;
 
-  ul {
-    @include unlist();
+    ul {
+      @include unlist();
+    }
   }
-}
 
-label {
-  width: auto;
-  color: $color-white;
-}
+  label {
+    width: auto;
+    color: $color-white;
+  }
 
-.button,
-a.button {
-  line-height: 1.2em;
-  font-size: 1.5em;
-  padding: 1.1em 2.4em;
-  height: 3.5em;
-}
+  .button,
+  a.button {
+    line-height: 1.2em;
+    font-size: 1.5em;
+    padding: 1.1em 2.4em;
+    height: 3.5em;
+  }
 
-.fields-wrapper {
-  position: relative;
-}
+  .fields-wrapper {
+    position: relative;
+  }
 
-.fields {
-  max-width: none;
-}
+  .fields {
+    max-width: none;
+  }
 
-.fields li {
-  padding: 1em 0;
+  .fields li {
+    padding: 1em 0;
 
-  &.full {
-    position: relative;
-    padding: 0;
+    &.full {
+      position: relative;
+      padding: 0;
 
-    label {
-      @include visuallyhidden;
+      label {
+        @include visuallyhidden;
+      }
+
+      input {
+        border-top: 1px dashed $color-input-border;
+      }
     }
 
-    input {
-      border-top: 1px dashed $color-input-border;
+    &:first-child input {
+      border: 0;
     }
   }
 
-  &:first-child input {
-    border: 0;
+  .fields .checkbox {
+    padding-top: 2em;
+    padding-bottom: 2em;
   }
-}
-
-.fields .checkbox {
-  padding-top: 2em;
-  padding-bottom: 2em;
-}
 
-.field {
-  padding: 0;
-}
-
-.iconfield .input:before {
-  display: none;
-}
-
-// Special full-width, one-off fields i.e a single text or textarea input
-.full input {
-  border-radius: 0;
-  font-weight: 300;
-  border: 0;
-  padding: 1.5em $mobile-nice-padding 1.5em $mobile-nice-padding;
-  font-size: 1.6em;
-  line-height: 1.6em;
-}
+  .field {
+    padding: 0;
+  }
 
-// Forgotten password link
-.help {
-  font-size: 1.3em;
-  margin-top: 0;
-  padding: 10px 0;
+  .iconfield .input:before {
+    display: none;
+  }
 
-  @include media-breakpoint-up(sm) {
-    position: absolute;
-    top: 139px;
-    inset-inline-end: 5%;
-    padding: 0;
+  // Special full-width, one-off fields i.e a single text or textarea input
+  .full input {
+    border-radius: 0;
+    font-weight: 300;
+    border: 0;
+    padding: 1.5em $mobile-nice-padding 1.5em $mobile-nice-padding;
+    font-size: 1.6em;
+    line-height: 1.6em;
   }
 
-  &__link {
-    color: $color-white;
+  // Forgotten password link
+  .help {
+    font-size: 1.3em;
+    margin-top: 0;
+    padding: 10px 0;
 
     @include media-breakpoint-up(sm) {
-      color: $color-link;
+      position: absolute;
+      top: 139px;
+      inset-inline-end: 5%;
+      padding: 0;
+    }
+
+    &__link {
+      color: $color-white;
+
+      @include media-breakpoint-up(sm) {
+        color: $color-link;
+      }
     }
   }
-}
 
-.messages {
-  margin: 1em 0;
-  z-index: 5;
+  .messages {
+    margin: 1em 0;
+    z-index: 5;
 
-  ul {
-    margin: 0;
+    ul {
+      margin: 0;
 
-    &:before {
-      display: none;
-    }
+      &:before {
+        display: none;
+      }
 
-    li {
-      border-radius: 3px;
+      li {
+        border-radius: 3px;
+      }
     }
   }
-}
-
-@include media-breakpoint-up(sm) {
-  .content-wrapper {
-    float: none;
-    height: auto;
-    width: 100%;
-    display: inline-block;
-    vertical-align: middle;
-  }
 
-  // centres login form vertically
-  .wrapper {
-    position: relative;
-    height: 100%;
-    padding: 0 $desktop-nice-padding;
-
-    &:before {
-      content: '';
-      width: 0;
+  @include media-breakpoint-up(sm) {
+    .content-wrapper {
+      float: none;
+      height: auto;
+      width: 100%;
       display: inline-block;
-      height: 100%;
       vertical-align: middle;
-      margin-inline-start: -0.4em;
     }
-  }
 
-  h1 {
-    font-size: 4em;
-  }
-
-  .full {
-    margin: 0 (-$desktop-nice-padding);
+    // centres login form vertically
+    .wrapper {
+      position: relative;
+      height: 100%;
+      padding: 0 $desktop-nice-padding;
 
-    .iconfield {
-      .input:before {
+      &:before {
+        content: '';
+        width: 0;
         display: inline-block;
-        position: absolute;
-        color: theme('colors.grey.200');
-        border: 2px solid theme('colors.grey.200');
-        border-radius: 100%;
-        width: 1em;
-        height: 1em;
-        padding: 0.3em;
-        inset-inline-start: $desktop-nice-padding;
-        margin-top: -1.1rem;
-        top: 50%;
-        font-size: 1.3rem;
+        height: 100%;
+        vertical-align: middle;
+        margin-inline-start: -0.4em;
       }
+    }
 
-      input {
-        padding-inline-start: ($desktop-nice-padding + 50px);
+    h1 {
+      font-size: 4em;
+    }
+
+    .full {
+      margin: 0 (-$desktop-nice-padding);
+
+      .iconfield {
+        // stylelint-disable-next-line max-nesting-depth
+        .input:before {
+          display: inline-block;
+          position: absolute;
+          color: theme('colors.grey.200');
+          border: 2px solid theme('colors.grey.200');
+          border-radius: 100%;
+          width: 1em;
+          height: 1em;
+          padding: 0.3em;
+          inset-inline-start: $desktop-nice-padding;
+          margin-top: -1.1rem;
+          top: 50%;
+          font-size: 1.3rem;
+        }
+
+        // stylelint-disable-next-line max-nesting-depth
+        input {
+          padding-inline-start: ($desktop-nice-padding + 50px);
+        }
       }
     }
   }

client/scss/layouts/_modeladmin-choose-parent-page.scss

@@ -1,9 +1,9 @@
 // stylelint-disable-next-line selector-max-id
-#id_parent_page li {
+.modeladmin #id_parent_page li {
   margin: 15px 0;
 }
 
 // stylelint-disable-next-line selector-max-id
-#id_parent_page li label {
+.modeladmin #id_parent_page li label {
   float: none;
 }

client/scss/layouts/_modeladmin.scss

@@ -1,200 +1,197 @@
-@import '../../../../../../client/scss/settings';
-@import '../../../../../../client/scss/tools';
-
-.content header {
-  margin-bottom: 0;
-}
+.modeladmin {
+  .result-count {
+    display: block;
+    font-weight: 500;
 
-.result-count {
-  display: block;
-  font-weight: 500;
+    &:before {
+      content: '(';
+    }
 
-  &:before {
-    content: '(';
-  }
+    &:after {
+      content: ')';
+    }
 
-  &:after {
-    content: ')';
+    @include media-breakpoint-up(lg) {
+      display: inline-block;
+      margin-inline-start: 0.25em;
+    }
   }
 
-  @include media-breakpoint-up(lg) {
-    display: inline-block;
-    margin-inline-start: 0.25em;
+  .result-list {
+    margin-bottom: 0;
   }
-}
-
-.result-list {
-  margin-bottom: 0;
-}
 
-.listing {
-  td,
-  th {
-    vertical-align: top;
-  }
+  .listing {
+    td,
+    th {
+      vertical-align: top;
+    }
 
-  thead th.sorted a {
-    color: $color-teal;
-  }
+    thead th.sorted a {
+      color: $color-teal;
+    }
 
-  tbody {
-    overflow: auto;
+    tbody {
+      overflow: auto;
 
-    tr:hover ul.actions {
-      visibility: visible;
-    }
+      tr:hover ul.actions {
+        visibility: visible;
+      }
 
-    tr > td {
-      background-color: inherit;
+      tr > td {
+        background-color: inherit;
 
-      a.edit-obj {
-        color: inherit;
-        font-weight: 600;
+        // stylelint-disable-next-line max-nesting-depth
+        a.edit-obj {
+          color: inherit;
+          font-weight: 600;
+        }
       }
     }
   }
-}
 
-.changelist-filter {
-  padding: 0 15px;
+  .changelist-filter {
+    padding: 0 15px;
+
+    h2 {
+      background-color: #fafafa;
+      font-size: 13px;
+      line-height: 31px;
+      margin-top: 0;
+      padding-inline-start: 8px;
+      border-bottom: 1px solid #e6e6e6;
+    }
 
-  h2 {
-    background-color: #fafafa;
-    font-size: 13px;
-    line-height: 31px;
-    margin-top: 0;
-    padding-inline-start: 8px;
-    border-bottom: 1px solid #e6e6e6;
-  }
+    h3 {
+      font-size: 12px;
+      margin-bottom: 0;
+    }
 
-  h3 {
-    font-size: 12px;
-    margin-bottom: 0;
-  }
+    ul {
+      padding-inline-start: 0;
+      margin-bottom: 25px;
+    }
 
-  ul {
-    padding-inline-start: 0;
-    margin-bottom: 25px;
-  }
+    li {
+      list-style-type: none;
+      margin: 0 0 4px;
+      padding-inline-start: 0;
+    }
 
-  li {
-    list-style-type: none;
-    margin: 0 0 4px;
-    padding-inline-start: 0;
-  }
+    a {
+      font-family: $font-sans;
+      border-radius: 3px;
+      width: auto;
+      line-height: 1.2em;
+      padding: 8px 12px;
+      font-size: 0.9em;
+      font-weight: normal;
+      vertical-align: middle;
+      display: block;
+      background-color: #fff;
+      border: 1px solid $color-teal;
+      color: $color-teal;
+      text-decoration: none;
+      position: relative;
+      overflow: hidden;
+      box-sizing: border-box;
+      -webkit-font-smoothing: auto;
+      // stylelint-disable-next-line property-no-vendor-prefix
+      -moz-appearance: none;
+
+      &:hover {
+        background-color: $color-teal-dark;
+        border-color: $color-teal-dark;
+        color: #fff;
+      }
+    }
 
-  a {
-    font-family: $font-sans;
-    border-radius: 3px;
-    width: auto;
-    line-height: 1.2em;
-    padding: 8px 12px;
-    font-size: 0.9em;
-    font-weight: normal;
-    vertical-align: middle;
-    display: block;
-    background-color: #fff;
-    border: 1px solid $color-teal;
-    color: $color-teal;
-    text-decoration: none;
-    position: relative;
-    overflow: hidden;
-    box-sizing: border-box;
-    -webkit-font-smoothing: auto;
-    // stylelint-disable-next-line property-no-vendor-prefix
-    -moz-appearance: none;
-
-    &:hover {
-      background-color: $color-teal-dark;
-      border-color: $color-teal-dark;
-      color: #fff;
+    li.selected a {
+      // stylelint-disable-next-line declaration-no-important
+      color: #fff !important;
+      // stylelint-disable-next-line declaration-no-important
+      border-color: $color-teal !important;
+      background-color: $color-teal;
     }
   }
 
-  li.selected a {
-    // stylelint-disable-next-line declaration-no-important
-    color: #fff !important;
-    // stylelint-disable-next-line declaration-no-important
-    border-color: $color-teal !important;
-    background-color: $color-teal;
-  }
-}
+  .no-search-results {
+    margin-top: 30px;
 
-.no-search-results {
-  margin-top: 30px;
+    h2 {
+      padding-top: 0.3em;
+      margin-bottom: 0.3em;
+    }
 
-  h2 {
-    padding-top: 0.3em;
-    margin-bottom: 0.3em;
+    img {
+      float: left;
+      margin: 0 15px 15px 0;
+      width: 50px;
+    }
   }
 
-  img {
-    float: left;
-    margin: 0 15px 15px 0;
-    width: 50px;
-  }
-}
+  .pagination {
+    margin-top: 3em;
+    border-top: 1px dashed #d9d9d9;
+    padding: 2em 1em 0;
 
-.pagination {
-  margin-top: 3em;
-  border-top: 1px dashed #d9d9d9;
-  padding: 2em 1em 0;
+    ul {
+      margin-top: -1.25em;
+    }
+  }
 
-  ul {
-    margin-top: -1.25em;
+  p.no-results {
+    margin: 30px 1em 0;
   }
-}
 
-p.no-results {
-  margin: 30px 1em 0;
-}
+  @include media-breakpoint-up(sm) {
+    .changelist-filter {
+      float: right;
+      padding: 0 1.5%;
+    }
 
-@include media-breakpoint-up(sm) {
-  .changelist-filter {
-    float: right;
-    padding: 0 1.5%;
-  }
+    .result-list {
+      padding: 0 1.5% 0 0;
 
-  .result-list {
-    padding: 0 1.5% 0 0;
+      &.col12 {
+        padding-inline-end: 0;
 
-    &.col12 {
-      padding-inline-end: 0;
+        // stylelint-disable-next-line max-nesting-depth
+        tbody td:last-child {
+          padding-inline-end: 50px;
+        }
+      }
 
-      tbody td:last-child {
-        padding-inline-end: 50px;
+      tbody th:first-child {
+        padding-inline-start: 50px;
       }
     }
 
-    tbody th:first-child {
+    .pagination {
       padding-inline-start: 50px;
+      padding-inline-end: 50px;
     }
-  }
-
-  .pagination {
-    padding-inline-start: 50px;
-    padding-inline-end: 50px;
-  }
 
-  .pagination.col9 {
-    width: 73.5%;
-  }
+    .pagination.col9 {
+      width: 73.5%;
+    }
 
-  p.no-results {
-    margin: 30px 50px 0;
+    p.no-results {
+      margin: 30px 50px 0;
+    }
   }
-}
 
-@include media-breakpoint-up(lg) {
-  .result-list.col9 {
-    width: 79%;
-  }
+  @include media-breakpoint-up(lg) {
+    .result-list.col9 {
+      width: 79%;
+    }
 
-  .changelist-filter {
-    width: 21%;
-  }
+    .changelist-filter {
+      width: 21%;
+    }
 
-  .pagination.col9 {
-    width: 77.5%;
+    .pagination.col9 {
+      width: 77.5%;
+    }
   }
 }

client/scss/layouts/_page-editor.scss

@@ -2,9 +2,6 @@
 @use 'sass:map';
 @use 'sass:math';
 
-@import '../../../../../../client/scss/settings';
-@import '../../../../../../client/scss/tools';
-
 .page-editor {
   .content-wrapper {
     margin-bottom: 10em;

client/scss/layouts/_redirects.scss

@@ -1,17 +1,17 @@
-.listing-with-x-scroll {
-    display: block;
-    overflow-x: auto;
-    white-space: nowrap;
+.redirects .listing-with-x-scroll {
+  display: block;
+  overflow-x: auto;
+  white-space: nowrap;
 }
 
-header .has-multiple-actions {
-    display: flex;
+.redirects header .has-multiple-actions {
+  display: flex;
 }
 
-header .has-multiple-actions .actionbutton {
-    margin-inline-start: 10px;
+.redirects header .has-multiple-actions .actionbutton {
+  margin-inline-start: 10px;
 }
 
-header .has-multiple-actions .dropdown {
-    margin-inline-start: 10px;
+.redirects header .has-multiple-actions .dropdown {
+  margin-inline-start: 10px;
 }

client/scss/layouts/_report.scss

@@ -1,6 +1,3 @@
-@import '../../../../../../client/scss/settings';
-@import '../../../../../../client/scss/tools';
-
 .report {
   display: grid;
   grid-template-columns: auto;

client/scss/layouts/_workflow-edit.scss

@@ -1,7 +1,6 @@
-@import '../../../../../../client/scss/tools/mixins.general';
-@import '../../../../../../client/scss/settings/variables';
+.workflow-pages-listing {
+  max-width: 1024px - 50px;
 
-.listing {
   .field label {
     @include visuallyhidden;
   }
@@ -16,10 +15,6 @@
     // stylelint-disable-next-line declaration-no-important
     font-size: 2.5em !important;
   }
-}
-
-.workflow-pages-listing {
-  max-width: 1024px - 50px;
 
   .admin_page_chooser .field-content {
     width: 100%; // so that 'choose another page' button displays in its entirety

client/scss/vendor/jquery-ui-1.10.3.verdant.css

@@ -601,7 +601,7 @@ button.ui-button::-moz-focus-inner {
 	height: 100%;
 }
 .ui-progressbar .ui-progressbar-overlay {
-	background: url("images/animated-overlay.gif");
+	/* background: url("images/animated-overlay.gif"); */
 	height: 100%;
 	filter: alpha(opacity=25);
 	opacity: 0.25;
@@ -798,7 +798,7 @@ body .ui-tooltip {
 }
 .ui-widget-content {
 	border: 1px solid #d8d8d8;
-	background: #ffffff url("images/ui-bg_flat_100_ffffff_40x100.png") 50% 50% repeat-x;
+	/* background: #ffffff url("images/ui-bg_flat_100_ffffff_40x100.png") 50% 50% repeat-x; */
 	color: #222222;
 }
 .ui-widget-content a {
@@ -806,7 +806,7 @@ body .ui-tooltip {
 }
 .ui-widget-header {
 	border: 1px solid #246060;
-	background: #246060 url("images/ui-bg_flat_100_246060_40x100.png") 50% 50% repeat-x;
+	/* background: #246060 url("images/ui-bg_flat_100_246060_40x100.png") 50% 50% repeat-x; */
 	color: #ffffff;
 	font-weight: bold;
 }
@@ -820,7 +820,7 @@ body .ui-tooltip {
 .ui-widget-content .ui-state-default,
 .ui-widget-header .ui-state-default {
 	border: 1px solid #d3d3d3;
-	background: #ffffff url("images/ui-bg_flat_100_ffffff_40x100.png") 50% 50% repeat-x;
+	/* background: #ffffff url("images/ui-bg_flat_100_ffffff_40x100.png") 50% 50% repeat-x; */
 	font-weight: normal;
 	color: #555555;
 }
@@ -837,7 +837,7 @@ body .ui-tooltip {
 .ui-widget-content .ui-state-focus,
 .ui-widget-header .ui-state-focus {
 	border: 1px solid #49c0c1;
-	background: #49c0c1 url("images/ui-bg_flat_100_49c0c1_40x100.png") 50% 50% repeat-x;
+	/* background: #49c0c1 url("images/ui-bg_flat_100_49c0c1_40x100.png") 50% 50% repeat-x; */
 	font-weight: normal;
 	color: #ffffff;
 }
@@ -856,7 +856,7 @@ body .ui-tooltip {
 .ui-widget-content .ui-state-active,
 .ui-widget-header .ui-state-active {
 	border: 1px solid #aaaaaa;
-	background: #49c0c1 url("images/ui-bg_flat_65_49c0c1_40x100.png") 50% 50% repeat-x;
+	/* background: #49c0c1 url("images/ui-bg_flat_65_49c0c1_40x100.png") 50% 50% repeat-x; */
 	font-weight: normal;
 	color: #ffffff;
 }
@@ -873,7 +873,7 @@ body .ui-tooltip {
 .ui-widget-content .ui-state-highlight,
 .ui-widget-header .ui-state-highlight {
 	border: 1px solid #e8f8f9;
-	background: #e8f8f9 url("images/ui-bg_flat_100_e8f8f9_40x100.png") 50% 50% repeat-x;
+	/* background: #e8f8f9 url("images/ui-bg_flat_100_e8f8f9_40x100.png") 50% 50% repeat-x; */
 	color: #363636;
 }
 .ui-state-highlight a,
@@ -885,7 +885,7 @@ body .ui-tooltip {
 .ui-widget-content .ui-state-error,
 .ui-widget-header .ui-state-error {
 	border: 1px solid #f7474e;
-	background: #f7474e url("images/ui-bg_flat_100_f7474e_40x100.png") 50% 50% repeat-x;
+	/* background: #f7474e url("images/ui-bg_flat_100_f7474e_40x100.png") 50% 50% repeat-x; */
 	color: #ffffff;
 }
 .ui-state-error a,
@@ -929,6 +929,7 @@ body .ui-tooltip {
 	width: 16px;
 	height: 16px;
 }
+/*
 .ui-icon,
 .ui-widget-content .ui-icon {
 	background-image: url("images/ui-icons_222222_256x240.png");
@@ -953,6 +954,7 @@ body .ui-tooltip {
 .ui-state-error-text .ui-icon {
 	background-image: url("images/ui-icons_ffffff_256x240.png");
 }
+*/
 
 /* positioning */
 .ui-icon-blank { background-position: 16px 16px; }
@@ -1164,14 +1166,14 @@ body .ui-tooltip {
 
 /* Overlays */
 .ui-widget-overlay {
-	background: #aaaaaa url("images/ui-bg_flat_0_aaaaaa_40x100.png") 50% 50% repeat-x;
+	/* background: #aaaaaa url("images/ui-bg_flat_0_aaaaaa_40x100.png") 50% 50% repeat-x; */
 	opacity: .3;
 	filter: Alpha(Opacity=30);
 }
 .ui-widget-shadow {
 	margin: -8px 0 0 -8px;
 	padding: 8px;
-	background: #aaaaaa url("images/ui-bg_flat_0_aaaaaa_40x100.png") 50% 50% repeat-x;
+	/* background: #aaaaaa url("images/ui-bg_flat_0_aaaaaa_40x100.png") 50% 50% repeat-x; */
 	opacity: .3;
 	filter: Alpha(Opacity=30);
 	border-radius: 8px;

client/scss/vendor/jquery.Jcrop.min.css

@@ -1,6 +1,6 @@
 /* jquery.Jcrop.min.css v0.9.12 (build:20130126) */
 .jcrop-holder{direction:ltr;text-align:left;}
-.jcrop-vline,.jcrop-hline{background:#FFF url(Jcrop.gif);font-size:0;position:absolute;}
+.jcrop-vline,.jcrop-hline{background:#FFF url(../../wagtailimages/images/Jcrop.gif);font-size:0;position:absolute;}
 .jcrop-vline{height:100%;width:1px!important;}
 .jcrop-vline.right{right:0;}
 .jcrop-hline{height:1px!important;width:100%;}

client/webpack.config.js

@@ -95,92 +95,6 @@ module.exports = function exports(env, argv) {
     'scss',
     'core.scss',
   );
-  sassEntry[getOutputPath('admin', 'css', 'layouts/404')] = path.resolve(
-    'wagtail',
-    'admin',
-    'static_src',
-    'wagtailadmin',
-    'scss',
-    'layouts',
-    '404.scss',
-  );
-  sassEntry[getOutputPath('admin', 'css', 'layouts/account')] = path.resolve(
-    'wagtail',
-    'admin',
-    'static_src',
-    'wagtailadmin',
-    'scss',
-    'layouts',
-    'account.scss',
-  );
-  sassEntry[getOutputPath('admin', 'css', 'layouts/compare-revisions')] =
-    path.resolve(
-      'wagtail',
-      'admin',
-      'static_src',
-      'wagtailadmin',
-      'scss',
-      'layouts',
-      'compare-revisions.scss',
-    );
-  sassEntry[getOutputPath('admin', 'css', 'layouts/home')] = path.resolve(
-    'wagtail',
-    'admin',
-    'static_src',
-    'wagtailadmin',
-    'scss',
-    'layouts',
-    'home.scss',
-  );
-  sassEntry[getOutputPath('admin', 'css', 'layouts/login')] = path.resolve(
-    'wagtail',
-    'admin',
-    'static_src',
-    'wagtailadmin',
-    'scss',
-    'layouts',
-    'login.scss',
-  );
-  sassEntry[getOutputPath('admin', 'css', 'layouts/page-editor')] =
-    path.resolve(
-      'wagtail',
-      'admin',
-      'static_src',
-      'wagtailadmin',
-      'scss',
-      'layouts',
-      'page-editor.scss',
-    );
-  sassEntry[getOutputPath('admin', 'css', 'layouts/report')] = path.resolve(
-    'wagtail',
-    'admin',
-    'static_src',
-    'wagtailadmin',
-    'scss',
-    'layouts',
-    'report.scss',
-  );
-  sassEntry[getOutputPath('admin', 'css', 'layouts/workflow-edit')] =
-    path.resolve(
-      'wagtail',
-      'admin',
-      'static_src',
-      'wagtailadmin',
-      'scss',
-      'layouts',
-      'workflow-edit.scss',
-    );
-  sassEntry[getOutputPath('admin', 'css', 'layouts/workflow-progress')] =
-    path.resolve(
-      'wagtail',
-      'admin',
-      'static_src',
-      'wagtailadmin',
-      'scss',
-      'layouts',
-      'workflow-progress.scss',
-    );
-  // sassEntry[getOutputPath('admin', 'css', 'normalize')] = path.resolve('wagtail', 'admin', 'static_src', 'wagtailadmin', 'css', 'normalize.css');
   sassEntry[getOutputPath('admin', 'css', 'panels/draftail')] = path.resolve(
     'wagtail',
     'admin',
@@ -207,56 +121,6 @@ module.exports = function exports(env, argv) {
     'scss',
     'userbar.scss',
   );
-  sassEntry[getOutputPath('documents', 'css', 'add-multiple')] = path.resolve(
-    'wagtail',
-    'documents',
-    'static_src',
-    'wagtaildocs',
-    'scss',
-    'add-multiple.scss',
-  );
-  sassEntry[getOutputPath('images', 'css', 'add-multiple')] = path.resolve(
-    'wagtail',
-    'images',
-    'static_src',
-    'wagtailimages',
-    'scss',
-    'add-multiple.scss',
-  );
-  sassEntry[getOutputPath('images', 'css', 'focal-point-chooser')] =
-    path.resolve(
-      'wagtail',
-      'images',
-      'static_src',
-      'wagtailimages',
-      'scss',
-      'focal-point-chooser.scss',
-    );
-  sassEntry[getOutputPath('images', 'css', 'chooser-duplicate-upload')] =
-    path.resolve(
-      'wagtail',
-      'images',
-      'static_src',
-      'wagtailimages',
-      'scss',
-      'chooser-duplicate-upload.scss',
-    );
-  sassEntry[getOutputPath('images', 'css', 'listing')] = path.resolve(
-    'wagtail',
-    'images',
-    'static_src',
-    'wagtailimages',
-    'scss',
-    'listing.scss',
-  );
-  sassEntry[getOutputPath('users', 'css', 'groups_edit')] = path.resolve(
-    'wagtail',
-    'users',
-    'static_src',
-    'wagtailusers',
-    'scss',
-    'groups_edit.scss',
-  );
   sassEntry[getOutputPath('contrib/styleguide', 'css', 'styleguide')] =
     path.resolve(
       'wagtail',
@@ -267,35 +131,6 @@ module.exports = function exports(env, argv) {
       'scss',
       'styleguide.scss',
     );
-  sassEntry[getOutputPath('contrib/modeladmin', 'css', 'index')] = path.resolve(
-    'wagtail',
-    'contrib',
-    'modeladmin',
-    'static_src',
-    'wagtailmodeladmin',
-    'scss',
-    'index.scss',
-  );
-  sassEntry[getOutputPath('contrib/modeladmin', 'css', 'breadcrumbs_page')] =
-    path.resolve(
-      'wagtail',
-      'contrib',
-      'modeladmin',
-      'static_src',
-      'wagtailmodeladmin',
-      'scss',
-      'breadcrumbs_page.scss',
-    );
-  sassEntry[getOutputPath('contrib/modeladmin', 'css', 'choose_parent_page')] =
-    path.resolve(
-      'wagtail',
-      'contrib',
-      'modeladmin',
-      'static_src',
-      'wagtailmodeladmin',
-      'scss',
-      'choose_parent_page.scss',
-    );
   sassEntry[
     getOutputPath('contrib/typed_table_block', 'css', 'typed_table_block')
   ] = path.resolve(

docs/releases/4.0.md

@@ -36,6 +36,7 @@ When using a queryset to render a list of images, you can now use the ``prefetch
  * Add `prefetch_renditions` method to `ImageQueryset` for performance optimisation on image listings (Tidiane Dia, Karl Hobley)
  * Add ability to define a custom `get_field_clean_name` method when defining `FormField` models that extend `AbstractFormField` (LB (Ben) Johnston)
  * Migrate Home (Dashboard) view to use generic Wagtail class based view (LB (Ben) Johnston)
+ * Combine most of Wagtail’s stylesheets into the global `core.css` file (Thibaud Colas)
 
 ### Bug fixes
 

wagtail/admin/checks.py

@@ -8,7 +8,7 @@ def css_install_check(app_configs, **kwargs):
     errors = []
 
     css_path = os.path.join(
-        os.path.dirname(__file__), "static", "wagtailadmin", "css", "normalize.css"
+        os.path.dirname(__file__), "static", "wagtailadmin", "css", "core.css"
     )
 
     if not os.path.isfile(css_path):

wagtail/admin/templates/wagtailadmin/404.html

@@ -2,14 +2,6 @@
 {% load wagtailadmin_tags wagtailcore_tags i18n %}
 {% block titletag %}{% trans "Error 404: Page not found" %}{% endblock %}
 
-
-{% block extra_css %}
-    {{ block.super }}
-
-    <link rel="stylesheet" href="{% versioned_static 'wagtailadmin/css/layouts/404.css' %}" />
-{% endblock %}
-
-
 {% block furniture %}
     <main class="page404__bg">
         <div class="w-w-full w-h-full w-max-w-6xl w-mx-auto w-flex w-items-center w-justify-center">

wagtail/admin/templates/wagtailadmin/account/account.html

@@ -83,8 +83,6 @@
 
 {% block extra_css %}
     {{ block.super }}
-    {% include "wagtailadmin/pages/_editor_css.html" %}
-    <link rel="stylesheet" href="{% versioned_static 'wagtailadmin/css/layouts/account.css' %}" type="text/css"/>
     {{ media.css }}
 {% endblock %}
 {% block extra_js %}

wagtail/admin/templates/wagtailadmin/account/password_reset/complete.html

@@ -3,12 +3,6 @@
 {% block titletag %}{% trans "Reset password" %}{% endblock %}
 {% block bodyclass %}login{% endblock %}
 
-{% block extra_css %}
-    {{ block.super }}
-
-    <link rel="stylesheet" href="{% versioned_static 'wagtailadmin/css/layouts/login.css' %}" type="text/css" />
-{% endblock %}
-
 {% block furniture %}
     <main class="content-wrapper">
         <h1>{% trans "Password change successful" %}</h1>

wagtail/admin/templates/wagtailadmin/account/password_reset/confirm.html

@@ -9,12 +9,6 @@
 {% endblock %}
 {% block bodyclass %}login{% endblock %}
 
-{% block extra_css %}
-    {{ block.super }}
-
-    <link rel="stylesheet" href="{% versioned_static 'wagtailadmin/css/layouts/login.css' %}" type="text/css" />
-{% endblock %}
-
 {% block furniture %}
     <main class="content-wrapper">
         {% if validlink %}

wagtail/admin/templates/wagtailadmin/account/password_reset/done.html

@@ -3,12 +3,6 @@
 {% block titletag %}{% trans "Reset password" %}{% endblock %}
 {% block bodyclass %}login{% endblock %}
 
-{% block extra_css %}
-    {{ block.super }}
-
-    <link rel="stylesheet" href="{% versioned_static 'wagtailadmin/css/layouts/login.css' %}" type="text/css" />
-{% endblock %}
-
 {% block furniture %}
     <main class="content-wrapper">
         <h1>{% trans "Check your email" %}</h1>

wagtail/admin/templates/wagtailadmin/account/password_reset/form.html

@@ -3,12 +3,6 @@
 {% block titletag %}{% trans "Reset password" %}{% endblock %}
 {% block bodyclass %}login{% endblock %}
 
-{% block extra_css %}
-    {{ block.super }}
-
-    <link rel="stylesheet" href="{% versioned_static 'wagtailadmin/css/layouts/login.css' %}" type="text/css" />
-{% endblock %}
-
 {% block furniture %}
     <main class="content-wrapper">
         {% include "wagtailadmin/shared/non_field_errors.html" %}

wagtail/admin/templates/wagtailadmin/admin_base.html

@@ -2,11 +2,10 @@
 {% load i18n wagtailadmin_tags %}
 
 {% block css %}
-    <link rel="stylesheet" href="{% versioned_static 'wagtailadmin/css/vendor/jquery-ui/jquery-ui-1.10.3.verdant.css' %}" />
-    <link rel="stylesheet" href="{% versioned_static 'wagtailadmin/css/vendor/jquery.tagit.css' %}">
-    <link rel="stylesheet" href="{% versioned_static 'wagtailadmin/css/core.css' %}" type="text/css" />
+    <link rel="stylesheet" href="{% versioned_static 'wagtailadmin/css/core.css' %}">
 
     {% hook_output 'insert_global_admin_css' %}
+    {% hook_output 'insert_editor_css' %}
 
     {% block extra_css %}{% endblock %}
 {% endblock %}

wagtail/admin/templates/wagtailadmin/home.html

@@ -4,9 +4,6 @@
 
 {% block extra_css %}
     {{ block.super }}
-
-    <link rel="stylesheet" href="{% versioned_static 'wagtailadmin/css/layouts/home.css' %}" type="text/css" />
-    <link rel="stylesheet" href="{% versioned_static 'wagtailadmin/css/layouts/page-editor.css' %}" />
     {{ media.css }}
 {% endblock %}
 

wagtail/admin/templates/wagtailadmin/login.html

@@ -3,12 +3,6 @@
 {% block titletag %}{% trans "Sign in" %}{% endblock %}
 {% block bodyclass %}login{% endblock %}
 
-{% block extra_css %}
-    {{ block.super }}
-
-    <link rel="stylesheet" href="{% versioned_static 'wagtailadmin/css/layouts/login.css' %}" type="text/css" />
-{% endblock %}
-
 {% block furniture %}
     <main class="content-wrapper">
         {% if messages or form.errors %}

wagtail/admin/templates/wagtailadmin/pages/_editor_css.html

@@ -1,9 +0,0 @@
-{% load wagtailadmin_tags %}
-
-{% comment %}
-    CSS declarations to be included on the 'create page' and 'edit page' views
-{% endcomment %}
-
-<link rel="stylesheet" href="{% versioned_static 'wagtailadmin/css/layouts/page-editor.css' %}" />
-
-{% hook_output 'insert_editor_css' %}

wagtail/admin/templates/wagtailadmin/pages/create.html

@@ -70,7 +70,6 @@
 
 {% block extra_css %}
     {{ block.super }}
-    {% include "wagtailadmin/pages/_editor_css.html" %}
     {{ media.css }}
 {% endblock %}
 

wagtail/admin/templates/wagtailadmin/pages/edit.html

@@ -71,7 +71,6 @@
 
 {% block extra_css %}
     {{ block.super }}
-    {% include "wagtailadmin/pages/_editor_css.html" %}
     {{ media.css }}
 {% endblock %}
 

wagtail/admin/templates/wagtailadmin/pages/revisions/compare.html

@@ -83,9 +83,3 @@
         </table>
     </div>
 {% endblock %}
-
-
-{% block extra_css %}
-    {{ block.super }}
-    <link rel="stylesheet" href="{% versioned_static 'wagtailadmin/css/layouts/compare-revisions.css' %}" type="text/css" />
-{% endblock %}

wagtail/admin/templates/wagtailadmin/pages/workflow_history/detail.html

@@ -156,10 +156,3 @@
         });
     </script>
 {% endblock %}
-
-
-{% block extra_css %}
-    {{ block.super }}
-
-    <link rel="stylesheet" href="{% versioned_static 'wagtailadmin/css/layouts/workflow-progress.css' %}" />
-{% endblock %}

wagtail/admin/templates/wagtailadmin/reports/base_report.html

@@ -57,8 +57,6 @@
 
 {% block extra_css %}
     {{ block.super }}
-    <link rel="stylesheet" href="{% versioned_static 'wagtailadmin/css/layouts/report.css' %}" type="text/css" />
-
     {{ filters.form.media.css }}
 {% endblock %}
 

wagtail/admin/templates/wagtailadmin/skeleton.html

@@ -10,8 +10,6 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta name="robots" content="noindex" />
 
-        <link rel="stylesheet" href="{% versioned_static 'wagtailadmin/css/normalize.css' %}" />
-
         {% block css %}{% endblock %}
 
         {% block branding_favicon %}{% endblock %}

wagtail/admin/templates/wagtailadmin/userbar/base.html

@@ -2,7 +2,7 @@
 <!-- Wagtail user bar embed code -->
 <div class="wagtail-userbar-reset">
     <div class="wagtail-userbar wagtail-userbar--{{ position|default:'bottom-right' }}" data-wagtail-userbar>
-        <link rel="stylesheet" href="{% versioned_static 'wagtailadmin/css/userbar.css' %}" type="text/css" />
+        <link rel="stylesheet" href="{% versioned_static 'wagtailadmin/css/userbar.css' %}">
         <div class="wagtail-userbar-nav">
             <button aria-controls="wagtail-userbar-items" aria-haspopup="true" class="wagtail-userbar-trigger" id="wagtail-userbar-trigger" data-wagtail-userbar-trigger>
                 {% block branding_logo %}

wagtail/admin/templates/wagtailadmin/workflows/create.html

@@ -5,8 +5,6 @@
 
 {% block extra_css %}
     {{ block.super }}
-    {% include "wagtailadmin/pages/_editor_css.html" %}
-    <link rel="stylesheet" href="{% versioned_static 'wagtailadmin/css/layouts/workflow-edit.css' %}" type="text/css" />
     {{ media.css }}
 {% endblock %}
 

wagtail/admin/templates/wagtailadmin/workflows/create_task.html

@@ -3,11 +3,6 @@
 
 {% block titletag %}{{ view.page_title }}{% endblock %}
 
-{% block extra_css %}
-    {{ block.super }}
-    {% include "wagtailadmin/pages/_editor_css.html" %}
-{% endblock %}
-
 {% block extra_js %}
     {{ block.super }}
     {% include "wagtailadmin/pages/_editor_js.html" %}

wagtail/admin/templates/wagtailadmin/workflows/edit.html

@@ -5,9 +5,7 @@
 
 {% block extra_css %}
     {{ block.super }}
-    {% include "wagtailadmin/pages/_editor_css.html" %}
     {{ media.css }}
-    <link rel="stylesheet" href="{% versioned_static 'wagtailadmin/css/layouts/workflow-edit.css' %}" type="text/css" />
 {% endblock %}
 
 {% block extra_js %}

wagtail/admin/templates/wagtailadmin/workflows/edit_task.html

@@ -3,11 +3,6 @@
 
 {% block titletag %}{{ view.page_title }}{% endblock %}
 
-{% block extra_css %}
-    {{ block.super }}
-    {% include "wagtailadmin/pages/_editor_css.html" %}
-{% endblock %}
-
 {% block extra_js %}
     {{ block.super }}
     {% include "wagtailadmin/pages/_editor_js.html" %}

wagtail/admin/templates/wagtailadmin/workflows/index.html

@@ -95,11 +95,6 @@
     </div>
 {% endblock %}
 
-{% block extra_css %}
-    {{ block.super }}
-    {% include "wagtailadmin/pages/_editor_css.html" %}
-{% endblock %}
-
 {% block extra_js %}
     {{ block.super }}
     {% include "wagtailadmin/pages/_editor_js.html" %}

wagtail/contrib/modeladmin/options.py

@@ -365,9 +365,7 @@ class ModelAdmin(WagtailRegisterable):
         return self.form_fields_exclude
 
     def get_index_view_extra_css(self):
-        css = ["wagtailmodeladmin/css/index.css"]
-        css.extend(self.index_view_extra_css)
-        return css
+        return self.index_view_extra_css
 
     def get_index_view_extra_js(self):
         return self.index_view_extra_js

wagtail/contrib/modeladmin/templates/modeladmin/choose_parent.html

@@ -1,14 +1,13 @@
 {% extends "wagtailadmin/base.html" %}
 {% load i18n modeladmin_tags wagtailadmin_tags %}
 
+{% block bodyclass %}modeladmin{% endblock %}
+
 {% block titletag %}{{ view.get_meta_title }}{% endblock %}
 
 {% block extra_css %}
     {{ block.super }}
-    {% include "wagtailadmin/pages/_editor_css.html" %}
     {{ form.media.css }}
-    <link rel="stylesheet" href="{% versioned_static 'wagtailmodeladmin/css/choose_parent_page.css' %}" type="text/css"/>
-    <link rel="stylesheet" href="{% versioned_static 'wagtailmodeladmin/css/breadcrumbs_page.css' %}" type="text/css"/>
 {% endblock %}
 
 {% block extra_js %}

wagtail/contrib/modeladmin/templates/modeladmin/create.html

@@ -6,7 +6,6 @@
 {% block extra_css %}
     {{ block.super }}
 
-    {% include "wagtailadmin/pages/_editor_css.html" %}
     {{ media.css }}
 {% endblock %}
 

wagtail/contrib/modeladmin/templates/modeladmin/index.html

@@ -1,6 +1,8 @@
 {% extends "wagtailadmin/base.html" %}
 {% load i18n modeladmin_tags wagtailadmin_tags %}
 
+{% block bodyclass %}modeladmin{% endblock %}
+
 {% block titletag %}{{ view.get_meta_title }}{% endblock %}
 
 {% block css %}

wagtail/contrib/modeladmin/templates/modeladmin/inspect.html

@@ -1,12 +1,13 @@
 {% extends "wagtailadmin/base.html" %}
 {% load i18n wagtailadmin_tags %}
 
+{% block bodyclass %}modeladmin{% endblock %}
+
 {% block titletag %}{{ view.get_meta_title }}{% endblock %}
 
 {% block extra_css %}
     {{ block.super }}
     {{ view.media.css }}
-    <link rel="stylesheet" href="{% versioned_static 'wagtailmodeladmin/css/breadcrumbs_page.css' %}" type="text/css"/>
 {% endblock %}
 
 {% block extra_js %}

wagtail/contrib/redirects/templates/wagtailredirects/index.html

@@ -2,6 +2,8 @@
 {% load i18n %}
 {% load static wagtailadmin_tags %}
 
+{% block bodyclass %}redirects{% endblock %}
+
 {% block titletag %}{% trans "Redirects" %}{% endblock %}
 
 {% block extra_js %}
@@ -16,8 +18,6 @@
 {% endblock %}
 
 {% block content %}
-    <link rel="stylesheet" type="text/css" href="{% static 'wagtailredirects/css/index.css' %}">
-
     {% trans "Redirects" as redirects_str %}
     {% if user_can_add %}
         {% url "wagtailredirects:add" as add_link %}

wagtail/contrib/search_promotions/templates/wagtailsearchpromotions/add.html

@@ -34,7 +34,6 @@
 
 {% block extra_css %}
     {{ block.super }}
-    {% include "wagtailadmin/pages/_editor_css.html" %}
     {{ form_media.css }}
 {% endblock %}
 {% block extra_js %}

wagtail/contrib/search_promotions/templates/wagtailsearchpromotions/edit.html

@@ -25,7 +25,6 @@
 
 {% block extra_css %}
     {{ block.super }}
-    {% include "wagtailadmin/pages/_editor_css.html" %}
     {{ form_media.css }}
 {% endblock %}
 {% block extra_js %}

wagtail/contrib/settings/templates/wagtailsettings/edit.html

@@ -49,7 +49,6 @@
 
 {% block extra_css %}
     {{ block.super }}
-    {% include "wagtailadmin/pages/_editor_css.html" %}
     {{ media.css }}
 {% endblock %}
 {% block extra_js %}

wagtail/documents/templates/wagtaildocs/multiple/add.html

@@ -7,8 +7,6 @@
     {{ block.super }}
 
     {{ form_media.css }}
-
-    <link rel="stylesheet" href="{% versioned_static 'wagtaildocs/css/add-multiple.css' %}" type="text/css" />
 {% endblock %}
 
 {% block content %}

wagtail/images/templates/wagtailimages/chooser/confirm_duplicate_upload.html

@@ -1,9 +1,5 @@
 {% load i18n wagtailadmin_tags wagtailimages_tags %}
 
-{% block extra_css %}
-    <link rel="stylesheet" href="{% versioned_static 'wagtailimages/css/chooser-duplicate-upload.css' %}" type="text/css" />
-{% endblock %}
-
 <section id="tab-upload" class="duplicate-upload w-tabs__panel" role="tabpanel" aria-labelledby="tab-label-upload">
     <p class="help-block help-warning">
         {% icon name='warning' %}

wagtail/images/templates/wagtailimages/images/edit.html

@@ -5,10 +5,6 @@
     {{ block.super }}
 
     {{ form.media.css }}
-
-    <!-- Focal point chooser -->
-    <link rel="stylesheet" href="{% versioned_static 'wagtailimages/css/vendor/jquery.Jcrop.min.css' %}" type="text/css">
-    <link rel="stylesheet" href="{% versioned_static 'wagtailimages/css/focal-point-chooser.css' %}" type="text/css">
 {% endblock %}
 
 {% block extra_js %}

wagtail/images/templates/wagtailimages/images/index.html

@@ -4,9 +4,6 @@
 {% load i18n %}
 
 {% block titletag %}{% trans "Images" %}{% endblock %}
-{% block extra_css %}
-    <link rel="stylesheet" href="{% versioned_static 'wagtailimages/css/listing.css' %}" type="text/css" />
-{% endblock %}
 {% block extra_js %}
     {{ block.super }}
     <script>
@@ -51,7 +48,7 @@
 
     <div class="nice-padding">
         <form class="image-search search-bar" action="{% url 'wagtailimages:index' %}" method="GET" novalidate>
-            <ul class="fields">
+            <ul class="fields fields--image-search">
                 <li>
                     <ul class="field-row">
                         {% if collections %}

wagtail/images/templates/wagtailimages/multiple/add.html

@@ -7,8 +7,6 @@
     {{ block.super }}
 
     {{ form_media.css }}
-
-    <link rel="stylesheet" href="{% versioned_static 'wagtailimages/css/add-multiple.css' %}" type="text/css" />
 {% endblock %}
 
 {% block content %}

wagtail/snippets/templates/wagtailsnippets/snippets/create.html

@@ -26,7 +26,6 @@
 
 {% block extra_css %}
     {{ block.super }}
-    {% include "wagtailadmin/pages/_editor_css.html" %}
     {{ media.css }}
 {% endblock %}
 {% block extra_js %}

wagtail/snippets/templates/wagtailsnippets/snippets/edit.html

@@ -43,7 +43,6 @@
 
 {% block extra_css %}
     {{ block.super }}
-    {% include "wagtailadmin/pages/_editor_css.html" %}
     {{ media.css }}
 {% endblock %}
 {% block extra_js %}

wagtail/users/templates/wagtailusers/groups/create.html

@@ -6,7 +6,6 @@
 {% block extra_css %}
     {{ block.super }}
 
-    <link rel="stylesheet" href="{% versioned_static 'wagtailusers/css/groups_edit.css' %}" type="text/css" />
     {{ form_media.css }}
 {% endblock %}
 

wagtail/users/templates/wagtailusers/groups/edit.html

@@ -6,7 +6,6 @@
 {% block extra_css %}
     {{ block.super }}
 
-    <link rel="stylesheet" href="{% versioned_static 'wagtailusers/css/groups_edit.css' %}" type="text/css" />
     {{ form_media.css }}
 {% endblock %}
 

wagtail/users/templates/wagtailusers/users/create.html

@@ -71,7 +71,6 @@
 
 {% block extra_css %}
     {{ block.super }}
-    {% include "wagtailadmin/pages/_editor_css.html" %}
     {{ form.media.css }}
 {% endblock %}
 {% block extra_js %}

wagtail/users/templates/wagtailusers/users/edit.html

@@ -84,7 +84,6 @@
 
 {% block extra_css %}
     {{ block.super }}
-    {% include "wagtailadmin/pages/_editor_css.html" %}
     {{ form.media.css }}
 {% endblock %}
 {% block extra_js %}