diff options
Diffstat (limited to 'src/components')
19 files changed, 288 insertions, 231 deletions
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index eeb6e6b8..e3b1e4d4 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -30,6 +30,8 @@ <script src="./attachment.js"></script> <style lang="scss"> +@import '../../_variables.scss'; + .attachments { display: flex; flex-wrap: wrap; @@ -45,7 +47,8 @@ flex: 1 0 30%; margin: 0.5em 0.7em 0.6em 0.0em; align-self: flex-start; - border-color: var(--border); + border-color: $fallback--border; + border-color: var(--border, $fallback--border); border-style: solid; border-width: 1px; diff --git a/src/components/delete_button/delete_button.vue b/src/components/delete_button/delete_button.vue index 66727e7c..9966d85e 100644 --- a/src/components/delete_button/delete_button.vue +++ b/src/components/delete_button/delete_button.vue @@ -14,8 +14,8 @@ .icon-cancel,.delete-status { cursor: pointer; &:hover { - color: $red_; - color: var(--red); + color: var(--cRed, $fallback--cRed); + color: $fallback--cRed; } } </style> diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue index a6e4c46b..f25c589a 100644 --- a/src/components/favorite_button/favorite_button.vue +++ b/src/components/favorite_button/favorite_button.vue @@ -11,18 +11,22 @@ <script src="./favorite_button.js" ></script> -<style lang='scss'> - .fav-active { - cursor: pointer; - animation-duration: 0.6s; - &:hover { - color: orange; - color: var(--cOrange); - } - } - .favorite-button.icon-star { - color: orange; - color: var(--cOrange); - } +<style lang="scss"> +@import '../../_variables.scss'; + +.fav-active { + cursor: pointer; + animation-duration: 0.6s; + + &:hover { + color: $fallback--cOrange; + color: var(--cOrange, $fallback--cOrange); + } +} + +.favorite-button.icon-star { + color: $fallback--cOrange; + color: var(--cOrange, $fallback--cOrange); +} </style> diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue index 553858a3..82000d6b 100644 --- a/src/components/login_form/login_form.vue +++ b/src/components/login_form/login_form.vue @@ -31,6 +31,7 @@ <script src="./login_form.js" ></script> <style lang="scss"> +@import '../../_variables.scss'; .login-form { input { @@ -47,7 +48,7 @@ border-radius: 5px; text-align: center; background-color: rgba(255, 48, 16, 0.65); - background-color: var(--cRed); + background-color: $fallback--cRed; min-height: 28px; line-height: 28px; } diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index 2a92586b..43b4c3dc 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -30,6 +30,8 @@ <script src="./nav_panel.js" ></script> <style lang="scss"> +@import '../../_variables.scss'; + .nav-panel ul { list-style: none; margin: 0; @@ -38,13 +40,17 @@ .nav-panel li { border-bottom: 1px solid; - border-color: var(--border); - background-color: var(--bg); + 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; } + &:last-child a { border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; @@ -58,16 +64,20 @@ .nav-panel a { display: block; padding: 0.8em 0.85em; + &:hover { - background-color: var(--lightBg); + background-color: $fallback--lightBg; + background-color: var(--lightBg, $fallback--lightBg); } + &.router-link-active { font-weight: bolder; - background-color: var(--lightBg); + background-color: $fallback--lightBg; + background-color: var(--lightBg, $fallback--lightBg); + &:hover { text-decoration: underline; } } } - </style> diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js index 58d82a09..e55c6e24 100644 --- a/src/components/notifications/notifications.js +++ b/src/components/notifications/notifications.js @@ -24,11 +24,6 @@ const Notifications = { }, unseenCount () { return this.unseenNotifications.length - }, - hiderStyle () { - return { - background: `linear-gradient(to bottom, rgba(0, 0, 0, 0), ${this.$store.state.config.colors.bg} 80%)` - } } }, components: { diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index a739d52e..5af2454e 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -5,32 +5,39 @@ padding-bottom: 15em; .panel { - background: var(--bg) + background: $fallback--bg; + background: var(--bg, $fallback--bg) } .panel-body { - border-color: var(--border) + border-color: $fallback--border; + border-color: var(--border, $fallback--border) } .panel-heading { // force the text to stay centered, while keeping // the button in the right side of the panel heading position: relative; - background: var(--btn); - color: var(--faint); + background: $fallback--btn; + background: var(--btn, $fallback--btn); + color: $fallback--faint; + color: var(--faint, $fallback--faint); .read-button { position: absolute; right: 0.7em; height: 1.8em; line-height: 100%; - background-color: var(--btn); - color: var(--faint); + background-color: $fallback--btn; + background-color: var(--btn, $fallback--btn); + color: $fallback--faint; + color: var(--faint, $fallback--faint); } } .unseen-count { display: inline-block; - background-color: var(--cRed); + background-color: $fallback--cRed; + background-color: var(--cRed, $fallback--cRed); text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); min-width: 1.3em; border-radius: 1.3em; @@ -52,6 +59,10 @@ border-bottom: 1px solid; border-bottom-color: inherit; + .notification-gradient { + 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%) + } .text { min-width: 0px; @@ -61,23 +72,24 @@ overflow: hidden; .icon-retweet.lit { - color: $green_; - color: var(--cGreen); + color: $fallback--cGreen; + color: var(--cGreen, $fallback--cGreen); } .icon-user-plus.lit { - color: $blue_; - color: var(--cBlue); + color: $fallback--cBlue; + color: var(--cBlue, $fallback--cBlue); } .icon-reply.lit { - color: $blue_; - color: var(--cBlue); + color: $fallback--cBlue; + color: var(--cBlue, $fallback--cBlue); } .icon-star.lit { color: orange; - color: var(--cOrange); + color: $fallback--cOrange; + color: var(--cOrange, $fallback--cOrange); } .status-content { @@ -151,7 +163,8 @@ } .unseen { - border-left: 4px solid var(--cRed); + border-left: 4px solid $fallback--cRed; + border-left: 4px solid var(--cRed, $fallback--cRed); padding-left: 6px; } } diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index 77e29426..17bae71e 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -20,7 +20,7 @@ <i class="fa icon-star lit"></i> <small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small> </h1> - <div class="notification-gradient" :style="hiderStyle"></div> + <div class="notification-gradient"></div> <div class="notification-content" v-html="notification.status.statusnet_html"></div> </div> <div v-if="notification.type === 'repeat'"> @@ -29,7 +29,7 @@ <i class="fa icon-retweet lit"></i> <small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small> </h1> - <div class="notification-gradient" :style="hiderStyle"></div> + <div class="notification-gradient"></div> <div class="notification-content" v-html="notification.status.statusnet_html"></div> </div> <div v-if="notification.type === 'mention'"> diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 3f268ff5..d57418fb 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -50,6 +50,7 @@ <script src="./post_status_form.js"></script> <style lang="scss"> +@import '../../_variables.scss'; .tribute-container { ul { @@ -83,11 +84,13 @@ display: flex; } } + .error { border-radius: 5px; text-align: center; background-color: rgba(255, 48, 16, 0.65); - background-color: var(--cRed); + background-color: $fallback--cRed; + background-color: var(--cRed, $fallback--cRed); padding: 0.25em; margin: 0.35em; display: flex; @@ -98,7 +101,8 @@ .attachment { position: relative; - border: var(--border); + border: $fallback--border; + border: var(--border, $fallback--border); margin: 0.5em 0.8em 0.2em 0; } @@ -139,11 +143,11 @@ } form textarea { - border-radius: 5px; line-height:16px; - padding: 5px; resize: none; overflow: hidden; + transition: min-height 200ms; + min-height: 1px; } form textarea:focus { @@ -170,8 +174,10 @@ z-index: 1; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); min-width: 75%; - background: var(--btn); - color: var(--lightFg); + background: $fallback--btn; + background: var(--btn, $fallback--btn); + color: $fallback--lightFg; + color: var(--lightFg, $fallback--lightFg); } .autocomplete { @@ -179,19 +185,23 @@ 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: 2px; object-fit: contain; } + span { line-height: 24px; margin: 0 0.1em 0 0.2em; } + small { margin-left: .5em; - color: var(--faint); + color: $fallback--faint; + color: var(--faint, $fallback--faint); } } } diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue index 786a59e3..0966645d 100644 --- a/src/components/registration/registration.vue +++ b/src/components/registration/registration.vue @@ -55,6 +55,7 @@ <script src="./registration.js"></script> <style lang="scss"> +@import '../../_variables.scss'; .registration-form { display: flex; @@ -87,18 +88,13 @@ } form textarea { - border: solid; - border-width: 1px; - border-color: silver; border-radius: 5px; line-height:16px; - padding: 5px; resize: vertical; } input { border-radius: 5px; - padding: 0.1em 0.2em 0.2em 0.2em; } .captcha { @@ -111,21 +107,21 @@ //width: 10em; margin-top: 0.6em; height: 28px; - } + } - .error { - border-radius: 5px; - text-align: center; - margin: 0.5em 0.6em 0; - background-color: rgba(255, 48, 16, 0.65); - background-color: var(--cRed); - min-height: 28px; - line-height: 28px; - } + .error { + border-radius: 5px; + 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 7c75f3bc..a21942c3 100644 --- a/src/components/retweet_button/retweet_button.vue +++ b/src/components/retweet_button/retweet_button.vue @@ -11,18 +11,18 @@ <script src="./retweet_button.js" ></script> -<style lang='scss'> - @import '../../_variables.scss'; - .rt-active { - cursor: pointer; - animation-duration: 0.6s; - &:hover { - color: $green_; - color: var(--cGreen); - } - } - .icon-retweet.retweeted { - color: $green_; - color: var(--cGreen); - } +<style lang="scss"> +@import '../../_variables.scss'; +.rt-active { + cursor: pointer; + animation-duration: 0.6s; + &:hover { + color: $fallback--cGreen; + color: var(--cGreen, $fallback--cGreen); + } +} +.icon-retweet.retweeted { + color: $fallback--cGreen; + color: var(--cGreen, $fallback--cGreen); +} </style> diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue index b842c9e9..98f70f7b 100644 --- a/src/components/settings/settings.vue +++ b/src/components/settings/settings.vue @@ -56,6 +56,7 @@ <style lang="scss"> .setting-item { margin: 1em 1em 1.4em; + textarea { width: 100%; height: 100px; diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 8410aeba..80f6a315 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -139,8 +139,10 @@ status-text-container { max-width: 34em; padding: 0.5em; display: flex; - background-color: var(--bg); - border-color: var(--border); + 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: 4px; @@ -181,15 +183,19 @@ status-text-container { word-break: break-word; border-left-width: 0px; line-height: 18px; - background-color: var(--bg); - border-color: var(--border); + background-color: $fallback--bg; + background-color: var(--bg, $fallback--bg); + border-color: $fallback--border; + border-color: var(--border, $fallback--border); &_focused { - background-color: var(--lightBg); + background-color: $fallback--lightBg; + background-color: var(--lightBg, $fallback--lightBg); } .usercard { - border-color: var(--border); + border-color: $fallback--border; + border-color: var(--border, $fallback--border); } .timeline & { @@ -211,7 +217,6 @@ status-text-container { .user-content { - min-height: 52px; padding-top: 1px; } @@ -224,14 +229,17 @@ status-text-container { small { font-weight: lighter; } + h4 { margin-right: 0.4em; } + .name-and-links { flex: 1 0; display: flex; flex-wrap: wrap; } + .replies { flex-basis: 100%; } @@ -310,6 +318,7 @@ status-text-container { from { opacity: 0; } + to { opacity: 1; } @@ -335,14 +344,14 @@ status-text-container { } .icon-reply:hover { - color: $blue_; - color: var(--cBlue); - } + color: $fallback--cBlue; + color: var(--cBlue, $fallback--cBlue); +} - .icon-reply.icon-reply-active { - color: $blue_; - color: var(--cBlue); - } +.icon-reply.icon-reply-active { + color: $fallback--cBlue; + color: var(--cBlue, $fallback--cBlue); +} .status .avatar { width: 48px; @@ -359,13 +368,13 @@ status-text-container { 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 { @@ -376,79 +385,81 @@ status-text-container { } } - .status .avatar-retweeter { - width: 24px; - height: 24px; - position: absolute; - margin-left: 24px; - margin-top: 24px; - } +.status img.avatar-retweeter { + width: 24px; + height: 24px; + position: absolute; + margin-left: 24px; + margin-top: 24px; +} - .status.compact .avatar { - width: 32px; - } +.status.compact .avatar { + width: 32px; +} - .status { - padding: 0.4em 0.7em 0.45em 0.7em; - border-left: 4px var(--cRed); - border-left-style: inherit; - } +.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; +} - .status-conversation:last-child { +.status-conversation:last-child { border-bottom: none; - } +} - .timeline .panel.timeline { +.timeline .panel.timeline { border-radius: 10px; overflow: hidden; - } +} - .muted { - padding: 0.1em 0.4em 0.1em 0.8em; - button { - margin-left: auto; - } +.muted { + 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; - } +a.unmute { + display: block; + margin-left: auto; +} - .reply-left { - flex: 0; - min-width: 48px; - } +.reply-left { + flex: 0; + min-width: 48px; +} - .reply-body { - flex: 1; - } +.reply-body { + flex: 1; +} - @media all and (max-width: 960px) { - .status-el { - .name-and-links { - margin-left: -0.25em; - } - } - .status { - max-width: 100%; - } +@media all and (max-width: 960px) { + .status-el { + .name-and-links { + margin-left: -0.25em; + } + } - .status .avatar { - width: 40px; - height: 40px; + .status { + max-width: 100%; + } - &.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; diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 6c0cc6e7..e6a00275 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -47,6 +47,7 @@ <script src="./style_switcher.js"></script> <style lang="scss"> +@import '../../_variables.scss'; .style-switcher { margin-right: 1em; } @@ -65,14 +66,20 @@ margin: 5px 6px 5px 0; label { - color: var(--faint); + color: var(--faint, $fallback--faint); } } + +.theme-color-cl { + border: 0; + box-shadow: none; + background: transparent; +} + .theme-color-cl, .theme-color-in { margin-left: 4px; border-radius: 2px; - border: 0; } .theme-color-in { diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index b6a5ab14..c3cc939a 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -52,54 +52,63 @@ <script src="./timeline.js"></script> <style lang="scss"> +@import '../../_variables.scss'; - .timeline { +.timeline { .timeline-heading { - position: relative; - display: flex; + position: relative; + display: flex; } + .title { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 70%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 70%; } + .loadmore-button { - position: absolute; - right: 0.6em; - font-size: 14px; + 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; - border-radius: 5px; - background-color: transparent; - color: var(--faint); - font-family: sans-serif; - text-align: center; - padding: 0 0.5em 0 0.5em; - opacity: 0.8; + position: absolute; + right: 0.6em; + font-size: 14px; + min-width: 6em; + border-radius: 5px; + 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: var(--lightFg); - background-color: var(--cRed); + color: $fallback--lightFg; + color: var(--lightFg, $fallback--lightFg); + background-color: $fallback--cRed; + background-color: var(--cRed, $fallback--cRed); } - } +} - .new-status-notification { +.new-status-notification { position:relative; margin-top: -1px; font-size: 1.1em; border-width: 1px 0 0 0; border-style: solid; border-radius: 0 0 10px 10px; - border-color: var(--border); + border-color: $fallback--border; + 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 0561fa95..6487d2a6 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -21,6 +21,8 @@ <script src="./user_card.js"></script> <style lang="scss"> +@import '../../_variables.scss'; + .name-and-screen-name { margin-left: 0.7em; margin-top:0.0em; @@ -34,10 +36,6 @@ float: right; } -.follows { - -} - .card { display: flex; flex: 1 0; @@ -47,7 +45,8 @@ padding-left: 1em; border-bottom: 1px solid; margin: 0; - border-bottom-color: var(--border); + border-bottom-color: $fallback--border; + border-bottom-color: var(--border, $fallback--border); .avatar { margin-top: 0.2em; @@ -69,8 +68,9 @@ .panel-heading { background: transparent; } + p { - margin-bottom: 0; + margin-bottom: 0; } - } +} </style> diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js index b7f156d2..2e448f1c 100644 --- a/src/components/user_card_content/user_card_content.js +++ b/src/components/user_card_content/user_card_content.js @@ -15,11 +15,6 @@ export default { } } }, - bodyStyle () { - return { - background: `linear-gradient(to bottom, rgba(0, 0, 0, 0), ${this.$store.state.config.colors.bg} 80%)` - } - }, isOtherUser () { return this.user.id !== this.$store.state.users.currentUser.id }, diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index e3c9b5f9..ca3da632 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -70,7 +70,7 @@ </div> </div> </div> - <div class="panel-body profile-panel-body" :style="bodyStyle"> + <div class="panel-body profile-panel-body"> <div class="user-counts"> <div class="user-count"> <a href="#" v-on:click.prevent="setProfileView('statuses')" v-if="switcher"><h5>{{ $t('user_card.statuses') }}</h5></a> @@ -99,19 +99,21 @@ @import '../../_variables.scss'; .profile-panel-background { - background-size: cover; - border-radius: 10px; + background-size: cover; + border-radius: 10px; - .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; + 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 { diff --git a/src/components/user_finder/user_finder.vue b/src/components/user_finder/user_finder.vue index 66b2fc87..e4453fe7 100644 --- a/src/components/user_finder/user_finder.vue +++ b/src/components/user_finder/user_finder.vue @@ -16,25 +16,25 @@ <script src="./user_finder.js"></script> <style lang="scss"> - .user-finder-container { - height: 21px; - max-width: 100%; - } +@import '../../_variables.scss'; - .user-finder-icon { - } +.user-finder-container { + height: 21px; + max-width: 100%; +} - .user-finder-input { - border-radius: 5px; - max-width: 80%; - padding: 0.1em 0.2em 0.2em 0.2em; - } +.user-finder-input { + border-radius: 5px; + 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: 5px; - padding: 0.25em; - color: var(--faint); - } +.finder-error { + background-color: rgba(255, 48, 16, 0.65); + margin: 0.35em; + border-radius: 5px; + padding: 0.25em; + color: $fallback--faint; + color: var(--faint, $fallback--faint); +} </style> |