diff --git a/app/assets/stylesheets/top-bar.scss b/app/assets/stylesheets/top-bar.scss index ec37c519f..16b60f6d3 100644 --- a/app/assets/stylesheets/top-bar.scss +++ b/app/assets/stylesheets/top-bar.scss @@ -1,4 +1,6 @@ @import 'variables'; +@import 'mixins'; + .stories-index, .comments-index, .users-index, @@ -191,10 +193,10 @@ border-radius: 100%; margin-top: -1px; margin-left: -1px; - -ms-user-select:none; - -moz-user-select:none; - -webkit-user-select:none; - user-select:none; + -ms-user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; } } .bars { @@ -213,7 +215,9 @@ } } &.desktop { - &:hover,&:active,&:focus { + &:hover, + &:active, + &:focus { .menu { display: block; } @@ -283,7 +287,12 @@ padding: 6px 10px; } &.prime-option { - border-bottom: 3px solid #7a7e81; + border-bottom: 3px solid; + @include themeable( + border-color, + theme-prime-option-border-color, + #7a7e81 + ); margin-bottom: 5px; font-size: 1.22em; font-weight: 500; @@ -301,7 +310,7 @@ } } } - + .skip-content-link { position: absolute; top: 0; @@ -316,7 +325,7 @@ opacity: 0; transition: opacity 0.3s $ease-in-cubic, transform 0.3s $ease-in-cubic; - &:focus { + &:focus { pointer-events: auto; opacity: 1; transform: translate(-50%, 22px); diff --git a/app/views/layouts/_user_config.html.erb b/app/views/layouts/_user_config.html.erb index 84a3da882..9f264e0f8 100644 --- a/app/views/layouts/_user_config.html.erb +++ b/app/views/layouts/_user_config.html.erb @@ -49,7 +49,8 @@ --theme-container-color: #333;\ --theme-container-box-shadow: none;\ --theme-container-border: 1px solid #ff4983;\ - --theme-social-icon-invert: invert(0)' + --theme-social-icon-invert: invert(0);\ + --theme-prime-option-border-color: rgba(255, 255, 255, 0.55)' } } catch(e) { console.log(e)