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

Merge pull request #2331 from awesomerobot/master 

rearranging layout to better fit the new username placement
This commit is contained in:
Jeff Atwood 2014-05-09 23:30:38 -07:00
parent c65fa01479 b2675a61ba
commit 1e8e2590cf
11 changed files with 136 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/assets/javascripts/discourse/templates/embedded_post.js.handlebars
View File

@ -1,16 +1,16 @@
<div class='row'> <div class='row'>
<div class='topic-meta-data span2'> <div class='topic-avatar span2'>
<div class='contents'> <div class='contents'>
<div> <div>
<a href='/users/{{unbound username}}'>{{avatar this imageSize="large"}}</a> <a href='/users/{{unbound username}}'>{{avatar this imageSize="large"}}</a>
</div> </div>
<h5 {{bind-attr class="staff new_user"}}><a href='{{unbound usernameUrl}}'>{{{breakUp username name}}}</a></h5>
</div> </div>
</div> </div>
<div class='span11 topic-body'> <div class='span11 topic-body'>
<div class="topic-meta-data-inside"> <div class="topic-meta-data">
<div class='post-info post-date'>{{unboundAgeWithTooltip created_at}}</div> <h5 {{bind-attr class="staff new_user"}}><a href='{{unbound usernameUrl}}'>{{{breakUp username name}}}</a></h5>
{{#if view.parentView.previousPost}}<a href='{{unbound url}}' class="post-info arrow" title="{{i18n topic.jump_reply_up}}"><i class='fa fa-arrow-up'></i></a>{{/if}} {{#if view.parentView.previousPost}}<a href='{{unbound url}}' class="post-info arrow" title="{{i18n topic.jump_reply_up}}"><i class='fa fa-arrow-up'></i></a>{{/if}}
<div class='post-info post-date'>{{unboundAgeWithTooltip created_at}}</div>
</div> </div>
{{{unbound cooked}}} {{{unbound cooked}}}
{{#unless view.parentView.previousPost}}<a href='{{unbound url}}' class="arrow" title="{{i18n topic.jump_reply_down}}"><i class='fa fa-arrow-down'></i></a>{{/unless}} {{#unless view.parentView.previousPost}}<a href='{{unbound url}}' class="arrow" title="{{i18n topic.jump_reply_down}}"><i class='fa fa-arrow-down'></i></a>{{/unless}}

56
app/assets/javascripts/discourse/templates/post.js.handlebars
View File

@ -17,26 +17,11 @@
{{/if}} {{/if}}
</a> </a>
{{/if}} {{/if}}
<div class='topic-meta-data span2'> <div class='topic-avatar span2'>
{{#unless userDeleted}} {{#unless userDeleted}}
<div {{bind-attr class=":contents byTopicCreator:topic-creator :trigger-expansion"}}> <div {{bind-attr class=":contents byTopicCreator:topic-creator :trigger-expansion"}}>
<a class="main-avatar" href='{{unbound usernameUrl}}' {{action showPosterExpansion this}}>{{avatar this imageSize="large"}}</a> <a class="main-avatar" href='{{unbound usernameUrl}}' {{action showPosterExpansion this}}>{{avatar this imageSize="large"}}</a>
<div class="names">
<h3 {{bind-attr class="staff new_user :username"}}><a href='{{unbound usernameUrl}}' {{action showPosterExpansion this}}>{{{breakUp username name}}}</a></h3>
{{#if showName}}
<h3 class="full-name"><a href='{{unbound usernameUrl}}' {{action showPosterExpansion this}}>{{breakUp name}}</a></h3>
{{/if}}
{{#if user_title}}
{{#if primary_group_name}}
<div class="user-title"><a href='/groups/{{unbound primary_group_name}}' class='user-group'>{{unbound user_title}}</a></div>
{{else}}
<div class="user-title" {{action showPosterExpansion this}}>{{unbound user_title}}</div>
{{/if}}
{{/if}}
</div>
</div> </div>
{{else}} {{else}}
<div class="contents"> <div class="contents">
@ -49,14 +34,25 @@
</div> </div>
<div class='topic-body span14'> <div class='topic-body span14'>
<div {{bind-attr class=":select-posts controller.multiSelect::hidden"}}> <div class='topic-meta-data'>
<button {{action toggledSelectedPostReplies this}} {{bind-attr class="view.canSelectReplies::hidden"}}>{{i18n topic.multi_select.select_replies}}</button> <div class="names">
<button {{action toggledSelectedPost this}} class="select-post">{{view.selectPostText}}</button> <h3 {{bind-attr class="staff new_user :username"}}><a href='{{unbound usernameUrl}}' {{action showPosterExpansion this}}>{{{breakUp username name}}}</a></h3>
</div>
<div {{bind-attr class="showUserReplyTab:avoid-tab view.repliesShown::bottom-round :contents :regular view.extraClass"}}> {{#if showName}}
{{#unless controller.multiSelect}} <h3 class="full-name"><a href='{{unbound usernameUrl}}' {{action showPosterExpansion this}}>{{breakUp name}}</a></h3>
<div class='topic-meta-data-inside'> {{/if}}
{{#if user_title}}
{{#if primary_group_name}}
<div class="user-title"><a href='/groups/{{unbound primary_group_name}}' class='user-group'>{{unbound user_title}}</a></div>
{{else}}
<div class="user-title" {{action showPosterExpansion this}}>{{unbound user_title}}</div>
{{/if}}
{{/if}}
</div>
<div class='post-info'>
<a href='#' class='post-date' {{bind-attr data-share-url="shareUrl"}} {{bind-attr data-post-number="post_number"}}>{{unboundAgeWithTooltip created_at}}</a>
</div>
{{#if hasHistory}} {{#if hasHistory}}
<div class='post-info edits'> <div class='post-info edits'>
{{#if can_view_edit_history}} {{#if can_view_edit_history}}
@ -72,10 +68,16 @@
{{/if}} {{/if}}
</div> </div>
{{/if}} {{/if}}
<div class='post-info'> </div>
<a href='#' class='post-date' {{bind-attr data-share-url="shareUrl"}} {{bind-attr data-post-number="post_number"}}>{{unboundAgeWithTooltip created_at}}</a>
</div> <div {{bind-attr class=":select-posts controller.multiSelect::hidden"}}>
</div> <button {{action toggledSelectedPostReplies this}} {{bind-attr class="view.canSelectReplies::hidden"}}>{{i18n topic.multi_select.select_replies}}</button>
<button {{action toggledSelectedPost this}} class="select-post">{{view.selectPostText}}</button>
</div>
<div {{bind-attr class="showUserReplyTab:avoid-tab view.repliesShown::bottom-round :contents :regular view.extraClass"}}>
{{#unless controller.multiSelect}}
{{/unless}} {{/unless}}
<div class='cooked'>{{{cooked}}}</div> <div class='cooked'>{{{cooked}}}</div>
{{#if view.showExpandButton}} {{#if view.showExpandButton}}

2
app/assets/javascripts/discourse/views/poster_expansion_view.js
View File

@ -20,7 +20,7 @@ Discourse.PosterExpansionView = Discourse.View.extend({
Em.run.schedule('afterRender', function() { Em.run.schedule('afterRender', function() {
if (post) { if (post) {
var $post = $('#' + post.get('postElementId')), var $post = $('#' + post.get('postElementId')),
$avatar = $('.topic-meta-data img.avatar', $post), $avatar = $('.topic-avatar img.avatar', $post),
position = $avatar.offset(); position = $avatar.offset();
if (position) { if (position) {

12
app/assets/stylesheets/desktop/poster_expansion.scss
View File

@ -50,6 +50,13 @@
} }
} }
.metadata {
float: right;
max-width: 180px;
text-align: right;
margin-top: 5px;
}
.bottom { .bottom {
clear: both; clear: both;
padding-top: 10px; padding-top: 10px;
@ -85,10 +92,7 @@
float: left; float: left;
} }
.metadata {
float: right;
max-width: 180px;
}
h2 { h2 {
line-height: 12px; line-height: 12px;

160
app/assets/stylesheets/desktop/topic-post.scss
View File

@ -49,12 +49,11 @@ h1 .topic-statuses .topic-status i {
border-top: none; border-top: none;
} }
.reply-to-tab { .reply-to-tab {
position: absolute; position: absolute;
right: 330px; right: 330px;
z-index: 400; z-index: 400;
padding: 10px 6px 5px; padding: 13px 6px 5px;
border-top: 1px solid scale-color($primary, $lightness: 90%); border-top: 1px solid scale-color($primary, $lightness: 90%);
font-size: 12px; font-size: 12px;
color: scale-color($primary, $lightness: 50%); color: scale-color($primary, $lightness: 50%);
@ -66,14 +65,6 @@ h1 .topic-statuses .topic-status i {
} }
} }
.topic-meta-data-inside {
float: right;
margin-top: -30px;
float: right;
font-size: 12px;
}
.gutter { .gutter {
.reply-new { .reply-new {
.discourse-no-touch & { .discourse-no-touch & {
@ -218,7 +209,6 @@ nav.post-controls {
h1, h2, h3 {margin: 10px 0;} h1, h2, h3 {margin: 10px 0;}
a.mention {background: scale-color($primary, $lightness: 90%);} a.mention {background: scale-color($primary, $lightness: 90%);}
&.bottom { &.bottom {
.topic-meta-data {padding-left: 13px;}
&.hidden {display: block; opacity: 0; } &.hidden {display: block; opacity: 0; }
} }
@ -227,7 +217,6 @@ nav.post-controls {
margin-left: 66px; margin-left: 66px;
max-width: 713px; max-width: 713px;
.topic-meta-data {padding-left: 13px;}
@include medium-width { @include medium-width {
margin-left: 59px; margin-left: 59px;
@ -239,9 +228,12 @@ nav.post-controls {
} }
} }
&.top.span14 {padding-left: 0;} &.top.span14 {padding-left: 0;}
.topic-body, .topic-meta-data {border: none;} .topic-body, .topic-avatar {border: none;}
.row {border-top: 1px solid scale-color($primary, $lightness: 90%); padding-top: 7px;} .topic-avatar {padding-left: 15px;}
.reply:first-of-type .row {border-top: none;} .post-date {color: scale-color($primary, $lightness: 50%);}
.fa-arrow-up {margin-left: 5px;}
.row {border-top: 1px solid scale-color($primary, $lightness: 90%); padding-top: 7px;}
.reply:first-of-type .row {border-top: none;}
background: scale-color($primary, $lightness: 95%); background: scale-color($primary, $lightness: 95%);
.quote .title, blockquote, .onebox, .onebox-result { .quote .title, blockquote, .onebox, .onebox-result {
@ -252,28 +244,16 @@ nav.post-controls {
&.bottom { margin-top: -11px;} &.bottom { margin-top: -11px;}
.topic-meta-data { .topic-meta-data {
position: relative; position: relative;
.avatar {
margin-top: -10px;
}
} }
.topic-meta-data h5 { .topic-meta-data h5 {
position: absolute; position: absolute;
left: 70px;
top: 4px;
z-index: 1; z-index: 1;
font-size: 13px; font-size: 13px;
width: 300px;
a { a {
font-weight: bold; font-weight: bold;
color: scale-color($primary, $lightness: 30%); color: scale-color($primary, $lightness: 30%);
} }
} }
.topic-meta-data-inside {
margin: -15px 0 0 0;
color: scale-color($primary, $lightness: 50%);
a {color: scale-color($primary, $lightness: 50%);}
}
.topic-meta-data {padding-top: 20px;}
.arrow {color: scale-color($primary, $lightness: 50%);} .arrow {color: scale-color($primary, $lightness: 50%);}
} }
@ -382,7 +362,7 @@ a.star {
.number, i { .number, i {
color: $primary; color: $primary;
} }
.avatar + a { .avatar a {
float: left; float: left;
} }
} }
@ -557,77 +537,6 @@ iframe {
} }
.topic-meta-data {
margin-bottom: 10px;
border-top: 1px solid scale-color($primary, $lightness: 90%);
padding-top: 30px;
width: 92px;
.names {
position: absolute;
left: 66px;
top: 10px;
width: 400px;
z-index: 1;
@include medium-width {
left: 60px;
}
@include small-width {
left: 55px;
}
}
.names, .user-title {
display: inline;
font-size: 13px;
}
.main-avatar img {
width: 45px;
height: 45px;
position: absolute;
top: 16px;
}
.contents {
a {
font-weight: normal;
line-height: 1.3;
}
.username a {
font-weight: bold;
color: scale-color($primary, $lightness: 20%);
font-size: 13px;
}
.new-user a {
color: scale-color($primary, $lightness: 60%);
}
a.user-group {
color: scale-color($primary, $lightness: 50%);
width: 100%;
}
h3 a {
width: auto;
}
h3.full-name {
font-weight: normal;
font-size: 12px;
margin-top: 2px;
a {color: $primary;}
}
}
h3 { display: inline; }
}
.open >.dropdown-menu { .open >.dropdown-menu {
display: block; display: block;
} }
@ -652,7 +561,6 @@ iframe {
.contents .cooked { .contents .cooked {
margin-right: 30px; margin-right: 30px;
margin-top: 20px;
word-wrap: break-word; word-wrap: break-word;
h1, h2, h3, h4, h5, h6 { margin: 30px 0 10px; } h1, h2, h3, h4, h5, h6 { margin: 30px 0 10px; }
@ -729,16 +637,6 @@ iframe {
background-color: scale-color($highlight, $lightness: 60%); background-color: scale-color($highlight, $lightness: 60%);
} }
.topic-meta-data {
h3 {
font-size: 15px;
margin-top: 5px;
overflow: hidden;
line-height: 1.2em;
}
}
.user-title { .user-title {
margin-top: 5px; margin-top: 5px;
color: $primary; color: $primary;
@ -805,7 +703,7 @@ blockquote { /* solo quotes */
.gutter { .gutter {
float: left; float: left;
margin-top: 12px; margin-top: 15px;
ul {margin: 0;} ul {margin: 0;}
padding-left: 10px; padding-left: 10px;
@ -837,7 +735,7 @@ blockquote { /* solo quotes */
float: left; float: left;
position: relative; position: relative;
border-top: 1px solid scale-color($primary, $lightness: 90%); border-top: 1px solid scale-color($primary, $lightness: 90%);
padding: 20px 0 15px 0; padding: 12px 0 15px 0;
&.highlighted { &.highlighted {
background-color: scale-color($tertiary, $lightness: 85%); background-color: scale-color($tertiary, $lightness: 85%);
} }
@ -845,6 +743,10 @@ blockquote { /* solo quotes */
max-width: 100%; max-width: 100%;
} }
} }
.topic-avatar {
border-top: 1px solid scale-color($primary, $lightness: 90%);
padding-top: 16px;
}
.bottom-round.contents.regular { .bottom-round.contents.regular {
-webkit-transition: background-color .25s linear; -webkit-transition: background-color .25s linear;
@ -1042,7 +944,6 @@ blockquote { /* solo quotes */
} }
article.boxed { article.boxed {
position: relative; position: relative;
line-height: 21px;
.select-posts { .select-posts {
position: absolute; position: absolute;
@ -1091,3 +992,36 @@ a.attachment:before {
.private_message .gutter:before { .private_message .gutter:before {
content: "\f0e0"; content: "\f0e0";
} }
.names {
float: left;
.username {
a {
font-size: 13px;
color: scale-color($primary, $lightness: 20%);
}
}
}
.topic-meta-data {
margin-bottom: 10px;
&:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.post-info {
display: inline-block;
float: right;
font-size: 12px;
margin-top: 1px;
a {color: scale-color($primary, $lightness: 50%);}
}
}

9
app/assets/stylesheets/desktop/topic.scss
View File

@ -1,8 +1,3 @@
.post-info a {
color: scale-color($primary, $lightness: 60%);
}
.post-actions { .post-actions {
@include unselectable; @include unselectable;
clear: both; clear: both;
@ -18,10 +13,6 @@
margin-top: 20px; margin-top: 20px;
} }
.post-info {
display: inline-block;
}
.edits {margin-right: 5px;} .edits {margin-right: 5px;}
#topic-title { #topic-title {

10
app/assets/stylesheets/mobile/discourse.scss
View File

@ -30,21 +30,20 @@ body {
} }
#main { #main {
.fa-star.starred { .fa-star.starred {
color: $highlight; color: $danger;
} }
a.star { a.star {
display: inline-block; display: inline-block;
font-size: 15px; font-size: 15px;
line-height: 1; line-height: 1;
color: $primary; color: scale-color($primary, $lightness: 75%);
margin-right: 5px; margin-right: 3px;
&:before { &:before {
font-family: "FontAwesome"; font-family: "FontAwesome";
content: "\f005"; content: "\f005";
} }
&.starred { &.starred {
color: #fe1; color: $danger;
text-shadow: 0 0 3px rgba($primary, 0.5);
@include hover { @include hover {
opacity: 1; opacity: 1;
&:before { &:before {
@ -104,7 +103,6 @@ blockquote {
margin: 0; margin: 0;
padding: 0; padding: 0;
.topic-status { .topic-status {
padding: 5px 2px 0 0;
margin: 0; margin: 0;
display: inline-block; display: inline-block;
i { i {

4
app/assets/stylesheets/mobile/header.scss
View File

@ -85,8 +85,8 @@
position: relative; position: relative;
color: scale-color($primary, $lightness: 75%); color: scale-color($primary, $lightness: 75%);
background-color: $secondary; background-color: $secondary;
border: 1px solid scale-color($primary, $lightness: 90%);
cursor: default; cursor: default;
@include box-shadow((6px 0 6px -6px rgba($primary, 0.2), -6px 0 6px -6px rgba($primary, 0.2), inset 0 13px 13px -13px rgba($primary, 0.1)));
&:after { &:after {
display: block; display: block;
position: absolute; position: absolute;
@ -96,7 +96,7 @@
width: 100%; width: 100%;
height: 0; height: 0;
content: ""; content: "";
border-top: 1px solid scale-color($primary, $lightness: 90%); border-top: 1px solid $secondary;
} }
} }
[class^="fa fa-"] { [class^="fa fa-"] {

22
app/assets/stylesheets/mobile/topic-list.scss
View File

@ -69,6 +69,7 @@
line-height: 1.25; line-height: 1.25;
text-align: left; text-align: left;
vertical-align: middle; vertical-align: middle;
color: scale-color($primary, $lightness: 50%);
&:first-of-type { &:first-of-type {
padding-left: 5px; padding-left: 5px;
} }
@ -88,12 +89,12 @@
} }
} }
td { td {
color: $primary;
font-size: 14px; font-size: 14px;
} }
.main-link { .main-link {
font-size: 16px; font-size: 16px;
a {color: $primary;}
a:visited {color: scale-color($primary, $lightness: 50%);}
i.score { i.score {
color: $success; color: $success;
cursor: pointer; cursor: pointer;
@ -311,7 +312,7 @@
float: left; float: left;
} }
.category-dropdown-button { .category-dropdown-button {
padding: 4px 10px 3px 8px; padding: 4px 10px 4px 8px;
border-left: 1px solid rgba(0, 0, 0, 0.15); border-left: 1px solid rgba(0, 0, 0, 0.15);
font-size: 16px; font-size: 16px;
width: 10px; width: 10px;
@ -393,7 +394,7 @@ span.posted {
margin: 1px 0 0; margin: 1px 0 0;
list-style: none; list-style: none;
background-color: $secondary; background-color: $secondary;
border: 1px solid scale-color($primary, $lightness: 90%);; border: 1px solid scale-color($primary, $lightness: 90%);
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 5px; border-radius: 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
@ -413,9 +414,9 @@ span.posted {
.dropdown-menu li > a:hover, .dropdown-menu li > a:hover,
.dropdown-menu .active > a, .dropdown-menu .active > a,
.dropdown-menu .active > a:hover { .dropdown-menu .active > a:hover {
color: $secondary; color: $tertiary;
text-decoration: none; text-decoration: none;
background-color: $tertiary; background-color: scale-color($tertiary, $lightness: 75%);
} }
.open > .dropdown-menu { .open > .dropdown-menu {
display: block; display: block;
@ -434,7 +435,7 @@ ol.category-breadcrumb {
display: block; display: block;
float: left; float: left;
list-style: none; list-style: none;
margin: 0 10px 0 0; margin: 5px 10px 0 0;
padding: 0; padding: 0;
li { li {
@ -449,7 +450,6 @@ ol.category-breadcrumb {
position: absolute; position: absolute;
border: 1px solid scale-color($primary, $lightness: 90%);; border: 1px solid scale-color($primary, $lightness: 90%);;
background-color: $secondary; background-color: $secondary;
width: 200px;
height: 200px; height: 200px;
padding: 8px 5px 0 7px; padding: 8px 5px 0 7px;
z-index: 100; z-index: 100;
@ -466,3 +466,9 @@ ol.category-breadcrumb {
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
.top-lists {margin-left: 15px;
#topic-list-bottom {
margin: 20px 0 0 0;
}
}

28
app/assets/stylesheets/mobile/topic-post.scss
View File

@ -102,8 +102,8 @@ a.reply-to-tab {
a.star { a.star {
display: inline-block; display: inline-block;
float: left; float: left;
font-size: 1.4em !important; font-size: 1.3em;
margin-top: 3px; margin-top: 4px;
} }
#main a.star.starred { #main a.star.starred {
@ -222,7 +222,7 @@ a.star {
border-left: 1px solid scale-color($primary, $lightness: 95%);; border-left: 1px solid scale-color($primary, $lightness: 95%);;
padding: 0 23px; padding: 0 23px;
color: $primary; color: $primary;
background: scale-color($primary, $lightness: 75%); background: scale-color($primary, $lightness: 90%);
&:hover { &:hover {
background: scale-color($primary, $lightness: 75%); background: scale-color($primary, $lightness: 75%);
color: $primary; color: $primary;
@ -258,6 +258,7 @@ a.star {
a.badge-category, a.badge-category-parent { a.badge-category, a.badge-category-parent {
font-size: 10px; font-size: 10px;
vertical-align: top;
} }
.title { .title {
@ -417,6 +418,7 @@ background-color: scale-color($danger, $lightness: 75%);
background-color: lighten(yellow, 35%); background-color: lighten(yellow, 35%);
} }
.username a { color: scale-color($primary, $lightness: 30%); }
.new-user a { .new-user a {
color: scale-color($primary, $lightness: 60%); color: scale-color($primary, $lightness: 60%);
} }
@ -480,5 +482,23 @@ blockquote {
} }
.topic-body.highlighted { .topic-body.highlighted {
background-color: scale-color($tertiary, $lightness: 40%); background-color: scale-color($tertiary, $lightness: 75%);
}
.topic-avatar {
width: 100%;
float: left;
position: relative;
z-index: 2;
}
.topic-meta-data {
float: left;
position: absolute;
z-index: 1;
width: 100%;
.names {margin: 5px 0 0 70px; float: left;}
.post-info {float: right; font-size: 12px; margin: 21px 10px 0 0;
.edits {margin-right: 5px;}
}
} }

14
app/assets/stylesheets/mobile/topic.scss
View File

@ -1,12 +1,3 @@
.topic-meta-data {
width: 100%;
h3 a {margin-left: 10px;}
a {float: left;
}
}
.post-info a {color: #aaa;} .post-info a {color: #aaa;}
.topic-meta-data-inside { .topic-meta-data-inside {
@ -31,6 +22,7 @@
font-size: 1.5em; font-size: 1.5em;
margin:0; margin:0;
a.edit-topic {font-size: 15px;} a.edit-topic {font-size: 15px;}
a {color: $primary;}
} }
.private-message-glyph { display: none; } .private-message-glyph { display: none; }
} }
@ -74,7 +66,7 @@
display: none; display: none;
} }
border: none; border: none;
background-color: scale-color($secondary, $lightness: 75%); background-color: scale-color($primary, $lightness: 90%);
color: $primary; color: $primary;
width: 130px; width: 130px;
height: 34px; height: 34px;
@ -124,7 +116,7 @@
top: 0; top: 0;
bottom: 0; bottom: 0;
width: 0; width: 0;
border-right: 1px solid scale-color($secondary, $lightness: 90%); border-right: 1px solid scale-color($success, $lightness: 50%);
background-color: scale-color($success, $lightness: 50%); background-color: scale-color($success, $lightness: 50%);
} }
} }