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 color: #FFF;

69 > span {

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

71 display: inline-block;

72 line-height: 1;

73 }

74 > svg {

75 font-size: 18px;

76 margin-top: -2px;

77 margin-inline-end: 0;

78 }

79 &:hover {

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

81 }

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

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

84 .name {

85 display: none;

86 }

87 }

88 }

89 }

91 .header *, .primary-background * {

92 outline-color: #FFF;

93 }

96 header .search-box {

97 display: inline-block;

98 input {

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

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

101 border-radius: 40px;

102 color: #EEE;

103 z-index: 2;

104 height: auto;

105 padding: vars.$xs*1.5;

106 padding-inline-start: 40px;

107 &:focus {

108 outline: none;

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

110 }

111 }

112 input::placeholder {

113 color: #FFF;

114 opacity: 0.6;

115 }

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

117 max-width: 200px;

118 }

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

120 opacity: 1;

121 }

122 }

123 #header-search-box-button {

124 z-index: 1;

125 inset-inline-start: 16px;

126 top: 10px;

127 color: #FFF;

128 opacity: 0.6;

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

130 svg {

131 margin-inline-end: 0;

132 }

133 }

134

135 .global-search-suggestions {

136 display: none;

137 position: absolute;

138 top: -(vars.$s);

139 left: 0;

140 right: 0;

141 z-index: -1;

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

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

144 padding-top: 56px;

145 border-radius: 3px;

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

147 transform-origin: top center;

148 opacity: .5;

149 transform: scale(0.9);

150 .entity-item-snippet p {

151 display: none;

152 }

153 .entity-item-snippet {

154 font-size: .8rem;

155 }

156 .entity-list-item-name {

157 font-size: .9rem;

158 display: -webkit-box;

159 -webkit-box-orient: vertical;

160 -webkit-line-clamp: 2;

161 overflow: hidden;

162 }

163 .global-search-loading {

164 position: absolute;

165 width: 100%;

166 }

167 }

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

169 .global-search-suggestions {

170 display: block;

171 }

172 input {

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

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

175 }

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

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

178 }

179 }

180

181 .logo {

182 display: inline-flex;

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

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

185 gap: vars.$s;

186 align-items: center;

187 border-radius: 4px;

188 &:hover {

189 color: #FFF;

190 text-decoration: none;

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

192 }

193 }

194

195 .logo-text {

196 font-size: 1.8em;

197 color: #fff;

198 font-weight: 400;

199 line-height: 1;

200 }

201 .logo-image {

202 height: 43px;

203 }

204

205 .mobile-menu-toggle {

206 color: #FFF;

207 fill: #FFF;

208 font-size: 2em;

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

210 border-radius: 4px;

211 padding: 0 vars.$xs;

212 line-height: 1;

213 cursor: pointer;

214 user-select: none;

215 svg {

216 margin: 0;

217 bottom: -2px;

218 }

219 }

220

221

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

223 header .header-links {

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

225 display: none;

226 z-index: 10;

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

228 border-radius: 4px;

229 overflow: hidden;

230 position: absolute;

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

232 margin-top: vars.$m;

233 padding: vars.$xs 0;

234 &.show {

235 display: block;

236 }

237 }

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

239 text-align: start;

240 display: grid;

241 align-items: center;

242 padding: 8px vars.$m;

243 gap: vars.$m;

244 color: vars.$text-dark;

245 grid-template-columns: 16px auto;

246 line-height: 1.4;

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

248 svg {

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

250 width: 16px;

251 }

252 &:hover {

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

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

255 text-decoration: none;

256 }

257 &:focus {

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

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

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

261 }

262 }

263 header .dropdown-container {

264 display: block;

265 padding-inline-start: 0;

266 }

267 header .links {

268 display: block;

269 }

270 header .dropdown-container ul {

271 display: block !important;

272 position: relative;

273 background-color: transparent;

274 border: 0;

275 padding: 0;

276 margin: 0;

277 box-shadow: none;

278 }

279 }

280

281 .tri-layout-mobile-tabs {

282 position: sticky;

283 top: 0;

284 z-index: 5;

285 background-color: #FFF;

286 border-bottom: 1px solid #DDD;

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

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

289 }

290 .tri-layout-mobile-tab {

291 text-align: center;

292 border-bottom: 3px solid #BBB;

293 cursor: pointer;

294 margin: 0;

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

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

297 &:first-child {

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

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

300 }

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

302 border-bottom-color: currentColor !important;

303 }

304 }

305

306 .breadcrumbs {

307 display: flex;

308 flex-direction: row;

309 align-items: center;

310 justify-content: flex-start;

311 flex-wrap: wrap;

312 opacity: 0.7;

313 .icon-list-item {

314 width: auto;

315 padding-top: vars.$xs;

316 padding-bottom: vars.$xs;

317 }

318 .separator {

319 display: inline-block;

320 fill: #aaa;

321 font-size: 1.6em;

322 line-height: 0.8;

323 margin: -2px 0 0;

324 }

325 &:hover, &:focus-within {

326 opacity: 1;

327 }

328 @media (prefers-contrast: more) {

329 opacity: 1;

330 }

331 }

332

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

334 .breadcrumbs .icon-list-item {

335 padding: vars.$xs;

336 > span + span {

337 display: none;

338 }

339 > span:first-child {

340 margin-inline-end: 0;

341 }

342 }

343 }

344

345 .faded {

346 a, button, span, span > div {

347 color: #666;

348 fill: #666;

349 }

350 .text-button {

351 opacity: 0.5;

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

353 &:hover {

354 opacity: 1;

355 text-decoration: none;

356 }

357 }

358 }

359

360 .faded span.faded-text {

361 display: inline-block;

362 padding: vars.$s;

363 }