Kuzirashi
6 years ago
6 changed files with 364 additions and 256 deletions
@ -0,0 +1,3 @@ |
|||
[*] |
|||
indent_style = space |
|||
indent_size = 2 |
|||
@ -0,0 +1,5 @@ |
|||
export class ExtensionSettings { |
|||
get isDarkTheme() { |
|||
return Boolean(document.querySelector('.js-nightmode-icon.Icon--crescentFilled')); |
|||
} |
|||
} |
|||
@ -1,254 +1,296 @@ |
|||
.HiveExtension-Twitter { |
|||
&_profile-score { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
&_tweet-author-score { |
|||
position: relative; |
|||
|
|||
&_display { |
|||
$root: &; |
|||
|
|||
color: #657786; |
|||
|
|||
$highlightColor: #817aff; |
|||
|
|||
&_score { |
|||
display: inline-block; |
|||
font-size: 12px; |
|||
font-weight: bold; |
|||
line-height: 1; |
|||
margin-left: 6px; |
|||
position: relative; |
|||
vertical-align: text-bottom; |
|||
} |
|||
|
|||
&_icon { |
|||
fill: #657786; |
|||
overflow: visible; |
|||
width: 18px; |
|||
height: 18px; |
|||
margin-top: 2px; |
|||
} |
|||
|
|||
&:hover { |
|||
#{$root}_score { |
|||
color: $highlightColor; |
|||
} |
|||
|
|||
#{$root}_icon { |
|||
fill: $highlightColor;; |
|||
} |
|||
} |
|||
} |
|||
&_profile-score { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
&_tweet-author-score { |
|||
color: #4ab3f4; |
|||
text-align: center; |
|||
display: block; |
|||
float: left; |
|||
margin-top: 55px; |
|||
margin-left: -58px; |
|||
position: absolute; |
|||
width: 48px; |
|||
|
|||
&_display { |
|||
z-index: 3; |
|||
display: block; |
|||
position: relative; |
|||
user-select: none; |
|||
|
|||
&-in-thread { |
|||
background: white; |
|||
|
|||
.js-navigation-active.stream-item &, |
|||
.tweet:hover & { |
|||
background: #f5f8fa; |
|||
} |
|||
|
|||
&-dark { |
|||
background: #15202b; |
|||
|
|||
.js-navigation-active.stream-item &, |
|||
.tweet:hover & { |
|||
background: #15202b; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
&_tweet-individual-score { |
|||
position: relative; |
|||
|
|||
&_display { |
|||
$root: &; |
|||
|
|||
color: #657786; |
|||
|
|||
$highlightColor: #817aff; |
|||
|
|||
&_score { |
|||
display: inline-block; |
|||
font-size: 12px; |
|||
font-weight: bold; |
|||
line-height: 1; |
|||
margin-left: 6px; |
|||
position: relative; |
|||
vertical-align: text-bottom; |
|||
} |
|||
|
|||
&_icon { |
|||
fill: #657786; |
|||
overflow: visible; |
|||
width: 18px; |
|||
height: 18px; |
|||
margin-top: 2px; |
|||
} |
|||
|
|||
&:hover { |
|||
#{$root}_score { |
|||
color: $highlightColor; |
|||
} |
|||
|
|||
#{$root}_icon { |
|||
fill: $highlightColor; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
&_popup { |
|||
&-profile { |
|||
position: absolute; |
|||
background: #fafbfd; |
|||
padding: 10px; |
|||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25); |
|||
width: 300px; |
|||
z-index: 1000; |
|||
font-size: 14px; |
|||
line-height: 19.25px; |
|||
user-select: none; |
|||
color: #14171a; |
|||
|
|||
&_title { |
|||
color: #545454; |
|||
margin: 0; |
|||
display: block; |
|||
font-size: 1.17em; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
&_content { |
|||
border: 1px solid #eeedff; |
|||
padding: 1rem; |
|||
background-color: white; |
|||
border-radius: 6px; |
|||
} |
|||
|
|||
&_followers { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-top: 24px; |
|||
text-align: center; |
|||
overflow: scroll; |
|||
margin-top: 10px; |
|||
|
|||
&_follower { |
|||
font-weight: 600; |
|||
background-color: white; |
|||
padding: 12px 16px; |
|||
margin-right: 8px; |
|||
border-radius: 6px; |
|||
border: 1px solid #eeedff; |
|||
|
|||
&_image { |
|||
height: 40px; |
|||
width: 40px; |
|||
overflow: hidden; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
&_name { |
|||
width: 60px; |
|||
margin-top: 8px; |
|||
font-size: 10px; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&-hidden { |
|||
visibility: hidden; |
|||
} |
|||
|
|||
&_cluster-score { |
|||
position: relative; |
|||
|
|||
&:nth-of-type(n + 3) { |
|||
margin-top: 10px; |
|||
} |
|||
|
|||
&_right { |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
|
|||
&_bold { |
|||
font-weight: 500; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
&_small { |
|||
color: #9ca4ab; |
|||
font-size: 10px; |
|||
} |
|||
} |
|||
|
|||
&_progress-bar { |
|||
width: 100%; |
|||
position: relative; |
|||
margin-top: 8px; |
|||
|
|||
&_popup { |
|||
&-profile { |
|||
&_bg { |
|||
height: 4px; |
|||
border-radius: 2px; |
|||
background-color: #eeedff; |
|||
} |
|||
|
|||
&_progress { |
|||
background-color: rgba(87, 77, 255, 0.7); |
|||
position: absolute; |
|||
background: #fafbfd; |
|||
padding: 10px; |
|||
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.25); |
|||
width: 300px; |
|||
z-index: 1000; |
|||
font-size: 14px; |
|||
line-height: 19.25px; |
|||
|
|||
&_title { |
|||
color: #545454; |
|||
margin: 0; |
|||
display: block; |
|||
font-size: 1.17em; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
&_content { |
|||
border: 1px solid #eeedff; |
|||
padding: 1rem; |
|||
background-color: white; |
|||
border-radius: 6px; |
|||
} |
|||
|
|||
&_followers { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-top: 24px; |
|||
text-align: center; |
|||
overflow: scroll; |
|||
margin-top: 10px; |
|||
|
|||
&_follower { |
|||
font-weight: 600; |
|||
background-color: white; |
|||
padding: 12px 16px; |
|||
margin-right: 8px; |
|||
border-radius: 6px; |
|||
border: 1px solid #eeedff; |
|||
|
|||
&_image { |
|||
height: 40px; |
|||
width: 40px; |
|||
overflow: hidden; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
&_name { |
|||
width: 60px; |
|||
margin-top: 8px; |
|||
font-size: 10px; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&-hidden { |
|||
visibility: hidden; |
|||
} |
|||
|
|||
&_cluster-score { |
|||
position: relative; |
|||
|
|||
&:nth-of-type(n + 3) { |
|||
margin-top: 10px; |
|||
} |
|||
|
|||
&_right { |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
|
|||
&_bold { |
|||
font-weight: 500; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
&_small { |
|||
color: #9ca4ab; |
|||
font-size: 10px; |
|||
} |
|||
} |
|||
|
|||
&_progress-bar { |
|||
width: 100%; |
|||
position: relative; |
|||
margin-top: 8px; |
|||
|
|||
&_bg { |
|||
height: 4px; |
|||
border-radius: 2px; |
|||
background-color: #eeedff; |
|||
} |
|||
|
|||
&_progress { |
|||
background-color:rgba(87, 77, 255, 0.70); |
|||
position: absolute; |
|||
height: 4px; |
|||
border-radius: 4px; |
|||
top: -1px; |
|||
left: -1px; |
|||
right: 0; |
|||
border: 1px solid white; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
height: 4px; |
|||
border-radius: 4px; |
|||
top: -1px; |
|||
left: -1px; |
|||
right: 0; |
|||
border: 1px solid white; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.radial-progress { |
|||
$circle-size: 160px; |
|||
$circle-background: #d6dadc; |
|||
$circle-color: #8784ff; |
|||
$inset-size: $circle-size - 20px; |
|||
$inset-color: #fbfbfb; |
|||
$transition-length: 1s; |
|||
$percentage-font-size: 22px; |
|||
$percentage-text-width: 57px; |
|||
|
|||
margin: 30px auto; |
|||
width: $circle-size; |
|||
height: $circle-size; |
|||
|
|||
background-color: $circle-background; |
|||
border-radius: 50%; |
|||
$circle-size: 160px; |
|||
$circle-background: #d6dadc; |
|||
$circle-color: #8784ff; |
|||
$inset-size: $circle-size - 20px; |
|||
$inset-color: #fbfbfb; |
|||
$transition-length: 1s; |
|||
$percentage-font-size: 22px; |
|||
$percentage-text-width: 57px; |
|||
|
|||
margin: 30px auto; |
|||
width: $circle-size; |
|||
height: $circle-size; |
|||
|
|||
background-color: $circle-background; |
|||
border-radius: 50%; |
|||
|
|||
.circle { |
|||
.mask, |
|||
.fill, |
|||
.shadow { |
|||
width: $circle-size; |
|||
height: $circle-size; |
|||
position: absolute; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.mask, |
|||
.fill { |
|||
-webkit-backface-visibility: hidden; |
|||
backface-visibility: hidden; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.mask { |
|||
clip: rect(0px, $circle-size, $circle-size, $circle-size/2); |
|||
|
|||
.fill { |
|||
clip: rect(0px, $circle-size/2, $circle-size, 0px); |
|||
background-color: $circle-color; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.circle { |
|||
.mask, .fill, .shadow { |
|||
width: $circle-size; |
|||
height: $circle-size; |
|||
position: absolute; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.mask, .fill { |
|||
-webkit-backface-visibility: hidden; |
|||
backface-visibility: hidden; |
|||
border-radius: 50%; |
|||
$i: 0; |
|||
$increment: 180deg / 100; |
|||
|
|||
@for $i from 1 through 100 { |
|||
&[data-progress="#{$i}"] { |
|||
.circle { |
|||
.mask.full, |
|||
.fill { |
|||
transform: rotate($increment * $i); |
|||
} |
|||
.fill.fix { |
|||
transform: rotate($increment * $i * 2); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.circle_inset { |
|||
width: $inset-size; |
|||
height: $inset-size; |
|||
position: absolute; |
|||
margin-left: ($circle-size - $inset-size)/2; |
|||
margin-top: ($circle-size - $inset-size)/2; |
|||
|
|||
.mask { |
|||
clip: rect(0px, $circle-size, $circle-size, $circle-size/2); |
|||
|
|||
.fill { |
|||
clip: rect(0px, $circle-size/2, $circle-size, 0px); |
|||
background-color: $circle-color; |
|||
} |
|||
} |
|||
} |
|||
|
|||
$i: 0; |
|||
$increment: 180deg / 100; |
|||
|
|||
@for $i from 1 through 100 { |
|||
&[data-progress="#{$i}"] { |
|||
.circle { |
|||
.mask.full, .fill { |
|||
transform: rotate($increment * $i); |
|||
} |
|||
.fill.fix { |
|||
transform: rotate($increment * $i * 2); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.circle_inset { |
|||
width: $inset-size; |
|||
height: $inset-size; |
|||
position: absolute; |
|||
margin-left: ($circle-size - $inset-size)/2; |
|||
margin-top: ($circle-size - $inset-size)/2; |
|||
|
|||
background-color: $inset-color; |
|||
border-radius: 50%; |
|||
|
|||
.percentage { |
|||
.numbers { |
|||
$width: 90px; |
|||
$height: 68px; |
|||
|
|||
text-align: center; |
|||
margin-left: ($inset-size - $width) / 2; |
|||
width: $width; |
|||
height: $height; |
|||
margin-top: ($inset-size - $height) / 2; |
|||
|
|||
&_main { |
|||
width: $percentage-text-width; |
|||
display: inline-block; |
|||
vertical-align: top; |
|||
text-align: center; |
|||
font-weight: 800; |
|||
font-size: $percentage-font-size; |
|||
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; |
|||
color: black; |
|||
} |
|||
} |
|||
} |
|||
background-color: $inset-color; |
|||
border-radius: 50%; |
|||
|
|||
.percentage { |
|||
.numbers { |
|||
$width: 90px; |
|||
$height: 68px; |
|||
|
|||
text-align: center; |
|||
margin-left: ($inset-size - $width) / 2; |
|||
width: $width; |
|||
height: $height; |
|||
margin-top: ($inset-size - $height) / 2; |
|||
|
|||
&_main { |
|||
width: $percentage-text-width; |
|||
display: inline-block; |
|||
vertical-align: top; |
|||
text-align: center; |
|||
font-weight: 800; |
|||
font-size: $percentage-font-size; |
|||
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; |
|||
color: black; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.ProfileTweet-action--dm { |
|||
min-width: 60px; |
|||
} |
|||
min-width: 60px; |
|||
} |
|||
|
|||
Loading…
Reference in new issue