mirror of
https://git.youjo.love/youjo/youjo-fe.git
synced 2024-11-20 13:59:55 +01:00
indents
This commit is contained in:
Henry Jameson
parent
94195024e6
commit
529643d35a
18 changed files with 932 additions and 936 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue