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

19 @import "codemirror";

20 @import "components";

21 @import "header";

22 @import "footer";

23 @import "lists";

24 @import "pages";

25 @import "content";

27 @media print {

28 @import "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 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 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: $-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: $-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+$-xs);

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

94 animation-delay: -600ms;

95 }

96 > div:last-of-type {

97 left: $loadingSize+$-xs;

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

99 animation-delay: 0ms;

100 }

101 > span {

102 margin-inline-start: $-s;

103 font-style: italic;

104 color: #888;

105 vertical-align: top;

106 }

107 }

108

109 .skip-to-content-link {

110 position: fixed;

111 top: -52px;

112 left: 0;

113 background-color: #FFF;

114 z-index: 15;

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

116 display: block;

117 box-shadow: $bs-dark;

118 font-weight: bold;

119 &:focus {

120 top: $-xl;

121 outline-offset: -10px;

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

123 }

124 }

125

126 .entity-selector {

127 border: 1px solid #DDD;

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

129 border-radius: 3px;

130 overflow: hidden;

131 font-size: 0.8em;

132 input[type="text"] {

133 width: 100%;

134 display: block;

135 border-radius: 0;

136 border: 0;

137 border-bottom: 1px solid #DDD;

138 font-size: 16px;

139 padding: $-s $-m;

140 }

141 .entity-list {

142 overflow-y: scroll;

143 height: 400px;

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

145 margin-inline-end: 0;

146 margin-inline-start: 0;

147 }

148 .entity-list-item {

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

150 }

151 .entity-list-item p {

152 margin-bottom: 0;

153 }

154 .entity-list-item:focus {

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

156 outline-offset: -4px;

157 }

158 .entity-list-item.selected {

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

160 }

161 .loading {

162 height: 400px;

163 padding-top: $-l;

164 }

165 &.compact {

166 font-size: 10px;

167 .entity-item-snippet {

168 display: none;

169 }

170 h4 {

171 font-size: 14px;

172 }

173 }

174 }

175

176 .fullscreen {

177 border:0;

178 position:fixed;

179 top:0;

180 left:0;

181 right:0;

182 bottom:0;

183 width:100%;

184 height:100%;

185 z-index: 150;

186 }

187

188 @include between($s, $m) {

189 #home-default > .grid.third {

190 display: block;

191 columns: 2;

192 column-gap: $-l !important;

193 }

194 }

195

196 .list-sort-container {

197 display: inline-block;

198 form {

199 display: inline-block;

200 }

201 .list-sort {

202 display: inline-grid;

203 margin-inline-start: $-s;

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

205 font-size: 0.9rem;

206 border: 2px solid #DDD;

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

208 border-radius: 4px;

209 }

210 .list-sort-label {

211 font-weight: bold;

212 display: inline-block;

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

214 }

215 .list-sort-type {

216 text-align: start;

217 }

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

219 padding: $-xs $-s;

220 cursor: pointer;

221 }

222 .list-sort-dir {

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

224 color: #888;

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

226 .svg-icon {

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

228 }

229 &:hover .svg-icon {

230 transform: rotate(180deg);

231 }

232 }

233 }