mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-30 07:32:39 +01:00
5395ca2f00
Required a lot of working around TinyMCE since it added a preview/wrapper element in the editor which complicates things. Added view new "fixes.js" file so large hacks to default TinyMCe functionality are kept in one place.
175 lines
5.1 KiB
SCSS
175 lines
5.1 KiB
SCSS
/**
|
|
* 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, iframe.align-left, video.align-left {
|
|
float: left !important;
|
|
margin: $-xs $-m $-m 0;
|
|
}
|
|
.align-right {
|
|
text-align: right !important;
|
|
}
|
|
img.align-right, table.align-right, iframe.align-right, video.align-right {
|
|
float: right !important;
|
|
margin: $-xs 0 $-xs $-s;
|
|
}
|
|
.align-center {
|
|
text-align: center;
|
|
}
|
|
img.align-center, video.align-center, iframe.align-center {
|
|
display: block;
|
|
}
|
|
img.align-center, table.align-center, iframe.align-center, video.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;
|
|
}
|
|
} |