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";

23 @import "editor";

25 // Jquery Sortable Styles

26 .dragged {

27 position: absolute;

28 opacity: 0.5;

29 z-index: 2000;

30 }

31 body.dragging, body.dragging * {

32 cursor: move !important;

33 }

35 // User Avatar Images

36 .avatar {

37 border-radius: 100%;

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

39 width: 30px;

40 height: 30px;

41 &.med {

42 width: 40px;

43 height: 40px;

44 }

45 &.large {

46 width: 80px;

47 height: 80px;

48 }

49 &.huge {

50 width: 120px;

51 height: 120px;

52 }

53 &.square {

54 border-radius: 3px;

55 }

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

57 @include whenDark {

58 filter: invert(1);

59 }

60 }

61 }

63 // Loading icon

64 $loadingSize: 10px;

65 .loading-container {

66 position: relative;

67 display: block;

68 margin: $-xl auto;

69 > div {

70 width: $loadingSize;

71 height: $loadingSize;

72 border-radius: $loadingSize;

73 display: inline-block;

74 vertical-align: top;

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

76 margin-top: $-xs;

77 animation-name: loadingBob;

78 animation-duration: 1.4s;

79 animation-iteration-count: infinite;

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

81 margin-inline-end: 4px;

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

83 animation-delay: 0.3s;

84 }

85 > div:first-child {

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

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

88 animation-delay: 0s;

89 }

90 > div:last-of-type {

91 left: $loadingSize+$-xs;

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

93 animation-delay: 0.6s;

94 }

95 > span {

96 margin-inline-start: $-s;

97 font-style: italic;

98 color: #888;

99 vertical-align: top;

100 }

101 }

102

103 // Back to top link

104 $btt-size: 40px;

105 [back-to-top] {

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

107 position: fixed;

108 bottom: $-m;

109 right: $-l;

110 padding: 5px 7px;

111 cursor: pointer;

112 color: #FFF;

113 fill: #FFF;

114 svg {

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

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

117 margin-inline-end: 4px;

118 }

119 width: $btt-size;

120 height: $btt-size;

121 border-radius: $btt-size;

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

123 opacity: 0;

124 z-index: 999;

125 overflow: hidden;

126 &:hover {

127 width: $btt-size*3.4;

128 opacity: 1 !important;

129 }

130 .inner {

131 width: $btt-size*3.4;

132 }

133 span {

134 position: relative;

135 vertical-align: top;

136 line-height: 2;

137 }

138 }

139

140 .skip-to-content-link {

141 position: fixed;

142 top: -$-xxl;

143 left: 0;

144 background-color: #FFF;

145 z-index: 15;

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

147 display: block;

148 box-shadow: $bs-dark;

149 font-weight: bold;

150 &:focus {

151 top: $-xl;

152 outline-offset: -10px;

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

154 }

155 }

156

157 .contained-search-box {

158 display: flex;

159 height: 38px;

160 input, button {

161 border-radius: 0;

162 border: 1px solid #ddd;

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

164 margin-inline-start: -1px;

165 }

166 input {

167 flex: 5;

168 padding: $-xs $-s;

169 &:focus, &:active {

170 outline: 0;

171 }

172 }

173 button {

174 width: 60px;

175 }

176 button i {

177 padding: 0;

178 }

179 button.cancel.active {

180 background-color: $negative;

181 color: #EEE;

182 }

183 svg {

184 margin: 0;

185 }

186 }

187

188 .entity-selector {

189 border: 1px solid #DDD;

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

191 border-radius: 3px;

192 overflow: hidden;

193 font-size: 0.8em;

194 input[type="text"] {

195 width: 100%;

196 display: block;

197 border-radius: 0;

198 border: 0;

199 border-bottom: 1px solid #DDD;

200 font-size: 16px;

201 padding: $-s $-m;

202 }

203 .entity-list {

204 overflow-y: scroll;

205 height: 400px;

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

207 margin-inline-end: 0;

208 margin-inline-start: 0;

209 }

210 .entity-list-item {

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

212 }

213 .entity-list-item p {

214 margin-bottom: 0;

215 }

216 .entity-list-item:focus {

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

218 outline-offset: -4px;

219 }

220 .entity-list-item.selected {

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

222 }

223 .loading {

224 height: 400px;

225 padding-top: $-l;

226 }

227 .entity-selector-add button {

228 margin: 0;

229 display: block;

230 width: 100%;

231 border: 0;

232 border-top: 1px solid #DDD;

233 }

234 &.compact {

235 font-size: 10px;

236 .entity-item-snippet {

237 display: none;

238 }

239 }

240 }

241

242 .scroll-box {

243 max-height: 250px;

244 overflow-y: scroll;

245 border: 1px solid #DDD;

246 border-radius: 3px;

247 .scroll-box-item {

248 padding: $-xs $-m;

249 border-bottom: 1px solid #DDD;

250 border-top: 1px solid #DDD;

251 margin-top: -1px;

252 &:last-child {

253 border-bottom: 0;

254 }

255 }

256 }

257

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

259 content: attr(data-instruction);

260 padding: $-xs $-m;

261 border-bottom: 1px solid #DDD;

262 display: block;

263 font-size: 0.75rem;

264 color: #666;

265 }

266

267 .fullscreen {

268 border:0;

269 position:fixed;

270 top:0;

271 left:0;

272 right:0;

273 bottom:0;

274 width:100%;

275 height:100%;

276 z-index: 150;

277 }

278

279 .list-sort-container {

280 display: inline-block;

281 form {

282 display: inline-block;

283 }

284 .list-sort {

285 display: inline-grid;

286 margin-inline-start: $-s;

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

288 font-size: 0.9rem;

289 border: 2px solid #DDD;

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

291 border-radius: 4px;

292 }

293 .list-sort-label {

294 font-weight: bold;

295 display: inline-block;

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

297 }

298 .list-sort-type {

299 text-align: start;

300 }

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

302 padding: $-xs $-s;

303 cursor: pointer;

304 }

305 .list-sort-dir {

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

307 color: #888;

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

309 .svg-icon {

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

311 }

312 &:hover .svg-icon {

313 transform: rotate(180deg);

314 }

315 }

316 }

317

318 table.table .table-user-item {

319 display: grid;

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

321 align-items: center;

322 }

323 table.table .table-entity-item {

324 display: grid;

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

326 align-items: center;

327 }