/* Copyright 2025 The Forgejo Authors. All rights reserved. * SPDX-License-Identifier: GPL-3.0-or-later */ :root stats-bar { --stats-bar-height: 0.75rem;} @media (pointer: coarse) { :root stats-bar { --stats-bar-height: 1rem; }} /* General properties, can be reused by different kinds of stats bars */stats-bar { display: flex !important; height: var(--stats-bar-height); width: 100%; border-radius: var(--border-radius); .slice { display: inline-block; &:first-child { border-radius: var(--border-radius) 0 0 var(--border-radius); } &:last-child { border-radius: 0 var(--border-radius) var(--border-radius) 0; } &:only-child { border-radius: var(--border-radius); } }} /* Properties for stats bars with legend included via <details> */details.stats { /* Summary and legend should be stacked vertically */ display: flex; flex-direction: column; /* Prevent opener marker from showing up */ summary { display: flex; } /* Cancel unwanted <ul> properties of legend */ ul { display: flex; margin: 0; }} /* Properties specific to the UI in storage overview */.size-overview .stats { border-radius: var(--border-radius); &:hover, &[open] { background-color: var(--color-box-body-highlight); stats-bar { background-color: var(--color-secondary-dark-3); } } &[open] { gap: 0.25rem; background-color: var(--color-box-body-highlight); } summary { flex-direction: column; padding: 0.75rem; gap: 1rem; stats-bar { /* Same as default background of `progress` */ background-color: var(--color-secondary-dark-1); } } ul { flex-direction: column; gap: 0.5rem; padding: 0.75rem; padding-top: 0; li { display: flex; align-items: center; gap: 0.5rem; } }} /* Properties specific to the lang stats in repo overview */#language-stats { stats-bar { gap: 2px; border-radius: 0 0 var(--border-radius) var(--border-radius); overflow: hidden; .slice { border-radius: 0; } } &[open] stats-bar { border-radius: 0; } ul { min-height: 2rem; padding: 0 0.5rem; flex-wrap: wrap; justify-content: space-around; gap: 0 1rem; li { display: flex; align-items: center; justify-content: center; padding: 0.25rem 0; gap: 0.25em; span { font-weight: var(--font-weight-semibold); text-wrap: nowrap; } } }}
/* Copyright 2025 The Forgejo Authors. All rights reserved.
* SPDX-License-Identifier: GPL-3.0-or-later */
:root stats-bar {
--stats-bar-height: 0.75rem;
}
@media (pointer: coarse) {
:root stats-bar {
--stats-bar-height: 1rem;
}
}
/* General properties, can be reused by different kinds of stats bars */
stats-bar {
display: flex !important;
height: var(--stats-bar-height);
width: 100%;
border-radius: var(--border-radius);
.slice {
display: inline-block;
&:first-child {
border-radius: var(--border-radius) 0 0 var(--border-radius);
}
&:last-child {
border-radius: 0 var(--border-radius) var(--border-radius) 0;
}
&:only-child {
border-radius: var(--border-radius);
}
}
}
/* Properties for stats bars with legend included via <details> */
details.stats {
/* Summary and legend should be stacked vertically */
display: flex;
flex-direction: column;
/* Prevent opener marker from showing up */
summary {
display: flex;
}
/* Cancel unwanted <ul> properties of legend */
ul {
display: flex;
margin: 0;
}
}
/* Properties specific to the UI in storage overview */
.size-overview .stats {
border-radius: var(--border-radius);
&:hover,
&[open] {
background-color: var(--color-box-body-highlight);
stats-bar {
background-color: var(--color-secondary-dark-3);
}
}
&[open] {
gap: 0.25rem;
background-color: var(--color-box-body-highlight);
}
summary {
flex-direction: column;
padding: 0.75rem;
gap: 1rem;
stats-bar {
/* Same as default background of `progress` */
background-color: var(--color-secondary-dark-1);
}
}
ul {
flex-direction: column;
gap: 0.5rem;
padding: 0.75rem;
padding-top: 0;
li {
display: flex;
align-items: center;
gap: 0.5rem;
}
}
}
/* Properties specific to the lang stats in repo overview */
#language-stats {
stats-bar {
gap: 2px;
border-radius: 0 0 var(--border-radius) var(--border-radius);
overflow: hidden;
.slice {
border-radius: 0;
}
}
&[open] stats-bar {
border-radius: 0;
}
ul {
min-height: 2rem;
padding: 0 0.5rem;
flex-wrap: wrap;
justify-content: space-around;
gap: 0 1rem;
li {
display: flex;
align-items: center;
justify-content: center;
padding: 0.25rem 0;
gap: 0.25em;
span {
font-weight: var(--font-weight-semibold);
text-wrap: nowrap;
}
}
}
}