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';
.attachments {
display: flex;
flex-wrap: wrap;
margin-right: -0.7em;
display: flex;
flex-wrap: wrap;
margin-right: -0.7em;
.attachment.media-upload-container {
flex: 0 0 auto;
max-height: 300px;
max-width: 100%;
.attachment.media-upload-container {
flex: 0 0 auto;
max-height: 300px;
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 {
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;
}
&.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;
}
}
&.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;
}
}
}
}
</style>

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -53,163 +53,162 @@
@import '../../_variables.scss';
.tribute-container {
ul {
padding: 0px;
li {
display: flex;
align-items: center;
}
}
img {
padding: 3px;
width: 16px;
height: 16px;
border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
ul {
padding: 0px;
li {
display: flex;
align-items: center;
}
}
img {
padding: 3px;
width: 16px;
height: 16px;
border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
}
}
.post-status-form, .login {
.form-bottom {
display: flex;
padding: 0.5em;
height: 32px;
.form-bottom {
display: flex;
padding: 0.5em;
height: 32px;
button {
width: 10em;
}
p {
margin: 0.35em;
padding: 0.35em;
display: flex;
}
button {
width: 10em;
}
.error {
border-radius: $fallback--tooltipRadius;
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;
p {
margin: 0.35em;
padding: 0.35em;
display: flex;
}
}
.error {
border-radius: $fallback--tooltipRadius;
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 {
padding: 0 0.5em;
i {
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 {
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;
}
.btn {
cursor: pointer;
}
.btn[disabled] {
cursor: not-allowed;
}
.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;
}
.btn {
cursor: pointer;
span {
line-height: 24px;
margin: 0 0.1em 0 0.2em;
}
.btn[disabled] {
cursor: not-allowed;
}
.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);
}
small {
margin-left: .5em;
color: $fallback--faint;
color: var(--faint, $fallback--faint);
}
}
}
</style>

View file

@ -58,66 +58,66 @@
@import '../../_variables.scss';
.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;
flex-direction: column;
margin: 0.6em;
}
.container {
display: flex;
flex-direction: row;
//margin-bottom: 1em;
}
.form-group {
display: flex;
flex-direction: column;
padding: 0.3em 0.0em 0.3em;
line-height:24px;
}
.terms-of-service {
flex: 0 1 50%;
margin: 0.8em;
}
form textarea {
line-height:16px;
resize: vertical;
}
.text-fields {
margin-top: 0.6em;
flex: 1 0;
display: flex;
flex-direction: column;
}
.captcha {
max-width: 350px;
margin-bottom: 0.4em;
}
.form-group {
display: flex;
flex-direction: column;
padding: 0.3em 0.0em 0.3em;
line-height:24px;
}
.btn {
//align-self: flex-start;
//width: 10em;
margin-top: 0.6em;
height: 28px;
}
form textarea {
line-height:16px;
resize: vertical;
}
.captcha {
max-width: 350px;
margin-bottom: 0.4em;
}
.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;
}
.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) {
.registration-form .container {
.registration-form .container {
flex-direction: column-reverse;
}
}

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -99,159 +99,159 @@
@import '../../_variables.scss';
.profile-panel-background {
background-size: cover;
border-radius: $fallback--panelRadius;
border-radius: var(--panelRadius, $fallback--panelRadius);
background-size: cover;
border-radius: $fallback--panelRadius;
border-radius: var(--panelRadius, $fallback--panelRadius);
.panel-heading {
padding: 0.6em 0em;
text-align: center;
}
.panel-heading {
padding: 0.6em 0em;
text-align: center;
}
}
.profile-panel-body {
top: -0em;
padding-top: 4em;
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), var(--bg, $fallback--bg) 80%)
top: -0em;
padding-top: 4em;
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), var(--bg, $fallback--bg) 80%)
}
.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;
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;
.user-screen-name {
color: white;
font-weight: lighter;
font-size: 15px;
padding-right: 0.1em;
flex: 0 0 auto;
}
.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 {
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;
}
.mute {
max-width: 220px;
min-height: 28px;
}
&:hover .animated.avatar {
canvas {
display: none;
}
img {
visibility: visible;
}
.remote-follow {
max-width: 220px;
min-height: 28px;
}
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;
.follow {
max-width: 220px;
min-height: 28px;
}
.user-name{
color: white;
button {
width: 92%;
height: 100%;
}
.user-screen-name {
color: white;
font-weight: lighter;
font-size: 15px;
padding-right: 0.1em;
flex: 0 0 auto;
.remote-button {
height: 28px !important;
width: 92%;
}
.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;
}
.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);
}
.pressed {
border-bottom-color: rgba(255, 255, 255, 0.2);
border-top-color: rgba(0, 0, 0, 0.2);
}
}
}
.user-counts {
display: flex;
line-height:16px;
padding: 1em 1.5em 0em 1em;
text-align: center;
display: flex;
line-height:16px;
padding: 1em 1.5em 0em 1em;
text-align: center;
}
.user-count {
flex: 1;
flex: 1;
h5 {
color: white;
font-size:1em;
font-weight: bolder;
margin: 0 0 0.25em;
}
a {
text-decoration: none;
}
h5 {
color: white;
font-size:1em;
font-weight: bolder;
margin: 0 0 0.25em;
}
a {
text-decoration: none;
}
}
.dailyAvg {
font-size: 0.8em;
opacity: 0.5;
font-size: 0.8em;
opacity: 0.5;
}
</style>

View file

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

View file

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

View file

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