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 // Jquery Sortable Styles

27 .dragged {

28 position: absolute;

29 opacity: 0.5;

30 z-index: 2000;

31 }

32 body.dragging, body.dragging * {

33 cursor: move !important;

34 }

36 // User Avatar Images

37 .avatar {

38 border-radius: 100%;

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

40 width: 30px;

41 height: 30px;

42 &.med {

43 width: 40px;

44 height: 40px;

45 }

46 &.large {

47 width: 80px;

48 height: 80px;

49 }

50 &.huge {

51 width: 120px;

52 height: 120px;

53 }

54 &.square {

55 border-radius: 3px;

56 }

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

58 @include whenDark {

59 filter: invert(1);

60 }

61 }

62 }

64 // Loading icon

65 $loadingSize: 10px;

66 .loading-container {

67 position: relative;

68 display: block;

69 margin: $-xl auto;

70 > div {

71 width: $loadingSize;

72 height: $loadingSize;

73 border-radius: $loadingSize;

74 display: inline-block;

75 vertical-align: top;

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

77 margin-top: $-xs;

78 animation-name: loadingBob;

79 animation-duration: 1.4s;

80 animation-iteration-count: infinite;

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

82 margin-inline-end: 4px;

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

84 animation-delay: -300ms;

85 }

86 > div:first-child {

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

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

89 animation-delay: -600ms;

90 }

91 > div:last-of-type {

92 left: $loadingSize+$-xs;

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

94 animation-delay: 0ms;

95 }

96 > span {

97 margin-inline-start: $-s;

98 font-style: italic;

99 color: #888;

100 vertical-align: top;

101 }

102 }

103

104 .skip-to-content-link {

105 position: fixed;

106 top: -52px;

107 left: 0;

108 background-color: #FFF;

109 z-index: 15;

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

111 display: block;

112 box-shadow: $bs-dark;

113 font-weight: bold;

114 &:focus {

115 top: $-xl;

116 outline-offset: -10px;

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

118 }

119 }

120

121 .entity-selector {

122 border: 1px solid #DDD;

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

124 border-radius: 3px;

125 overflow: hidden;

126 font-size: 0.8em;

127 input[type="text"] {

128 width: 100%;

129 display: block;

130 border-radius: 0;

131 border: 0;

132 border-bottom: 1px solid #DDD;

133 font-size: 16px;

134 padding: $-s $-m;

135 }

136 .entity-list {

137 overflow-y: scroll;

138 height: 400px;

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

140 margin-inline-end: 0;

141 margin-inline-start: 0;

142 }

143 .entity-list-item {

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

145 }

146 .entity-list-item p {

147 margin-bottom: 0;

148 }

149 .entity-list-item:focus {

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

151 outline-offset: -4px;

152 }

153 .entity-list-item.selected {

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

155 }

156 .loading {

157 height: 400px;

158 padding-top: $-l;

159 }

160 &.compact {

161 font-size: 10px;

162 .entity-item-snippet {

163 display: none;

164 }

165 h4 {

166 font-size: 14px;

167 }

168 }

169 }

170

171 .fullscreen {

172 border:0;

173 position:fixed;

174 top:0;

175 left:0;

176 right:0;

177 bottom:0;

178 width:100%;

179 height:100%;

180 z-index: 150;

181 }

182

183 .list-sort-container {

184 display: inline-block;

185 form {

186 display: inline-block;

187 }

188 .list-sort {

189 display: inline-grid;

190 margin-inline-start: $-s;

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

192 font-size: 0.9rem;

193 border: 2px solid #DDD;

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

195 border-radius: 4px;

196 }

197 .list-sort-label {

198 font-weight: bold;

199 display: inline-block;

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

201 }

202 .list-sort-type {

203 text-align: start;

204 }

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

206 padding: $-xs $-s;

207 cursor: pointer;

208 }

209 .list-sort-dir {

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

211 color: #888;

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

213 .svg-icon {

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

215 }

216 &:hover .svg-icon {

217 transform: rotate(180deg);

218 }

219 }

220 }