diff --git a/resources/sass/_blocks.scss b/resources/sass/_blocks.scss index a1268e6b4..54c509ef9 100644 --- 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 index 000000000..10a2cd983 --- /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 2a77e84ba..fbac1de07 100755 --- 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 b00f51cd7..f2c88d96d 100644 --- 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 1e39bd056..cfa1ebdf8 100644 --- 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 9a8e5b36d..c0ce7ba63 100644 --- 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 {