diff --git a/assets/stylesheets/components/_header.scss b/assets/stylesheets/components/_header.scss index 26218db4..e582897f 100644 --- a/assets/stylesheets/components/_header.scss +++ b/assets/stylesheets/components/_header.scss @@ -31,6 +31,7 @@ ._header-btn { position: relative; + flex: 0 0 auto; width: 2.25rem; height: 100%; color: $textColorLight; @@ -220,10 +221,12 @@ z-index: 2; top: .875rem; left: .875rem; - padding: 0 .5rem; + padding: 0 .375rem; line-height: 1.25rem; - font-size: .875rem; + max-width: 50%; + font-size: .8125rem; color: $textColorLight; background: darken($headerBackground, 5%); border-radius: 2px; + @extend %truncate-text; } diff --git a/assets/stylesheets/components/_mobile.scss b/assets/stylesheets/components/_mobile.scss index 08a2c6fb..b1863df1 100644 --- a/assets/stylesheets/components/_mobile.scss +++ b/assets/stylesheets/components/_mobile.scss @@ -23,7 +23,7 @@ position: static; height: auto; margin: 0; - padding: .75rem 1rem 0; + padding: .75rem 1rem 1px; &:before { content: none; } } @@ -46,14 +46,13 @@ // Header - ._header-btn { width: 2.5rem; } ._header-btn[hidden] { display: block; } ._search { padding-right: .125rem; padding-left: .125rem; - &:before { left: .5rem; } + &:before { left: .625rem; } } ._search-tag { left: .5rem; } diff --git a/assets/stylesheets/components/_page.scss b/assets/stylesheets/components/_page.scss index 93db11ec..99771443 100644 --- a/assets/stylesheets/components/_page.scss +++ b/assets/stylesheets/components/_page.scss @@ -20,10 +20,12 @@ iframe { display: block; + max-width: 100%; margin-bottom: 1em; padding: 1px; border: 1px dotted $boxBorder; border-radius: 3px; + @extend %border-box; } } diff --git a/assets/stylesheets/components/_sidebar.scss b/assets/stylesheets/components/_sidebar.scss index df847886..daa6c7f7 100644 --- a/assets/stylesheets/components/_sidebar.scss +++ b/assets/stylesheets/components/_sidebar.scss @@ -97,6 +97,7 @@ cursor: default; background: $sidebarBackground; box-shadow: inset -1px 0 $sidebarBorder; + @extend %truncate-text; &, &:hover { color: inherit; @@ -126,17 +127,10 @@ } } -._list-item, ._list-text { - overflow: hidden; - white-space: nowrap; - word-wrap: normal; - overflow-wrap: normal; - text-overflow: ellipsis; -} - ._list-text { display: block; pointer-events: none; + @extend %truncate-text; } ._list-count, ._list-enable { diff --git a/assets/stylesheets/global/_classes.scss b/assets/stylesheets/global/_classes.scss index c7ec0771..7380e8e3 100644 --- a/assets/stylesheets/global/_classes.scss +++ b/assets/stylesheets/global/_classes.scss @@ -21,6 +21,14 @@ @extend %user-select-none; } +%truncate-text { + overflow: hidden; + white-space: nowrap; + word-wrap: normal; + overflow-wrap: normal; + text-overflow: ellipsis; +} + // // Boxes //