This commit is contained in:
Henry Jameson 2018-04-07 19:30:27 +03:00
parent 94195024e6
commit 529643d35a
18 changed files with 932 additions and 936 deletions

View file

@ -33,113 +33,113 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.attachments { .attachments {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-right: -0.7em; margin-right: -0.7em;
.attachment.media-upload-container { .attachment.media-upload-container {
flex: 0 0 auto; flex: 0 0 auto;
max-height: 300px; max-height: 300px;
max-width: 100%; max-width: 100%;
}
.attachment {
flex: 1 0 30%;
margin: 0.5em 0.7em 0.6em 0.0em;
align-self: flex-start;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
border-style: solid;
border-width: 1px;
border-radius: $fallback--attachmentRadius;
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
overflow: hidden;
// fixes small gap below video
&.video {
line-height: 0;
} }
.attachment { &.html {
flex: 1 0 30%; flex-basis: 90%;
margin: 0.5em 0.7em 0.6em 0.0em; width: 100%;
align-self: flex-start; display: flex;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
border-style: solid;
border-width: 1px;
border-radius: $fallback--attachmentRadius;
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
overflow: hidden;
// fixes small gap below video
&.video {
line-height: 0;
}
&.html {
flex-basis: 90%;
width: 100%;
display: flex;
}
&.loading {
cursor: progress;
}
.hider {
position: absolute;
margin: 10px;
padding: 5px;
background: rgba(230,230,230,0.6);
font-weight: bold;
z-index: 4;
}
video {
max-height: 500px;
height: 100%;
width: 100%;
z-index: 0;
}
audio {
width: 100%;
}
img.media-upload {
margin-bottom: -2px;
max-height: 300px;
max-width: 100%;
}
.oembed {
width: 100%;
margin-right: 15px;
display: flex;
img {
width: 100%;
}
.image {
flex: 1;
img {
border: 0px;
border-radius: $fallback--attachmentRadius;
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
height: 100%;
object-fit: cover;
}
}
.text {
flex: 2;
margin: 8px;
word-break: break-all;
h1 {
font-size: 14px;
margin: 0px;
}
}
}
a.image-attachment {
display: flex;
flex: 1;
img {
object-fit: contain;
width: 100%;
height: 100%; /* If this isn't here, chrome will stretch the images */
max-height: 500px;
image-orientation: from-image;
}
}
} }
}
&.loading {
cursor: progress;
}
.hider {
position: absolute;
margin: 10px;
padding: 5px;
background: rgba(230,230,230,0.6);
font-weight: bold;
z-index: 4;
}
video {
max-height: 500px;
height: 100%;
width: 100%;
z-index: 0;
}
audio {
width: 100%;
}
img.media-upload {
margin-bottom: -2px;
max-height: 300px;
max-width: 100%;
}
.oembed {
width: 100%;
margin-right: 15px;
display: flex;
img {
width: 100%;
}
.image {
flex: 1;
img {
border: 0px;
border-radius: $fallback--attachmentRadius;
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
height: 100%;
object-fit: cover;
}
}
.text {
flex: 2;
margin: 8px;
word-break: break-all;
h1 {
font-size: 14px;
margin: 0px;
}
}
}
a.image-attachment {
display: flex;
flex: 1;
img {
object-fit: contain;
width: 100%;
height: 100%; /* If this isn't here, chrome will stretch the images */
max-height: 500px;
image-orientation: from-image;
}
}
}
}
</style> </style>

View file

@ -32,33 +32,33 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.chat-window { .chat-window {
max-height: 200px; max-height: 200px;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
} }
.chat-message { .chat-message {
padding: 0.2em 0.5em padding: 0.2em 0.5em
} }
.chat-avatar { .chat-avatar {
img { img {
height: 32px; height: 32px;
width: 32px; width: 32px;
border-radius: $fallback--avatarRadius; border-radius: $fallback--avatarRadius;
border-radius: var(--avatarRadius, $fallback--avatarRadius); border-radius: var(--avatarRadius, $fallback--avatarRadius);
margin-right: 0.5em; margin-right: 0.5em;
} }
} }
.chat-input { .chat-input {
display: flex; display: flex;
form { form {
flex: auto; flex: auto;
input { input {
margin: 0.5em; margin: 0.5em;
width: fill-available; width: fill-available;
}
} }
}
} }
</style> </style>

View file

@ -8,14 +8,14 @@
<script src="./delete_button.js" ></script> <script src="./delete_button.js" ></script>
<style lang='scss'> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.icon-cancel,.delete-status { .icon-cancel,.delete-status {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: var(--cRed, $fallback--cRed); color: var(--cRed, $fallback--cRed);
color: $fallback--cRed; color: $fallback--cRed;
}
} }
}
</style> </style>

View file

@ -15,18 +15,17 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.fav-active { .fav-active {
cursor: pointer; cursor: pointer;
animation-duration: 0.6s; animation-duration: 0.6s;
&:hover { &:hover {
color: $fallback--cOrange; color: $fallback--cOrange;
color: var(--cOrange, $fallback--cOrange); color: var(--cOrange, $fallback--cOrange);
} }
} }
.favorite-button.icon-star { .favorite-button.icon-star {
color: $fallback--cOrange; color: $fallback--cOrange;
color: var(--cOrange, $fallback--cOrange); color: var(--cOrange, $fallback--cOrange);
} }
</style> </style>

View file

@ -34,32 +34,31 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.login-form { .login-form {
.btn { .btn {
min-height: 28px; min-height: 28px;
width: 10em; width: 10em;
} }
.error { .error {
border-radius: $fallback--tooltipRadius; border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius); border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
text-align: center; text-align: center;
background-color: rgba(255, 48, 16, 0.65); background-color: rgba(255, 48, 16, 0.65);
background-color: $fallback--cRed; background-color: $fallback--cRed;
min-height: 28px; min-height: 28px;
line-height: 28px; line-height: 28px;
} }
.register { .register {
flex: 1 1; flex: 1 1;
} }
.login-bottom { .login-bottom {
margin-top: 1.0em; margin-top: 1.0em;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
} }
</style> </style>

View file

@ -33,51 +33,51 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.nav-panel ul { .nav-panel ul {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.nav-panel li { .nav-panel li {
border-bottom: 1px solid; border-bottom: 1px solid;
border-color: $fallback--border; border-color: $fallback--border;
border-color: var(--border, $fallback--border); border-color: var(--border, $fallback--border);
background-color: $fallback--bg; background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg); background-color: var(--bg, $fallback--bg);
padding: 0; padding: 0;
&:first-child a { &:first-child a {
border-top-right-radius: 10px; border-top-right-radius: 10px;
border-top-left-radius: 10px; border-top-left-radius: 10px;
} }
&:last-child a { &:last-child a {
border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px; border-bottom-left-radius: 10px;
} }
} }
.nav-panel li:last-child { .nav-panel li:last-child {
border: none; border: none;
} }
.nav-panel a { .nav-panel a {
display: block; display: block;
padding: 0.8em 0.85em; padding: 0.8em 0.85em;
&:hover {
background-color: $fallback--lightBg;
background-color: var(--lightBg, $fallback--lightBg);
}
&.router-link-active {
font-weight: bolder;
background-color: $fallback--lightBg;
background-color: var(--lightBg, $fallback--lightBg);
&:hover { &:hover {
background-color: $fallback--lightBg; text-decoration: underline;
background-color: var(--lightBg, $fallback--lightBg);
} }
}
&.router-link-active { }
font-weight: bolder;
background-color: $fallback--lightBg;
background-color: var(--lightBg, $fallback--lightBg);
&:hover {
text-decoration: underline;
}
}
}
</style> </style>

View file

@ -53,163 +53,162 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.tribute-container { .tribute-container {
ul { ul {
padding: 0px; padding: 0px;
li { li {
display: flex; display: flex;
align-items: center; align-items: center;
}
}
img {
padding: 3px;
width: 16px;
height: 16px;
border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
} }
}
img {
padding: 3px;
width: 16px;
height: 16px;
border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
}
} }
.post-status-form, .login { .post-status-form, .login {
.form-bottom { .form-bottom {
display: flex; display: flex;
padding: 0.5em; padding: 0.5em;
height: 32px; height: 32px;
button { button {
width: 10em; width: 10em;
}
p {
margin: 0.35em;
padding: 0.35em;
display: flex;
}
} }
.error { p {
border-radius: $fallback--tooltipRadius; margin: 0.35em;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius); padding: 0.35em;
text-align: center; display: flex;
background-color: rgba(255, 48, 16, 0.65); }
background-color: $fallback--cRed; }
background-color: var(--cRed, $fallback--cRed);
padding: 0.25em; .error {
margin: 0.35em; border-radius: $fallback--tooltipRadius;
display: flex; border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
text-align: center;
background-color: rgba(255, 48, 16, 0.65);
background-color: $fallback--cRed;
background-color: var(--cRed, $fallback--cRed);
padding: 0.25em;
margin: 0.35em;
display: flex;
}
.attachments {
padding: 0 0.5em;
.attachment {
position: relative;
border: $fallback--border;
border: var(--border, $fallback--border);
margin: 0.5em 0.8em 0.2em 0;
} }
.attachments { i {
padding: 0 0.5em; position: absolute;
margin: 10px;
padding: 5px;
background: rgba(230,230,230,0.6);
border-radius: $fallback--attachmentRadius;
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
font-weight: bold;
}
}
.attachment {
position: relative;
border: $fallback--border;
border: var(--border, $fallback--border);
margin: 0.5em 0.8em 0.2em 0;
}
i { .btn {
position: absolute; cursor: pointer;
margin: 10px; }
padding: 5px;
background: rgba(230,230,230,0.6); .btn[disabled] {
border-radius: $fallback--attachmentRadius; cursor: not-allowed;
border-radius: var(--attachmentRadius, $fallback--attachmentRadius); }
font-weight: bold;
} .icon-cancel {
cursor: pointer;
}
form {
display: flex;
flex-direction: column;
padding: 0.6em;
}
.form-group {
display: flex;
flex-direction: column;
padding: 0.3em 0.5em 0.6em;
line-height:24px;
}
form textarea {
line-height:16px;
resize: none;
overflow: hidden;
transition: min-height 200ms 100ms;
min-height: 1px;
box-sizing: content-box;
}
form textarea:focus {
min-height: 48px;
}
.btn {
cursor: pointer;
}
.btn[disabled] {
cursor: not-allowed;
}
.icon-cancel {
cursor: pointer;
z-index: 4;
}
.autocomplete-panel {
margin: 0 0.5em 0 0.5em;
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
position: absolute;
z-index: 1;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
min-width: 75%;
background: $fallback--btn;
background: var(--btn, $fallback--btn);
color: $fallback--lightFg;
color: var(--lightFg, $fallback--lightFg);
}
.autocomplete {
cursor: pointer;
padding: 0.2em 0.4em 0.2em 0.4em;
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
display: flex;
img {
width: 24px;
height: 24px;
border-radius: $fallback--avatarRadius;
border-radius: var(--avatarRadius, $fallback--avatarRadius);
object-fit: contain;
} }
span {
.btn { line-height: 24px;
cursor: pointer; margin: 0 0.1em 0 0.2em;
} }
.btn[disabled] { small {
cursor: not-allowed; margin-left: .5em;
} color: $fallback--faint;
color: var(--faint, $fallback--faint);
.icon-cancel {
cursor: pointer;
}
form {
display: flex;
flex-direction: column;
padding: 0.6em;
}
.form-group {
display: flex;
flex-direction: column;
padding: 0.3em 0.5em 0.6em;
line-height:24px;
}
form textarea {
line-height:16px;
resize: none;
overflow: hidden;
transition: min-height 200ms 100ms;
min-height: 1px;
box-sizing: content-box;
}
form textarea:focus {
min-height: 48px;
}
.btn {
cursor: pointer;
}
.btn[disabled] {
cursor: not-allowed;
}
.icon-cancel {
cursor: pointer;
z-index: 4;
}
.autocomplete-panel {
margin: 0 0.5em 0 0.5em;
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
position: absolute;
z-index: 1;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
min-width: 75%;
background: $fallback--btn;
background: var(--btn, $fallback--btn);
color: $fallback--lightFg;
color: var(--lightFg, $fallback--lightFg);
}
.autocomplete {
cursor: pointer;
padding: 0.2em 0.4em 0.2em 0.4em;
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
display: flex;
img {
width: 24px;
height: 24px;
border-radius: $fallback--avatarRadius;
border-radius: var(--avatarRadius, $fallback--avatarRadius);
object-fit: contain;
}
span {
line-height: 24px;
margin: 0 0.1em 0 0.2em;
}
small {
margin-left: .5em;
color: $fallback--faint;
color: var(--faint, $fallback--faint);
}
} }
}
} }
</style> </style>

View file

@ -58,66 +58,66 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.registration-form { .registration-form {
display: flex;
flex-direction: column;
margin: 0.6em;
.container {
display: flex;
flex-direction: row;
//margin-bottom: 1em;
}
.terms-of-service {
flex: 0 1 50%;
margin: 0.8em;
}
.text-fields {
margin-top: 0.6em;
flex: 1 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0.6em; }
.container { .form-group {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
//margin-bottom: 1em; padding: 0.3em 0.0em 0.3em;
} line-height:24px;
}
.terms-of-service { form textarea {
flex: 0 1 50%; line-height:16px;
margin: 0.8em; resize: vertical;
} }
.text-fields { .captcha {
margin-top: 0.6em; max-width: 350px;
flex: 1 0; margin-bottom: 0.4em;
display: flex; }
flex-direction: column;
}
.form-group { .btn {
display: flex; //align-self: flex-start;
flex-direction: column; //width: 10em;
padding: 0.3em 0.0em 0.3em; margin-top: 0.6em;
line-height:24px; height: 28px;
} }
form textarea { .error {
line-height:16px; border-radius: $fallback--tooltipRadius;
resize: vertical; border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
} text-align: center;
margin: 0.5em 0.6em 0;
.captcha { background-color: $fallback--cRed;
max-width: 350px; background-color: var(--cRed, $fallback--cRed);
margin-bottom: 0.4em; min-height: 28px;
} line-height: 28px;
}
.btn {
//align-self: flex-start;
//width: 10em;
margin-top: 0.6em;
height: 28px;
}
.error {
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
text-align: center;
margin: 0.5em 0.6em 0;
background-color: $fallback--cRed;
background-color: var(--cRed, $fallback--cRed);
min-height: 28px;
line-height: 28px;
}
} }
@media all and (max-width: 959px) { @media all and (max-width: 959px) {
.registration-form .container { .registration-form .container {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
} }

View file

@ -14,15 +14,15 @@
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.rt-active { .rt-active {
cursor: pointer; cursor: pointer;
animation-duration: 0.6s; animation-duration: 0.6s;
&:hover { &:hover {
color: $fallback--cGreen;
color: var(--cGreen, $fallback--cGreen);
}
}
.icon-retweet.retweeted {
color: $fallback--cGreen; color: $fallback--cGreen;
color: var(--cGreen, $fallback--cGreen); color: var(--cGreen, $fallback--cGreen);
}
}
.icon-retweet.retweeted {
color: $fallback--cGreen;
color: var(--cGreen, $fallback--cGreen);
} }
</style> </style>

View file

@ -57,37 +57,37 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.setting-item { .setting-item {
margin: 1em 1em 1.4em; margin: 1em 1em 1.4em;
textarea { textarea {
width: 100%; width: 100%;
height: 100px; height: 100px;
} }
.old-avatar { .old-avatar {
width: 128px; width: 128px;
border-radius: $fallback--avatarRadius; border-radius: $fallback--avatarRadius;
border-radius: var(--avatarRadius, $fallback--avatarRadius); border-radius: var(--avatarRadius, $fallback--avatarRadius);
} }
.new-avatar { .new-avatar {
object-fit: cover; object-fit: cover;
width: 128px; width: 128px;
height: 128px; height: 128px;
border-radius: $fallback--avatarRadius; border-radius: $fallback--avatarRadius;
border-radius: var(--avatarRadius, $fallback--avatarRadius); border-radius: var(--avatarRadius, $fallback--avatarRadius);
} }
.btn { .btn {
margin-top: 1em; margin-top: 1em;
min-height: 28px; min-height: 28px;
width: 10em; width: 10em;
} }
} }
.setting-list { .setting-list {
list-style-type: none; list-style-type: none;
li { li {
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
} }
</style> </style>

View file

@ -131,351 +131,351 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
status-text-container { status-text-container {
display: block; display: block;
} }
.status-preview { .status-preview {
position: absolute; position: absolute;
max-width: 34em; max-width: 34em;
padding: 0.5em; padding: 0.5em;
display: flex; display: flex;
background-color: $fallback--bg; background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg); background-color: var(--bg, $fallback--bg);
border-color: $fallback--border; border-color: $fallback--border;
border-color: var(--border, $fallback--border); border-color: var(--border, $fallback--border);
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-radius: $fallback--tooltipRadius; border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius); border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
margin-top: 0.5em; margin-top: 0.5em;
margin-left: 1em; margin-left: 1em;
z-index: 50; z-index: 50;
.avatar { .avatar {
flex-shrink: 0; flex-shrink: 0;
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: $fallback--avatarAltRadius; border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
} }
.text { .text {
h4 { h4 {
margin-bottom: 0.4em; margin-bottom: 0.4em;
small { small {
font-weight: lighter; font-weight: lighter;
} }
}
padding: 0 0.5em 0.5em 0.5em;
} }
padding: 0 0.5em 0.5em 0.5em;
}
} }
.status-preview-loading { .status-preview-loading {
display: block; display: block;
font-size: 2em; font-size: 2em;
min-width: 8em; min-width: 8em;
text-align: center; text-align: center;
} }
.status-el { .status-el {
hyphens: auto; hyphens: auto;
overflow-wrap: break-word; overflow-wrap: break-word;
word-wrap: break-word; word-wrap: break-word;
word-break: break-word; word-break: break-word;
border-left-width: 0px; border-left-width: 0px;
line-height: 18px; line-height: 18px;
background-color: $fallback--bg; background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg); background-color: var(--bg, $fallback--bg);
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
&_focused {
background-color: $fallback--lightBg;
background-color: var(--lightBg, $fallback--lightBg);
}
.usercard {
border-color: $fallback--border; border-color: $fallback--border;
border-color: var(--border, $fallback--border); border-color: var(--border, $fallback--border);
}
&_focused { .timeline & {
background-color: $fallback--lightBg; border-bottom-width: 1px;
background-color: var(--lightBg, $fallback--lightBg); border-bottom-style: solid;
}
.notify {
.avatar {
border-width: 3px;
border-style: solid;
} }
}
.usercard { .media-body {
border-color: $fallback--border; flex: 1;
border-color: var(--border, $fallback--border); padding-left: 0.5em;
} }
.timeline & {
border-bottom-width: 1px;
border-bottom-style: solid;
}
.notify { .user-content {
.avatar { min-height: 52px;
border-width: 3px; padding-top: 1px;
border-style: solid; }
}
}
.media-body { .media-heading {
flex: 1; display: flex;
padding-left: 0.5em; min-height: 1.4em;
margin-bottom: 0.3em;
.links a i {
color: $fallback--link;
color: var(--link, $fallback--link);
} }
.user-content { small {
min-height: 52px; font-weight: lighter;
padding-top: 1px;
} }
.media-heading { h4 {
display: flex; margin-right: 0.4em;
min-height: 1.4em;
margin-bottom: 0.3em;
.links a i {
color: $fallback--link;
color: var(--link, $fallback--link);
}
small {
font-weight: lighter;
}
h4 {
margin-right: 0.4em;
}
.name-and-links {
flex: 1 0;
display: flex;
flex-wrap: wrap;
}
.replies {
flex-basis: 100%;
}
} }
.source_url { .name-and-links {
flex: 1 0;
display: flex;
flex-wrap: wrap;
} }
.expand { .replies {
margin-right: -0.3em; flex-basis: 100%;
}
}
.source_url {
}
.expand {
margin-right: -0.3em;
}
a {
display: inline-block;
word-break: break-all;
}
.status-content {
margin: 3px 15px 4px 0;
max-height: 400px;
overflow-y: auto;
overflow-x: hidden;
img, video {
max-width: 100%;
max-height: 400px;
vertical-align: middle;
object-fit: contain;
} }
a { blockquote {
display: inline-block; margin: 0.2em 0 0.2em 2em;
word-break: break-all; font-style: italic;
} }
}
.status-content { p {
margin: 3px 15px 4px 0; margin: 0;
max-height: 400px; margin-top: 0.2em;
overflow-y: auto; margin-bottom: 0.5em;
overflow-x: hidden; }
img, video { .media-left {
max-width: 100%; margin: 0.2em 0.3em 0 0;
max-height: 400px; .avatar {
vertical-align: middle; float: right;
object-fit: contain; border-radius: $fallback--avatarRadius;
} border-radius: var(--avatarRadius, $fallback--avatarRadius);
blockquote {
margin: 0.2em 0 0.2em 2em;
font-style: italic;
}
} }
}
p { .retweet-info {
margin: 0; padding: 0.7em 0 0 0.6em;
margin-top: 0.2em;
margin-bottom: 0.5em;
}
.media-left { .media-left {
margin: 0.2em 0.3em 0 0; display: flex;
.avatar {
float: right; i {
border-radius: $fallback--avatarRadius; align-self: center;
border-radius: var(--avatarRadius, $fallback--avatarRadius); text-align: right;
} flex: 1;
} padding-right: 0.3em;
}
.retweet-info {
padding: 0.7em 0 0 0.6em;
.media-left {
display: flex;
i {
align-self: center;
text-align: right;
flex: 1;
padding-right: 0.3em;
}
}
} }
}
} }
.status-fadein { .status-fadein {
animation-duration: 0.5s; animation-duration: 0.5s;
animation-name: fadein; animation-name: fadein;
} }
@keyframes fadein { @keyframes fadein {
from { from {
opacity: 0; opacity: 0;
} }
to { to {
opacity: 1; opacity: 1;
} }
} }
.greentext { .greentext {
color: green; color: green;
} }
.status-conversation { .status-conversation {
border-left-style: solid; border-left-style: solid;
} }
.status-actions { .status-actions {
padding-top: 0.15em; padding-top: 0.15em;
width: 100%; width: 100%;
display: flex; display: flex;
div, favorite-button { div, favorite-button {
max-width: 6em; max-width: 6em;
flex: 1; flex: 1;
} }
} }
.icon-reply:hover { .icon-reply:hover {
color: $fallback--cBlue; color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue); color: var(--cBlue, $fallback--cBlue);
} }
.icon-reply.icon-reply-active { .icon-reply.icon-reply-active {
color: $fallback--cBlue; color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue); color: var(--cBlue, $fallback--cBlue);
} }
.status .avatar { .status .avatar {
width: 48px; width: 48px;
height: 48px; height: 48px;
border-radius: 5px; border-radius: 5px;
overflow: hidden; overflow: hidden;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
&.animated::before { &.animated::before {
display: none; display: none;
} }
&.retweeted { &.retweeted {
width: 40px; width: 40px;
height: 40px; height: 40px;
margin-right: 8px; margin-right: 8px;
margin-bottom: 8px; margin-bottom: 8px;
} }
} }
.status:hover .animated.avatar { .status:hover .animated.avatar {
canvas { canvas {
display: none; display: none;
} }
img { img {
visibility: visible; visibility: visible;
} }
} }
.status .avatar-retweeter { .status .avatar-retweeter {
width: 24px; width: 24px;
height: 24px; height: 24px;
position: absolute; position: absolute;
margin-left: 24px; margin-left: 24px;
margin-top: 24px; margin-top: 24px;
} }
.status.compact .avatar { .status.compact .avatar {
width: 32px; width: 32px;
} }
.status { .status {
padding: 0.4em 0.7em 0.45em 0.7em; padding: 0.4em 0.7em 0.45em 0.7em;
border-left: 4px $fallback--cRed; border-left: 4px $fallback--cRed;
border-left: 4px var(--cRed, $fallback--cRed); border-left: 4px var(--cRed, $fallback--cRed);
border-left-style: inherit; border-left-style: inherit;
} }
.status-conversation:last-child { .status-conversation:last-child {
border-bottom: none; border-bottom: none;
} }
.timeline .panel.timeline { .timeline .panel.timeline {
overflow: hidden; overflow: hidden;
} }
.muted { .muted {
padding: 0.1em 0.4em 0.1em 0.8em; padding: 0.1em 0.4em 0.1em 0.8em;
button { button {
margin-left: auto; margin-left: auto;
} }
.muteWords { .muteWords {
margin-left: 10px; margin-left: 10px;
} }
} }
a.unmute { a.unmute {
display: block; display: block;
margin-left: auto; margin-left: auto;
} }
.reply-left { .reply-left {
flex: 0; flex: 0;
min-width: 48px; min-width: 48px;
} }
.reply-body { .reply-body {
flex: 1; flex: 1;
} }
@media all and (max-width: 960px) { @media all and (max-width: 960px) {
.status-el { .status-el {
.name-and-links { .name-and-links {
margin-left: -0.25em; margin-left: -0.25em;
}
} }
}
.status { .status {
max-width: 100%; max-width: 100%;
}
.status .avatar {
width: 40px;
height: 40px;
&.retweeted {
width: 34px;
height: 34px;
margin-right: 8px;
margin-bottom: 8px;
} }
}
.status .avatar { .status .avatar-retweeter {
width: 40px; width: 22px;
height: 40px; height: 22px;
position: absolute;
&.retweeted { margin-left: 18px;
width: 34px; margin-top: 18px;
height: 34px; }
margin-right: 8px; }
margin-bottom: 8px;
}
}
.status .avatar-retweeter {
width: 22px;
height: 22px;
position: absolute;
margin-left: 18px;
margin-top: 18px;
}
}
</style> </style>

View file

@ -71,61 +71,61 @@
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.style-switcher { .style-switcher {
margin-right: 1em; margin-right: 1em;
} }
.color-container { .color-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
} }
.color-item { .color-item {
min-width: 20em; min-width: 20em;
display:flex; display:flex;
flex: 1 1 0; flex: 1 1 0;
align-items: baseline; align-items: baseline;
margin: 5px 6px 5px 0; margin: 5px 6px 5px 0;
label { label {
color: var(--faint, $fallback--faint); color: var(--faint, $fallback--faint);
} }
} }
.theme-color-cl { .theme-color-cl {
border: 0; border: 0;
box-shadow: none; box-shadow: none;
background: transparent; background: transparent;
} }
.theme-color-cl, .theme-color-cl,
.theme-color-in { .theme-color-in {
margin-left: 4px; margin-left: 4px;
} }
.theme-color-in { .theme-color-in {
padding: 5px; padding: 5px;
min-width: 4em; min-width: 4em;
max-width: 7em; max-width: 7em;
flex: 1; flex: 1;
} }
.theme-color-lb { .theme-color-lb {
flex: 2; flex: 2;
min-width: 7em; min-width: 7em;
max-width: 10em; max-width: 10em;
} }
.theme-color-cl { .theme-color-cl {
padding: 1px; padding: 1px;
max-width: 8em; max-width: 8em;
align-self: stretch; align-self: stretch;
height: 100%; height: 100%;
flex: 0; flex: 0;
min-width: 2em; min-width: 2em;
cursor: pointer; cursor: pointer;
} }
.theme-preview-content { .theme-preview-content {
padding: 20px; padding: 20px;
} }
</style> </style>

View file

@ -55,58 +55,58 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.timeline { .timeline {
.timeline-heading { .timeline-heading {
position: relative; position: relative;
display: flex; display: flex;
} }
.title { .title {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: 70%; max-width: 70%;
} }
.loadmore-button { .loadmore-button {
position: absolute; position: absolute;
right: 0.6em; right: 0.6em;
font-size: 14px; font-size: 14px;
min-width: 6em; min-width: 6em;
height: 1.8em; height: 1.8em;
line-height: 100%; line-height: 100%;
} }
.loadmore-text { .loadmore-text {
position: absolute; position: absolute;
right: 0.6em; right: 0.6em;
font-size: 14px; font-size: 14px;
min-width: 6em; min-width: 6em;
background-color: transparent; background-color: transparent;
color: $fallback--faint; color: $fallback--faint;
color: var(--faint, $fallback--faint); color: var(--faint, $fallback--faint);
font-family: sans-serif; font-family: sans-serif;
text-align: center; text-align: center;
padding: 0 0.5em 0 0.5em; padding: 0 0.5em 0 0.5em;
opacity: 0.8; opacity: 0.8;
} }
.error { .error {
color: $fallback--lightFg; color: $fallback--lightFg;
color: var(--lightFg, $fallback--lightFg); color: var(--lightFg, $fallback--lightFg);
background-color: $fallback--cRed; background-color: $fallback--cRed;
background-color: var(--cRed, $fallback--cRed); background-color: var(--cRed, $fallback--cRed);
} }
} }
.new-status-notification { .new-status-notification {
position:relative; position:relative;
margin-top: -1px; margin-top: -1px;
font-size: 1.1em; font-size: 1.1em;
border-width: 1px 0 0 0; border-width: 1px 0 0 0;
border-style: solid; border-style: solid;
border-color: var(--border, $fallback--border); border-color: var(--border, $fallback--border);
padding: 10px; padding: 10px;
z-index: 1; z-index: 1;
} }
</style> </style>

View file

@ -24,56 +24,56 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.name-and-screen-name { .name-and-screen-name {
margin-left: 0.7em; margin-left: 0.7em;
margin-top:0.0em; margin-top:0.0em;
margin-right: 2em; margin-right: 2em;
text-align: left; text-align: left;
width: 100%; width: 100%;
} }
.follows-you { .follows-you {
margin-left: 2em; margin-left: 2em;
float: right; float: right;
} }
.card { .card {
display: flex; display: flex;
flex: 1 0; flex: 1 0;
padding-top: 0.6em; padding-top: 0.6em;
padding-right: 1em; padding-right: 1em;
padding-bottom: 0.6em; padding-bottom: 0.6em;
padding-left: 1em; padding-left: 1em;
border-bottom: 1px solid; border-bottom: 1px solid;
margin: 0; margin: 0;
border-bottom-color: $fallback--border; border-bottom-color: $fallback--border;
border-bottom-color: var(--border, $fallback--border); border-bottom-color: var(--border, $fallback--border);
.avatar { .avatar {
margin-top: 0.2em; margin-top: 0.2em;
width:32px; width:32px;
height: 32px; height: 32px;
border-radius: $fallback--avatarAltRadius; border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
} }
} }
.usercard { .usercard {
width: fill-available; width: fill-available;
margin: 0.2em 0 0.7em 0; margin: 0.2em 0 0.7em 0;
border-radius: $fallback--panelRadius; border-radius: $fallback--panelRadius;
border-radius: var(--panelRadius, $fallback--panelRadius); border-radius: var(--panelRadius, $fallback--panelRadius);
border-style: solid; border-style: solid;
border-color: $fallback--border; border-color: $fallback--border;
border-color: var(--border, $fallback--border); border-color: var(--border, $fallback--border);
border-width: 1px; border-width: 1px;
overflow: hidden; overflow: hidden;
.panel-heading { .panel-heading {
background: transparent; background: transparent;
} }
p { p {
margin-bottom: 0; margin-bottom: 0;
} }
} }
</style> </style>

View file

@ -99,159 +99,159 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.profile-panel-background { .profile-panel-background {
background-size: cover; background-size: cover;
border-radius: $fallback--panelRadius; border-radius: $fallback--panelRadius;
border-radius: var(--panelRadius, $fallback--panelRadius); border-radius: var(--panelRadius, $fallback--panelRadius);
.panel-heading { .panel-heading {
padding: 0.6em 0em; padding: 0.6em 0em;
text-align: center; text-align: center;
} }
} }
.profile-panel-body { .profile-panel-body {
top: -0em; top: -0em;
padding-top: 4em; padding-top: 4em;
word-wrap: break-word; word-wrap: break-word;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%) background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%)
} }
.user-info { .user-info {
color: white;
padding: 0 16px 16px 16px;
margin-bottom: -4em;
.container {
padding: 16px 10px 4px 10px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-content: flex-start;
justify-content: center;
max-height: 56px;
overflow: hidden;
}
.avatar {
border-radius: 5px;
flex: 1 0 100%;
width: 56px;
height: 56px;
box-shadow: 0px 1px 8px rgba(0,0,0,0.75);
object-fit: cover;
&.animated::before {
display: none;
}
}
&:hover .animated.avatar {
canvas {
display: none;
}
img {
visibility: visible;
}
}
text-shadow: 0px 1px 1.5px rgba(0, 0, 0, 1.0);
.name-and-screen-name {
display: block;
margin-left: 0.6em;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-name{
color: white; color: white;
padding: 0 16px 16px 16px; }
margin-bottom: -4em;
.container { .user-screen-name {
padding: 16px 10px 4px 10px; color: white;
display: flex; font-weight: lighter;
flex-wrap: wrap; font-size: 15px;
flex-direction: column; padding-right: 0.1em;
align-content: flex-start; flex: 0 0 auto;
justify-content: center; }
max-height: 56px;
overflow: hidden; .user-interactions {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
div {
flex: 1;
}
margin-top: 0.7em;
margin-bottom: -1.0em;
.following {
color: white;
font-size: 14px;
flex: 0 0 100%;
margin: -0.7em 0.0em 0.3em 0.0em;
padding-left: 16px;
text-align: left;
} }
.avatar { .mute {
border-radius: 5px; max-width: 220px;
flex: 1 0 100%; min-height: 28px;
width: 56px;
height: 56px;
box-shadow: 0px 1px 8px rgba(0,0,0,0.75);
object-fit: cover;
&.animated::before {
display: none;
}
} }
&:hover .animated.avatar { .remote-follow {
canvas { max-width: 220px;
display: none; min-height: 28px;
}
img {
visibility: visible;
}
} }
text-shadow: 0px 1px 1.5px rgba(0, 0, 0, 1.0); .follow {
max-width: 220px;
.name-and-screen-name { min-height: 28px;
display: block;
margin-left: 0.6em;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
} }
.user-name{ button {
color: white; width: 92%;
height: 100%;
} }
.user-screen-name { .remote-button {
color: white; height: 28px !important;
font-weight: lighter; width: 92%;
font-size: 15px;
padding-right: 0.1em;
flex: 0 0 auto;
} }
.user-interactions { .pressed {
display: flex; border-bottom-color: rgba(255, 255, 255, 0.2);
flex-flow: row wrap; border-top-color: rgba(0, 0, 0, 0.2);
justify-content: space-between;
div {
flex: 1;
}
margin-top: 0.7em;
margin-bottom: -1.0em;
.following {
color: white;
font-size: 14px;
flex: 0 0 100%;
margin: -0.7em 0.0em 0.3em 0.0em;
padding-left: 16px;
text-align: left;
}
.mute {
max-width: 220px;
min-height: 28px;
}
.remote-follow {
max-width: 220px;
min-height: 28px;
}
.follow {
max-width: 220px;
min-height: 28px;
}
button {
width: 92%;
height: 100%;
}
.remote-button {
height: 28px !important;
width: 92%;
}
.pressed {
border-bottom-color: rgba(255, 255, 255, 0.2);
border-top-color: rgba(0, 0, 0, 0.2);
}
} }
}
} }
.user-counts { .user-counts {
display: flex; display: flex;
line-height:16px; line-height:16px;
padding: 1em 1.5em 0em 1em; padding: 1em 1.5em 0em 1em;
text-align: center; text-align: center;
} }
.user-count { .user-count {
flex: 1; flex: 1;
h5 { h5 {
color: white; color: white;
font-size:1em; font-size:1em;
font-weight: bolder; font-weight: bolder;
margin: 0 0 0.25em; margin: 0 0 0.25em;
} }
a { a {
text-decoration: none; text-decoration: none;
} }
} }
.dailyAvg { .dailyAvg {
font-size: 0.8em; font-size: 0.8em;
opacity: 0.5; opacity: 0.5;
} }
</style> </style>

View file

@ -19,22 +19,22 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.user-finder-container { .user-finder-container {
height: 21px; height: 21px;
max-width: 100%; max-width: 100%;
} }
.user-finder-input { .user-finder-input {
max-width: 80%; max-width: 80%;
padding: 0.1em 0.2em 0.2em 0.2em; padding: 0.1em 0.2em 0.2em 0.2em;
} }
.finder-error { .finder-error {
background-color: rgba(255, 48, 16, 0.65); background-color: rgba(255, 48, 16, 0.65);
margin: 0.35em; margin: 0.35em;
border-radius: $fallback--tooltipRadius; border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius); border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
padding: 0.25em; padding: 0.25em;
color: $fallback--faint; color: $fallback--faint;
color: var(--faint, $fallback--faint); color: var(--faint, $fallback--faint);
} }
</style> </style>

View file

@ -12,12 +12,11 @@
<style lang="scss"> <style lang="scss">
.user-profile { .user-profile {
flex: 2; flex: 2;
flex-basis: 500px; flex-basis: 500px;
padding-bottom: 10px; padding-bottom: 10px;
.panel-heading { .panel-heading {
background: transparent; background: transparent;
} }
} }
</style> </style>

View file

@ -75,21 +75,21 @@
<style lang="scss"> <style lang="scss">
.profile-edit { .profile-edit {
.bio { .bio {
margin: 0; margin: 0;
} }
input[type=file] { input[type=file] {
padding: 5px; padding: 5px;
} }
.banner { .banner {
max-width: 400px; max-width: 400px;
} }
.uploading { .uploading {
font-size: 1.5em; font-size: 1.5em;
margin: 0.25em; margin: 0.25em;
} }
} }
</style> </style>