动画迁移 & 部分 PR 样式 (#7)

* 弹窗动画

* 优化 PR 中的合并提交按钮颜色

* 优化按钮样式

* 同步 PR 的合并提交头像样式

* 同步 Issue/PR 的时间线样式

* Issue/PR 的时间线样式间隔和大小

* 同步 PR 的合并提交操作面板样式

* PR 操作间隔

* green

* PR 操作边框色

* 已合并颜色

* 仓库同步派生栏样式同步

* 动画迁移 & 一些圆角修复

* 修复工单下依赖工单选择框

* 评论标题颜色&分支字体&提交栏样式

---------

Co-authored-by: lutinglt <lutinglt@users.noreply.github.com>

styles/public/button.tsx

@@ -18,14 +18,25 @@ export const baseButton = css`
     min-height: 30px;
     font-weight: 500;
     padding: 9px 16px;
+    &.ui {
+      gap: 8px;
+    }
   }
   .ui.button:not(.primary):not(.red) svg {
     color: ${themeVars.color.text.light.num1};
   }
-  .ui.primary.button {
-    ${primaryStyle}
-    &:hover {
-      ${primaryHoverStyle}
+  // 主色调按钮保持白色
+  .ui.primary.buttons .button svg {
+    color: ${themeVars.color.text.self};
+  }
+  .ui.primary {
+    &.button,
+    // 按钮组, PR 里的压缩合并按钮
+    &.buttons .button {
+      ${primaryStyle}
+      &:hover {
+        ${primaryHoverStyle}
+      }
     }
   }
   // 主色调基本按钮和普通按钮一样

styles/public/dropdown.tsx

@@ -14,6 +14,7 @@ export const dropdown = css`
       box-shadow: ${themeVars.github.shadow.floating.small} !important;
       // 忽略隐藏
       > .item:not(.tw-hidden) {
+        animation: ${animationDown};
         display: flex !important;
         align-items: center;
         gap: 0.5rem;
@@ -37,9 +38,6 @@ export const dropdown = css`
             background-color: ${themeVars.github.control.transparent.bgColor.hover} !important;
           }
         }
-        svg {
-          margin-right: 0.5rem;
-        }
         &.active,
         &.selected {
           &:after {
@@ -154,6 +152,13 @@ export const selectionDropdown = css`
     border-bottom-left-radius: ${otherThemeVars.border.radius} !important;
     border-bottom-right-radius: ${otherThemeVars.border.radius} !important;
   }
+  // 修复因为上面的排除导致的圆角问题
+  // 具体工单页面下依赖菜单选择框
+  #new-dependency-drop-list.ui.selection.dropdown.active,
+  // 提交图分支选择框
+  #git-graph-container #flow-select-refs-dropdown {
+    border-bottom-right-radius: 0 !important;
+  }
   // 修复选择框的下拉菜单向上显示时的样式问题
   .ui.upward.selection.dropdown.visible:not(.small),
   .ui.active.upward.selection.dropdown:not(.small) {
@@ -161,3 +166,11 @@ export const selectionDropdown = css`
     border-top-right-radius: ${otherThemeVars.border.radius}!important;
   }
 `;
+
+export const fixSelectionDropdown = css`
+  // 具体工单页面下依赖菜单选择框
+  #new-dependency-drop-list.ui.selection.dropdown {
+    // 高度对齐问题, 应该与 input 框高度一致
+    min-height: 32px;
+  }
+`;

styles/public/index.tsx

@@ -2,6 +2,7 @@
 // tslint:disable:ordered-imports
 // 组件导入有顺序, 禁止插件优化
 import "./radius"; // 圆角, 此样式为基础样式, 确保在其他样式之前导入
+import "./transition"; // 过渡效果
 import "./text"; // 文本或 SVG 的基本颜色
 import "./button"; // 按钮
 import "./chroma"; // 代码高亮

styles/public/modal.tsx

@@ -1,7 +1,9 @@
+import { animationDown } from "src/core/theme";
 import { css, themeVars } from "src/types/vars";
 
 export const modal = css`
   .ui.modal {
+    animation: ${animationDown};
     border: 1.5px solid ${themeVars.color.light.border};
 
     > .header {

styles/public/navbar.tsx

@@ -1,4 +1,4 @@
-import { css, themeVars } from "src/types/vars";
+import { css, otherThemeVars, themeVars } from "src/types/vars";
 
 export const navbarRight = css`
   #navbar {
@@ -13,6 +13,7 @@ export const navbarRight = css`
         align-content: center;
         justify-content: center;
         border: 1px solid ${themeVars.color.light.border};
+        border-radius: ${otherThemeVars.border.radius};
         padding: unset;
         height: 32px;
         min-width: 32px;

styles/public/radius.tsx

@@ -78,8 +78,10 @@ export const radiusImportant = css`
     border-radius: ${otherThemeVars.border.radius} !important;
   }
   // 目前为仓库列表/探索的二级菜单, 改版需要替换为全圆角
-  .ui.tabular.menu .active.item {
+  .ui.secondary.tabular.menu .item {
     border-radius: ${otherThemeVars.border.radius} !important;
+    &.active,
+    &.active:hover,
     &:hover {
       border-radius: ${otherThemeVars.border.radius} !important;
     }
@@ -113,10 +115,10 @@ export const radiusTop = css`
 
 // 上半部分圆角替换(原CSS带!important)
 export const radiusTopImportant = css`
+  .ui.tabular.menu .item,
   .ui.simple.upward.dropdown {
-    &.active {
-      border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0 !important;
-    }
+    &.active,
+    &.active:hover,
     &:hover {
       border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0 !important;
     }

styles/public/transition.scss

@@ -1,45 +0,0 @@
-// Made by Luting ^-^
-@keyframes overlay-appear {
-  0% {
-    opacity: 0;
-    transform: translateY(-12px);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-#navbar .item,
-.header-wrapper .ui.tabular.menu .item,
-.job-step-summary,
-.job-step-logs,
-.job-brief-item,
-.tippy-box .flex-items-block .item,
-.clone-panel-tab .item,
-.ui.form select,
-.ui.label,
-.ui.modal,
-.ui.selection.dropdown,
-.ui.checkbox label:before,
-.ui.checkbox input:checked ~ label:before,
-.ui.checkbox input:not([type="radio"]):indeterminate ~ label:before,
-.ui.selection.active.dropdown,
-.ui.selection.active.dropdown:hover,
-.ui.selection.active.dropdown .menu,
-.ui.selection.active.dropdown:hover .menu,
-.ui.vertical.menu .header.item,
-.ui.secondary.menu .item {
-  transition: 0.12s ease-out;
-}
-
-textarea,
-.ui.form input,
-.menu .item,
-.ui.modal,
-.job-step-summary,
-.job-step-logs,
-.job-brief-item {
-  animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running overlay-appear;
-}

styles/public/transition.tsx

@@ -0,0 +1,49 @@
+import { css } from "src/types/vars";
+
+// 简单的渐变过渡
+export const transition = css`
+  // 迁移的元素
+  #navbar .item,
+  .header-wrapper .ui.tabular.menu .item,
+  .job-step-summary,
+  .job-step-logs,
+  .job-brief-item,
+  .repo-file-cell,
+  .tippy-box .flex-items-block .item,
+  .clone-panel-tab .item,
+  .ui.form select,
+  .ui.label,
+  .ui.modal,
+  .ui.checkbox label:before,
+  .ui.checkbox input:checked ~ label:before,
+  .ui.checkbox input:not([type="radio"]):indeterminate ~ label:before,
+  .ui.selection.dropdown,
+  .ui.selection.active.dropdown,
+  .ui.selection.active.dropdown:hover,
+  .ui.selection.active.dropdown .menu,
+  .ui.selection.active.dropdown:hover .menu,
+  .ui.vertical.menu .header.item,
+  .ui.secondary.menu .item {
+    transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+  }
+  // Gitea 表单元素原始过渡覆盖
+  input,
+  textarea,
+  tr,
+  .ui.input textarea,
+  .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"] {
+    transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+  }
+`;