Add button on diff header to copy file name, misc diff header tweaks (#24986)

1. Add this button:

<img width="232" alt="Screenshot 2023-05-29 at 15 21 47"
src="https://github.com/go-gitea/gitea/assets/115237/5eaf6bd1-83db-4ffc-9503-eda0c59807d2">
<img width="297" alt="Screenshot 2023-05-29 at 15 20 22"
src="https://github.com/go-gitea/gitea/assets/115237/708a344f-f6d7-4229-bfda-76e1571b42c8">

2. Correct `button-link` styles to not have a background hover effect.
3. Tweak `.ui.container` padding to be the same for fluid and non-fluid.

4. Misc enhancements to diff header:

Before:
<img width="984" alt="Screenshot 2023-05-29 at 15 38 53"
src="https://github.com/go-gitea/gitea/assets/115237/c7926f6a-bd0a-4b05-97ad-c91fc25c62d5">

After:
<img width="987" alt="Screenshot 2023-05-29 at 15 43 10"
src="https://github.com/go-gitea/gitea/assets/115237/0149f545-45f8-42cf-b443-e1c76bd5cdeb">

1 files changed, 20 insertions, 16 deletions

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 3c32eb6045..d143b20f81 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -893,19 +893,32 @@ img.ui.avatar,
 .page-content .ui.ui.ui.container:not(.fluid) {
   width: 1280px;
   max-width: calc(100vw - 64px);
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.ui.container.fluid.padded {
+  padding: 0 32px;
 }
 
 /* enable fluid page widths for medium size viewports */
 @media (min-width: 768px) and (max-width: 1200px) {
-  .ui.ui.ui.container:not(.fluid) {
-    width: calc(100vw - 64px);
+  .page-content .ui.ui.ui.container:not(.fluid) {
+    width: calc(100vw - 32px);
+    max-width: calc(100vw - 32px);
+  }
+  .ui.container.fluid.padded {
+    padding: 0 16px;
   }
 }
 
-@media only screen and (max-width: 767px) {
+@media (max-width: 767px) {
   .page-content .ui.ui.ui.container:not(.fluid) {
-    width: auto; /* copied from semantic css */
-    max-width: 100%;
+    width: calc(100vw - 16px);
+    max-width: calc(100vw - 16px);
+  }
+  .ui.container.fluid.padded {
+    padding: 0 8px;
   }
 }
 
@@ -1165,10 +1178,6 @@ img.ui.avatar,
   float: right;
 }
 
-.ui.container.fluid.padded {
-  padding: 0 32px;
-}
-
 .ui.form .ui.button {
   font-weight: var(--font-weight-normal);
 }
@@ -1525,7 +1534,8 @@ img.ui.avatar,
 }
 
 @media (max-width: 767px) {
-  .not-mobile {
+  /* double selector so it wins over .gt-df etc */
+  .not-mobile.not-mobile {
     display: none !important;
   }
 }
@@ -1552,12 +1562,6 @@ img.ui.avatar,
   clip: auto;
 }
 
-@media (min-width: 768px) and (max-width: 991px) {
-  .ui.container {
-    width: 95%;
-  }
-}
-
 .ui.menu.new-menu {
   margin-bottom: 15px;
   background: var(--color-navbar);