BookStack Code Mirror - bookstack/blob - resources/sass/

1 @use "mixins";

2 @use "vars";

4 /**

5 * Includes the main navigation header and the faded toolbar.

6 */

8 header.grid {

9 grid-template-columns: minmax(max-content, 2fr) 1fr minmax(max-content, 2fr);

10 }

12 @include mixins.smaller-than(vars.$bp-l) {

13 header.grid {

14 grid-template-columns: 1fr;

15 grid-row-gap: 0;

16 }

17 }

19 header {

20 position: relative;

21 display: block;

22 z-index: 11;

23 top: 0;

24 color: rgb(250, 250, 250);

25 border-bottom: 1px solid #DDD;

26 box-shadow: vars.$bs-card;

27 @include mixins.lightDark(border-bottom-color, #DDD, #000);

28 .header-links {

29 display: flex;

30 align-items: center;

31 justify-content: end;

32 }

33 .links {

34 display: inline-block;

35 vertical-align: top;

36 }

37 .links a {

38 display: inline-block;

39 padding: 10px vars.$m;

40 color: #FFF;

41 border-radius: 3px;

42 }

43 .links a:hover {

44 text-decoration: none;

45 background-color: rgba(255, 255, 255, .15);

46 }

47 .dropdown-container {

48 padding-inline-start: vars.$m;

49 padding-inline-end: 0;

50 }

51 .avatar, .user-name {

52 display: inline-block;

53 }

54 .avatar {

55 width: 30px;

56 height: 30px;

57 }

58 .user-name {

59 vertical-align: top;

60 position: relative;

61 display: inline-flex;

62 align-items: center;

63 cursor: pointer;

64 padding: vars.$s;

65 margin: 0 (-(vars.$s));

66 border-radius: 3px;

67 gap: vars.$xs;

68 > span {

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

70 display: inline-block;

71 line-height: 1;

72 }

73 > svg {

74 font-size: 18px;

75 margin-top: -2px;

76 margin-inline-end: 0;

77 }

78 &:hover {

79 background-color: rgba(255, 255, 255, 0.15);

80 }

81 @include mixins.between(vars.$bp-l, vars.$bp-xl) {

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

83 .name {

84 display: none;

85 }

86 }

87 }

88 }

90 .header *, .primary-background * {

91 outline-color: #FFF;

92 }

95 header .search-box {

96 display: inline-block;

97 input {

98 background-color: rgba(0, 0, 0, 0.2);

99 border: 1px solid rgba(255, 255, 255, 0.2);

100 border-radius: 40px;

101 color: #EEE;

102 z-index: 2;

103 height: auto;

104 padding: vars.$xs*1.5;

105 padding-inline-start: 40px;

106 &:focus {

107 outline: none;

108 border: 1px solid rgba(255, 255, 255, 0.4);

109 }

110 }

111 input::placeholder {

112 color: #FFF;

113 opacity: 0.6;

114 }

115 @include mixins.between(vars.$bp-l, vars.$bp-xl) {

116 max-width: 200px;

117 }

118 &:focus-within #header-search-box-button {

119 opacity: 1;

120 }

121 }

122 #header-search-box-button {

123 z-index: 1;

124 inset-inline-start: 16px;

125 top: 10px;

126 color: #FFF;

127 opacity: 0.6;

128 @include mixins.lightDark(color, rgba(255, 255, 255, 0.8), #AAA);

129 svg {

130 margin-inline-end: 0;

131 }

132 }

133

134 .global-search-suggestions {

135 display: none;

136 position: absolute;

137 top: -(vars.$s);

138 left: 0;

139 right: 0;

140 z-index: -1;

141 margin-left: -(vars.$xxl);

142 margin-right: -(vars.$xxl);

143 padding-top: 56px;

144 border-radius: 3px;

145 box-shadow: vars.$bs-hover;

146 transform-origin: top center;

147 opacity: .5;

148 transform: scale(0.9);

149 .entity-item-snippet p {

150 display: none;

151 }

152 .entity-item-snippet {

153 font-size: .8rem;

154 }

155 .entity-list-item-name {

156 font-size: .9rem;

157 display: -webkit-box;

158 -webkit-box-orient: vertical;

159 -webkit-line-clamp: 2;

160 overflow: hidden;

161 }

162 .global-search-loading {

163 position: absolute;

164 width: 100%;

165 }

166 }

167 header .search-box.search-active:focus-within {

168 .global-search-suggestions {

169 display: block;

170 }

171 input {

172 @include mixins.lightDark(background-color, #EEE, #333);

173 @include mixins.lightDark(border-color, #DDD, #111);

174 }

175 #header-search-box-button, input {

176 @include mixins.lightDark(color, #444, #AAA);

177 }

178 }

179

180 .logo {

181 display: inline-flex;

182 padding: (vars.$s - 6px) vars.$s;

183 margin: 6px (-(vars.$s));

184 gap: vars.$s;

185 align-items: center;

186 border-radius: 4px;

187 &:hover {

188 color: #FFF;

189 text-decoration: none;

190 background-color: rgba(255, 255, 255, .15);

191 }

192 }

193

194 .logo-text {

195 font-size: 1.8em;

196 color: #fff;

197 font-weight: 400;

198 line-height: 1;

199 }

200 .logo-image {

201 height: 43px;

202 }

203

204 .mobile-menu-toggle {

205 color: #FFF;

206 fill: #FFF;

207 font-size: 2em;

208 border: 2px solid rgba(255, 255, 255, 0.8);

209 border-radius: 4px;

210 padding: 0 vars.$xs;

211 line-height: 1;

212 cursor: pointer;

213 user-select: none;

214 svg {

215 margin: 0;

216 bottom: -2px;

217 }

218 }

219

220

221 @include mixins.smaller-than(vars.$bp-l) {

222 header .header-links {

223 @include mixins.lightDark(background-color, #fff, #333);

224 display: none;

225 z-index: 10;

226 inset-inline-end: vars.$m;

227 border-radius: 4px;

228 overflow: hidden;

229 position: absolute;

230 box-shadow: vars.$bs-hover;

231 margin-top: vars.$m;

232 padding: vars.$xs 0;

233 &.show {

234 display: block;

235 }

236 }

237 header .links a, header .dropdown-container ul li a, header .dropdown-container ul li button {

238 text-align: start;

239 display: grid;

240 align-items: center;

241 padding: 8px vars.$m;

242 gap: vars.$m;

243 color: vars.$text-dark;

244 grid-template-columns: 16px auto;

245 line-height: 1.4;

246 @include mixins.lightDark(color, vars.$text-dark, #eee);

247 svg {

248 margin-inline-end: vars.$s;

249 width: 16px;

250 }

251 &:hover {

252 background-color: var(--color-primary-light);

253 color: var(--color-primary);

254 text-decoration: none;

255 }

256 &:focus {

257 @include mixins.lightDark(background-color, #eee, #333);

258 outline-color: var(--color-primary);

259 color: var(--color-primary);

260 }

261 }

262 header .dropdown-container {

263 display: block;

264 padding-inline-start: 0;

265 }

266 header .links {

267 display: block;

268 }

269 header .dropdown-container ul {

270 display: block !important;

271 position: relative;

272 background-color: transparent;

273 border: 0;

274 padding: 0;

275 margin: 0;

276 box-shadow: none;

277 }

278 }

279

280 .tri-layout-mobile-tabs {

281 position: sticky;

282 top: 0;

283 z-index: 5;

284 background-color: #FFF;

285 border-bottom: 1px solid #DDD;

286 @include mixins.lightDark(border-bottom-color, #DDD, #333);

287 box-shadow: vars.$bs-card;

288 }

289 .tri-layout-mobile-tab {

290 text-align: center;

291 border-bottom: 3px solid #BBB;

292 cursor: pointer;

293 margin: 0;

294 @include mixins.lightDark(background-color, #FFF, #222);

295 @include mixins.lightDark(border-bottom-color, #BBB, #333);

296 &:first-child {

297 border-inline-end: 1px solid #DDD;

298 @include mixins.lightDark(border-inline-end-color, #DDD, #000);

299 }

300 &[aria-selected="true"] {

301 border-bottom-color: currentColor !important;

302 }

303 }

304

305 .breadcrumbs {

306 display: flex;

307 flex-direction: row;

308 align-items: center;

309 justify-content: flex-start;

310 flex-wrap: wrap;

311 opacity: 0.7;

312 .icon-list-item {

313 width: auto;

314 padding-top: vars.$xs;

315 padding-bottom: vars.$xs;

316 }

317 .separator {

318 display: inline-block;

319 fill: #aaa;

320 font-size: 1.6em;

321 line-height: 0.8;

322 margin: -2px 0 0;

323 }

324 &:hover, &:focus-within {

325 opacity: 1;

326 }

327 @media (prefers-contrast: more) {

328 opacity: 1;

329 }

330 }

331

332 @include mixins.smaller-than(vars.$bp-l) {

333 .breadcrumbs .icon-list-item {

334 padding: vars.$xs;

335 > span + span {

336 display: none;

337 }

338 > span:first-child {

339 margin-inline-end: 0;

340 }

341 }

342 }

343

344 .faded {

345 a, button, span, span > div {

346 color: #666;

347 fill: #666;

348 }

349 .text-button {

350 opacity: 0.5;

351 transition: all ease-in-out 120ms;

352 &:hover {

353 opacity: 1;

354 text-decoration: none;

355 }

356 }

357 }

358

359 .faded span.faded-text {

360 display: inline-block;

361 padding: vars.$s;

362 }