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

8 @import "html";

9 @import "text";

10 @import "colors";

11 @import "layout";

12 @import "blocks";

13 @import "buttons";

14 @import "tables";

15 @import "forms";

16 @import "animations";

17 @import "tinymce";

18 @import "codemirror";

19 @import "components";

20 @import "header";

21 @import "footer";

22 @import "lists";

23 @import "pages";

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: -300ms;

84 }

85 > div:first-child {

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

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

88 animation-delay: -600ms;

89 }

90 > div:last-of-type {

91 left: $loadingSize+$-xs;

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

93 animation-delay: 0ms;

94 }

95 > span {

96 margin-inline-start: $-s;

97 font-style: italic;

98 color: #888;

99 vertical-align: top;

100 }

101 }

102

103 .skip-to-content-link {

104 position: fixed;

105 top: -52px;

106 left: 0;

107 background-color: #FFF;

108 z-index: 15;

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

110 display: block;

111 box-shadow: $bs-dark;

112 font-weight: bold;

113 &:focus {

114 top: $-xl;

115 outline-offset: -10px;

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

117 }

118 }

119

120 .contained-search-box {

121 display: flex;

122 height: 38px;

123 input, button {

124 border-radius: 0;

125 border: 1px solid #ddd;

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

127 margin-inline-start: -1px;

128 }

129 input {

130 flex: 5;

131 padding: $-xs $-s;

132 &:focus, &:active {

133 outline: 0;

134 }

135 }

136 button {

137 width: 60px;

138 }

139 button i {

140 padding: 0;

141 }

142 button.cancel.active {

143 background-color: $negative;

144 color: #EEE;

145 }

146 svg {

147 margin: 0;

148 }

149 }

150

151 .entity-selector {

152 border: 1px solid #DDD;

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

154 border-radius: 3px;

155 overflow: hidden;

156 font-size: 0.8em;

157 input[type="text"] {

158 width: 100%;

159 display: block;

160 border-radius: 0;

161 border: 0;

162 border-bottom: 1px solid #DDD;

163 font-size: 16px;

164 padding: $-s $-m;

165 }

166 .entity-list {

167 overflow-y: scroll;

168 height: 400px;

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

170 margin-inline-end: 0;

171 margin-inline-start: 0;

172 }

173 .entity-list-item {

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

175 }

176 .entity-list-item p {

177 margin-bottom: 0;

178 }

179 .entity-list-item:focus {

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

181 outline-offset: -4px;

182 }

183 .entity-list-item.selected {

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

185 }

186 .loading {

187 height: 400px;

188 padding-top: $-l;

189 }

190 .entity-selector-add button {

191 margin: 0;

192 display: block;

193 width: 100%;

194 border: 0;

195 border-top: 1px solid #DDD;

196 }

197 &.compact {

198 font-size: 10px;

199 .entity-item-snippet {

200 display: none;

201 }

202 }

203 }

204

205 .scroll-box {

206 max-height: 250px;

207 overflow-y: scroll;

208 border: 1px solid;

209 @include lightDark(border-color, #DDD, #000);

210 border-radius: 3px;

211 min-height: 20px;

212 @include lightDark(background-color, #EEE, #000);

213 }

214 .scroll-box-item {

215 border-bottom: 1px solid;

216 border-top: 1px solid;

217 @include lightDark(border-color, #DDD, #000);

218 margin-top: -1px;

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

220 display: flex;

221 padding: 1px;

222 &:last-child {

223 border-bottom: 0;

224 }

225 &:hover {

226 cursor: pointer;

227 @include lightDark(background-color, #f8f8f8, #333);

228 }

229 .handle {

230 color: #AAA;

231 cursor: grab;

232 }

233 .handle svg {

234 margin: 0;

235 }

236 > * {

237 padding: $-xs $-m;

238 }

239 .handle + * {

240 padding-left: 0;

241 }

242 &:hover .handle {

243 @include lightDark(color, #444, #FFF);

244 }

245 a:hover {

246 text-decoration: none;

247 }

248 }

249

250 input.scroll-box-search, .scroll-box-header-item {

251 font-size: 0.8rem;

252 padding: $-xs $-m;

253 border: 1px solid;

254 @include lightDark(border-color, #DDD, #000);

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

256 margin-bottom: -1px;

257 border-radius: 3px 3px 0 0;

258 width: 100%;

259 max-width: 100%;

260 height: auto;

261 line-height: 1.4;

262 color: #666;

263 }

264

265 .scroll-box-search + .scroll-box,

266 .scroll-box-header-item + .scroll-box {

267 border-radius: 0 0 3px 3px;

268 }

269

270 .fullscreen {

271 border:0;

272 position:fixed;

273 top:0;

274 left:0;

275 right:0;

276 bottom:0;

277 width:100%;

278 height:100%;

279 z-index: 150;

280 }

281

282 .list-sort-container {

283 display: inline-block;

284 form {

285 display: inline-block;

286 }

287 .list-sort {

288 display: inline-grid;

289 margin-inline-start: $-s;

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

291 font-size: 0.9rem;

292 border: 2px solid #DDD;

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

294 border-radius: 4px;

295 }

296 .list-sort-label {

297 font-weight: bold;

298 display: inline-block;

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

300 }

301 .list-sort-type {

302 text-align: start;

303 }

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

305 padding: $-xs $-s;

306 cursor: pointer;

307 }

308 .list-sort-dir {

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

310 color: #888;

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

312 .svg-icon {

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

314 }

315 &:hover .svg-icon {

316 transform: rotate(180deg);

317 }

318 }

319 }