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

1 @use "sass:meta";

3 @use "reset";

4 @use "vars";

5 @use "mixins";

6 @use "spacing";

7 @use "opacity";

8 @use "html";

9 @use "text";

10 @use "colors";

11 @use "layout";

12 @use "blocks";

13 @use "buttons";

14 @use "tables";

15 @use "forms";

16 @use "animations";

17 @use "tinymce";

18 @use "editor";

19 @use "codemirror";

20 @use "components";

21 @use "header";

22 @use "footer";

23 @use "lists";

24 @use "pages";

25 @use "content";

27 @media print {

28 @include meta.load-css("print");

29 }

31 // Jquery Sortable Styles

32 .dragged {

33 position: absolute;

34 opacity: 0.5;

35 z-index: 2000;

36 }

37 body.dragging, body.dragging * {

38 cursor: move !important;

39 }

41 // User Avatar Images

42 .avatar {

43 border-radius: 100%;

44 @include mixins.lightDark(background-color, #eee, #000);

45 width: 30px;

46 height: 30px;

47 &.med {

48 width: 40px;

49 height: 40px;

50 }

51 &.large {

52 width: 80px;

53 height: 80px;

54 }

55 &.huge {

56 width: 120px;

57 height: 120px;

58 }

59 &.square {

60 border-radius: 3px;

61 }

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

63 @include mixins.whenDark {

64 filter: invert(1);

65 }

66 }

67 }

69 // Loading icon

70 $loadingSize: 10px;

71 .loading-container {

72 position: relative;

73 display: block;

74 margin: vars.$xl auto;

75 > div {

76 width: $loadingSize;

77 height: $loadingSize;

78 border-radius: $loadingSize;

79 display: inline-block;

80 vertical-align: top;

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

82 margin-top: vars.$xs;

83 animation-name: loadingBob;

84 animation-duration: 1.4s;

85 animation-iteration-count: infinite;

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

87 margin-inline-end: 4px;

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

89 animation-delay: -300ms;

90 }

91 > div:first-child {

92 left: -($loadingSize+vars.$xs);

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

94 animation-delay: -600ms;

95 }

96 > div:last-of-type {

97 left: $loadingSize+vars.$xs;

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

99 animation-delay: 0ms;

100 }

101 > span {

102 margin-inline-start: vars.$s;

103 font-style: italic;

104 color: #888;

105 vertical-align: top;

106 }

107 }

108

109 .inline.block .loading-container {

110 margin: vars.$xs vars.$s;

111 }

112

113 .skip-to-content-link {

114 position: fixed;

115 top: -52px;

116 left: 0;

117 background-color: #FFF;

118 z-index: 15;

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

120 display: block;

121 box-shadow: vars.$bs-dark;

122 font-weight: bold;

123 &:focus {

124 top: vars.$xl;

125 outline-offset: -10px;

126 outline: 2px dotted var(--color-link);

127 }

128 }

129

130 .entity-selector {

131 border: 1px solid #DDD;

132 @include mixins.lightDark(border-color, #ddd, #111);

133 border-radius: 3px;

134 overflow: hidden;

135 font-size: 0.8em;

136 input[type="text"] {

137 width: 100%;

138 display: block;

139 border-radius: 0;

140 border: 0;

141 border-bottom: 1px solid #DDD;

142 font-size: 16px;

143 padding: vars.$s vars.$m;

144 }

145 input[type="text"]:focus {

146 outline: 1px solid var(--color-primary);

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

148 outline-offset: -1px;

149 }

150 .entity-list {

151 overflow-y: scroll;

152 height: 400px;

153 @include mixins.lightDark(background-color, #eee, #222);

154 margin-inline-end: 0;

155 margin-inline-start: 0;

156 }

157 .entity-list-item {

158 @include mixins.lightDark(background-color, #fff, #222);

159 }

160 .entity-list-item p {

161 margin-bottom: 0;

162 }

163 .entity-list-item:focus {

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

165 outline-offset: -4px;

166 }

167 .entity-list-item.selected {

168 @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));

169 }

170 .loading {

171 height: 400px;

172 padding-top: vars.$l;

173 }

174 &.compact {

175 font-size: 10px;

176 .entity-item-snippet {

177 display: none;

178 }

179 h4 {

180 font-size: 14px;

181 }

182 }

183 &.small {

184 .entity-list-item {

185 padding: vars.$xs vars.$m;

186 }

187 .entity-list, .loading {

188 height: 300px;

189 }

190 input[type="text"] {

191 font-size: 13px;

192 padding: vars.$xs vars.$m;

193 height: auto;

194 }

195 }

196 }

197

198 .fullscreen {

199 border:0;

200 position:fixed;

201 top:0;

202 left:0;

203 right:0;

204 bottom:0;

205 width:100%;

206 height:100%;

207 z-index: 150;

208 }

209

210 @include mixins.between(vars.$bp-s, vars.$bp-m) {

211 #home-default > .grid.third {

212 display: block;

213 columns: 2;

214 column-gap: vars.$l !important;

215 }

216 }

217

218 .list-sort-container {

219 display: inline-block;

220 form {

221 display: inline-block;

222 }

223 .list-sort {

224 display: inline-grid;

225 margin-inline-start: vars.$s;

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

227 font-size: 0.9rem;

228 border: 2px solid #DDD;

229 @include mixins.lightDark(border-color, #ddd, #444);

230 border-radius: 4px;

231 }

232 .list-sort-label {

233 font-weight: bold;

234 display: inline-block;

235 @include mixins.lightDark(color, #555, #888);

236 }

237 .list-sort-type {

238 text-align: start;

239 }

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

241 padding: vars.$xs vars.$s;

242 cursor: pointer;

243 }

244 .list-sort-dir {

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

246 color: #888;

247 @include mixins.lightDark(border-color, #ddd, #444);

248 .svg-icon {

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

250 }

251 &:hover .svg-icon {

252 transform: rotate(180deg);

253 }

254 }

255 }

256

257 .import-item {

258 border-inline-start: 2px solid currentColor;

259 padding-inline-start: vars.$xs;

260 }