BookStack Code Mirror - bookstack/blob - resources/sass/styles.scss

1 @use "sass:math";

3 @import "reset";

4 @import "variables";

5 @import "mixins";

6 @import "spacing";

7 @import "html";

8 @import "text";

9 @import "colors";

10 @import "layout";

11 @import "blocks";

12 @import "buttons";

13 @import "tables";

14 @import "forms";

15 @import "animations";

16 @import "tinymce";

17 @import "codemirror";

18 @import "components";

19 @import "header";

20 @import "footer";

21 @import "lists";

22 @import "pages";

24 // Jquery Sortable Styles

25 .dragged {

26 position: absolute;

27 opacity: 0.5;

28 z-index: 2000;

29 }

30 body.dragging, body.dragging * {

31 cursor: move !important;

32 }

34 // User Avatar Images

35 .avatar {

36 border-radius: 100%;

37 @include lightDark(background-color, #eee, #000);

38 width: 30px;

39 height: 30px;

40 &.med {

41 width: 40px;

42 height: 40px;

43 }

44 &.large {

45 width: 80px;

46 height: 80px;

47 }

48 &.huge {

49 width: 120px;

50 height: 120px;

51 }

52 &.square {

53 border-radius: 3px;

54 }

55 &[src$="user_avatar.png"] {

56 @include whenDark {

57 filter: invert(1);

58 }

59 }

60 }

62 // Loading icon

63 $loadingSize: 10px;

64 .loading-container {

65 position: relative;

66 display: block;

67 margin: $-xl auto;

68 > div {

69 width: $loadingSize;

70 height: $loadingSize;

71 border-radius: $loadingSize;

72 display: inline-block;

73 vertical-align: top;

74 transform: translate3d(-10px, 0, 0);

75 margin-top: $-xs;

76 animation-name: loadingBob;

77 animation-duration: 1.4s;

78 animation-iteration-count: infinite;

79 animation-timing-function: cubic-bezier(.62, .28, .23, .99);

80 margin-inline-end: 4px;

81 background-color: var(--color-page);

82 animation-delay: 0.3s;

83 }

84 > div:first-child {

85 left: -($loadingSize+$-xs);

86 background-color: var(--color-book);

87 animation-delay: 0s;

88 }

89 > div:last-of-type {

90 left: $loadingSize+$-xs;

91 background-color: var(--color-chapter);

92 animation-delay: 0.6s;

93 }

94 > span {

95 margin-inline-start: $-s;

96 font-style: italic;

97 color: #888;

98 vertical-align: top;

99 }

100 }

101

102 // Back to top link

103 $btt-size: 40px;

104 [back-to-top] {

105 background-color: var(--color-primary);

106 position: fixed;

107 bottom: $-m;

108 right: $-l;

109 padding: 5px 7px;

110 cursor: pointer;

111 color: #FFF;

112 fill: #FFF;

113 svg {

114 width: math.div($btt-size, 1.5);

115 height: math.div($btt-size, 1.5);

116 margin-inline-end: 4px;

117 }

118 width: $btt-size;

119 height: $btt-size;

120 border-radius: $btt-size;

121 transition: all ease-in-out 180ms;

122 opacity: 0;

123 z-index: 999;

124 overflow: hidden;

125 &:hover {

126 width: $btt-size*3.4;

127 opacity: 1 !important;

128 }

129 .inner {

130 width: $btt-size*3.4;

131 }

132 span {

133 position: relative;

134 vertical-align: top;

135 line-height: 2;

136 }

137 }

138

139 .skip-to-content-link {

140 position: fixed;

141 top: -$-xxl;

142 left: 0;

143 background-color: #FFF;

144 z-index: 15;

145 border-radius: 0 4px 4px 0;

146 display: block;

147 box-shadow: $bs-dark;

148 font-weight: bold;

149 &:focus {

150 top: $-xl;

151 outline-offset: -10px;

152 outline: 2px dotted var(--color-primary);

153 }

154 }

155

156 .contained-search-box {

157 display: flex;

158 height: 38px;

159 input, button {

160 border-radius: 0;

161 border: 1px solid #ddd;

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

163 margin-inline-start: -1px;

164 }

165 input {

166 flex: 5;

167 padding: $-xs $-s;

168 &:focus, &:active {

169 outline: 0;

170 }

171 }

172 button {

173 width: 60px;

174 }

175 button i {

176 padding: 0;

177 }

178 button.cancel.active {

179 background-color: $negative;

180 color: #EEE;

181 }

182 svg {

183 margin: 0;

184 }

185 }

186

187 .entity-selector {

188 border: 1px solid #DDD;

189 @include lightDark(border-color, #ddd, #111);

190 border-radius: 3px;

191 overflow: hidden;

192 font-size: 0.8em;

193 input[type="text"] {

194 width: 100%;

195 display: block;

196 border-radius: 0;

197 border: 0;

198 border-bottom: 1px solid #DDD;

199 font-size: 16px;

200 padding: $-s $-m;

201 }

202 .entity-list {

203 overflow-y: scroll;

204 height: 400px;

205 @include lightDark(background-color, #eee, #222);

206 margin-inline-end: 0;

207 margin-inline-start: 0;

208 }

209 .entity-list-item {

210 @include lightDark(background-color, #fff, #222);

211 }

212 .entity-list-item p {

213 margin-bottom: 0;

214 }

215 .entity-list-item:focus {

216 outline: 2px dotted var(--color-primary);

217 outline-offset: -4px;

218 }

219 .entity-list-item.selected {

220 @include lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));

221 }

222 .loading {

223 height: 400px;

224 padding-top: $-l;

225 }

226 .entity-selector-add button {

227 margin: 0;

228 display: block;

229 width: 100%;

230 border: 0;

231 border-top: 1px solid #DDD;

232 }

233 &.compact {

234 font-size: 10px;

235 .entity-item-snippet {

236 display: none;

237 }

238 }

239 }

240

241 .scroll-box {

242 max-height: 250px;

243 overflow-y: scroll;

244 border: 1px solid #DDD;

245 border-radius: 3px;

246 .scroll-box-item {

247 padding: $-xs $-m;

248 border-bottom: 1px solid #DDD;

249 border-top: 1px solid #DDD;

250 margin-top: -1px;

251 &:last-child {

252 border-bottom: 0;

253 }

254 }

255 }

256

257 .scroll-box[data-instruction]:before {

258 content: attr(data-instruction);

259 padding: $-xs $-m;

260 border-bottom: 1px solid #DDD;

261 display: block;

262 font-size: 0.75rem;

263 color: #666;

264 }

265

266 .fullscreen {

267 border:0;

268 position:fixed;

269 top:0;

270 left:0;

271 right:0;

272 bottom:0;

273 width:100%;

274 height:100%;

275 z-index: 150;

276 }

277

278 .list-sort-container {

279 display: inline-block;

280 form {

281 display: inline-block;

282 }

283 .list-sort {

284 display: inline-grid;

285 margin-inline-start: $-s;

286 grid-template-columns: minmax(120px, max-content) 40px;

287 font-size: 0.9rem;

288 border: 2px solid #DDD;

289 @include lightDark(border-color, #ddd, #444);

290 border-radius: 4px;

291 }

292 .list-sort-label {

293 font-weight: bold;

294 display: inline-block;

295 @include lightDark(color, #555, #888);

296 }

297 .list-sort-type {

298 text-align: start;

299 }

300 .list-sort-type, .list-sort-dir {

301 padding: $-xs $-s;

302 cursor: pointer;

303 }

304 .list-sort-dir {

305 border-inline-start: 2px solid #DDD;

306 color: #888;

307 @include lightDark(border-color, #ddd, #444);

308 .svg-icon {

309 transition: transform ease-in-out 120ms;

310 }

311 &:hover .svg-icon {

312 transform: rotate(180deg);

313 }

314 }

315 }

316

317 table.table .table-user-item {

318 display: grid;

319 grid-template-columns: 42px 1fr;

320 align-items: center;

321 }

322 table.table .table-entity-item {

323 display: grid;

324 grid-template-columns: 36px 1fr;

325 align-items: center;

326 }