Rework notifications list (#24812)

- Replace `<table>` with flexbox
- Add issue modification time and issue number
- Remove big title
- Replace tabs with menu items
- Add clicked item deletion on back button cache restoration

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

web_src/css/base.css

@@ -8,6 +8,7 @@
   --font-weight-normal: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
+  --font-weight-bold: 700;
   /* backgrounds */
   --checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
   --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
@@ -373,6 +374,7 @@ a.muted:hover [class*="color-text"],
 
 a.silenced:hover {
   color: inherit;
+  text-decoration: none;
 }
 
 .delete-button,
@@ -1417,6 +1419,18 @@ img.ui.avatar,
   color: var(--color-text-light) !important;
 }
 
+.text.light {
+  color: var(--color-text-light) !important;
+}
+
+.text.light-2 {
+  color: var(--color-text-light-2) !important;
+}
+
+.text.light-3 {
+  color: var(--color-text-light-3) !important;
+}
+
 .text.light.grey {
   color: var(--color-grey-light) !important;
 }
@@ -2201,7 +2215,7 @@ a.ui.active.label:hover {
   border-left: none;
 }
 
-/* a ghost button can be used as inline text, it doesn't have obvious styles */
+/* a ghost button is a button without border */
 .button.button-ghost {
   background: transparent;
   border: none;
@@ -2211,7 +2225,11 @@ a.ui.active.label:hover {
 }
 
 .button.button-ghost:hover {
-  color: var(--color-primary);
+  background: var(--color-hover);
+}
+
+.button.button-ghost:active {
+  background: var(--color-active);
 }
 
 .two-toggle-buttons .button:not(.active):first-of-type {
@@ -2538,8 +2556,8 @@ a.ui.basic.label:hover {
   padding: 2.75px;
   border-radius: 1em;
   font-size: 11px;
-  font-weight: var(--font-weight-semibold);
-  line-height: .67em;
+  font-weight: var(--font-weight-bold);
+  line-height: .7;
 }
 
 .rss-icon {
@@ -2751,7 +2769,3 @@ table th[data-sortt-desc] .svg {
   width: 15px;
   height: 15px;
 }
-
-.color-text-light-2 {
-  color: var(--color-text-light-2);
-}

web_src/css/helpers.css

@@ -73,6 +73,8 @@ Gitea's private styles use `g-` prefix.
 .gt-whitespace-pre-wrap { white-space: pre-wrap !important; }
 .gt-object-contain { object-fit: contain !important; }
 .gt-self-center { align-self: center !important; }
+.gt-self-start { align-self: flex-start !important; }
+.gt-self-end { align-self: flex-end !important; }
 
 .gt-overflow-x-auto { overflow-x: auto !important; }
 .gt-overflow-x-scroll { overflow-x: scroll !important; }
@@ -88,6 +90,7 @@ Gitea's private styles use `g-` prefix.
 .gt-font-normal { font-weight: var(--font-weight-normal) !important };
 .gt-font-medium { font-weight: var(--font-weight-medium) !important };
 .gt-font-semibold { font-weight: var(--font-weight-semibold) !important };
+.gt-font-bold { font-weight: var(--font-weight-bold) !important };
 
 .gt-rounded { border-radius: var(--border-radius) !important; }
 .gt-rounded-top { border-radius: var(--border-radius) var(--border-radius) 0 0 !important; }
@@ -249,6 +252,13 @@ Gitea's private styles use `g-` prefix.
 
 .gt-shrink-0 { flex-shrink: 0 !important; }
 
+.gt-font-13 { font-size: 13px !important }
+.gt-font-14 { font-size: 14px !important }
+.gt-font-15 { font-size: 15px !important }
+.gt-font-16 { font-size: 16px !important }
+.gt-font-17 { font-size: 17px !important }
+.gt-font-18 { font-size: 18px !important }
+
 @media (max-width: 767px) {
   .gt-db-small { display: block !important; }
   .gt-w-100-small { width: 100% !important; }

web_src/css/user.css

@@ -121,18 +121,6 @@
   object-fit: contain;
 }
 
-#notification_div .tab.segment {
-  overflow-x: auto;
-}
-
-#notification_div .tabular.menu .active.item {
-  background: var(--color-box-body);
-}
-
-#notification_table {
-  border: none;
-}
-
 #readme_profile {
   padding: 10px;
   border-radius: 0.28571429rem;
@@ -140,11 +128,29 @@
   border: 1px solid var(--color-secondary);
 }
 
-#notification_table tr {
-  cursor: default;
+#notification_table {
+  background: var(--color-box-body);
+  border: 1px solid var(--color-secondary);
+  border-radius: var(--border-radius);
 }
 
-#notification_table td a {
-  width: 100%;
-  display: inline-block;
+.notifications-item:hover {
+  background: var(--color-hover);
+}
+
+.notifications-buttons {
+  display: none;
+  min-width: 74px;
+}
+
+.notifications-updated {
+  display: flex;
+}
+
+.notifications-item:hover .notifications-buttons {
+  display: flex;
+}
+
+.notifications-item:hover .notifications-updated {
+  display: none;
 }