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