-
{card.get('title')}
-
{card.get('description').substring(0, 50)}
-
{getHostname(card.get('url'))}
+
+
{card.get('title')}
+
{card.get('description').substring(0, 50)}
+
{getHostname(card.get('url'))}
);
diff --git a/app/assets/javascripts/components/features/status/components/detailed_status.jsx b/app/assets/javascripts/components/features/status/components/detailed_status.jsx
index 6080c9ccd..8a7c0c5d5 100644
--- a/app/assets/javascripts/components/features/status/components/detailed_status.jsx
+++ b/app/assets/javascripts/components/features/status/components/detailed_status.jsx
@@ -62,7 +62,7 @@ const DetailedStatus = React.createClass({
{media}
-
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index faad9ee58..c60ca0291 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -35,7 +35,7 @@
.column-icon {
color: $color3;
background: lighten($color1, 4%);
-
+
&:hover {
color: lighten($color3, 7%);
}
@@ -188,7 +188,7 @@
a.status__content__spoiler-link {
display: inline-block;
border-radius: 2px;
- color: lighten($color1, 6%);
+ color: lighten($color1, 8%);
font-weight: 500;
font-size: 11px;
padding: 0px 6px;
@@ -201,7 +201,7 @@ a.status__content__spoiler-link {
padding-left: 68px;
position: relative;
min-height: 48px;
- border-bottom: 1px solid lighten($color1, 6%);
+ border-bottom: 1px solid lighten($color1, 8%);
cursor: default;
.status__relative-time {
@@ -228,7 +228,7 @@ a.status__content__spoiler-link {
.detailed-status {
background: lighten($color1, 4%);
-
+
.status__content {
font-size: 19px;
line-height: 24px;
@@ -240,12 +240,19 @@ a.status__content__spoiler-link {
}
}
+.detailed-status__meta {
+ margin-top: 15px;
+ color: lighten($color1, 26%);
+ font-size: 14px;
+ line-height: 18px;
+}
+
.detailed-status__action-bar {
background: lighten($color1, 4%);
display: flex;
flex-direction: row;
- border-top: 1px solid lighten($color1, 6%);
- border-bottom: 1px solid lighten($color1, 6%);
+ border-top: 1px solid lighten($color1, 8%);
+ border-bottom: 1px solid lighten($color1, 8%);
padding: 10px 0;
}
@@ -260,7 +267,7 @@ a.status__content__spoiler-link {
.account {
padding: 10px;
- border-bottom: 1px solid lighten($color1, 6%);
+ border-bottom: 1px solid lighten($color1, 8%);
.account__display-name {
flex: 1 1 auto;
@@ -302,7 +309,7 @@ a.status__content__spoiler-link {
font-weight: 400;
overflow: hidden;
color: $color3;
-
+
p {
margin-bottom: 20px;
@@ -329,8 +336,8 @@ a.status__content__spoiler-link {
}
.account__action-bar {
- border-top: 1px solid lighten($color1, 6%);
- border-bottom: 1px solid lighten($color1, 6%);
+ border-top: 1px solid lighten($color1, 8%);
+ border-bottom: 1px solid lighten($color1, 8%);
line-height: 36px;
overflow: hidden;
flex: 0 0 auto;
@@ -341,7 +348,7 @@ a.status__content__spoiler-link {
text-decoration: none;
overflow: hidden;
width: 80px;
- border-left: 1px solid lighten($color1, 6%);
+ border-left: 1px solid lighten($color1, 8%);
padding: 10px 5px;
& > span {
@@ -426,6 +433,20 @@ a.status__content__spoiler-link {
}
}
+.notification__message {
+ margin-left: 68px;
+ padding: 8px 0;
+ padding-bottom: 0;
+ cursor: default;
+ color: $color3;
+ font-size: 15px;
+ position: relative;
+
+ .fa {
+ color: $color4;
+ }
+}
+
.notification__display-name {
color: inherit;
text-decoration: none;
@@ -650,7 +671,7 @@ a.status__content__spoiler-link {
.tabs-bar {
display: flex;
- background: lighten($color1, 6%);
+ background: lighten($color1, 8%);
flex: 0 0 auto;
overflow-y: auto;
}
@@ -664,7 +685,7 @@ a.status__content__spoiler-link {
text-align: center;
font-size:12px;
font-weight: 500;
- border-bottom: 2px solid lighten($color1, 6%);
+ border-bottom: 2px solid lighten($color1, 8%);
&.active {
border-bottom: 2px solid $color4;
@@ -854,9 +875,9 @@ a.status__content__spoiler-link {
}
.column-link {
- background: lighten($color1, 6%);
+ background: lighten($color1, 8%);
color: $color5;
-
+
&:hover {
background: lighten($color1, 11%);
}
@@ -974,11 +995,40 @@ button.active i.fa-retweet {
}
.status-card {
+ display: flex;
+ cursor: pointer;
+ font-size: 14px;
+ border: 1px solid lighten($color1, 8%);
+ border-radius: 4px;
+ color: lighten($color1, 26%);
+ margin-top: 14px;
+ text-decoration: none;
+ overflow: hidden;
+
&:hover {
- background: lighten($color1, 6%);
+ background: lighten($color1, 8%);
}
}
+.status-card__title {
+ display: block;
+ font-weight: 500;
+ margin-bottom: 5px;
+ color: $color3;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.status-card__description {
+ color: $color3;
+}
+
+.status-card__image {
+ flex: 0 0 100px;
+ background: lighten($color1, 8%);
+}
+
.load-more {
display: block;
color: lighten($color1, 26%);
@@ -987,7 +1037,7 @@ button.active i.fa-retweet {
text-decoration: none;
&:hover {
- background: lighten($color1, 6%);
+ background: lighten($color1, 8%);
}
}
@@ -1037,8 +1087,8 @@ button.active i.fa-retweet {
}
.collapsable {
- color: $color5;
- background: lighten($color1, 6%);
+ color: $color5;
+ background: lighten($color1, 8%);
}
.media-spoiler {
@@ -1047,17 +1097,17 @@ button.active i.fa-retweet {
}
.modal-container--preloader {
- background: lighten($color1, 6%);
+ background: lighten($color1, 8%);
}
.account--panel {
background: lighten($color1, 4%);
- border-top: 1px solid lighten($color1, 6%);
- border-bottom: 1px solid lighten($color1, 6%);
+ border-top: 1px solid lighten($color1, 8%);
+ border-bottom: 1px solid lighten($color1, 8%);
}
.column-settings--outer {
- background: lighten($color1, 6%);
+ background: lighten($color1, 8%);
}
.column-settings--section {
diff --git a/app/assets/stylesheets/stream_entries.scss b/app/assets/stylesheets/stream_entries.scss
index 595275527..d427c1466 100644
--- a/app/assets/stylesheets/stream_entries.scss
+++ b/app/assets/stylesheets/stream_entries.scss
@@ -5,24 +5,24 @@
.entry {
background: lighten($color2, 8%);
- &, .detailed-status.light {
+ .detailed-status.light, .status.light {
border-bottom: 1px solid $color2;
}
&:last-child {
- &, .detailed-status.light {
+ &, .detailed-status.light, .status.light {
border-bottom: 0;
border-radius: 0 0 4px 4px;
}
}
&:first-child {
- &, .detailed-status.light {
+ &, .detailed-status.light, .status.light {
border-radius: 4px 4px 0 0;
}
&:last-child {
- &, .detailed-status.light {
+ &, .detailed-status.light, .status.light {
border-radius: 4px;
}
}