From 529643d35acf10ce5d8793cd2d8309f5bd36d249 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sat, 7 Apr 2018 19:30:27 +0300 Subject: [PATCH] indents --- src/components/attachment/attachment.vue | 210 ++++---- src/components/chat_panel/chat_panel.vue | 36 +- .../delete_button/delete_button.vue | 16 +- .../favorite_button/favorite_button.vue | 17 +- src/components/login_form/login_form.vue | 47 +- src/components/nav_panel/nav_panel.vue | 66 +-- .../post_status_form/post_status_form.vue | 283 +++++----- src/components/registration/registration.vue | 100 ++-- .../retweet_button/retweet_button.vue | 16 +- src/components/settings/settings.vue | 52 +- src/components/status/status.vue | 482 +++++++++--------- .../style_switcher/style_switcher.vue | 68 +-- src/components/timeline/timeline.vue | 92 ++-- src/components/user_card/user_card.vue | 78 +-- .../user_card_content/user_card_content.vue | 244 ++++----- src/components/user_finder/user_finder.vue | 22 +- src/components/user_profile/user_profile.vue | 13 +- .../user_settings/user_settings.vue | 26 +- 18 files changed, 932 insertions(+), 936 deletions(-) diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 1fdee5d3..65dc3bab 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -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; + } + } + } +} diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue index fd997aa8..50bd0017 100644 --- a/src/components/chat_panel/chat_panel.vue +++ b/src/components/chat_panel/chat_panel.vue @@ -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; } + } } diff --git a/src/components/delete_button/delete_button.vue b/src/components/delete_button/delete_button.vue index 9966d85e..d13547e2 100644 --- a/src/components/delete_button/delete_button.vue +++ b/src/components/delete_button/delete_button.vue @@ -8,14 +8,14 @@ - diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue index f25c589a..1e1a6970 100644 --- a/src/components/favorite_button/favorite_button.vue +++ b/src/components/favorite_button/favorite_button.vue @@ -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); } - diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue index ac492262..840ea1a4 100644 --- a/src/components/login_form/login_form.vue +++ b/src/components/login_form/login_form.vue @@ -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; + } } - diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index 43b4c3dc..04ac5738 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -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; - } - } - } + } +} diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index bce361db..0f99b3b1 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -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); } + } } - diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue index b9093082..b443024b 100644 --- a/src/components/registration/registration.vue +++ b/src/components/registration/registration.vue @@ -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; } } diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue index a21942c3..1bee3d08 100644 --- a/src/components/retweet_button/retweet_button.vue +++ b/src/components/retweet_button/retweet_button.vue @@ -14,15 +14,15 @@ diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue index 9f195687..0c9ddc3e 100644 --- a/src/components/settings/settings.vue +++ b/src/components/settings/settings.vue @@ -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; + } } diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 3f49fd7a..4937ae8b 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -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; + } +} diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index e2853d01..6bdd4391 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -71,61 +71,61 @@ diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index aa3a8bff..adbbcd47 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -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; +} diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index 660689d2..7381ef8f 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -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; + } } diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index d028e866..eb1d2338 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -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; } diff --git a/src/components/user_finder/user_finder.vue b/src/components/user_finder/user_finder.vue index f9362a7d..6a0df947 100644 --- a/src/components/user_finder/user_finder.vue +++ b/src/components/user_finder/user_finder.vue @@ -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); } diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue index e6060451..838a43ab 100644 --- a/src/components/user_profile/user_profile.vue +++ b/src/components/user_profile/user_profile.vue @@ -12,12 +12,11 @@ diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue index 39bb498c..ed1864cc 100644 --- a/src/components/user_settings/user_settings.vue +++ b/src/components/user_settings/user_settings.vue @@ -75,21 +75,21 @@