forked from AkkomaGang/akkoma-fe
commit
f47a0ff0ef
8 changed files with 60 additions and 27 deletions
37
src/App.scss
37
src/App.scss
|
@ -29,6 +29,11 @@ a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button{
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
@ -63,7 +68,7 @@ nav {
|
||||||
padding-right: 20px;
|
padding-right: 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-basis: 920px;
|
flex-basis: 970px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
@ -99,8 +104,7 @@ main-router {
|
||||||
.panel-heading {
|
.panel-heading {
|
||||||
border-radius: 0.5em 0.5em 0 0;
|
border-radius: 0.5em 0.5em 0 0;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
padding-top: 0.3em;
|
padding: 0.6em 0 0.5em;
|
||||||
padding-bottom: 0.3em;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 1.3em;
|
font-size: 1.3em;
|
||||||
}
|
}
|
||||||
|
@ -110,6 +114,7 @@ main-router {
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-body > p {
|
.panel-body > p {
|
||||||
|
line-height: 18px;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
@ -117,7 +122,7 @@ main-router {
|
||||||
|
|
||||||
#content {
|
#content {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
max-width: 920px;
|
max-width: 980px;
|
||||||
border-radius: 1em;
|
border-radius: 1em;
|
||||||
padding-bottom: 1em;
|
padding-bottom: 1em;
|
||||||
background-color: rgba(0,0,0,0.1);
|
background-color: rgba(0,0,0,0.1);
|
||||||
|
@ -125,7 +130,7 @@ main-router {
|
||||||
|
|
||||||
.media-body {
|
.media-body {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding-left: 0.3em;
|
padding-left: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container > * {
|
.container > * {
|
||||||
|
@ -133,28 +138,37 @@ main-router {
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-info {
|
.user-info {
|
||||||
|
color: white;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
img {
|
img {
|
||||||
border: 3px solid;
|
border: 2px solid;
|
||||||
border-radius: 0.5em
|
border-radius: 0.5em
|
||||||
}
|
}
|
||||||
|
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
|
||||||
|
.user-name{
|
||||||
|
margin-top: 0.2em;
|
||||||
|
}
|
||||||
.user-screen-name {
|
.user-screen-name {
|
||||||
|
margin-top: 0.3em;
|
||||||
font-weight: lighter;
|
font-weight: lighter;
|
||||||
|
padding-right: 0.1em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-counts {
|
.user-counts {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 1em 1em 0em 1em;
|
line-height:16px;
|
||||||
|
padding: 1em 1.5em 0em 1em;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-count {
|
.user-count {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
||||||
h5 {
|
h5 {
|
||||||
font-weight: lighter;
|
font-size:1em;
|
||||||
margin: 0;
|
font-weight: bolder;
|
||||||
|
margin: 0 0 0.25em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -196,7 +210,7 @@ status-text-container {
|
||||||
}
|
}
|
||||||
|
|
||||||
.retweet-info {
|
.retweet-info {
|
||||||
padding: 0.3em;
|
padding: 0.7em 0 0 0.6em;
|
||||||
|
|
||||||
.media-left {
|
.media-left {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -214,6 +228,7 @@ status-text-container {
|
||||||
small {
|
small {
|
||||||
font-weight: lighter;
|
font-weight: lighter;
|
||||||
}
|
}
|
||||||
|
margin-bottom: 0.3em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
nav {
|
nav {
|
||||||
|
|
|
@ -39,7 +39,7 @@
|
||||||
.attachment {
|
.attachment {
|
||||||
flex: 1 0 30%;
|
flex: 1 0 30%;
|
||||||
display: flex;
|
display: flex;
|
||||||
margin: 0.2em;
|
margin: 0.5em 0.8em 0.6em 0.1em;
|
||||||
align-self: flex-start;
|
align-self: flex-start;
|
||||||
|
|
||||||
&.html {
|
&.html {
|
||||||
|
@ -79,6 +79,7 @@
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
margin-right: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.oembed {
|
.oembed {
|
||||||
|
@ -91,6 +92,8 @@
|
||||||
img {
|
img {
|
||||||
border: 0px;
|
border: 0px;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -39,8 +39,7 @@
|
||||||
|
|
||||||
.nav-panel li {
|
.nav-panel li {
|
||||||
border-bottom: 1px solid;
|
border-bottom: 1px solid;
|
||||||
padding: 0.5em;
|
padding: 0.75em 0.85em 0.6em;
|
||||||
padding-left: 1em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-panel li:last-child {
|
.nav-panel li:last-child {
|
||||||
|
|
|
@ -1,13 +1,13 @@
|
||||||
@import '../../_variables.scss';
|
@import '../../_variables.scss';
|
||||||
.notification {
|
.notification {
|
||||||
padding: 0.5em;
|
padding: 0.4em 0 0 0.7em;
|
||||||
padding-left: 1em;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
border-bottom: 1px solid silver;
|
border-bottom: 1px solid silver;
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
min-width: 0px;
|
min-width: 0px;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
|
line-height:18px;
|
||||||
|
|
||||||
.icon-retweet {
|
.icon-retweet {
|
||||||
color: $green;
|
color: $green;
|
||||||
|
@ -18,21 +18,22 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
margin: 0;
|
margin: 0 0 0.3em;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
|
line-height:20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
padding-left: 0.5em;
|
padding: 0.3em 0.8em 0.5em;
|
||||||
p {
|
p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 0.5em;
|
margin-bottom: 0.3em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
padding-top: 3px;
|
padding-top: 0.3em;
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
|
|
@ -57,13 +57,22 @@
|
||||||
form {
|
form {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 0.5em;
|
padding: 0.6em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group {
|
.form-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
padding: 0.3em 0.5em 0.6em;
|
||||||
|
line-height:24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
form textarea {
|
||||||
|
border: none;
|
||||||
|
border-radius: 2px;
|
||||||
|
line-height:16px;
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
|
resize: vertical;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
|
|
|
@ -17,6 +17,6 @@
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.setting-item {
|
.setting-item {
|
||||||
margin: 1em
|
margin: 1em 1em 1.4em;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -94,6 +94,7 @@
|
||||||
|
|
||||||
.user-content {
|
.user-content {
|
||||||
min-height: 52px;
|
min-height: 52px;
|
||||||
|
padding-top: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.source_url {
|
.source_url {
|
||||||
|
@ -106,12 +107,10 @@
|
||||||
|
|
||||||
a {
|
a {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
word-break: break-all;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-content {
|
.status-content {
|
||||||
margin-top: 3px;
|
margin: 3px 15px 4px 0;
|
||||||
margin-bottom: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
|
@ -138,8 +137,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.status {
|
.status {
|
||||||
padding: 0.5em;
|
padding: 0.65em 0.7em 0.8em 0.8em;
|
||||||
padding-right: 1em;
|
|
||||||
border-bottom: 1px solid;
|
border-bottom: 1px solid;
|
||||||
}
|
}
|
||||||
.muted button {
|
.muted button {
|
||||||
|
|
|
@ -19,6 +19,14 @@
|
||||||
div {
|
div {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
margin-top: 1em;
|
||||||
|
margin-bottom: -1.2em;
|
||||||
|
}
|
||||||
|
.muteinfo{
|
||||||
|
margin: 0.5em 0;
|
||||||
|
}
|
||||||
|
.user-screen-name {
|
||||||
|
margin-top: 0.4em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue