languages css tweak
This commit is contained in:
parent
dd0aaf2875
commit
018f492478
@ -86,6 +86,7 @@ header .header-section.header-right a:hover {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 90vh;
|
||||
}
|
||||
.sidebar-right .repo-info {
|
||||
display: flex;
|
||||
@ -182,6 +183,7 @@ header .header-section.header-right a:hover {
|
||||
}
|
||||
.sidebar-right .repo-languages {
|
||||
padding: 8px 12px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.sidebar-right .repo-languages .repo-languages-title {
|
||||
width: 100%;
|
||||
@ -217,7 +219,19 @@ header .header-section.header-right a:hover {
|
||||
margin-right: 0;
|
||||
}
|
||||
.sidebar-right .repo-languages .repo-lang-list .repo-lang-list-item.lang1 {
|
||||
background-color: #1b97ff;
|
||||
background: linear-gradient(to left, rgb(188, 33, 21) 0%, rgb(188, 33, 21) 40%, rgba(0, 0, 0, 0) 0%);
|
||||
}
|
||||
.sidebar-right .repo-languages .repo-lang-list .repo-lang-list-item.lang2 {
|
||||
background: linear-gradient(to left, rgb(73, 103, 114) 0%, rgb(73, 103, 114) 10%, rgba(0, 0, 0, 0) 0%);
|
||||
}
|
||||
.sidebar-right .repo-languages .repo-lang-list .repo-lang-list-item.lang3 {
|
||||
background: linear-gradient(to left, rgb(194, 59, 59) 0%, rgb(194, 59, 59) 15%, rgba(0, 0, 0, 0) 0%);
|
||||
}
|
||||
.sidebar-right .repo-languages .repo-lang-list .repo-lang-list-item.lang4 {
|
||||
background: linear-gradient(to left, rgb(172, 58, 3) 0%, rgb(172, 58, 3) 20%, rgba(0, 0, 0, 0) 0%);
|
||||
}
|
||||
.sidebar-right .repo-languages .repo-lang-list .repo-lang-list-item.lang5 {
|
||||
background: linear-gradient(to left, rgb(84, 160, 74) 0%, rgb(84, 160, 74) 90%, rgba(0, 0, 0, 0) 0%);
|
||||
}
|
||||
.sidebar-right .settings-link {
|
||||
display: flex;
|
||||
|
@ -1,3 +1,5 @@
|
||||
@use 'sass:math';
|
||||
|
||||
// Color Variables
|
||||
$sidebar-bg-color: #1a1a1a;
|
||||
$sidebar-text-color: #f0f0f0;
|
||||
@ -9,6 +11,22 @@ $stat-text-color: #f0f0f0;
|
||||
$stat-count-color: #f0f0f0;
|
||||
$settings-link-hover-bg-color: #333;
|
||||
|
||||
@function random_col() {
|
||||
$r: (random($limit: 128) + random($limit: 128));
|
||||
$g: random($limit: (255 - $r));
|
||||
$b: random($limit: (255 - math.max($r, $g)));
|
||||
@return rgb($r, $g, $b);
|
||||
}
|
||||
|
||||
@function lang_bg($col, $perc) {
|
||||
@return linear-gradient(
|
||||
to left,
|
||||
$col 0%,
|
||||
$col $perc,
|
||||
rgba(0,0,0,0) 0%
|
||||
);
|
||||
}
|
||||
|
||||
@mixin sidbar-left-nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -39,6 +57,7 @@ $settings-link-hover-bg-color: #333;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 90vh;
|
||||
|
||||
.repo-info {
|
||||
display: flex;
|
||||
@ -144,12 +163,14 @@ $settings-link-hover-bg-color: #333;
|
||||
.repo-languages {
|
||||
//background-color: black;
|
||||
padding: 8px 12px;
|
||||
overflow-y: scroll;
|
||||
|
||||
.repo-languages-title {
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
height: 1.7em;
|
||||
display: block;
|
||||
//position: absolute;
|
||||
}
|
||||
|
||||
.repo-lang-list {
|
||||
@ -182,7 +203,19 @@ $settings-link-hover-bg-color: #333;
|
||||
}
|
||||
|
||||
&.lang1 {
|
||||
background-color: #1b97ff;
|
||||
background: lang_bg(random_col(), 40%);
|
||||
}
|
||||
&.lang2 {
|
||||
background: lang_bg(random_col(), 10%);
|
||||
}
|
||||
&.lang3 {
|
||||
background: lang_bg(random_col(), 15%);
|
||||
}
|
||||
&.lang4 {
|
||||
background: lang_bg(random_col(), 20%);
|
||||
}
|
||||
&.lang5 {
|
||||
background: lang_bg(random_col(), 90%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user