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

1 @import "reset";

2 @import "variables";

3 @import "mixins";

4 @import "spacing";

5 @import "html";

6 @import "text";

7 @import "colors";

8 @import "layout";

9 @import "blocks";

10 @import "buttons";

11 @import "tables";

12 @import "forms";

13 @import "animations";

14 @import "tinymce";

15 @import "codemirror";

16 @import "components";

17 @import "header";

18 @import "lists";

19 @import "pages";

21 // Jquery Sortable Styles

22 .dragged {

23 position: absolute;

24 opacity: 0.5;

25 z-index: 2000;

26 }

27 body.dragging, body.dragging * {

28 cursor: move !important;

29 }

31 // User Avatar Images

32 .avatar {

33 border-radius: 100%;

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

35 width: 30px;

36 height: 30px;

37 &.med {

38 width: 40px;

39 height: 40px;

40 }

41 &.large {

42 width: 80px;

43 height: 80px;

44 }

45 &.huge {

46 width: 120px;

47 height: 120px;

48 }

49 &.square {

50 border-radius: 3px;

51 }

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

53 @include whenDark {

54 filter: invert(1);

55 }

56 }

57 }

59 // Loading icon

60 $loadingSize: 10px;

61 .loading-container {

62 position: relative;

63 display: block;

64 margin: $-xl auto;

65 > div {

66 width: $loadingSize;

67 height: $loadingSize;

68 border-radius: $loadingSize;

69 display: inline-block;

70 vertical-align: top;

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

72 margin-top: $-xs;

73 animation-name: loadingBob;

74 animation-duration: 1.4s;

75 animation-iteration-count: infinite;

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

77 margin-inline-end: 4px;

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

79 animation-delay: 0.3s;

80 }

81 > div:first-child {

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

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

84 animation-delay: 0s;

85 }

86 > div:last-of-type {

87 left: $loadingSize+$-xs;

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

89 animation-delay: 0.6s;

90 }

91 > span {

92 margin-inline-start: $-s;

93 font-style: italic;

94 color: #888;

95 vertical-align: top;

96 }

97 }

99 // Back to top link

100 $btt-size: 40px;

101 [back-to-top] {

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

103 position: fixed;

104 bottom: $-m;

105 right: $-l;

106 padding: 5px 7px;

107 cursor: pointer;

108 color: #FFF;

109 fill: #FFF;

110 svg {

111 width: $btt-size / 1.5;

112 height: $btt-size / 1.5;

113 margin-inline-end: 4px;

114 }

115 width: $btt-size;

116 height: $btt-size;

117 border-radius: $btt-size;

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

119 opacity: 0;

120 z-index: 999;

121 overflow: hidden;

122 &:hover {

123 width: $btt-size*3.4;

124 opacity: 1 !important;

125 }

126 .inner {

127 width: $btt-size*3.4;

128 }

129 span {

130 position: relative;

131 vertical-align: top;

132 line-height: 2;

133 }

134 }

135

136 .contained-search-box {

137 display: flex;

138 height: 38px;

139 input, button {

140 border-radius: 0;

141 border: 1px solid #ddd;

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

143 margin-inline-start: -1px;

144 }

145 input {

146 flex: 5;

147 padding: $-xs $-s;

148 &:focus, &:active {

149 outline: 0;

150 }

151 }

152 button {

153 width: 60px;

154 }

155 button i {

156 padding: 0;

157 }

158 button.cancel.active {

159 background-color: $negative;

160 color: #EEE;

161 }

162 svg {

163 margin: 0;

164 }

165 }

166

167 .entity-selector {

168 border: 1px solid #DDD;

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

170 border-radius: 3px;

171 overflow: hidden;

172 font-size: 0.8em;

173 input[type="text"] {

174 width: 100%;

175 display: block;

176 border-radius: 0;

177 border: 0;

178 border-bottom: 1px solid #DDD;

179 font-size: 16px;

180 padding: $-s $-m;

181 }

182 .entity-list {

183 overflow-y: scroll;

184 height: 400px;

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

186 margin-inline-end: 0;

187 margin-inline-start: 0;

188 }

189 .entity-list-item {

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

191 }

192 .entity-list-item p {

193 margin-bottom: 0;

194 }

195 .entity-list-item.selected {

196 background-color: rgba(0, 0, 0, 0.05) !important;

197 }

198 .loading {

199 height: 400px;

200 padding-top: $-l;

201 }

202 .entity-selector-add button {

203 margin: 0;

204 display: block;

205 width: 100%;

206 border: 0;

207 border-top: 1px solid #DDD;

208 }

209 &.compact {

210 font-size: 10px;

211 .entity-item-snippet {

212 display: none;

213 }

214 }

215 }

216

217 .scroll-box {

218 max-height: 250px;

219 overflow-y: scroll;

220 border: 1px solid #DDD;

221 border-radius: 3px;

222 .scroll-box-item {

223 padding: $-xs $-m;

224 border-bottom: 1px solid #DDD;

225 border-top: 1px solid #DDD;

226 margin-top: -1px;

227 &:last-child {

228 border-bottom: 0;

229 }

230 }

231 }

232

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

234 content: attr(data-instruction);

235 padding: $-xs $-m;

236 border-bottom: 1px solid #DDD;

237 display: block;

238 font-size: 0.75rem;

239 color: #666;

240 }

241

242 .fullscreen {

243 border:0;

244 position:fixed;

245 top:0;

246 left:0;

247 right:0;

248 bottom:0;

249 width:100%;

250 height:100%;

251 z-index: 150;

252 }

253

254 .list-sort-container {

255 display: inline-block;

256 form {

257 display: inline-block;

258 }

259 .list-sort {

260 display: inline-grid;

261 margin-inline-start: $-s;

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

263 font-size: 0.9rem;

264 border: 2px solid #DDD;

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

266 border-radius: 4px;

267 }

268 .list-sort-label {

269 font-weight: bold;

270 display: inline-block;

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

272 }

273 .list-sort-type {

274 text-align: start;

275 }

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

277 padding: $-xs $-s;

278 cursor: pointer;

279 }

280 .list-sort-dir {

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

282 color: #888;

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

284 .svg-icon {

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

286 }

287 &:hover .svg-icon {

288 transform: rotate(180deg);

289 }

290 }

291 }