BookStack Code Mirror - bookstack/blob - resources/sass/

1 /**

2 * Page Content

3 * Styles specific to blocks used within page content.

4 */

6 .page-content {

7 width: 100%;

8 max-width: 840px;

9 margin: 0 auto;

10 overflow-wrap: break-word;

11 .align-left {

12 text-align: left;

13 }

14 img.align-left, table.align-left, iframe.align-left, video.align-left {

15 float: left !important;

16 margin: $-xs $-m $-m 0;

17 }

18 .align-right {

19 text-align: right !important;

20 }

21 img.align-right, table.align-right, iframe.align-right, video.align-right {

22 float: right !important;

23 margin: $-xs 0 $-xs $-s;

24 }

25 .align-center {

26 text-align: center;

27 }

28 img.align-center, video.align-center, iframe.align-center {

29 display: block;

30 }

31 img.align-center, table.align-center, iframe.align-center, video.align-center {

32 margin-left: auto;

33 margin-right: auto;

34 }

35 img {

36 max-width: 100%;

37 height:auto;

38 }

39 h1, h2, h3, h4, h5, h6, pre {

40 clear: left;

41 }

42 hr {

43 clear: both;

44 margin: $-m 0;

45 }

46 table {

47 hyphens: auto;

48 table-layout: fixed;

49 max-width: 100%;

50 height: auto !important;

51 }

53 // diffs

54 ins,

55 del {

56 text-decoration: none;

57 }

58 ins {

59 background: #dbffdb;

60 }

61 del {

62 background: #FFECEC;

63 }

65 details {

66 border: 1px solid;

67 @include lightDark(border-color, #DDD, #555);

68 margin-bottom: 1em;

69 padding: $-s;

70 }

71 details > summary {

72 margin-top: -$-s;

73 margin-left: -$-s;

74 margin-right: -$-s;

75 margin-bottom: -$-s;

76 font-weight: bold;

77 @include lightDark(background-color, #EEE, #333);

78 padding: $-xs $-s;

79 }

80 details[open] > summary {

81 margin-bottom: $-s;

82 border-bottom: 1px solid;

83 @include lightDark(border-color, #DDD, #555);

84 }

85 details > summary + * {

86 margin-top: .2em;

87 }

88 details:after {

89 content: '';

90 display: block;

91 clear: both;

92 }

94 li > input[type="checkbox"] {

95 vertical-align: top;

96 margin-top: 0.3em;

97 }

99 p:empty {

100 min-height: 1.6em;

101 }

102

103 &.page-revision {

104 pre code {

105 white-space: pre-wrap;

106 }

107 }

108

109 .cm-editor {

110 margin-bottom: 1.375em;

111 }

112

113 video {

114 max-width: 100%;

115 }

116

117 a {

118 text-decoration: underline;

119 }

120 }

121

122 /**

123 * Callouts

124 */

125 .callout {

126 border-left: 3px solid #BBB;

127 background-color: #EEE;

128 padding: $-s $-s $-s $-xl;

129 display: block;

130 position: relative;

131 overflow: auto;

132 &:before {

133 background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMwMTUzODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTEgMTVoLTJ2LTZoMnY2em0wLThoLTJWN2gydjJ6Ii8+PC9zdmc+');

134 background-repeat: no-repeat;

135 content: '';

136 width: 1.2em;

137 height: 1.2em;

138 left: $-xs + 2px;

139 top: 50%;

140 margin-top: -9px;

141 display: inline-block;

142 position: absolute;

143 line-height: 1;

144 opacity: 0.8;

145 }

146 &.success {

147 @include lightDark(border-left-color, $positive, $positive-dark);

148 @include lightDark(background-color, lighten($positive, 68%), darken($positive-dark, 36%));

149 @include lightDark(color, darken($positive, 16%), $positive-dark);

150 }

151 &.success:before {

152 background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMzNzZjMzkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0yIDE1bC01LTUgMS40MS0xLjQxTDEwIDE0LjE3bDcuNTktNy41OUwxOSA4bC05IDl6Ii8+PC9zdmc+");

153 }

154 &.danger {

155 @include lightDark(border-left-color, $negative, $negative-dark);

156 @include lightDark(background-color, lighten($negative, 56%), darken($negative-dark, 55%));

157 @include lightDark(color, darken($negative, 20%), $negative-dark);

158 }

159 &.danger:before {

160 background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiOTE4MTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0xNS43MyAzSDguMjdMMyA4LjI3djcuNDZMOC4yNyAyMWg3LjQ2TDIxIDE1LjczVjguMjdMMTUuNzMgM3pNMTIgMTcuM2MtLjcyIDAtMS4zLS41OC0xLjMtMS4zIDAtLjcyLjU4LTEuMyAxLjMtMS4zLjcyIDAgMS4zLjU4IDEuMyAxLjMgMCAuNzItLjU4IDEuMy0xLjMgMS4zem0xLTQuM2gtMlY3aDJ2NnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==");

161 }

162 &.info {

163 @include lightDark(border-left-color, $info, $info-dark);

164 @include lightDark(color, darken($info, 20%), $info-dark);

165 @include lightDark(background-color, lighten($info, 50%), darken($info-dark, 34%));

166 }

167 &.warning {

168 @include lightDark(border-left-color, $warning, $warning-dark);

169 @include lightDark(background-color, lighten($warning, 50%), darken($warning-dark, 50%));

170 @include lightDark(color, darken($warning, 20%), $warning-dark);

171 }

172 &.warning:before {

173 background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiNjUzMWMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEgMjFoMjJMMTIgMiAxIDIxem0xMi0zaC0ydi0yaDJ2MnptMC00aC0ydi00aDJ2NHoiLz48L3N2Zz4=");

174 }

175 a {

176 color: inherit;

177 text-decoration: underline;

178 }

179 }