From c2e05d9f9ab5aa15961a1fb37c4cf23367b6c4d5 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 12 Nov 2020 16:59:33 +0100
Subject: [PATCH] Form styling adjustments (#13501)

* Form styling adjustments

- Move all form-related styling to _forms.less
- Defined new form-related variables
- Fix spinner on frontpage repo search
- Add new rounded-* helpers and fix repo search radius

* misc arc green tweaks

Co-authored-by: zeripath <art27@cantab.net>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
Co-authored-by: Lauris BH <lauris@nix.lv>
---
 templates/user/dashboard/repolist.tmpl   |   4 +-
 web_src/less/_base.less                  |  29 ++--
 web_src/less/_dashboard.less             |  16 +-
 web_src/less/_form.less                  | 126 ++++++++++++++++
 web_src/less/helpers.less                |   7 +-
 web_src/less/themes/theme-arc-green.less | 182 ++---------------------
 6 files changed, 157 insertions(+), 207 deletions(-)

diff --git a/templates/user/dashboard/repolist.tmpl b/templates/user/dashboard/repolist.tmpl
index e1b97c8b9c..319bb3c6ee 100644
--- a/templates/user/dashboard/repolist.tmpl
+++ b/templates/user/dashboard/repolist.tmpl
@@ -91,7 +91,7 @@
 					</a>
 				</div>
 			</div>
-			<div class="ui attached table segment">
+			<div v-if="repos.length" class="ui attached table segment rounded-bottom">
 				<ul class="repo-owner-name-list">
 					<li v-for="repo in repos" :class="{'private': repo.private || repo.internal}">
 						<a :href="suburl + '/' + repo.full_name">
@@ -139,7 +139,7 @@
 					</a>
 				</div>
 			</h4>
-			<div class="ui attached table segment">
+			<div v-if="organizations.length" class="ui attached table segment rounded-bottom">
 				<ul class="repo-owner-name-list">
 					<li v-for="org in organizations">
 						<a :href="suburl + '/' + org.name">
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 65d274b670..7f5623bdc9 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -62,6 +62,10 @@
   --color-box-header: #f7f7f7;
   --color-box-body: #ffffff;
   --color-timeline: #ececec;
+  --color-input-text: #212121;
+  --color-input-background: #ffffff;
+  --color-input-border: #dedede;
+  --color-input-border-hover: #cecece;
 }
 
 :root:lang(ja) {
@@ -186,23 +190,6 @@ a:hover,
   border-right-color: var(--color-primary);
 }
 
-.ui.form input:not([type]):focus,
-.ui.form textarea:focus,
-.ui.form input[type="date"]:focus,
-.ui.form input[type="datetime-local"]:focus,
-.ui.form input[type="email"]:focus,
-.ui.form input[type="file"]:focus,
-.ui.form input[type="number"]:focus,
-.ui.form input[type="password"]:focus,
-.ui.form input[type="search"]:focus,
-.ui.form input[type="tel"]:focus,
-.ui.form input[type="text"]:focus,
-.ui.form input[type="time"]:focus,
-.ui.form input[type="url"]:focus,
-.ui.selection.dropdown:focus {
-  border-color: var(--color-primary);
-}
-
 .ui.selection.active.dropdown,
 .ui.selection.active.dropdown:hover,
 .ui.selection.active.dropdown .menu,
@@ -214,6 +201,10 @@ a:hover,
   margin: 0 -1.25px;
 }
 
+.ui.attached.table {
+  border-color: var(--color-secondary);
+}
+
 .dont-break-out {
   overflow-wrap: break-word;
   word-wrap: break-word;
@@ -326,6 +317,10 @@ a:hover,
   height: auto;
 }
 
+.ui.loading.loading.input > i.icon svg {
+  visibility: hidden;
+}
+
 .ui {
   &.left:not(.action) {
     float: left;
diff --git a/web_src/less/_dashboard.less b/web_src/less/_dashboard.less
index 45440ee480..f2dd145f55 100644
--- a/web_src/less/_dashboard.less
+++ b/web_src/less/_dashboard.less
@@ -65,10 +65,8 @@
     }
   }
 
-  /* Accomodate for Semantic's 1px hacks on .attached elements */
-
   .dashboard-repos {
-    margin: 0 1px;
+    margin: 0 1px; /* Accomodate for Semantic's 1px hacks on .attached elements */
   }
 
   .dashboard-navbar {
@@ -144,18 +142,6 @@
   }
 
   .list {
-    .header {
-      .ui.label {
-        margin-top: -4px;
-        padding: 4px 5px;
-        font-weight: normal;
-      }
-
-      .plus.icon {
-        margin-top: 5px;
-      }
-    }
-
     ul {
       list-style: none;
       margin: 0;
diff --git a/web_src/less/_form.less b/web_src/less/_form.less
index 666e7fa99b..a7b65265f2 100644
--- a/web_src/less/_form.less
+++ b/web_src/less/_form.less
@@ -1,3 +1,129 @@
+input,
+textarea,
+.ui.input > input,
+.ui.form input:not([type]),
+.ui.form textarea,
+.ui.form input[type="date"],
+.ui.form input[type="datetime-local"],
+.ui.form input[type="email"],
+.ui.form input[type="file"],
+.ui.form input[type="number"],
+.ui.form input[type="password"],
+.ui.form input[type="search"],
+.ui.form input[type="tel"],
+.ui.form input[type="text"],
+.ui.form input[type="time"],
+.ui.form input[type="url"],
+.ui.selection.dropdown,
+.ui.checkbox label::before,
+.ui.checkbox input:checked ~ label::before,
+.ui.checkbox input:not([type=radio]):indeterminate ~ label::before {
+  background: var(--color-input-background);
+  border-color: var(--color-input-border);
+  color: var(--color-input-text);
+}
+
+input:hover,
+textarea:hover,
+.ui.input input:hover,
+.ui.form input:not([type]):hover,
+.ui.form textarea:hover,
+.ui.form input[type="date"]:hover,
+.ui.form input[type="datetime-local"]:hover,
+.ui.form input[type="email"]:hover,
+.ui.form input[type="file"]:hover,
+.ui.form input[type="number"]:hover,
+.ui.form input[type="password"]:hover,
+.ui.form input[type="search"]:hover,
+.ui.form input[type="tel"]:hover,
+.ui.form input[type="text"]:hover,
+.ui.form input[type="time"]:hover,
+.ui.form input[type="url"]:hover,
+.ui.selection.dropdown:hover,
+.ui.checkbox label:hover::before,
+.ui.checkbox label:active::before,
+.ui.radio.checkbox label::after,
+.ui.radio.checkbox input:focus ~ label::before,
+.ui.radio.checkbox input:checked ~ label::before {
+  background: var(--color-input-background);
+  border-color: var(--color-input-border-hover);
+  color: var(--color-input-text);
+}
+
+input:focus,
+textarea:focus,
+.ui.input input:focus,
+.ui.form input:not([type]):focus,
+.ui.form textarea:focus,
+.ui.form input[type="date"]:focus,
+.ui.form input[type="datetime-local"]:focus,
+.ui.form input[type="email"]:focus,
+.ui.form input[type="file"]:focus,
+.ui.form input[type="number"]:focus,
+.ui.form input[type="password"]:focus,
+.ui.form input[type="search"]:focus,
+.ui.form input[type="tel"]:focus,
+.ui.form input[type="text"]:focus,
+.ui.form input[type="time"]:focus,
+.ui.form input[type="url"]:focus,
+.ui.selection.dropdown:focus,
+.ui.checkbox input:focus ~ label::before,
+.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::before,
+.ui.checkbox input:checked:focus ~ label::before,
+.ui.radio.checkbox input:focus:checked ~ label::before {
+  background: var(--color-input-background);
+  border-color: var(--color-primary);
+  color: var(--color-input-text);
+}
+
+.ui.form .field > label,
+.ui.form .inline.fields > label,
+.ui.form .inline.fields .field > label,
+.ui.form .inline.fields .field > p,
+.ui.form .inline.field > label,
+.ui.form .inline.field > p,
+.ui.checkbox label,
+.ui.checkbox + label,
+.ui.checkbox label:hover,
+.ui.checkbox + label:hover,
+.ui.checkbox input:focus ~ label,
+.ui.checkbox input:active ~ label {
+  color: var(--color-text);
+}
+
+.ui.input,
+.ui.checkbox input:focus ~ label::after,
+.ui.checkbox input:checked ~ label::after,
+.ui.checkbox label:active::after,
+.ui.checkbox input:not([type=radio]):indeterminate ~ label::after,
+.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label::after,
+.ui.checkbox input:checked:focus ~ label::after,
+.ui.disabled.checkbox label,
+.ui.checkbox input[disabled] ~ label {
+  color: var(--color-input-text);
+}
+
+.ui.radio.checkbox input:focus ~ label::after,
+.ui.radio.checkbox input:checked ~ label::after,
+.ui.radio.checkbox input:focus:checked ~ label::after {
+  background: var(--color-input-text);
+}
+
+.ui.toggle.checkbox label::before {
+  background: var(--color-input-background);
+}
+
+.ui.toggle.checkbox label,
+.ui.toggle.checkbox input:checked ~ label,
+.ui.toggle.checkbox input:focus:checked ~ label {
+  color: var(--color-text) !important;
+}
+
+.ui.toggle.checkbox input:checked ~ label::before,
+.ui.toggle.checkbox input:focus:checked ~ label::before {
+  background: var(--color-primary) !important;
+}
+
 .form {
   .help {
     color: #999999;
diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less
index 1322ba4169..7721e97d7d 100644
--- a/web_src/less/helpers.less
+++ b/web_src/less/helpers.less
@@ -6,7 +6,6 @@
 .sb { justify-content: space-between !important; }
 .fc { flex-direction: column !important; }
 .f1 { flex: 1 !important; }
-.rounded { border-radius: var(--border-radius) !important; }
 
 .mono {
   font-family: var(--fonts-monospace) !important;
@@ -18,6 +17,12 @@
   word-break: break-all !important;
 }
 
+.rounded { border-radius: var(--border-radius) !important; }
+.rounded-top { border-radius: var(--border-radius) var(--border-radius) 0 0 !important; }
+.rounded-bottom { border-radius: 0 0 var(--border-radius) var(--border-radius) !important; }
+.rounded-left { border-radius: var(--border-radius) 0 0 var(--border-radius) !important; }
+.rounded-right { border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; }
+
 .m-0 { margin: 0 !important; }
 .m-1 { margin: .125rem !important; }
 .m-2 { margin: .25rem !important; }
diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index e7933e0cc0..a3ad509f76 100644
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -53,8 +53,12 @@
   --color-body: #383c4a;
   --color-box-header: #454a57;
   --color-box-body: #353945;
-  --color-text: #9aa0af;
+  --color-text: #b6bac5;
   --color-timeline: #454a57;
+  --color-input-text: #dcdcdc;
+  --color-input-background: #2e323e;
+  --color-input-border: #454a57;
+  --color-input-border-hover: #505667;
 }
 
 /* Background */
@@ -565,10 +569,6 @@ body {
   color: #fff;
 }
 
-.ui.attached.table {
-  border: 1px solid #304251;
-}
-
 .feeds .list ul li.private {
   background: #353945;
 }
@@ -647,19 +647,6 @@ footer {
   background: #4b5162;
 }
 
-.ui.input input {
-  background: var(--color-secondary);
-  border: 1px solid var(--color-secondary);
-  color: #dbdbdb;
-}
-
-.ui.input input:focus,
-.ui.input.focus input {
-  background: var(--color-secondary);
-  border: 1px solid #6a737d;
-  color: #dbdbdb;
-}
-
 .ui.accordion .title:not(.ui) {
   color: #dbdbdb;
 }
@@ -722,11 +709,6 @@ a.ui.basic.green.label:hover {
   opacity: 1;
 }
 
-.ui.disabled.checkbox label,
-.ui.checkbox input[disabled] ~ label {
-  color: var(--color-secondary-dark-6);
-}
-
 .ui.pagination.menu .active.item {
   color: #dbdbdb;
   background-color: #87ab63;
@@ -750,59 +732,12 @@ a.ui.basic.green.label:hover {
   background: #505667;
 }
 
-.ui.form input:not([type]),
-.ui.form textarea,
-.ui.form input[type="date"],
-.ui.form input[type="datetime-local"],
-.ui.form input[type="email"],
-.ui.form input[type="file"],
-.ui.form input[type="number"],
-.ui.form input[type="password"],
-.ui.form input[type="search"],
-.ui.form input[type="tel"],
-.ui.form input[type="text"],
-.ui.form input[type="time"],
-.ui.form input[type="url"],
-.ui.selection.dropdown {
-  color: var(--color-secondary-dark-6);
-  background: #2e323e;
+.form .help {
+  color: #7f8699;
 }
 
-.ui.form input:not([type]):hover,
-.ui.form textarea:hover,
-.ui.form input[type="date"]:hover,
-.ui.form input[type="datetime-local"]:hover,
-.ui.form input[type="email"]:hover,
-.ui.form input[type="file"]:hover,
-.ui.form input[type="number"]:hover,
-.ui.form input[type="password"]:hover,
-.ui.form input[type="search"]:hover,
-.ui.form input[type="tel"]:hover,
-.ui.form input[type="text"]:hover,
-.ui.form input[type="time"]:hover,
-.ui.form input[type="url"]:hover,
-.ui.selection.dropdown:hover {
-  background: #2e323e;
-  border: 1px solid #505667;
-  color: #dbdbdb;
-}
-
-.ui.form input:not([type]):focus,
-.ui.form textarea:focus,
-.ui.form input[type="date"]:focus,
-.ui.form input[type="datetime-local"]:focus,
-.ui.form input[type="email"]:focus,
-.ui.form input[type="file"]:focus,
-.ui.form input[type="number"]:focus,
-.ui.form input[type="password"]:focus,
-.ui.form input[type="search"]:focus,
-.ui.form input[type="tel"]:focus,
-.ui.form input[type="text"]:focus,
-.ui.form input[type="time"]:focus,
-.ui.form input[type="url"]:focus,
-.ui.selection.dropdown:focus {
-  background: #2e323e;
-  color: #dbdbdb;
+.ui .text.light.grey {
+  color: #7f8699 !important;
 }
 
 .ui.form .fields.error .field textarea,
@@ -856,10 +791,6 @@ a.ui.basic.green.label:hover {
   color: #f9cbcb;
 }
 
-.ui.action.input:not([class*="left action"]) input:focus {
-  border-right-color: #6a737d !important;
-}
-
 .ui.green.button,
 .ui.green.buttons .button {
   background-color: #87ab63;
@@ -879,7 +810,7 @@ a.ui.basic.green.label:hover {
 .ui.basic.button,
 .ui.basic.buttons .button {
   color: var(--color-secondary-dark-6);
-  background: rgba(0, 0, 0, .06);
+  background: rgba(0, 0, 0, .1);
   box-shadow: none;
 }
 
@@ -1035,10 +966,6 @@ a.ui.basic.green.label:hover {
   color: #636363;
 }
 
-.ui.input {
-  color: #dbdbdb;
-}
-
 .overflow.menu .items .item {
   color: #9d9d9d;
 }
@@ -1327,20 +1254,6 @@ td.blob-hunk {
   background: #2c303a;
 }
 
-.ui.checkbox label,
-.ui.checkbox + label,
-.ui.form .field > label {
-  color: var(--color-secondary-dark-6);
-}
-
-.ui.form .inline.field > label,
-.ui.form .inline.field > p,
-.ui.form .inline.fields .field > label,
-.ui.form .inline.fields .field > p,
-.ui.form .inline.fields > label {
-  color: var(--color-secondary-dark-6);
-}
-
 .user.settings .email.list .item:not(:first-child) {
   border-top: 1px solid #3f4451;
 }
@@ -1425,81 +1338,6 @@ td.blob-hunk {
   background-color: #984646;
 }
 
-.ui.checkbox label:hover,
-.ui.checkbox + label:hover {
-  color: #dbdbdb !important;
-}
-
-.ui.checkbox .box::before,
-.ui.checkbox label::before {
-  background: #2e323e;
-  border: 1px solid var(--color-secondary);
-}
-
-.ui.checkbox .box:hover::before,
-.ui.checkbox label:hover::before,
-.ui.checkbox .box:active::before,
-.ui.checkbox label:active::before {
-  background: #2e323e;
-  border-color: #6a737d;
-}
-
-.ui.checkbox input:focus ~ .box::before,
-.ui.checkbox input:focus ~ label::before,
-.ui.checkbox input:checked:focus ~ .box::before,
-.ui.checkbox input:checked:focus ~ label::before {
-  background: #2e323e;
-  border-color: #6a737d;
-}
-
-.ui.checkbox input:checked ~ .box::after,
-.ui.checkbox input:checked ~ label::after {
-  color: #dbdbdb;
-}
-
-.ui.checkbox input:checked ~ .box::before,
-.ui.checkbox input:checked ~ label::before {
-  background: #2e323e;
-  opacity: 1;
-  color: #dbdbdb;
-  border-color: #505667;
-}
-
-.ui.checkbox input:checked:focus ~ .box::before,
-.ui.checkbox input:checked:focus ~ label::before,
-.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ .box::before,
-.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::before {
-  background: #2e323e;
-  border-color: #6a737d;
-}
-
-.ui.checkbox input:checked:focus ~ .box::after,
-.ui.checkbox input:checked:focus ~ label::after,
-.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ .box::after,
-.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::after {
-  background: #2e323e;
-  color: #dbdbdb;
-}
-
-.ui.checkbox input:focus ~ .box::after,
-.ui.checkbox input:focus ~ label,
-.ui.checkbox input:focus ~ label::after {
-  color: #9a9a9a;
-}
-
-.ui.radio.checkbox label::after,
-.ui.radio.checkbox input:checked ~ label::after,
-.ui.radio.checkbox input:focus ~ label::after,
-.ui.radio.checkbox input:focus:checked ~ label::after {
-  background: #dbdbdb;
-}
-
-.ui.radio.checkbox input:checked ~ label::before,
-.ui.radio.checkbox input:focus ~ label::before,
-.ui.radio.checkbox input:focus:checked ~ label::before {
-  background: none;
-}
-
 .ui.selection.dropdown .menu > .item {
   border-top: 1px solid #313c47;
 }