mirror of
https://github.com/lutinglt/gitea-github-theme.git
synced 2025-10-26 13:00:31 +00:00
全局圆角样式同步
This commit is contained in:
lutinglt
1
.github/release.md
vendored
1
.github/release.md
vendored
@@ -17,6 +17,7 @@
|
||||
- 主色调按钮边框色同步
|
||||
- 设置界面右上角小按钮样式同步
|
||||
- 弹窗背景色和叠加背景色同步
|
||||
- 全局圆角样式同步
|
||||
|
||||
## 🎈 Perf
|
||||
|
||||
|
||||
@@ -2,4 +2,5 @@ import "./button"; // 按钮
|
||||
import "./chroma"; // 代码高亮
|
||||
import "./input"; // 输入框
|
||||
import "./modal"; // 弹窗
|
||||
import "./radius"; // 圆角
|
||||
import "./svg"; // svg 图标
|
||||
|
||||
@@ -1,98 +0,0 @@
|
||||
.ui {
|
||||
&.button,
|
||||
&.basic.buttons .button,
|
||||
&.basic.button,
|
||||
&.dropdown .menu,
|
||||
&.form input:not([type]),
|
||||
&.form input[type="date"],
|
||||
&.form input[type="datetime-local"],
|
||||
&.form input[type="email"],
|
||||
&.form input[type="number"],
|
||||
&.form input[type="password"],
|
||||
&.form input[type="search"],
|
||||
&.form input[type="tel"],
|
||||
&.form input[type="time"],
|
||||
&.form input[type="text"],
|
||||
&.form input[type="file"],
|
||||
&.form input[type="url"],
|
||||
&.form textarea,
|
||||
&.input textarea,
|
||||
&.ui.input > input,
|
||||
&.label,
|
||||
&.menu,
|
||||
&.segment,
|
||||
&.segments,
|
||||
&.segments:not(.horizontal) > .segment:only-child,
|
||||
&.secondary.menu .dropdown.item > .menu,
|
||||
&.selection.dropdown,
|
||||
&.selection.dropdown .menu,
|
||||
&.table,
|
||||
&.text.menu .dropdown.item > .menu {
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.floating.dropdown > .menu {
|
||||
border-radius: var(--border-radius) !important;
|
||||
}
|
||||
|
||||
.repository.view.issue .comment-list .comment > .content > div:last-child {
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
/* 左边框圆角 */
|
||||
.ui {
|
||||
&.action.input > .dropdown:first-child,
|
||||
&.action.input > .button:first-child,
|
||||
&.action.input > .buttons:first-child > .button,
|
||||
&.compact.menu:not(.secondary) .item:first-child,
|
||||
&.horizontal.segments > .segment:first-child {
|
||||
border-radius: var(--border-radius) 0 0 var(--border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
/* 右边框圆角 */
|
||||
.ui {
|
||||
&.action.input > .dropdown:last-child,
|
||||
&.action.input > .button:last-child,
|
||||
&.action.input > .buttons:last-child > .button,
|
||||
&.compact.menu:not(.secondary) .item:last-child,
|
||||
&.horizontal.segments > .segment:last-child {
|
||||
border-radius: 0 var(--border-radius) var(--border-radius) 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 上边框圆角 */
|
||||
.ui.secondary.pointing.menu {
|
||||
.active.item,
|
||||
.item:hover {
|
||||
border-radius: var(--border-radius) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.tabular.menu .active.item,
|
||||
.repository.view.issue .comment-list .comment > .content > div:first-child {
|
||||
border-top-left-radius: var(--border-radius) !important;
|
||||
border-top-right-radius: var(--border-radius) !important;
|
||||
}
|
||||
|
||||
/* 按钮边框圆角 */
|
||||
.ui.active.selection.dropdown {
|
||||
border-bottom-left-radius: var(--border-radius) !important;
|
||||
border-bottom-right-radius: var(--border-radius) !important;
|
||||
}
|
||||
|
||||
.ui.segment[class*="bottom attached"] {
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
}
|
||||
|
||||
.ui.table > thead > tr:first-child > th {
|
||||
&:first-child {
|
||||
border-radius: var(--border-radius) 0 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 var(--border-radius) 0 0;
|
||||
}
|
||||
}
|
||||
261
styles/public/radius.tsx
Normal file
261
styles/public/radius.tsx
Normal file
@@ -0,0 +1,261 @@
|
||||
import { css, otherThemeVars } from "src/types/vars";
|
||||
|
||||
// 全部圆角替换
|
||||
export const radius = css`
|
||||
.ui.form textarea,
|
||||
.ui.form input:not([type]),
|
||||
.ui.form input[type="date"],
|
||||
.ui.form input[type="datetime-local"],
|
||||
.ui.form input[type="email"],
|
||||
.ui.form input[type="number"],
|
||||
.ui.form input[type="password"],
|
||||
.ui.form input[type="search"],
|
||||
.ui.form input[type="tel"],
|
||||
.ui.form input[type="time"],
|
||||
.ui.form input[type="text"],
|
||||
.ui.form input[type="file"],
|
||||
.ui.form input[type="url"] {
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
&:focus {
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
}
|
||||
}
|
||||
.ui.form select {
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
}
|
||||
|
||||
.ui.input {
|
||||
textarea,
|
||||
input {
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
}
|
||||
}
|
||||
|
||||
.ui {
|
||||
&.menu,
|
||||
&.modal,
|
||||
&.label,
|
||||
&.table,
|
||||
&.segment,
|
||||
&.segments,
|
||||
&.grid.segment &.selection.dropdown,
|
||||
&.horizontal.segments,
|
||||
&.active.empty.selection.dropdown {
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
}
|
||||
}
|
||||
|
||||
.ui.dropdown,
|
||||
.ui.inline.dropdown,
|
||||
.ui.pointing.upward.dropdown,
|
||||
.ui.top.pointing.upward.dropdown {
|
||||
.menu {
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
}
|
||||
}
|
||||
|
||||
.ui.search > .results,
|
||||
.ui.search.selection .prompt,
|
||||
.ui.pointing.dropdown > .menu,
|
||||
.ui.loading.form.segments:before,
|
||||
.ui.secondary.menu .item,
|
||||
.ui.secondary.menu .active.item,
|
||||
.ui.secondary.menu .dropdown.item > .menu,
|
||||
.ui.vertical.menu > .active.item:only-child,
|
||||
.ui.segments:not(.horizontal) > .segment:only-child,
|
||||
.ui.segments:not(.horizontal) > .segment:has(~ .tw-hidden) {
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
}
|
||||
`;
|
||||
|
||||
// 全部圆角替换(原CSS带!important)
|
||||
export const radiusImportant = css`
|
||||
.ui.dropdown .menu .menu,
|
||||
.ui.dropdown .menu .left.menu,
|
||||
.ui.dropdown .menu .right.menu,
|
||||
.ui.dropdown > .left.menu .menu,
|
||||
.ui.floating.dropdown .menu,
|
||||
.ui.floating.dropdown > .menu,
|
||||
.ui.dropdown .right.menu > .menu,
|
||||
.ui.secondary.vertical.menu > .item {
|
||||
border-radius: ${otherThemeVars.border.radius} !important;
|
||||
}
|
||||
`;
|
||||
|
||||
// 上半部分圆角替换
|
||||
export const radiusTop = css`
|
||||
.ui.vertical.menu > .item,
|
||||
.ui.vertical.menu > .active.item,
|
||||
.ui.segments:not(.horizontal) > .segment {
|
||||
&:first-child {
|
||||
border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.top.attached.header,
|
||||
.ui.upward.dropdown > .menu,
|
||||
.ui.upward.dropdown.button:not(.pointing):not(.floating).active,
|
||||
.ui[class*="top attached"].menu,
|
||||
.ui[class*="top attached"].segment,
|
||||
.ui[class*="top attached"].segment:last-child,
|
||||
.ui.search > .results > :first-child,
|
||||
.ui.modal > i.icon:first-child + *,
|
||||
.ui.modal > .dimmer:first-child + i.icon + *,
|
||||
.ui.modal > .dimmer:first-child + *:not(.icon),
|
||||
.ui.modal > :first-child:not(.icon):not(.dimmer),
|
||||
.ui.table > thead > tr:first-child > th:only-child {
|
||||
border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0;
|
||||
}
|
||||
`;
|
||||
|
||||
// 上半部分圆角替换(原CSS带!important)
|
||||
export const radiusTopImportant = css`
|
||||
.ui.tabular.menu .active.item {
|
||||
border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0 !important;
|
||||
&:hover {
|
||||
border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0 !important;
|
||||
}
|
||||
}
|
||||
.ui.simple.upward.dropdown {
|
||||
&.active {
|
||||
border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0 !important;
|
||||
}
|
||||
&:hover {
|
||||
border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0 !important;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 下半部分圆角替换
|
||||
export const radiusBottom = css`
|
||||
.ui.attached.segment,
|
||||
.ui.vertical.menu > .item,
|
||||
.ui.vertical.menu > .active.item,
|
||||
.ui.segments:not(.horizontal) > .segment {
|
||||
&:last-child {
|
||||
border-radius: 0 0 ${otherThemeVars.border.radius} ${otherThemeVars.border.radius};
|
||||
}
|
||||
}
|
||||
|
||||
.ui.modal,
|
||||
.ui.search > .results {
|
||||
> :last-child {
|
||||
border-radius: 0 0 ${otherThemeVars.border.radius} ${otherThemeVars.border.radius};
|
||||
}
|
||||
}
|
||||
|
||||
.ui.selection.dropdown,
|
||||
.ui.menu .dropdown.item {
|
||||
.menu {
|
||||
border-radius: 0 0 ${otherThemeVars.border.radius} ${otherThemeVars.border.radius};
|
||||
}
|
||||
}
|
||||
|
||||
.ui.table > tfoot > tr:first-child {
|
||||
> th,
|
||||
> td {
|
||||
&:only-child {
|
||||
border-radius: 0 0 ${otherThemeVars.border.radius} ${otherThemeVars.border.radius};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ui.bottom.attached.header,
|
||||
.ui[class*="bottom attached"].table,
|
||||
.ui.segment[class*="bottom attached"],
|
||||
.ui.attached.segment:has(+ .ui.modal),
|
||||
.ui.attached.segment:has(+ .page.buttons),
|
||||
.ui.attached.segment:has(+ .ui[class*="top attached"].header),
|
||||
.ui.segment:has(+ .ui.segment:not(.attached)) {
|
||||
border-radius: 0 0 ${otherThemeVars.border.radius} ${otherThemeVars.border.radius};
|
||||
}
|
||||
`;
|
||||
|
||||
// 下半部分圆角替换(原CSS带!important)
|
||||
export const radiusBottomImportant = css`
|
||||
.ui.upward.selection.dropdown.visible,
|
||||
.ui.active.upward.selection.dropdown {
|
||||
border-radius: 0 0 ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} !important;
|
||||
}
|
||||
`;
|
||||
|
||||
// 左半部分圆角替换
|
||||
export const radiusLeft = css`
|
||||
.ui.menu > .item,
|
||||
.ui.action.input > .button,
|
||||
.ui.action.input > .dropdown,
|
||||
.ui.horizontal.segments > .segment {
|
||||
&:first-child {
|
||||
border-radius: ${otherThemeVars.border.radius} 0 0 ${otherThemeVars.border.radius};
|
||||
}
|
||||
}
|
||||
|
||||
.ui[class*="left icon"].input > i.icon,
|
||||
.ui.action.input > .buttons:first-child > .button {
|
||||
border-radius: ${otherThemeVars.border.radius} 0 0 ${otherThemeVars.border.radius};
|
||||
}
|
||||
`;
|
||||
|
||||
// 右半部分圆角替换
|
||||
export const radiusRight = css`
|
||||
.ui.compact.menu .item,
|
||||
.ui.compact.menu:not(.secondary) .item,
|
||||
.ui.pagination.menu .item,
|
||||
.ui.action.input > .button,
|
||||
.ui.action.input > .dropdown,
|
||||
.ui.horizontal.segments > .segment {
|
||||
&:last-child {
|
||||
border-radius: 0 ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.icon.input > i.icon,
|
||||
.ui.buttons .unescape-button,
|
||||
.ui.action.input > .buttons:last-child > .button {
|
||||
border-radius: 0 ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0;
|
||||
}
|
||||
`;
|
||||
|
||||
// 左上圆角替换
|
||||
export const radiusTopLeft = css`
|
||||
.ui.top.attached.menu > .item:first-child,
|
||||
.ui.table > thead > tr:first-child > th:first-child {
|
||||
border-top-left-radius: ${otherThemeVars.border.radius};
|
||||
}
|
||||
`;
|
||||
|
||||
// 右上圆角替换
|
||||
export const radiusTopRight = css`
|
||||
.ui.table > thead > tr:first-child > th:last-child,
|
||||
.ui.category.search > .results .category:first-child .name + .result {
|
||||
border-top-right-radius: ${otherThemeVars.border.radius};
|
||||
}
|
||||
`;
|
||||
|
||||
// 左下圆角替换
|
||||
export const radiusBottomLeft = css`
|
||||
.ui.table > tfoot > tr:first-child {
|
||||
> th,
|
||||
> td {
|
||||
&:first-child {
|
||||
border-bottom-left-radius: ${otherThemeVars.border.radius};
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 右下圆角替换
|
||||
export const radiusBottomRight = css`
|
||||
.ui.table > tfoot > tr:first-child {
|
||||
> th,
|
||||
> td {
|
||||
&:last-child {
|
||||
border-bottom-right-radius: ${otherThemeVars.border.radius};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ui.category.search > .results .category:last-child .result:last-child {
|
||||
border-bottom-right-radius: ${otherThemeVars.border.radius};
|
||||
}
|
||||
`;
|
||||
Reference in New Issue
Block a user