mirror of
https://github.com/lutinglt/gitea-github-theme.git
synced 2025-10-26 21:20:31 +00:00
重构基本框架
This commit is contained in:
lutinglt
393
styles/components/repo.scss
Normal file
393
styles/components/repo.scss
Normal file
@@ -0,0 +1,393 @@
|
||||
// Made by Luting ^-^
|
||||
#navbar {
|
||||
border-bottom-width: 1.5px;
|
||||
}
|
||||
|
||||
.page-content > :first-child.secondary-nav {
|
||||
border-top: 0;
|
||||
background-color: var(--color-nav-bg) !important;
|
||||
}
|
||||
|
||||
// 修复关注&派生 hover 意外点亮右侧 label 左边框
|
||||
.ui.ui.ui.ui.small.button {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.secondary-nav > .divider {
|
||||
border-top-width: 1.5px;
|
||||
}
|
||||
|
||||
// 仓库页面头部名称
|
||||
.page-content.repository .repo-header {
|
||||
.ui.compact.button {
|
||||
padding: 3px 12px;
|
||||
|
||||
svg {
|
||||
color: #9198a1;
|
||||
}
|
||||
}
|
||||
|
||||
img.ui.avatar {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
margin-block-start: 0.5rem;
|
||||
margin-block-end: 0.5rem;
|
||||
}
|
||||
|
||||
.flex-item {
|
||||
.flex-item-title {
|
||||
color: #9198a1;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #f0f6fc;
|
||||
font-size: 16px;
|
||||
text-decoration: none !important;
|
||||
min-width: 3ch;
|
||||
padding: 6px 8px;
|
||||
padding-inline: 0.5rem;
|
||||
padding-block: 6px;
|
||||
border-radius: 0.375rem;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
&:hover {
|
||||
background: #15191f;
|
||||
}
|
||||
|
||||
&.muted:not(.tw-font-normal) {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a:not(.label, .button):hover {
|
||||
color: #f0f6fc !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 仓库导航栏
|
||||
.ui.secondary.pointing.menu {
|
||||
.overflow-menu-items {
|
||||
gap: 0.5rem;
|
||||
|
||||
.item {
|
||||
padding: 5px 8px !important;
|
||||
margin-block-start: 0.5rem;
|
||||
margin-block-end: 0.5rem;
|
||||
margin-bottom: 0.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.active.item,
|
||||
.dropdown.item,
|
||||
.link.item,
|
||||
a.item {
|
||||
color: #f0f6fc;
|
||||
|
||||
svg {
|
||||
color: #9198a1;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.active.item {
|
||||
border-color: #ffffff00;
|
||||
|
||||
span:after {
|
||||
background: #f78166;
|
||||
border-radius: 0.375rem;
|
||||
bottom: calc(50% - 1.8rem);
|
||||
content: "";
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
right: 50%;
|
||||
transform: translate(50%, -50%);
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-wrapper .ui.tabular.menu,
|
||||
.ui.secondary.pointing.menu {
|
||||
.item:hover {
|
||||
background: #15191f !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 仓库文件&提交列表
|
||||
.page-content.repository {
|
||||
// 顶部提交, 标签, 分支
|
||||
.repository-summary .segment.sub-menu {
|
||||
&.ui.segment {
|
||||
background-color: var(--color-box-header);
|
||||
}
|
||||
|
||||
.item {
|
||||
color: #9198a1;
|
||||
|
||||
b {
|
||||
color: #f0f6fc;
|
||||
margin: 0 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// clone 按钮调整
|
||||
.repo-button-row .repo-button-row-right .ui.primary.button span {
|
||||
margin: 0px 3px;
|
||||
}
|
||||
|
||||
// 提交的Action状态
|
||||
.commit-list,
|
||||
#repo-files-table {
|
||||
.flex-text-inline:not(img) {
|
||||
padding: 6px;
|
||||
border-radius: var(--border-radius);
|
||||
margin-right: 6px;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 仓库文件列表
|
||||
.repository.file.list {
|
||||
#repo-files-table {
|
||||
// 头部最后一次提交
|
||||
.repo-file-line {
|
||||
padding-right: 16px;
|
||||
|
||||
&.parent-link {
|
||||
gap: 0.5rem;
|
||||
padding-left: 16px;
|
||||
|
||||
svg {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-box-header);
|
||||
}
|
||||
}
|
||||
|
||||
&.repo-file-last-commit {
|
||||
height: 3.725rem;
|
||||
|
||||
.latest-commit {
|
||||
.commit-summary {
|
||||
color: #9198a1;
|
||||
}
|
||||
|
||||
img.tw-align-middle {
|
||||
margin-top: -1px;
|
||||
margin-left: 1px;
|
||||
margin-right: 8px !important;
|
||||
}
|
||||
|
||||
.author-wrapper {
|
||||
margin-right: 6px;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
}
|
||||
|
||||
.ui.label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 文件列表
|
||||
.repo-file-item {
|
||||
.repo-file-cell {
|
||||
&.name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
&.age {
|
||||
padding-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.svg.octicon-file-directory-fill,
|
||||
.svg.octicon-file-submodule {
|
||||
color: #7d8590;
|
||||
}
|
||||
|
||||
// 整行背景颜色效果
|
||||
&:hover .repo-file-cell {
|
||||
background-color: var(--color-box-header) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.repository #commits-table {
|
||||
.author {
|
||||
a {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
img {
|
||||
margin-right: 8px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.text.right.aligned {
|
||||
color: #919894;
|
||||
}
|
||||
}
|
||||
|
||||
// 手机下隐藏提交信息
|
||||
@media (max-width: 767.98px) {
|
||||
#repo-files-table {
|
||||
grid-template-columns: 1fr auto;
|
||||
|
||||
.repo-file-line {
|
||||
grid-column: 1 / span 2;
|
||||
}
|
||||
|
||||
.repo-file-cell {
|
||||
&.name {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
&.message {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 仓库代码布局调整, 侧边栏宽度调整
|
||||
.repo-grid-filelist-sidebar {
|
||||
grid-template-columns: auto 296px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.repo-grid-filelist-sidebar {
|
||||
grid-template-columns: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// 仓库代码页面侧边栏
|
||||
.page-content.repository {
|
||||
.repo-home-sidebar-top {
|
||||
a.muted:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.flex-item {
|
||||
padding: 10px 0 0 0;
|
||||
|
||||
.flex-item-title {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.flex-item-body {
|
||||
padding: 8px 0 0 0;
|
||||
|
||||
.repo-description {
|
||||
color: #f0f6fc;
|
||||
}
|
||||
|
||||
#repo-topics {
|
||||
margin: 10px 0px !important;
|
||||
|
||||
.repo-topic.ui.label {
|
||||
font-size: 12px;
|
||||
padding: 5px 10px;
|
||||
margin: 0px 1.5px 3.5px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-text-block {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin-top: 10px;
|
||||
|
||||
&.muted {
|
||||
margin-top: 2px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
svg.svg {
|
||||
margin-right: 4px;
|
||||
|
||||
&.octicon-database,
|
||||
&.octicon-law {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.repo-home-sidebar-bottom {
|
||||
a.muted:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.flex-item {
|
||||
padding: 16px 0;
|
||||
|
||||
.flex-item {
|
||||
padding: 16px 0 0 0;
|
||||
|
||||
.flex-item-icon {
|
||||
svg.svg.octicon-tag {
|
||||
color: #3fb950;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-item-header .flex-item-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-item-title .ui.small.label {
|
||||
background: var(--color-label-bg);
|
||||
color: var(--color-label-text);
|
||||
}
|
||||
|
||||
.flex-item-body {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// 编程语言
|
||||
.language-stats {
|
||||
height: 8px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.language-stats-details .item {
|
||||
font-size: 12px;
|
||||
margin-right: 16px;
|
||||
|
||||
.color-icon {
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.tw-font-semibold {
|
||||
color: #f0f6fc;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user