githaven/web_src/css/repo/header.css
wxiaoguang bfa160fc98
Refactor repo header/list (#29969)
1. Use general "mobile-only" and "not-mobile" CSS styles, remove some`@media (max-width: 767.98px)` tricks
2. Use `CountFmt` for repo list, just like the repo header (and it matches GitHub, to avoid big numbers bloat the page)
2024-03-21 17:04:03 +00:00

71 lines
1.4 KiB
CSS

.header-wrapper .fork-flag {
margin-top: 0.5rem;
font-size: 12px;
}
.repo-header {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 4px;
}
.repo-header .flex-item {
padding: 0;
}
.repo-header .flex-item-main {
flex: 0;
flex-basis: unset;
}
.repo-header .flex-item-trailing {
flex-wrap: nowrap;
}
.repo-buttons {
align-items: center;
display: flex;
flex-flow: row wrap;
word-break: keep-all;
gap: 0.25em;
}
.repo-buttons .ui.labeled.button > .label:hover {
color: var(--color-primary-light-2);
background: var(--color-light);
}
.repo-buttons button[disabled] ~ .label {
opacity: var(--opacity-disabled);
color: var(--color-text-dark);
background: var(--color-light-mimic-enabled) !important;
}
.repo-buttons button[disabled] ~ .label:hover {
color: var(--color-primary-dark-1);
}
.repo-buttons .ui.labeled.button.disabled {
pointer-events: inherit !important;
}
.repo-buttons .ui.labeled.button.disabled > .label {
color: var(--color-text-dark);
background: var(--color-light-mimic-enabled) !important;
}
.repo-buttons .ui.labeled.button.disabled > .label:hover {
color: var(--color-primary-dark-1);
}
.repo-buttons .ui.labeled.button.disabled > .button {
pointer-events: none !important;
}
.repository .header-wrapper {
padding-top: 12px;
background-color: var(--color-header-wrapper);
}