tykayn/mastodon
1
0
Fork 0
mirror of https://framagit.org/tykayn/mastodon.git synced 2023-08-25 08:33:12 +02:00
Code Issues Projects Releases Wiki Activity

Merge remote-tracking branch 'tk/master' into messaging

Browse Source
This commit is contained in:
Baptiste Lemoine 2019-12-13 16:33:46 +01:00
commit f76462ade2
72 changed files with 28373 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.browserslistrc Normal file
View File

@ -0,0 +1 @@
defaults

7
.gitignore vendored
View File

@ -62,3 +62,10 @@ ubuntu-xenial-16.04-cloudimg-console.log
# Ignore Docker option files
docker-compose.override.yml
/public/packs
/public/packs-test
/node_modules
/yarn-error.log
yarn-debug.log*
.yarn-integrity

2
.ruby-version
View File

@ -1 +1 @@
2.6.5
2.6.4

2
app/assets/javascripts/user_groups.js Normal file
View File

@ -0,0 +1,2 @@
// Place all the behaviors and hooks related to the matching controller here.
// All this logic will automatically be available in application.js.

80
app/assets/stylesheets/scaffold.css Normal file
View File

@ -0,0 +1,80 @@
body {
background-color: #fff;
color: #333;
margin: 33px;
}
body, p, ol, ul, td {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 13px;
line-height: 18px;
}
pre {
background-color: #eee;
padding: 10px;
font-size: 11px;
}
a {
color: #000;
}
a:visited {
color: #666;
}
a:hover {
color: #fff;
background-color: #000;
}
th {
padding-bottom: 5px;
}
td {
padding: 0 5px 7px;
}
div.field,
div.actions {
margin-bottom: 10px;
}
#notice {
color: green;
}
.field_with_errors {
padding: 2px;
background-color: red;
display: table;
}
#error_explanation {
width: 450px;
border: 2px solid red;
padding: 7px 7px 0;
margin-bottom: 20px;
background-color: #f0f0f0;
}
#error_explanation h2 {
text-align: left;
font-weight: bold;
padding: 5px 5px 5px 15px;
font-size: 12px;
margin: -7px -7px 0;
background-color: #c00;
color: #fff;
}
#error_explanation ul li {
font-size: 12px;
list-style: square;
}
label {
display: block;
}

4
app/assets/stylesheets/user_groups.css Normal file
View File

@ -0,0 +1,4 @@
/*
Place all the styles related to the matching controller here.
They will automatically be included in application.css.
*/

58
app/controllers/user_groups_controller.rb Normal file
View File

@ -0,0 +1,58 @@
class UserGroupsController < ApplicationController
before_action :set_user_group, only: [:show, :edit, :update, :destroy]
# GET /user_groups
def index
@user_groups = UserGroup.all
end
# GET /user_groups/1
def show
end
# GET /user_groups/new
def new
@user_group = UserGroup.new
end
# GET /user_groups/1/edit
def edit
end
# POST /user_groups
def create
@user_group = UserGroup.new(user_group_params)
if @user_group.save
redirect_to @user_group, notice: 'User group was successfully created.'
else
render :new
end
end
# PATCH/PUT /user_groups/1
def update
if @user_group.update(user_group_params)
redirect_to @user_group, notice: 'User group was successfully updated.'
else
render :edit
end
end
# DELETE /user_groups/1
def destroy
@user_group.destroy
redirect_to user_groups_url, notice: 'User group was successfully destroyed.'
end
private
# Use callbacks to share common setup or constraints between actions.
def set_user_group
@user_group = UserGroup.find(params[:id])
end
# Only allow a trusted parameter "white list" through.
def user_group_params
params.require(:user_group).permit(:name, :createAt, :visibility, :members)
end
end

2
app/helpers/user_groups_helper.rb Normal file
View File

@ -0,0 +1,2 @@
module UserGroupsHelper
end

6
app/javascript/mastodon/features/compose/components/compose_form.js
View File

@ -88,7 +88,7 @@ class ComposeForm extends ImmutablePureComponent {
const { isSubmitting, isChangingUpload, isUploading, anyMedia } = this.props;
const fulltext = [this.props.spoilerText, countableText(this.props.text)].join('');
if (isSubmitting || isUploading || isChangingUpload || length(fulltext) > 500 || (fulltext.length !== 0 && fulltext.trim().length === 0 && !anyMedia)) {
if (isSubmitting || isUploading || isChangingUpload || length(fulltext) > 7777 || (fulltext.length !== 0 && fulltext.trim().length === 0 && !anyMedia)) {
return;
}
@ -181,7 +181,7 @@ class ComposeForm extends ImmutablePureComponent {
const { intl, onPaste, showSearch, anyMedia } = this.props;
const disabled = this.props.isSubmitting;
const text = [this.props.spoilerText, countableText(this.props.text)].join('');
const disabledButton = disabled || this.props.isUploading || this.props.isChangingUpload || length(text) > 500 || (text.length !== 0 && text.trim().length === 0 && !anyMedia);
const disabledButton = disabled || this.props.isUploading || this.props.isChangingUpload || length(text) > 7777 || (text.length !== 0 && text.trim().length === 0 && !anyMedia);
let publishText = '';
if (this.props.privacy === 'private' || this.props.privacy === 'direct') {
@ -243,7 +243,7 @@ class ComposeForm extends ImmutablePureComponent {
<PrivacyDropdownContainer />
<SpoilerButtonContainer />
</div>
<div className='character-counter__wrapper'><CharacterCounter max={500} text={text} /></div>
<div className='character-counter__wrapper'><CharacterCounter max={7777} text={text} /></div>
</div>
<div className='compose-form__publish'>

29
app/javascript/styles/bliss.scss Normal file
View File

@ -0,0 +1,29 @@
@import 'bliss/variables';
@import 'bliss/mixins';
@import 'bliss/variables';
@import 'fonts/roboto';
@import 'fonts/roboto-mono';
@import 'fonts/montserrat';
@import 'bliss/reset';
@import 'bliss/basics';
@import 'bliss/containers';
@import 'bliss/lists';
@import 'bliss/footer';
@import 'bliss/compact_header';
@import 'bliss/widgets';
@import 'bliss/forms';
@import 'bliss/accounts';
@import 'bliss/statuses';
@import 'bliss/boost';
@import 'bliss/components';
@import 'bliss/polls';
@import 'bliss/introduction';
@import 'bliss/modal';
@import 'bliss/emoji_picker';
@import 'bliss/about';
@import 'bliss/tables';
@import 'bliss/admin';
@import 'bliss/dashboard';
@import 'bliss/rtl';
@import 'bliss/accessibility';

74
app/javascript/styles/bliss/_mixins.scss Normal file
View File

@ -0,0 +1,74 @@
@mixin avatar-radius {
border-radius: 4px;
background: transparent no-repeat;
background-position: 50%;
background-clip: padding-box;
}
@mixin avatar-size($size: 48px) {
width: $size;
height: $size;
background-size: $size $size;
}
@mixin search-input {
outline: 0;
box-sizing: border-box;
width: 100%;
border: 0;
box-shadow: none;
font-family: inherit;
background: $ui-base-color;
color: $darker-text-color;
font-size: 14px;
margin: 0;
&::-moz-focus-inner {
border: 0;
}
&::-moz-focus-inner,
&:focus,
&:active {
outline: 0 !important;
}
&:focus {
background: lighten($ui-base-color, 4%);
}
@media screen and (max-width: 600px) {
font-size: 16px;
}
}
@mixin search-popout {
background: $simple-background-color;
border-radius: 4px;
padding: 10px 14px;
padding-bottom: 14px;
margin-top: 10px;
color: $light-text-color;
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
h4 {
text-transform: uppercase;
color: $light-text-color;
font-size: 13px;
font-weight: 500;
margin-bottom: 10px;
}
li {
padding: 4px 0;
}
ul {
margin-bottom: 10px;
}
em {
font-weight: 500;
color: $inverted-text-color;
}
}

856
app/javascript/styles/bliss/about.scss Normal file
View File

@ -0,0 +1,856 @@
$maximum-width: 1235px;
$fluid-breakpoint: $maximum-width + 20px;
$column-breakpoint: 700px;
$small-breakpoint: 960px;
.container {
box-sizing: border-box;
max-width: $maximum-width;
margin: 0 auto;
position: relative;
@media screen and (max-width: $fluid-breakpoint) {
width: 100%;
padding: 0 10px;
}
}
.rich-formatting {
font-family: $font-sans-serif, sans-serif;
font-size: 16px;
font-weight: 400;
font-size: 16px;
line-height: 30px;
color: $darker-text-color;
padding-right: 10px;
a {
color: $highlight-text-color;
text-decoration: underline;
}
p,
li {
font-family: $font-sans-serif, sans-serif;
font-size: 16px;
font-weight: 400;
font-size: 16px;
line-height: 30px;
margin-bottom: 12px;
color: $darker-text-color;
a {
color: $highlight-text-color;
text-decoration: underline;
}
&:last-child {
margin-bottom: 0;
}
}
strong,
em {
font-weight: 700;
color: lighten($darker-text-color, 10%);
}
h1 {
font-family: $font-display, sans-serif;
font-size: 26px;
line-height: 30px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
small {
font-family: $font-sans-serif, sans-serif;
display: block;
font-size: 18px;
font-weight: 400;
color: lighten($darker-text-color, 10%);
}
}
h2 {
font-family: $font-display, sans-serif;
font-size: 22px;
line-height: 26px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
}
h3 {
font-family: $font-display, sans-serif;
font-size: 18px;
line-height: 24px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
}
h4 {
font-family: $font-display, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
}
h5 {
font-family: $font-display, sans-serif;
font-size: 14px;
line-height: 24px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
}
h6 {
font-family: $font-display, sans-serif;
font-size: 12px;
line-height: 24px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
}
ul,
ol {
margin-left: 20px;
&[type='a'] {
list-style-type: lower-alpha;
}
&[type='i'] {
list-style-type: lower-roman;
}
}
ul {
list-style: disc;
}
ol {
list-style: decimal;
}
li > ol,
li > ul {
margin-top: 6px;
}
hr {
width: 100%;
height: 0;
border: 0;
border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
margin: 20px 0;
&.spacer {
height: 1px;
border: 0;
}
}
}
.information-board {
background: darken($ui-base-color, 4%);
padding: 20px 0;
.container-alt {
position: relative;
padding-right: 280px + 15px;
}
&__sections {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
&__section {
flex: 1 0 0;
font-family: $font-sans-serif, sans-serif;
font-size: 16px;
line-height: 28px;
color: $primary-text-color;
text-align: right;
padding: 10px 15px;
span,
strong {
display: block;
}
span {
&:last-child {
color: $secondary-text-color;
}
}
strong {
font-family: $font-display, sans-serif;
font-weight: 500;
font-size: 32px;
line-height: 48px;
}
@media screen and (max-width: $column-breakpoint) {
text-align: center;
}
}
.panel {
position: absolute;
width: 280px;
box-sizing: border-box;
background: darken($ui-base-color, 8%);
padding: 20px;
padding-top: 10px;
border-radius: 4px 4px 0 0;
right: 0;
bottom: -40px;
.panel-header {
font-family: $font-display, sans-serif;
font-size: 14px;
line-height: 24px;
font-weight: 500;
color: $darker-text-color;
padding-bottom: 5px;
margin-bottom: 15px;
border-bottom: 1px solid lighten($ui-base-color, 4%);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
a,
span {
font-weight: 400;
color: darken($darker-text-color, 10%);
}
a {
text-decoration: none;
}
}
}
.owner {
text-align: center;
.avatar {
width: 80px;
height: 80px;
margin: 0 auto;
margin-bottom: 15px;
img {
display: block;
width: 80px;
height: 80px;
border-radius: 48px;
}
}
.name {
font-size: 14px;
a {
display: block;
color: $primary-text-color;
text-decoration: none;
&:hover {
.display_name {
text-decoration: underline;
}
}
}
.username {
display: block;
color: $darker-text-color;
}
}
}
}
.landing-page {
p,
li {
font-family: $font-sans-serif, sans-serif;
font-size: 16px;
font-weight: 400;
font-size: 16px;
line-height: 30px;
margin-bottom: 12px;
color: $darker-text-color;
a {
color: $highlight-text-color;
text-decoration: underline;
}
}
em {
display: inline;
margin: 0;
padding: 0;
font-weight: 700;
background: transparent;
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: lighten($darker-text-color, 10%);
}
h1 {
font-family: $font-display, sans-serif;
font-size: 26px;
line-height: 30px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
small {
font-family: $font-sans-serif, sans-serif;
display: block;
font-size: 18px;
font-weight: 400;
color: lighten($darker-text-color, 10%);
}
}
h2 {
font-family: $font-display, sans-serif;
font-size: 22px;
line-height: 26px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
}
h3 {
font-family: $font-display, sans-serif;
font-size: 18px;
line-height: 24px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
}
h4 {
font-family: $font-display, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
}
h5 {
font-family: $font-display, sans-serif;
font-size: 14px;
line-height: 24px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
}
h6 {
font-family: $font-display, sans-serif;
font-size: 12px;
line-height: 24px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
}
ul,
ol {
margin-left: 20px;
&[type='a'] {
list-style-type: lower-alpha;
}
&[type='i'] {
list-style-type: lower-roman;
}
}
ul {
list-style: disc;
}
ol {
list-style: decimal;
}
li > ol,
li > ul {
margin-top: 6px;
}
hr {
width: 100%;
height: 0;
border: 0;
border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
margin: 20px 0;
&.spacer {
height: 1px;
border: 0;
}
}
&__information,
&__forms {
padding: 20px;
}
&__call-to-action {
background: darken($ui-base-color, 4%);
border-radius: 4px;
padding: 25px 40px;
overflow: hidden;
box-sizing: border-box;
.row {
width: 100%;
display: flex;
flex-direction: row-reverse;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
.row__information-board {
display: flex;
justify-content: flex-end;
align-items: flex-end;
.information-board__section {
flex: 1 0 auto;
padding: 0 10px;
}
@media screen and (max-width: $no-gap-breakpoint) {
width: 100%;
justify-content: space-between;
}
}
.row__mascot {
flex: 1;
margin: 10px -50px 0 0;
@media screen and (max-width: $no-gap-breakpoint) {
display: none;
}
}
}
&__logo {
margin-right: 20px;
img {
height: 50px;
width: auto;
mix-blend-mode: lighten;
}
}
&__information {
padding: 45px 40px;
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
strong {
font-weight: 500;
color: lighten($darker-text-color, 10%);
}
.account {
border-bottom: 0;
padding: 0;
&__display-name {
align-items: center;
display: flex;
margin-right: 5px;
}
div.account__display-name {
&:hover {
.display-name strong {
text-decoration: none;
}
}
.account__avatar {
cursor: default;
}
}
&__avatar-wrapper {
margin-left: 0;
flex: 0 0 auto;
}
&__avatar {
width: 44px;
height: 44px;
background-size: 44px 44px;
}
.display-name {
font-size: 15px;
&__account {
font-size: 14px;
}
}
}
@media screen and (max-width: $small-breakpoint) {
.contact {
margin-top: 30px;
}
}
@media screen and (max-width: $column-breakpoint) {
padding: 25px 20px;
}
}
&__information,
&__forms,
#mastodon-timeline {
box-sizing: border-box;
background: $ui-base-color;
border-radius: 4px;
box-shadow: 0 0 6px rgba($black, 0.1);
}
&__mascot {
height: 104px;
position: relative;
left: -40px;
bottom: 25px;
img {
height: 190px;
width: auto;
}
}
&__short-description {
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-bottom: 40px;
}
@media screen and (max-width: $column-breakpoint) {
.row {
margin-bottom: 20px;
}
}
p a {
color: $secondary-text-color;
}
h1 {
font-weight: 500;
color: $primary-text-color;
margin-bottom: 0;
small {
color: $darker-text-color;
span {
color: $secondary-text-color;
}
}
}
p:last-child {
margin-bottom: 0;
}
}
&__hero {
margin-bottom: 10px;
img {
display: block;
margin: 0;
max-width: 100%;
height: auto;
border-radius: 4px;
}
}
@media screen and (max-width: 840px) {
.information-board {
.container-alt {
padding-right: 20px;
}
.panel {
position: static;
margin-top: 20px;
width: 100%;
border-radius: 4px;
.panel-header {
text-align: center;
}
}
}
}
@media screen and (max-width: 675px) {
.header-wrapper {
padding-top: 0;
&.compact {
padding-bottom: 0;
}
&.compact .hero .heading {
text-align: initial;
}
}
.header .container-alt,
.features .container-alt {
display: block;
}
}
.cta {
margin: 20px;
}
}
.landing {
margin-bottom: 100px;
@media screen and (max-width: 738px) {
margin-bottom: 0;
}
&__brand {
display: flex;
justify-content: center;
align-items: center;
padding: 50px;
svg {
fill: $primary-text-color;
height: 52px;
}
@media screen and (max-width: $no-gap-breakpoint) {
padding: 0;
margin-bottom: 30px;
}
}
.directory {
margin-top: 30px;
background: transparent;
box-shadow: none;
border-radius: 0;
}
.hero-widget {
margin-top: 30px;
margin-bottom: 0;
h4 {
padding: 10px;
text-transform: uppercase;
font-weight: 700;
font-size: 13px;
color: $darker-text-color;
}
&__text {
border-radius: 0;
padding-bottom: 0;
}
&__footer {
background: $ui-base-color;
padding: 10px;
border-radius: 0 0 4px 4px;
display: flex;
&__column {
flex: 1 1 50%;
}
}
.account {
padding: 10px 0;
border-bottom: 0;
.account__display-name {
display: flex;
align-items: center;
}
.account__avatar {
width: 44px;
height: 44px;
background-size: 44px 44px;
}
}
&__counter {
padding: 10px;
strong {
font-family: $font-display, sans-serif;
font-size: 15px;
font-weight: 700;
display: block;
}
span {
font-size: 14px;
color: $darker-text-color;
}
}
}
.simple_form .user_agreement .label_input > label {
font-weight: 400;
color: $darker-text-color;
}
.simple_form p.lead {
color: $darker-text-color;
font-size: 15px;
line-height: 20px;
font-weight: 400;
margin-bottom: 25px;
}
&__grid {
max-width: 960px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 50%) minmax(0, 50%);
grid-gap: 30px;
@media screen and (max-width: 738px) {
grid-template-columns: minmax(0, 100%);
grid-gap: 10px;
&__column-login {
grid-row: 1;
display: flex;
flex-direction: column;
.box-widget {
order: 2;
flex: 0 0 auto;
}
.hero-widget {
margin-top: 0;
margin-bottom: 10px;
order: 1;
flex: 0 0 auto;
}
}
&__column-registration {
grid-row: 2;
}
.directory {
margin-top: 10px;
}
}
@media screen and (max-width: $no-gap-breakpoint) {
grid-gap: 0;
.hero-widget {
display: block;
margin-bottom: 0;
box-shadow: none;
&__img,
&__img img,
&__footer {
border-radius: 0;
}
}
.hero-widget,
.box-widget,
.directory__tag {
border-bottom: 1px solid lighten($ui-base-color, 8%);
}
.directory {
margin-top: 0;
&__tag {
margin-bottom: 0;
& > a,
& > div {
border-radius: 0;
box-shadow: none;
}
&:last-child {
border-bottom: 0;
}
}
}
}
}
}
.brand {
position: relative;
text-decoration: none;
}
.brand__tagline {
display: block;
position: absolute;
bottom: -10px;
left: 50px;
width: 300px;
color: $ui-primary-color;
text-decoration: none;
font-size: 14px;
@media screen and (max-width: $no-gap-breakpoint) {
position: static;
width: auto;
margin-top: 20px;
color: $dark-text-color;
}
}

14
app/javascript/styles/bliss/accessibility.scss Normal file
View File

@ -0,0 +1,14 @@
$black-emojis: '8ball' 'ant' 'back' 'black_circle' 'black_heart' 'black_large_square' 'black_medium_small_square' 'black_medium_square' 'black_nib' 'black_small_square' 'bomb' 'bowling' 'bust_in_silhouette' 'busts_in_silhouette' 'camera' 'camera_with_flash' 'clubs' 'copyright' 'curly_loop' 'currency_exchange' 'dark_sunglasses' 'eight_pointed_black_star' 'electric_plug' 'end' 'female-guard' 'film_projector' 'fried_egg' 'gorilla' 'guardsman' 'heavy_check_mark' 'heavy_division_sign' 'heavy_dollar_sign' 'heavy_minus_sign' 'heavy_multiplication_x' 'heavy_plus_sign' 'hocho' 'hole' 'joystick' 'kaaba' 'lower_left_ballpoint_pen' 'lower_left_fountain_pen' 'male-guard' 'microphone' 'mortar_board' 'movie_camera' 'musical_score' 'on' 'registered' 'soon' 'spades' 'speaking_head_in_silhouette' 'spider' 'telephone_receiver' 'tm' 'top' 'tophat' 'turkey' 'vhs' 'video_camera' 'video_game' 'water_buffalo' 'waving_black_flag' 'wavy_dash';
%white-emoji-outline {
filter: drop-shadow(1px 1px 0 $white) drop-shadow(-1px 1px 0 $white) drop-shadow(1px -1px 0 $white) drop-shadow(-1px -1px 0 $white);
transform: scale(.71);
}
.emojione {
@each $emoji in $black-emojis {
&[title=':#{$emoji}:'] {
@extend %white-emoji-outline;
}
}
}

322
app/javascript/styles/bliss/accounts.scss Normal file
View File

@ -0,0 +1,322 @@
.card {
& > a {
display: block;
text-decoration: none;
color: inherit;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
@media screen and (max-width: $no-gap-breakpoint) {
box-shadow: none;
}
&:hover,
&:active,
&:focus {
.card__bar {
background: lighten($ui-base-color, 8%);
}
}
}
&__img {
height: 130px;
position: relative;
background: darken($ui-base-color, 12%);
border-radius: 4px 4px 0 0;
img {
display: block;
width: 100%;
height: 100%;
margin: 0;
object-fit: cover;
border-radius: 4px 4px 0 0;
}
@media screen and (max-width: 600px) {
height: 200px;
}
@media screen and (max-width: $no-gap-breakpoint) {
display: none;
}
}
&__bar {
position: relative;
padding: 15px;
display: flex;
justify-content: flex-start;
align-items: center;
background: lighten($ui-base-color, 4%);
border-radius: 0 0 4px 4px;
@media screen and (max-width: $no-gap-breakpoint) {
border-radius: 0;
}
.avatar {
flex: 0 0 auto;
width: 48px;
height: 48px;
padding-top: 2px;
img {
width: 100%;
height: 100%;
display: block;
margin: 0;
border-radius: 4px;
background: darken($ui-base-color, 8%);
object-fit: cover;
}
}
.display-name {
margin-left: 15px;
text-align: left;
strong {
font-size: 15px;
color: $primary-text-color;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
}
span {
display: block;
font-size: 14px;
color: $darker-text-color;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
.pagination {
padding: 30px 0;
text-align: center;
overflow: hidden;
a,
.current,
.newer,
.older,
.page,
.gap {
font-size: 14px;
color: $primary-text-color;
font-weight: 500;
display: inline-block;
padding: 6px 10px;
text-decoration: none;
}
.current {
background: $simple-background-color;
border-radius: 100px;
color: $inverted-text-color;
cursor: default;
margin: 0 10px;
}
.gap {
cursor: default;
}
.older,
.newer {
text-transform: uppercase;
color: $secondary-text-color;
}
.older {
float: left;
padding-left: 0;
.fa {
display: inline-block;
margin-right: 5px;
}
}
.newer {
float: right;
padding-right: 0;
.fa {
display: inline-block;
margin-left: 5px;
}
}
.disabled {
cursor: default;
color: lighten($inverted-text-color, 10%);
}
@media screen and (max-width: 700px) {
padding: 30px 20px;
.page {
display: none;
}
.newer,
.older {
display: inline-block;
}
}
}
.nothing-here {
background: $ui-base-color;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
color: $light-text-color;
font-size: 14px;
font-weight: 500;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
cursor: default;
border-radius: 4px;
padding: 20px;
min-height: 30vh;
&--under-tabs {
border-radius: 0 0 4px 4px;
}
&--flexible {
box-sizing: border-box;
min-height: 100%;
}
}
.account-role,
.simple_form .recommended {
display: inline-block;
padding: 4px 6px;
cursor: default;
border-radius: 3px;
font-size: 12px;
line-height: 12px;
font-weight: 500;
color: $ui-secondary-color;
background-color: rgba($ui-secondary-color, 0.1);
border: 1px solid rgba($ui-secondary-color, 0.5);
&.moderator {
color: $success-green;
background-color: rgba($success-green, 0.1);
border-color: rgba($success-green, 0.5);
}
&.admin {
color: lighten($error-red, 12%);
background-color: rgba(lighten($error-red, 12%), 0.1);
border-color: rgba(lighten($error-red, 12%), 0.5);
}
}
.account__header__fields {
padding: 0;
margin: 15px -15px -15px;
border: 0 none;
border-top: 1px solid lighten($ui-base-color, 12%);
border-bottom: 1px solid lighten($ui-base-color, 12%);
font-size: 14px;
line-height: 20px;
dl {
display: flex;
border-bottom: 1px solid lighten($ui-base-color, 12%);
}
dt,
dd {
box-sizing: border-box;
padding: 14px;
text-align: center;
max-height: 48px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
dt {
font-weight: 500;
width: 120px;
flex: 0 0 auto;
color: $secondary-text-color;
background: rgba(darken($ui-base-color, 8%), 0.5);
}
dd {
flex: 1 1 auto;
color: $darker-text-color;
}
a {
color: $highlight-text-color;
text-decoration: none;
&:hover,
&:focus,
&:active {
text-decoration: underline;
}
}
.verified {
border: 1px solid rgba($valid-value-color, 0.5);
background: rgba($valid-value-color, 0.25);
a {
color: $valid-value-color;
font-weight: 500;
}
&__mark {
color: $valid-value-color;
}
}
dl:last-child {
border-bottom: 0;
}
}
.directory__tag .trends__item__current {
width: auto;
}
.pending-account {
&__header {
color: $darker-text-color;
a {
color: $ui-secondary-color;
text-decoration: none;
&:hover,
&:active,
&:focus {
text-decoration: underline;
}
}
strong {
color: $primary-text-color;
font-weight: 700;
}
}
&__body {
margin-top: 10px;
}
}

718
app/javascript/styles/bliss/admin.scss Normal file
View File

@ -0,0 +1,718 @@
$no-columns-breakpoint: 600px;
$sidebar-width: 240px;
$content-width: 840px;
.admin-wrapper {
display: flex;
justify-content: center;
height: 100%;
.sidebar-wrapper {
flex: 1 1 $sidebar-width;
height: 100%;
background: $ui-base-color;
display: flex;
justify-content: flex-end;
}
.sidebar {
width: $sidebar-width;
height: 100%;
padding: 0;
overflow-y: auto;
.logo {
display: block;
margin: 40px auto;
width: 100px;
height: 100px;
}
@media screen and (max-width: $no-columns-breakpoint) {
& > a:first-child {
display: none;
}
}
ul {
list-style: none;
border-radius: 4px 0 0 4px;
overflow: hidden;
margin-bottom: 20px;
@media screen and (max-width: $no-columns-breakpoint) {
margin-bottom: 0;
}
a {
display: block;
padding: 15px;
color: $darker-text-color;
text-decoration: none;
transition: all 200ms linear;
transition-property: color, background-color;
border-radius: 4px 0 0 4px;
i.fa {
margin-right: 5px;
}
&:hover {
color: $primary-text-color;
background-color: darken($ui-base-color, 5%);
transition: all 100ms linear;
transition-property: color, background-color;
}
&.selected {
background: darken($ui-base-color, 2%);
border-radius: 4px 0 0;
}
}
ul {
background: darken($ui-base-color, 4%);
border-radius: 0 0 0 4px;
margin: 0;
a {
border: 0;
padding: 15px 35px;
}
}
.simple-navigation-active-leaf a {
color: $primary-text-color;
background-color: $ui-highlight-color;
border-bottom: 0;
border-radius: 0;
&:hover {
background-color: lighten($ui-highlight-color, 5%);
}
}
}
& > ul > .simple-navigation-active-leaf a {
border-radius: 4px 0 0 4px;
}
}
.content-wrapper {
flex: 2 1 $content-width;
overflow: auto;
}
.content {
max-width: $content-width;
padding: 20px 15px;
padding-top: 60px;
padding-left: 25px;
@media screen and (max-width: $no-columns-breakpoint) {
max-width: none;
padding: 15px;
padding-top: 30px;
}
h2 {
color: $secondary-text-color;
font-size: 24px;
line-height: 28px;
font-weight: 400;
padding-bottom: 40px;
border-bottom: 1px solid lighten($ui-base-color, 8%);
margin-bottom: 40px;
}
h3 {
color: $secondary-text-color;
font-size: 20px;
line-height: 28px;
font-weight: 400;
margin-bottom: 30px;
}
h4 {
text-transform: uppercase;
font-size: 13px;
font-weight: 700;
color: $darker-text-color;
padding-bottom: 8px;
margin-bottom: 8px;
border-bottom: 1px solid lighten($ui-base-color, 8%);
}
h6 {
font-size: 16px;
color: $secondary-text-color;
line-height: 28px;
font-weight: 400;
}
.fields-group h6 {
color: $primary-text-color;
font-weight: 500;
}
.directory__tag > a,
.directory__tag > div {
box-shadow: none;
}
.directory__tag .table-action-link .fa {
color: inherit;
}
.directory__tag h4 {
font-size: 18px;
font-weight: 700;
color: $primary-text-color;
text-transform: none;
padding-bottom: 0;
margin-bottom: 0;
border-bottom: 0;
}
& > p {
font-size: 14px;
line-height: 18px;
color: $secondary-text-color;
margin-bottom: 20px;
strong {
color: $primary-text-color;
font-weight: 500;
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
font-weight: 700;
}
}
}
}
hr {
width: 100%;
height: 0;
border: 0;
border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
margin: 20px 0;
&.spacer {
height: 1px;
border: 0;
}
}
}
@media screen and (max-width: $no-columns-breakpoint) {
display: block;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
.sidebar-wrapper,
.content-wrapper {
flex: 0 0 auto;
height: auto;
overflow: initial;
}
.sidebar {
width: 100%;
padding: 0;
height: auto;
}
}
}
hr.spacer {
width: 100%;
border: 0;
margin: 20px 0;
height: 1px;
}
.muted-hint {
color: $darker-text-color;
a {
color: $highlight-text-color;
}
}
.positive-hint {
color: $valid-value-color;
font-weight: 500;
}
.negative-hint {
color: $error-value-color;
font-weight: 500;
}
.neutral-hint {
color: $dark-text-color;
font-weight: 500;
}
.warning-hint {
color: $gold-star;
font-weight: 500;
}
.filters {
display: flex;
flex-wrap: wrap;
.filter-subset {
flex: 0 0 auto;
margin: 0 40px 10px 0;
&:last-child {
margin-bottom: 20px;
}
ul {
margin-top: 5px;
list-style: none;
li {
display: inline-block;
margin-right: 5px;
}
}
strong {
font-weight: 500;
text-transform: uppercase;
font-size: 12px;
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
font-weight: 700;
}
}
}
a {
display: inline-block;
color: $darker-text-color;
text-decoration: none;
text-transform: uppercase;
font-size: 12px;
font-weight: 500;
border-bottom: 2px solid $ui-base-color;
&:hover {
color: $primary-text-color;
border-bottom: 2px solid lighten($ui-base-color, 5%);
}
&.selected {
color: $highlight-text-color;
border-bottom: 2px solid $ui-highlight-color;
}
}
}
}
.report-accounts {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
}
.report-accounts__item {
display: flex;
flex: 250px;
flex-direction: column;
margin: 0 5px;
& > strong {
display: block;
margin: 0 0 10px -5px;
font-weight: 500;
font-size: 14px;
line-height: 18px;
color: $secondary-text-color;
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
font-weight: 700;
}
}
}
.account-card {
flex: 1 1 auto;
}
}
.report-status,
.account-status {
display: flex;
margin-bottom: 10px;
.activity-stream {
flex: 2 0 0;
margin-right: 20px;
max-width: calc(100% - 60px);
.entry {
border-radius: 4px;
}
}
}
.report-status__actions,
.account-status__actions {
flex: 0 0 auto;
display: flex;
flex-direction: column;
.icon-button {
font-size: 24px;
width: 24px;
text-align: center;
margin-bottom: 10px;
}
}
.simple_form.new_report_note,
.simple_form.new_account_moderation_note {
max-width: 100%;
}
.batch-form-box {
display: flex;
flex-wrap: wrap;
margin-bottom: 5px;
#form_status_batch_action {
margin: 0 5px 5px 0;
font-size: 14px;
}
input.button {
margin: 0 5px 5px 0;
}
.media-spoiler-toggle-buttons {
margin-left: auto;
.button {
overflow: visible;
margin: 0 0 5px 5px;
float: right;
}
}
}
.back-link {
margin-bottom: 10px;
font-size: 14px;
a {
color: $highlight-text-color;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
.spacer {
flex: 1 1 auto;
}
.log-entry {
margin-bottom: 20px;
line-height: 20px;
&__header {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 10px;
background: $ui-base-color;
color: $darker-text-color;
border-radius: 4px 4px 0 0;
font-size: 14px;
position: relative;
}
&__avatar {
margin-right: 10px;
.avatar {
display: block;
margin: 0;
border-radius: 50%;
width: 40px;
height: 40px;
}
}
&__content {
max-width: calc(100% - 90px);
}
&__title {
word-wrap: break-word;
}
&__timestamp {
color: $dark-text-color;
}
&__extras {
background: lighten($ui-base-color, 6%);
border-radius: 0 0 4px 4px;
padding: 10px;
color: $darker-text-color;
font-family: $font-monospace, monospace;
font-size: 12px;
word-wrap: break-word;
min-height: 20px;
}
&__icon {
font-size: 28px;
margin-right: 10px;
color: $dark-text-color;
}
&__icon__overlay {
position: absolute;
top: 10px;
right: 10px;
width: 10px;
height: 10px;
border-radius: 50%;
&.positive {
background: $success-green;
}
&.negative {
background: lighten($error-red, 12%);
}
&.neutral {
background: $ui-highlight-color;
}
}
a,
.username,
.target {
color: $secondary-text-color;
text-decoration: none;
font-weight: 500;
}
.diff-old {
color: lighten($error-red, 12%);
}
.diff-neutral {
color: $secondary-text-color;
}
.diff-new {
color: $success-green;
}
}
a.name-tag,
.name-tag,
a.inline-name-tag,
.inline-name-tag {
text-decoration: none;
color: $secondary-text-color;
.username {
font-weight: 500;
}
&.suspended {
.username {
text-decoration: line-through;
color: lighten($error-red, 12%);
}
.avatar {
filter: grayscale(100%);
opacity: 0.8;
}
}
}
a.name-tag,
.name-tag {
display: flex;
align-items: center;
.avatar {
display: block;
margin: 0;
margin-right: 5px;
border-radius: 50%;
}
&.suspended {
.avatar {
filter: grayscale(100%);
opacity: 0.8;
}
}
}
.speech-bubble {
margin-bottom: 20px;
border-left: 4px solid $ui-highlight-color;
&.positive {
border-left-color: $success-green;
}
&.negative {
border-left-color: lighten($error-red, 12%);
}
&.warning {
border-left-color: $gold-star;
}
&__bubble {
padding: 16px;
padding-left: 14px;
font-size: 15px;
line-height: 20px;
border-radius: 4px 4px 4px 0;
position: relative;
font-weight: 500;
a {
color: $darker-text-color;
}
}
&__owner {
padding: 8px;
padding-left: 12px;
}
time {
color: $dark-text-color;
}
}
.report-card {
background: $ui-base-color;
border-radius: 4px;
margin-bottom: 20px;
&__profile {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
.account {
padding: 0;
border: 0;
&__avatar-wrapper {
margin-left: 0;
}
}
&__stats {
flex: 0 0 auto;
font-weight: 500;
color: $darker-text-color;
text-transform: uppercase;
text-align: right;
a {
color: inherit;
text-decoration: none;
&:focus,
&:hover,
&:active {
color: lighten($darker-text-color, 8%);
}
}
.red {
color: $error-value-color;
}
}
}
&__summary {
&__item {
display: flex;
justify-content: flex-start;
border-top: 1px solid darken($ui-base-color, 4%);
&:hover {
background: lighten($ui-base-color, 2%);
}
&__reported-by,
&__assigned {
padding: 15px;
flex: 0 0 auto;
box-sizing: border-box;
width: 150px;
color: $darker-text-color;
&,
.username {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
&__content {
flex: 1 1 auto;
max-width: calc(100% - 300px);
&__icon {
color: $dark-text-color;
margin-right: 4px;
font-weight: 500;
}
}
&__content a {
display: block;
box-sizing: border-box;
width: 100%;
padding: 15px;
text-decoration: none;
color: $darker-text-color;
}
}
}
}
.one-line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ellipsized-ip {
display: inline-block;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}

162
app/javascript/styles/bliss/basics.scss Normal file
View File

@ -0,0 +1,162 @@
@function hex-color($color) {
@if type-of($color) == 'color' {
$color: str-slice(ie-hex-str($color), 4);
}
@return '%23' + unquote($color);
}
body {
font-family: $font-sans-serif, sans-serif;
background: darken($ui-base-color, 7%);
font-size: 13px;
line-height: 18px;
font-weight: 400;
color: $primary-text-color;
text-rendering: optimizelegibility;
font-feature-settings: "kern";
text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
&.system-font {
// system-ui => standard property (Chrome/Android WebView 56+, Opera 43+, Safari 11+)
// -apple-system => Safari <11 specific
// BlinkMacSystemFont => Chrome <56 on macOS specific
// Segoe UI => Windows 7/8/10
// Oxygen => KDE
// Ubuntu => Unity/Ubuntu
// Cantarell => GNOME
// Fira Sans => Firefox OS
// Droid Sans => Older Androids (<4.0)
// Helvetica Neue => Older macOS <10.11
// $font-sans-serif => web-font (Roboto) fallback and newer Androids (>=4.0)
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", $font-sans-serif, sans-serif;
}
&.app-body {
padding: 0;
&.layout-single-column {
height: auto;
min-height: 100vh;
overflow-y: scroll;
}
&.layout-multiple-columns {
position: absolute;
width: 100%;
height: 100%;
}
&.with-modals--active {
overflow-y: hidden;
}
}
&.lighter {
background: $ui-base-color;
}
&.with-modals {
overflow-x: hidden;
overflow-y: scroll;
&--active {
overflow-y: hidden;
}
}
&.player {
text-align: center;
}
&.embed {
background: lighten($ui-base-color, 4%);
margin: 0;
padding-bottom: 0;
.container {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
}
&.admin {
background: darken($ui-base-color, 4%);
position: fixed;
width: 100%;
height: 100%;
padding: 0;
}
&.error {
position: absolute;
text-align: center;
color: $darker-text-color;
background: $ui-base-color;
width: 100%;
height: 100%;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
.dialog {
vertical-align: middle;
margin: 20px;
&__illustration {
img {
display: block;
max-width: 470px;
width: 100%;
height: auto;
margin-top: -120px;
}
}
h1 {
font-size: 20px;
line-height: 28px;
font-weight: 400;
}
}
}
}
button {
font-family: inherit;
cursor: pointer;
&:focus {
outline: none;
}
}
.app-holder {
&,
& > div {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
outline: 0 !important;
}
}
.layout-single-column .app-holder {
&,
& > div {
min-height: 100vh;
}
}
.layout-multiple-columns .app-holder {
&,
& > div {
height: 100%;
}
}

11
app/javascript/styles/bliss/boost.scss Normal file
View File

File diff suppressed because one or more lines are too long

34
app/javascript/styles/bliss/compact_header.scss Normal file
View File

@ -0,0 +1,34 @@
.compact-header {
h1 {
font-size: 24px;
line-height: 28px;
color: $darker-text-color;
font-weight: 500;
margin-bottom: 20px;
padding: 0 10px;
word-wrap: break-word;
@media screen and (max-width: 740px) {
text-align: center;
padding: 20px 10px 0;
}
a {
color: inherit;
text-decoration: none;
}
small {
font-weight: 400;
color: $secondary-text-color;
}
img {
display: inline-block;
margin-bottom: -5px;
margin-right: 15px;
width: 36px;
height: 36px;
}
}
}

6159
app/javascript/styles/bliss/components.scss Normal file
View File

File diff suppressed because it is too large Load Diff

815
app/javascript/styles/bliss/containers.scss Normal file
View File

@ -0,0 +1,815 @@
.container-alt {
width: 700px;
margin: 0 auto;
margin-top: 40px;
@media screen and (max-width: 740px) {
width: 100%;
margin: 0;
}
}
.logo-container {
margin: 100px auto 50px;
@media screen and (max-width: 500px) {
margin: 40px auto 0;
}
h1 {
display: flex;
justify-content: center;
align-items: center;
svg {
fill: $primary-text-color;
height: 42px;
margin-right: 10px;
}
a {
display: flex;
justify-content: center;
align-items: center;
color: $primary-text-color;
text-decoration: none;
outline: 0;
padding: 12px 16px;
line-height: 32px;
font-family: $font-display, sans-serif;
font-weight: 500;
font-size: 14px;
}
}
}
.compose-standalone {
.compose-form {
width: 400px;
margin: 0 auto;
padding: 20px 0;
margin-top: 40px;
box-sizing: border-box;
@media screen and (max-width: 400px) {
width: 100%;
margin-top: 0;
padding: 20px;
}
}
}
.account-header {
width: 400px;
margin: 0 auto;
display: flex;
font-size: 13px;
line-height: 18px;
box-sizing: border-box;
padding: 20px 0;
padding-bottom: 0;
margin-bottom: -30px;
margin-top: 40px;
@media screen and (max-width: 440px) {
width: 100%;
margin: 0;
margin-bottom: 10px;
padding: 20px;
padding-bottom: 0;
}
.avatar {
width: 40px;
height: 40px;
margin-right: 8px;
img {
width: 100%;
height: 100%;
display: block;
margin: 0;
border-radius: 4px;
}
}
.name {
flex: 1 1 auto;
color: $secondary-text-color;
width: calc(100% - 88px);
.username {
display: block;
font-weight: 500;
text-overflow: ellipsis;
overflow: hidden;
}
}
.logout-link {
display: block;
font-size: 32px;
line-height: 40px;
margin-left: 8px;
}
}
.grid-3 {
display: grid;
grid-gap: 10px;
grid-template-columns: 3fr 1fr;
grid-auto-columns: 25%;
grid-auto-rows: max-content;
.column-0 {
grid-column: 1 / 3;
grid-row: 1;
}
.column-1 {
grid-column: 1;
grid-row: 2;
}
.column-2 {
grid-column: 2;
grid-row: 2;
}
.column-3 {
grid-column: 1 / 3;
grid-row: 3;
}
.landing-page__call-to-action {
min-height: 100%;
}
.flash-message {
margin-bottom: 10px;
}
@media screen and (max-width: 738px) {
grid-template-columns: minmax(0, 50%) minmax(0, 50%);
.landing-page__call-to-action {
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.row__information-board {
width: 100%;
justify-content: center;
align-items: center;
}
.row__mascot {
display: none;
}
}
@media screen and (max-width: $no-gap-breakpoint) {
grid-gap: 0;
grid-template-columns: minmax(0, 100%);
.column-0 {
grid-column: 1;
}
.column-1 {
grid-column: 1;
grid-row: 3;
}
.column-2 {
grid-column: 1;
grid-row: 2;
}
.column-3 {
grid-column: 1;
grid-row: 4;
}
}
}
.public-layout {
@media screen and (max-width: $no-gap-breakpoint) {
padding-top: 48px;
}
.container {
max-width: 960px;
@media screen and (max-width: $no-gap-breakpoint) {
padding: 0;
}
}
.header {
background: lighten($ui-base-color, 8%);
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
border-radius: 4px;
height: 48px;
margin: 10px 0;
display: flex;
align-items: stretch;
justify-content: center;
flex-wrap: nowrap;
overflow: hidden;
@media screen and (max-width: $no-gap-breakpoint) {
position: fixed;
width: 100%;
top: 0;
left: 0;
margin: 0;
border-radius: 0;
box-shadow: none;
z-index: 110;
}
& > div {
flex: 1 1 33.3%;
min-height: 1px;
}
.nav-left {
display: flex;
align-items: stretch;
justify-content: flex-start;
flex-wrap: nowrap;
}
.nav-center {
display: flex;
align-items: stretch;
justify-content: center;
flex-wrap: nowrap;
}
.nav-right {
display: flex;
align-items: stretch;
justify-content: flex-end;
flex-wrap: nowrap;
}
.brand {
display: block;
padding: 15px;
svg {
display: block;
height: 18px;
width: auto;
position: relative;
bottom: -2px;
fill: $primary-text-color;
@media screen and (max-width: $no-gap-breakpoint) {
height: 20px;
}
}
&:hover,
&:focus,
&:active {
background: lighten($ui-base-color, 12%);
}
}
.nav-link {
display: flex;
align-items: center;
padding: 0 1rem;
font-size: 12px;
font-weight: 500;
text-decoration: none;
color: $darker-text-color;
white-space: nowrap;
text-align: center;
&:hover,
&:focus,
&:active {
text-decoration: underline;
color: $primary-text-color;
}
@media screen and (max-width: 550px) {
&.optional {
display: none;
}
}
}
.nav-button {
background: lighten($ui-base-color, 16%);
margin: 8px;
margin-left: 0;
border-radius: 4px;
&:hover,
&:focus,
&:active {
text-decoration: none;
background: lighten($ui-base-color, 20%);
}
}
}
$no-columns-breakpoint: 600px;
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: minmax(300px, 3fr) minmax(298px, 1fr);
grid-auto-columns: 25%;
grid-auto-rows: max-content;
.column-0 {
grid-row: 1;
grid-column: 1;
}
.column-1 {
grid-row: 1;
grid-column: 2;
}
@media screen and (max-width: $no-columns-breakpoint) {
grid-template-columns: 100%;
grid-gap: 0;
.column-1 {
display: none;
}
}
}
.public-account-header {
overflow: hidden;
margin-bottom: 10px;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
&.inactive {
opacity: 0.5;
.public-account-header__image,
.avatar {
filter: grayscale(100%);
}
.logo-button {
background-color: $secondary-text-color;
}
}
&__image {
border-radius: 4px 4px 0 0;
overflow: hidden;
height: 300px;
position: relative;
background: darken($ui-base-color, 12%);
&::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
box-shadow: inset 0 -1px 1px 1px rgba($base-shadow-color, 0.15);
top: 0;
left: 0;
}
img {
object-fit: cover;
display: block;
width: 100%;
height: 100%;
margin: 0;
border-radius: 4px 4px 0 0;
}
@media screen and (max-width: 600px) {
height: 200px;
}
}
&--no-bar {
margin-bottom: 0;
.public-account-header__image,
.public-account-header__image img {
border-radius: 4px;
@media screen and (max-width: $no-gap-breakpoint) {
border-radius: 0;
}
}
}
@media screen and (max-width: $no-gap-breakpoint) {
margin-bottom: 0;
box-shadow: none;
&__image::after {
display: none;
}
&__image,
&__image img {
border-radius: 0;
}
}
&__bar {
position: relative;
margin-top: -80px;
display: flex;
justify-content: flex-start;
&::before {
content: "";
display: block;
background: lighten($ui-base-color, 4%);
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60px;
border-radius: 0 0 4px 4px;
z-index: -1;
}
.avatar {
display: block;
width: 120px;
height: 120px;
padding-left: 20px - 4px;
flex: 0 0 auto;
img {
display: block;
width: 100%;
height: 100%;
margin: 0;
border-radius: 50%;
border: 4px solid lighten($ui-base-color, 4%);
background: darken($ui-base-color, 8%);
}
}
@media screen and (max-width: 600px) {
margin-top: 0;
background: lighten($ui-base-color, 4%);
border-radius: 0 0 4px 4px;
padding: 5px;
&::before {
display: none;
}
.avatar {
width: 48px;
height: 48px;
padding: 7px 0;
padding-left: 10px;
img {
border: 0;
border-radius: 4px;
}
@media screen and (max-width: 360px) {
display: none;
}
}
}
@media screen and (max-width: $no-gap-breakpoint) {
border-radius: 0;
}
@media screen and (max-width: $no-columns-breakpoint) {
flex-wrap: wrap;
}
}
&__tabs {
flex: 1 1 auto;
margin-left: 20px;
&__name {
padding-top: 20px;
padding-bottom: 8px;
h1 {
font-size: 20px;
line-height: 18px * 1.5;
color: $primary-text-color;
font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-shadow: 1px 1px 1px $base-shadow-color;
small {
display: block;
font-size: 14px;
color: $primary-text-color;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
@media screen and (max-width: 600px) {
margin-left: 15px;
display: flex;
justify-content: space-between;
align-items: center;
&__name {
padding-top: 0;
padding-bottom: 0;
h1 {
font-size: 16px;
line-height: 24px;
text-shadow: none;
small {
color: $darker-text-color;
}
}
}
}
&__tabs {
display: flex;
justify-content: flex-start;
align-items: stretch;
height: 58px;
.details-counters {
display: flex;
flex-direction: row;
min-width: 300px;
}
@media screen and (max-width: $no-columns-breakpoint) {
.details-counters {
display: none;
}
}
.counter {
width: 33.3%;
box-sizing: border-box;
flex: 0 0 auto;
color: $darker-text-color;
padding: 10px;
border-right: 1px solid lighten($ui-base-color, 4%);
cursor: default;
text-align: center;
position: relative;
a {
display: block;
}
&:last-child {
border-right: 0;
}
&::after {
display: block;
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-bottom: 4px solid $ui-primary-color;
opacity: 0.5;
transition: all 400ms ease;
}
&.active {
&::after {
border-bottom: 4px solid $highlight-text-color;
opacity: 1;
}
&.inactive::after {
border-bottom-color: $secondary-text-color;
}
}
&:hover {
&::after {
opacity: 1;
transition-duration: 100ms;
}
}
a {
text-decoration: none;
color: inherit;
}
.counter-label {
font-size: 12px;
display: block;
}
.counter-number {
font-weight: 500;
font-size: 18px;
margin-bottom: 5px;
color: $primary-text-color;
font-family: $font-display, sans-serif;
}
}
.spacer {
flex: 1 1 auto;
height: 1px;
}
&__buttons {
padding: 7px 8px;
}
}
}
&__extra {
display: none;
margin-top: 4px;
.public-account-bio {
border-radius: 0;
box-shadow: none;
background: transparent;
margin: 0 -5px;
.account__header__fields {
border-top: 1px solid lighten($ui-base-color, 12%);
}
.roles {
display: none;
}
}
&__links {
margin-top: -15px;
font-size: 14px;
color: $darker-text-color;
a {
display: inline-block;
color: $darker-text-color;
text-decoration: none;
padding: 15px;
font-weight: 500;
strong {
font-weight: 700;
color: $primary-text-color;
}
}
}
@media screen and (max-width: $no-columns-breakpoint) {
display: block;
flex: 100%;
}
}
}
.account__section-headline {
border-radius: 4px 4px 0 0;
@media screen and (max-width: $no-gap-breakpoint) {
border-radius: 0;
}
}
.detailed-status__meta {
margin-top: 25px;
}
.public-account-bio {
background: lighten($ui-base-color, 8%);
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
border-radius: 4px;
overflow: hidden;
margin-bottom: 10px;
@media screen and (max-width: $no-gap-breakpoint) {
box-shadow: none;
margin-bottom: 0;
border-radius: 0;
}
.account__header__fields {
margin: 0;
border-top: 0;
a {
color: lighten($ui-highlight-color, 8%);
}
dl:first-child .verified {
border-radius: 0 4px 0 0;
}
.verified a {
color: $valid-value-color;
}
}
.account__header__content {
padding: 20px;
padding-bottom: 0;
color: $primary-text-color;
}
&__extra,
.roles {
padding: 20px;
font-size: 14px;
color: $darker-text-color;
}
.roles {
padding-bottom: 0;
}
}
.static-icon-button {
color: $action-button-color;
font-size: 18px;
& > span {
font-size: 14px;
font-weight: 500;
}
}
.card-grid {
display: flex;
flex-wrap: wrap;
min-width: 100%;
margin: 0 -5px;
& > div {
box-sizing: border-box;
flex: 1 0 auto;
width: 300px;
padding: 0 5px;
margin-bottom: 10px;
max-width: 33.333%;
@media screen and (max-width: 900px) {
max-width: 50%;
}
@media screen and (max-width: 600px) {
max-width: 100%;
}
}
@media screen and (max-width: $no-gap-breakpoint) {
margin: 0;
border-top: 1px solid lighten($ui-base-color, 8%);
& > div {
width: 100%;
padding: 0;
margin-bottom: 0;
border-bottom: 1px solid lighten($ui-base-color, 8%);
&:last-child {
border-bottom: 0;
}
.card__bar {
background: $ui-base-color;
&:hover,
&:active,
&:focus {
background: lighten($ui-base-color, 4%);
}
}
}
}
}
}

76
app/javascript/styles/bliss/dashboard.scss Normal file
View File

@ -0,0 +1,76 @@
.dashboard__counters {
display: flex;
flex-wrap: wrap;
margin: 0 -5px;
margin-bottom: 20px;
& > div {
box-sizing: border-box;
flex: 0 0 33.333%;
padding: 0 5px;
margin-bottom: 10px;
& > div,
& > a {
padding: 20px;
background: lighten($ui-base-color, 4%);
border-radius: 4px;
}
& > a {
text-decoration: none;
color: inherit;
display: block;
&:hover,
&:focus,
&:active {
background: lighten($ui-base-color, 8%);
}
}
}
&__num,
&__text {
text-align: center;
font-weight: 500;
font-size: 24px;
line-height: 21px;
color: $primary-text-color;
font-family: $font-display, sans-serif;
margin-bottom: 20px;
line-height: 30px;
}
&__text {
font-size: 18px;
}
&__label {
font-size: 14px;
color: $darker-text-color;
text-align: center;
font-weight: 500;
}
}
.dashboard__widgets {
display: flex;
flex-wrap: wrap;
margin: 0 -5px;
& > div {
flex: 0 0 33.333%;
margin-bottom: 20px;
& > div {
padding: 0 5px;
}
}
a:not(.name-tag) {
color: $ui-secondary-color;
font-weight: 500;
text-decoration: none;
}
}

204
app/javascript/styles/bliss/emoji_picker.scss Normal file
View File

@ -0,0 +1,204 @@
.emoji-mart {
font-size: 13px;
display: inline-block;
color: $inverted-text-color;
&,
* {
box-sizing: border-box;
line-height: 1.15;
}
.emoji-mart-emoji {
padding: 6px;
}
}
.emoji-mart-bar {
border: 0 solid darken($ui-secondary-color, 8%);
&:first-child {
border-bottom-width: 1px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: $ui-secondary-color;
}
&:last-child {
border-top-width: 1px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
display: none;
}
}
.emoji-mart-anchors {
display: flex;
justify-content: space-between;
padding: 0 6px;
color: $lighter-text-color;
line-height: 0;
}
.emoji-mart-anchor {
position: relative;
flex: 1;
text-align: center;
padding: 12px 4px;
overflow: hidden;
transition: color .1s ease-out;
cursor: pointer;
&:hover {
color: darken($lighter-text-color, 4%);
}
}
.emoji-mart-anchor-selected {
color: $highlight-text-color;
&:hover {
color: darken($highlight-text-color, 4%);
}
.emoji-mart-anchor-bar {
bottom: -1px;
}
}
.emoji-mart-anchor-bar {
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 4px;
background-color: $highlight-text-color;
}
.emoji-mart-anchors {
i {
display: inline-block;
width: 100%;
max-width: 22px;
}
svg {
fill: currentColor;
max-height: 18px;
}
}
.emoji-mart-scroll {
overflow-y: scroll;
height: 270px;
max-height: 35vh;
padding: 0 6px 6px;
background: $simple-background-color;
will-change: transform;
&::-webkit-scrollbar-track:hover,
&::-webkit-scrollbar-track:active {
background-color: rgba($base-overlay-background, 0.3);
}
}
.emoji-mart-search {
padding: 10px;
padding-right: 45px;
background: $simple-background-color;
input {
font-size: 14px;
font-weight: 400;
padding: 7px 9px;
font-family: inherit;
display: block;
width: 100%;
background: rgba($ui-secondary-color, 0.3);
color: $inverted-text-color;
border: 1px solid $ui-secondary-color;
border-radius: 4px;
&::-moz-focus-inner {
border: 0;
}
&::-moz-focus-inner,
&:focus,
&:active {
outline: 0 !important;
}
}
}
.emoji-mart-category .emoji-mart-emoji {
cursor: pointer;
span {
z-index: 1;
position: relative;
text-align: center;
}
&:hover::before {
z-index: 0;
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba($ui-secondary-color, 0.7);
border-radius: 100%;
}
}
.emoji-mart-category-label {
z-index: 2;
position: relative;
position: -webkit-sticky;
position: sticky;
top: 0;
span {
display: block;
width: 100%;
font-weight: 500;
padding: 5px 6px;
background: $simple-background-color;
}
}
.emoji-mart-emoji {
position: relative;
display: inline-block;
font-size: 0;
span {
width: 22px;
height: 22px;
}
}
.emoji-mart-no-results {
font-size: 14px;
text-align: center;
padding-top: 70px;
color: $light-text-color;
.emoji-mart-category-label {
display: none;
}
.emoji-mart-no-results-label {
margin-top: .2em;
}
.emoji-mart-emoji:hover::before {
content: none;
}
}
.emoji-mart-preview {
display: none;
}

137
app/javascript/styles/bliss/footer.scss Normal file
View File

@ -0,0 +1,137 @@
.public-layout {
.footer {
text-align: left;
padding-top: 20px;
padding-bottom: 60px;
font-size: 12px;
color: lighten($ui-base-color, 34%);
@media screen and (max-width: $no-gap-breakpoint) {
padding-left: 20px;
padding-right: 20px;
}
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr 2fr 1fr 1fr;
.column-0 {
grid-column: 1;
grid-row: 1;
min-width: 0;
}
.column-1 {
grid-column: 2;
grid-row: 1;
min-width: 0;
}
.column-2 {
grid-column: 3;
grid-row: 1;
min-width: 0;
text-align: center;
h4 a {
color: lighten($ui-base-color, 34%);
}
}
.column-3 {
grid-column: 4;
grid-row: 1;
min-width: 0;
}
.column-4 {
grid-column: 5;
grid-row: 1;
min-width: 0;
}
@media screen and (max-width: 690px) {
grid-template-columns: 1fr 2fr 1fr;
.column-0,
.column-1 {
grid-column: 1;
}
.column-1 {
grid-row: 2;
}
.column-2 {
grid-column: 2;
}
.column-3,
.column-4 {
grid-column: 3;
}
.column-4 {
grid-row: 2;
}
}
@media screen and (max-width: 600px) {
.column-1 {
display: block;
}
}
@media screen and (max-width: $no-gap-breakpoint) {
.column-0,
.column-1,
.column-3,
.column-4 {
display: none;
}
}
}
h4 {
text-transform: uppercase;
font-weight: 700;
margin-bottom: 8px;
color: $darker-text-color;
a {
color: inherit;
text-decoration: none;
}
}
ul a {
text-decoration: none;
color: lighten($ui-base-color, 34%);
&:hover,
&:active,
&:focus {
text-decoration: underline;
}
}
.brand {
svg {
display: block;
height: 36px;
width: auto;
margin: 0 auto;
fill: lighten($ui-base-color, 34%);
}
&:hover,
&:focus,
&:active {
svg path {
fill: lighten($ui-base-color, 38%);
}
}
}
}
}

959
app/javascript/styles/bliss/forms.scss Normal file
View File

@ -0,0 +1,959 @@
$no-columns-breakpoint: 600px;
table{
thead{
th{
font-weight: 800;
background: $ui-highlight-color;
}
}
td, th{
padding: 1rem;
}
a{
@extend .text-btn
}
}
.table-responsive{
width: 100%;
}
.table-striped{
margin: 1rem 0;
tr{
&:odd{
background: $ui-base-lighter-color;
}
}
}
.group-form{
}
code {
font-family: $font-monospace, monospace;
font-weight: 400;
}
.form-container {
max-width: 400px;
padding: 20px;
margin: 0 auto;
}
.simple_form {
.input {
margin-bottom: 15px;
overflow: hidden;
&.hidden {
margin: 0;
}
&.radio_buttons {
.radio {
margin-bottom: 15px;
&:last-child {
margin-bottom: 0;
}
}
.radio > label {
position: relative;
padding-left: 28px;
input {
position: absolute;
top: -2px;
left: 0;
}
}
}
&.boolean {
position: relative;
margin-bottom: 0;
.label_input > label {
font-family: inherit;
font-size: 14px;
padding-top: 5px;
color: $primary-text-color;
display: block;
width: auto;
}
.label_input,
.hint {
padding-left: 28px;
}
.label_input__wrapper {
position: static;
}
label.checkbox {
position: absolute;
top: 2px;
left: 0;
}
label a {
color: $highlight-text-color;
text-decoration: underline;
&:hover,
&:active,
&:focus {
text-decoration: none;
}
}
.recommended {
position: absolute;
margin: 0 4px;
margin-top: -2px;
}
}
}
.row {
display: flex;
margin: 0 -5px;
.input {
box-sizing: border-box;
flex: 1 1 auto;
width: 50%;
padding: 0 5px;
}
}
.hint {
color: $darker-text-color;
a {
color: $highlight-text-color;
}
code {
border-radius: 3px;
padding: 0.2em 0.4em;
background: darken($ui-base-color, 12%);
}
}
span.hint {
display: block;
font-size: 12px;
margin-top: 4px;
}
p.hint {
margin-bottom: 15px;
color: $darker-text-color;
&.subtle-hint {
text-align: center;
font-size: 12px;
line-height: 18px;
margin-top: 15px;
margin-bottom: 0;
}
}
.card {
margin-bottom: 15px;
}
strong {
font-weight: 500;
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
font-weight: 700;
}
}
}
.input.with_floating_label {
.label_input {
display: flex;
& > label {
font-family: inherit;
font-size: 14px;
color: $primary-text-color;
font-weight: 500;
min-width: 150px;
flex: 0 0 auto;
}
input,
select {
flex: 1 1 auto;
}
}
&.select .hint {
margin-top: 6px;
margin-left: 150px;
}
}
.input.with_label {
.label_input > label {
font-family: inherit;
font-size: 14px;
color: $primary-text-color;
display: block;
margin-bottom: 8px;
word-wrap: break-word;
font-weight: 500;
}
.hint {
margin-top: 6px;
}
ul {
flex: 390px;
}
}
.input.with_block_label {
max-width: none;
& > label {
font-family: inherit;
font-size: 16px;
color: $primary-text-color;
display: block;
font-weight: 500;
padding-top: 5px;
}
.hint {
margin-bottom: 15px;
}
ul {
columns: 2;
}
}
.required abbr {
text-decoration: none;
color: lighten($error-value-color, 12%);
}
.fields-group {
margin-bottom: 25px;
.input:last-child {
margin-bottom: 0;
}
}
.fields-row {
display: flex;
margin: 0 -10px;
padding-top: 5px;
margin-bottom: 25px;
.input {
max-width: none;
}
&__column {
box-sizing: border-box;
padding: 0 10px;
flex: 1 1 auto;
min-height: 1px;
&-6 {
max-width: 50%;
}
}
.fields-group:last-child,
.fields-row__column.fields-group {
margin-bottom: 0;
}
@media screen and (max-width: $no-columns-breakpoint) {
display: block;
margin-bottom: 0;
&__column {
max-width: none;
}
.fields-group:last-child,
.fields-row__column.fields-group,
.fields-row__column {
margin-bottom: 25px;
}
}
}
.input.radio_buttons .radio label {
margin-bottom: 5px;
font-family: inherit;
font-size: 14px;
color: $primary-text-color;
display: block;
width: auto;
}
.check_boxes {
.checkbox {
label {
font-family: inherit;
font-size: 14px;
color: $primary-text-color;
display: inline-block;
width: auto;
position: relative;
padding-top: 5px;
padding-left: 25px;
flex: 1 1 auto;
}
input[type=checkbox] {
position: absolute;
left: 0;
top: 5px;
margin: 0;
}
}
}
.input.static .label_input__wrapper {
font-size: 16px;
padding: 10px;
border: 1px solid $dark-text-color;
border-radius: 4px;
}
input[type=text],
input[type=number],
input[type=email],
input[type=password],
textarea {
box-sizing: border-box;
font-size: 16px;
color: $primary-text-color;
display: block;
width: 100%;
outline: 0;
font-family: inherit;
resize: vertical;
background: darken($ui-base-color, 10%);
border: 1px solid darken($ui-base-color, 14%);
border-radius: 4px;
padding: 10px;
&:invalid {
box-shadow: none;
}
&:focus:invalid:not(:placeholder-shown) {
border-color: lighten($error-red, 12%);
}
&:required:valid {
border-color: $valid-value-color;
}
&:hover {
border-color: darken($ui-base-color, 20%);
}
&:active,
&:focus {
border-color: $highlight-text-color;
background: darken($ui-base-color, 8%);
}
}
.input.field_with_errors {
label {
color: lighten($error-red, 12%);
}
input[type=text],
input[type=number],
input[type=email],
input[type=password],
textarea,
select {
border-color: lighten($error-red, 12%);
}
.error {
display: block;
font-weight: 500;
color: lighten($error-red, 12%);
margin-top: 4px;
}
}
.input.disabled {
opacity: 0.5;
}
.actions {
margin-top: 30px;
display: flex;
&.actions--top {
margin-top: 0;
margin-bottom: 30px;
}
}
button,
.button,
.block-button {
display: block;
width: 100%;
border: 0;
border-radius: 4px;
background: $ui-highlight-color;
color: $primary-text-color;
font-size: 18px;
line-height: inherit;
height: auto;
padding: 10px;
text-transform: uppercase;
text-decoration: none;
text-align: center;
box-sizing: border-box;
cursor: pointer;
font-weight: 500;
outline: 0;
margin-bottom: 10px;
margin-right: 10px;
&:last-child {
margin-right: 0;
}
&:hover {
background-color: lighten($ui-highlight-color, 5%);
}
&:active,
&:focus {
background-color: darken($ui-highlight-color, 5%);
}
&:disabled:hover {
background-color: $ui-primary-color;
}
&.negative {
background: $error-value-color;
&:hover {
background-color: lighten($error-value-color, 5%);
}
&:active,
&:focus {
background-color: darken($error-value-color, 5%);
}
}
}
select {
appearance: none;
box-sizing: border-box;
font-size: 16px;
color: $primary-text-color;
display: block;
width: 100%;
outline: 0;
font-family: inherit;
resize: vertical;
background: darken($ui-base-color, 10%) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>") no-repeat right 8px center / auto 16px;
border: 1px solid darken($ui-base-color, 14%);
border-radius: 4px;
padding-left: 10px;
padding-right: 30px;
height: 41px;
}
h4 {
margin-bottom: 15px !important;
}
.label_input {
&__wrapper {
position: relative;
}
&__append {
position: absolute;
right: 3px;
top: 1px;
padding: 10px;
padding-bottom: 9px;
font-size: 16px;
color: $dark-text-color;
font-family: inherit;
pointer-events: none;
cursor: default;
max-width: 140px;
white-space: nowrap;
overflow: hidden;
&::after {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 1px;
width: 5px;
background-image: linear-gradient(to right, rgba(darken($ui-base-color, 10%), 0), darken($ui-base-color, 10%));
}
}
}
&__overlay-area {
position: relative;
&__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: rgba($ui-base-color, 0.65);
backdrop-filter: blur(2px);
border-radius: 4px;
&__content {
text-align: center;
&.rich-formatting {
&,
p {
color: $primary-text-color;
}
}
}
}
}
}
.block-icon {
display: block;
margin: 0 auto;
margin-bottom: 10px;
font-size: 24px;
}
.flash-message {
background: lighten($ui-base-color, 8%);
color: $darker-text-color;
border-radius: 4px;
padding: 15px 10px;
margin-bottom: 30px;
text-align: center;
&.notice {
border: 1px solid rgba($valid-value-color, 0.5);
background: rgba($valid-value-color, 0.25);
color: $valid-value-color;
}
&.alert {
border: 1px solid rgba($error-value-color, 0.5);
background: rgba($error-value-color, 0.25);
color: $error-value-color;
}
a {
display: inline-block;
color: $darker-text-color;
text-decoration: none;
&:hover {
color: $primary-text-color;
text-decoration: underline;
}
}
p {
margin-bottom: 15px;
}
.oauth-code {
outline: 0;
box-sizing: border-box;
display: block;
width: 100%;
border: 0;
padding: 10px;
font-family: $font-monospace, monospace;
background: $ui-base-color;
color: $primary-text-color;
font-size: 14px;
margin: 0;
&::-moz-focus-inner {
border: 0;
}
&::-moz-focus-inner,
&:focus,
&:active {
outline: 0 !important;
}
&:focus {
background: lighten($ui-base-color, 4%);
}
}
strong {
font-weight: 500;
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
font-weight: 700;
}
}
}
@media screen and (max-width: 740px) and (min-width: 441px) {
margin-top: 40px;
}
}
.form-footer {
margin-top: 30px;
text-align: center;
a {
color: $darker-text-color;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
.quick-nav {
list-style: none;
margin-bottom: 25px;
font-size: 14px;
li {
display: inline-block;
margin-right: 10px;
}
a {
color: $highlight-text-color;
text-transform: uppercase;
text-decoration: none;
font-weight: 700;
&:hover,
&:focus,
&:active {
color: lighten($highlight-text-color, 8%);
}
}
}
.oauth-prompt,
.follow-prompt {
margin-bottom: 30px;
color: $darker-text-color;
h2 {
font-size: 16px;
margin-bottom: 30px;
text-align: center;
}
strong {
color: $secondary-text-color;
font-weight: 500;
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
font-weight: 700;
}
}
}
@media screen and (max-width: 740px) and (min-width: 441px) {
margin-top: 40px;
}
}
.qr-wrapper {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.qr-code {
flex: 0 0 auto;
background: $simple-background-color;
padding: 4px;
margin: 0 10px 20px 0;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
display: inline-block;
svg {
display: block;
margin: 0;
}
}
.qr-alternative {
margin-bottom: 20px;
color: $secondary-text-color;
flex: 150px;
samp {
display: block;
font-size: 14px;
}
}
.table-form {
p {
margin-bottom: 15px;
strong {
font-weight: 500;
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
font-weight: 700;
}
}
}
}
}
.simple_form,
.table-form {
.warning {
box-sizing: border-box;
background: rgba($error-value-color, 0.5);
color: $primary-text-color;
text-shadow: 1px 1px 0 rgba($base-shadow-color, 0.3);
box-shadow: 0 2px 6px rgba($base-shadow-color, 0.4);
border-radius: 4px;
padding: 10px;
margin-bottom: 15px;
a {
color: $primary-text-color;
text-decoration: underline;
&:hover,
&:focus,
&:active {
text-decoration: none;
}
}
strong {
font-weight: 600;
display: block;
margin-bottom: 5px;
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
font-weight: 700;
}
}
.fa {
font-weight: 400;
}
}
}
}
.action-pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
.actions,
.pagination {
flex: 1 1 auto;
}
.actions {
padding: 30px 0;
padding-right: 20px;
flex: 0 0 auto;
}
}
.post-follow-actions {
text-align: center;
color: $darker-text-color;
div {
margin-bottom: 4px;
}
}
.alternative-login {
margin-top: 20px;
margin-bottom: 20px;
h4 {
font-size: 16px;
color: $primary-text-color;
text-align: center;
margin-bottom: 20px;
border: 0;
padding: 0;
}
.button {
display: block;
}
}
.scope-danger {
color: $warning-red;
}
.form_admin_settings_site_short_description,
.form_admin_settings_site_description,
.form_admin_settings_site_extended_description,
.form_admin_settings_site_terms,
.form_admin_settings_custom_css,
.form_admin_settings_closed_registrations_message {
textarea {
font-family: $font-monospace, monospace;
}
}
.input-copy {
background: darken($ui-base-color, 10%);
border: 1px solid darken($ui-base-color, 14%);
border-radius: 4px;
display: flex;
align-items: center;
padding-right: 4px;
position: relative;
top: 1px;
transition: border-color 300ms linear;
&__wrapper {
flex: 1 1 auto;
}
input[type=text] {
background: transparent;
border: 0;
padding: 10px;
font-size: 14px;
font-family: $font-monospace, monospace;
}
button {
flex: 0 0 auto;
margin: 4px;
text-transform: none;
font-weight: 400;
font-size: 14px;
padding: 7px 18px;
padding-bottom: 6px;
width: auto;
transition: background 300ms linear;
}
&.copied {
border-color: $valid-value-color;
transition: none;
button {
background: $valid-value-color;
transition: none;
}
}
}
.connection-prompt {
margin-bottom: 25px;
.fa-link {
background-color: darken($ui-base-color, 4%);
border-radius: 100%;
font-size: 24px;
padding: 10px;
}
&__column {
align-items: center;
display: flex;
flex: 1;
flex-direction: column;
flex-shrink: 1;
max-width: 50%;
&-sep {
align-self: center;
flex-grow: 0;
overflow: visible;
position: relative;
z-index: 1;
}
p {
word-break: break-word;
}
}
.account__avatar {
margin-bottom: 20px;
}
&__connection {
background-color: lighten($ui-base-color, 8%);
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
border-radius: 4px;
padding: 25px 10px;
position: relative;
text-align: center;
&::after {
background-color: darken($ui-base-color, 4%);
content: '';
display: block;
height: 100%;
left: 50%;
position: absolute;
top: 0;
width: 1px;
}
}
&__row {
align-items: flex-start;
display: flex;
flex-direction: row;
}
}

153
app/javascript/styles/bliss/introduction.scss Normal file
View File

@ -0,0 +1,153 @@
.introduction {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
@media screen and (max-width: 920px) {
background: darken($ui-base-color, 8%);
display: block !important;
}
&__pager {
background: darken($ui-base-color, 8%);
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
overflow: hidden;
}
&__pager,
&__frame {
border-radius: 10px;
width: 50vw;
min-width: 920px;
@media screen and (max-width: 920px) {
min-width: 0;
width: 100%;
border-radius: 0;
box-shadow: none;
}
}
&__frame-wrapper {
opacity: 0;
transition: opacity 500ms linear;
&.active {
opacity: 1;
transition: opacity 50ms linear;
}
}
&__frame {
overflow: hidden;
}
&__illustration {
height: 50vh;
@media screen and (max-width: 630px) {
height: auto;
}
img {
object-fit: cover;
display: block;
margin: 0;
width: 100%;
height: 100%;
}
}
&__text {
border-top: 2px solid $ui-highlight-color;
&--columnized {
display: flex;
& > div {
flex: 1 1 33.33%;
text-align: center;
padding: 25px;
padding-bottom: 30px;
}
@media screen and (max-width: 630px) {
display: block;
padding: 15px 0;
padding-bottom: 20px;
& > div {
padding: 10px 25px;
}
}
}
h3 {
font-size: 24px;
line-height: 1.5;
font-weight: 700;
margin-bottom: 10px;
}
p {
font-size: 16px;
line-height: 24px;
font-weight: 400;
color: $darker-text-color;
code {
display: inline-block;
background: darken($ui-base-color, 8%);
font-size: 15px;
border: 1px solid lighten($ui-base-color, 8%);
border-radius: 2px;
padding: 1px 3px;
}
}
&--centered {
padding: 25px;
padding-bottom: 30px;
text-align: center;
}
}
&__dots {
display: flex;
align-items: center;
justify-content: center;
padding: 25px;
@media screen and (max-width: 630px) {
display: none;
}
}
&__dot {
width: 14px;
height: 14px;
border-radius: 14px;
border: 1px solid $ui-highlight-color;
background: transparent;
margin: 0 3px;
cursor: pointer;
&:hover {
background: lighten($ui-base-color, 8%);
}
&.active {
cursor: default;
background: $ui-highlight-color;
}
}
&__action {
padding: 25px;
padding-top: 0;
display: flex;
align-items: center;
justify-content: center;
}
}

19
app/javascript/styles/bliss/lists.scss Normal file
View File

@ -0,0 +1,19 @@
.no-list {
list-style: none;
li {
display: inline-block;
margin: 0 5px;
}
}
.recovery-codes {
list-style: none;
margin: 0 auto;
li {
font-size: 125%;
line-height: 1.5;
letter-spacing: 1px;
}
}

26
app/javascript/styles/bliss/modal.scss Normal file
View File

@ -0,0 +1,26 @@
.modal-layout {
background: $ui-base-color url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-lighter-color)}"/></svg>') repeat-x bottom fixed;
display: flex;
flex-direction: column;
height: 100vh;
padding: 0;
}
.modal-layout__mastodon {
display: flex;
flex: 1;
flex-direction: column;
justify-content: flex-end;
> * {
flex: 1;
max-height: 235px;
background: url('../images/elephant_ui_plane.svg') no-repeat left bottom / contain;
}
}
@media screen and (max-width: 600px) {
.account-header {
margin-top: 0;
}
}

210
app/javascript/styles/bliss/polls.scss Normal file
View File

@ -0,0 +1,210 @@
.poll {
margin-top: 16px;
font-size: 14px;
li {
margin-bottom: 10px;
position: relative;
height: 18px + 12px;
}
&__chart {
position: absolute;
top: 0;
left: 0;
height: 100%;
display: inline-block;
border-radius: 4px;
background: darken($ui-primary-color, 14%);
&.leading {
background: $ui-highlight-color;
}
}
&__text {
position: relative;
display: inline-block;
padding: 6px 0;
line-height: 18px;
cursor: default;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
input[type=radio],
input[type=checkbox] {
display: none;
}
.autossugest-input {
flex: 1 1 auto;
}
input[type=text] {
display: block;
box-sizing: border-box;
width: 100%;
font-size: 14px;
color: $inverted-text-color;
outline: 0;
font-family: inherit;
background: $simple-background-color;
border: 1px solid darken($simple-background-color, 14%);
border-radius: 4px;
padding: 6px 10px;
&:focus {
border-color: $highlight-text-color;
}
}
&.selectable {
cursor: pointer;
}
&.editable {
display: flex;
align-items: center;
overflow: visible;
}
}
&__input {
display: inline-block;
position: relative;
border: 1px solid $ui-primary-color;
box-sizing: border-box;
width: 18px;
height: 18px;
flex: 0 0 auto;
margin-right: 10px;
top: -1px;
border-radius: 50%;
vertical-align: middle;
&.checkbox {
border-radius: 4px;
}
&.active {
border-color: $valid-value-color;
background: $valid-value-color;
}
}
&__number {
display: inline-block;
width: 36px;
font-weight: 700;
padding: 0 10px;
text-align: right;
}
&__footer {
padding-top: 6px;
padding-bottom: 5px;
color: $dark-text-color;
}
&__link {
display: inline;
background: transparent;
padding: 0;
margin: 0;
border: 0;
color: $dark-text-color;
text-decoration: underline;
font-size: inherit;
&:hover {
text-decoration: none;
}
&:active,
&:focus {
background-color: rgba($dark-text-color, .1);
}
}
.button {
height: 36px;
padding: 0 16px;
margin-right: 10px;
font-size: 14px;
}
}
.compose-form__poll-wrapper {
border-top: 1px solid darken($simple-background-color, 8%);
ul {
padding: 10px;
}
.poll__footer {
border-top: 1px solid darken($simple-background-color, 8%);
padding: 10px;
display: flex;
align-items: center;
button,
select {
flex: 1 1 50%;
}
}
.button.button-secondary {
font-size: 14px;
font-weight: 400;
padding: 6px 10px;
height: auto;
line-height: inherit;
color: $action-button-color;
border-color: $action-button-color;
margin-right: 5px;
}
li {
display: flex;
align-items: center;
.poll__text {
flex: 0 0 auto;
width: calc(100% - (23px + 6px));
margin-right: 6px;
}
}
select {
appearance: none;
box-sizing: border-box;
font-size: 14px;
color: $inverted-text-color;
display: inline-block;
width: auto;
outline: 0;
font-family: inherit;
background: $simple-background-color url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(darken($simple-background-color, 14%))}'/></svg>") no-repeat right 8px center / auto 16px;
border: 1px solid darken($simple-background-color, 14%);
border-radius: 4px;
padding: 6px 10px;
padding-right: 30px;
}
.icon-button.disabled {
color: darken($simple-background-color, 14%);
}
}
.muted .poll {
color: $dark-text-color;
&__chart {
background: rgba(darken($ui-primary-color, 14%), 0.2);
&.leading {
background: rgba($ui-highlight-color, 0.2);
}
}
}

95
app/javascript/styles/bliss/reset.scss Normal file
View File

@ -0,0 +1,95 @@
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html {
scrollbar-color: lighten($ui-base-color, 4%) rgba($base-overlay-background, 0.1);
}
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-thumb {
background: lighten($ui-base-color, 4%);
border: 0px none $base-border-color;
border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
background: lighten($ui-base-color, 6%);
}
::-webkit-scrollbar-thumb:active {
background: lighten($ui-base-color, 4%);
}
::-webkit-scrollbar-track {
border: 0px none $base-border-color;
border-radius: 0;
background: rgba($base-overlay-background, 0.1);
}
::-webkit-scrollbar-track:hover {
background: $ui-base-color;
}
::-webkit-scrollbar-track:active {
background: $ui-base-color;
}
::-webkit-scrollbar-corner {
background: transparent;
}

385
app/javascript/styles/bliss/rtl.scss Normal file
View File

@ -0,0 +1,385 @@
body.rtl {
direction: rtl;
.column-header > button {
text-align: right;
padding-left: 0;
padding-right: 15px;
}
.landing-page__logo {
margin-right: 0;
margin-left: 20px;
}
.landing-page .features-list .features-list__row .visual {
margin-left: 0;
margin-right: 15px;
}
.column-link__icon,
.column-header__icon {
margin-right: 0;
margin-left: 5px;
}
.compose-form .compose-form__buttons-wrapper .character-counter__wrapper {
margin-right: 0;
margin-left: 4px;
}
.navigation-bar__profile {
margin-left: 0;
margin-right: 8px;
}
.search__input {
padding-right: 10px;
padding-left: 30px;
}
.search__icon .fa {
right: auto;
left: 10px;
}
.columns-area {
direction: rtl;
}
.column-header__buttons {
left: 0;
right: auto;
margin-left: 0;
margin-right: -15px;
}
.column-inline-form .icon-button {
margin-left: 0;
margin-right: 5px;
}
.column-header__links .text-btn {
margin-left: 10px;
margin-right: 0;
}
.account__avatar-wrapper {
float: right;
}
.column-header__back-button {
padding-left: 5px;
padding-right: 0;
}
.column-header__setting-arrows {
float: left;
}
.setting-toggle__label {
margin-left: 0;
margin-right: 8px;
}
.status__avatar {
left: auto;
right: 10px;
}
.status,
.activity-stream .status.light {
padding-left: 10px;
padding-right: 68px;
}
.status__info .status__display-name,
.activity-stream .status.light .status__display-name {
padding-left: 25px;
padding-right: 0;
}
.activity-stream .pre-header {
padding-right: 68px;
padding-left: 0;
}
.status__prepend {
margin-left: 0;
margin-right: 68px;
}
.status__prepend-icon-wrapper {
left: auto;
right: -26px;
}
.activity-stream .pre-header .pre-header__icon {
left: auto;
right: 42px;
}
.account__avatar-overlay-overlay {
right: auto;
left: 0;
}
.column-back-button--slim-button {
right: auto;
left: 0;
}
.status__relative-time,
.activity-stream .status.light .status__header .status__meta {
float: left;
}
.status__action-bar {
&__counter {
margin-right: 0;
margin-left: 11px;
.status__action-bar-button {
margin-right: 0;
margin-left: 4px;
}
}
}
.status__action-bar-button {
float: right;
margin-right: 0;
margin-left: 18px;
}
.status__action-bar-dropdown {
float: right;
}
.privacy-dropdown__dropdown {
margin-left: 0;
margin-right: 40px;
}
.privacy-dropdown__option__icon {
margin-left: 10px;
margin-right: 0;
}
.detailed-status__display-name .display-name {
text-align: right;
}
.detailed-status__display-avatar {
margin-right: 0;
margin-left: 10px;
float: right;
}
.detailed-status__favorites,
.detailed-status__reblogs {
margin-left: 0;
margin-right: 6px;
}
.fa-ul {
margin-left: 2.14285714em;
}
.fa-li {
left: auto;
right: -2.14285714em;
}
.admin-wrapper {
direction: rtl;
}
.admin-wrapper .sidebar ul a i.fa,
a.table-action-link i.fa {
margin-right: 0;
margin-left: 5px;
}
.simple_form .check_boxes .checkbox label {
padding-left: 0;
padding-right: 25px;
}
.simple_form .input.with_label.boolean label.checkbox {
padding-left: 25px;
padding-right: 0;
}
.simple_form .check_boxes .checkbox input[type="checkbox"],
.simple_form .input.boolean input[type="checkbox"] {
left: auto;
right: 0;
}
.simple_form .input.radio_buttons .radio {
left: auto;
right: 0;
}
.simple_form .input.radio_buttons .radio > label {
padding-right: 28px;
padding-left: 0;
}
.simple_form .input-with-append .input input {
padding-left: 142px;
padding-right: 0;
}
.simple_form .input.boolean label.checkbox {
left: auto;
right: 0;
}
.simple_form .input.boolean .label_input,
.simple_form .input.boolean .hint {
padding-left: 0;
padding-right: 28px;
}
.simple_form .label_input__append {
right: auto;
left: 3px;
&::after {
right: auto;
left: 0;
background-image: linear-gradient(to left, rgba(darken($ui-base-color, 10%), 0), darken($ui-base-color, 10%));
}
}
.simple_form select {
background: darken($ui-base-color, 10%) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>") no-repeat left 8px center / auto 16px;
}
.table th,
.table td {
text-align: right;
}
.filters .filter-subset {
margin-right: 0;
margin-left: 45px;
}
.landing-page .header-wrapper .mascot {
right: 60px;
left: auto;
}
.landing-page__call-to-action .row__information-board {
direction: rtl;
}
.landing-page .header .hero .floats .float-1 {
left: -120px;
right: auto;
}
.landing-page .header .hero .floats .float-2 {
left: 210px;
right: auto;
}
.landing-page .header .hero .floats .float-3 {
left: 110px;
right: auto;
}
.landing-page .header .links .brand img {
left: 0;
}
.landing-page .fa-external-link {
padding-right: 5px;
padding-left: 0 !important;
}
.landing-page .features #mastodon-timeline {
margin-right: 0;
margin-left: 30px;
}
@media screen and (min-width: 631px) {
.column,
.drawer {
padding-left: 5px;
padding-right: 5px;
&:first-child {
padding-left: 5px;
padding-right: 10px;
}
}
.columns-area > div {
.column,
.drawer {
padding-left: 5px;
padding-right: 5px;
}
}
}
.public-layout {
.header {
.nav-button {
margin-left: 8px;
margin-right: 0;
}
}
.public-account-header__tabs {
margin-left: 0;
margin-right: 20px;
}
}
.landing-page__information {
.account__display-name {
margin-right: 0;
margin-left: 5px;
}
.account__avatar-wrapper {
margin-left: 12px;
margin-right: 0;
}
}
.card__bar .display-name {
margin-left: 0;
margin-right: 15px;
text-align: right;
}
.fa-chevron-left::before {
content: "\F054";
}
.fa-chevron-right::before {
content: "\F053";
}
.column-back-button__icon {
margin-right: 0;
margin-left: 5px;
}
.column-header__setting-arrows .column-header__setting-btn:last-child {
padding-left: 0;
padding-right: 10px;
}
.simple_form .input.radio_buttons .radio > label input {
left: auto;
right: 0;
}
}

163
app/javascript/styles/bliss/statuses.scss Normal file
View File

@ -0,0 +1,163 @@
.activity-stream {
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
border-radius: 4px;
overflow: hidden;
margin-bottom: 10px;
&--under-tabs {
border-radius: 0 0 4px 4px;
}
@media screen and (max-width: $no-gap-breakpoint) {
margin-bottom: 0;
border-radius: 0;
box-shadow: none;
}
&--headless {
border-radius: 0;
margin: 0;
box-shadow: none;
.detailed-status,
.status {
border-radius: 0 !important;
}
}
div[data-component] {
width: 100%;
}
.entry {
background: $ui-base-color;
.detailed-status,
.status,
.load-more {
animation: none;
}
&:last-child {
.detailed-status,
.status,
.load-more {
border-bottom: 0;
border-radius: 0 0 4px 4px;
}
}
&:first-child {
.detailed-status,
.status,
.load-more {
border-radius: 4px 4px 0 0;
}
&:last-child {
.detailed-status,
.status,
.load-more {
border-radius: 4px;
}
}
}
@media screen and (max-width: 740px) {
.detailed-status,
.status,
.load-more {
border-radius: 0 !important;
}
}
}
&--highlighted .entry {
background: lighten($ui-base-color, 8%);
}
}
.button.logo-button {
flex: 0 auto;
font-size: 14px;
background: $ui-highlight-color;
color: $primary-text-color;
text-transform: none;
line-height: 36px;
height: auto;
padding: 3px 15px;
border: 0;
svg {
width: 20px;
height: auto;
vertical-align: middle;
margin-right: 5px;
fill: $primary-text-color;
}
&:active,
&:focus,
&:hover {
background: lighten($ui-highlight-color, 10%);
}
&:disabled,
&.disabled {
&:active,
&:focus,
&:hover {
background: $ui-primary-color;
}
}
&.button--destructive {
&:active,
&:focus,
&:hover {
background: $error-red;
}
}
@media screen and (max-width: $no-gap-breakpoint) {
svg {
display: none;
}
}
}
.embed,
.public-layout {
.detailed-status {
padding: 15px;
}
.status {
padding: 15px 15px 15px (48px + 15px * 2);
min-height: 48px + 2px;
&__avatar {
left: 15px;
top: 17px;
}
&__content {
padding-top: 5px;
}
&__prepend {
margin-left: 48px + 15px * 2;
padding-top: 15px;
}
&__prepend-icon-wrapper {
left: -32px;
}
.media-gallery,
&__action-bar,
.video-player {
margin-top: 10px;
}
}
}

243
app/javascript/styles/bliss/tables.scss Normal file
View File

@ -0,0 +1,243 @@
.table {
width: 100%;
max-width: 100%;
border-spacing: 0;
border-collapse: collapse;
th,
td {
padding: 8px;
line-height: 18px;
vertical-align: top;
border-top: 1px solid $ui-base-color;
text-align: left;
background: darken($ui-base-color, 4%);
}
& > thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid $ui-base-color;
border-top: 0;
font-weight: 500;
}
& > tbody > tr > th {
font-weight: 500;
}
& > tbody > tr:nth-child(odd) > td,
& > tbody > tr:nth-child(odd) > th {
background: $ui-base-color;
}
a {
color: $highlight-text-color;
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
strong {
font-weight: 500;
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
font-weight: 700;
}
}
}
&.inline-table {
& > tbody > tr:nth-child(odd) {
& > td,
& > th {
background: transparent;
}
}
& > tbody > tr:first-child {
& > td,
& > th {
border-top: 0;
}
}
}
&.batch-table {
& > thead > tr > th {
background: $ui-base-color;
border-top: 1px solid darken($ui-base-color, 8%);
border-bottom: 1px solid darken($ui-base-color, 8%);
&:first-child {
border-radius: 4px 0 0;
border-left: 1px solid darken($ui-base-color, 8%);
}
&:last-child {
border-radius: 0 4px 0 0;
border-right: 1px solid darken($ui-base-color, 8%);
}
}
}
&--invites tbody td {
vertical-align: middle;
}
}
.table-wrapper {
overflow: auto;
margin-bottom: 20px;
}
samp {
font-family: $font-monospace, monospace;
}
button.table-action-link {
background: transparent;
border: 0;
font: inherit;
}
button.table-action-link,
a.table-action-link {
text-decoration: none;
display: inline-block;
margin-right: 5px;
padding: 0 10px;
color: $darker-text-color;
font-weight: 500;
&:hover {
color: $primary-text-color;
}
i.fa {
font-weight: 400;
margin-right: 5px;
}
&:first-child {
padding-left: 0;
}
}
.batch-table {
&__toolbar,
&__row {
display: flex;
&__select {
box-sizing: border-box;
padding: 8px 16px;
cursor: pointer;
min-height: 100%;
input {
margin-top: 8px;
}
&--aligned {
display: flex;
align-items: center;
input {
margin-top: 0;
}
}
@media screen and (max-width: $no-gap-breakpoint) {
display: none;
}
}
&__actions,
&__content {
padding: 8px 0;
padding-right: 16px;
flex: 1 1 auto;
}
}
&__toolbar {
border: 1px solid darken($ui-base-color, 8%);
background: $ui-base-color;
border-radius: 4px 0 0;
height: 47px;
align-items: center;
&__actions {
text-align: right;
padding-right: 16px - 5px;
}
@media screen and (max-width: $no-gap-breakpoint) {
display: none;
}
}
&__row {
border: 1px solid darken($ui-base-color, 8%);
border-top: 0;
background: darken($ui-base-color, 4%);
@media screen and (max-width: $no-gap-breakpoint) {
&:first-child {
border-top: 1px solid darken($ui-base-color, 8%);
}
}
&:hover {
background: darken($ui-base-color, 2%);
}
&:nth-child(even) {
background: $ui-base-color;
&:hover {
background: lighten($ui-base-color, 2%);
}
}
&__content {
padding-top: 12px;
padding-bottom: 16px;
&--unpadded {
padding: 0;
}
}
}
.status__content {
padding-top: 0;
summary {
display: list-item;
}
strong {
font-weight: 700;
}
}
.nothing-here {
border: 1px solid darken($ui-base-color, 8%);
border-top: 0;
box-shadow: none;
@media screen and (max-width: $no-gap-breakpoint) {
border-top: 1px solid darken($ui-base-color, 8%);
}
}
@media screen and (max-width: 870px) {
.accounts-table tbody td.optional {
display: none;
}
}
}

54
app/javascript/styles/bliss/variables.scss Normal file
View File

@ -0,0 +1,54 @@
// Commonly used web colors
$black: #000000; // Black
$white: #ffffff; // White
$success-green: #79bd9a !default; // Padua
$error-red: #df405a !default; // Cerise
$warning-red: #ff5050 !default; // Sunset Orange
$gold-star: #ca8f04 !default; // Dark Goldenrod
// Values from the classic Mastodon UI
$classic-base-color: #282c37; // Midnight Express
$classic-primary-color: #9baec8; // Echo Blue
$classic-secondary-color: #d9e1e8; // Pattens Blue
$classic-highlight-color: #2b90d9; // Summer Sky
// Variables for defaults in UI
$base-shadow-color: $black !default;
$base-overlay-background: $black !default;
$base-border-color: $white !default;
$simple-background-color: $white !default;
$valid-value-color: $success-green !default;
$error-value-color: $error-red !default;
// Tell UI to use selected colors
$ui-base-color: $classic-base-color !default; // Darkest
$ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest
$ui-primary-color: $classic-primary-color !default; // Lighter
$ui-secondary-color: $classic-secondary-color !default; // Lightest
$ui-highlight-color: $classic-highlight-color !default;
// Variables for texts
$primary-text-color: $white !default;
$darker-text-color: $ui-primary-color !default;
$dark-text-color: $ui-base-lighter-color !default;
$secondary-text-color: $ui-secondary-color !default;
$highlight-text-color: $ui-highlight-color !default;
$action-button-color: $ui-base-lighter-color !default;
// For texts on inverted backgrounds
$inverted-text-color: $ui-base-color !default;
$lighter-text-color: $ui-base-lighter-color !default;
$light-text-color: $ui-primary-color !default;
// Language codes that uses CJK fonts
$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
// Variables for components
$media-modal-media-max-width: 100%;
// put margins on top and bottom of image to avoid the screen covered by image.
$media-modal-media-max-height: 80%;
$no-gap-breakpoint: 415px;
$font-sans-serif: 'mastodon-font-sans-serif' !default;
$font-display: 'mastodon-font-display' !default;
$font-monospace: 'mastodon-font-monospace' !default;

539
app/javascript/styles/bliss/widgets.scss Normal file
View File

@ -0,0 +1,539 @@
.hero-widget {
margin-bottom: 10px;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
&__img {
width: 100%;
position: relative;
overflow: hidden;
border-radius: 4px 4px 0 0;
background: $base-shadow-color;
img {
object-fit: cover;
display: block;
width: 100%;
height: 100%;
margin: 0;
border-radius: 4px 4px 0 0;
}
}
&__text {
background: $ui-base-color;
padding: 20px;
border-radius: 0 0 4px 4px;
font-size: 15px;
color: $darker-text-color;
line-height: 20px;
word-wrap: break-word;
font-weight: 400;
.emojione {
width: 20px;
height: 20px;
margin: -3px 0 0;
}
p {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
em {
display: inline;
margin: 0;
padding: 0;
font-weight: 700;
background: transparent;
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: lighten($darker-text-color, 10%);
}
a {
color: $secondary-text-color;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
@media screen and (max-width: $no-gap-breakpoint) {
display: none;
}
}
.endorsements-widget {
margin-bottom: 10px;
padding-bottom: 10px;
h4 {
padding: 10px;
text-transform: uppercase;
font-weight: 700;
font-size: 13px;
color: $darker-text-color;
}
.account {
padding: 10px 0;
&:last-child {
border-bottom: 0;
}
.account__display-name {
display: flex;
align-items: center;
}
.account__avatar {
width: 44px;
height: 44px;
background-size: 44px 44px;
}
}
}
.box-widget {
padding: 20px;
border-radius: 4px;
background: $ui-base-color;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
}
.contact-widget,
.landing-page__information.contact-widget {
box-sizing: border-box;
padding: 20px;
min-height: 100%;
border-radius: 4px;
background: $ui-base-color;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
}
.contact-widget {
font-size: 15px;
color: $darker-text-color;
line-height: 20px;
word-wrap: break-word;
font-weight: 400;
strong {
font-weight: 500;
}
p {
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
}
&__mail {
margin-top: 10px;
a {
color: $primary-text-color;
text-decoration: none;
}
}
}
.moved-account-widget {
padding: 15px;
padding-bottom: 20px;
border-radius: 4px;
background: $ui-base-color;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
color: $secondary-text-color;
font-weight: 400;
margin-bottom: 10px;
strong,
a {
font-weight: 500;
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
font-weight: 700;
}
}
}
a {
color: inherit;
text-decoration: underline;
&.mention {
text-decoration: none;
span {
text-decoration: none;
}
&:focus,
&:hover,
&:active {
text-decoration: none;
span {
text-decoration: underline;
}
}
}
}
&__message {
margin-bottom: 15px;
.fa {
margin-right: 5px;
color: $darker-text-color;
}
}
&__card {
.detailed-status__display-avatar {
position: relative;
cursor: pointer;
}
.detailed-status__display-name {
margin-bottom: 0;
text-decoration: none;
span {
font-weight: 400;
}
}
}
}
.memoriam-widget {
padding: 20px;
border-radius: 4px;
background: $base-shadow-color;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
font-size: 14px;
color: $darker-text-color;
margin-bottom: 10px;
}
.page-header {
background: lighten($ui-base-color, 8%);
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
border-radius: 4px;
padding: 60px 15px;
text-align: center;
margin: 10px 0;
h1 {
color: $primary-text-color;
font-size: 36px;
line-height: 1.1;
font-weight: 700;
margin-bottom: 10px;
}
p {
font-size: 15px;
color: $darker-text-color;
}
@media screen and (max-width: $no-gap-breakpoint) {
margin-top: 0;
background: lighten($ui-base-color, 4%);
h1 {
font-size: 24px;
}
}
}
.directory {
background: $ui-base-color;
border-radius: 4px;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
&__tag {
box-sizing: border-box;
margin-bottom: 10px;
& > a,
& > div {
display: flex;
align-items: center;
justify-content: space-between;
background: $ui-base-color;
border-radius: 4px;
padding: 15px;
text-decoration: none;
color: inherit;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
}
& > a {
&:hover,
&:active,
&:focus {
background: lighten($ui-base-color, 8%);
}
}
&.active > a {
background: $ui-highlight-color;
cursor: default;
}
&.disabled > div {
opacity: 0.5;
cursor: default;
}
h4 {
flex: 1 1 auto;
font-size: 18px;
font-weight: 700;
color: $primary-text-color;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.fa {
color: $darker-text-color;
}
small {
display: block;
font-weight: 400;
font-size: 15px;
margin-top: 8px;
color: $darker-text-color;
}
}
&.active h4 {
&,
.fa,
small,
.trends__item__current {
color: $primary-text-color;
}
}
.avatar-stack {
flex: 0 0 auto;
width: (36px + 4px) * 3;
}
&.active .avatar-stack .account__avatar {
border-color: $ui-highlight-color;
}
.trends__item__current {
padding-right: 0;
}
}
}
.avatar-stack {
display: flex;
justify-content: flex-end;
.account__avatar {
flex: 0 0 auto;
width: 36px;
height: 36px;
border-radius: 50%;
position: relative;
margin-left: -10px;
background: darken($ui-base-color, 8%);
border: 2px solid $ui-base-color;
&:nth-child(1) {
z-index: 1;
}
&:nth-child(2) {
z-index: 2;
}
&:nth-child(3) {
z-index: 3;
}
}
}
.accounts-table {
width: 100%;
.account {
padding: 0;
border: 0;
}
strong {
font-weight: 700;
}
thead th {
text-align: center;
text-transform: uppercase;
color: $darker-text-color;
font-weight: 700;
padding: 10px;
&:first-child {
text-align: left;
}
}
tbody td {
padding: 15px 0;
vertical-align: middle;
border-bottom: 1px solid lighten($ui-base-color, 8%);
}
tbody tr:last-child td {
border-bottom: 0;
}
&__count {
width: 120px;
text-align: center;
font-size: 15px;
font-weight: 500;
color: $primary-text-color;
small {
display: block;
color: $darker-text-color;
font-weight: 400;
font-size: 14px;
}
}
&__comment {
width: 50%;
vertical-align: initial !important;
}
@media screen and (max-width: $no-gap-breakpoint) {
tbody td.optional {
display: none;
}
}
}
.moved-account-widget,
.memoriam-widget,
.box-widget,
.contact-widget,
.landing-page__information.contact-widget,
.directory,
.page-header {
@media screen and (max-width: $no-gap-breakpoint) {
margin-bottom: 0;
box-shadow: none;
border-radius: 0;
}
}
$maximum-width: 1235px;
$fluid-breakpoint: $maximum-width + 20px;
.statuses-grid {
min-height: 600px;
@media screen and (max-width: 640px) {
width: 100% !important; // Masonry layout is unnecessary at this width
}
&__item {
width: (960px - 20px) / 3;
@media screen and (max-width: $fluid-breakpoint) {
width: (940px - 20px) / 3;
}
@media screen and (max-width: 640px) {
width: 100%;
}
@media screen and (max-width: $no-gap-breakpoint) {
width: 100vw;
}
}
.detailed-status {
border-radius: 4px;
@media screen and (max-width: $no-gap-breakpoint) {
border-top: 1px solid lighten($ui-base-color, 16%);
}
&.compact {
.detailed-status__meta {
margin-top: 15px;
}
.status__content {
font-size: 15px;
line-height: 20px;
.emojione {
width: 20px;
height: 20px;
margin: -3px 0 0;
}
.status__content__spoiler-link {
line-height: 20px;
margin: 0;
}
}
.media-gallery,
.status-card,
.video-player {
margin-top: 15px;
}
}
}
}
.notice-widget {
margin-bottom: 10px;
color: $darker-text-color;
p {
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
}
a {
font-size: 14px;
line-height: 20px;
text-decoration: none;
font-weight: 500;
color: $ui-highlight-color;
&:hover,
&:focus,
&:active {
text-decoration: underline;
}
}
}

29
app/javascript/styles/custom.scss Normal file
View File

@ -0,0 +1,29 @@
@import 'large_center';
// custom sheet made on https://www.cipherbliss.com
// Commonly used web colors
$black: #fff; // Black
$white: #000; // White
$success-green: #6bbd77 !default; // Padua
$error-red: #d4839b !default; // Cerise
$warning-red: #528dc8 !default; // Sunset Orange
$gold-star: #00ec84 !default; // Dark Goldenrod
// User Interface Colors
$ui-base-color: #313644; // Midnight Express
$ui-base-lighter-color: #bdd2d6;
$ui-primary-color: #a1ccff; // Echo Blue
$ui-secondary-color: #7fc0ff; // Pattens Blue
$ui-highlight-color: #00a7d1; // Summer Sky
// Variables for components
$media-modal-media-max-width: 100%;
// put margins on top and bottom of image to avoid the screen covered by image.
$media-modal-media-max-height: 80%;
// fix
.media-gallery {
margin-left: -2em;
}
// then we import the rest of the world
@import 'application';

31
app/javascript/styles/large_center.scss Normal file
View File

@ -0,0 +1,31 @@
.column {
width: 35em;
}
.drawer__inner__mastodon > img {
padding: 1rem;
box-sizing: border-box;
}
.compose-form__publish-button-wrapper .button {
background: #a1bded
}
div[aria-label="Accueil"],
div[aria-label="Notifications"] {
width: 27em;
}
.media-gallery {
width: 115%;
max-height: 500px;
}
.media-gallery,
.status-card.compact.interactive {
margin-left: -4.4em;
}
.status-card__image-image {
width: 100% !important;
}

4
app/javascript/styles/mastodon-light/variables.scss
View File

@ -5,7 +5,7 @@ $white: #ffffff;
$classic-base-color: #282c37;
$classic-primary-color: #9baec8;
$classic-secondary-color: #d9e1e8;
$classic-highlight-color: #2b90d9;
$classic-highlight-color: #6274d9;
// Differences
$success-green: lighten(#3c754d, 8%);
@ -21,7 +21,7 @@ $ui-highlight-color: #2b90d9;
$primary-text-color: $black !default;
$darker-text-color: $classic-base-color !default;
$dark-text-color: #444b5d;
$dark-text-color: #45505d;
$action-button-color: #606984;
$inverted-text-color: $black !default;

22
app/javascript/styles/mastodon/variables.scss
View File

@ -41,6 +41,28 @@ $inverted-text-color: $ui-base-color !default;
$lighter-text-color: $ui-base-lighter-color !default;
$light-text-color: $ui-primary-color !default;
// custom sheet made on https://www.cipherbliss.com
// Commonly used web colors
$black: #fff; // Black
$white: #000; // White
$success-green: #6bbd77 !default; // Padua
$error-red: #d4839b !default; // Cerise
$warning-red: #528dc8 !default; // Sunset Orange
$gold-star: #00ec84 !default; // Dark Goldenrod
// User Interface Colors
$ui-base-color: #313644; // Midnight Express
$ui-base-lighter-color: #bdd2d6;
$ui-primary-color: #a1ccff; // Echo Blue
$ui-secondary-color: #7fc0ff; // Pattens Blue
$ui-highlight-color: #00a7d1; // Summer Sky
// Variables for components
$media-modal-media-max-width: 100%;
// put margins on top and bottom of image to avoid the screen covered by image.
$media-modal-media-max-height: 80%;
// fix
// Language codes that uses CJK fonts
$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;

16
app/models/user_group.rb Normal file
View File

@ -0,0 +1,16 @@
# == Schema Information
#
# Table name: user_groups
#
# id :bigint(8) not null, primary key
# name :string not null
# createdAt :datetime
# visibility :string
# account_id :integer
# creator_id :integer
# created_at :datetime not null
# updated_at :datetime not null
#
class UserGroup < ApplicationRecord
end

3
app/serializers/user_group_serializer.rb Normal file
View File

@ -0,0 +1,3 @@
class UserGroupSerializer < ActiveModel::Serializer
attributes :id, :name, :createAt, :visibility, :members
end

2
app/validators/status_length_validator.rb
View File

@ -1,7 +1,7 @@
# frozen_string_literal: true
class StatusLengthValidator < ActiveModel::Validator
MAX_CHARS = 500
MAX_CHARS = 7777
def validate(status)
return unless status.local? && !status.reblog?

6
app/views/admin/accounts/index.html.haml
View File

@ -43,7 +43,11 @@
%th= t('admin.accounts.role')
%th= t('admin.accounts.most_recent_ip')
%th= t('admin.accounts.most_recent_activity')
%th
%th links
%th sign in
%th statuses
%th following
%th followers
%tbody
= render @accounts

16
app/views/user_groups/_form.html.haml Normal file
View File

@ -0,0 +1,16 @@
.container.group-form
%p
WORK IN PROGRESS
= simple_form_for(@user_group) do |f|
= f.error_notification
.form-inputs
= f.input :name
= f.input :createdAt
= f.input :visibility
= f.input :account_id
.form-actions
= f.button :submit

10
app/views/user_groups/edit.html.haml Normal file
View File

@ -0,0 +1,10 @@
- content_for :page_title do
= 'Modifier le groupe'
%h1 Editing user_group
= render 'form'
= link_to 'Show', @user_group
\|
= link_to 'Back', user_groups_path

34
app/views/user_groups/index.html.haml Normal file
View File

@ -0,0 +1,34 @@
- content_for :page_title do
= 'Groupes'
.container
.page-header
%h1 Listing user_groups
%table.table-responsive.table-striped
%thead
%tr
%th Name
%th Createat
%th Visibility
%th Creator ID
%th Statuses count
%th
%th
%th
%tbody
- @user_groups.each do |user_group|
%tr
%td= user_group.name
%td= user_group.created_at
%td= user_group.visibility
%td= user_group.account_id
%td= "0"
%td= link_to 'Show', user_group
%td= link_to 'Edit', edit_user_group_path(user_group)
%td= link_to 'Destroy', user_group, :method => :delete, :data => { :confirm => 'Are you sure?' }
%br
.text-btn
= link_to 'New User group', new_user_group_path

8
app/views/user_groups/new.html.haml Normal file
View File

@ -0,0 +1,8 @@
- content_for :page_title do
= 'Nouveau groupe'
.container
%h1 New user_group
= render 'form'
= link_to 'Back', user_groups_path

18
app/views/user_groups/show.html.haml Normal file
View File

@ -0,0 +1,18 @@
%p#notice= notice
%p
%b Name:
= @user_group.name
%p
%b Createat:
= @user_group.created_at
%p
%b Visibility:
= @user_group.visibility
%p
%b Creator:
= @user_group.account_id
= link_to 'Edit', edit_user_group_path(@user_group)
\|
= link_to 'Back', user_groups_path

9
config/initializers/source.rb Normal file
View File

@ -0,0 +1,9 @@
# frozen_string_literal: true
module Mastodon
module Version
module_function
def source_base_url
'https://framagit.org/tykayn/mastodon'
end
end
end

2
config/locales/fr.yml
View File

@ -1142,7 +1142,7 @@ fr:
title: "%{instance} Conditions d’utilisation et politique de confidentialité"
themes:
contrast: Mastodon (Contraste élevé)
default: Mastodon (Sombre)
default: Bliss (Sombre)
mastodon-light: Mastodon (Clair)
time:
formats:

2
config/routes.rb
View File

@ -7,7 +7,7 @@ Sidekiq::Web.set :session_secret, Rails.application.secrets[:secret_key_base]
Rails.application.routes.draw do
root 'home#index'
resources :user_groups
mount LetterOpenerWeb::Engine, at: 'letter_opener' if Rails.env.development?
health_check_routes

3
config/settings.yml
View File

@ -2,7 +2,7 @@
# important settings can be changed from the admin interface.
defaults: &defaults
site_title: Mastodon
site_title: Mastodon Bliss
site_short_description: ''
site_description: ''
site_extended_description: ''
@ -53,6 +53,7 @@ defaults: &defaults
must_be_following_dm: false
reserved_usernames:
- admin
- tykayn
- support
- help
- root

4
config/themes.yml
View File

@ -1,3 +1,5 @@
default: styles/application.scss
default: styles/bliss.scss
custom: styles/custom.scss
mastodon: styles/custom.scss
contrast: styles/contrast.scss
mastodon-light: styles/mastodon-light.scss

62
config/webpack/development.js
View File

@ -1,61 +1,5 @@
// Note: You must restart bin/webpack-dev-server for changes to take effect
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const merge = require('webpack-merge');
const sharedConfig = require('./shared');
const { settings, output } = require('./configuration');
const environment = require('./environment')
const watchOptions = {};
if (process.env.VAGRANT) {
// If we are in Vagrant, we can't rely on inotify to update us with changed
// files, so we must poll instead. Here, we poll every second to see if
// anything has changed.
watchOptions.poll = 1000;
}
module.exports = merge(sharedConfig, {
mode: 'development',
cache: true,
devtool: 'cheap-module-eval-source-map',
stats: {
errorDetails: true,
},
output: {
pathinfo: true,
},
devServer: {
clientLogLevel: 'none',
compress: settings.dev_server.compress,
quiet: settings.dev_server.quiet,
disableHostCheck: settings.dev_server.disable_host_check,
host: settings.dev_server.host,
port: settings.dev_server.port,
https: settings.dev_server.https,
hot: settings.dev_server.hmr,
contentBase: output.path,
inline: settings.dev_server.inline,
useLocalIp: settings.dev_server.use_local_ip,
public: settings.dev_server.public,
publicPath: output.publicPath,
historyApiFallback: {
disableDotRule: true,
},
headers: settings.dev_server.headers,
overlay: settings.dev_server.overlay,
stats: {
entrypoints: false,
errorDetails: false,
modules: false,
moduleTrace: false,
},
watchOptions: Object.assign(
{},
settings.dev_server.watch_options,
watchOptions
),
writeToDisk: filePath => /ocr/.test(filePath),
},
});
module.exports = environment.toWebpackConfig()

3
config/webpack/environment.js Normal file
View File

@ -0,0 +1,3 @@
const { environment } = require('@rails/webpacker')
module.exports = environment

99
config/webpack/production.js
View File

@ -1,98 +1,5 @@
// Note: You must restart bin/webpack-dev-server for changes to take effect
process.env.NODE_ENV = process.env.NODE_ENV || 'production'
const path = require('path');
const { URL } = require('url');
const merge = require('webpack-merge');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const OfflinePlugin = require('offline-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const { output } = require('./configuration');
const sharedConfig = require('./shared');
const environment = require('./environment')
let attachmentHost;
if (process.env.S3_ENABLED === 'true') {
if (process.env.S3_ALIAS_HOST || process.env.S3_CLOUDFRONT_HOST) {
attachmentHost = process.env.S3_ALIAS_HOST || process.env.S3_CLOUDFRONT_HOST;
} else {
attachmentHost = process.env.S3_HOSTNAME || `s3-${process.env.S3_REGION || 'us-east-1'}.amazonaws.com`;
}
} else if (process.env.SWIFT_ENABLED === 'true') {
const { host } = new URL(process.env.SWIFT_OBJECT_URL);
attachmentHost = host;
} else {
attachmentHost = null;
}
module.exports = merge(sharedConfig, {
mode: 'production',
devtool: 'source-map',
stats: 'normal',
bail: true,
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
cache: true,
parallel: true,
sourceMap: true,
}),
],
},
plugins: [
new CompressionPlugin({
filename: '[path].gz[query]',
cache: true,
test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/,
}),
new BundleAnalyzerPlugin({ // generates report.html
analyzerMode: 'static',
openAnalyzer: false,
logLevel: 'silent', // do not bother Webpacker, who runs with --json and parses stdout
}),
new OfflinePlugin({
publicPath: output.publicPath, // sw.js must be served from the root to avoid scope issues
safeToUseOptionalCaches: true,
caches: {
main: [':rest:'],
additional: [':externals:'],
optional: [
'**/locale_*.js', // don't fetch every locale; the user only needs one
'**/*_polyfills-*.js', // the user may not need polyfills
'**/*.woff2', // the user may have system-fonts enabled
// images/audio can be cached on-demand
'**/*.png',
'**/*.jpg',
'**/*.jpeg',
'**/*.svg',
'**/*.mp3',
'**/*.ogg',
],
},
externals: [
'/emoji/1f602.svg', // used for emoji picker dropdown
'/emoji/sheet_10.png', // used in emoji-mart
],
excludes: [
'**/*.gz',
'**/*.map',
'stats.json',
'report.html',
// any browser that supports ServiceWorker will support woff2
'**/*.eot',
'**/*.ttf',
'**/*-webfont-*.svg',
'**/*.woff',
],
ServiceWorker: {
entry: `imports-loader?ATTACHMENT_HOST=>${encodeURIComponent(JSON.stringify(attachmentHost))}!${encodeURI(path.join(__dirname, '../../app/javascript/mastodon/service_worker/entry.js'))}`,
cacheName: 'mastodon',
output: '../assets/sw.js',
publicPath: '/sw.js',
minify: true,
},
}),
],
});
module.exports = environment.toWebpackConfig()

9
config/webpack/tests.js
View File

@ -1,8 +1,5 @@
// Note: You must restart bin/webpack-dev-server for changes to take effect
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const merge = require('webpack-merge');
const sharedConfig = require('./shared.js');
const environment = require('./environment')
module.exports = merge(sharedConfig, {
mode: 'development',
});
module.exports = environment.toWebpackConfig()

16
config/webpacker.yml
View File

@ -17,12 +17,13 @@ default: &default
cache_manifest: false
# Extract and emit a css file
extract_css: true
extract_css: false
static_assets_extensions:
- .jpg
- .jpeg
- .png
- .gif
- .tiff
- .ico
- .svg
@ -49,9 +50,11 @@ default: &default
development:
<<: *default
compile: true
# Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
check_yarn_integrity: true
# Reference: https://webpack.js.org/configuration/dev-server/
dev_server:
https: false
@ -71,12 +74,10 @@ development:
watch_options:
ignored: '**/node_modules/**'
test:
<<: *default
# CircleCI precompiles packs prior to running the tests.
# Also avoids race conditions in parallel_tests.
compile: false
compile: true
# Compile test packs to a separate directory
public_output_path: packs-test
@ -87,5 +88,8 @@ production:
# Production depends on precompilation of packs prior to booting for performance.
compile: false
# Extract and emit a css file
extract_css: true
# Cache manifest.json for performance
cache_manifest: true

2
db/migrate/20190807135426_add_comments_to_domain_blocks.rb
View File

@ -1,4 +1,4 @@
class AddCommentsToDomainBlocks < ActiveRecord::Migration[5.2]
class AddCommentsToDomainBlocks < ActiveRecordinteger::Migration[5.2]
def change
add_column :domain_blocks, :private_comment, :text
add_column :domain_blocks, :public_comment, :text

14
db/migrate/20190827120456_create_user_groups.rb Normal file
View File

@ -0,0 +1,14 @@
class CreateUserGroups < ActiveRecord::Migration[5.2]
def change
create_table :user_groups do |t|
t.string :name, null: false
t.datetime :createdAt
t.string :visibility
t.integer :account_id
t.integer :creator_id
t.integer :statuses_count
t.timestamps
end
end
end

10
db/schema.rb
View File

@ -752,6 +752,16 @@ ActiveRecord::Schema.define(version: 2019_10_31_163205) do
t.index ["uri"], name: "index_tombstones_on_uri"
end
create_table "user_groups", force: :cascade do |t|
t.string "name", null: false
t.datetime "createdAt"
t.string "visibility"
t.integer "account_id"
t.integer "creator_id"
t.datetime "created_at", null: false
t.datetime "updated_at", null: false
end
create_table "user_invite_requests", force: :cascade do |t|
t.bigint "user_id"
t.text "text"

15182
package-lock.json generated Executable file
View File

File diff suppressed because it is too large Load Diff

17
postcss.config.js
View File

@ -1,7 +1,12 @@
module.exports = ({ env }) => ({
plugins: {
autoprefixer: {},
'postcss-object-fit-images': {},
cssnano: env === 'production' ? {} : false,
module.exports = {
plugins: [
require('postcss-import'),
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
});
stage: 3
})
]
}

141
spec/controllers/user_groups_controller_spec.rb Normal file
View File

@ -0,0 +1,141 @@
require 'rails_helper'
# This spec was generated by rspec-rails when you ran the scaffold generator.
# It demonstrates how one might use RSpec to specify the controller code that
# was generated by Rails when you ran the scaffold generator.
#
# It assumes that the implementation code is generated by the rails scaffold
# generator. If you are using any extension libraries to generate different
# controller code, this generated spec may or may not pass.
#
# It only uses APIs available in rails and/or rspec-rails. There are a number
# of tools you can use to make these specs even more expressive, but we're
# sticking to rails and rspec-rails APIs to keep things simple and stable.
#
# Compared to earlier versions of this generator, there is very limited use of
# stubs and message expectations in this spec. Stubs are only used when there
# is no simpler way to get a handle on the object needed for the example.
# Message expectations are only used when there is no simpler way to specify
# that an instance is receiving a specific message.
#
# Also compared to earlier versions of this generator, there are no longer any
# expectations of assigns and templates rendered. These features have been
# removed from Rails core in Rails 5, but can be added back in via the
# `rails-controller-testing` gem.
RSpec.describe UserGroupsController, type: :controller do
# This should return the minimal set of attributes required to create a valid
# UserGroup. As you add validations to UserGroup, be sure to
# adjust the attributes here as well.
let(:valid_attributes) {
skip("Add a hash of attributes valid for your model")
}
let(:invalid_attributes) {
skip("Add a hash of attributes invalid for your model")
}
# This should return the minimal set of values that should be in the session
# in order to pass any filters (e.g. authentication) defined in
# UserGroupsController. Be sure to keep this updated too.
let(:valid_session) { {} }
describe "GET #index" do
it "returns a success response" do
UserGroup.create! valid_attributes
get :index, params: {}, session: valid_session
expect(response).to be_successful
end
end
describe "GET #show" do
it "returns a success response" do
user_group = UserGroup.create! valid_attributes
get :show, params: {id: user_group.to_param}, session: valid_session
expect(response).to be_successful
end
end
describe "GET #new" do
it "returns a success response" do
get :new, params: {}, session: valid_session
expect(response).to be_successful
end
end
describe "GET #edit" do
it "returns a success response" do
user_group = UserGroup.create! valid_attributes
get :edit, params: {id: user_group.to_param}, session: valid_session
expect(response).to be_successful
end
end
describe "POST #create" do
context "with valid params" do
it "creates a new UserGroup" do
expect {
post :create, params: {user_group: valid_attributes}, session: valid_session
}.to change(UserGroup, :count).by(1)
end
it "redirects to the created user_group" do
post :create, params: {user_group: valid_attributes}, session: valid_session
expect(response).to redirect_to(UserGroup.last)
end
end
context "with invalid params" do
it "returns a success response (i.e. to display the 'new' template)" do
post :create, params: {user_group: invalid_attributes}, session: valid_session
expect(response).to be_successful
end
end
end
describe "PUT #update" do
context "with valid params" do
let(:new_attributes) {
skip("Add a hash of attributes valid for your model")
}
it "updates the requested user_group" do
user_group = UserGroup.create! valid_attributes
put :update, params: {id: user_group.to_param, user_group: new_attributes}, session: valid_session
user_group.reload
skip("Add assertions for updated state")
end
it "redirects to the user_group" do
user_group = UserGroup.create! valid_attributes
put :update, params: {id: user_group.to_param, user_group: valid_attributes}, session: valid_session
expect(response).to redirect_to(user_group)
end
end
context "with invalid params" do
it "returns a success response (i.e. to display the 'edit' template)" do
user_group = UserGroup.create! valid_attributes
put :update, params: {id: user_group.to_param, user_group: invalid_attributes}, session: valid_session
expect(response).to be_successful
end
end
end
describe "DELETE #destroy" do
it "destroys the requested user_group" do
user_group = UserGroup.create! valid_attributes
expect {
delete :destroy, params: {id: user_group.to_param}, session: valid_session
}.to change(UserGroup, :count).by(-1)
end
it "redirects to the user_groups list" do
user_group = UserGroup.create! valid_attributes
delete :destroy, params: {id: user_group.to_param}, session: valid_session
expect(response).to redirect_to(user_groups_url)
end
end
end

6
spec/fabricators/user_group_fabricator.rb Normal file
View File

@ -0,0 +1,6 @@
Fabricator(:user_group) do
name "MyString"
createAt "2019-08-27 14:04:56"
visibility "MyString"
members ""
end

15
spec/helpers/user_groups_helper_spec.rb Normal file
View File

@ -0,0 +1,15 @@
require 'rails_helper'
# Specs in this file have access to a helper object that includes
# the UserGroupsHelper. For example:
#
# describe UserGroupsHelper do
# describe "string concat" do
# it "concats two strings with spaces" do
# expect(helper.concat_strings("this","that")).to eq("this that")
# end
# end
# end
RSpec.describe UserGroupsHelper, type: :helper do
pending "add some examples to (or delete) #{__FILE__}"
end

5
spec/models/user_group_spec.rb Normal file
View File

@ -0,0 +1,5 @@
require 'rails_helper'
RSpec.describe UserGroup, type: :model do
pending "add some examples to (or delete) #{__FILE__}"
end

10
spec/requests/user_groups_spec.rb Normal file
View File

@ -0,0 +1,10 @@
require 'rails_helper'
RSpec.describe "UserGroups", type: :request do
describe "GET /user_groups" do
it "works! (now write some real specs)" do
get user_groups_path
expect(response).to have_http_status(200)
end
end
end

38
spec/routing/user_groups_routing_spec.rb Normal file
View File

@ -0,0 +1,38 @@
require "rails_helper"
RSpec.describe UserGroupsController, type: :routing do
describe "routing" do
it "routes to #index" do
expect(:get => "/user_groups").to route_to("user_groups#index")
end
it "routes to #new" do
expect(:get => "/user_groups/new").to route_to("user_groups#new")
end
it "routes to #show" do
expect(:get => "/user_groups/1").to route_to("user_groups#show", :id => "1")
end
it "routes to #edit" do
expect(:get => "/user_groups/1/edit").to route_to("user_groups#edit", :id => "1")
end
it "routes to #create" do
expect(:post => "/user_groups").to route_to("user_groups#create")
end
it "routes to #update via PUT" do
expect(:put => "/user_groups/1").to route_to("user_groups#update", :id => "1")
end
it "routes to #update via PATCH" do
expect(:patch => "/user_groups/1").to route_to("user_groups#update", :id => "1")
end
it "routes to #destroy" do
expect(:delete => "/user_groups/1").to route_to("user_groups#destroy", :id => "1")
end
end
end

24
spec/views/user_groups/edit.html.haml_spec.rb Normal file
View File

@ -0,0 +1,24 @@
require 'rails_helper'
RSpec.describe "user_groups/edit", type: :view do
before(:each) do
@user_group = assign(:user_group, UserGroup.create!(
:name => "MyString",
:visibility => "MyString",
:members => ""
))
end
it "renders the edit user_group form" do
render
assert_select "form[action=?][method=?]", user_group_path(@user_group), "post" do
assert_select "input[name=?]", "user_group[name]"
assert_select "input[name=?]", "user_group[visibility]"
assert_select "input[name=?]", "user_group[members]"
end
end
end

25
spec/views/user_groups/index.html.haml_spec.rb Normal file
View File

@ -0,0 +1,25 @@
require 'rails_helper'
RSpec.describe "user_groups/index", type: :view do
before(:each) do
assign(:user_groups, [
UserGroup.create!(
:name => "Name",
:visibility => "Visibility",
:members => ""
),
UserGroup.create!(
:name => "Name",
:visibility => "Visibility",
:members => ""
)
])
end
it "renders a list of user_groups" do
render
assert_select "tr>td", :text => "Name".to_s, :count => 2
assert_select "tr>td", :text => "Visibility".to_s, :count => 2
assert_select "tr>td", :text => "".to_s, :count => 2
end
end

24
spec/views/user_groups/new.html.haml_spec.rb Normal file
View File

@ -0,0 +1,24 @@
require 'rails_helper'
RSpec.describe "user_groups/new", type: :view do
before(:each) do
assign(:user_group, UserGroup.new(
:name => "MyString",
:visibility => "MyString",
:members => ""
))
end
it "renders new user_group form" do
render
assert_select "form[action=?][method=?]", user_groups_path, "post" do
assert_select "input[name=?]", "user_group[name]"
assert_select "input[name=?]", "user_group[visibility]"
assert_select "input[name=?]", "user_group[members]"
end
end
end

18
spec/views/user_groups/show.html.haml_spec.rb Normal file
View File

@ -0,0 +1,18 @@
require 'rails_helper'
RSpec.describe "user_groups/show", type: :view do
before(:each) do
@user_group = assign(:user_group, UserGroup.create!(
:name => "Name",
:visibility => "Visibility",
:members => ""
))
end
it "renders attributes in <p>" do
render
expect(rendered).to match(/Name/)
expect(rendered).to match(/Visibility/)
expect(rendered).to match(//)
end
end