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

24 @import "content";

26 @media print {

27 @import "print";

28 }

30 // Jquery Sortable Styles

31 .dragged {

32 position: absolute;

33 opacity: 0.5;

34 z-index: 2000;

35 }

36 body.dragging, body.dragging * {

37 cursor: move !important;

38 }

40 // User Avatar Images

41 .avatar {

42 border-radius: 100%;

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

44 width: 30px;

45 height: 30px;

46 &.med {

47 width: 40px;

48 height: 40px;

49 }

50 &.large {

51 width: 80px;

52 height: 80px;

53 }

54 &.huge {

55 width: 120px;

56 height: 120px;

57 }

58 &.square {

59 border-radius: 3px;

60 }

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

62 @include whenDark {

63 filter: invert(1);

64 }

65 }

66 }

68 // Loading icon

69 $loadingSize: 10px;

70 .loading-container {

71 position: relative;

72 display: block;

73 margin: $-xl auto;

74 > div {

75 width: $loadingSize;

76 height: $loadingSize;

77 border-radius: $loadingSize;

78 display: inline-block;

79 vertical-align: top;

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

81 margin-top: $-xs;

82 animation-name: loadingBob;

83 animation-duration: 1.4s;

84 animation-iteration-count: infinite;

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

86 margin-inline-end: 4px;

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

88 animation-delay: -300ms;

89 }

90 > div:first-child {

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

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

93 animation-delay: -600ms;

94 }

95 > div:last-of-type {

96 left: $loadingSize+$-xs;

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

98 animation-delay: 0ms;

99 }

100 > span {

101 margin-inline-start: $-s;

102 font-style: italic;

103 color: #888;

104 vertical-align: top;

105 }

106 }

107

108 .skip-to-content-link {

109 position: fixed;

110 top: -52px;

111 left: 0;

112 background-color: #FFF;

113 z-index: 15;

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

115 display: block;

116 box-shadow: $bs-dark;

117 font-weight: bold;

118 &:focus {

119 top: $-xl;

120 outline-offset: -10px;

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

122 }

123 }

124

125 .entity-selector {

126 border: 1px solid #DDD;

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

128 border-radius: 3px;

129 overflow: hidden;

130 font-size: 0.8em;

131 input[type="text"] {

132 width: 100%;

133 display: block;

134 border-radius: 0;

135 border: 0;

136 border-bottom: 1px solid #DDD;

137 font-size: 16px;

138 padding: $-s $-m;

139 }

140 .entity-list {

141 overflow-y: scroll;

142 height: 400px;

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

144 margin-inline-end: 0;

145 margin-inline-start: 0;

146 }

147 .entity-list-item {

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

149 }

150 .entity-list-item p {

151 margin-bottom: 0;

152 }

153 .entity-list-item:focus {

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

155 outline-offset: -4px;

156 }

157 .entity-list-item.selected {

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

159 }

160 .loading {

161 height: 400px;

162 padding-top: $-l;

163 }

164 &.compact {

165 font-size: 10px;

166 .entity-item-snippet {

167 display: none;

168 }

169 h4 {

170 font-size: 14px;

171 }

172 }

173 }

174

175 .fullscreen {

176 border:0;

177 position:fixed;

178 top:0;

179 left:0;

180 right:0;

181 bottom:0;

182 width:100%;

183 height:100%;

184 z-index: 150;

185 }

186

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

188 #home-default > .grid.third {

189 display: block;

190 columns: 2;

191 column-gap: $-l !important;

192 }

193 }

194

195 .list-sort-container {

196 display: inline-block;

197 form {

198 display: inline-block;

199 }

200 .list-sort {

201 display: inline-grid;

202 margin-inline-start: $-s;

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

204 font-size: 0.9rem;

205 border: 2px solid #DDD;

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

207 border-radius: 4px;

208 }

209 .list-sort-label {

210 font-weight: bold;

211 display: inline-block;

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

213 }

214 .list-sort-type {

215 text-align: start;

216 }

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

218 padding: $-xs $-s;

219 cursor: pointer;

220 }

221 .list-sort-dir {

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

223 color: #888;

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

225 .svg-icon {

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

227 }

228 &:hover .svg-icon {

229 transform: rotate(180deg);

230 }

231 }

232 }