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 button {

112 z-index: 1;

113 left: 16px;

114 top: 10px;

115 color: #FFF;

116 opacity: 0.6;

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

118 @include rtl {

119 left: auto;

120 right: 16px;

121 }

122 svg {

123 margin-block-end: 0;

124 }

125 }

126 input::placeholder {

127 color: #FFF;

128 opacity: 0.6;

129 }

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

131 max-width: 200px;

132 }

133 &:focus-within button {

134 opacity: 1;

135 }

136 }

137

138 .logo {

139 display: inline-flex;

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

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

142 gap: $-s;

143 align-items: center;

144 border-radius: 4px;

145 &:hover {

146 color: #FFF;

147 text-decoration: none;

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

149 }

150 }

151

152 .logo-text {

153 font-size: 1.8em;

154 color: #fff;

155 font-weight: 400;

156 line-height: 1;

157 }

158 .logo-image {

159 height: 43px;

160 }

161

162 .mobile-menu-toggle {

163 color: #FFF;

164 fill: #FFF;

165 font-size: 2em;

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

167 border-radius: 4px;

168 padding: 0 $-xs;

169 position: absolute;

170 right: $-m;

171 top: 13px;

172 line-height: 1;

173 cursor: pointer;

174 user-select: none;

175 svg {

176 margin: 0;

177 bottom: -2px;

178 }

179 @include rtl() {

180 left: $-m;

181 right: auto;

182 }

183 }

184

185

186

187 @include smaller-than($l) {

188 header .header-links {

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

190 display: none;

191 z-index: 10;

192 right: $-m;

193 border-radius: 4px;

194 overflow: hidden;

195 position: absolute;

196 box-shadow: $bs-hover;

197 margin-top: $-m;

198 padding: $-xs 0;

199 &.show {

200 display: block;

201 }

202 }

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

204 text-align: start;

205 display: grid;

206 align-items: center;

207 padding: 8px $-m;

208 gap: $-m;

209 color: $text-dark;

210 grid-template-columns: 16px auto;

211 line-height: 1.4;

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

213 svg {

214 margin-inline-end: $-s;

215 width: 16px;

216 }

217 &:hover {

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

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

220 text-decoration: none;

221 }

222 &:focus {

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

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

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

226 }

227 }

228 header .dropdown-container {

229 display: block;

230 padding-inline-start: 0;

231 }

232 header .links {

233 display: block;

234 }

235 header .dropdown-container ul {

236 display: block !important;

237 position: relative;

238 background-color: transparent;

239 border: 0;

240 padding: 0;

241 margin: 0;

242 box-shadow: none;

243 }

244 }

245

246 .tri-layout-mobile-tabs {

247 position: sticky;

248 top: 0;

249 z-index: 5;

250 background-color: #FFF;

251 border-bottom: 1px solid #DDD;

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

253 box-shadow: $bs-card;

254 }

255 .tri-layout-mobile-tab {

256 text-align: center;

257 border-bottom: 3px solid #BBB;

258 cursor: pointer;

259 margin: 0;

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

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

262 &:first-child {

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

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

265 }

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

267 border-bottom-color: currentColor !important;

268 }

269 }

270

271 .breadcrumbs {

272 display: flex;

273 flex-direction: row;

274 align-items: center;

275 justify-content: flex-start;

276 flex-wrap: wrap;

277 opacity: 0.7;

278 .icon-list-item {

279 width: auto;

280 padding-top: $-xs;

281 padding-bottom: $-xs;

282 }

283 .separator {

284 display: inline-block;

285 fill: #aaa;

286 font-size: 1.6em;

287 line-height: 0.8;

288 margin: -2px 0 0;

289 }

290 &:hover, &:focus-within {

291 opacity: 1;

292 }

293 @media (prefers-contrast: more) {

294 opacity: 1;

295 }

296 }

297

298 @include smaller-than($l) {

299 .breadcrumbs .icon-list-item {

300 padding: $-xs;

301 > span + span {

302 display: none;

303 }

304 > span:first-child {

305 margin-inline-end: 0;

306 }

307 }

308 }

309

310 .faded {

311 a, button, span, span > div {

312 color: #666;

313 fill: #666;

314 }

315 .text-button {

316 opacity: 0.5;

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

318 &:hover {

319 opacity: 1;

320 text-decoration: none;

321 }

322 }

323 }

324

325 .faded span.faded-text {

326 display: inline-block;

327 padding: $-s;

328 }

329

330 .action-buttons .text-button {

331 display: inline-block;

332 padding: $-xs $-s;

333 &:last-child {

334 padding-inline-end: 0;

335 }

336 &:first-child {

337 padding-inline-start: 0;

338 }

339 }

340

341

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

343 padding-inline-end: 0;

344 padding-inline-start: $-s;

345 }

346 .action-buttons {

347 text-align: end;

348 &.text-left {

349 text-align: start;

350 .text-button {

351 padding-inline-end: $-m;

352 padding-inline-start: 0;

353 }

354 }

355 &.text-center {

356 text-align: center;

357 }

358 }

359

360 @include smaller-than($m) {

361 .action-buttons .text-button {

362 padding: $-xs $-xs;

363 }

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

365 padding-inline-start: $-xs;

366 }

367 }