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

2 /**

3 * Callouts

4 */

5 .callout {

6 border-inline-start: 3px solid #BBB;

7 background-color: #EEE;

8 padding: $-s $-s $-s $-xl;

9 display: block;

10 position: relative;

11 &:before {

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

13 background-repeat: no-repeat;

14 content: '';

15 width: 1.2em;

16 height: 1.2em;

17 left: $-xs + 2px;

18 top: 50%;

19 margin-top: -9px;

20 display: inline-block;

21 position: absolute;

22 line-height: 1;

23 opacity: 0.8;

24 }

25 &.success {

26 border-left-color: $positive;

27 @include lightDark(background-color, lighten($positive, 68%), darken($positive, 22%));

28 @include lightDark(color, darken($positive, 16%), lighten($positive, 5%));

29 }

30 &.success:before {

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

32 }

33 &.danger {

34 border-left-color: $negative;

35 @include lightDark(background-color, lighten($negative, 56%), darken($negative, 30%));

36 @include lightDark(color, darken($negative, 20%), lighten($negative, 5%));

37 }

38 &.danger:before {

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

40 }

41 &.info {

42 border-left-color: $info;

43 @include lightDark(color, darken($info, 20%), lighten($info, 10%));

44 @include lightDark(background-color, lighten($info, 50%), darken($info, 35%));

45 }

46 &.warning {

47 border-left-color: $warning;

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

49 @include lightDark(color, darken($warning, 20%), $warning);

50 }

51 &.warning:before {

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

53 }

54 }

56 /**

57 * Card-style blocks

58 */

60 .card {

61 @include lightDark(background-color, #FFF, #222);

62 box-shadow: $bs-card;

63 border-radius: 3px;

64 border: 1px solid transparent;

65 .body, p.empty-text {

66 padding: $-m;

67 }

68 a, p {

69 word-wrap: break-word;

70 word-break: break-word;

71 }

72 }

74 .card-title {

75 padding: $-m $-m $-xs;

76 margin: 0;

77 font-size: $fs-m;

78 color: #222;

79 fill: #222;

80 font-weight: 400;

81 }

82 .card-title a {

83 line-height: 1;

84 }

86 .card.border-card {

87 border: 1px solid #DDD;

88 }

90 .card.drag-card {

91 border: 1px solid #DDD;

92 @include lightDark(border-color, #ddd, #000);

93 @include lightDark(background-color, #fff, #333);

94 border-radius: 4px;

95 display: flex;

96 padding: 0 0 0 ($-s + 28px);

97 margin: $-s 0;

98 position: relative;

99 .drag-card-action {

100 cursor: pointer;

101 }

102 .handle, .drag-card-action {

103 display: flex;

104 align-items: center;

105 text-align: center;

106 justify-content: center;

107 width: 28px;

108 flex-grow: 0;

109 padding: 0 $-xs;

110 &:hover {

111 background-color: #EEE;

112 }

113 .svg-icon {

114 margin-inline-end: 0px;

115 }

116 }

117 > div .outline input {

118 margin: $-s 0;

119 width: 100%;

120 }

121 .handle {

122 @include lightDark(background-color, #eee, #2d2d2d);

123 left: 0;

124 position: absolute;

125 top: 0;

126 bottom: 0;

127 }

128 > div {

129 padding: 0 $-s;

130 max-width: 80%;

131 flex: 1;

132 }

133 }

134

135 .grid-card {

136 display: flex;

137 flex-direction: column;

138 border: 1px solid #ddd;

139 @include lightDark(border-color, #ddd, #000);

140 margin-bottom: $-l;

141 border-radius: 4px;

142 overflow: hidden;

143 min-width: 100px;

144 color: $text-dark;

145 transition: border-color ease-in-out 120ms, box-shadow ease-in-out 120ms;

146 &:hover {

147 color: $text-dark;

148 text-decoration: none;

149 @include lightDark(box-shadow, $bs-card, $bs-card-dark);

150 }

151 h2 {

152 width: 100%;

153 font-size: 1.5em;

154 margin: 0 0 10px;

155 }

156 p {

157 font-size: .7rem;

158 margin: 0;

159 line-height: 1.6em;

160 }

161 .grid-card-content {

162 flex: 1;

163 border-top: 0;

164 border-bottom-width: 2px;

165 }

166 .grid-card-content, .grid-card-footer {

167 padding: $-l;

168 }

169 .grid-card-content + .grid-card-footer {

170 padding-top: 0;

171 }

172 }

173

174 .book-grid-item .grid-card-footer {

175 p.small {

176 font-size: .8em;

177 margin: 0;

178 }

179 }

180

181 .content-wrap.card {

182 padding: $-m $-xxl;

183 margin-inline-start: auto;

184 margin-inline-end: auto;

185 margin-bottom: $-xl;

186 overflow: initial;

187 min-height: 60vh;

188 &.auto-height {

189 min-height: 0;

190 }

191 &.fill-width {

192 width: 100%;

193 }

194 }

195 @include smaller-than($xxl) {

196 .content-wrap.card {

197 padding: $-m $-xl;

198 }

199 }

200 @include smaller-than($m) {

201 .content-wrap.card {

202 padding: $-m $-l;

203 }

204 }

205 @include smaller-than($s) {

206 .content-wrap.card {

207 padding: $-m $-m;

208 }

209 }

210

211 /**

212 * Tags

213 */

214 .tag-item {

215 display: inline-flex;

216 margin-bottom: $-xs;

217 margin-inline-end: $-xs;

218 border-radius: 4px;

219 border: 1px solid #CCC;

220 overflow: hidden;

221 font-size: 0.85em;

222 a, a:hover, a:active {

223 padding: 4px 8px;

224 @include lightDark(color, #777, #999);

225 transition: background-color ease-in-out 80ms;

226 text-decoration: none;

227 }

228 a:hover {

229 @include lightDark(background-color, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));

230 }

231 svg {

232 fill: #888;

233 }

234 .tag-value {

235 border-inline-start: 1px solid #DDD;

236 @include lightDark(background-color, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2))

237 }

238 }

239

240 .tag-list div:last-child .tag-item {

241 margin-bottom: 0;

242 }

243

244 /**

245 * API Docs

246 */

247 .api-method {

248 font-size: 0.75rem;

249 background-color: #888;

250 padding: $-xs;

251 line-height: 1.3;

252 opacity: 0.7;

253 vertical-align: top;

254 border-radius: 3px;

255 color: #FFF;

256 display: inline-block;

257 min-width: 60px;

258 text-align: center;

259 font-weight: bold;

260 &[data-method="GET"] { background-color: #077b70 }

261 &[data-method="POST"] { background-color: #cf4d03 }

262 &[data-method="PUT"] { background-color: #0288D1 }

263 &[data-method="DELETE"] { background-color: #ab0f0e }

264 }

265

266 .sticky-sidebar {

267 position: sticky;

268 top: $-m;

269 }