forked from AkkomaGang/akkoma-fe
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';
|
@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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue