From c94defb35eb13151af81c09615a786c2400db918 Mon Sep 17 00:00:00 2001 From: Kris Date: Mon, 12 Oct 2020 21:24:54 -0400 Subject: [PATCH] FIX: use new color variables in embed.scss, remove hardcoded colors (#10898) --- app/assets/stylesheets/embed.scss | 38 +++++++++++++++---------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/app/assets/stylesheets/embed.scss b/app/assets/stylesheets/embed.scss index 0eddb4068fd..34519eb2673 100644 --- a/app/assets/stylesheets/embed.scss +++ b/app/assets/stylesheets/embed.scss @@ -2,23 +2,23 @@ @import "./vendor/normalize-ext"; @import "./common/foundation/base"; @import "./common/foundation/variables"; -@import "./common/foundation/colors"; +@import "./color_definitions"; @import "./common/foundation/mixins"; @import "./common/components/buttons"; article.post { - border-bottom: 1px solid #ddd; + border-bottom: 1px solid var(--primary-low); img.avatar { border-radius: 50%; } &.deleted { - background-color: #ffe5e5; + background-color: var(--danger-low); } .quote .title { - border-left: 5px solid $primary-very-low; + border-left: 5px solid var(--primary-very-low); padding: 10px 10px 0 12px; .avatar { margin-right: 7px; @@ -33,7 +33,7 @@ article.post { blockquote { padding: 10px 8px 10px 13px; margin: 0 0 10px 0; - border-left: 5px solid $primary-very-low; + border-left: 5px solid var(--primary-very-low); p { margin: 0 0 10px 0; } @@ -44,7 +44,7 @@ article.post { .post-date { float: right; - color: #aaa; + color: var(--primary-low-mid); font-size: $font-down-1; margin: 10px 4px 0 0; } @@ -83,19 +83,19 @@ article.post { margin: 0 0 10px 0; a { - color: #5c5c5c; + color: var(--primary-high); } a.staff { - background-color: #ffffc2; + background-color: var(--highlight-low); } a.new-user { - color: $primary-low-mid-or-secondary-high; + color: var(--primary-low-mid); } span.title { font-weight: normal; - color: #999; + color: var(--primary-medium); } } @@ -110,12 +110,12 @@ img.emoji { margin: 10px 20px 6px 0; display: inline-block; float: right; - color: #0088cc; + color: var(--tertiary); } .replies { font-size: $font-0; - color: #999; + color: var(--primary-medium); } .clearfix { @@ -127,7 +127,7 @@ header.discourse { padding-right: 10px; padding-bottom: 8px; font-size: $font-up-2; - border-bottom: 3px solid #ddd; + border-bottom: 3px solid var(--primary-low); display: flex; flex-direction: row; @@ -150,7 +150,7 @@ footer { .button { color: white; padding: 6px 8px; - background-color: #0088cc; + background-color: var(--tertiary); display: inline-block; } } @@ -182,7 +182,7 @@ div.lightbox-wrapper { margin: 0.5rem; &:hover { - background: #006da3; + background: var(--tertiary-hover); } span { @@ -211,16 +211,16 @@ div.lightbox-wrapper { clear: both; .main-link { - border-bottom: 1px solid $primary-low; + border-bottom: 1px solid var(--primary-low); padding: 0.5rem; width: 100%; a { - color: $primary; + color: var(--primary); } a:visited { - color: $primary-medium; + color: var(--primary-medium); } } @@ -249,7 +249,7 @@ div.lightbox-wrapper { .topic-last-posted-at, .topic-created-at, .topic-stats { - color: $primary-medium; + color: var(--primary-medium); } }