X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/1ee3e779e4b9b0a92f701a72f21a72c83cb1ce68..refs/pull/2393/head:/resources/sass/_header.scss diff --git a/resources/sass/_header.scss b/resources/sass/_header.scss index 687ddd8d2..e19bb4f61 100644 --- a/resources/sass/_header.scss +++ b/resources/sass/_header.scss @@ -18,11 +18,14 @@ header { display: block; z-index: 11; top: 0; - color: #fff; - fill: #fff; + color: rgb(250, 250, 250); border-bottom: 1px solid #DDD; box-shadow: $bs-card; padding: $-xxs 0; + @include lightDark(border-bottom-color, #DDD, #000); + @include whenDark { + filter: saturate(0.8) brightness(0.8); + } .links { display: inline-block; vertical-align: top; @@ -31,11 +34,10 @@ header { display: inline-block; padding: $-m; color: #FFF; - fill: #FFF; } .dropdown-container { - padding-left: $-m; - padding-right: 0; + padding-inline-start: $-m; + padding-inline-end: 0; } .avatar, .user-name { display: inline-block; @@ -53,7 +55,7 @@ header { vertical-align: top; } > span { - padding-left: $-xs; + padding-inline-start: $-xs; display: inline-block; padding-top: $-xxs; } @@ -62,7 +64,7 @@ header { font-size: 18px; } @include between($l, $xl) { - padding-left: $-xs; + padding-inline-start: $-xs; .name { display: none; } @@ -87,18 +89,22 @@ header .search-box { border-radius: 40px; color: #EEE; z-index: 2; - padding-left: 40px; + padding-inline-start: 40px; &:focus { outline: none; border: 1px solid rgba(255, 255, 255, 0.6); } } button { - fill: #EEE; z-index: 1; left: 16px; + @include lightDark(color, rgba(255, 255, 255, 0.8), #AAA); + @include rtl { + left: auto; + right: 16px; + } svg { - margin-right: 0; + margin-block-end: 0; } } ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ @@ -124,12 +130,12 @@ header .search-box { font-size: 1.8em; color: #fff; font-weight: 400; - padding: 14px $-l 14px 0; + @include padding(14px, $-l, 14px, 0); vertical-align: top; line-height: 1; } .logo-image { - margin: $-xs $-s $-xs 0; + @include margin($-xs, $-s, $-xs, 0); vertical-align: top; height: 43px; } @@ -151,12 +157,18 @@ header .search-box { margin: 0; bottom: -2px; } + @include rtl() { + left: $-m; + right: auto; + } } + + @include smaller-than($l) { header .header-links { + @include lightDark(background-color, #fff, #333); display: none; - background-color: #FFF; z-index: 10; right: $-m; border-radius: 4px; @@ -168,25 +180,24 @@ header .search-box { display: block; } } - header .links a, header .dropdown-container ul li a { - text-align: left; + header .links a, header .dropdown-container ul li a, header .dropdown-container ul li button { + text-align: start; display: block; padding: $-s $-m; color: $text-dark; - fill: $text-dark; + @include lightDark(color, $text-dark, #eee); svg { - margin-right: $-s; + margin-inline-end: $-s; } &:hover { - background-color: #EEE; - color: #444; - fill: #444; + @include lightDark(background-color, #eee, #333); + @include lightDark(color, #000, #fff); text-decoration: none; } } header .dropdown-container { display: block; - padding-left: 0; + padding-inline-start: 0; } header .links { display: block; @@ -215,7 +226,7 @@ header .search-box { border-bottom: 3px solid #BBB; cursor: pointer; &:first-child { - border-right: 1px solid #DDD; + border-inline-end: 1px solid #DDD; } &.active { border-bottom-color: currentColor; @@ -253,7 +264,7 @@ header .search-box { display: none; } > span:first-child { - margin-right: 0; + margin-inline-end: 0; } } } @@ -269,7 +280,7 @@ header .search-box { } } .svg-icon { - margin-right: 0; + margin-inline-end: 0; } } @@ -282,9 +293,17 @@ header .search-box { position: absolute; z-index: 80; right: -$-m; + @include rtl { + right: auto; + left: -$-m; + } .breadcrumb-listing-search .svg-icon { position: absolute; left: $-s; + @include rtl { + right: $-s; + left: auto; + } top: 11px; fill: #888; pointer-events: none; @@ -292,10 +311,10 @@ header .search-box { .breadcrumb-listing-entity-list { max-height: 400px; overflow-y: scroll; - text-align: left; + text-align: start; } input { - padding-left: $-xl; + padding-inline-start: $-xl; border-radius: 0; border: 0; border-bottom: 1px solid #DDD; @@ -337,25 +356,25 @@ header .search-box { display: inline-block; padding: $-xs $-s; &:last-child { - padding-right: 0; + padding-inline-end: 0; } &:first-child { - padding-left: 0; + padding-inline-start: 0; } } .action-buttons .dropdown-container:last-child a { - padding-right: 0; - padding-left: $-s; + padding-inline-end: 0; + padding-inline-start: $-s; } .action-buttons { - text-align: right; + text-align: end; &.text-left { - text-align: left; + text-align: start; .text-button { - padding-right: $-m; - padding-left: 0; + padding-inline-end: $-m; + padding-inline-start: 0; } } &.text-center { @@ -368,6 +387,6 @@ header .search-box { padding: $-xs $-xs; } .action-buttons .dropdown-container:last-child a { - padding-left: $-xs; + padding-inline-start: $-xs; } } \ No newline at end of file