Merge tag 'v1.0.5+3.2.0' into hometown-v1.0.5+3.3.0
This commit is contained in:
3
app/javascript/styles/fairy-floss.scss
Normal file
3
app/javascript/styles/fairy-floss.scss
Normal file
@ -0,0 +1,3 @@
|
||||
@import 'fairy-floss/variables';
|
||||
@import 'application';
|
||||
@import 'fairy-floss/diff'
|
544
app/javascript/styles/fairy-floss/diff.scss
Normal file
544
app/javascript/styles/fairy-floss/diff.scss
Normal file
File diff suppressed because one or more lines are too long
70
app/javascript/styles/fairy-floss/variables.scss
Normal file
70
app/javascript/styles/fairy-floss/variables.scss
Normal file
@ -0,0 +1,70 @@
|
||||
// FAIRY FLOSS VARIABLES
|
||||
|
||||
// Purples
|
||||
$purple1: #2e2b3b;
|
||||
$purple2: #504b68;
|
||||
$purple3: #5f5676;
|
||||
$purple4: #c8c4d4;
|
||||
$purple5: #474059;
|
||||
$purpleicon: #ada6bf;
|
||||
$purpleborder: #5f5676;
|
||||
$purplescrollbar: #5a5475;
|
||||
$mint: #c2ffdf;
|
||||
$pink: #ffb8d1;
|
||||
$lemon: #fff683;
|
||||
$coral: #ff857f;
|
||||
|
||||
// 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: $purple1; // Midnight Express
|
||||
$classic-primary-color: $purple4; // Echo Blue
|
||||
$classic-secondary-color: #d9e1e8; // Pattens Blue
|
||||
$classic-highlight-color: #ff857f; // 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: $purpleicon !default;
|
||||
$secondary-text-color: $ui-secondary-color !default;
|
||||
$highlight-text-color: $ui-highlight-color !default;
|
||||
$action-button-color: $purpleicon !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;
|
3
app/javascript/styles/macaron.scss
Normal file
3
app/javascript/styles/macaron.scss
Normal file
@ -0,0 +1,3 @@
|
||||
@import 'macaron/variables';
|
||||
@import 'application';
|
||||
@import 'macaron/diff';
|
1097
app/javascript/styles/macaron/diff.scss
Normal file
1097
app/javascript/styles/macaron/diff.scss
Normal file
File diff suppressed because it is too large
Load Diff
48
app/javascript/styles/macaron/variables.scss
Normal file
48
app/javascript/styles/macaron/variables.scss
Normal file
@ -0,0 +1,48 @@
|
||||
// Dependent colors
|
||||
$black: #000000;
|
||||
$white: #ffffff;
|
||||
$purple: #c8c4dd;
|
||||
$blue: #c8dbee;
|
||||
$green: #dff6eb;
|
||||
$pink: #ffcbcb;
|
||||
$blueberry: #5971ad;
|
||||
$cream: #fffdef;
|
||||
$bilberry: #ad599c;
|
||||
|
||||
$classic-base-color: #282c37;
|
||||
$classic-primary-color: #9baec8;
|
||||
$classic-secondary-color: $green;
|
||||
$classic-highlight-color: #2b90d9;
|
||||
|
||||
// Differences
|
||||
$success-green: #3c754d;
|
||||
|
||||
$base-overlay-background: $white !default;
|
||||
$valid-value-color: $success-green !default;
|
||||
|
||||
$ui-base-color: $classic-secondary-color !default;
|
||||
$ui-base-lighter-color: $cream;
|
||||
$ui-primary-color: #9bcbed;
|
||||
$ui-secondary-color: $classic-base-color !default;
|
||||
$ui-highlight-color: $blueberry;
|
||||
|
||||
$primary-text-color: $black !default;
|
||||
$darker-text-color: $classic-base-color !default;
|
||||
$dark-text-color: #444b5d;
|
||||
$action-button-color: #606984;
|
||||
|
||||
$inverted-text-color: $black !default;
|
||||
$lighter-text-color: $classic-base-color !default;
|
||||
$light-text-color: #444b5d;
|
||||
|
||||
//Newly added colors
|
||||
$account-background-color: $white !default;
|
||||
|
||||
//Invert darkened and lightened colors
|
||||
@function darken($color, $amount) {
|
||||
@return hsl(hue($color), saturation($color), lightness($color) + $amount);
|
||||
}
|
||||
|
||||
@function lighten($color, $amount) {
|
||||
@return hsl(hue($color), saturation($color), lightness($color) - $amount);
|
||||
}
|
@ -228,6 +228,11 @@ h1 {
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.column-cell a h1 {
|
||||
margin: 0 8px 10px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 23px;
|
||||
line-height: 30px;
|
||||
|
@ -195,7 +195,7 @@ html {
|
||||
}
|
||||
|
||||
.drawer__inner__mastodon {
|
||||
background: $white 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-color)}"/></svg>') no-repeat bottom / 100% auto;
|
||||
background: $white;
|
||||
}
|
||||
|
||||
// Change the colors used in compose-form
|
||||
|
@ -579,7 +579,7 @@ $small-breakpoint: 960px;
|
||||
bottom: 25px;
|
||||
|
||||
img {
|
||||
height: 190px;
|
||||
height: 155px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
@ -688,6 +688,8 @@ $small-breakpoint: 960px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 50px;
|
||||
font-family: $font-display, sans-serif;
|
||||
font-weight: bold;
|
||||
|
||||
svg {
|
||||
fill: $primary-text-color;
|
||||
@ -864,6 +866,22 @@ $small-breakpoint: 960px;
|
||||
.brand {
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
|
||||
a.brand {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
h1 a.brand {
|
||||
color: $secondary-text-color;
|
||||
font-size: 3.8em;
|
||||
}
|
||||
|
||||
.originalmascotimg svg {
|
||||
width: 200px;
|
||||
fill: $secondary-text-color;
|
||||
margin-top: -25px;
|
||||
}
|
||||
|
||||
.brand__tagline {
|
||||
@ -883,4 +901,3 @@ $small-breakpoint: 960px;
|
||||
color: $dark-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -46,6 +46,12 @@ $content-width: 840px;
|
||||
position: relative;
|
||||
bottom: -2px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
height: 20px;
|
||||
position: relative;
|
||||
bottom: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
@ -68,15 +74,32 @@ $content-width: 840px;
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
margin: 40px auto;
|
||||
width: 100px;
|
||||
margin: 60px 0 0 20px;
|
||||
height: 100px;
|
||||
|
||||
h2 .brand {
|
||||
color: $primary-text-color;
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
font-weight: 400;
|
||||
padding-bottom: 40px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: $no-columns-breakpoint) {
|
||||
& > a:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo,
|
||||
.logo h2,
|
||||
.logo h2 .brand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ul {
|
||||
|
@ -138,6 +138,12 @@ body {
|
||||
height: auto;
|
||||
margin-top: -120px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
a.brand {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
@ -406,12 +406,6 @@
|
||||
color: $lighter-text-color;
|
||||
font-weight: 500;
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -821,10 +815,6 @@
|
||||
|
||||
&.status__content--with-spoiler {
|
||||
white-space: normal;
|
||||
|
||||
.status__content__text {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.emojione {
|
||||
@ -832,11 +822,82 @@
|
||||
height: 20px;
|
||||
margin: -3px 0 0;
|
||||
}
|
||||
.status__content__text {
|
||||
p,
|
||||
pre,
|
||||
blockquote {
|
||||
margin-bottom: 20px;
|
||||
white-space: pre-wrap;
|
||||
unicode-bidi: plaintext;
|
||||
|
||||
p {
|
||||
margin-bottom: 20px;
|
||||
white-space: pre-wrap;
|
||||
unicode-bidi: plaintext;
|
||||
&:last-child {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: 700;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding-left: 10px;
|
||||
border-left: 3px solid $darker-text-color;
|
||||
color: $darker-text-color;
|
||||
white-space: normal;
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
em,
|
||||
i {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin-left: 1em;
|
||||
margin-bottom: 1em;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
@ -845,7 +906,7 @@
|
||||
|
||||
a {
|
||||
color: $secondary-text-color;
|
||||
text-decoration: none;
|
||||
text-decoration: underline;
|
||||
unicode-bidi: isolate;
|
||||
|
||||
&:hover {
|
||||
@ -857,13 +918,9 @@
|
||||
}
|
||||
|
||||
&.mention {
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
|
||||
span {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fa {
|
||||
@ -901,6 +958,10 @@
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.article-type img {
|
||||
max-width: 95%;
|
||||
}
|
||||
}
|
||||
|
||||
.announcements__item__content {
|
||||
@ -1177,6 +1238,7 @@
|
||||
.status__action-bar-dropdown {
|
||||
height: 23.15px;
|
||||
width: 23.15px;
|
||||
margin-right: 18px;
|
||||
}
|
||||
|
||||
.detailed-status__action-bar-dropdown {
|
||||
@ -2027,6 +2089,13 @@ a.account__display-name {
|
||||
width: 285px;
|
||||
pointer-events: auto;
|
||||
height: 100%;
|
||||
|
||||
@media screen and (max-width: 1550px) {
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -2467,6 +2536,12 @@ a.account__display-name {
|
||||
height: calc(100% - 10px);
|
||||
overflow-y: hidden;
|
||||
|
||||
@media screen and (max-width: 1550px) {
|
||||
height: auto;
|
||||
min-height: calc(100% - 10px);
|
||||
overflow-y: visible;
|
||||
}
|
||||
|
||||
.navigation-bar {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
@ -2493,6 +2568,11 @@ a.account__display-name {
|
||||
background-color: $white;
|
||||
border-radius: 4px 4px 0 0;
|
||||
flex: 0 1 auto;
|
||||
|
||||
@media screen and (max-width: 1550px) {
|
||||
overflow-y: visible;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.autosuggest-textarea__textarea {
|
||||
@ -2558,12 +2638,12 @@ a.account__display-name {
|
||||
}
|
||||
|
||||
.drawer__inner__mastodon {
|
||||
background: lighten($ui-base-color, 13%) 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-color)}"/></svg>') no-repeat bottom / 100% auto;
|
||||
background: lighten($ui-base-color, 13%);
|
||||
flex: 1;
|
||||
min-height: 47px;
|
||||
display: none;
|
||||
|
||||
> img {
|
||||
> img, svg {
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
object-position: bottom left;
|
||||
@ -2575,7 +2655,7 @@ a.account__display-name {
|
||||
}
|
||||
|
||||
@media screen and (min-height: 640px) {
|
||||
display: block;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2801,6 +2881,15 @@ a.account__display-name {
|
||||
border-color: $ui-highlight-color;
|
||||
}
|
||||
|
||||
label[for="is-exclusive-checkbox"] {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.is-exclusive-checkbox {
|
||||
transform: scale(0.7);
|
||||
transform-origin: bottom;
|
||||
}
|
||||
|
||||
.column-link {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
color: $primary-text-color;
|
||||
@ -3301,7 +3390,7 @@ a.status-card.compact:hover {
|
||||
}
|
||||
|
||||
&__label {
|
||||
margin-top: 30px;
|
||||
margin-top: 0px;
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
@ -7257,3 +7346,21 @@ noscript {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer__inner__mastodon svg#hometownlogo {
|
||||
box-sizing: border-box;
|
||||
fill: $secondary-text-color;
|
||||
margin: 0 0 10px 10px;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
div.status__content,
|
||||
div.status__content--with-action,
|
||||
div.status__content--with-spoiler {
|
||||
p {
|
||||
span.show_more_button {
|
||||
display: block;
|
||||
margin: 0.25rem 0 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -257,6 +257,29 @@
|
||||
}
|
||||
}
|
||||
|
||||
.originalhero {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: space-between;
|
||||
|
||||
svg {
|
||||
fill: $secondary-text-color;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
flex-grow: 2;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
font-family: $font-display, sans-serif;
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.public-layout {
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
padding-top: 48px;
|
||||
@ -322,6 +345,7 @@
|
||||
.brand {
|
||||
display: block;
|
||||
padding: 15px;
|
||||
white-space: nowrap;
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
@ -476,8 +500,42 @@
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.originalheader {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: space-between;
|
||||
|
||||
svg {
|
||||
fill: $secondary-text-color;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
flex-grow: 2;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
font-family: $font-display, sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
height: 200px;
|
||||
|
||||
.originalheader {
|
||||
svg {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -15,7 +15,6 @@
|
||||
> * {
|
||||
flex: 1;
|
||||
max-height: 235px;
|
||||
background: url('../images/elephant_ui_plane.svg') no-repeat left bottom / contain;
|
||||
}
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user