Verified Commit 2d5c1e56 authored by Morgan Bazalgette's avatar Morgan Bazalgette Committed by Haelwenn

Pleroma theme for mastofe

- 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↵
parent 6de2f40b
......@@ -92,7 +92,7 @@
}
a {
color: $secondary-text-color;
color: $pleroma-links;
text-decoration: none;
&:hover {
......
......@@ -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%;
......
......@@ -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})` }}>
......
......@@ -679,7 +679,7 @@
}
a {
color: $secondary-text-color;
color: $pleroma-links;
text-decoration: none;
&:hover {
......@@ -1779,6 +1779,8 @@ a.account__display-name {
> .scrollable {
background: $ui-base-color;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
}
......@@ -1792,7 +1794,7 @@ a.account__display-name {
}
.drawer {
width: 300px;
width: 330px;
box-sizing: border-box;
display: flex;
flex-direction: column;
......@@ -1861,7 +1863,7 @@ a.account__display-name {
.column,
.drawer {
flex: 0 0 auto;
flex: 1 1 auto;
padding: 10px;
padding-left: 5px;
padding-right: 5px;
......@@ -1906,6 +1908,7 @@ a.account__display-name {
overflow-y: auto;
width: 100%;
height: 100%;
border-radius: 2px;
&.darker {
background: $ui-base-color;
......@@ -1942,6 +1945,7 @@ a.account__display-name {
margin-bottom: 10px;
display: flex;
flex-direction: row;
border-radius: 2px;
a {
transition: background 100ms ease-in;
......@@ -2692,6 +2696,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;
......
......@@ -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;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment