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 padding: $-xxs 0;

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

26 @include whenDark {

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

28 }

29 .links {

30 display: inline-block;

31 vertical-align: top;

32 }

33 .links a {

34 display: inline-block;

35 padding: $-m;

36 color: #FFF;

37 }

38 .dropdown-container {

39 padding-inline-start: $-m;

40 padding-inline-end: 0;

41 }

42 .avatar, .user-name {

43 display: inline-block;

44 }

45 .avatar {

46 width: 30px;

47 height: 30px;

48 }

49 .user-name {

50 vertical-align: top;

51 position: relative;

52 display: inline-block;

53 cursor: pointer;

54 > * {

55 vertical-align: top;

56 }

57 > span {

58 padding-inline-start: $-xs;

59 display: inline-block;

60 padding-top: $-xxs;

61 }

62 > svg {

63 padding-top: 4px;

64 font-size: 18px;

65 }

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

67 padding-inline-start: $-xs;

68 .name {

69 display: none;

70 }

71 }

72 }

73 }

75 .header *, .primary-background * {

76 outline-color: #FFF;

77 }

80 header .search-box {

81 display: inline-block;

82 margin-top: 10px;

83 input {

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

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

86 border-radius: 40px;

87 color: #EEE;

88 z-index: 2;

89 padding-inline-start: 40px;

90 &:focus {

91 outline: none;

92 border: 1px solid rgba(255, 255, 255, 0.6);

93 }

94 }

95 button {

96 z-index: 1;

97 left: 16px;

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

99 @include rtl {

100 left: auto;

101 right: 16px;

102 }

103 svg {

104 margin-block-end: 0;

105 }

106 }

107 ::-webkit-input-placeholder { /* Chrome/Opera/Safari */

108 color: #DDD;

109 }

110 ::-moz-placeholder { /* Firefox 19+ */

111 color: #DDD;

112 }

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

114 max-width: 200px;

115 }

116 }

117

118 .logo {

119 display: inline-block;

120 &:hover {

121 color: #FFF;

122 text-decoration: none;

123 }

124 }

125 .logo-text {

126 display: inline-block;

127 font-size: 1.8em;

128 color: #fff;

129 font-weight: 400;

130 @include padding(14px, $-l, 14px, 0);

131 vertical-align: top;

132 line-height: 1;

133 }

134 .logo-image {

135 @include margin($-xs, $-s, $-xs, 0);

136 vertical-align: top;

137 height: 43px;

138 }

139

140 .mobile-menu-toggle {

141 color: #FFF;

142 fill: #FFF;

143 font-size: 2em;

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

145 border-radius: 4px;

146 padding: 0 $-xs;

147 position: absolute;

148 right: $-m;

149 top: 13px;

150 line-height: 1;

151 cursor: pointer;

152 user-select: none;

153 svg {

154 margin: 0;

155 bottom: -2px;

156 }

157 @include rtl() {

158 left: $-m;

159 right: auto;

160 }

161 }

162

163

164

165 @include smaller-than($l) {

166 header .header-links {

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

168 display: none;

169 z-index: 10;

170 right: $-m;

171 border-radius: 4px;

172 overflow: hidden;

173 position: absolute;

174 box-shadow: $bs-hover;

175 margin-top: -$-xs;

176 &.show {

177 display: block;

178 }

179 }

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

181 text-align: start;

182 display: block;

183 padding: $-s $-m;

184 color: $text-dark;

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

186 svg {

187 margin-inline-end: $-s;

188 }

189 &:hover {

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

191 @include lightDark(color, #000, #fff);

192 text-decoration: none;

193 }

194 &:focus {

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

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

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

198 }

199 }

200 header .dropdown-container {

201 display: block;

202 padding-inline-start: 0;

203 }

204 header .links {

205 display: block;

206 }

207 header .dropdown-container ul {

208 display: block !important;

209 position: relative;

210 background-color: transparent;

211 border: 0;

212 padding: 0;

213 margin: 0;

214 box-shadow: none;

215 }

216 }

217

218 .tri-layout-mobile-tabs {

219 position: sticky;

220 top: 0;

221 z-index: 5;

222 background-color: #FFF;

223 border-bottom: 1px solid #DDD;

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

225 box-shadow: $bs-card;

226 }

227 .tri-layout-mobile-tab {

228 text-align: center;

229 border-bottom: 3px solid #BBB;

230 cursor: pointer;

231 margin: 0;

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

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

234 &:first-child {

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

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

237 }

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

239 border-bottom-color: currentColor !important;

240 }

241 }

242

243 .breadcrumbs {

244 display: flex;

245 flex-direction: row;

246 align-items: center;

247 justify-content: flex-start;

248 flex-wrap: wrap;

249 opacity: 0.7;

250 .icon-list-item {

251 width: auto;

252 padding-top: $-xs;

253 padding-bottom: $-xs;

254 }

255 .separator {

256 display: inline-block;

257 fill: #aaa;

258 font-size: 1.6em;

259 line-height: 0.8;

260 margin: -2px 0 0;

261 }

262 &:hover, &:focus-within {

263 opacity: 1;

264 }

265 @media (prefers-contrast: more) {

266 opacity: 1;

267 }

268 }

269

270 @include smaller-than($l) {

271 .breadcrumbs .icon-list-item {

272 padding: $-xs;

273 > span + span {

274 display: none;

275 }

276 > span:first-child {

277 margin-inline-end: 0;

278 }

279 }

280 }

281

282 .dropdown-search {

283 position: relative;

284 .dropdown-search-toggle {

285 padding: $-xs;

286 border: 1px solid transparent;

287 border-radius: 4px;

288 &:hover {

289 border-color: #DDD;

290 }

291 }

292 .svg-icon {

293 margin-inline-end: 0;

294 }

295 }

296

297 .dropdown-search-toggle.compact {

298 padding: $-xxs $-xs;

299 .avatar {

300 height: 22px;

301 width: 22px;

302 }

303 }

304

305 .faded {

306 a, button, span, span > div {

307 color: #666;

308 fill: #666;

309 }

310 .text-button {

311 opacity: 0.5;

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

313 &:hover {

314 opacity: 1;

315 text-decoration: none;

316 }

317 }

318 }

319

320 .faded span.faded-text {

321 display: inline-block;

322 padding: $-s;

323 }

324

325 .action-buttons .text-button {

326 display: inline-block;

327 padding: $-xs $-s;

328 &:last-child {

329 padding-inline-end: 0;

330 }

331 &:first-child {

332 padding-inline-start: 0;

333 }

334 }

335

336

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

338 padding-inline-end: 0;

339 padding-inline-start: $-s;

340 }

341 .action-buttons {

342 text-align: end;

343 &.text-left {

344 text-align: start;

345 .text-button {

346 padding-inline-end: $-m;

347 padding-inline-start: 0;

348 }

349 }

350 &.text-center {

351 text-align: center;

352 }

353 }

354

355 @include smaller-than($m) {

356 .action-buttons .text-button {

357 padding: $-xs $-xs;

358 }

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

360 padding-inline-start: $-xs;

361 }

362 }