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: auto min-content auto;

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 {

81 display: inline-block;

82 }

83 header .search-box {

84 display: inline-block;

85 margin-top: 10px;

86 input {

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

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

89 border-radius: 40px;

90 color: #EEE;

91 z-index: 2;

92 padding-inline-start: 40px;

93 &:focus {

94 outline: none;

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

96 }

97 }

98 button {

99 z-index: 1;

100 left: 16px;

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

102 @include rtl {

103 left: auto;

104 right: 16px;

105 }

106 svg {

107 margin-block-end: 0;

108 }

109 }

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

111 color: #DDD;

112 }

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

114 color: #DDD;

115 }

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

117 max-width: 200px;

118 }

119 }

120

121 .logo {

122 display: inline-block;

123 &:hover {

124 color: #FFF;

125 text-decoration: none;

126 }

127 }

128 .logo-text {

129 display: inline-block;

130 font-size: 1.8em;

131 color: #fff;

132 font-weight: 400;

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

134 vertical-align: top;

135 line-height: 1;

136 }

137 .logo-image {

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

139 vertical-align: top;

140 height: 43px;

141 }

142

143 .mobile-menu-toggle {

144 color: #FFF;

145 fill: #FFF;

146 font-size: 2em;

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

148 border-radius: 4px;

149 padding: 0 $-xs;

150 position: absolute;

151 right: $-m;

152 top: 13px;

153 line-height: 1;

154 cursor: pointer;

155 user-select: none;

156 svg {

157 margin: 0;

158 bottom: -2px;

159 }

160 @include rtl() {

161 left: $-m;

162 right: auto;

163 }

164 }

165

166

167

168 @include smaller-than($l) {

169 header .header-links {

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

171 display: none;

172 z-index: 10;

173 right: $-m;

174 border-radius: 4px;

175 overflow: hidden;

176 position: absolute;

177 box-shadow: $bs-hover;

178 margin-top: -$-xs;

179 &.show {

180 display: block;

181 }

182 }

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

184 text-align: start;

185 display: block;

186 padding: $-s $-m;

187 color: $text-dark;

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

189 svg {

190 margin-inline-end: $-s;

191 }

192 &:hover {

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

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

195 text-decoration: none;

196 }

197 }

198 header .dropdown-container {

199 display: block;

200 padding-inline-start: 0;

201 }

202 header .links {

203 display: block;

204 }

205 header .dropdown-container ul {

206 display: block !important;

207 position: relative;

208 background-color: transparent;

209 border: 0;

210 padding: 0;

211 margin: 0;

212 box-shadow: none;

213 }

214 }

215

216 .tri-layout-mobile-tabs {

217 position: sticky;

218 top: 0;

219 z-index: 5;

220 background-color: #FFF;

221 border-bottom: 1px solid #DDD;

222 box-shadow: $bs-card;

223 }

224 .tri-layout-mobile-tab {

225 text-align: center;

226 border-bottom: 3px solid #BBB;

227 cursor: pointer;

228 &:first-child {

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

230 }

231 &.active {

232 border-bottom-color: currentColor;

233 }

234 }

235

236 .breadcrumbs {

237 display: flex;

238 flex-direction: row;

239 align-items: center;

240 justify-content: flex-start;

241 flex-wrap: wrap;

242 opacity: 0.7;

243 .icon-list-item {

244 width: auto;

245 padding-top: $-xs;

246 padding-bottom: $-xs;

247 }

248 .separator {

249 display: inline-block;

250 fill: #aaa;

251 font-size: 1.6em;

252 line-height: 0.8;

253 margin: -2px 0 0;

254 }

255 &:hover, &:focus-within {

256 opacity: 1;

257 }

258 }

259

260 @include smaller-than($l) {

261 .breadcrumbs .icon-list-item {

262 padding: $-xs;

263 > span + span {

264 display: none;

265 }

266 > span:first-child {

267 margin-inline-end: 0;

268 }

269 }

270 }

271

272 .breadcrumb-listing {

273 position: relative;

274 .breadcrumb-listing-toggle {

275 padding: 6px;

276 border: 1px solid transparent;

277 border-radius: 4px;

278 &:hover {

279 border-color: #DDD;

280 }

281 }

282 .svg-icon {

283 margin-inline-end: 0;

284 }

285 }

286

287 .breadcrumb-listing-dropdown {

288 box-shadow: $bs-med;

289 overflow: hidden;

290 min-height: 100px;

291 width: 240px;

292 display: none;

293 position: absolute;

294 z-index: 80;

295 right: -$-m;

296 @include rtl {

297 right: auto;

298 left: -$-m;

299 }

300 .breadcrumb-listing-search .svg-icon {

301 position: absolute;

302 left: $-s;

303 @include rtl {

304 right: $-s;

305 left: auto;

306 }

307 top: 11px;

308 fill: #888;

309 pointer-events: none;

310 }

311 .breadcrumb-listing-entity-list {

312 max-height: 400px;

313 overflow-y: scroll;

314 text-align: start;

315 }

316 input {

317 padding-inline-start: $-xl;

318 border-radius: 0;

319 border: 0;

320 border-bottom: 1px solid #DDD;

321 }

322 }

323

324 @include smaller-than($m) {

325 .breadcrumb-listing-dropdown {

326 position: fixed;

327 right: auto;

328 left: $-m;

329 }

330 .breadcrumb-listing-dropdown .breadcrumb-listing-entity-list {

331 max-height: 240px;

332 }

333 }

334

335 .faded {

336 a, button, span, span > div {

337 color: #666;

338 fill: #666;

339 }

340 .text-button {

341 opacity: 0.5;

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

343 &:hover {

344 opacity: 1;

345 text-decoration: none;

346 }

347 }

348 }

349

350 .faded span.faded-text {

351 display: inline-block;

352 padding: $-s;

353 }

354

355 .action-buttons .text-button {

356 display: inline-block;

357 padding: $-xs $-s;

358 &:last-child {

359 padding-inline-end: 0;

360 }

361 &:first-child {

362 padding-inline-start: 0;

363 }

364 }

365

366

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

368 padding-inline-end: 0;

369 padding-inline-start: $-s;

370 }

371 .action-buttons {

372 text-align: end;

373 &.text-left {

374 text-align: start;

375 .text-button {

376 padding-inline-end: $-m;

377 padding-inline-start: 0;

378 }

379 }

380 &.text-center {

381 text-align: center;

382 }

383 }

384

385 @include smaller-than($m) {

386 .action-buttons .text-button {

387 padding: $-xs $-xs;

388 }

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

390 padding-inline-start: $-xs;

391 }

392 }