github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-04-03 05:39:41 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FIX: Make user card colors absolute (xcpt shadow)

Browse Source
This commit is contained in:
Kane York 2015-08-18 12:04:35 -07:00
parent 707c493e3c
commit 3edf0e662f
1 changed files with 25 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,5 @@
// 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
#user-card { #user-card {
position: absolute; position: absolute;
@ -6,20 +7,19 @@
left: -9999px; left: -9999px;
top: -9999px; top: -9999px;
z-index: 990; z-index: 990;
box-shadow: 0 2px 6px rgba(0,0,0,.6); box-shadow: 0 2px 12px rgba($primary, .6);
margin-top: -2px; margin-top: -2px;
background-color: $primary; color: #ffffff;
color: $secondary;
background-size: cover; background-size: cover;
background-position: center center; background: #222222 center center;
min-height: 175px; min-height: 175px;
-webkit-transition: opacity .2s, -webkit-transform .2s;
transition: opacity .2s, transform .2s;
opacity: 0; opacity: 0;
-webkit-transform: scale(.9); -webkit-transform: scale(.9);
-ms-transform: scale(.9); -ms-transform: scale(.9);
transform: scale(.9); transform: scale(.9);
-webkit-transition: opacity .2s, -webkit-transform .2s;
transition: opacity .2s, transform .2s;
&.show { &.show {
opacity: 1; opacity: 1;
-webkit-transform: scale(1); -webkit-transform: scale(1);
@ -29,7 +29,7 @@
.card-content { .card-content {
padding: 12px 12px 0 12px; padding: 12px 12px 0 12px;
background: rgba($primary, .85); background: rgba(#222222, .85);
margin-top: 80px; margin-top: 80px;
&:after { &:after {
@ -55,7 +55,6 @@
} }
h1 { h1 {
display: inline-block;
min-width: 120px; min-width: 120px;
font-size: 1.786em; font-size: 1.786em;
line-height: 1.25; line-height: 1.25;
@ -65,11 +64,11 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
a { a {
color: $secondary; color: #222;
} }
i { i {
font-size: .8em; font-size: .8em;
color: $secondary; color: #222;
} }
} }
@ -83,7 +82,7 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
a { a {
color: $secondary; color: #fff;
} }
} }
@ -91,11 +90,11 @@
font-size: 0.929em; font-size: 0.929em;
font-weight: normal; font-weight: normal;
margin-top: 0; margin-top: 0;
color: dark-light-diff($secondary, $primary, 25%, -25%); color: scale-color(#fff, $lightness: 25%);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
a { a {
color: dark-light-diff($primary, $secondary, 50%, -50%); color: scale-color(#222, $lightness: 50%);
} }
} }
@ -103,10 +102,10 @@
font-size: 0.929em; font-size: 0.929em;
font-weight: normal; font-weight: normal;
margin-top: 0; margin-top: 0;
color: $primary; color: #222;
.group-link { .group-link {
color: $primary; color: #222;
} }
} }
@ -118,11 +117,11 @@
display: inline; display: inline;
margin-right: 5px; margin-right: 5px;
.desc, a { .desc, a {
color: dark-light-diff($secondary, $primary, 50%, -50%); color: scale-color(#fff, $lightness: 50%);
} }
} }
div {display: inline; color: scale-color($primary, $lightness: 50%); div {display: inline; color: scale-color(#222, $lightness: 50%);
.group-link {color: scale-color($primary, $lightness: 50%);} .group-link {color: scale-color(#222, $lightness: 50%);}
} }
} }
@ -140,7 +139,7 @@
clear: left; clear: left;
a { a {
color: $secondary; color: #fff;
text-decoration: underline; text-decoration: underline;
} }
img { img {
@ -148,7 +147,7 @@
} }
a.mention { a.mention {
background-color: dark-light-diff($secondary, $primary, 50%, -60%); background-color: scale-color(#fff, $lightness: 50%);
} }
.overflow { .overflow {
max-height: 60px; max-height: 60px;
@ -180,7 +179,7 @@
} }
.new-user a { .new-user a {
color: scale-color($primary, $lightness: 70%); color: scale-color(#222, $lightness: 70%);
} }
&.show-badges { &.show-badges {
@ -210,12 +209,12 @@
.user-badge { .user-badge {
background: transparent; background: transparent;
color: dark-light-diff($primary, $secondary, 50%, -50%); color: scale-color(#222, $lightness: 50%);
border-color: dark-light-diff($primary, $secondary, 50%, -50%); border-color: scale-color(#222, $lightness: 50%);
} }
h3 { h3 {
color: $primary; color: #222;
font-size: 1em; font-size: 1em;
margin-bottom: -8px; margin-bottom: -8px;
} }
@ -242,6 +241,6 @@
right: 12px; right: 12px;
bottom: 12px; bottom: 12px;
font-size: 2.143em; font-size: 2.143em;
i {color: $secondary;} i {color: #fff;}
} }
} }