lasers
/
nitter
mirror of https://github.com/zedeus/nitter
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Rewrite sass variables to support themes

This commit is contained in:
Zed 2019-10-23 11:15:57 +02:00
parent d31ada9bad
commit 81160b1915
16 changed files with 173 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/sass/general.scss
View File

@ -7,15 +7,19 @@
} }
.error-panel { .error-panel {
@include center-panel($error_red); @include center-panel(var(--error_red));
}
.search-bar {
// background: var(--darkest_grey);
} }
.search-bar > form { .search-bar > form {
@include center-panel($darkest-grey); @include center-panel(var(--darkest_grey));
button { button {
background: #303030; background: var(--bg_elements);
color: $fg_color; color: var(--fg_color);
border: 0; border: 0;
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
@ -27,8 +31,8 @@
input { input {
font-size: 16px; font-size: 16px;
width: 100%; width: 100%;
background: $bg_elements; background: var(--bg_elements);
color: $fg_color; color: var(--fg_color);
border: 0; border: 0;
border-radius: 4px; border-radius: 4px;
padding: 4px; padding: 4px;

8
src/sass/include/_mixins.css
View File

@ -19,11 +19,11 @@
&:hover { &:hover {
.overlay-circle { .overlay-circle {
border-color: $accent; border-color: var(--accent);
} }
.overlay-triangle { .overlay-triangle {
border-color: transparent transparent transparent $accent; border-color: transparent transparent transparent var(--accent);
} }
} }
} }
@ -51,11 +51,11 @@
@mixin input-colors { @mixin input-colors {
&:hover { &:hover {
border-color: $accent; border-color: var(--accent);
} }
&:active { &:active {
border-color: $accent_light; border-color: var(--accent_light);
} }
} }

41
src/sass/include/_variables.scss
View File

@ -3,10 +3,12 @@ $bg_color: #0F0F0F;
$fg_color: #F8F8F2; $fg_color: #F8F8F2;
$fg_faded: #F8F8F2CF; $fg_faded: #F8F8F2CF;
$fg_dark: #9d9da0; $fg_dark: #9d9da0;
$fg_nav: #000000;
$bg_panel: #161616; $bg_panel: #161616;
$bg_elements: #121212; $bg_elements: #121212;
$bg_overlays: #1F1F1F; $bg_overlays: #1F1F1F;
$bg_hover: #1A1A1A;
$grey: #888889; $grey: #888889;
$dark_grey: #404040; $dark_grey: #404040;
@ -24,6 +26,7 @@ $more_replies_dots: #AD433B;
$error_red: #420A05; $error_red: #420A05;
$verified_blue: #1DA1F2; $verified_blue: #1DA1F2;
$icon_text: #F8F8F2;
$shadow: rgba(0,0,0,.6); $shadow: rgba(0,0,0,.6);
$shadow_dark: rgba(0,0,0,.2); $shadow_dark: rgba(0,0,0,.2);
@ -34,3 +37,41 @@ $font_1: Helvetica;
$font_2: Arial; $font_2: Arial;
$font_3: sans-serif; $font_3: sans-serif;
$font_4: fontello; $font_4: fontello;
//theme
$variables: (
--bg_color: var(--bg_color),
--fg_color: var(--fg_color),
--fg_faded: var(--fg_faded),
--fg_dark: var(--fg_dark),
--fg_nav: var(--fg_nav),
--bg_panel: var(--bg_panel),
--bg_elements: var(--bg_elements),
--bg_overlays: var(--bg_overlays),
--bg_hover: var(--bg_hover),
--grey: var(--grey),
--dark_grey: var(--dark_grey),
--darker_grey: var(--darker_grey),
--darkest_grey: var(--darkest_grey),
--border_grey: var(--border_grey),
--accent: var(--accent),
--accent_light: var(--accent_light),
--accent_dark: var(--accent_dark),
--accent_border: var(--accent_border),
--play_button_red: var(--play_button_red),
--more_replies_dots: var(--more_replies_dots),
--error_red: var(--error_red),
--verified_blue: var(--verified_blue),
--icon_text: var(--icon_text)
);
/*** theme helper ***/
@function var($variable) {
@return map-get($variables, $variable);
}

44
src/sass/index.scss
View File

@ -9,8 +9,38 @@
@import 'search'; @import 'search';
body { body {
background-color: $bg_color; // colors
color: $fg_color; --bg_color: #{$bg_color};
--fg_color: #{$fg_color};
--fg_faded: #{$fg_faded};
--fg_dark: #{$fg_dark};
--fg_nav: #{$fg_nav};
--bg_panel: #{$bg_panel};
--bg_elements: #{$bg_elements};
--bg_overlays: #{$bg_overlays};
--bg_hover: #{$bg_hover};
--grey: #{$grey};
--dark_grey: #{$dark_grey};
--darker_grey: #{$darker_grey};
--darkest_grey: #{$darkest_grey};
--border_grey: #{$border_grey};
--accent: #{$accent};
--accent_light: #{$accent_light};
--accent_dark: #{$accent_dark};
--accent_border: #{$accent_border};
--play_button_red: #{$play_button_red};
--more_replies_dots: #{$more_replies_dots};
--error_red: #{$error_red};
--verified_blue: #{$verified_blue};
--icon_text: #{$icon_text};
background-color: var(--bg_color);
color: var(--fg_color);
font-family: $font_0, $font_1, $font_2, $font_3; font-family: $font_0, $font_1, $font_2, $font_3;
font-size: 14px; font-size: 14px;
line-height: 1.3; line-height: 1.3;
@ -36,7 +66,7 @@ p {
} }
a { a {
color: $accent; color: var(--accent);
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
@ -54,7 +84,7 @@ legend {
padding: .6em 0 .3em 0; padding: .6em 0 .3em 0;
border: 0; border: 0;
font-size: 16px; font-size: 16px;
border-bottom: 1px solid $border_grey; border-bottom: 1px solid var(--border_grey);
margin-bottom: 8px; margin-bottom: 8px;
} }
@ -80,7 +110,7 @@ ul {
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
margin-top: 10px; margin-top: 10px;
background-color: $bg_overlays; background-color: var(--bg_overlays);
padding: 10px 15px; padding: 10px 15px;
align-self: start; align-self: start;
@ -91,8 +121,8 @@ ul {
} }
.verified-icon { .verified-icon {
color: $fg_color; color: var(--icon_text);
background-color: $verified_blue; background-color: var(--verified_blue);
border-radius: 50%; border-radius: 50%;
flex-shrink: 0; flex-shrink: 0;
margin: 2px 0 3px 3px; margin: 2px 0 3px 3px;

28
src/sass/inputs.scss
View File

@ -3,9 +3,9 @@
button { button {
@include input-colors; @include input-colors;
background-color: $bg_elements; background-color: var(--bg_elements);
color: $fg_color; color: var(--fg_color);
border: 1px solid $accent_border; border: 1px solid var(--accent_border);
padding: 3px 6px; padding: 3px 6px;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
@ -15,10 +15,10 @@ button {
input[type="text"], input[type="text"],
input[type="date"] { input[type="date"] {
@include input-colors; @include input-colors;
background-color: $bg_elements; background-color: var(--bg_elements);
padding: 1px 4px; padding: 1px 4px;
color: $fg_color; color: var(--fg_color);
border: 1px solid $accent_border; border: 1px solid var(--accent_border);
border-radius: 0; border-radius: 0;
font-size: 14px; font-size: 14px;
} }
@ -40,8 +40,8 @@ input::-webkit-calendar-picker-indicator {
input::-webkit-datetime-edit-day-field:focus, input::-webkit-datetime-edit-day-field:focus,
input::-webkit-datetime-edit-month-field:focus, input::-webkit-datetime-edit-month-field:focus,
input::-webkit-datetime-edit-year-field:focus { input::-webkit-datetime-edit-year-field:focus {
background-color: $accent; background-color: var(--accent);
color: $fg_color; color: var(--fg_color);
outline: none; outline: none;
} }
@ -64,7 +64,7 @@ input::-webkit-datetime-edit-year-field:focus {
} }
.icon-button button { .icon-button button {
color: $accent; color: var(--accent);
text-decoration: none; text-decoration: none;
background: none; background: none;
border: none; border: none;
@ -73,7 +73,7 @@ input::-webkit-datetime-edit-year-field:focus {
padding-left: 4px; padding-left: 4px;
&:hover { &:hover {
color: $accent_light; color: var(--accent_light);
} }
} }
@ -83,8 +83,8 @@ input::-webkit-datetime-edit-year-field:focus {
right: 0; right: 0;
height: 17px; height: 17px;
width: 17px; width: 17px;
background-color: $bg_elements; background-color: var(--bg_elements);
border: 1px solid $accent_border; border: 1px solid var(--accent_border);
&:after { &:after {
content: ""; content: "";
@ -114,11 +114,11 @@ input::-webkit-datetime-edit-year-field:focus {
} }
&:hover input ~ .checkbox { &:hover input ~ .checkbox {
border-color: $accent; border-color: var(--accent);
} }
&:active input ~ .checkbox { &:active input ~ .checkbox {
border-color: $accent_light; border-color: var(--accent_light);
} }
.checkbox:after { .checkbox:after {

10
src/sass/navbar.scss
View File

@ -4,12 +4,16 @@ nav {
display: flex; display: flex;
align-items: center; align-items: center;
position: fixed; position: fixed;
background-color: $bg_overlays; background-color: var(--bg_overlays);
box-shadow: 0 0 4px $shadow; box-shadow: 0 0 4px $shadow;
padding: 0; padding: 0;
width: 100%; width: 100%;
height: 50px; height: 50px;
z-index: 1000; z-index: 1000;
a, .icon-button button {
color: var(--fg_nav);
}
} }
.inner-nav { .inner-nav {
@ -26,7 +30,7 @@ nav {
font-weight: 600; font-weight: 600;
&:hover { &:hover {
color: $accent_light; color: var(--accent_light);
text-decoration: unset; text-decoration: unset;
} }
} }
@ -54,7 +58,7 @@ nav {
padding-left: 4px; padding-left: 4px;
&:hover { &:hover {
color: $accent_light; color: var(--accent_light);
text-decoration: unset; text-decoration: unset;
} }
} }

12
src/sass/profile/card.scss
View File

@ -3,7 +3,7 @@
.profile-card { .profile-card {
flex-wrap: wrap; flex-wrap: wrap;
background: $bg_panel; background: var(--bg_panel);
padding: 12px; padding: 12px;
display: flex; display: flex;
} }
@ -20,14 +20,14 @@
.profile-card-username { .profile-card-username {
@include breakable; @include breakable;
color: $fg_color; color: var(--fg_color);
font-size: 14px; font-size: 14px;
display: block; display: block;
} }
.profile-card-fullname { .profile-card-fullname {
@include breakable; @include breakable;
color: $fg_color; color: var(--fg_color);
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
text-shadow: none; text-shadow: none;
@ -45,8 +45,8 @@
width: calc(100% - 8px); width: calc(100% - 8px);
height: 100%; height: 100%;
margin: 0; margin: 0;
border: 4px solid $darker_grey; border: 4px solid var(--darker_grey);
background: $bg_color; background: var(--bg_color);
} }
} }
@ -67,7 +67,7 @@
} }
.profile-joindate, .profile-location, profile-website { .profile-joindate, .profile-location, profile-website {
color: $fg_faded; color: var(--fg_faded);
margin: 2px 0; margin: 2px 0;
width: 100%; width: 100%;
} }

4
src/sass/profile/photo-rail.scss
View File

@ -3,7 +3,7 @@
.photo-rail { .photo-rail {
&-card { &-card {
float: left; float: left;
background: $bg_panel; background: var(--bg_panel);
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
width: 100%; width: 100%;
margin: 5px 0; margin: 5px 0;
@ -18,7 +18,7 @@
display: none; display: none;
width: calc(100% - 24px); width: calc(100% - 24px);
float: unset; float: unset;
color: $accent; color: var(--accent);
justify-content: space-between; justify-content: space-between;
} }

6
src/sass/search.scss
View File

@ -29,9 +29,9 @@
> label { > label {
display: inline; display: inline;
background-color: #121212; background-color: var(--bg_elements);
color: #F8F8F2; color: var(--fg_color);
border: 1px solid #FF6C6091; border: 1px solid var(--accent_border);
padding: 1px 6px 2px 6px; padding: 1px 6px 2px 6px;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;

36
src/sass/timeline.scss
View File

@ -5,15 +5,15 @@
} }
.timeline { .timeline {
background-color: $bg_panel; background-color: var(--bg_panel);
> div:not(:first-child) { > div:not(:first-child) {
border-top: 1px solid $border_grey; border-top: 1px solid var(--border_grey);
} }
} }
.timeline-header { .timeline-header {
background-color: $bg_panel; background-color: var(--bg_panel);
text-align: center; text-align: center;
padding: 8px; padding: 8px;
display: block; display: block;
@ -31,7 +31,7 @@
flex-wrap: wrap; flex-wrap: wrap;
list-style: none; list-style: none;
margin: 0 0 5px 0; margin: 0 0 5px 0;
background-color: $bg_panel; background-color: var(--bg_panel);
padding: 0; padding: 0;
} }
@ -53,14 +53,14 @@
} }
&.active { &.active {
border-bottom-color: $accent; border-bottom-color: var(--accent);
color: $accent; color: var(--accent);
} }
} }
&.active a { &.active a {
border-bottom-color: $accent; border-bottom-color: var(--accent);
color: $accent; color: var(--accent);
} }
&.wide { &.wide {
@ -69,7 +69,7 @@
} }
.timeline-footer { .timeline-footer {
background-color: $bg_panel; background-color: var(--bg_panel);
padding: 6px 0; padding: 6px 0;
} }
@ -81,48 +81,48 @@
} }
h2 { h2 {
color: $accent; color: var(--accent);
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
} }
} }
.timeline-none { .timeline-none {
color: $accent; color: var(--accent);
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
} }
.timeline-end { .timeline-end {
background-color: $bg_panel; background-color: var(--bg_panel);
color: $accent; color: var(--accent);
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
} }
.show-more { .show-more {
background-color: $bg_panel; background-color: var(--bg_panel);
text-align: center; text-align: center;
padding: .75em 0; padding: .75em 0;
display: block !important; display: block !important;
a { a {
background-color: $darkest_grey; background-color: var(--darkest_grey);
display: inline-block; display: inline-block;
height: 2em; height: 2em;
padding: 0 2em; padding: 0 2em;
line-height: 2em; line-height: 2em;
&:hover { &:hover {
background-color: $darker_grey; background-color: var(--darker_grey);
} }
} }
} }
.top-ref { .top-ref {
background-color: #0f0f0f; background-color: var(--bg_color);
border-top: none !important; border-top: none !important;
.icon-down { .icon-down {
@ -132,7 +132,7 @@
text-decoration: none; text-decoration: none;
&:hover { &:hover {
color: $accent_light; color: var(--accent_light);
} }
&::before { &::before {

14
src/sass/tweet/_base.scss
View File

@ -52,7 +52,7 @@
max-width: 80%; max-width: 80%;
font-size: 14px; font-size: 14px;
font-weight: 700; font-weight: 700;
color: $fg_color; color: var(--fg_color);
} }
.username { .username {
@ -71,7 +71,7 @@
.tweet-published { .tweet-published {
margin: 0; margin: 0;
margin-top: 5px; margin-top: 5px;
color: $grey; color: var(--grey);
pointer-events: all; pointer-events: all;
} }
@ -89,7 +89,7 @@
} }
.replying-to { .replying-to {
color: $fg_dark; color: var(--fg_dark);
margin: -2px 0 4px; margin: -2px 0 4px;
a { a {
@ -99,7 +99,7 @@
.retweet-header, .pinned, .tweet-stats { .retweet-header, .pinned, .tweet-stats {
align-content: center; align-content: center;
color: $grey; color: var(--grey);
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
flex-wrap: wrap; flex-wrap: wrap;
@ -134,9 +134,9 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 12px; padding: 12px;
border: solid 1px $dark_grey; border: solid 1px var(--dark_grey);
border-radius: 10px; border-radius: 10px;
background-color: $bg_color; background-color: var(--bg_color);
} }
.tweet-link { .tweet-link {
@ -147,6 +147,6 @@
position: absolute; position: absolute;
&:hover { &:hover {
background-color: #1a1a1a; background-color: var(--bg_hover);
} }
} }

12
src/sass/tweet/card.scss
View File

@ -10,15 +10,15 @@
border-radius: 10px; border-radius: 10px;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
border-color: $dark_grey; border-color: var(--dark_grey);
background-color: $bg_elements; background-color: var(--bg_elements);
overflow: hidden; overflow: hidden;
color: inherit; color: inherit;
display: flex; display: flex;
text-decoration: none !important; text-decoration: none !important;
&:hover { &:hover {
border-color: $grey; border-color: var(--grey);
} }
.attachments { .attachments {
@ -43,7 +43,7 @@
.card-destination { .card-destination {
@include ellipsis; @include ellipsis;
color: $grey; color: var(--grey);
display: block; display: block;
} }
@ -73,7 +73,7 @@
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
background-color: $fg_color; background-color: var(--fg_color);
img { img {
width: 100%; width: 100%;
@ -107,7 +107,7 @@
.card-image { .card-image {
position: unset; position: unset;
border-style: solid; border-style: solid;
border-color: $dark_grey; border-color: var(--dark_grey);
border-width: 0; border-width: 0;
border-bottom-width: 1px; border-bottom-width: 1px;
} }

8
src/sass/tweet/media.scss
View File

@ -26,7 +26,7 @@
border-radius: 7px; border-radius: 7px;
overflow: hidden; overflow: hidden;
flex-flow: column; flex-flow: column;
background-color: $bg_color; background-color: var(--bg_color);
align-items: center; align-items: center;
pointer-events: all; pointer-events: all;
@ -81,13 +81,13 @@
.overlay-circle { .overlay-circle {
border-radius: 50%; border-radius: 50%;
background-color: $dark_grey; background-color: var(--dark_grey);
width: 40px; width: 40px;
height: 40px; height: 40px;
align-items: center; align-items: center;
display: flex; display: flex;
border-width: 5px; border-width: 5px;
border-color: $play_button_red; border-color: var(--play_button_red);
border-style: solid; border-style: solid;
} }
@ -96,7 +96,7 @@
height: 0; height: 0;
border-style: solid; border-style: solid;
border-width: 12px 0 12px 17px; border-width: 12px 0 12px 17px;
border-color: transparent transparent transparent $play_button_red; border-color: transparent transparent transparent var(--play_button_red);
margin-left: 14px; margin-left: 14px;
} }

8
src/sass/tweet/poll.scss
View File

@ -5,7 +5,7 @@
position: relative; position: relative;
margin: 6px 0; margin: 6px 0;
height: 26px; height: 26px;
background: $bg_color; background: var(--bg_color);
border-radius: 5px; border-radius: 5px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -14,7 +14,7 @@
.poll-choice-bar { .poll-choice-bar {
height: 100%; height: 100%;
position: absolute; position: absolute;
background: $dark_grey; background: var(--dark_grey);
} }
.poll-choice-value { .poll-choice-value {
@ -33,10 +33,10 @@
} }
.poll-info { .poll-info {
color: $grey; color: var(--grey);
pointer-events: all; pointer-events: all;
} }
.leader .poll-choice-bar { .leader .poll-choice-bar {
background: $accent_dark; background: var(--accent_dark);
} }

12
src/sass/tweet/quote.scss
View File

@ -2,20 +2,20 @@
.quote { .quote {
margin-top: 10px; margin-top: 10px;
border: solid 1px $dark_grey; border: solid 1px var(--dark_grey);
border-radius: 10px; border-radius: 10px;
background-color: $bg_elements; background-color: var(--bg_elements);
overflow: auto; overflow: auto;
padding: 6px; padding: 6px;
position: relative; position: relative;
pointer-events: all; pointer-events: all;
&:hover { &:hover {
border-color: $grey; border-color: var(--grey);
} }
&.unavailable:hover { &.unavailable:hover {
border-color: $dark_grey; border-color: var(--dark_grey);
} }
} }
@ -85,7 +85,7 @@
} }
.quote-sensitive { .quote-sensitive {
background: $darker_grey; background: var(--darker_grey);
width: 102px; width: 102px;
height: 102px; height: 102px;
border-radius: 12px; border-radius: 12px;
@ -96,7 +96,7 @@
.quote-sensitive-icon { .quote-sensitive-icon {
font-size: 40px; font-size: 40px;
color: $grey; color: var(--grey);
} }
@media(max-width: 600px) { @media(max-width: 600px) {

8
src/sass/tweet/thread.scss
View File

@ -11,7 +11,7 @@
.main-thread { .main-thread {
margin-bottom: 20px; margin-bottom: 20px;
background-color: $bg_panel; background-color: var(--bg_panel);
} }
.main-tweet, .replies { .main-tweet, .replies {
@ -24,14 +24,14 @@
} }
.reply { .reply {
background-color: $bg_panel; background-color: var(--bg_panel);
margin-bottom: 10px; margin-bottom: 10px;
} }
.thread-line { .thread-line {
.timeline-item::before, .timeline-item::before,
&.timeline-item::before { &.timeline-item::before {
background: $accent_dark; background: var(--accent_dark);
content: ''; content: '';
position: relative; position: relative;
min-width: 3px; min-width: 3px;
@ -53,7 +53,7 @@
.more-replies::before { .more-replies::before {
content: '...'; content: '...';
background: unset; background: unset;
color: $more_replies_dots; color: var(--more_replies_dots);
font-weight: bold; font-weight: bold;
font-size: 20px; font-size: 20px;
line-height: 0.25em; line-height: 0.25em;