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 }

266

267 @include smaller-than($l) {

268 .breadcrumbs .icon-list-item {

269 padding: $-xs;

270 > span + span {

271 display: none;

272 }

273 > span:first-child {

274 margin-inline-end: 0;

275 }

276 }

277 }

278

279 .dropdown-search {

280 position: relative;

281 .dropdown-search-toggle {

282 padding: $-xs;

283 border: 1px solid transparent;

284 border-radius: 4px;

285 &:hover {

286 border-color: #DDD;

287 }

288 }

289 .svg-icon {

290 margin-inline-end: 0;

291 }

292 }

293

294 .dropdown-search-toggle.compact {

295 padding: $-xxs $-xs;

296 .avatar {

297 height: 22px;

298 width: 22px;

299 }

300 }

301

302 .faded {

303 a, button, span, span > div {

304 color: #666;

305 fill: #666;

306 }

307 .text-button {

308 opacity: 0.5;

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

310 &:hover {

311 opacity: 1;

312 text-decoration: none;

313 }

314 }

315 }

316

317 .faded span.faded-text {

318 display: inline-block;

319 padding: $-s;

320 }

321

322 .action-buttons .text-button {

323 display: inline-block;

324 padding: $-xs $-s;

325 &:last-child {

326 padding-inline-end: 0;

327 }

328 &:first-child {

329 padding-inline-start: 0;

330 }

331 }

332

333

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

335 padding-inline-end: 0;

336 padding-inline-start: $-s;

337 }

338 .action-buttons {

339 text-align: end;

340 &.text-left {

341 text-align: start;

342 .text-button {

343 padding-inline-end: $-m;

344 padding-inline-start: 0;

345 }

346 }

347 &.text-center {

348 text-align: center;

349 }

350 }

351

352 @include smaller-than($m) {

353 .action-buttons .text-button {

354 padding: $-xs $-xs;

355 }

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

357 padding-inline-start: $-xs;

358 }

359 }