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 {

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 {

22 float: right !important;

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

24 }

25 .align-center {

26 text-align: center;

27 }

28 img.align-center {

29 display: block;

30 }

31 img.align-center, table.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

118 /**

119 * Callouts

120 */

121 .callout {

122 border-left: 3px solid #BBB;

123 background-color: #EEE;

124 padding: $-s $-s $-s $-xl;

125 display: block;

126 position: relative;

127 overflow: auto;

128 &:before {

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

130 background-repeat: no-repeat;

131 content: '';

132 width: 1.2em;

133 height: 1.2em;

134 left: $-xs + 2px;

135 top: 50%;

136 margin-top: -9px;

137 display: inline-block;

138 position: absolute;

139 line-height: 1;

140 opacity: 0.8;

141 }

142 &.success {

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

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

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

146 }

147 &.success:before {

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

149 }

150 &.danger {

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

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

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

154 }

155 &.danger:before {

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

157 }

158 &.info {

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

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

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

162 }

163 &.warning {

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

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

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

167 }

168 &.warning:before {

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

170 }

171 a {

172 color: inherit;

173 text-decoration: underline;

174 }

175 }