From de828bdd7977964c49aa0beee8cf49d27e94bfeb Mon Sep 17 00:00:00 2001 From: Zed Date: Fri, 13 Sep 2019 10:44:21 +0200 Subject: [PATCH] Use sass instead of pure css --- src/sass/general.scss | 37 ++++++++ src/sass/include/_mixins.css | 60 +++++++++++++ src/sass/include/_variables.scss | 36 ++++++++ src/sass/index.scss | 113 +++++++++++++++++++++++++ src/sass/inputs.scss | 114 +++++++++++++++++++++++++ src/sass/navbar.scss | 63 ++++++++++++++ src/sass/profile/_base.scss | 61 ++++++++++++++ src/sass/profile/card.scss | 120 ++++++++++++++++++++++++++ src/sass/profile/photo-rail.scss | 84 +++++++++++++++++++ src/sass/timeline.scss | 139 +++++++++++++++++++++++++++++++ src/sass/tweet/_base.scss | 133 +++++++++++++++++++++++++++++ src/sass/tweet/card.scss | 112 +++++++++++++++++++++++++ src/sass/tweet/media.scss | 102 +++++++++++++++++++++++ src/sass/tweet/poll.scss | 39 +++++++++ src/sass/tweet/quote.scss | 102 +++++++++++++++++++++++ src/sass/tweet/thread.scss | 73 ++++++++++++++++ src/sass/tweet/video.scss | 58 +++++++++++++ src/views/about.nim | 2 +- src/views/general.nim | 4 +- src/views/preferences.nim | 2 +- src/views/timeline.nim | 4 +- 21 files changed, 1452 insertions(+), 6 deletions(-) create mode 100644 src/sass/general.scss create mode 100644 src/sass/include/_mixins.css create mode 100644 src/sass/include/_variables.scss create mode 100644 src/sass/index.scss create mode 100644 src/sass/inputs.scss create mode 100644 src/sass/navbar.scss create mode 100644 src/sass/profile/_base.scss create mode 100644 src/sass/profile/card.scss create mode 100644 src/sass/profile/photo-rail.scss create mode 100644 src/sass/timeline.scss create mode 100644 src/sass/tweet/_base.scss create mode 100644 src/sass/tweet/card.scss create mode 100644 src/sass/tweet/media.scss create mode 100644 src/sass/tweet/poll.scss create mode 100644 src/sass/tweet/quote.scss create mode 100644 src/sass/tweet/thread.scss create mode 100644 src/sass/tweet/video.scss diff --git a/src/sass/general.scss b/src/sass/general.scss new file mode 100644 index 0000000..cd12b01 --- /dev/null +++ b/src/sass/general.scss @@ -0,0 +1,37 @@ +@import '_variables'; +@import '_mixins'; + +.panel-container { + margin: auto; + font-size: 130%; +} + +.error-panel { + @include center-panel($error_red); +} + +.search-panel > form { + @include center-panel($darkest-grey); + + button { + background: #303030; + color: $fg_color; + border: 0; + border-radius: 3px; + cursor: pointer; + font-weight: bold; + width: 30px; + height: 30px; + } + + input { + font-size: 16px; + width: 100%; + background: $bg_elements; + color: $fg_color; + border: 0; + border-radius: 4px; + padding: 4px; + margin-right: 8px; + } +} diff --git a/src/sass/include/_mixins.css b/src/sass/include/_mixins.css new file mode 100644 index 0000000..7042876 --- /dev/null +++ b/src/sass/include/_mixins.css @@ -0,0 +1,60 @@ +@import '_variables'; + +@mixin panel($width, $max-width) { + max-width: $max-width; + margin: 0 auto; + float: none; + border-radius: 0; + position: relative; + width: $width; +} + +@mixin play-button { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: 1; + + &:hover { + .overlay-circle { + border-color: $accent; + } + + .overlay-triangle { + border-color: transparent transparent transparent $accent; + } + } +} + +@mixin breakable { + overflow: hidden; + overflow-wrap: break-word; +} + +@mixin ellipsis { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +@mixin center-panel($bg) { + padding: 12px; + border-radius: 4px; + display: flex; + background: $bg; + box-shadow: 0 0 15px $shadow_dark; + margin: auto; + margin-top: -50px; +} + +@mixin input-colors { + &:hover { + border-color: $accent; + } + + &:active { + border-color: $accent_light; + } +} diff --git a/src/sass/include/_variables.scss b/src/sass/include/_variables.scss new file mode 100644 index 0000000..a0f7f0c --- /dev/null +++ b/src/sass/include/_variables.scss @@ -0,0 +1,36 @@ +// colors +$bg_color: #0F0F0F; +$fg_color: #F8F8F2; +$fg_faded: #F8F8F2CF; +$fg_dark: #9d9da0; + +$bg_panel: #161616; +$bg_elements: #121212; +$bg_overlays: #1F1F1F; + +$grey: #888889; +$dark_grey: #404040; +$darker_grey: #282828; +$darkest_grey: #222222; +$border_grey: #3E3E35; + +$accent: #FF6C60; +$accent_light: #FFACA0; +$accent_dark: #8A3731; +$accent_border: #FF6C6091; + +$play_button_red: #D8574D; +$more_replies_dots: #AD433B; +$error_red: #420A05; + +$verified_blue: #1DA1F2; + +$shadow: rgba(0,0,0,.6); +$shadow_dark: rgba(0,0,0,.2); + +//fonts +$font_0: Helvetica Neue; +$font_1: Helvetica; +$font_2: Arial; +$font_3: sans-serif; +$font_4: fontello; diff --git a/src/sass/index.scss b/src/sass/index.scss new file mode 100644 index 0000000..73b94b0 --- /dev/null +++ b/src/sass/index.scss @@ -0,0 +1,113 @@ +@import '_variables'; + +@import 'tweet/_base'; +@import 'profile/_base'; +@import 'general'; +@import 'navbar'; +@import 'inputs'; +@import 'timeline'; + +body { + background-color: $bg_color; + color: $fg_color; + font-family: $font_0, $font_1, $font_2, $font_3; + font-size: 14px; + line-height: 1.3; + margin: 0; +} + +* { + outline: unset; + margin: 0; + text-decoration: none; +} + +h1 { + display: inline; +} + +h2, h3 { + font-weight: normal; +} + +p { + margin: 14px 0; +} + +a { + color: $accent; + + &:hover { + text-decoration: underline; + } +} + +fieldset { + border: 0; + padding: 0; + margin-top: -0.6em; +} + +legend { + width: 100%; + padding: .6em 0 .3em 0; + border: 0; + font-size: 16px; + border-bottom: 1px solid $border_grey; + margin-bottom: 8px; +} + +ul { + padding-left: 1.3em; +} + +ul.about-list { + margin-bottom: 14px; +} + +.container { + display: flex; + flex-wrap: wrap; +} + +#content { + box-sizing: border-box; + padding-top: 50px; + margin: auto; + min-height: 100vh; +} + +.icon-container { + display: inline; +} + +.overlay-panel { + max-width: 600px; + width: 100%; + margin: 0 auto; + margin-top: 10px; + background-color: $bg_overlays; + padding: 10px 15px; + align-self: start; +} + +.verified-icon { + color: $fg_color; + background-color: $verified_blue; + border-radius: 50%; + flex-shrink: 0; + margin: 2px 0 3px 3px; + padding-top: 2px; + height: 12px; + width: 14px; + font-size: 8px; + display: inline-block; + text-align: center; + vertical-align: middle; +} + +@media(max-width: 600px) { + .preferences-container { + max-width: 95vw; + } +} diff --git a/src/sass/inputs.scss b/src/sass/inputs.scss new file mode 100644 index 0000000..db9ad3e --- /dev/null +++ b/src/sass/inputs.scss @@ -0,0 +1,114 @@ +@import '_variables'; +@import '_mixins'; + +button { + @include input-colors; + background-color: $bg_elements; + color: $fg_color; + border: 1px solid $accent_border; + padding: 3px 6px; + font-size: 14px; + cursor: pointer; + float: right; +} + +input[type="text"] { + @include input-colors; + background-color: $bg_elements; + padding: 1px 4px; + color: $fg_color; + border: 1px solid $accent_border; + border-radius: 0; + font-size: 14px; +} + +.icon-button button { + color: $accent; + text-decoration: none; + border: none; + float: none; + padding: unset; + padding-left: 4px; + + &:hover { + color: $accent_light; + } +} + +.checkbox { + position: absolute; + top: 1px; + right: 0; + height: 17px; + width: 17px; + background-color: $bg_elements; + border: 1px solid $accent_border; + + &:after { + content: ""; + position: absolute; + display: none; + } +} + +.checkbox-container { + display: block; + position: relative; + margin-bottom: 5px; + cursor: pointer; + user-select: none; + padding-right: 22px; + + input { + position: absolute; + opacity: 0; + cursor: pointer; + height: 0; + width: 0; + + &:checked ~ .checkbox:after { + display: block; + } + } + + &:hover input ~ .checkbox { + border-color: $accent; + } + + &:active input ~ .checkbox { + border-color: $accent_light; + } + + .checkbox:after { + left: 2px; + bottom: 0; + font-size: 13px; + font-family: $font_4; + content: '\e803'; + } +} + +.preferences { + button { + margin: 6px 0 3px 0; + } + + label { + padding-right: 135px; + } + + input[type="text"] { + position: absolute; + right: 0; + max-width: 120px; + } + + .pref-input { + position: relative; + margin-bottom: 6px; + } + + .pref-reset { + float: left; + } +} diff --git a/src/sass/navbar.scss b/src/sass/navbar.scss new file mode 100644 index 0000000..510bd81 --- /dev/null +++ b/src/sass/navbar.scss @@ -0,0 +1,63 @@ +@import '_variables'; + +nav { + z-index: 1000; + background-color: $bg_overlays; + box-shadow: 0 0 4px $shadow; +} + +.nav-bar { + padding: 0; + width: 100%; + align-items: center; + position: fixed; + height: 50px; + + .inner-nav { + margin: auto; + box-sizing: border-box; + padding: 0 10px; + display: flex; + align-items: center; + flex-basis: 920px; + height: 50px; + } +} + +.site-name { + font-weight: 600; + + &:hover { + color: $accent_light; + text-decoration: unset; + } +} + +.site-logo { + display: block; + width: 35px; + height: 35px; +} + +.item { + display: flex; + flex: 1; + line-height: 50px; + height: 50px; + overflow: hidden; + flex-wrap: wrap; + + &.right { + text-align: right; + justify-content: flex-end; + } + + &.right a { + padding-left: 4px; + + &:hover { + color: $accent_light; + text-decoration: unset; + } + } +} diff --git a/src/sass/profile/_base.scss b/src/sass/profile/_base.scss new file mode 100644 index 0000000..529d9c9 --- /dev/null +++ b/src/sass/profile/_base.scss @@ -0,0 +1,61 @@ +@import '_variables'; +@import '_mixins'; + +@import 'card'; +@import 'photo-rail'; + +.profile-timeline, .profile-tabs { + @include panel(auto, 900px); +} + +.profile-tabs { + > .timeline-tab { + width: 68% !important; + } +} + +.profile-banner { + padding-bottom: 4px; + + a { + display: inherit; + line-height: 0; + } + + img { + width: 100%; + } +} + +.profile-banner-color { + width: 100%; + padding-bottom: 25%; +} + +.profile-tab { + padding: 0 4px 0 0; + box-sizing: border-box; + display: inline-block; + font-size: 14px; + text-align: left; + vertical-align: top; + max-width: 32%; + top: 50px; +} + +@media(max-width: 600px) { + .profile-tabs { + width: 100vw; + + .timeline-tab { + width: 100% !important; + } + } + + .profile-tab { + width: 100%; + max-width: unset; + position: initial !important; + padding: 0; + } +} diff --git a/src/sass/profile/card.scss b/src/sass/profile/card.scss new file mode 100644 index 0000000..163a266 --- /dev/null +++ b/src/sass/profile/card.scss @@ -0,0 +1,120 @@ +@import '_variables'; +@import '_mixins'; + +.profile-card { + flex-wrap: wrap; + background: $bg_panel; + padding: 12px; + display: flex; +} + +.profile-card-info { + @include breakable; + width: 100%; +} + +.profile-card-tabs-name { + @include breakable; + max-width: 100%; +} + +.profile-card-username { + @include breakable; + color: $fg_color; + font-size: 14px; + display: block; +} + +.profile-card-fullname { + @include breakable; + color: $fg_color; + font-size: 16px; + font-weight: bold; + text-shadow: none; + max-width: 100%; +} + +.profile-card-avatar { + display: block; + width: 100%; + padding-bottom: 6px; + margin-right: 4px; + + img { + display: block; + width: calc(100% - 8px); + height: 100%; + margin: 0; + border: 4px solid $darker_grey; + background: $bg_color; + } +} + +.profile-card-extra { + display: contents; + flex: 100%; + margin-top: 7px; + + .profile-bio { + @include breakable; + width: 100%; + margin: 4px -6px 6px 0; + + p { + margin: 0; + } + } + + .profile-joindate, .profile-location, profile-website { + color: $fg_faded; + margin: 2px 0; + width: 100%; + } +} + +.profile-card-extra-links { + margin-top: 8px; + font-size: 14px; + width: 100%; +} + +.profile-statlist { + display: flex; + flex-wrap: wrap; + padding: 0; + width: 100%; + justify-content: space-between; + + li { + display: table-cell; + text-align: center; + } +} + +.profile-stat-header { + font-weight: bold; +} + +.profile-stat-num { + display: block; +} + +@media(max-width: 600px) { + .profile-card-info { + display: flex; + } + + .profile-card-tabs-name { + @include breakable; + } + + .profile-card-avatar { + height: 60px; + width: unset; + + img { + border-width: 2px; + width: unset; + } + } +} diff --git a/src/sass/profile/photo-rail.scss b/src/sass/profile/photo-rail.scss new file mode 100644 index 0000000..bae9e8e --- /dev/null +++ b/src/sass/profile/photo-rail.scss @@ -0,0 +1,84 @@ +@import '_variables'; + +.photo-rail { + &-card { + float: left; + background: $bg_panel; + border-radius: 0 0 4px 4px; + width: 100%; + margin: 5px 0; + } + + &-header { + padding: 5px 12px 0; + } + + &-header-mobile { + padding: 5px 12px 0; + display: none; + } + + &-label { + width: 100%; + float: unset; + color: $accent; + display: flex; + justify-content: space-between; + } + + &-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-gap: 3px 3px; + padding: 5px 12px 12px; + + a { + position: relative; + border-radius: 5px; + + &:before { + content: ""; + display: block; + padding-top: 100%; + } + } + + img { + height: 100%; + width: 100%; + border-radius: 4px; + object-fit: cover; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + } + } +} + +#photo-rail-toggle { + display: none; + + &:checked ~ .photo-rail-grid { + max-height: 600px; + padding-bottom: 12px; + } +} + +@media(max-width: 600px) { + .photo-rail-header { + display: none; + } + + .photo-rail-header-mobile { + display: block; + } + + .photo-rail-grid { + max-height: 0; + padding-bottom: 0; + overflow: hidden; + transition: max-height 0.4s; + } +} diff --git a/src/sass/timeline.scss b/src/sass/timeline.scss new file mode 100644 index 0000000..a9e3433 --- /dev/null +++ b/src/sass/timeline.scss @@ -0,0 +1,139 @@ +@import '_variables'; + +#posts { + background-color: $bg_panel; +} + +.timeline-tab { + float: right; + padding: 0; + box-sizing: border-box; + display: inline-block; + font-size: 14px; + text-align: left; + vertical-align: top; +} + +.multi-timeline { + max-width: 600px; + width: 100%; + margin: 0 auto; + + .timeline-tab { + width: 100%; + } +} + +.multi-header { + background-color: $bg_panel; + text-align: center; + padding: 10px; + display: block; + font-weight: bold; + margin-bottom: 5px; +} + +.tab { + align-items: center; + display: flex; + flex-wrap: wrap; + list-style: none; + margin: 0 0 5px 0; + background-color: $bg_panel; + padding: 0; +} + +.tab-item { + flex: 1 1 0; + text-align: center; + margin-top: 0; + + a { + border-bottom: .1rem solid transparent; + color: inherit; + display: block; + padding: 8px 0; + text-decoration: none; + font-weight: bold; + + &:hover { + text-decoration: none; + } + + &.active { + border-bottom-color: $accent; + color: $accent; + } + } + + &.active a { + border-bottom-color: $accent; + color: $accent; + } +} + +.timeline-tweet { + border-bottom: 1px solid $border_grey; +} + +.timeline-footer { + background-color: $bg_panel; + padding: 6px 0; +} + +.timeline-header { + background-color: $bg_panel; + padding: 6px 0; +} + +.timeline-protected { + text-align: center; + + p { + margin: 8px 0; + } + + h2 { + color: $accent; + font-size: 20px; + font-weight: 600; + } +} + +.timeline-none { + color: $accent; + font-size: 20px; + font-weight: 600; + text-align: center; +} + +.timeline-end { + background-color: $bg_panel; + color: $accent; + font-size: 16px; + font-weight: 600; + text-align: center; +} + +.show-more { + background-color: $bg_panel; + text-align: center; + padding: .75em 0; + display: block; + + &.status-el { + border-bottom: 1px solid $border_grey; + } + + a { + background-color: $darkest_grey; + display: inline-block; + height: 2em; + padding: 0 2em; + line-height: 2em; + + &:hover { + background-color: $darker_grey; + } + } +} diff --git a/src/sass/tweet/_base.scss b/src/sass/tweet/_base.scss new file mode 100644 index 0000000..94f4feb --- /dev/null +++ b/src/sass/tweet/_base.scss @@ -0,0 +1,133 @@ +@import '_variables'; +@import '_mixins'; +@import 'thread'; +@import 'media'; +@import 'video'; +@import 'card'; +@import 'poll'; +@import 'quote'; + +.status-el { + overflow-wrap: break-word; + border-left-width: 0; + min-width: 0; + padding: .75em; + display: flex; + + .status-content { + font-family: $font_3; + line-height: 1.4em; + } +} + +.status-body { + flex: 1; + min-width: 0; + margin-left: 58px; +} + +.tweet-header { + padding: 0; + vertical-align: bottom; + flex-basis: 100%; + margin-bottom: .2em; + + a { + display: inline-block; + word-break: break-all; + max-width: 100%; + } +} + +.tweet-name-row { + padding: 0; + display: flex; + justify-content: space-between; +} + +.fullname-and-username { + display: flex; + min-width: 0; +} + +.fullname { + @include ellipsis; + flex-shrink: 2; + max-width: 80%; + font-size: 14px; + font-weight: 700; + color: $fg_color; +} + +.username { + @include ellipsis; + min-width: 1.6em; + margin-left: .4em; + word-wrap: normal; +} + +.tweet-date { + display: flex; + flex-shrink: 0; + margin-left: 4px; +} + +.tweet-avatar { + display: contents !important; + + img { + float: left; + margin-top: 3px; + margin-left: -58px; + position: absolute; + width: 48px; + height: 48px; + border-radius: 50%; + } +} + +.replying-to { + color: $fg_dark; + margin: -2px 0 4px; +} + +.retweet, .pinned, .tweet-stats { + align-content: center; + color: $grey; + display: flex; + flex-shrink: 0; + flex-wrap: wrap; + font-size: 14px; + font-weight: 600; + line-height: 22px; + + span { + @include ellipsis; + } +} + +.retweet { + margin-top: -5px !important; +} + +.tweet-stats { + margin-bottom: -3px; +} + +.tweet-stat { + padding-top: 5px; + padding-right: 8px; +} + +.show-thread { + display: block; +} + +.unavailable-box { + width: 100%; + height: 100%; + padding: 12px; + border: solid 1px $dark_grey; + border-radius: 10px; + background-color: $bg_color; +} diff --git a/src/sass/tweet/card.scss b/src/sass/tweet/card.scss new file mode 100644 index 0000000..e30cf4b --- /dev/null +++ b/src/sass/tweet/card.scss @@ -0,0 +1,112 @@ +@import '_variables'; +@import '_mixins'; + +.card { + margin: 5px 0; +} + +.card-container { + border-radius: 10px; + border-width: 1px; + border-style: solid; + border-color: $dark_grey; + background-color: $bg_elements; + overflow: hidden; + color: inherit; + display: flex; + text-decoration: none !important; + + &:hover { + border-color: $grey; + } + + .attachments { + border-radius: 0; + } +} + +.card-content { + padding: 0.5em; +} + +.card-title { + @include ellipsis; + font-weight: bold; + font-size: 1.15em; +} + +.card-description { + margin: 0.3em 0; +} + +.card-destination { + @include ellipsis; + color: $grey; + display: block; +} + +.card-content-container { + color: unset; + overflow: auto; + &:hover { + text-decoration: none; + } +} + +.card-image-container { + width: 98px; + flex-shrink: 0; + position: relative; + overflow: hidden; + &:before { + content: ""; + display: block; + padding-top: 100%; + } +} + +.card-image { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + background-color: $fg_color; + + img { + width: 100%; + height: 100%; + display: block; + object-fit: cover; + } +} + +.card-overlay { + @include play-button; + opacity: 0.8; + display: flex; + justify-content: center; + align-items: center; +} + +.large { + .card-container { + display: block; + } + + .card-image-container { + width: unset; + + &:before { + display: none; + } + } + + .card-image { + position: unset; + border-style: solid; + border-color: $dark_grey; + border-width: 0; + border-bottom-width: 1px; + } +} diff --git a/src/sass/tweet/media.scss b/src/sass/tweet/media.scss new file mode 100644 index 0000000..a7ddf41 --- /dev/null +++ b/src/sass/tweet/media.scss @@ -0,0 +1,102 @@ +@import '_variables'; + +.gallery-row { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: center; + overflow: hidden; + flex-grow: 1; + max-height: 379.5px; + max-width: 533px; + + .still-image { + width: 100%; + } +} + +.attachments { + margin-top: .35em; + display: flex; + flex-direction: row; + width: 100%; + max-height: 600px; + border-radius: 7px; + overflow: hidden; + flex-flow: column; + background-color: $bg_color; + align-items: center; + + .image-attachment { + width: 100%; + } +} + +.attachment { + position: relative; + line-height: 0; + overflow: hidden; + margin: 0 .25em 0 0; + flex-grow: 1; + box-sizing: border-box; + min-width: 2em; + + &:last-child { + margin: 0; + max-height: 530px; + } +} + +.still-image { + max-height: 379.5px; + max-width: 533px; + justify-content: center; + + img { + object-fit: cover; + max-width: 100%; + max-height: 379.5px; + flex-basis: 300px; + } +} + +.image { + display: inline-block; +} + +.single-image { + display: inline-block; + width: unset; +} + +.overlay-circle { + border-radius: 50%; + background-color: $dark_grey; + width: 40px; + height: 40px; + align-items: center; + display: flex; + border-width: 5px; + border-color: $play_button_red; + border-style: solid; +} + +.overlay-triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 12px 0 12px 17px; + border-color: transparent transparent transparent $play_button_red; + margin-left: 14px; +} + +.media-gif { + display: inline-block; + background-color: unset; +} + +.media-body { + flex: 1; + padding: 0; + white-space: pre-wrap; +} diff --git a/src/sass/tweet/poll.scss b/src/sass/tweet/poll.scss new file mode 100644 index 0000000..b58e92c --- /dev/null +++ b/src/sass/tweet/poll.scss @@ -0,0 +1,39 @@ +@import '_variables'; + +.poll-meter { + overflow: hidden; + position: relative; + margin: 6px 0; + height: 26px; + background: $bg_color; + border-radius: 5px; + display: flex; + align-items: center; +} + +.poll-choice-bar { + height: 100%; + position: absolute; + background: $dark_grey; +} + +.poll-choice-value { + position: relative; + font-weight: bold; + margin-left: 5px; + margin-right: 6px; + min-width: 30px; + text-align: right; +} + +.poll-choice-option { + position: relative; +} + +.poll-info { + color: $grey; +} + +.leader .poll-choice-bar { + background: $accent_dark; +} diff --git a/src/sass/tweet/quote.scss b/src/sass/tweet/quote.scss new file mode 100644 index 0000000..65b772e --- /dev/null +++ b/src/sass/tweet/quote.scss @@ -0,0 +1,102 @@ +@import '_variables'; + +.quote { + margin-top: 10px; + border: solid 1px $dark_grey; + border-radius: 10px; + background-color: $bg_elements; + overflow: auto; + padding: 6px; + position: relative; + + &:hover { + border-color: $grey; + } + + &.unavailable:hover { + border-color: $dark_grey; + } +} + +.unavailable-quote { + padding: 6px; +} + +.quote-link { + height: 100%; + width: 100%; + left: 0; + top: 0; + position: absolute; +} + +.quote-text { + overflow: hidden; + white-space: pre-wrap; + word-wrap: break-word; +} + +.quote-media-container { + display: flex; + flex-direction: column; + align-items: center; + overflow: hidden; + max-height: 102px; + width: 102px; + float: left; + margin-right: 7px; + border-radius: 7px; + position: relative; +} + +.quote-media { + display: flex; + justify-content: center; + pointer-events: none; + + img { + width: 100%; + height: 100%; + align-self: center; + } +} + +.quote-badge { + left: 0; + bottom: 0; + position: absolute; + z-index: 1; + align-self: flex-end; +} + +.quote-badge-text { + margin: 4px; + background: $shadow; + border-radius: 4px; + color: #fffffff0; + padding: 1px 3px; + font-size: 12px; + font-weight: bold; +} + +.quote-sensitive { + background: $darker_grey; + width: 102px; + height: 102px; + border-radius: 12px; + display: flex; + justify-content: center; + align-items: center; +} + +.quote-sensitive-icon { + font-size: 40px; + color: $grey; +} + +@media(max-width: 600px) { + .quote-media-container { + width: 70px; + max-height: 70px; + } +} diff --git a/src/sass/tweet/thread.scss b/src/sass/tweet/thread.scss new file mode 100644 index 0000000..3d6c10d --- /dev/null +++ b/src/sass/tweet/thread.scss @@ -0,0 +1,73 @@ +@import '_variables'; +@import '_mixins'; + +.conversation { + @include panel(100%, 600px); + background-color: $bg_color !important; +} + +.main-thread { + margin-bottom: 20px; + background-color: $bg_panel; +} + +.main-tweet .status-content { + font-size: 20px; +} + +.reply { + background-color: $bg_panel; + margin-bottom: 10px; +} + +.thread-line { + .status-el::before { + background: $accent_dark; + content: ''; + position: relative; + min-width: 3px; + width: 3px; + left: 26px; + border-radius: 2px; + margin-left: -3px; + margin-bottom: 37px; + top: 56px; + } + + .unavailable::before { + top: 48px; + margin-bottom: 28px; + } + + .more-replies::before { + content: '...'; + background: unset; + color: $more_replies_dots; + font-weight: bold; + font-size: 20px; + line-height: 0.25em; + left: 1.2em; + width: 5px; + top: 2px; + margin-bottom: 0; + margin-left: -5px; + } +} + +.thread-last .status-el::before { + background: unset; + min-width: unset; + width: 0; + margin: 0; +} + +.more-replies { + padding-top: 0.3em !important; +} + +.more-replies-text { + @include ellipsis; + display: block; + margin-left: 58px; + padding: 7px 0; +} diff --git a/src/sass/tweet/video.scss b/src/sass/tweet/video.scss new file mode 100644 index 0000000..070353c --- /dev/null +++ b/src/sass/tweet/video.scss @@ -0,0 +1,58 @@ +@import '_variables'; +@import '_mixins'; + +video { + height: 100%; + width: 100%; +} + +.gallery-video { + display: flex; + overflow: hidden; +} + +.video-container { + max-height: 530px; + + img { + height: 100%; + width: 100%; + } +} + +.video-overlay { + @include play-button; + background-color: $shadow; + + p { + position: relative; + z-index: 0; + text-align: center; + top: calc(50% - 20px); + font-size: 20px; + line-height: 1.3; + margin: 0 20px; + } + + div { + position: relative; + z-index: 0; + top: calc(50% - 20px); + margin: 0 auto; + width: 40px; + height: 40px; + } + + form { + width: 100%; + height: 100%; + align-items: center; + justify-content: center; + display: flex; + } + + button { + padding: 5px 8px; + font-size: 16px; + } +} diff --git a/src/views/about.nim b/src/views/about.nim index cf680b9..3578f90 100644 --- a/src/views/about.nim +++ b/src/views/about.nim @@ -1,7 +1,7 @@ import karax/[karaxdsl, vdom] proc renderAbout*(): VNode = - buildHtml(tdiv(class="about-page")): + buildHtml(tdiv(class="overlay-panel")): h1: text "About" p: text "Nitter is a free and open source alternative Twitter front-end focused on privacy. " diff --git a/src/views/general.nim b/src/views/general.nim index e34187a..a06a2dc 100644 --- a/src/views/general.nim +++ b/src/views/general.nim @@ -56,14 +56,14 @@ proc renderMain*(body: VNode; prefs: Prefs; title="Nitter"; titleText=""; desc=" result = doctype & $node proc renderSearch*(): VNode = - buildHtml(tdiv(class="panel")): + buildHtml(tdiv(class="panel-container")): tdiv(class="search-panel"): form(`method`="post", action="/search"): input(`type`="text", name="query", autofocus="", placeholder="Enter usernames...") button(`type`="submit"): icon "search" proc renderError*(error: string): VNode = - buildHtml(tdiv(class="panel")): + buildHtml(tdiv(class="panel-container")): tdiv(class="error-panel"): span: text error diff --git a/src/views/preferences.nim b/src/views/preferences.nim index 39db5f9..567a9d0 100644 --- a/src/views/preferences.nim +++ b/src/views/preferences.nim @@ -53,7 +53,7 @@ macro renderPrefs*(): untyped = result[2].add stmt proc renderPreferences*(prefs: Prefs; path: string): VNode = - buildHtml(tdiv(class="preferences-container")): + buildHtml(tdiv(class="overlay-panel")): fieldset(class="preferences"): form(`method`="post", action="/saveprefs"): refererField path diff --git a/src/views/timeline.nim b/src/views/timeline.nim index 01b7d3e..7209b1a 100644 --- a/src/views/timeline.nim +++ b/src/views/timeline.nim @@ -41,12 +41,12 @@ proc renderOlder(timeline: Timeline; username: string): VNode = proc renderNoMore(): VNode = buildHtml(tdiv(class="timeline-footer")): - h2(class="timeline-end", style={textAlign: "center"}): + h2(class="timeline-end"): text "No more tweets." proc renderNoneFound(): VNode = buildHtml(tdiv(class="timeline-header")): - h2(class="timeline-none", style={textAlign: "center"}): + h2(class="timeline-none"): text "No tweets found." proc renderProtected(username: string): VNode =