diff --git a/services/web/public/stylesheets/app/editor/toolbar.less b/services/web/public/stylesheets/app/editor/toolbar.less index f1faddb7a9..55e581c3d6 100644 --- a/services/web/public/stylesheets/app/editor/toolbar.less +++ b/services/web/public/stylesheets/app/editor/toolbar.less @@ -259,6 +259,8 @@ } .formatting-btn { + color: @formatting-btn-color; + background-color: @formatting-btn-bg; padding: 0; height: 100%; display: flex; @@ -266,9 +268,13 @@ justify-content: center; box-shadow: none; border: none; - border-left: 1px solid #ccc; + border-left: 1px solid @formatting-btn-border; border-radius: 0; + &:hover { + color: @formatting-btn-color; + } + &--icon { min-width: 32px; width: 32px; @@ -296,10 +302,15 @@ .formatting-menu { min-width: auto; max-width: 130px; + background-color: @formatting-menu-bg; .formatting-menu-item { float: left; + .formatting-btn { + border-right: none; + } + &:nth-of-type(4n + 1) .formatting-btn { border-left: none; } diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 033ce9c1bf..5d08d9f95d 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -941,6 +941,12 @@ @toggle-switch-bg : @gray-lightest; @toggle-switch-highlight-color : @brand-primary; +// Formatting buttons +@formatting-btn-color : @btn-default-color; +@formatting-btn-bg : @btn-default-bg; +@formatting-btn-border : @btn-default-border; +@formatting-menu-bg : @btn-default-bg; + // Chat @chat-bg : transparent; @chat-message-color : @text-color; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 3d3d4468fd..114d07a5b1 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -244,6 +244,12 @@ @toggle-switch-radius-left : @btn-border-radius-base 0 0 @btn-border-radius-base; @toggle-switch-radius-right : 0 @btn-border-radius-base @btn-border-radius-base 0; +// Formatting buttons +@formatting-btn-color : #FFF; +@formatting-btn-bg : @ol-blue-gray-5; +@formatting-btn-border : @ol-blue-gray-4; +@formatting-menu-bg : @ol-blue-gray-5; + // Chat @chat-bg : @ol-blue-gray-5; @chat-message-color : #FFF;