Gitea-Theme/test/scss/repo-home/_sidebar-right.scss

@use 'sass:math';

// Color Variables
$sidebar-bg-color: #1a1a1a;
$sidebar-text-color: #f0f0f0;
$sidebar-link-hover-bg-color: #333;
$sidebar-border-color: #444;
$sidebar-author-color: #bfbfbf;
$stat-bg-color: #333;
$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;
    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, &:active {
        background-color: $sidebar-link-hover-bg-color;
        border-left: 2px solid wheat;
    }

    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: 0;
    display: flex;
    flex-direction: column;
	max-height: 90vh;

    .repo-info {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        border-bottom: 2px solid cadetblue;

        .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;

                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-name {
                font-size: 1.1rem;
                font-weight: bold;
                display: block;
            }
        }

        &:hover, &:active {
            .repo-logo {
                img {
                    border: 1px solid #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;
		overflow-y: scroll;

		.repo-languages-title {
			width: 100%;
			font-size: 16px;
			height: 1.7em;
			display: block;
			//position: absolute;
		}

        .repo-lang-list {
            display: block;
            width: 100%;

            .repo-lang-list-item {
                font-size: 15px;
                display: flex;
                width: 100%;

                * {
                           margin: auto;
                }
				
				.repo-lang-icon {
                           width: 3ch;
                           text-align: center;
                           margin: auto 0;
                }
                .repo-lang-name {
                           min-width: 10ch;
                           text-align: left;
                           margin-left: 4px;
                }
                .repo-lang-perc {
                           min-width: 4ch;
                           text-align: right;
                           margin-right: 0;
                }

				&.lang1 {
					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%);
				}
            }
        }
    }

    .settings-link {
        @include sidbar-left-nav-links;
		margin-top: auto;
    }
}