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.6) 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 display: none;

171 background-color: #FFF;

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 {

184 text-align: start;

185 display: block;

186 padding: $-s $-m;

187 color: $text-dark;

188 fill: $text-dark;

189 svg {

190 margin-inline-end: $-s;

191 }

192 &:hover {

193 background-color: #EEE;

194 color: #444;

195 fill: #444;

196 text-decoration: none;

197 }

198 }

199 header .dropdown-container {

200 display: block;

201 padding-inline-start: 0;

202 }

203 header .links {

204 display: block;

205 }

206 header .dropdown-container ul {

207 display: block !important;

208 position: relative;

209 background-color: transparent;

210 border: 0;

211 padding: 0;

212 margin: 0;

213 box-shadow: none;

214 }

215 }

216

217 .tri-layout-mobile-tabs {

218 position: sticky;

219 top: 0;

220 z-index: 5;

221 background-color: #FFF;

222 border-bottom: 1px solid #DDD;

223 box-shadow: $bs-card;

224 }

225 .tri-layout-mobile-tab {

226 text-align: center;

227 border-bottom: 3px solid #BBB;

228 cursor: pointer;

229 &:first-child {

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

231 }

232 &.active {

233 border-bottom-color: currentColor;

234 }

235 }

236

237 .breadcrumbs {

238 display: flex;

239 flex-direction: row;

240 align-items: center;

241 justify-content: flex-start;

242 flex-wrap: wrap;

243 opacity: 0.7;

244 .icon-list-item {

245 width: auto;

246 padding-top: $-xs;

247 padding-bottom: $-xs;

248 }

249 .separator {

250 display: inline-block;

251 fill: #aaa;

252 font-size: 1.6em;

253 line-height: 0.8;

254 margin: -2px 0 0;

255 }

256 &:hover, &:focus-within {

257 opacity: 1;

258 }

259 }

260

261 @include smaller-than($l) {

262 .breadcrumbs .icon-list-item {

263 padding: $-xs;

264 > span + span {

265 display: none;

266 }

267 > span:first-child {

268 margin-inline-end: 0;

269 }

270 }

271 }

272

273 .breadcrumb-listing {

274 position: relative;

275 .breadcrumb-listing-toggle {

276 padding: 6px;

277 border: 1px solid transparent;

278 border-radius: 4px;

279 &:hover {

280 border-color: #DDD;

281 }

282 }

283 .svg-icon {

284 margin-inline-end: 0;

285 }

286 }

287

288 .breadcrumb-listing-dropdown {

289 box-shadow: $bs-med;

290 overflow: hidden;

291 min-height: 100px;

292 width: 240px;

293 display: none;

294 position: absolute;

295 z-index: 80;

296 right: -$-m;

297 @include rtl {

298 right: auto;

299 left: -$-m;

300 }

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

302 position: absolute;

303 left: $-s;

304 @include rtl {

305 right: $-s;

306 left: auto;

307 }

308 top: 11px;

309 fill: #888;

310 pointer-events: none;

311 }

312 .breadcrumb-listing-entity-list {

313 max-height: 400px;

314 overflow-y: scroll;

315 text-align: start;

316 }

317 input {

318 padding-inline-start: $-xl;

319 border-radius: 0;

320 border: 0;

321 border-bottom: 1px solid #DDD;

322 }

323 }

324

325 @include smaller-than($m) {

326 .breadcrumb-listing-dropdown {

327 position: fixed;

328 right: auto;

329 left: $-m;

330 }

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

332 max-height: 240px;

333 }

334 }

335

336 .faded {

337 a, button, span, span > div {

338 color: #666;

339 fill: #666;

340 }

341 .text-button {

342 opacity: 0.5;

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

344 &:hover {

345 opacity: 1;

346 text-decoration: none;

347 }

348 }

349 }

350

351 .faded span.faded-text {

352 display: inline-block;

353 padding: $-s;

354 }

355

356 .action-buttons .text-button {

357 display: inline-block;

358 padding: $-xs $-s;

359 &:last-child {

360 padding-inline-end: 0;

361 }

362 &:first-child {

363 padding-inline-start: 0;

364 }

365 }

366

367

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

369 padding-inline-end: 0;

370 padding-inline-start: $-s;

371 }

372 .action-buttons {

373 text-align: end;

374 &.text-left {

375 text-align: start;

376 .text-button {

377 padding-inline-end: $-m;

378 padding-inline-start: 0;

379 }

380 }

381 &.text-center {

382 text-align: center;

383 }

384 }

385

386 @include smaller-than($m) {

387 .action-buttons .text-button {

388 padding: $-xs $-xs;

389 }

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

391 padding-inline-start: $-xs;

392 }

393 }