tykayn
/
mastodon
mirror of https://framagit.org/tykayn/mastodon.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

style for messages, show answer count on detailed status

This commit is contained in:
tykayn 2020-11-26 12:43:08 +01:00 committed by Baptiste Lemoine
parent 37b400069b
commit be8a30aed6
8 changed files with 160 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/mastodon/components/status_action_bar.js
View File

@ -373,7 +373,7 @@ class StatusActionBar extends ImmutablePureComponent {
); );
let countAnswers = status.get('replies_count') * 1; let countAnswers = status.get('replies_count') * 1;
const enableSoMuchAnswersWOW = true; const enableSoMuchAnswersWOW = false;
if (enableSoMuchAnswersWOW) { if (enableSoMuchAnswersWOW) {
countAnswers += Math.floor(Math.random() * Math.floor(500000)); countAnswers += Math.floor(Math.random() * Math.floor(500000));
} }
@ -381,7 +381,7 @@ class StatusActionBar extends ImmutablePureComponent {
return ( return (
<div className='status__action-bar'> <div className='status__action-bar'>
<IconButton <IconButton
className='status__action-bar-button' className='status__action-bar-button reply_button'
title={replyTitle} title={replyTitle}
icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon}
onClick={this.handleReplyClick} onClick={this.handleReplyClick}

2
app/javascript/mastodon/features/follow_requests/components/account_authorize.js
View File

@ -35,7 +35,7 @@ class AccountAuthorize extends ImmutablePureComponent {
<Permalink <Permalink
href={account.get('url')} href={account.get('url')}
to={`/accounts/${account.get('id')}`} to={`/accounts/${account.get('id')}`}
className='detailed-status__display-name' className='status__display-name'
> >
<div className='account-authorize__avatar'><Avatar <div className='account-authorize__avatar'><Avatar
account={account} account={account}

8
app/javascript/mastodon/features/status/components/detailed_status.js
View File

@ -16,6 +16,7 @@ import classNames from 'classnames';
import Icon from 'mastodon/components/icon'; import Icon from 'mastodon/components/icon';
import AnimatedNumber from 'mastodon/components/animated_number'; import AnimatedNumber from 'mastodon/components/animated_number';
import PictureInPicturePlaceholder from 'mastodon/components/picture_in_picture_placeholder'; import PictureInPicturePlaceholder from 'mastodon/components/picture_in_picture_placeholder';
import IconButton from '../../../components/icon_button';
const messages = defineMessages({ const messages = defineMessages({
public_short: { id: 'privacy.public.short', defaultMessage: 'Public' }, public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
@ -249,6 +250,13 @@ class DetailedStatus extends ImmutablePureComponent {
<a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener noreferrer'> <a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener noreferrer'>
<FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' /> <FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />
</a>{visibilityLink}{applicationLink}{reblogLink} · {favouriteLink} </a>{visibilityLink}{applicationLink}{reblogLink} · {favouriteLink}
·
<Icon id='reply' />
<span>
<AnimatedNumber value={status.get('replies_count')} />
</span>
</div> </div>
</div> </div>
</div> </div>

23
app/javascript/styles/bliss/_general_overrides.scss
View File

@ -1,3 +1,5 @@
@import './variables';
.columns-area__panels { .columns-area__panels {
background: url('../images/elephant_ui_plane.svg') no-repeat left bottom fixed, url('../images/logo_cipherbliss.png') no-repeat right bottom fixed; background: url('../images/elephant_ui_plane.svg') no-repeat left bottom fixed, url('../images/logo_cipherbliss.png') no-repeat right bottom fixed;
@ -107,6 +109,27 @@
} }
} }
.status__content,
.status_info,
.status__content__read-more-button,
.display-name{
margin-left: 1em;
}
.status__wrapper, .detailed-status__wrapper{
.status__action-bar{
opacity: 0;
transition: all ease 0.5s;
}
&:hover{
.status__action-bar{
opacity: 1;
transition: all ease 0.2s;
}
}
}
.status__content__read-more-button { .status__content__read-more-button {
.fa{ .fa{
float:left; float:left;

3
app/javascript/styles/bliss/accounts.scss
View File

@ -1,3 +1,4 @@
@import 'variables';
.card { .card {
& > a { & > a {
display: block; display: block;
@ -33,7 +34,7 @@
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
} }
@media screen and (max-width: 600px) { @media screen and (max-width: $no-columns-breakpoint) {
height: 200px; height: 200px;
} }

221
app/javascript/styles/bliss/components.scss
View File

@ -22,7 +22,7 @@
.link-button { .link-button {
display: block; display: block;
font-size: 15px; font-size: 1em;
line-height: 20px; line-height: 20px;
color: $ui-highlight-color; color: $ui-highlight-color;
border: 0; border: 0;
@ -135,7 +135,7 @@
&.button-secondary { &.button-secondary {
color: $darker-text-color; color: $darker-text-color;
background: transparent; background: transparent;
padding: 3px 15px; padding: 3px 1em;
border: 1px solid $ui-primary-color; border: 1px solid $ui-primary-color;
&:active, &:active,
@ -447,7 +447,7 @@
outline: 0; outline: 0;
} }
@media screen and (max-width: 600px) { @media screen and (max-width: $no-columns-breakpoint) {
font-size: 16px; font-size: 16px;
} }
} }
@ -468,7 +468,7 @@
all: unset; all: unset;
} }
@media screen and (max-width: 600px) { @media screen and (max-width: $no-columns-breakpoint) {
height: 100px !important; // prevent auto-resize textarea height: 100px !important; // prevent auto-resize textarea
resize: vertical; resize: vertical;
} }
@ -778,11 +778,10 @@
.status__content--with-action { .status__content--with-action {
cursor: pointer; cursor: pointer;
} }
.status__content, .status__content,
.reply-indicator__content { .reply-indicator__content {
position: relative; position: relative;
font-size: 15px; font-size: 1em;
line-height: 20px; line-height: 20px;
word-wrap: break-word; word-wrap: break-word;
font-weight: 400; font-weight: 400;
@ -926,7 +925,7 @@
.status__content__read-more-button { .status__content__read-more-button {
display: block; display: block;
font-size: 15px; font-size: 1em;
line-height: 20px; line-height: 20px;
color: lighten($ui-highlight-color, 8%); color: lighten($ui-highlight-color, 8%);
border: 0; border: 0;
@ -963,7 +962,7 @@
text-align: center; text-align: center;
line-height: inherit; line-height: inherit;
margin: 0; margin: 0;
padding: 15px; padding: 1em;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
clear: both; clear: both;
@ -994,7 +993,6 @@
} }
} }
} }
.status { .status {
padding: 8px 10px; padding: 8px 10px;
padding-left: 68px; padding-left: 68px;
@ -1003,6 +1001,7 @@
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid lighten($ui-base-color, 8%);
cursor: auto; cursor: auto;
@supports (-ms-overflow-style: -ms-autohiding-scrollbar) { @supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
// Add margin to avoid Edge auto-hiding scrollbar appearing over content. // Add margin to avoid Edge auto-hiding scrollbar appearing over content.
// On Edge 16 this is 16px and Edge <=15 it's 12px, so aim for 16px. // On Edge 16 this is 16px and Edge <=15 it's 12px, so aim for 16px.
@ -1051,7 +1050,6 @@
.status__content { .status__content {
color: $inverted-text-color; color: $inverted-text-color;
a { a {
color: $highlight-text-color; color: $highlight-text-color;
} }
@ -1102,7 +1100,7 @@
} }
.status__info { .status__info {
font-size: 15px; font-size: 1em;
} }
.status-check-box { .status-check-box {
@ -1165,7 +1163,7 @@
.status__action-bar { .status__action-bar {
align-items: center; align-items: center;
display: flex; display: flex;
margin-left: 2.4em; height: 3.5em;
&__counter { &__counter {
display: inline-flex; display: inline-flex;
@ -1187,15 +1185,19 @@
} }
.status__action-bar-button { .status__action-bar-button {
margin-right: 18px; padding-right: 0.5em;
padding-left: 0.5em;
//&.reply_button{
width : 20% !important;
//}
} }
.status__action-bar-dropdown { .dropdown-menu {
height: 23.15px; height: 23.1em;
width: 23.15px; width: 23.1em;
} }
.detailed-status__action-bar-dropdown { .detailed-status__action-bar-dropdown , .status__action-bar-dropdown {
flex: 1 1 auto; flex: 1 1 auto;
display: flex; display: flex;
align-items: center; align-items: center;
@ -1242,7 +1244,7 @@
} }
.detailed-status__meta { .detailed-status__meta {
margin-top: 15px; margin-top: 1em;
color: $dark-text-color; color: $dark-text-color;
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
@ -1372,7 +1374,7 @@
color: $primary-text-color; color: $primary-text-color;
text-shadow: 1px 1px 2px $base-shadow-color; text-shadow: 1px 1px 2px $base-shadow-color;
font-weight: 700; font-weight: 700;
font-size: 15px; font-size: 1em;
} }
} }
} }
@ -1505,7 +1507,7 @@ a .account__avatar {
strong { strong {
display: block; display: block;
font-size: 15px; font-size: 1em;
font-weight: 500; font-weight: 500;
color: $primary-text-color; color: $primary-text-color;
@ -1522,7 +1524,7 @@ a .account__avatar {
.detailed-status__display-name { .detailed-status__display-name {
display: block; display: block;
margin-bottom: 15px; margin-bottom: 1em;
overflow: hidden; overflow: hidden;
} }
} }
@ -1575,14 +1577,15 @@ a.account__display-name {
} }
.detailed-status .button.logo-button { .detailed-status .button.logo-button {
margin-bottom: 15px; margin-bottom: 1em;
} }
.detailed-status__display-name { .detailed-status__display-name {
color: $secondary-text-color; color: $secondary-text-color;
display: block; display: block;
line-height: 24px; line-height: 24px;
margin-bottom: 15px; margin-bottom: 1em;
margin-left: -3em;
overflow: hidden; overflow: hidden;
strong, strong,
@ -1651,7 +1654,7 @@ a.account__display-name {
padding: 8px 0 0; padding: 8px 0 0;
cursor: default; cursor: default;
color: $darker-text-color; color: $darker-text-color;
font-size: 15px; font-size: 1em;
line-height: 22px; line-height: 22px;
position: relative; position: relative;
@ -1854,7 +1857,7 @@ a.account__display-name {
background: $ui-secondary-color; background: $ui-secondary-color;
padding: 4px 0; padding: 4px 0;
border-radius: 4px; border-radius: 4px;
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); box-shadow: 2px 4px 1em rgba($base-shadow-color, 0.4);
z-index: 9999; z-index: 9999;
ul { ul {
@ -1950,7 +1953,7 @@ a.account__display-name {
background: $ui-secondary-color; background: $ui-secondary-color;
padding: 4px 0; padding: 4px 0;
border-radius: 4px; border-radius: 4px;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.4); box-shadow: 0 0 1em rgba($base-shadow-color, 0.4);
min-width: 140px; min-width: 140px;
position: relative; position: relative;
} }
@ -2035,7 +2038,7 @@ a.account__display-name {
&__main { &__main {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 600px; max-width: $main-col-size-max;
flex: 0 0 auto; flex: 0 0 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -2114,7 +2117,7 @@ a.account__display-name {
.drawer__tab { .drawer__tab {
display: block; display: block;
flex: 1 1 auto; flex: 1 1 auto;
padding: 15px 5px 13px; padding: 1em 5px 13px;
color: $darker-text-color; color: $darker-text-color;
text-decoration: none; text-decoration: none;
text-align: center; text-align: center;
@ -2169,7 +2172,7 @@ a.account__display-name {
.tabs-bar__link { .tabs-bar__link {
display: block; display: block;
flex: 1 1 auto; flex: 1 1 auto;
padding: 15px 10px; padding: 1em 10px;
padding-bottom: 13px; padding-bottom: 13px;
color: $primary-text-color; color: $primary-text-color;
text-decoration: none; text-decoration: none;
@ -2205,7 +2208,7 @@ a.account__display-name {
} }
} }
@media screen and (min-width: 600px) { @media screen and (min-width: $no-columns-breakpoint) {
.tabs-bar__link { .tabs-bar__link {
span { span {
display: inline; display: inline;
@ -2251,12 +2254,12 @@ a.account__display-name {
.search__input { .search__input {
line-height: 18px; line-height: 18px;
font-size: 16px; font-size: 16px;
padding: 15px; padding: 1em;
padding-right: 30px; padding-right: 30px;
} }
.search__icon .fa { .search__icon .fa {
top: 15px; top: 1em;
} }
.scrollable { .scrollable {
@ -2274,12 +2277,12 @@ a.account__display-name {
@media screen and (min-width: 630px) { @media screen and (min-width: 630px) {
.detailed-status { .detailed-status {
padding: 15px; padding: 1em 1em 1em 5em;
.media-gallery, .media-gallery,
.video-player, .video-player,
.audio-player { .audio-player {
margin-top: 15px; margin-top: 1em;
} }
} }
@ -2289,29 +2292,29 @@ a.account__display-name {
.navigation-bar, .navigation-bar,
.compose-form { .compose-form {
padding: 15px; padding: 1em;
} }
.compose-form .compose-form__publish .compose-form__publish-button-wrapper { .compose-form .compose-form__publish .compose-form__publish-button-wrapper {
padding-top: 15px; padding-top: 1em;
} }
.status { .status{
padding: 15px 15px 15px (48px + 15px * 2); padding: 1em 1em 1em 5em;
min-height: 48px + 2px; min-height: 5em;
&__avatar { &__avatar {
left: 15px; left: 1em;
top: 17px; top: 1.25em;
} }
&__content { &__content {
padding-top: 5px; padding-top: 1em;
} }
&__prepend { &__prepend {
margin-left: 48px + 15px * 2; margin-left: calc(48px + 2em);
padding-top: 15px; padding-top: 1em;
} }
&__prepend-icon-wrapper { &__prepend-icon-wrapper {
@ -2327,7 +2330,7 @@ a.account__display-name {
} }
.account { .account {
padding: 15px 10px; padding: 1em 10px;
&__header__bio { &__header__bio {
margin: 0 -10px; margin: 0 -10px;
@ -2336,8 +2339,8 @@ a.account__display-name {
.notification { .notification {
&__message { &__message {
margin-left: 48px + 15px * 2; margin-left: calc(48px + 1em * 2);
padding-top: 15px; padding-top: 1em;
} }
&__favourite-icon-wrapper { &__favourite-icon-wrapper {
@ -2354,7 +2357,7 @@ a.account__display-name {
.account__avatar-wrapper { .account__avatar-wrapper {
margin-left: 17px; margin-left: 17px;
margin-right: 15px; margin-right: 1em;
} }
} }
} }
@ -2399,13 +2402,13 @@ a.account__display-name {
} }
} }
@media screen and (max-width: 600px + (285px * 1) + (10px * 1)) { @media screen and (max-width: $no-columns-breakpoint + (285px * 1) + (10px * 1)) {
.columns-area__panels__pane--compositional { .columns-area__panels__pane--compositional {
display: none; display: none;
} }
} }
@media screen and (min-width: 600px + (285px * 1) + (10px * 1)) { @media screen and (min-width: $no-columns-breakpoint + (285px * 1) + (10px * 1)) {
.floating-action-button, .floating-action-button,
.tabs-bar__link.optional { .tabs-bar__link.optional {
display: none; display: none;
@ -2416,13 +2419,13 @@ a.account__display-name {
} }
} }
@media screen and (max-width: 600px + (285px * 2) + (10px * 2)) { @media screen and (max-width: $no-columns-breakpoint + (285px * 2) + (10px * 2)) {
.columns-area__panels__pane--navigational { .columns-area__panels__pane--navigational {
display: none; display: none;
} }
} }
@media screen and (min-width: 600px + (285px * 2) + (10px * 2)) { @media screen and (min-width: $no-columns-breakpoint + (285px * 2) + (10px * 2)) {
.tabs-bar { .tabs-bar {
display: none; display: none;
} }
@ -2637,7 +2640,7 @@ a.account__display-name {
line-height: inherit; line-height: inherit;
border: 0; border: 0;
text-align: unset; text-align: unset;
padding: 15px; padding: 1em;
margin: 0; margin: 0;
z-index: 3; z-index: 3;
outline: 0; outline: 0;
@ -2663,7 +2666,7 @@ a.account__display-name {
} }
&:last-child { &:last-child {
padding: 0 15px 0 0; padding: 0 1em 0 0;
} }
} }
@ -2680,7 +2683,7 @@ a.account__display-name {
cursor: pointer; cursor: pointer;
flex: 0 0 auto; flex: 0 0 auto;
font-size: 16px; font-size: 16px;
padding: 15px; padding: 1em;
position: absolute; position: absolute;
right: 0; right: 0;
top: -48px; top: -48px;
@ -2797,7 +2800,7 @@ a.account__display-name {
color: $primary-text-color; color: $primary-text-color;
display: block; display: block;
font-size: 16px; font-size: 16px;
padding: 15px; padding: 1em;
text-decoration: none; text-decoration: none;
&:hover, &:hover,
@ -2989,7 +2992,7 @@ a.account__display-name {
outline: 0; outline: 0;
} }
@media screen and (max-width: 600px) { @media screen and (max-width: $no-columns-breakpoint) {
font-size: 16px; font-size: 16px;
} }
} }
@ -3224,7 +3227,7 @@ a.status-card.compact:hover {
text-align: center; text-align: center;
line-height: inherit; line-height: inherit;
margin: 0; margin: 0;
padding: 15px; padding: 1em;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
clear: both; clear: both;
@ -3242,7 +3245,7 @@ a.status-card.compact:hover {
.timeline-hint { .timeline-hint {
text-align: center; text-align: center;
color: $darker-text-color; color: $darker-text-color;
padding: 15px; padding: 1em;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
cursor: default; cursor: default;
@ -3302,7 +3305,7 @@ a.status-card.compact:hover {
} }
span { span {
font-size: 15px; font-size: 1em;
font-weight: 400; font-weight: 400;
} }
} }
@ -3352,7 +3355,7 @@ a.status-card.compact:hover {
& > button { & > button {
margin: 0; margin: 0;
border: 0; border: 0;
padding: 15px 0 15px 15px; padding: 1em 0 1em 1em;
color: inherit; color: inherit;
background: transparent; background: transparent;
font: inherit; font: inherit;
@ -3399,7 +3402,7 @@ a.status-card.compact:hover {
color: $darker-text-color; color: $darker-text-color;
cursor: pointer; cursor: pointer;
font-size: 16px; font-size: 16px;
padding: 0 15px; padding: 0 1em;
&:hover { &:hover {
color: lighten($darker-text-color, 7%); color: lighten($darker-text-color, 7%);
@ -3446,7 +3449,7 @@ a.status-card.compact:hover {
.column-header__collapsible-inner { .column-header__collapsible-inner {
background: lighten($ui-base-color, 8%); background: lighten($ui-base-color, 8%);
padding: 15px; padding: 1em;
} }
.column-header__setting-btn { .column-header__setting-btn {
@ -3733,7 +3736,7 @@ a.status-card.compact:hover {
.column-settings__outer { .column-settings__outer {
background: lighten($ui-base-color, 8%); background: lighten($ui-base-color, 8%);
padding: 15px; padding: 1em;
} }
.column-settings__section { .column-settings__section {
@ -3746,7 +3749,7 @@ a.status-card.compact:hover {
.column-settings__hashtags { .column-settings__hashtags {
.column-settings__row { .column-settings__row {
margin-bottom: 15px; margin-bottom: 1em;
} }
.column-select { .column-select {
@ -3771,7 +3774,7 @@ a.status-card.compact:hover {
background: lighten($ui-base-color, 4%); background: lighten($ui-base-color, 4%);
} }
@media screen and (max-width: 600px) { @media screen and (max-width: $no-columns-breakpoint) {
font-size: 16px; font-size: 16px;
} }
} }
@ -3848,7 +3851,7 @@ a.status-card.compact:hover {
.column-settings__row { .column-settings__row {
.text-btn { .text-btn {
margin-bottom: 15px; margin-bottom: 1em;
} }
} }
@ -3889,7 +3892,7 @@ a.status-card.compact:hover {
background: $ui-base-color; background: $ui-base-color;
text-align: center; text-align: center;
padding: 20px; padding: 20px;
font-size: 15px; font-size: 1em;
font-weight: 400; font-weight: 400;
cursor: default; cursor: default;
display: flex; display: flex;
@ -4183,7 +4186,7 @@ a.status-card.compact:hover {
.privacy-dropdown__dropdown { .privacy-dropdown__dropdown {
position: absolute; position: absolute;
background: $simple-background-color; background: $simple-background-color;
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); box-shadow: 2px 4px 1em rgba($base-shadow-color, 0.4);
border-radius: 4px; border-radius: 4px;
margin-left: 40px; margin-left: 40px;
overflow: hidden; overflow: hidden;
@ -4284,7 +4287,7 @@ a.status-card.compact:hover {
@include search-input; @include search-input;
display: block; display: block;
padding: 15px; padding: 1em;
padding-right: 30px; padding-right: 30px;
line-height: 18px; line-height: 18px;
font-size: 16px; font-size: 16px;
@ -4307,7 +4310,7 @@ a.status-card.compact:hover {
background: lighten($ui-base-color, 4%); background: lighten($ui-base-color, 4%);
} }
@media screen and (max-width: 600px) { @media screen and (max-width: $no-columns-breakpoint) {
font-size: 16px; font-size: 16px;
} }
} }
@ -4372,7 +4375,7 @@ a.status-card.compact:hover {
.search-results__header { .search-results__header {
color: $dark-text-color; color: $dark-text-color;
background: lighten($ui-base-color, 2%); background: lighten($ui-base-color, 2%);
padding: 15px; padding: 1em;
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
cursor: default; cursor: default;
@ -4391,7 +4394,7 @@ a.status-card.compact:hover {
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid lighten($ui-base-color, 8%);
cursor: default; cursor: default;
display: flex; display: flex;
padding: 15px; padding: 1em;
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
color: $dark-text-color; color: $dark-text-color;
@ -4536,7 +4539,7 @@ a.status-card.compact:hover {
font-size: 24px; font-size: 24px;
height: 20vmax; height: 20vmax;
margin: auto 0; margin: auto 0;
padding: 30px 15px; padding: 30px 1em;
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -4705,8 +4708,8 @@ a.status-card.compact:hover {
.display-case { .display-case {
text-align: center; text-align: center;
font-size: 15px; font-size: 1em;
margin-bottom: 15px; margin-bottom: 1em;
&__label { &__label {
font-weight: 500; font-weight: 500;
@ -4812,7 +4815,7 @@ a.status-card.compact:hover {
} }
.boost-modal__status-header { .boost-modal__status-header {
font-size: 15px; font-size: 1em;
} }
.boost-modal__status-time { .boost-modal__status-time {
@ -5017,7 +5020,7 @@ a.status-card.compact:hover {
color: $inverted-text-color; color: $inverted-text-color;
display: flex; display: flex;
padding: 12px 16px; padding: 12px 16px;
font-size: 15px; font-size: 1em;
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
@ -5114,11 +5117,11 @@ a.status-card.compact:hover {
} }
.report-modal__target { .report-modal__target {
padding: 15px; padding: 1em;
.media-modal__close { .media-modal__close {
top: 14px; top: 14px;
right: 15px; right: 1em;
} }
} }
@ -5377,7 +5380,7 @@ a.status-card.compact:hover {
} }
.video-player__controls { .video-player__controls {
padding: 0 15px; padding: 0 1em;
padding-top: 10px; padding-top: 10px;
background: transparent; background: transparent;
} }
@ -5440,7 +5443,7 @@ a.status-card.compact:hover {
right: 0; right: 0;
box-sizing: border-box; box-sizing: border-box;
background: linear-gradient(0deg, rgba($base-shadow-color, 0.85) 0, rgba($base-shadow-color, 0.45) 60%, transparent); background: linear-gradient(0deg, rgba($base-shadow-color, 0.85) 0, rgba($base-shadow-color, 0.45) 60%, transparent);
padding: 0 15px; padding: 0 1em;
opacity: 0; opacity: 0;
transition: opacity .1s ease; transition: opacity .1s ease;
@ -5800,11 +5803,11 @@ a.status-card.compact:hover {
} }
.display-name { .display-name {
margin-left: 15px; margin-left: 1em;
text-align: left; text-align: left;
strong { strong {
font-size: 15px; font-size: 1em;
color: $primary-text-color; color: $primary-text-color;
font-weight: 500; font-weight: 500;
overflow: hidden; overflow: hidden;
@ -5831,12 +5834,12 @@ a.status-card.compact:hover {
.accounts-table__count { .accounts-table__count {
width: 33.33%; width: 33.33%;
flex: 0 0 auto; flex: 0 0 auto;
padding: 15px 0; padding: 1em 0;
} }
.account__header__content { .account__header__content {
box-sizing: border-box; box-sizing: border-box;
padding: 15px 10px; padding: 1em 10px;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid lighten($ui-base-color, 8%);
width: 100%; width: 100%;
min-height: 18px + 30px; min-height: 18px + 30px;
@ -5903,7 +5906,7 @@ a.status-card.compact:hover {
display: block; display: block;
flex: 1 1 auto; flex: 1 1 auto;
color: $darker-text-color; color: $darker-text-color;
padding: 15px 0; padding: 1em 0;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
text-align: center; text-align: center;
@ -5960,7 +5963,7 @@ a.status-card.compact:hover {
background: $ui-base-color; background: $ui-base-color;
&__column { &__column {
padding: 10px 15px; padding: 10px 1em;
} }
.radio-button { .radio-button {
@ -6148,7 +6151,7 @@ noscript {
padding: 10px; padding: 10px;
.hint { .hint {
margin-bottom: 15px; margin-bottom: 1em;
} }
.embed-modal__html { .embed-modal__html {
@ -6163,7 +6166,7 @@ noscript {
color: $primary-text-color; color: $primary-text-color;
font-size: 14px; font-size: 14px;
margin: 0; margin: 0;
margin-bottom: 15px; margin-bottom: 1em;
border-radius: 4px; border-radius: 4px;
&::-moz-focus-inner { &::-moz-focus-inner {
@ -6180,7 +6183,7 @@ noscript {
background: lighten($ui-base-color, 4%); background: lighten($ui-base-color, 4%);
} }
@media screen and (max-width: 600px) { @media screen and (max-width: $no-columns-breakpoint) {
font-size: 16px; font-size: 16px;
} }
} }
@ -6233,7 +6236,7 @@ noscript {
} }
.column-inline-form { .column-inline-form {
padding: 15px; padding: 1em;
padding-right: 0; padding-right: 0;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
@ -6272,7 +6275,7 @@ noscript {
background: $ui-base-color; background: $ui-base-color;
flex-direction: column; flex-direction: column;
border-radius: 8px; border-radius: 8px;
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); box-shadow: 2px 4px 1em rgba($base-shadow-color, 0.4);
width: 380px; width: 380px;
overflow: hidden; overflow: hidden;
@ -6281,7 +6284,7 @@ noscript {
} }
h4 { h4 {
padding: 15px 0; padding: 1em 0;
background: lighten($ui-base-color, 13%); background: lighten($ui-base-color, 13%);
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
@ -6298,7 +6301,7 @@ noscript {
&.backdrop { &.backdrop {
width: calc(100% - 60px); width: calc(100% - 60px);
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); box-shadow: 2px 4px 1em rgba($base-shadow-color, 0.4);
border-radius: 0 0 0 8px; border-radius: 0 0 0 8px;
} }
} }
@ -6326,7 +6329,7 @@ noscript {
background: $ui-base-color; background: $ui-base-color;
flex-direction: column; flex-direction: column;
border-radius: 8px; border-radius: 8px;
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); box-shadow: 2px 4px 1em rgba($base-shadow-color, 0.4);
width: 380px; width: 380px;
overflow: hidden; overflow: hidden;
@ -6585,7 +6588,7 @@ noscript {
margin: 0 -5px; margin: 0 -5px;
.account__header__content { .account__header__content {
padding: 20px 15px; padding: 20px 1em;
padding-bottom: 5px; padding-bottom: 5px;
color: $primary-text-color; color: $primary-text-color;
@ -6637,7 +6640,7 @@ noscript {
} }
&__account-note { &__account-note {
padding: 15px; padding: 1em;
padding-bottom: 10px; padding-bottom: 10px;
color: $primary-text-color; color: $primary-text-color;
font-size: 14px; font-size: 14px;
@ -6691,7 +6694,7 @@ noscript {
background: lighten($ui-base-color, 2%); background: lighten($ui-base-color, 2%);
border-bottom: 1px solid darken($ui-base-color, 4%); border-bottom: 1px solid darken($ui-base-color, 4%);
font-weight: 500; font-weight: 500;
padding: 15px; padding: 1em;
font-size: 16px; font-size: 16px;
cursor: default; cursor: default;
@ -6704,7 +6707,7 @@ noscript {
&__item { &__item {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 15px; padding: 1em;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid lighten($ui-base-color, 8%);
&:last-child { &:last-child {
@ -6748,7 +6751,7 @@ noscript {
line-height: 36px; line-height: 36px;
font-weight: 500; font-weight: 500;
text-align: right; text-align: right;
padding-right: 15px; padding-right: 1em;
margin-left: 5px; margin-left: 5px;
color: $secondary-text-color; color: $secondary-text-color;
} }
@ -6801,7 +6804,7 @@ noscript {
&__content { &__content {
flex: 1 1 auto; flex: 1 1 auto;
padding: 10px 5px; padding: 10px 5px;
padding-right: 15px; padding-right: 1em;
overflow: hidden; overflow: hidden;
&__info { &__info {
@ -6812,14 +6815,14 @@ noscript {
} }
&__relative-time { &__relative-time {
font-size: 15px; font-size: 1em;
color: $darker-text-color; color: $darker-text-color;
padding-left: 15px; padding-left: 1em;
} }
&__names { &__names {
color: $darker-text-color; color: $darker-text-color;
font-size: 15px; font-size: 1em;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -6889,9 +6892,9 @@ noscript {
&__item { &__item {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
padding: 15px; padding: 1em;
position: relative; position: relative;
font-size: 15px; font-size: 1em;
line-height: 20px; line-height: 20px;
word-wrap: break-word; word-wrap: break-word;
font-weight: 400; font-weight: 400;
@ -6920,7 +6923,7 @@ noscript {
} }
&__pagination { &__pagination {
padding: 15px; padding: 1em;
color: $darker-text-color; color: $darker-text-color;
position: absolute; position: absolute;
bottom: 3px; bottom: 3px;
@ -6940,7 +6943,7 @@ noscript {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
margin-top: 15px; margin-top: 1em;
margin-left: -2px; margin-left: -2px;
width: calc(100% - (90px - 33px)); width: calc(100% - (90px - 33px));

10
app/javascript/styles/bliss/dashboard.scss
View File

@ -1,3 +1,4 @@
@import 'variables';
.dashboard__counters { .dashboard__counters {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -88,4 +89,13 @@
transition: opacity ease 0.1s; transition: opacity ease 0.1s;
} }
} }
.timelines{
a{
display: inline-block;
width : 20%;
}
span{
display: none;
}
}
} }

3
app/javascript/styles/bliss/variables.scss
View File

@ -24,7 +24,8 @@ $media-modal-media-max-width: 100%;
// put margins on top and bottom of image to avoid the screen covered by image. // put margins on top and bottom of image to avoid the screen covered by image.
$media-modal-media-max-height: 80%; $media-modal-media-max-height: 80%;
$no-gap-breakpoint: 415px; $no-gap-breakpoint: 600px;
$main-col-size-max: 800px;
/************************ /************************
END bliss specific variables END bliss specific variables
************************/ ************************/