candifloss/Gitea-Theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

languages on sidebar

Browse Source
This commit is contained in:
Candifloss 2024-11-13 16:50:37 +05:30
parent 5511cdaa69
commit dd0aaf2875
5 changed files with 2397 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2197
test/css/repo-home.css
View File

File diff suppressed because it is too large Load Diff

31
test/html/repo-home.html
View File

@ -107,6 +107,37 @@
</button> </button>
</div> </div>
<div class="repo-languages">
<h3 class="repo-languages-title">Languages</h3>
<ul class="repo-lang-list">
<li class="repo-lang-list-item lang1">
<i class="repo-lang-icon fa-brands fa-css3-alt"></i>
<span class="repo-lang-name">Css</span>
<span class="repo-lang-perc">40%</span>
</li>
<li class="repo-lang-list-item lang2">
<i class="repo-lang-icon fa-brands fa-html5"></i>
<span class="repo-lang-name">Html</span>
<span class="repo-lang-perc">10%</span>
</li>
<li class="repo-lang-list-item lang3">
<i class="repo-lang-icon fa-brands fa-sass"></i>
<span class="repo-lang-name">Scss</span>
<span class="repo-lang-perc">15%</span>
</li>
<li class="repo-lang-list-item lang4">
<i class="repo-lang-icon fa-brands fa-rust"></i>
<span class="repo-lang-name">Rust</span>
<span class="repo-lang-perc">20%</span>
</li>
<li class="repo-lang-list-item lang5">
<i class="repo-lang-icon fa-brands fa-golang"></i>
<span class="repo-lang-name">Go</span>
<span class="repo-lang-perc">90%</span>
</li>
</ul>
</div>
<!-- Repo Settings --> <!-- Repo Settings -->
<a href="/settings" class="nav-link settings-link"> <a href="/settings" class="nav-link settings-link">
<i class="fa-solid fa-gear"></i> Repo Settings <i class="fa-solid fa-gear"></i> Repo Settings

7
test/scss/fontawesome6/scss/_variables.scss
View File

@ -2546,6 +2546,13 @@ $fa-icons-custom: (
"eye": $fa-var-eye, "eye": $fa-var-eye,
"star": $fa-var-star, "star": $fa-var-star,
"box": $fa-var-box, "box": $fa-var-box,
"plus": $fa-var-plus,
"bell": $fa-var-bell,
"css3-alt": $fa-var-css3-alt,
"html5": $fa-var-html5,
"sass": $fa-var-sass,
"golang": $fa-var-golang,
"rust": $fa-var-rust,
); );
$fa-icons: ( $fa-icons: (

1
test/scss/repo-home.scss
View File

@ -4,6 +4,7 @@
@use "fontawesome6/scss/fontawesome"; @use "fontawesome6/scss/fontawesome";
@use "fontawesome6/scss/regular"; @use "fontawesome6/scss/regular";
@use "fontawesome6/scss/solid"; @use "fontawesome6/scss/solid";
@use "fontawesome6/scss/brands";
body { body {

273
test/scss/repo-home/_sidebar-right.scss
View File

@ -10,139 +10,186 @@ $stat-count-color: #f0f0f0;
$settings-link-hover-bg-color: #333; $settings-link-hover-bg-color: #333;
@mixin sidbar-left-nav-links { @mixin sidbar-left-nav-links {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
color: $sidebar-text-color; color: $sidebar-text-color;
text-decoration: none; text-decoration: none;
font-size: 15px; font-size: 15px;
padding: 0.75em 12px; padding: 0.75em 12px;
border-left: 2px solid rgba(0,0,0,0); border-left: 2px solid rgba(0,0,0,0);
&:hover, &:active { &:hover, &:active {
background-color: $sidebar-link-hover-bg-color; background-color: $sidebar-link-hover-bg-color;
border-left: 2px solid wheat; border-left: 2px solid wheat;
} }
i { i {
font-size: 1em; font-size: 1em;
width: 1em; width: 1em;
height: 1em; height: 1em;
text-align: center; text-align: center;
} }
} }
.sidebar-right { .sidebar-right {
width: 250px; width: 250px;
background-color: $sidebar-bg-color; background-color: $sidebar-bg-color;
color: $sidebar-text-color; color: $sidebar-text-color;
padding: 0; padding: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.repo-info { .repo-info {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
padding: 8px 12px; padding: 8px 12px;
border-bottom: 2px solid cadetblue; border-bottom: 2px solid cadetblue;
.repo-logo { .repo-logo {
//background-color: #f0f0f0; //background-color: #f0f0f0;
width: 39px; width: 39px;
height: 39px; height: 39px;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
padding: 2px; padding: 2px;
background-color: black; background-color: black;
img { img {
width: 35px; width: 35px;
height: 35px; height: 35px;
border-radius: 50%; border-radius: 50%;
//color: green; //color: green;
line-height: 35px; line-height: 35px;
text-align: center; text-align: center;
font-size: 23px; font-size: 23px;
font-family: 'Font Awesome 6 Free'; font-family: 'Font Awesome 6 Free';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-display: block; font-display: block;
src: url('../fonts/fa-regular-400.woff2') format('woff2'), src: url('../fonts/fa-regular-400.woff2') format('woff2'),
url('../fonts/fa-regular-400.ttf') format('truetype'); url('../fonts/fa-regular-400.ttf') format('truetype');
} }
} }
.repo-details { .repo-details {
.repo-author { .repo-author {
font-size: 0.9rem; font-size: 0.9rem;
color: $sidebar-author-color; color: $sidebar-author-color;
display: block; display: block;
} }
.repo-name { .repo-name {
font-size: 1.1rem; font-size: 1.1rem;
font-weight: bold; font-weight: bold;
display: block; display: block;
} }
} }
&:hover, &:active { &:hover, &:active {
.repo-logo { .repo-logo {
img { img {
border: 1px solid #9b9b9b; border: 1px solid #9b9b9b;
//background-color: #9b9b9b; //background-color: #9b9b9b;
} }
} }
}
}
.repo-nav {
display: flex;
flex-direction: column;
//gap: 0.3rem;
.nav-link {
@include sidbar-left-nav-links;
}
}
.repo-stats {
display: flex;
gap: 0.5rem;
padding: 7px 12px;
.stat-item {
display: flex;
align-items: center;
gap: 3px;
background-color: $stat-bg-color;
padding: 0.3rem 0.5rem;
border-radius: 1rem;
color: $stat-text-color;
font-size: 0.8rem;
height: 1.4rem;
.stat-icon {
font-size: 0.9em;
}
.stat-count {
color: $stat-count-color;
min-width: 4ch;
text-align: right;
}
&:hover, &:active {
background-color: #444;
color:#1b97ff;
}
}
}
.repo-languages {
//background-color: black;
padding: 8px 12px;
.repo-languages-title {
width: 100%;
font-size: 16px;
height: 1.7em;
display: block;
} }
}
.repo-nav { .repo-lang-list {
display: flex; display: block;
flex-direction: column; width: 100%;
//gap: 0.3rem;
.nav-link { .repo-lang-list-item {
@include sidbar-left-nav-links; font-size: 15px;
} display: flex;
} width: 100%;
.repo-stats { * {
display: flex; margin: auto;
gap: 0.5rem; }
padding: 7px 12px;
.stat-item { .repo-lang-icon {
display: flex; width: 3ch;
align-items: center; text-align: center;
gap: 3px; margin: auto 0;
background-color: $stat-bg-color; }
padding: 0.3rem 0.5rem; .repo-lang-name {
border-radius: 1rem; min-width: 10ch;
color: $stat-text-color; text-align: left;
font-size: 0.8rem; margin-left: 4px;
height: 1.4rem; }
.repo-lang-perc {
min-width: 4ch;
text-align: right;
margin-right: 0;
}
.stat-icon { &.lang1 {
font-size: 0.9em; background-color: #1b97ff;
} }
}
}
}
.stat-count { .settings-link {
color: $stat-count-color; @include sidbar-left-nav-links;
min-width: 4ch;
text-align: right;
}
&:hover, &:active {
background-color: #444;
color:#1b97ff;
}
}
}
.settings-link {
@include sidbar-left-nav-links;
margin-top: auto; margin-top: auto;
} }
} }