diff --git a/src/dashboard/style.scss b/src/dashboard/style.scss index 9430a1563..deeaac940 100644 --- a/src/dashboard/style.scss +++ b/src/dashboard/style.scss @@ -27,12 +27,18 @@ } #otter { + --main-link-color: #2271b1; + .components-button { &.is-primary { --wp-admin-theme-color: #ed6f57; --wp-admin-theme-color-darker-20: #d5654f; --wp-admin-theme-color-darker-10: #dd6851; } + + &.is-link { + color: var(--main-link-color); + } } .otter-header { @@ -89,9 +95,17 @@ margin: 0; border: 0; cursor: pointer; + margin-right: 8px; + + &:hover { + span { + color: #282828; + } + border-bottom: 3px solid #e5e5e5; + } &.is-active { - border-bottom: 4px solid #1E7DB2; + border-bottom: 3px solid #1E7DB2; span { color: #282828; @@ -100,7 +114,7 @@ @media ( max-width: 960px ) { border-bottom: 0; - border-left: 4px solid #1E7DB2; + border-left: 3px solid #1E7DB2; } } @@ -161,10 +175,17 @@ &:hover { border-bottom: 1px solid #d6e2ed !important; + background: #E8E8E8; } } } + .components-panel__body-toggle { + &:hover { + background: #E8E8E8; + } + } + &.is-pro { .components-panel__body-title { .components-button { @@ -247,8 +268,8 @@ } &:focus { - border-color: #00a0d2; - box-shadow: 0 0 0 1px #00a0d2; + border-color: var(--main-link-color); + box-shadow: 0 0 0 1px var(--main-link-color); outline: 2px solid transparent; outline-offset: -2px; } @@ -290,6 +311,12 @@ padding: 2px 20px; font-size: 14px; margin-right: 10px; + color: var(--main-link-color); + box-shadow: inset 0 0 0 1px var(--main-link-color); + + &:focus { + box-shadow: inset 0 0 0 1.5px var(--main-link-color); + } } .components-external-link { @@ -342,10 +369,16 @@ .is-secondary { padding: 2px 20px; font-size: 14px; + color: var(--main-link-color); + box-shadow: inset 0 0 0 1px var(--main-link-color); &:not(:last-child) { margin-right: 15px; } + + &:focus { + box-shadow: inset 0 0 0 1.5px var(--main-link-color); + } } } } @@ -484,6 +517,24 @@ justify-content: center; } } + + .components-form-toggle.is-checked .components-form-toggle__track { + background-color: var(--main-link-color); + } + + #o-feedback { + box-shadow: inset 0 0 0 1px var(--main-link-color); + color: var(--main-link-color); + + &:focus { + box-shadow: inset 0 0 0 1.5px var(--main-link-color); + } + } + + :is(.components-textarea-control__input, .components-text-control__input):focus { + border-color: var(--main-link-color); + box-shadow: 0 0 0 1px var(--main-link-color); + } } .otter-button-control {