BookStack Code Mirror - bookstack/blob - resources/sass/_content.scss

   1 @use "mixins";
   2 @use "vars";
   3
   4 /**
   5  * Page Content
   6  * Styles specific to blocks used within page content.
   7  */
   8
   9 .page-content {
  10   width: 100%;
  11   max-width: 840px;
  12   margin: 0 auto;
  13   overflow-wrap: break-word;
  14   .align-left {
  15     text-align: left;
  16   }
  17   img.align-left, table.align-left, iframe.align-left, video.align-left {
  18     float: left !important;
  19     margin: vars.$xs vars.$m vars.$m 0;
  20   }
  21   .align-right {
  22     text-align: right !important;
  23   }
  24   img.align-right, table.align-right, iframe.align-right, video.align-right {
  25     float: right !important;
  26     margin: vars.$xs 0 vars.$xs vars.$s;
  27   }
  28   .align-center {
  29     text-align: center;
  30   }
  31   img.align-center, video.align-center, iframe.align-center {
  32     display: block;
  33   }
  34   img.align-center, table.align-center, iframe.align-center, video.align-center {
  35     margin-left: auto;
  36     margin-right: auto;
  37   }
  38   .align-justify {
  39     text-align: justify;
  40   }
  41   h1, h2, h3, h4, h5, h6, pre {
  42     clear: left;
  43   }
  44   hr {
  45     clear: both;
  46     margin: vars.$m 0;
  47   }
  48   table {
  49     hyphens: auto;
  50     table-layout: fixed;
  51     max-width: 100%;
  52     height: auto !important;
  53   }
  54
  55   // diffs
  56   ins,
  57   del {
  58     text-decoration: none;
  59   }
  60   ins {
  61     background: #dbffdb;
  62   }
  63   del {
  64     background: #FFECEC;
  65   }
  66
  67   details {
  68     border: 1px solid;
  69     @include mixins.lightDark(border-color, #DDD, #555);
  70     margin-bottom: 1em;
  71     padding: vars.$s;
  72   }
  73   details > summary {
  74     margin-top: -(vars.$s);
  75     margin-left: -(vars.$s);
  76     margin-right: -(vars.$s);
  77     margin-bottom: -(vars.$s);
  78     font-weight: bold;
  79     @include mixins.lightDark(background-color, #EEE, #333);
  80     padding: vars.$xs vars.$s;
  81   }
  82   details[open] > summary {
  83     margin-bottom: vars.$s;
  84     border-bottom: 1px solid;
  85     @include mixins.lightDark(border-color, #DDD, #555);
  86   }
  87   details > summary + * {
  88     margin-top: .2em;
  89   }
  90   details:after {
  91     content: '';
  92     display: block;
  93     clear: both;
  94   }
  95
  96   li > input[type="checkbox"] {
  97     vertical-align: top;
  98     margin-top: 0.3em;
  99   }
 100
 101   p:empty {
 102     min-height: 1.6em;
 103   }
 104
 105   &.page-revision {
 106     pre code {
 107       white-space: pre-wrap;
 108     }
 109   }
 110
 111   .cm-editor {
 112     margin-bottom: 1.375em;
 113   }
 114
 115   video, iframe {
 116     max-width: 100%;
 117   }
 118
 119   a {
 120     text-decoration: underline;
 121   }
 122 }
 123
 124 // This is seperated out so we can target it out-of-editor by default
 125 // and use advanced (:not) syntax, not supported by things like PDF gen,
 126 // to target in-editor scenarios to handle edge-case of TinyMCE using an
 127 // image for data placeholders where we'd want height attributes to take effect.
 128 body .page-content img,
 129 .page-content img:not([data-mce-object]) {
 130   max-width: 100%;
 131   height:auto;
 132 }
 133
 134 /**
 135  * Callouts
 136  * Some styles duplicated for supporting logical units (eg. inline-end) while
 137  * providing fallbacks to non-logical rules, so RTL is natively supported where possible.
 138  */
 139 .callout {
 140   border-left: 3px solid #BBB;
 141   border-inline-start: 3px solid #BBB;
 142   border-inline-end: none;
 143   background-color: #EEE;
 144   padding: vars.$s;
 145   padding-left: vars.$xl;
 146   padding-inline-start: vars.$xl;
 147   padding-inline-end: vars.$s;
 148   display: block;
 149   position: relative;
 150   overflow: auto;
 151   &:before {
 152     background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMwMTUzODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTEgMTVoLTJ2LTZoMnY2em0wLThoLTJWN2gydjJ6Ii8+PC9zdmc+');
 153     background-repeat: no-repeat;
 154     content: '';
 155     width: 1.2em;
 156     height: 1.2em;
 157     left: vars.$xs + 2px;
 158     inset-inline-start: vars.$xs + 2px;
 159     inset-inline-end: unset;
 160     top: 50%;
 161     margin-top: -9px;
 162     display: inline-block;
 163     position: absolute;
 164     line-height: 1;
 165     opacity: 0.8;
 166   }
 167   &.success {
 168     @include mixins.lightDark(border-color, vars.$positive, vars.$positive-dark);
 169     @include mixins.lightDark(background-color, #eafdeb, #122913);
 170     @include mixins.lightDark(color, #063409, vars.$positive-dark);
 171   }
 172   &.success:before {
 173     background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMzNzZjMzkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0yIDE1bC01LTUgMS40MS0xLjQxTDEwIDE0LjE3bDcuNTktNy41OUwxOSA4bC05IDl6Ii8+PC9zdmc+");
 174   }
 175   &.danger {
 176     @include mixins.lightDark(border-color, vars.$negative, vars.$negative-dark);
 177     @include mixins.lightDark(background-color, #fcdbdb, #250505);
 178     @include mixins.lightDark(color, #4d0706, vars.$negative-dark);
 179   }
 180   &.danger:before {
 181     background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiOTE4MTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0xNS43MyAzSDguMjdMMyA4LjI3djcuNDZMOC4yNyAyMWg3LjQ2TDIxIDE1LjczVjguMjdMMTUuNzMgM3pNMTIgMTcuM2MtLjcyIDAtMS4zLS41OC0xLjMtMS4zIDAtLjcyLjU4LTEuMyAxLjMtMS4zLjcyIDAgMS4zLjU4IDEuMyAxLjMgMCAuNzItLjU4IDEuMy0xLjMgMS4zem0xLTQuM2gtMlY3aDJ2NnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==");
 182   }
 183   &.info {
 184     @include mixins.lightDark(border-color, vars.$info, vars.$info-dark);
 185     @include mixins.lightDark(background-color, #d3efff, #001825);
 186     @include mixins.lightDark(color, #01466c, vars.$info-dark);
 187   }
 188   &.warning {
 189     @include mixins.lightDark(border-color, vars.$warning, vars.$warning-dark);
 190     @include mixins.lightDark(background-color, #fee3d3, #30170a);
 191     @include mixins.lightDark(color, #6a2802, vars.$warning-dark);
 192   }
 193   &.warning:before {
 194     background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiNjUzMWMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEgMjFoMjJMMTIgMiAxIDIxem0xMi0zaC0ydi0yaDJ2MnptMC00aC0ydi00aDJ2NHoiLz48L3N2Zz4=");
 195   }
 196   a {
 197     color: inherit;
 198     text-decoration: underline;
 199   }
 200 }