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

1 /**

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

3 */

5 header .grid {

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

7 }

9 @include smaller-than($l) {

10 header .grid {

11 grid-template-columns: 1fr;

12 grid-row-gap: 0;

13 }

14 }

16 header {

17 position: relative;

18 display: block;

19 z-index: 11;

20 top: 0;

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

22 border-bottom: 1px solid #DDD;

23 box-shadow: $bs-card;

24 @include lightDark(border-bottom-color, #DDD, #000);

25 @include whenDark {

26 filter: saturate(0.8) brightness(0.8);

27 }

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 $-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: $-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: $-s;

65 margin: 0 (-$-s);

66 border-radius: 3px;

67 gap: $-xs;

68 > span {

69 padding-inline-start: $-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 between($l, $xl) {

82 padding-inline-start: $-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: $-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 between($l, $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 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: -$-s;

138 left: 0;

139 right: 0;

140 z-index: -1;

141 margin-left: -$-xxl;

142 margin-right: -$-xxl;

143 padding-top: 56px;

144 border-radius: 3px;

145 box-shadow: $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 lightDark(background-color, #EEE, #333);

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

174 }

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

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

177 }

178 }

179

180 .logo {

181 display: inline-flex;

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

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

184 gap: $-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 $-xs;

211 position: absolute;

212 right: $-m;

213 top: 13px;

214 line-height: 1;

215 cursor: pointer;

216 user-select: none;

217 svg {

218 margin: 0;

219 bottom: -2px;

220 }

221 @include rtl() {

222 left: $-m;

223 right: auto;

224 }

225 }

226

227

228

229 @include smaller-than($l) {

230 header .header-links {

231 @include lightDark(background-color, #fff, #333);

232 display: none;

233 z-index: 10;

234 right: $-m;

235 border-radius: 4px;

236 overflow: hidden;

237 position: absolute;

238 box-shadow: $bs-hover;

239 margin-top: $-m;

240 padding: $-xs 0;

241 &.show {

242 display: block;

243 }

244 }

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

246 text-align: start;

247 display: grid;

248 align-items: center;

249 padding: 8px $-m;

250 gap: $-m;

251 color: $text-dark;

252 grid-template-columns: 16px auto;

253 line-height: 1.4;

254 @include lightDark(color, $text-dark, #eee);

255 svg {

256 margin-inline-end: $-s;

257 width: 16px;

258 }

259 &:hover {

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

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

262 text-decoration: none;

263 }

264 &:focus {

265 @include lightDark(background-color, #eee, #333);

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

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

268 }

269 }

270 header .dropdown-container {

271 display: block;

272 padding-inline-start: 0;

273 }

274 header .links {

275 display: block;

276 }

277 header .dropdown-container ul {

278 display: block !important;

279 position: relative;

280 background-color: transparent;

281 border: 0;

282 padding: 0;

283 margin: 0;

284 box-shadow: none;

285 }

286 }

287

288 .tri-layout-mobile-tabs {

289 position: sticky;

290 top: 0;

291 z-index: 5;

292 background-color: #FFF;

293 border-bottom: 1px solid #DDD;

294 @include lightDark(border-bottom-color, #DDD, #333);

295 box-shadow: $bs-card;

296 }

297 .tri-layout-mobile-tab {

298 text-align: center;

299 border-bottom: 3px solid #BBB;

300 cursor: pointer;

301 margin: 0;

302 @include lightDark(background-color, #FFF, #222);

303 @include lightDark(border-bottom-color, #BBB, #333);

304 &:first-child {

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

306 @include lightDark(border-inline-end-color, #DDD, #000);

307 }

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

309 border-bottom-color: currentColor !important;

310 }

311 }

312

313 .breadcrumbs {

314 display: flex;

315 flex-direction: row;

316 align-items: center;

317 justify-content: flex-start;

318 flex-wrap: wrap;

319 opacity: 0.7;

320 .icon-list-item {

321 width: auto;

322 padding-top: $-xs;

323 padding-bottom: $-xs;

324 }

325 .separator {

326 display: inline-block;

327 fill: #aaa;

328 font-size: 1.6em;

329 line-height: 0.8;

330 margin: -2px 0 0;

331 }

332 &:hover, &:focus-within {

333 opacity: 1;

334 }

335 @media (prefers-contrast: more) {

336 opacity: 1;

337 }

338 }

339

340 @include smaller-than($l) {

341 .breadcrumbs .icon-list-item {

342 padding: $-xs;

343 > span + span {

344 display: none;

345 }

346 > span:first-child {

347 margin-inline-end: 0;

348 }

349 }

350 }

351

352 .faded {

353 a, button, span, span > div {

354 color: #666;

355 fill: #666;

356 }

357 .text-button {

358 opacity: 0.5;

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

360 &:hover {

361 opacity: 1;

362 text-decoration: none;

363 }

364 }

365 }

366

367 .faded span.faded-text {

368 display: inline-block;

369 padding: $-s;

370 }

371

372 .action-buttons .text-button {

373 display: inline-block;

374 padding: $-xs $-s;

375 &:last-child {

376 padding-inline-end: 0;

377 }

378 &:first-child {

379 padding-inline-start: 0;

380 }

381 }

382

383

384 .action-buttons .dropdown-container:last-child a {

385 padding-inline-end: 0;

386 padding-inline-start: $-s;

387 }

388 .action-buttons {

389 text-align: end;

390 &.text-left {

391 text-align: start;

392 .text-button {

393 padding-inline-end: $-m;

394 padding-inline-start: 0;

395 }

396 }

397 &.text-center {

398 text-align: center;

399 }

400 }

401

402 @include smaller-than($m) {

403 .action-buttons .text-button {

404 padding: $-xs $-xs;

405 }

406 .action-buttons .dropdown-container:last-child a {

407 padding-inline-start: $-xs;

408 }

409 }