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
// 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 {
position: absolute;
width: 500px;
@ -9,9 +12,9 @@
z-index: 990;
box-shadow: 0 2px 12px rgba($primary, .6);
margin-top: -2px;
color: #ffffff;
color: $user_card_primary;
background-size: cover;
background: #222222 center center;
background: $user_card_background center center;
min-height: 175px;
-webkit-transition: opacity .2s, -webkit-transform .2s;
transition: opacity .2s, transform .2s;
@ -29,7 +32,7 @@
.card-content {
padding: 12px 12px 0 12px;
background: rgba(#222222, .85);
background: rgba($user_card_background, .85);
margin-top: 80px;
&:after {
@ -64,11 +67,11 @@
overflow: hidden;
text-overflow: ellipsis;
a {
color: #fff;
color: $user_card_primary;
}
i {
font-size: .8em;
color: #fff;
color: $user_card_primary;
}
}
@ -82,7 +85,7 @@
overflow: hidden;
text-overflow: ellipsis;
a {
color: #fff;
color: $user_card_primary;
}
}
@ -90,11 +93,11 @@
font-size: 0.929em;
font-weight: normal;
margin-top: 0;
color: scale-color(#fff, $lightness: 25%);
color: scale-color($user_card_primary, $lightness: 25%);
overflow: hidden;
text-overflow: ellipsis;
a {
color: scale-color(#222, $lightness: 50%);
color: scale-color($user_card_background, $lightness: 50%);
}
}
@ -102,10 +105,10 @@
font-size: 0.929em;
font-weight: normal;
margin-top: 0;
color: #222;
color: $user_card_background;
.group-link {
color: #222;
color: $user_card_background;
}
}
@ -117,11 +120,11 @@
display: inline;
margin-right: 5px;
.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%);
.group-link {color: scale-color(#222, $lightness: 50%);}
div {display: inline; color: scale-color($user_card_background, $lightness: 50%);
.group-link {color: scale-color($user_card_background, $lightness: 50%);}
}
}
@ -139,7 +142,7 @@
clear: left;
a {
color: #fff;
color: $user_card_primary;
text-decoration: underline;
}
img {
@ -147,7 +150,7 @@
}
a.mention {
background-color: scale-color(#fff, $lightness: 50%);
background-color: scale-color($user_card_primary, $lightness: 50%);
}
.overflow {
max-height: 60px;
@ -179,7 +182,7 @@
}
.new-user a {
color: scale-color(#222, $lightness: 70%);
color: scale-color($user_card_background, $lightness: 70%);
}
&.show-badges {
@ -209,12 +212,12 @@
.user-badge {
background: transparent;
color: scale-color(#222, $lightness: 50%);
border-color: scale-color(#222, $lightness: 50%);
color: scale-color($user_card_background, $lightness: 50%);
border-color: scale-color($user_card_background, $lightness: 50%);
}
h3 {
color: #222;
color: $user_card_background;
font-size: 1em;
margin-bottom: -8px;
}
@ -241,6 +244,6 @@
right: 12px;
bottom: 12px;
font-size: 2.143em;
i {color: #fff;}
i {color: $user_card_primary;}
}
}