Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Use variables for user card colors

This commit is contained in:
Kane York 2015-08-18 13:28:02 -07:00
parent 6a0eba3ba2
commit 3baabd14f8
1 changed files with 23 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
app/assets/stylesheets/desktop/user-card.scss
View File

@ -1,6 +1,9 @@
// styles that apply to the "share" popup when sharing a link to a post or topic // styles that apply to the "share" popup when sharing a link to a post or topic
// Colors should mostly be absolute here, it will look the same in dark & light themes // Colors should mostly be absolute here, it will look the same in dark & light themes
$user_card_primary: #fff;
$user_card_background: #222;
#user-card { #user-card {
position: absolute; position: absolute;
width: 500px; width: 500px;
@ -9,9 +12,9 @@
z-index: 990; z-index: 990;
box-shadow: 0 2px 12px rgba($primary, .6); box-shadow: 0 2px 12px rgba($primary, .6);
margin-top: -2px; margin-top: -2px;
color: #ffffff; color: $user_card_primary;
background-size: cover; background-size: cover;
background: #222222 center center; background: $user_card_background center center;
min-height: 175px; min-height: 175px;
-webkit-transition: opacity .2s, -webkit-transform .2s; -webkit-transition: opacity .2s, -webkit-transform .2s;
transition: opacity .2s, transform .2s; transition: opacity .2s, transform .2s;
@ -29,7 +32,7 @@
.card-content { .card-content {
padding: 12px 12px 0 12px; padding: 12px 12px 0 12px;
background: rgba(#222222, .85); background: rgba($user_card_background, .85);
margin-top: 80px; margin-top: 80px;
&:after { &:after {
@ -64,11 +67,11 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
a { a {
color: #fff; color: $user_card_primary;
} }
i { i {
font-size: .8em; font-size: .8em;
color: #fff; color: $user_card_primary;
} }
} }
@ -82,7 +85,7 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
a { a {
color: #fff; color: $user_card_primary;
} }
} }
@ -90,11 +93,11 @@
font-size: 0.929em; font-size: 0.929em;
font-weight: normal; font-weight: normal;
margin-top: 0; margin-top: 0;
color: scale-color(#fff, $lightness: 25%); color: scale-color($user_card_primary, $lightness: 25%);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
a { a {
color: scale-color(#222, $lightness: 50%); color: scale-color($user_card_background, $lightness: 50%);
} }
} }
@ -102,10 +105,10 @@
font-size: 0.929em; font-size: 0.929em;
font-weight: normal; font-weight: normal;
margin-top: 0; margin-top: 0;
color: #222; color: $user_card_background;
.group-link { .group-link {
color: #222; color: $user_card_background;
} }
} }
@ -117,11 +120,11 @@
display: inline; display: inline;
margin-right: 5px; margin-right: 5px;
.desc, a { .desc, a {
color: scale-color(#fff, $lightness: 50%); color: scale-color($user_card_primary, $lightness: 50%);
} }
} }
div {display: inline; color: scale-color(#222, $lightness: 50%); div {display: inline; color: scale-color($user_card_background, $lightness: 50%);
.group-link {color: scale-color(#222, $lightness: 50%);} .group-link {color: scale-color($user_card_background, $lightness: 50%);}
} }
} }
@ -139,7 +142,7 @@
clear: left; clear: left;
a { a {
color: #fff; color: $user_card_primary;
text-decoration: underline; text-decoration: underline;
} }
img { img {
@ -147,7 +150,7 @@
} }
a.mention { a.mention {
background-color: scale-color(#fff, $lightness: 50%); background-color: scale-color($user_card_primary, $lightness: 50%);
} }
.overflow { .overflow {
max-height: 60px; max-height: 60px;
@ -179,7 +182,7 @@
} }
.new-user a { .new-user a {
color: scale-color(#222, $lightness: 70%); color: scale-color($user_card_background, $lightness: 70%);
} }
&.show-badges { &.show-badges {
@ -209,12 +212,12 @@
.user-badge { .user-badge {
background: transparent; background: transparent;
color: scale-color(#222, $lightness: 50%); color: scale-color($user_card_background, $lightness: 50%);
border-color: scale-color(#222, $lightness: 50%); border-color: scale-color($user_card_background, $lightness: 50%);
} }
h3 { h3 {
color: #222; color: $user_card_background;
font-size: 1em; font-size: 1em;
margin-bottom: -8px; margin-bottom: -8px;
} }
@ -241,6 +244,6 @@
right: 12px; right: 12px;
bottom: 12px; bottom: 12px;
font-size: 2.143em; font-size: 2.143em;
i {color: #fff;} i {color: $user_card_primary;}
} }
} }