diff --git a/components/common/Editor/index.module.scss b/components/common/Editor/index.module.scss index 6be160ed..0a2b476b 100644 --- a/components/common/Editor/index.module.scss +++ b/components/common/Editor/index.module.scss @@ -74,21 +74,21 @@ h1 { font-size: $font-xlarge; font-weight: $medium; - margin: $unit 0; + margin: $unit-2x 0; text-align: left; } h2 { font-size: $font-large; font-weight: $medium; - margin: $unit 0; + margin: $unit-2x 0; text-align: left; } h3 { font-size: $font-regular; font-weight: $medium; - margin: $unit 0; + margin: $unit-2x 0; text-align: left; } @@ -96,6 +96,7 @@ border-radius: $item-corner-small; background: var(--highlight-bg); color: var(--highlight-text); + font-weight: $normal; padding: 1px $unit-fourth; } @@ -116,15 +117,18 @@ .mention { border-radius: $item-corner-small; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), - 0 1px 0px rgba(0, 0, 0, 0.25); - background: var(--card-bg); + 0 1px 0px var(--null-shadow); + background: var(--null-bg); color: var(--text-primary); font-weight: $medium; font-size: 15px; padding: 1px $unit-half; + transition: all 0.1s ease-out; &:hover { - background: var(--card-bg-hover); + background: var(--null-bg-hover); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), + 0 1px 0px var(--null-shadow-hover); text-decoration: none; cursor: pointer; } @@ -136,6 +140,7 @@ color: var(--fire-text); &:hover { + background: var(--fire-bg-hover); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0px var(--fire-shadow-hover); color: var(--fire-text-hover); @@ -149,6 +154,7 @@ color: var(--water-text); &:hover { + background: var(--water-bg-hover); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0px var(--water-shadow-hover); color: var(--water-text-hover); @@ -162,6 +168,7 @@ color: var(--earth-text); &:hover { + background: var(--earth-bg-hover); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0px var(--earth-shadow-hover); color: var(--earth-text-hover); @@ -188,6 +195,7 @@ color: var(--dark-text); &:hover { + background: var(--dark-bg-hover); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0px var(--dark-shadow-hover); color: var(--dark-text-hover); @@ -201,6 +209,7 @@ color: var(--light-text); &:hover { + background: var(--light-bg-hover); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0px var(--light-shadow-hover); color: var(--light-text-hover); diff --git a/styles/themes.scss b/styles/themes.scss index 9beac5a3..5f256bd6 100644 --- a/styles/themes.scss +++ b/styles/themes.scss @@ -159,6 +159,14 @@ --grid-border-color: #{$grid--border--color--light}; // Light - Element theming + --null-bg: #{$null--bg--light}; + --null-bg-hover: #{$null--bg--hover--light}; + --null-text: #{$null--text--light}; + --null-raid-text: #{$null--text--raid--light}; + --null-text-hover: #{$null--text--hover--light}; + --null-shadow: #{$null--shadow--light}; + --null-shadow-hover: #{$null--shadow--light--hover}; + --wind-bg: #{$wind--bg--light}; --wind-bg-hover: #{$wind--bg--hover--light}; --wind-text: #{$wind--text--light}; @@ -373,6 +381,14 @@ --grid-border-color: #{$grid--border--color--dark}; // Dark - Element theming + --null-bg: #{$null--bg--dark}; + --null-bg-hover: #{$null--bg--hover--dark}; + --null-text: #{$null--text--dark}; + --null-raid-text: #{$null--text--raid--dark}; + --null-text-hover: #{$null--text--hover--dark}; + --null-shadow: #{$null--shadow--dark}; + --null-shadow-hover: #{$null--shadow--dark--hover}; + --wind-bg: #{$wind--bg--dark}; --wind-bg-hover: #{$wind--bg--hover--dark}; --wind-text: #{$wind--text--dark}; diff --git a/styles/variables.scss b/styles/variables.scss index 415b5e41..8877117a 100644 --- a/styles/variables.scss +++ b/styles/variables.scss @@ -464,6 +464,28 @@ $wind--shadow--dark: fade-out($wind-text-20, 0.3); $wind--shadow--light--hover: fade-out($wind-text-00, 0.3); $wind--shadow--dark--hover: fade-out($wind-text-00, 0.3); +// Color Definitions: Element / Null +$null--bg--light: $grey-75; +$null--bg--dark: $grey-40; + +$null--bg--hover--light: $grey-70; +$null--bg--hover--dark: $grey-30; + +$null--text--light: $grey-40; +$null--text--dark: $grey-90; + +$null--text--raid--light: $grey-40; +$null--text--raid--dark: $grey-90; + +$null--text--hover--light: $grey-20; +$null--text--hover--dark: $grey-90; + +$null--shadow--light: fade-out($grey-60, 0.3); +$null--shadow--dark: fade-out($grey-25, 0.3); + +$null--shadow--light--hover: fade-out($grey-50, 0.3); +$null--shadow--dark--hover: fade-out($grey-10, 0.3); + // Color Definitions: Element / Fire $fire--bg--light: $fire-bg-10; $fire--bg--dark: $fire-bg-10;