AkkomaGang/masto-fe
2
2
Fork 0
Code Issues 4 Pull requests Projects Releases Wiki Activity

Pleroma theme for mastofe

Browse source 
- resize columns dynamically, with min width of 330↵
- Change colours of mastodon frontend↵
- make avatars circled↵
- add slight hint of rounding on main ui components↵
This commit is contained in:
Morgan Bazalgette 2018-03-31 16:31:39 +02:00 committed by Haelwenn (lanodan) Monnier
parent 1d2b7066c9
commit 6d3dfe0ed4
No known key found for this signature in database
GPG key ID: D5B7A8E43C997DEE
5 changed files with 34 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/javascript/flavours/glitch/styles/components/status.scss
View file

@ -104,7 +104,7 @@
} }
a { a {
color: $secondary-text-color; color: $pleroma-links;
text-decoration: none; text-decoration: none;
&:hover { &:hover {

20
app/javascript/flavours/glitch/styles/variables.scss
View file

@ -8,11 +8,17 @@ $gold-star: #ca8f04; // Dark Goldenrod
$red-bookmark: $warning-red; $red-bookmark: $warning-red;
// Pleroma-Dark colors
$pleroma-bg: #121a24;
$pleroma-fg: #182230;
$pleroma-text: #b9b9ba;
$pleroma-links: #d8a070;
// Values from the classic Mastodon UI // Values from the classic Mastodon UI
$classic-base-color: #282c37; // Midnight Express $classic-base-color: $pleroma-bg;
$classic-primary-color: #9baec8; // Echo Blue $classic-primary-color: #9baec8;
$classic-secondary-color: #d9e1e8; // Pattens Blue $classic-secondary-color: #d9e1e8;
$classic-highlight-color: #2b90d9; // Summer Sky $classic-highlight-color: #d8a070;
// Variables for defaults in UI // Variables for defaults in UI
$base-shadow-color: $black !default; $base-shadow-color: $black !default;
@ -51,9 +57,9 @@ $media-modal-media-max-height: 80%;
$no-gap-breakpoint: 415px; $no-gap-breakpoint: 415px;
$font-sans-serif: 'mastodon-font-sans-serif' !default; $font-sans-serif: sans-serif !default;
$font-display: 'mastodon-font-display' !default; $font-display: sans-serif !default;
$font-monospace: 'mastodon-font-monospace' !default; $font-monospace: monospace !default;
// Avatar border size (8% default, 100% for rounded avatars) // Avatar border size (8% default, 100% for rounded avatars)
$ui-avatar-border-size: 8%; $ui-avatar-border-size: 8%;

2
app/javascript/mastodon/features/compose/components/search.js
View file

@ -21,7 +21,7 @@ class SearchPopout extends React.PureComponent {
const { style } = this.props; const { style } = this.props;
const extraInformation = searchEnabled ? <FormattedMessage id='search_popout.tips.full_text' defaultMessage='Simple text returns statuses you have written, favourited, boosted, or have been mentioned in, as well as matching usernames, display names, and hashtags.' /> : <FormattedMessage id='search_popout.tips.text' defaultMessage='Simple text returns matching display names, usernames and hashtags' />; const extraInformation = searchEnabled ? <FormattedMessage id='search_popout.tips.full_text' defaultMessage='Simple text returns statuses you have written, favourited, boosted, or have been mentioned in, as well as matching usernames, display names, and hashtags.' /> : <FormattedMessage id='search_popout.tips.text' defaultMessage='Simple text returns matching display names, usernames and hashtags' />;
return ( return (
<div style={{ ...style, position: 'absolute', width: 285, zIndex: 2 }}> <div style={{ ...style, position: 'absolute', width: 315, zIndex: 2 }}>
<Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}> <Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
{({ opacity, scaleX, scaleY }) => ( {({ opacity, scaleX, scaleY }) => (
<div className='search-popout' style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})` }}> <div className='search-popout' style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})` }}>

12
app/javascript/styles/mastodon/components.scss
View file

@ -801,7 +801,7 @@
} }
a { a {
color: $secondary-text-color; color: $pleroma-links;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -1982,6 +1982,8 @@ a.account__display-name {
> .scrollable { > .scrollable {
background: $ui-base-color; background: $ui-base-color;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
} }
} }
@ -1994,7 +1996,7 @@ a.account__display-name {
} }
.drawer { .drawer {
width: 300px; width: 330px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -2014,7 +2016,7 @@ a.account__display-name {
.column, .column,
.drawer { .drawer {
flex: 1 1 100%; flex: 1 1 auto;
overflow: hidden; overflow: hidden;
} }
@ -2442,6 +2444,7 @@ a.account__display-name {
overflow-y: auto; overflow-y: auto;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 2px;
&.darker { &.darker {
background: $ui-base-color; background: $ui-base-color;
@ -2483,6 +2486,7 @@ a.account__display-name {
margin-bottom: 10px; margin-bottom: 10px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
border-radius: 2px;
a { a {
transition: background 100ms ease-in; transition: background 100ms ease-in;
@ -3215,6 +3219,8 @@ a.status-card.compact:hover {
z-index: 2; z-index: 2;
outline: 0; outline: 0;
overflow: hidden; overflow: hidden;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
& > button { & > button {
margin: 0; margin: 0;

14
app/javascript/styles/mastodon/variables.scss
View file

@ -6,11 +6,17 @@ $error-red: #df405a !default; // Cerise
$warning-red: #ff5050 !default; // Sunset Orange $warning-red: #ff5050 !default; // Sunset Orange
$gold-star: #ca8f04 !default; // Dark Goldenrod $gold-star: #ca8f04 !default; // Dark Goldenrod
// Pleroma-Dark colors
$pleroma-bg: #121a24;
$pleroma-fg: #182230;
$pleroma-text: #b9b9ba;
$pleroma-links: #d8a070;
// Values from the classic Mastodon UI // Values from the classic Mastodon UI
$classic-base-color: #282c37; // Midnight Express $classic-base-color: $pleroma-bg;
$classic-primary-color: #9baec8; // Echo Blue $classic-primary-color: #9baec8;
$classic-secondary-color: #d9e1e8; // Pattens Blue $classic-secondary-color: #d9e1e8;
$classic-highlight-color: #2b90d9; // Summer Sky $classic-highlight-color: #d8a070;
// Variables for defaults in UI // Variables for defaults in UI
$base-shadow-color: $black !default; $base-shadow-color: $black !default;