CSS: Reduced styles used in export formats

Extracted many main page content styles to own scss partial.
Styles could do with a more general clean-up.

Closes #4303

diff --git a/resources/sass/_blocks.scss b/resources/sass/_blocks.scss
index a1268e6b471ca97620eda28c32f68bedb67773ba..54c509ef928f5e4c6e2fe31124f3bdc68a7e732a 100644 (file)
--- a/resources/sass/_blocks.scss
+++ b/resources/sass/_blocks.scss
@@ -1,63 +1,3 @@
-
-/**
- * Callouts
- */
-.callout {
-  border-left: 3px solid #BBB;
-  background-color: #EEE;
-  padding: $-s $-s $-s $-xl;
-  display: block;
-  position: relative;
-  overflow: auto;
-  &:before {
-    background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMwMTUzODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTEgMTVoLTJ2LTZoMnY2em0wLThoLTJWN2gydjJ6Ii8+PC9zdmc+');
-    background-repeat: no-repeat;
-    content: '';
-    width: 1.2em;
-    height: 1.2em;
-    left: $-xs + 2px;
-    top: 50%;
-    margin-top: -9px;
-    display: inline-block;
-    position: absolute;
-    line-height: 1;
-    opacity: 0.8;
-  }
-  &.success {
-    @include lightDark(border-left-color, $positive, $positive-dark);
-    @include lightDark(background-color, lighten($positive, 68%), darken($positive-dark, 36%));
-    @include lightDark(color, darken($positive, 16%), $positive-dark);
-  }
-  &.success:before {
-    background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMzNzZjMzkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0yIDE1bC01LTUgMS40MS0xLjQxTDEwIDE0LjE3bDcuNTktNy41OUwxOSA4bC05IDl6Ii8+PC9zdmc+");
-  }
-  &.danger {
-    @include lightDark(border-left-color, $negative, $negative-dark);
-    @include lightDark(background-color, lighten($negative, 56%), darken($negative-dark, 55%));
-    @include lightDark(color, darken($negative, 20%), $negative-dark);
-  }
-  &.danger:before {
-    background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiOTE4MTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0xNS43MyAzSDguMjdMMyA4LjI3djcuNDZMOC4yNyAyMWg3LjQ2TDIxIDE1LjczVjguMjdMMTUuNzMgM3pNMTIgMTcuM2MtLjcyIDAtMS4zLS41OC0xLjMtMS4zIDAtLjcyLjU4LTEuMyAxLjMtMS4zLjcyIDAgMS4zLjU4IDEuMyAxLjMgMCAuNzItLjU4IDEuMy0xLjMgMS4zem0xLTQuM2gtMlY3aDJ2NnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==");
-  }
-  &.info {
-    @include lightDark(border-left-color, $info, $info-dark);
-    @include lightDark(color, darken($info, 20%), $info-dark);
-    @include lightDark(background-color, lighten($info, 50%), darken($info-dark, 34%));
-  }
-  &.warning {
-    @include lightDark(border-left-color, $warning, $warning-dark);
-    @include lightDark(background-color, lighten($warning, 50%), darken($warning-dark, 50%));
-    @include lightDark(color, darken($warning, 20%), $warning-dark);
-  }
-  &.warning:before {
-    background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiNjUzMWMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEgMjFoMjJMMTIgMiAxIDIxem0xMi0zaC0ydi0yaDJ2MnptMC00aC0ydi00aDJ2NHoiLz48L3N2Zz4=");
-  }
-  a {
-    color: inherit;
-    text-decoration: underline;
-  }
-}
-
 /**
  * Card-style blocks
  */

diff --git a/resources/sass/_content.scss b/resources/sass/_content.scss
new file mode 100644 (file)
index 0000000..10a2cd9
--- /dev/null
+++ b/resources/sass/_content.scss
@@ -0,0 +1,175 @@
+/**
+ * Page Content
+ * Styles specific to blocks used within page content.
+ */
+
+.page-content {
+  width: 100%;
+  max-width: 840px;
+  margin: 0 auto;
+  overflow-wrap: break-word;
+  .align-left {
+    text-align: left;
+  }
+  img.align-left, table.align-left {
+    float: left !important;
+    margin: $-xs $-m $-m 0;
+  }
+  .align-right {
+    text-align: right !important;
+  }
+  img.align-right, table.align-right {
+    float: right !important;
+    margin: $-xs 0 $-xs $-s;
+  }
+  .align-center {
+    text-align: center;
+  }
+  img.align-center {
+    display: block;
+  }
+  img.align-center, table.align-center {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  img {
+    max-width: 100%;
+    height:auto;
+  }
+  h1, h2, h3, h4, h5, h6, pre {
+    clear: left;
+  }
+  hr {
+    clear: both;
+    margin: $-m 0;
+  }
+  table {
+    hyphens: auto;
+    table-layout: fixed;
+    max-width: 100%;
+    height: auto !important;
+  }
+
+  // diffs
+  ins,
+  del {
+    text-decoration: none;
+  }
+  ins {
+    background: #dbffdb;
+  }
+  del {
+    background: #FFECEC;
+  }
+
+  details {
+    border: 1px solid;
+    @include lightDark(border-color, #DDD, #555);
+    margin-bottom: 1em;
+    padding: $-s;
+  }
+  details > summary {
+    margin-top: -$-s;
+    margin-left: -$-s;
+    margin-right: -$-s;
+    margin-bottom: -$-s;
+    font-weight: bold;
+    @include lightDark(background-color, #EEE, #333);
+    padding: $-xs $-s;
+  }
+  details[open] > summary {
+    margin-bottom: $-s;
+    border-bottom: 1px solid;
+    @include lightDark(border-color, #DDD, #555);
+  }
+  details > summary + * {
+    margin-top: .2em;
+  }
+  details:after {
+    content: '';
+    display: block;
+    clear: both;
+  }
+
+  li > input[type="checkbox"] {
+    vertical-align: top;
+    margin-top: 0.3em;
+  }
+
+  p:empty {
+    min-height: 1.6em;
+  }
+
+  &.page-revision {
+    pre code {
+      white-space: pre-wrap;
+    }
+  }
+
+  .cm-editor {
+    margin-bottom: 1.375em;
+  }
+
+  video {
+    max-width: 100%;
+  }
+}
+
+/**
+ * Callouts
+ */
+.callout {
+  border-left: 3px solid #BBB;
+  background-color: #EEE;
+  padding: $-s $-s $-s $-xl;
+  display: block;
+  position: relative;
+  overflow: auto;
+  &:before {
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMwMTUzODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTEgMTVoLTJ2LTZoMnY2em0wLThoLTJWN2gydjJ6Ii8+PC9zdmc+');
+    background-repeat: no-repeat;
+    content: '';
+    width: 1.2em;
+    height: 1.2em;
+    left: $-xs + 2px;
+    top: 50%;
+    margin-top: -9px;
+    display: inline-block;
+    position: absolute;
+    line-height: 1;
+    opacity: 0.8;
+  }
+  &.success {
+    @include lightDark(border-left-color, $positive, $positive-dark);
+    @include lightDark(background-color, lighten($positive, 68%), darken($positive-dark, 36%));
+    @include lightDark(color, darken($positive, 16%), $positive-dark);
+  }
+  &.success:before {
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMzNzZjMzkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0yIDE1bC01LTUgMS40MS0xLjQxTDEwIDE0LjE3bDcuNTktNy41OUwxOSA4bC05IDl6Ii8+PC9zdmc+");
+  }
+  &.danger {
+    @include lightDark(border-left-color, $negative, $negative-dark);
+    @include lightDark(background-color, lighten($negative, 56%), darken($negative-dark, 55%));
+    @include lightDark(color, darken($negative, 20%), $negative-dark);
+  }
+  &.danger:before {
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiOTE4MTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0xNS43MyAzSDguMjdMMyA4LjI3djcuNDZMOC4yNyAyMWg3LjQ2TDIxIDE1LjczVjguMjdMMTUuNzMgM3pNMTIgMTcuM2MtLjcyIDAtMS4zLS41OC0xLjMtMS4zIDAtLjcyLjU4LTEuMyAxLjMtMS4zLjcyIDAgMS4zLjU4IDEuMyAxLjMgMCAuNzItLjU4IDEuMy0xLjMgMS4zem0xLTQuM2gtMlY3aDJ2NnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==");
+  }
+  &.info {
+    @include lightDark(border-left-color, $info, $info-dark);
+    @include lightDark(color, darken($info, 20%), $info-dark);
+    @include lightDark(background-color, lighten($info, 50%), darken($info-dark, 34%));
+  }
+  &.warning {
+    @include lightDark(border-left-color, $warning, $warning-dark);
+    @include lightDark(background-color, lighten($warning, 50%), darken($warning-dark, 50%));
+    @include lightDark(color, darken($warning, 20%), $warning-dark);
+  }
+  &.warning:before {
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiNjUzMWMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEgMjFoMjJMMTIgMiAxIDIxem0xMi0zaC0ydi0yaDJ2MnptMC00aC0ydi00aDJ2NHoiLz48L3N2Zz4=");
+  }
+  a {
+    color: inherit;
+    text-decoration: underline;
+  }
+}
\ No newline at end of file

diff --git a/resources/sass/_pages.scss b/resources/sass/_pages.scss
index 2a77e84ba34253330831383d949c8c15d0a087e1..fbac1de07c774215888f1f424cdd4bd9cf812d10 100755 (executable)
--- a/resources/sass/_pages.scss
+++ b/resources/sass/_pages.scss
@@ -76,118 +76,6 @@ body.tox-fullscreen, body.markdown-fullscreen {
   padding: 0 !important;
 }
 
-.page-content {
-  width: 100%;
-  max-width: 840px;
-  margin: 0 auto;
-  overflow-wrap: break-word;
-  .align-left {
-    text-align: left;
-  }
-  img.align-left, table.align-left {
-    float: left !important;
-    margin: $-xs $-m $-m 0;
-  }
-  .align-right {
-    text-align: right !important;
-  }
-  img.align-right, table.align-right {
-    float: right !important;
-    margin: $-xs 0 $-xs $-s;
-  }
-  .align-center {
-    text-align: center;
-  }
-  img.align-center {
-    display: block;
-  }
-  img.align-center, table.align-center {
-    margin-left: auto;
-    margin-right: auto;
-  }
-  img {
-    max-width: 100%;
-    height:auto;
-  }
-  h1, h2, h3, h4, h5, h6, pre {
-    clear: left;
-  }
-  hr {
-    clear: both;
-    margin: $-m 0;
-  }
-  table {
-    hyphens: auto;
-    table-layout: fixed;
-    max-width: 100%;
-    height: auto !important;
-  }
-
-  // diffs
-  ins,
-  del {
-    text-decoration: none;
-  }
-  ins {
-    background: #dbffdb;
-  }
-  del {
-    background: #FFECEC;
-  }
-
-  details {
-    border: 1px solid;
-    @include lightDark(border-color, #DDD, #555);
-    margin-bottom: 1em;
-    padding: $-s;
-  }
-  details > summary {
-    margin-top: -$-s;
-    margin-left: -$-s;
-    margin-right: -$-s;
-    margin-bottom: -$-s;
-    font-weight: bold;
-    @include lightDark(background-color, #EEE, #333);
-    padding: $-xs $-s;
-  }
-  details[open] > summary {
-    margin-bottom: $-s;
-    border-bottom: 1px solid;
-    @include lightDark(border-color, #DDD, #555);
-  }
-  details > summary + * {
-    margin-top: .2em;
-  }
-  details:after {
-    content: '';
-    display: block;
-    clear: both;
-  }
-
-  li > input[type="checkbox"] {
-    vertical-align: top;
-    margin-top: 0.3em;
-  }
-
-  p:empty {
-    min-height: 1.6em;
-  }
-
-  &.page-revision {
-    pre code {
-      white-space: pre-wrap;
-    }
-  }
-
-  .cm-editor {
-    margin-bottom: 1.375em;
-  }
-
-  video {
-    max-width: 100%;
-  }
-}
-
 // Page content pointers
 .pointer-container {
   position: fixed;

diff --git a/resources/sass/_text.scss b/resources/sass/_text.scss
index b00f51cd7ff83578d4ba23542aaf91560ce88a64..f2c88d96dd1ffdc87761fa0ec7f45c45c779b450 100644 (file)
--- a/resources/sass/_text.scss
+++ b/resources/sass/_text.scss
@@ -211,7 +211,8 @@ pre {
 blockquote {
   display: block;
   position: relative;
-  border-left: 4px solid var(--color-primary);
+  border-left: 4px solid transparent;
+  border-left-color: var(--color-primary);
   @include lightDark(background-color, #f8f8f8, #333);
   padding: $-s $-m $-s $-xl;
   overflow: auto;

diff --git a/resources/sass/export-styles.scss b/resources/sass/export-styles.scss
index 1e39bd0564ed86d1a70cfc8e156d60a83d9c1b90..cfa1ebdf8a68e3cc6a483a75702780a511be0071 100644 (file)
--- a/resources/sass/export-styles.scss
+++ b/resources/sass/export-styles.scss
@@ -3,11 +3,8 @@
 @import "mixins";
 @import "html";
 @import "text";
-@import "layout";
-@import "blocks";
 @import "tables";
-@import "lists";
-@import "pages";
+@import "content";
 
 html, body {
   background-color: #FFF;

diff --git a/resources/sass/styles.scss b/resources/sass/styles.scss
index 9a8e5b36dc38747066df07d5e9d9157b10635dcc..c0ce7ba6354d9c921106479cc3e9cb11526e10a4 100644 (file)
--- a/resources/sass/styles.scss
+++ b/resources/sass/styles.scss
@@ -21,6 +21,7 @@
 @import "footer";
 @import "lists";
 @import "pages";
+@import "content";
 
 // Jquery Sortable Styles
 .dragged {