AkkomaGang/masto-fe
2
2
Fork 1
Code Issues 3 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 5ad5c3bbd4
commit a872844567
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

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

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

@ -8,11 +8,17 @@ $gold-star: #ca8f04; // Dark Goldenrod
$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
$classic-base-color: #282c37; // Midnight Express
$classic-primary-color: #9baec8; // Echo Blue
$classic-secondary-color: #d9e1e8; // Pattens Blue
$classic-highlight-color: #2b90d9; // Summer Sky
$classic-base-color: $pleroma-bg;
$classic-primary-color: #9baec8;
$classic-secondary-color: #d9e1e8;
$classic-highlight-color: #d8a070;
// Variables for defaults in UI
$base-shadow-color: $black !default;
@ -51,9 +57,9 @@ $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;
$font-sans-serif: sans-serif !default;
$font-display: sans-serif !default;
$font-monospace: monospace !default;
// Avatar border size (8% default, 100% for rounded avatars)
$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 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 (
<div style={{ ...style, position: 'absolute', width: 285 }}>
<div style={{ ...style, position: 'absolute', width: 315 }}>
<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 }) => (
<div className='search-popout' style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})` }}>

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

@ -669,7 +669,7 @@
}
a {
color: $secondary-text-color;
color: $pleroma-links;
text-decoration: none;
&:hover {
@ -1862,6 +1862,8 @@ a.account__display-name {
> .scrollable {
background: $ui-base-color;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
}
@ -1875,7 +1877,7 @@ a.account__display-name {
}
.drawer {
width: 300px;
width: 330px;
box-sizing: border-box;
display: flex;
flex-direction: column;
@ -1944,7 +1946,7 @@ a.account__display-name {
.column,
.drawer {
flex: 0 0 auto;
flex: 1 1 auto;
padding: 10px;
padding-left: 5px;
padding-right: 5px;
@ -1989,6 +1991,7 @@ a.account__display-name {
overflow-y: auto;
width: 100%;
height: 100%;
border-radius: 2px;
&.darker {
background: $ui-base-color;
@ -2025,6 +2028,7 @@ a.account__display-name {
margin-bottom: 10px;
display: flex;
flex-direction: row;
border-radius: 2px;
a {
transition: background 100ms ease-in;
@ -2775,6 +2779,8 @@ a.status-card.compact:hover {
z-index: 2;
outline: 0;
overflow: hidden;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
& > button {
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
$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
$classic-base-color: #282c37; // Midnight Express
$classic-primary-color: #9baec8; // Echo Blue
$classic-secondary-color: #d9e1e8; // Pattens Blue
$classic-highlight-color: #2b90d9; // Summer Sky
$classic-base-color: $pleroma-bg;
$classic-primary-color: #9baec8;
$classic-secondary-color: #d9e1e8;
$classic-highlight-color: #d8a070;
// Variables for defaults in UI
$base-shadow-color: $black !default;