mirror of
https://github.com/zedeus/nitter.git
synced 2025-12-06 03:55:36 -05:00
Format css
This commit is contained in:
Zed
@@ -1,39 +1,39 @@
|
|||||||
@import '_variables';
|
@import "_variables";
|
||||||
@import '_mixins';
|
@import "_mixins";
|
||||||
|
|
||||||
.panel-container {
|
.panel-container {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
font-size: 130%;
|
font-size: 130%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-panel {
|
.error-panel {
|
||||||
@include center-panel(var(--error_red));
|
@include center-panel(var(--error_red));
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-bar > form {
|
.search-bar > form {
|
||||||
@include center-panel(var(--darkest_grey));
|
@include center-panel(var(--darkest_grey));
|
||||||
|
|
||||||
button {
|
button {
|
||||||
background: var(--bg_elements);
|
background: var(--bg_elements);
|
||||||
color: var(--fg_color);
|
color: var(--fg_color);
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: var(--bg_elements);
|
background: var(--bg_elements);
|
||||||
color: var(--fg_color);
|
color: var(--fg_color);
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
height: unset;
|
height: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,46 +1,43 @@
|
|||||||
// colors
|
// colors
|
||||||
$bg_color: #0F0F0F;
|
$bg_color: #0f0f0f;
|
||||||
$fg_color: #F8F8F2;
|
$fg_color: #f8f8f2;
|
||||||
$fg_faded: #F8F8F2CF;
|
$fg_faded: #f8f8f2cf;
|
||||||
$fg_dark: #FF6C60;
|
$fg_dark: #ff6c60;
|
||||||
$fg_nav: #FF6C60;
|
$fg_nav: #ff6c60;
|
||||||
|
|
||||||
$bg_panel: #161616;
|
$bg_panel: #161616;
|
||||||
$bg_elements: #121212;
|
$bg_elements: #121212;
|
||||||
$bg_overlays: #1F1F1F;
|
$bg_overlays: #1f1f1f;
|
||||||
$bg_hover: #1A1A1A;
|
$bg_hover: #1a1a1a;
|
||||||
|
|
||||||
$grey: #888889;
|
$grey: #888889;
|
||||||
$dark_grey: #404040;
|
$dark_grey: #404040;
|
||||||
$darker_grey: #282828;
|
$darker_grey: #282828;
|
||||||
$darkest_grey: #222222;
|
$darkest_grey: #222222;
|
||||||
$border_grey: #3E3E35;
|
$border_grey: #3e3e35;
|
||||||
|
|
||||||
$accent: #FF6C60;
|
$accent: #ff6c60;
|
||||||
$accent_light: #FFACA0;
|
$accent_light: #ffaca0;
|
||||||
$accent_dark: #8A3731;
|
$accent_dark: #8a3731;
|
||||||
$accent_border: #FF6C6091;
|
$accent_border: #ff6c6091;
|
||||||
|
|
||||||
$play_button: #D8574D;
|
$play_button: #d8574d;
|
||||||
$play_button_hover: #FF6C60;
|
$play_button_hover: #ff6c60;
|
||||||
|
|
||||||
$more_replies_dots: #AD433B;
|
$more_replies_dots: #ad433b;
|
||||||
$error_red: #420A05;
|
$error_red: #420a05;
|
||||||
|
|
||||||
$verified_blue: #1DA1F2;
|
$verified_blue: #1da1f2;
|
||||||
$verified_business: #FAC82B;
|
$verified_business: #fac82b;
|
||||||
$verified_government: #C1B6A4;
|
$verified_government: #c1b6a4;
|
||||||
$icon_text: $fg_color;
|
$icon_text: $fg_color;
|
||||||
|
|
||||||
$tab: $fg_color;
|
$tab: $fg_color;
|
||||||
$tab_selected: $accent;
|
$tab_selected: $accent;
|
||||||
|
|
||||||
$shadow: rgba(0,0,0,.6);
|
$shadow: rgba(0, 0, 0, 0.6);
|
||||||
$shadow_dark: rgba(0,0,0,.2);
|
$shadow_dark: rgba(0, 0, 0, 0.2);
|
||||||
|
|
||||||
//fonts
|
//fonts
|
||||||
$font_0: Helvetica Neue;
|
$font_0: sans-serif;
|
||||||
$font_1: Helvetica;
|
$font_1: fontello;
|
||||||
$font_2: Arial;
|
|
||||||
$font_3: sans-serif;
|
|
||||||
$font_4: fontello;
|
|
||||||
|
|||||||
@@ -1,180 +1,182 @@
|
|||||||
@import '_variables';
|
@import "_variables";
|
||||||
|
|
||||||
@import 'tweet/_base';
|
@import "tweet/_base";
|
||||||
@import 'profile/_base';
|
@import "profile/_base";
|
||||||
@import 'general';
|
@import "general";
|
||||||
@import 'navbar';
|
@import "navbar";
|
||||||
@import 'inputs';
|
@import "inputs";
|
||||||
@import 'timeline';
|
@import "timeline";
|
||||||
@import 'search';
|
@import "search";
|
||||||
|
|
||||||
body {
|
body {
|
||||||
// colors
|
// colors
|
||||||
--bg_color: #{$bg_color};
|
--bg_color: #{$bg_color};
|
||||||
--fg_color: #{$fg_color};
|
--fg_color: #{$fg_color};
|
||||||
--fg_faded: #{$fg_faded};
|
--fg_faded: #{$fg_faded};
|
||||||
--fg_dark: #{$fg_dark};
|
--fg_dark: #{$fg_dark};
|
||||||
--fg_nav: #{$fg_nav};
|
--fg_nav: #{$fg_nav};
|
||||||
|
|
||||||
--bg_panel: #{$bg_panel};
|
--bg_panel: #{$bg_panel};
|
||||||
--bg_elements: #{$bg_elements};
|
--bg_elements: #{$bg_elements};
|
||||||
--bg_overlays: #{$bg_overlays};
|
--bg_overlays: #{$bg_overlays};
|
||||||
--bg_hover: #{$bg_hover};
|
--bg_hover: #{$bg_hover};
|
||||||
|
|
||||||
--grey: #{$grey};
|
--grey: #{$grey};
|
||||||
--dark_grey: #{$dark_grey};
|
--dark_grey: #{$dark_grey};
|
||||||
--darker_grey: #{$darker_grey};
|
--darker_grey: #{$darker_grey};
|
||||||
--darkest_grey: #{$darkest_grey};
|
--darkest_grey: #{$darkest_grey};
|
||||||
--border_grey: #{$border_grey};
|
--border_grey: #{$border_grey};
|
||||||
|
|
||||||
--accent: #{$accent};
|
--accent: #{$accent};
|
||||||
--accent_light: #{$accent_light};
|
--accent_light: #{$accent_light};
|
||||||
--accent_dark: #{$accent_dark};
|
--accent_dark: #{$accent_dark};
|
||||||
--accent_border: #{$accent_border};
|
--accent_border: #{$accent_border};
|
||||||
|
|
||||||
--play_button: #{$play_button};
|
--play_button: #{$play_button};
|
||||||
--play_button_hover: #{$play_button_hover};
|
--play_button_hover: #{$play_button_hover};
|
||||||
|
|
||||||
--more_replies_dots: #{$more_replies_dots};
|
--more_replies_dots: #{$more_replies_dots};
|
||||||
--error_red: #{$error_red};
|
--error_red: #{$error_red};
|
||||||
|
|
||||||
--verified_blue: #{$verified_blue};
|
--verified_blue: #{$verified_blue};
|
||||||
--verified_business: #{$verified_business};
|
--verified_business: #{$verified_business};
|
||||||
--verified_government: #{$verified_government};
|
--verified_government: #{$verified_government};
|
||||||
--icon_text: #{$icon_text};
|
--icon_text: #{$icon_text};
|
||||||
|
|
||||||
--tab: #{$fg_color};
|
--tab: #{$fg_color};
|
||||||
--tab_selected: #{$accent};
|
--tab_selected: #{$accent};
|
||||||
|
|
||||||
--profile_stat: #{$fg_color};
|
--profile_stat: #{$fg_color};
|
||||||
|
|
||||||
background-color: var(--bg_color);
|
background-color: var(--bg_color);
|
||||||
color: var(--fg_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: 15px;
|
font-size: 15px;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
outline: unset;
|
outline: unset;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2, h3 {
|
h2,
|
||||||
font-weight: normal;
|
h3 {
|
||||||
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin: 14px 0;
|
margin: 14px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset {
|
fieldset {
|
||||||
border: 0;
|
border: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin-top: -0.6em;
|
margin-top: -0.6em;
|
||||||
}
|
}
|
||||||
|
|
||||||
legend {
|
legend {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: .6em 0 .3em 0;
|
padding: 0.6em 0 0.3em 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
border-bottom: 1px solid var(--border_grey);
|
border-bottom: 1px solid var(--border_grey);
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.preferences .note {
|
.preferences .note {
|
||||||
border-top: 1px solid var(--border_grey);
|
border-top: 1px solid var(--border_grey);
|
||||||
border-bottom: 1px solid var(--border_grey);
|
border-bottom: 1px solid var(--border_grey);
|
||||||
padding: 6px 0 8px 0;
|
padding: 6px 0 8px 0;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
padding-left: 1.3em;
|
padding-left: 1.3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding-top: 50px;
|
padding-top: 50px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-container {
|
.icon-container {
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overlay-panel {
|
.overlay-panel {
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
background-color: var(--bg_overlays);
|
background-color: var(--bg_overlays);
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
align-self: start;
|
align-self: start;
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
margin-bottom: 14px;
|
margin-bottom: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.verified-icon {
|
.verified-icon {
|
||||||
color: var(--icon_text);
|
color: var(--icon_text);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
margin: 2px 0 3px 3px;
|
margin: 2px 0 3px 3px;
|
||||||
padding-top: 3px;
|
padding-top: 3px;
|
||||||
height: 11px;
|
height: 11px;
|
||||||
width: 14px;
|
width: 14px;
|
||||||
font-size: 8px;
|
font-size: 8px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
|
||||||
&.blue {
|
&.blue {
|
||||||
background-color: var(--verified_blue);
|
background-color: var(--verified_blue);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.business {
|
&.business {
|
||||||
color: var(--bg_panel);
|
color: var(--bg_panel);
|
||||||
background-color: var(--verified_business);
|
background-color: var(--verified_business);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.government {
|
&.government {
|
||||||
color: var(--bg_panel);
|
color: var(--bg_panel);
|
||||||
background-color: var(--verified_government);
|
background-color: var(--verified_government);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media(max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
.preferences-container {
|
.preferences-container {
|
||||||
max-width: 95vw;
|
max-width: 95vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-item, .nav-item .icon-container {
|
.nav-item,
|
||||||
font-size: 16px;
|
.nav-item .icon-container {
|
||||||
}
|
font-size: 16px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,203 +1,203 @@
|
|||||||
@import '_variables';
|
@import "_variables";
|
||||||
@import '_mixins';
|
@import "_mixins";
|
||||||
|
|
||||||
button {
|
button {
|
||||||
@include input-colors;
|
@include input-colors;
|
||||||
background-color: var(--bg_elements);
|
background-color: var(--bg_elements);
|
||||||
color: var(--fg_color);
|
color: var(--fg_color);
|
||||||
border: 1px solid var(--accent_border);
|
border: 1px solid var(--accent_border);
|
||||||
padding: 3px 6px;
|
padding: 3px 6px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="text"],
|
input[type="text"],
|
||||||
input[type="date"],
|
input[type="date"],
|
||||||
input[type="number"],
|
input[type="number"],
|
||||||
select {
|
select {
|
||||||
@include input-colors;
|
@include input-colors;
|
||||||
background-color: var(--bg_elements);
|
background-color: var(--bg_elements);
|
||||||
padding: 1px 4px;
|
padding: 1px 4px;
|
||||||
color: var(--fg_color);
|
color: var(--fg_color);
|
||||||
border: 1px solid var(--accent_border);
|
border: 1px solid var(--accent_border);
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="number"] {
|
input[type="number"] {
|
||||||
-moz-appearance: textfield;
|
-moz-appearance: textfield;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="text"],
|
input[type="text"],
|
||||||
input[type="number"] {
|
input[type="number"] {
|
||||||
height: 16px;
|
height: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
select {
|
select {
|
||||||
height: 20px;
|
height: 20px;
|
||||||
padding: 0 2px;
|
padding: 0 2px;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="date"]::-webkit-inner-spin-button {
|
input[type="date"]::-webkit-inner-spin-button {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="number"] {
|
input[type="number"] {
|
||||||
-moz-appearance: textfield;
|
-moz-appearance: textfield;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="number"]::-webkit-inner-spin-button,
|
input[type="number"]::-webkit-inner-spin-button,
|
||||||
input[type="number"]::-webkit-outer-spin-button {
|
input[type="number"]::-webkit-outer-spin-button {
|
||||||
display: none;
|
display: none;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="date"]::-webkit-clear-button {
|
input[type="date"]::-webkit-clear-button {
|
||||||
margin-left: 17px;
|
margin-left: 17px;
|
||||||
filter: grayscale(100%);
|
filter: grayscale(100%);
|
||||||
filter: hue-rotate(120deg);
|
filter: hue-rotate(120deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
input::-webkit-calendar-picker-indicator {
|
input::-webkit-calendar-picker-indicator {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
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: var(--accent);
|
background-color: var(--accent);
|
||||||
color: var(--fg_color);
|
color: var(--fg_color);
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.date-range {
|
.date-range {
|
||||||
.date-input {
|
.date-input {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-container {
|
.icon-container {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 2px;
|
top: 2px;
|
||||||
right: 5px;
|
right: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-title {
|
.search-title {
|
||||||
margin: 0 2px;
|
margin: 0 2px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-button button {
|
.icon-button button {
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
float: none;
|
float: none;
|
||||||
padding: unset;
|
padding: unset;
|
||||||
padding-left: 4px;
|
padding-left: 4px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--accent_light);
|
color: var(--accent_light);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkbox {
|
.checkbox {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 1px;
|
top: 1px;
|
||||||
right: 0;
|
right: 0;
|
||||||
height: 17px;
|
height: 17px;
|
||||||
width: 17px;
|
width: 17px;
|
||||||
background-color: var(--bg_elements);
|
background-color: var(--bg_elements);
|
||||||
border: 1px solid var(--accent_border);
|
border: 1px solid var(--accent_border);
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkbox-container {
|
.checkbox-container {
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
padding-right: 22px;
|
||||||
|
|
||||||
|
input {
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
user-select: none;
|
height: 0;
|
||||||
padding-right: 22px;
|
width: 0;
|
||||||
|
|
||||||
input {
|
&:checked ~ .checkbox:after {
|
||||||
position: absolute;
|
display: block;
|
||||||
opacity: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
height: 0;
|
|
||||||
width: 0;
|
|
||||||
|
|
||||||
&:checked ~ .checkbox:after {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&:hover input ~ .checkbox {
|
&:hover input ~ .checkbox {
|
||||||
border-color: var(--accent);
|
border-color: var(--accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active input ~ .checkbox {
|
&:active input ~ .checkbox {
|
||||||
border-color: var(--accent_light);
|
border-color: var(--accent_light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkbox:after {
|
.checkbox:after {
|
||||||
left: 2px;
|
left: 2px;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-family: $font_4;
|
font-family: $font_1;
|
||||||
content: '\e803';
|
content: "\e811";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pref-group {
|
.pref-group {
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.preferences {
|
.preferences {
|
||||||
button {
|
button {
|
||||||
margin: 6px 0 3px 0;
|
margin: 6px 0 3px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
padding-right: 150px;
|
padding-right: 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
select {
|
select {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
display: block;
|
display: block;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="text"],
|
input[type="text"],
|
||||||
input[type="number"] {
|
input[type="number"] {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
max-width: 140px;
|
max-width: 140px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pref-group {
|
.pref-group {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pref-input {
|
.pref-input {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pref-reset {
|
.pref-reset {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,89 +1,90 @@
|
|||||||
@import '_variables';
|
@import "_variables";
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
background-color: var(--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;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
|
||||||
a, .icon-button button {
|
a,
|
||||||
color: var(--fg_nav);
|
.icon-button button {
|
||||||
}
|
color: var(--fg_nav);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.inner-nav {
|
.inner-nav {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-basis: 920px;
|
flex-basis: 920px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-name {
|
.site-name {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--accent_light);
|
color: var(--accent_light);
|
||||||
text-decoration: unset;
|
text-decoration: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-logo {
|
.site-logo {
|
||||||
display: block;
|
display: block;
|
||||||
width: 35px;
|
width: 35px;
|
||||||
height: 35px;
|
height: 35px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-item {
|
.nav-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
&.right {
|
&.right {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.right a {
|
&.right a {
|
||||||
padding-left: 4px;
|
padding-left: 4px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--accent_light);
|
color: var(--accent_light);
|
||||||
text-decoration: unset;
|
text-decoration: unset;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.lp {
|
.lp {
|
||||||
height: 14px;
|
height: 14px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 2px;
|
top: 2px;
|
||||||
fill: var(--fg_nav);
|
fill: var(--fg_nav);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
fill: var(--accent_light);
|
fill: var(--accent_light);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-info:before {
|
.icon-info:before {
|
||||||
margin: 0 -3px;
|
margin: 0 -3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-cog {
|
.icon-cog {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,120 +1,120 @@
|
|||||||
@import '_variables';
|
@import "_variables";
|
||||||
@import '_mixins';
|
@import "_mixins";
|
||||||
|
|
||||||
.search-title {
|
.search-title {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-field {
|
.search-field {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
button {
|
||||||
|
margin: 0 2px 0 0;
|
||||||
|
height: 23px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
button {
|
.pref-input {
|
||||||
margin: 0 2px 0 0;
|
margin: 0 4px 0 0;
|
||||||
height: 23px;
|
flex-grow: 1;
|
||||||
display: flex;
|
height: 23px;
|
||||||
align-items: center;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.pref-input {
|
input[type="text"],
|
||||||
margin: 0 4px 0 0;
|
input[type="number"] {
|
||||||
flex-grow: 1;
|
height: calc(100% - 4px);
|
||||||
height: 23px;
|
width: calc(100% - 8px);
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="text"],
|
> label {
|
||||||
input[type="number"] {
|
display: inline;
|
||||||
height: calc(100% - 4px);
|
background-color: var(--bg_elements);
|
||||||
width: calc(100% - 8px);
|
color: var(--fg_color);
|
||||||
}
|
border: 1px solid var(--accent_border);
|
||||||
|
padding: 1px 6px 2px 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
|
||||||
> label {
|
@include input-colors;
|
||||||
display: inline;
|
}
|
||||||
background-color: var(--bg_elements);
|
|
||||||
color: var(--fg_color);
|
|
||||||
border: 1px solid var(--accent_border);
|
|
||||||
padding: 1px 6px 2px 6px;
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-bottom: 2px;
|
|
||||||
|
|
||||||
@include input-colors;
|
@include create-toggle(search-panel, 380px);
|
||||||
}
|
|
||||||
|
|
||||||
@include create-toggle(search-panel, 380px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-panel {
|
.search-panel {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-height: 0;
|
max-height: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: max-height 0.4s;
|
transition: max-height 0.4s;
|
||||||
|
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
font-weight: initial;
|
font-weight: initial;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|
||||||
> div {
|
> div {
|
||||||
line-height: 1.7em;
|
line-height: 1.7em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkbox-container {
|
.checkbox-container {
|
||||||
display: inline;
|
display: inline;
|
||||||
padding-right: unset;
|
padding-right: unset;
|
||||||
margin-bottom: unset;
|
margin-bottom: unset;
|
||||||
margin-left: 23px;
|
margin-left: 23px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkbox {
|
.checkbox {
|
||||||
right: unset;
|
right: unset;
|
||||||
left: -22px;
|
left: -22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkbox-container .checkbox:after {
|
.checkbox-container .checkbox:after {
|
||||||
top: -4px;
|
top: -4px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-row {
|
.search-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
line-height: unset;
|
line-height: unset;
|
||||||
|
|
||||||
> div {
|
> div {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
flex-shrink: 1;
|
flex-shrink: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
height: 21px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pref-input {
|
||||||
|
display: block;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
|
||||||
input {
|
input {
|
||||||
height: 21px;
|
height: 21px;
|
||||||
}
|
margin-top: 1px;
|
||||||
|
|
||||||
.pref-input {
|
|
||||||
display: block;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
|
|
||||||
input {
|
|
||||||
height: 21px;
|
|
||||||
margin-top: 1px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-toggles {
|
.search-toggles {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(5, auto);
|
grid-template-columns: repeat(5, auto);
|
||||||
grid-column-gap: 10px;
|
grid-column-gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-tabs {
|
.profile-tabs {
|
||||||
@include search-resize(820px, 5);
|
@include search-resize(820px, 5);
|
||||||
@include search-resize(715px, 4);
|
@include search-resize(715px, 4);
|
||||||
@include search-resize(700px, 5);
|
@include search-resize(700px, 5);
|
||||||
@include search-resize(485px, 4);
|
@include search-resize(485px, 4);
|
||||||
@include search-resize(410px, 3);
|
@include search-resize(410px, 3);
|
||||||
}
|
}
|
||||||
|
|
||||||
@include search-resize(700px, 5);
|
@include search-resize(700px, 5);
|
||||||
|
|||||||
@@ -1,162 +1,162 @@
|
|||||||
@import '_variables';
|
@import "_variables";
|
||||||
|
|
||||||
.timeline-container {
|
.timeline-container {
|
||||||
@include panel(100%, 600px);
|
@include panel(100%, 600px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline {
|
.timeline {
|
||||||
background-color: var(--bg_panel);
|
background-color: var(--bg_panel);
|
||||||
|
|
||||||
> div:not(:first-child) {
|
> div:not(:first-child) {
|
||||||
border-top: 1px solid var(--border_grey);
|
border-top: 1px solid var(--border_grey);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline-header {
|
.timeline-header {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: var(--bg_panel);
|
background-color: var(--bg_panel);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
display: block;
|
display: block;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
button {
|
button {
|
||||||
float: unset;
|
float: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline-banner img {
|
.timeline-banner img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline-description {
|
.timeline-description {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab {
|
.tab {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0 0 5px 0;
|
margin: 0 0 5px 0;
|
||||||
background-color: var(--bg_panel);
|
background-color: var(--bg_panel);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-item {
|
.tab-item {
|
||||||
flex: 1 1 0;
|
flex: 1 1 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
border-bottom: .1rem solid transparent;
|
border-bottom: 0.1rem solid transparent;
|
||||||
color: var(--tab);
|
color: var(--tab);
|
||||||
display: block;
|
display: block;
|
||||||
padding: 8px 0;
|
padding: 8px 0;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
border-bottom-color: var(--tab_selected);
|
|
||||||
color: var(--tab_selected);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active a {
|
&.active {
|
||||||
border-bottom-color: var(--tab_selected);
|
border-bottom-color: var(--tab_selected);
|
||||||
color: var(--tab_selected);
|
color: var(--tab_selected);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&.wide {
|
&.active a {
|
||||||
flex-grow: 1.2;
|
border-bottom-color: var(--tab_selected);
|
||||||
flex-basis: 50px;
|
color: var(--tab_selected);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.wide {
|
||||||
|
flex-grow: 1.2;
|
||||||
|
flex-basis: 50px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline-footer {
|
.timeline-footer {
|
||||||
background-color: var(--bg_panel);
|
background-color: var(--bg_panel);
|
||||||
padding: 6px 0;
|
padding: 6px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline-protected {
|
.timeline-protected {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin: 8px 0;
|
margin: 8px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
color: var(--accent);
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-none {
|
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-align: center;
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-none {
|
||||||
|
color: var(--accent);
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline-end {
|
.timeline-end {
|
||||||
background-color: var(--bg_panel);
|
background-color: var(--bg_panel);
|
||||||
color: var(--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: var(--bg_panel);
|
background-color: var(--bg_panel);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: .75em 0;
|
padding: 0.75em 0;
|
||||||
display: block !important;
|
display: block !important;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
background-color: var(--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: var(--darker_grey);
|
background-color: var(--darker_grey);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-ref {
|
.top-ref {
|
||||||
background-color: var(--bg_color);
|
background-color: var(--bg_color);
|
||||||
border-top: none !important;
|
border-top: none !important;
|
||||||
|
|
||||||
.icon-down {
|
.icon-down {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--accent_light);
|
color: var(--accent_light);
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
transform: rotate(180deg) translateY(-1px);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
transform: rotate(180deg) translateY(-1px);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline-item {
|
.timeline-item {
|
||||||
overflow-wrap: break-word;
|
overflow-wrap: break-word;
|
||||||
border-left-width: 0;
|
border-left-width: 0;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
padding: .75em;
|
padding: 0.75em;
|
||||||
display: flex;
|
display: flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,240 +1,244 @@
|
|||||||
@import '_variables';
|
@import "_variables";
|
||||||
@import '_mixins';
|
@import "_mixins";
|
||||||
@import 'thread';
|
@import "thread";
|
||||||
@import 'media';
|
@import "media";
|
||||||
@import 'video';
|
@import "video";
|
||||||
@import 'embed';
|
@import "embed";
|
||||||
@import 'card';
|
@import "card";
|
||||||
@import 'poll';
|
@import "poll";
|
||||||
@import 'quote';
|
@import "quote";
|
||||||
|
|
||||||
.tweet-body {
|
.tweet-body {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
margin-left: 58px;
|
margin-left: 58px;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tweet-content {
|
.tweet-content {
|
||||||
font-family: $font_3;
|
line-height: 1.3em;
|
||||||
line-height: 1.3em;
|
pointer-events: all;
|
||||||
pointer-events: all;
|
display: inline;
|
||||||
display: inline;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tweet-bidi {
|
.tweet-bidi {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tweet-header {
|
.tweet-header {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
flex-basis: 100%;
|
flex-basis: 100%;
|
||||||
margin-bottom: .2em;
|
margin-bottom: 0.2em;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tweet-name-row {
|
.tweet-name-row {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fullname-and-username {
|
.fullname-and-username {
|
||||||
display: flex;
|
display: flex;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fullname {
|
.fullname {
|
||||||
@include ellipsis;
|
@include ellipsis;
|
||||||
flex-shrink: 2;
|
flex-shrink: 2;
|
||||||
max-width: 80%;
|
max-width: 80%;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: var(--fg_color);
|
color: var(--fg_color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.username {
|
.username {
|
||||||
@include ellipsis;
|
@include ellipsis;
|
||||||
min-width: 1.6em;
|
min-width: 1.6em;
|
||||||
margin-left: .4em;
|
margin-left: 0.4em;
|
||||||
word-wrap: normal;
|
word-wrap: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tweet-date {
|
.tweet-date {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tweet-date a, .username, .show-more a {
|
.tweet-date a,
|
||||||
color: var(--fg_dark);
|
.username,
|
||||||
|
.show-more a {
|
||||||
|
color: var(--fg_dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tweet-published {
|
.tweet-published {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
color: var(--grey);
|
color: var(--grey);
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tweet-avatar {
|
.tweet-avatar {
|
||||||
display: contents !important;
|
display: contents !important;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
float: left;
|
float: left;
|
||||||
margin-top: 3px;
|
margin-top: 3px;
|
||||||
margin-left: -58px;
|
margin-left: -58px;
|
||||||
width: 48px;
|
width: 48px;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
&.round {
|
&.round {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.mini {
|
&.mini {
|
||||||
position: unset;
|
position: unset;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
margin-top: -1px;
|
margin-top: -1px;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tweet-embed {
|
.tweet-embed {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--bg_panel);
|
||||||
|
|
||||||
|
.tweet-content {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tweet-body {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
max-height: calc(100vh - 0.75em * 2);
|
||||||
height: 100%;
|
}
|
||||||
background-color: var(--bg_panel);
|
|
||||||
|
|
||||||
.tweet-content {
|
.card-image img {
|
||||||
font-size: 18px;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tweet-body {
|
.avatar {
|
||||||
display: flex;
|
position: absolute;
|
||||||
flex-direction: column;
|
}
|
||||||
max-height: calc(100vh - 0.75em * 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-image img {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.attribution {
|
.attribution {
|
||||||
display: flex;
|
display: flex;
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
margin: 5px 0;
|
margin: 5px 0;
|
||||||
|
|
||||||
strong {
|
strong {
|
||||||
color: var(--fg_color);
|
color: var(--fg_color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.media-tag-block {
|
.media-tag-block {
|
||||||
padding-top: 5px;
|
padding-top: 5px;
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
|
color: var(--fg_faded);
|
||||||
|
|
||||||
|
.icon-container {
|
||||||
|
padding-right: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-tag,
|
||||||
|
.icon-container {
|
||||||
color: var(--fg_faded);
|
color: var(--fg_faded);
|
||||||
|
}
|
||||||
.icon-container {
|
|
||||||
padding-right: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-tag, .icon-container {
|
|
||||||
color: var(--fg_faded);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline-container .media-tag-block {
|
.timeline-container .media-tag-block {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tweet-geo {
|
.tweet-geo {
|
||||||
color: var(--fg_faded);
|
color: var(--fg_faded);
|
||||||
}
|
}
|
||||||
|
|
||||||
.replying-to {
|
.replying-to {
|
||||||
color: var(--fg_faded);
|
color: var(--fg_faded);
|
||||||
margin: -2px 0 4px;
|
margin: -2px 0 4px;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.retweet-header, .pinned, .tweet-stats {
|
.retweet-header,
|
||||||
align-content: center;
|
.pinned,
|
||||||
color: var(--grey);
|
.tweet-stats {
|
||||||
display: flex;
|
align-content: center;
|
||||||
flex-shrink: 0;
|
color: var(--grey);
|
||||||
flex-wrap: wrap;
|
display: flex;
|
||||||
font-size: 14px;
|
flex-shrink: 0;
|
||||||
font-weight: 600;
|
flex-wrap: wrap;
|
||||||
line-height: 22px;
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 22px;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
@include ellipsis;
|
@include ellipsis;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.retweet-header {
|
.retweet-header {
|
||||||
margin-top: -5px !important;
|
margin-top: -5px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tweet-stats {
|
.tweet-stats {
|
||||||
margin-bottom: -3px;
|
margin-bottom: -3px;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tweet-stat {
|
.tweet-stat {
|
||||||
padding-top: 5px;
|
padding-top: 5px;
|
||||||
min-width: 1em;
|
min-width: 1em;
|
||||||
margin-right: 0.8em;
|
margin-right: 0.8em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.show-thread {
|
.show-thread {
|
||||||
display: block;
|
display: block;
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
padding-top: 2px;
|
padding-top: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.unavailable-box {
|
.unavailable-box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
border: solid 1px var(--dark_grey);
|
border: solid 1px var(--dark_grey);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
background-color: var(--bg_color);
|
background-color: var(--bg_color);
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tweet-link {
|
.tweet-link {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: var(--bg_hover);
|
background-color: var(--bg_hover);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,17 +1,17 @@
|
|||||||
@import '_variables';
|
@import "_variables";
|
||||||
@import '_mixins';
|
@import "_mixins";
|
||||||
|
|
||||||
.embed-video {
|
.embed-video {
|
||||||
.gallery-video {
|
.gallery-video {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background-color: black;
|
background-color: black;
|
||||||
top: 0%;
|
top: 0%;
|
||||||
left: 0%;
|
left: 0%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-container {
|
.video-container {
|
||||||
max-height: unset;
|
max-height: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,76 +1,76 @@
|
|||||||
@import '_variables';
|
@import "_variables";
|
||||||
|
|
||||||
.gallery-row {
|
.gallery-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
max-height: 379.5px;
|
max-height: 379.5px;
|
||||||
max-width: 533px;
|
max-width: 533px;
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
|
|
||||||
.still-image {
|
.still-image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.attachments {
|
.attachments {
|
||||||
margin-top: .35em;
|
margin-top: 0.35em;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-height: 600px;
|
max-height: 600px;
|
||||||
border-radius: 7px;
|
border-radius: 7px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
background-color: var(--bg_color);
|
background-color: var(--bg_color);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
|
|
||||||
.image-attachment {
|
.image-attachment {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.attachment {
|
.attachment {
|
||||||
position: relative;
|
position: relative;
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin: 0 .25em 0 0;
|
margin: 0 0.25em 0 0;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
min-width: 2em;
|
min-width: 2em;
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
max-height: 530px;
|
max-height: 530px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery-gif video {
|
.gallery-gif video {
|
||||||
max-height: 530px;
|
max-height: 530px;
|
||||||
background-color: #101010;
|
background-color: #101010;
|
||||||
}
|
}
|
||||||
|
|
||||||
.still-image {
|
.still-image {
|
||||||
max-height: 379.5px;
|
max-height: 379.5px;
|
||||||
max-width: 533px;
|
max-width: 533px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
max-height: 379.5px;
|
max-height: 379.5px;
|
||||||
flex-basis: 300px;
|
flex-basis: 300px;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.image {
|
.image {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
// .single-image {
|
// .single-image {
|
||||||
@@ -86,34 +86,34 @@
|
|||||||
// }
|
// }
|
||||||
|
|
||||||
.overlay-circle {
|
.overlay-circle {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: var(--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: var(--play_button);
|
border-color: var(--play_button);
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overlay-triangle {
|
.overlay-triangle {
|
||||||
width: 0;
|
width: 0;
|
||||||
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 var(--play_button);
|
border-color: transparent transparent transparent var(--play_button);
|
||||||
margin-left: 14px;
|
margin-left: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.media-gif {
|
.media-gif {
|
||||||
display: table;
|
display: table;
|
||||||
background-color: unset;
|
background-color: unset;
|
||||||
width: unset;
|
width: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
.media-body {
|
.media-body {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,42 +1,42 @@
|
|||||||
@import '_variables';
|
@import "_variables";
|
||||||
|
|
||||||
.poll-meter {
|
.poll-meter {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 6px 0;
|
margin: 6px 0;
|
||||||
height: 26px;
|
height: 26px;
|
||||||
background: var(--bg_color);
|
background: var(--bg_color);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.poll-choice-bar {
|
.poll-choice-bar {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: var(--dark_grey);
|
background: var(--dark_grey);
|
||||||
}
|
}
|
||||||
|
|
||||||
.poll-choice-value {
|
.poll-choice-value {
|
||||||
position: relative;
|
position: relative;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
margin-right: 6px;
|
margin-right: 6px;
|
||||||
min-width: 30px;
|
min-width: 30px;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
}
|
}
|
||||||
|
|
||||||
.poll-choice-option {
|
.poll-choice-option {
|
||||||
position: relative;
|
position: relative;
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
}
|
}
|
||||||
|
|
||||||
.poll-info {
|
.poll-info {
|
||||||
color: var(--grey);
|
color: var(--grey);
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
}
|
}
|
||||||
|
|
||||||
.leader .poll-choice-bar {
|
.leader .poll-choice-bar {
|
||||||
background: var(--accent_dark);
|
background: var(--accent_dark);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,94 +1,95 @@
|
|||||||
@import '_variables';
|
@import "_variables";
|
||||||
|
|
||||||
.quote {
|
.quote {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
border: solid 1px var(--dark_grey);
|
border: solid 1px var(--dark_grey);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
background-color: var(--bg_elements);
|
background-color: var(--bg_elements);
|
||||||
|
overflow: hidden;
|
||||||
|
pointer-events: all;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: var(--grey);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.unavailable:hover {
|
||||||
|
border-color: var(--dark_grey);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tweet-name-row {
|
||||||
|
padding: 6px 8px;
|
||||||
|
margin-top: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quote-text {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
pointer-events: all;
|
white-space: pre-wrap;
|
||||||
position: relative;
|
word-wrap: break-word;
|
||||||
width: 100%;
|
padding: 0px 8px 8px 8px;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
.show-thread {
|
||||||
border-color: var(--grey);
|
padding: 0px 8px 6px 8px;
|
||||||
}
|
margin-top: -6px;
|
||||||
|
}
|
||||||
|
|
||||||
&.unavailable:hover {
|
.replying-to {
|
||||||
border-color: var(--dark_grey);
|
padding: 0px 8px;
|
||||||
}
|
margin: unset;
|
||||||
|
}
|
||||||
.tweet-name-row {
|
|
||||||
padding: 6px 8px;
|
|
||||||
margin-top: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.quote-text {
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
word-wrap: break-word;
|
|
||||||
padding: 0px 8px 8px 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.show-thread {
|
|
||||||
padding: 0px 8px 6px 8px;
|
|
||||||
margin-top: -6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.replying-to {
|
|
||||||
padding: 0px 8px;
|
|
||||||
margin: unset;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.unavailable-quote {
|
.unavailable-quote {
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.quote-link {
|
.quote-link {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
.quote-media-container {
|
.quote-media-container {
|
||||||
max-height: 300px;
|
max-height: 300px;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.card {
|
||||||
|
margin: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attachments {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-gif {
|
||||||
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
.card {
|
.gallery-gif .attachment {
|
||||||
margin: unset;
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: var(--bg_color);
|
||||||
|
|
||||||
|
video {
|
||||||
|
height: unset;
|
||||||
|
width: unset;
|
||||||
|
max-height: 100%;
|
||||||
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.attachments {
|
.gallery-video,
|
||||||
border-radius: 0;
|
.gallery-gif {
|
||||||
}
|
max-height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
.media-gif {
|
.still-image img {
|
||||||
width: 100%;
|
max-height: 250px;
|
||||||
display: flex;
|
}
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery-gif .attachment {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
background-color: var(--bg_color);
|
|
||||||
|
|
||||||
video {
|
|
||||||
height: unset;
|
|
||||||
width: unset;
|
|
||||||
max-height: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery-video, .gallery-gif {
|
|
||||||
max-height: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.still-image img {
|
|
||||||
max-height: 250px
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,138 +1,139 @@
|
|||||||
@import '_variables';
|
@import "_variables";
|
||||||
@import '_mixins';
|
@import "_mixins";
|
||||||
|
|
||||||
.conversation {
|
.conversation {
|
||||||
@include panel(100%, 600px);
|
@include panel(100%, 600px);
|
||||||
|
|
||||||
.show-more {
|
.show-more {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-thread {
|
.main-thread {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
background-color: var(--bg_panel);
|
background-color: var(--bg_panel);
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-tweet, .replies {
|
.main-tweet,
|
||||||
padding-top: 50px;
|
.replies {
|
||||||
margin-top: -50px;
|
padding-top: 50px;
|
||||||
|
margin-top: -50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-tweet .tweet-content {
|
.main-tweet .tweet-content {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media(max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
.main-tweet .tweet-content {
|
.main-tweet .tweet-content {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.reply {
|
.reply {
|
||||||
background-color: var(--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: var(--accent_dark);
|
background: var(--accent_dark);
|
||||||
content: '';
|
content: "";
|
||||||
position: relative;
|
position: relative;
|
||||||
min-width: 3px;
|
min-width: 3px;
|
||||||
width: 3px;
|
width: 3px;
|
||||||
left: 26px;
|
left: 26px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
margin-left: -3px;
|
margin-left: -3px;
|
||||||
margin-bottom: 37px;
|
margin-bottom: 37px;
|
||||||
top: 56px;
|
top: 56px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.with-header:not(:first-child)::after {
|
.with-header:not(:first-child)::after {
|
||||||
background: var(--accent_dark);
|
background: var(--accent_dark);
|
||||||
content: '';
|
content: "";
|
||||||
position: relative;
|
position: relative;
|
||||||
float: left;
|
float: left;
|
||||||
min-width: 3px;
|
min-width: 3px;
|
||||||
width: 3px;
|
width: 3px;
|
||||||
right: calc(100% - 26px);
|
right: calc(100% - 26px);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
margin-left: -3px;
|
margin-left: -3px;
|
||||||
margin-bottom: 37px;
|
margin-bottom: 37px;
|
||||||
bottom: 10px;
|
bottom: 10px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.unavailable::before {
|
.unavailable::before {
|
||||||
top: 48px;
|
top: 48px;
|
||||||
margin-bottom: 28px;
|
margin-bottom: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.more-replies::before {
|
.more-replies::before {
|
||||||
content: '...';
|
content: "...";
|
||||||
background: unset;
|
background: unset;
|
||||||
color: var(--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;
|
||||||
left: 1.2em;
|
left: 1.2em;
|
||||||
width: 5px;
|
width: 5px;
|
||||||
top: 2px;
|
top: 2px;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
margin-left: -2.5px;
|
margin-left: -2.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.earlier-replies {
|
.earlier-replies {
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
margin-bottom: -5px;
|
margin-bottom: -5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline-item.thread-last::before {
|
.timeline-item.thread-last::before {
|
||||||
background: unset;
|
background: unset;
|
||||||
min-width: unset;
|
min-width: unset;
|
||||||
width: 0;
|
width: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.more-replies {
|
.more-replies {
|
||||||
padding-top: 0.3em !important;
|
padding-top: 0.3em !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.more-replies-text {
|
.more-replies-text {
|
||||||
@include ellipsis;
|
@include ellipsis;
|
||||||
display: block;
|
display: block;
|
||||||
margin-left: 58px;
|
margin-left: 58px;
|
||||||
padding: 7px 0;
|
padding: 7px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline-item.thread.more-replies-thread {
|
.timeline-item.thread.more-replies-thread {
|
||||||
padding: 0 0.75em;
|
padding: 0 0.75em;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
top: 40px;
|
||||||
|
margin-bottom: 31px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-replies {
|
||||||
|
display: flex;
|
||||||
|
padding-top: unset !important;
|
||||||
|
margin-top: 8px;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
top: 40px;
|
display: inline-block;
|
||||||
margin-bottom: 31px;
|
position: relative;
|
||||||
|
top: -1px;
|
||||||
|
line-height: 0.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.more-replies {
|
.more-replies-text {
|
||||||
display: flex;
|
display: inline;
|
||||||
padding-top: unset !important;
|
|
||||||
margin-top: 8px;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
top: -1px;
|
|
||||||
line-height: 0.4em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.more-replies-text {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,68 +1,69 @@
|
|||||||
@import '_variables';
|
@import "_variables";
|
||||||
@import '_mixins';
|
@import "_mixins";
|
||||||
|
|
||||||
video {
|
video {
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery-video {
|
.gallery-video {
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery-video.card-container {
|
.gallery-video.card-container {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-container {
|
.video-container {
|
||||||
min-height: 80px;
|
min-height: 80px;
|
||||||
min-width: 200px;
|
min-width: 200px;
|
||||||
max-height: 530px;
|
max-height: 530px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-overlay {
|
.video-overlay {
|
||||||
@include play-button;
|
@include play-button;
|
||||||
background-color: $shadow;
|
background-color: $shadow;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
top: calc(50% - 20px);
|
top: calc(50% - 20px);
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
margin: 0 20px;
|
margin: 0 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
div {
|
.overlay-circle {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
top: calc(50% - 20px);
|
top: calc(50% - 20px);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
form {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
form {
|
||||||
padding: 5px 8px;
|
width: 100%;
|
||||||
font-size: 16px;
|
height: 100%;
|
||||||
}
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
padding: 5px 8px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user