Commit 8e313ee2 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 e079a786
......@@ -20,7 +20,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})` }}>
......
......@@ -667,7 +667,7 @@
}
a {
color: $secondary-text-color;
color: $pleroma-links;
text-decoration: none;
&:hover {
......@@ -1815,6 +1815,8 @@ a.account__display-name {
> .scrollable {
background: $ui-base-color;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
}
......@@ -1828,7 +1830,7 @@ a.account__display-name {
}
.drawer {
width: 300px;
width: 330px;
box-sizing: border-box;
display: flex;
flex-direction: column;
......@@ -1897,7 +1899,7 @@ a.account__display-name {
.column,
.drawer {
flex: 0 0 auto;
flex: 1 1 auto;
padding: 10px;
padding-left: 5px;
padding-right: 5px;
......@@ -1942,6 +1944,7 @@ a.account__display-name {
overflow-y: auto;
width: 100%;
height: 100%;
border-radius: 2px;
&.darker {
background: $ui-base-color;
......@@ -1978,6 +1981,7 @@ a.account__display-name {
margin-bottom: 10px;
display: flex;
flex-direction: row;
border-radius: 2px;
a {
transition: background 100ms ease-in;
......@@ -2679,6 +2683,8 @@ a.status-card {
z-index: 2;
outline: 0;
overflow: hidden;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
& > button {
margin: 0;
......@@ -3435,6 +3441,7 @@ a.status-card {
color: $darker-text-color;
font-size: 14px;
margin: 0;
border-radius: 2px;
&::-moz-focus-inner {
border: 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