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 .header-links {

26 display: flex;

27 align-items: center;

28 justify-content: end;

29 }

30 .links {

31 display: inline-block;

32 vertical-align: top;

33 }

34 .links a {

35 display: inline-block;

36 padding: 10px $-m;

37 color: #FFF;

38 border-radius: 3px;

39 }

40 .links a:hover {

41 text-decoration: none;

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

43 }

44 .dropdown-container {

45 padding-inline-start: $-m;

46 padding-inline-end: 0;

47 }

48 .avatar, .user-name {

49 display: inline-block;

50 }

51 .avatar {

52 width: 30px;

53 height: 30px;

54 }

55 .user-name {

56 vertical-align: top;

57 position: relative;

58 display: inline-flex;

59 align-items: center;

60 cursor: pointer;

61 padding: $-s;

62 margin: 0 (-$-s);

63 border-radius: 3px;

64 gap: $-xs;

65 > span {

66 padding-inline-start: $-xs;

67 display: inline-block;

68 line-height: 1;

69 }

70 > svg {

71 font-size: 18px;

72 margin-top: -2px;

73 margin-inline-end: 0;

74 }

75 &:hover {

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

77 }

78 @include between($l, $xl) {

79 padding-inline-start: $-xs;

80 .name {

81 display: none;

82 }

83 }

84 }

85 }

87 .header *, .primary-background * {

88 outline-color: #FFF;

89 }

92 header .search-box {

93 display: inline-block;

94 input {

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

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

97 border-radius: 40px;

98 color: #EEE;

99 z-index: 2;

100 height: auto;

101 padding: $-xs*1.5;

102 padding-inline-start: 40px;

103 &:focus {

104 outline: none;

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

106 }

107 }

108 input::placeholder {

109 color: #FFF;

110 opacity: 0.6;

111 }

112 @include between($l, $xl) {

113 max-width: 200px;

114 }

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

116 opacity: 1;

117 }

118 }

119 #header-search-box-button {

120 z-index: 1;

121 inset-inline-start: 16px;

122 top: 10px;

123 color: #FFF;

124 opacity: 0.6;

125 @include lightDark(color, rgba(255, 255, 255, 0.8), #AAA);

126 svg {

127 margin-inline-end: 0;

128 }

129 }

130

131 .global-search-suggestions {

132 display: none;

133 position: absolute;

134 top: -$-s;

135 left: 0;

136 right: 0;

137 z-index: -1;

138 margin-left: -$-xxl;

139 margin-right: -$-xxl;

140 padding-top: 56px;

141 border-radius: 3px;

142 box-shadow: $bs-hover;

143 transform-origin: top center;

144 opacity: .5;

145 transform: scale(0.9);

146 .entity-item-snippet p {

147 display: none;

148 }

149 .entity-item-snippet {

150 font-size: .8rem;

151 }

152 .entity-list-item-name {

153 font-size: .9rem;

154 display: -webkit-box;

155 -webkit-box-orient: vertical;

156 -webkit-line-clamp: 2;

157 overflow: hidden;

158 }

159 .global-search-loading {

160 position: absolute;

161 width: 100%;

162 }

163 }

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

165 .global-search-suggestions {

166 display: block;

167 }

168 input {

169 @include lightDark(background-color, #EEE, #333);

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

171 }

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

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

174 }

175 }

176

177 .logo {

178 display: inline-flex;

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

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

181 gap: $-s;

182 align-items: center;

183 border-radius: 4px;

184 &:hover {

185 color: #FFF;

186 text-decoration: none;

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

188 }

189 }

190

191 .logo-text {

192 font-size: 1.8em;

193 color: #fff;

194 font-weight: 400;

195 line-height: 1;

196 }

197 .logo-image {

198 height: 43px;

199 }

200

201 .mobile-menu-toggle {

202 color: #FFF;

203 fill: #FFF;

204 font-size: 2em;

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

206 border-radius: 4px;

207 padding: 0 $-xs;

208 position: absolute;

209 right: $-m;

210 top: 13px;

211 line-height: 1;

212 cursor: pointer;

213 user-select: none;

214 svg {

215 margin: 0;

216 bottom: -2px;

217 }

218 @include rtl() {

219 left: $-m;

220 right: auto;

221 }

222 }

223

224

225

226 @include smaller-than($l) {

227 header .header-links {

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

229 display: none;

230 z-index: 10;

231 right: $-m;

232 border-radius: 4px;

233 overflow: hidden;

234 position: absolute;

235 box-shadow: $bs-hover;

236 margin-top: $-m;

237 padding: $-xs 0;

238 &.show {

239 display: block;

240 }

241 }

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

243 text-align: start;

244 display: grid;

245 align-items: center;

246 padding: 8px $-m;

247 gap: $-m;

248 color: $text-dark;

249 grid-template-columns: 16px auto;

250 line-height: 1.4;

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

252 svg {

253 margin-inline-end: $-s;

254 width: 16px;

255 }

256 &:hover {

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

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

259 text-decoration: none;

260 }

261 &:focus {

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

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

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

265 }

266 }

267 header .dropdown-container {

268 display: block;

269 padding-inline-start: 0;

270 }

271 header .links {

272 display: block;

273 }

274 header .dropdown-container ul {

275 display: block !important;

276 position: relative;

277 background-color: transparent;

278 border: 0;

279 padding: 0;

280 margin: 0;

281 box-shadow: none;

282 }

283 }

284

285 .tri-layout-mobile-tabs {

286 position: sticky;

287 top: 0;

288 z-index: 5;

289 background-color: #FFF;

290 border-bottom: 1px solid #DDD;

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

292 box-shadow: $bs-card;

293 }

294 .tri-layout-mobile-tab {

295 text-align: center;

296 border-bottom: 3px solid #BBB;

297 cursor: pointer;

298 margin: 0;

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

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

301 &:first-child {

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

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

304 }

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

306 border-bottom-color: currentColor !important;

307 }

308 }

309

310 .breadcrumbs {

311 display: flex;

312 flex-direction: row;

313 align-items: center;

314 justify-content: flex-start;

315 flex-wrap: wrap;

316 opacity: 0.7;

317 .icon-list-item {

318 width: auto;

319 padding-top: $-xs;

320 padding-bottom: $-xs;

321 }

322 .separator {

323 display: inline-block;

324 fill: #aaa;

325 font-size: 1.6em;

326 line-height: 0.8;

327 margin: -2px 0 0;

328 }

329 &:hover, &:focus-within {

330 opacity: 1;

331 }

332 @media (prefers-contrast: more) {

333 opacity: 1;

334 }

335 }

336

337 @include smaller-than($l) {

338 .breadcrumbs .icon-list-item {

339 padding: $-xs;

340 > span + span {

341 display: none;

342 }

343 > span:first-child {

344 margin-inline-end: 0;

345 }

346 }

347 }

348

349 .faded {

350 a, button, span, span > div {

351 color: #666;

352 fill: #666;

353 }

354 .text-button {

355 opacity: 0.5;

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

357 &:hover {

358 opacity: 1;

359 text-decoration: none;

360 }

361 }

362 }

363

364 .faded span.faded-text {

365 display: inline-block;

366 padding: $-s;

367 }