minor css fixes

This commit is contained in:
Candifloss 2024-11-11 21:41:30 +05:30
parent e4f0aa7679
commit 4a8d867e59
5 changed files with 129 additions and 130 deletions

View File

@ -83,7 +83,7 @@ header .header-section.header-right a:hover {
width: 250px;
background-color: #1a1a1a;
color: #f0f0f0;
padding: 20px 0;
padding: 0;
display: flex;
flex-direction: column;
}
@ -91,15 +91,16 @@ header .header-section.header-right a:hover {
display: flex;
align-items: center;
gap: 10px;
padding: 0 12px 10px;
padding: 8px 12px;
border-bottom: 2px solid cadetblue;
}
.sidebar-right .repo-info .repo-logo {
width: 35px;
height: 35px;
width: 39px;
height: 39px;
border-radius: 50%;
display: flex;
border: 2px solid #7390df;
padding: 2px;
background-color: black;
}
.sidebar-right .repo-info .repo-logo img {
width: 35px;
@ -125,7 +126,7 @@ header .header-section.header-right a:hover {
display: block;
}
.sidebar-right .repo-info:hover .repo-logo {
border: 2px solid #9b9b9b;
background-color: #9b9b9b;
}
.sidebar-right .repo-nav {
display: flex;
@ -137,14 +138,13 @@ header .header-section.header-right a:hover {
gap: 10px;
color: #f0f0f0;
text-decoration: none;
font-size: 0.95rem;
padding: 0.5em 12px;
border-right: 2px solid rgba(0, 0, 0, 0);
height: 3em;
font-size: 15px;
padding: 0.75em 12px;
border-left: 2px solid rgba(0, 0, 0, 0);
}
.sidebar-right .repo-nav .nav-link:hover {
background-color: #333;
border-right: 2px solid wheat;
border-left: 2px solid wheat;
}
.sidebar-right .repo-nav .nav-link i {
font-size: 1em;
@ -186,15 +186,14 @@ header .header-section.header-right a:hover {
gap: 10px;
color: #f0f0f0;
text-decoration: none;
font-size: 0.95rem;
padding: 0.5em 12px;
border-right: 2px solid rgba(0, 0, 0, 0);
height: 3em;
font-size: 15px;
padding: 0.75em 12px;
border-left: 2px solid rgba(0, 0, 0, 0);
margin-top: auto;
}
.sidebar-right .settings-link:hover {
background-color: #333;
border-right: 2px solid wheat;
border-left: 2px solid wheat;
}
.sidebar-right .settings-link i {
font-size: 1em;

View File

@ -40,7 +40,7 @@
<!-- Repo Info -->
<div class="repo-info">
<div class="repo-logo">
<img src="../images/repo-icon.png" alt="&#xf02e;" />
<img src="../images/repo_icon.png" alt="&#xf02e;" />
</div>
<div class="repo-details">
<a class="repo-author" href="/author_page">Author Name</a>

BIN
test/images/repo_icon.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

BIN
test/images/repo_icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

View File

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