mirror of
				https://github.com/go-gitea/gitea
				synced 2025-11-04 05:18:25 +00:00 
			
		
		
		
	Various arc-green fixes (#13214)
- Style search dropdown - Fix radio buttons and tweak checkboxes - Add styling for error form elements - Make borders brighter and focus more apparent - Adjust comment box border color to match Fixes: https://github.com/go-gitea/gitea/pull/12491 Co-authored-by: zeripath <art27@cantab.net> Co-authored-by: techknowlogick <techknowlogick@gitea.io>
This commit is contained in:
		@@ -600,14 +600,14 @@ footer {
 | 
			
		||||
 | 
			
		||||
.ui.input input {
 | 
			
		||||
  background: #404552;
 | 
			
		||||
  border: 2px solid #353945;
 | 
			
		||||
  border: 1px solid #4b505f;
 | 
			
		||||
  color: #dbdbdb;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.input input:focus,
 | 
			
		||||
.ui.input.focus input {
 | 
			
		||||
  background: #404552;
 | 
			
		||||
  border: 2px solid #353945;
 | 
			
		||||
  border: 1px solid #6a737d;
 | 
			
		||||
  color: #dbdbdb;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@@ -618,7 +618,7 @@ footer {
 | 
			
		||||
.ui.label,
 | 
			
		||||
.ui.label.basic {
 | 
			
		||||
  color: #dbdbdb;
 | 
			
		||||
  background-color: #404552;
 | 
			
		||||
  background-color: #2a2e39;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.issue.list > .item .title {
 | 
			
		||||
@@ -734,6 +734,7 @@ a.ui.basic.green.label:hover {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.form input:not([type]),
 | 
			
		||||
.ui.form textarea,
 | 
			
		||||
.ui.form input[type="date"],
 | 
			
		||||
.ui.form input[type="datetime-local"],
 | 
			
		||||
.ui.form input[type="email"],
 | 
			
		||||
@@ -744,13 +745,34 @@ a.ui.basic.green.label:hover {
 | 
			
		||||
.ui.form input[type="tel"],
 | 
			
		||||
.ui.form input[type="text"],
 | 
			
		||||
.ui.form input[type="time"],
 | 
			
		||||
.ui.form input[type="url"] {
 | 
			
		||||
.ui.form input[type="url"],
 | 
			
		||||
.ui.selection.dropdown {
 | 
			
		||||
  color: #9e9e9e;
 | 
			
		||||
  background: #404552;
 | 
			
		||||
  border: 2px solid #353945;
 | 
			
		||||
  border: 1px solid #4b505f;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.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: #404552;
 | 
			
		||||
  border: 1px solid #4b505f;
 | 
			
		||||
  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,
 | 
			
		||||
@@ -761,14 +783,66 @@ a.ui.basic.green.label:hover {
 | 
			
		||||
.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.form input[type="url"]:focus,
 | 
			
		||||
.ui.selection.dropdown:focus {
 | 
			
		||||
  background: #404552;
 | 
			
		||||
  border: 2px solid #4b505f;
 | 
			
		||||
  border: 1px solid #6a737d;
 | 
			
		||||
  color: #dbdbdb;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.form .fields.error .field textarea,
 | 
			
		||||
.ui.form .fields.error .field select,
 | 
			
		||||
.ui.form .fields.error .field input:not([type]),
 | 
			
		||||
.ui.form .fields.error .field input[type="date"],
 | 
			
		||||
.ui.form .fields.error .field input[type="datetime-local"],
 | 
			
		||||
.ui.form .fields.error .field input[type="email"],
 | 
			
		||||
.ui.form .fields.error .field input[type="number"],
 | 
			
		||||
.ui.form .fields.error .field input[type="password"],
 | 
			
		||||
.ui.form .fields.error .field input[type="search"],
 | 
			
		||||
.ui.form .fields.error .field input[type="tel"],
 | 
			
		||||
.ui.form .fields.error .field input[type="time"],
 | 
			
		||||
.ui.form .fields.error .field input[type="text"],
 | 
			
		||||
.ui.form .fields.error .field input[type="file"],
 | 
			
		||||
.ui.form .fields.error .field input[type="url"],
 | 
			
		||||
.ui.form .field.error textarea,
 | 
			
		||||
.ui.form .field.error select,
 | 
			
		||||
.ui.form .field.error input:not([type]),
 | 
			
		||||
.ui.form .field.error input[type="date"],
 | 
			
		||||
.ui.form .field.error input[type="datetime-local"],
 | 
			
		||||
.ui.form .field.error input[type="email"],
 | 
			
		||||
.ui.form .field.error input[type="number"],
 | 
			
		||||
.ui.form .field.error input[type="password"],
 | 
			
		||||
.ui.form .field.error input[type="search"],
 | 
			
		||||
.ui.form .field.error input[type="tel"],
 | 
			
		||||
.ui.form .field.error input[type="time"],
 | 
			
		||||
.ui.form .field.error input[type="text"],
 | 
			
		||||
.ui.form .field.error input[type="file"],
 | 
			
		||||
.ui.form .field.error input[type="url"] {
 | 
			
		||||
  background-color: #522;
 | 
			
		||||
  border: 1px solid #7d3434;
 | 
			
		||||
  color: #f9cbcb;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.form .field.error select:focus,
 | 
			
		||||
.ui.form .field.error input:not([type]):focus,
 | 
			
		||||
.ui.form .field.error input[type="date"]:focus,
 | 
			
		||||
.ui.form .field.error input[type="datetime-local"]:focus,
 | 
			
		||||
.ui.form .field.error input[type="email"]:focus,
 | 
			
		||||
.ui.form .field.error input[type="number"]:focus,
 | 
			
		||||
.ui.form .field.error input[type="password"]:focus,
 | 
			
		||||
.ui.form .field.error input[type="search"]:focus,
 | 
			
		||||
.ui.form .field.error input[type="tel"]:focus,
 | 
			
		||||
.ui.form .field.error input[type="time"]:focus,
 | 
			
		||||
.ui.form .field.error input[type="text"]:focus,
 | 
			
		||||
.ui.form .field.error input[type="file"]:focus,
 | 
			
		||||
.ui.form .field.error input[type="url"]:focus {
 | 
			
		||||
  background-color: #522;
 | 
			
		||||
  border: 1px solid #a04141;
 | 
			
		||||
  color: #f9cbcb;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.action.input:not([class*="left action"]) input:focus {
 | 
			
		||||
  border-right-color: #4b505f !important;
 | 
			
		||||
  border-right-color: #6a737d !important;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.green.button,
 | 
			
		||||
@@ -799,6 +873,20 @@ a.ui.basic.green.label:hover {
 | 
			
		||||
  color: #dbdbdb;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.search > .results {
 | 
			
		||||
  background: #383c4a;
 | 
			
		||||
  border-color: #4c505c;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.search > .results .result:hover,
 | 
			
		||||
.ui.category.search > .results .category .result:hover {
 | 
			
		||||
  background: #404552;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.search > .results .result .title {
 | 
			
		||||
  color: #dbdbdb;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.table thead th,
 | 
			
		||||
.ui.table > thead > tr > th {
 | 
			
		||||
  background: #404552;
 | 
			
		||||
@@ -1060,17 +1148,6 @@ a.ui.basic.green.label:hover {
 | 
			
		||||
  box-shadow: 0 0 0 1px #13ae38 inset !important;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.form textarea,
 | 
			
		||||
.ui.form textarea:focus {
 | 
			
		||||
  color: #dbdbdb;
 | 
			
		||||
  background: #404552;
 | 
			
		||||
  border: 2px solid #353945;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.form textarea:focus {
 | 
			
		||||
  border: 1px solid #456580;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui .info.segment.top {
 | 
			
		||||
  background-color: #404552 !important;
 | 
			
		||||
}
 | 
			
		||||
@@ -1152,12 +1229,6 @@ td.blob-hunk {
 | 
			
		||||
  box-shadow: 0 2px 3px 0 rgba(34, 36, 38, .15);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.selection.dropdown {
 | 
			
		||||
  background: #404552;
 | 
			
		||||
  border: 1px solid #404552;
 | 
			
		||||
  color: #9e9e9e;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.menu .ui.dropdown .menu > .active.item {
 | 
			
		||||
  color: #dbdbdb !important;
 | 
			
		||||
}
 | 
			
		||||
@@ -1325,57 +1396,58 @@ input {
 | 
			
		||||
 | 
			
		||||
.ui.checkbox input:checked ~ .box:after,
 | 
			
		||||
.ui.checkbox input:checked ~ label:after {
 | 
			
		||||
  color: #7f98ad;
 | 
			
		||||
  color: #dbdbdb;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.checkbox input:checked ~ .box:before,
 | 
			
		||||
.ui.checkbox input:checked ~ label:before {
 | 
			
		||||
  background: #304251;
 | 
			
		||||
  background: #404552;
 | 
			
		||||
  opacity: 1;
 | 
			
		||||
  color: #7f98ad;
 | 
			
		||||
  border-color: #304251;
 | 
			
		||||
  color: #dbdbdb;
 | 
			
		||||
  border-color: #4b505f;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.checkbox .box:hover::before,
 | 
			
		||||
.ui.checkbox label:hover::before {
 | 
			
		||||
  background: #304251;
 | 
			
		||||
  background: #404552;
 | 
			
		||||
  border-color: #4b505f;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.checkbox .box:before,
 | 
			
		||||
.ui.checkbox label:before {
 | 
			
		||||
  background: #304251;
 | 
			
		||||
  border: 1px solid #304251;
 | 
			
		||||
  background: #404552;
 | 
			
		||||
  border: 1px solid #4b505f;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.checkbox label:before {
 | 
			
		||||
  border-color: #476075;
 | 
			
		||||
  border-color: #4b505f;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.checkbox .box:active::before,
 | 
			
		||||
.ui.checkbox label:active::before {
 | 
			
		||||
  background: #304251;
 | 
			
		||||
  border-color: rgba(34, 36, 38, .35);
 | 
			
		||||
  background: #404552;
 | 
			
		||||
  border-color: #6a737d;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.checkbox input:focus ~ .box:before,
 | 
			
		||||
.ui.checkbox input:focus ~ label:before {
 | 
			
		||||
  border-color: #304251;
 | 
			
		||||
  background: #304251;
 | 
			
		||||
  border-color: #6a737d;
 | 
			
		||||
  background: #404552;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.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 {
 | 
			
		||||
  border-color: #304251;
 | 
			
		||||
  background: #304251;
 | 
			
		||||
  border-color: #6a737d;
 | 
			
		||||
  background: #404552;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.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 {
 | 
			
		||||
  color: #7f98ad;
 | 
			
		||||
  color: #dbdbdb;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.checkbox input:focus ~ .box:after,
 | 
			
		||||
@@ -1384,8 +1456,17 @@ input {
 | 
			
		||||
  color: #9a9a9a;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.selection.dropdown:hover {
 | 
			
		||||
  border: 1px solid #456580;
 | 
			
		||||
.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 {
 | 
			
		||||
@@ -1413,7 +1494,7 @@ input {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ui.form .dropzone {
 | 
			
		||||
  border: 2px dashed #7f98ad;
 | 
			
		||||
  border: 1px dashed #7f98ad;
 | 
			
		||||
  background-color: #2e323e;
 | 
			
		||||
 | 
			
		||||
  .dz-button {
 | 
			
		||||
@@ -1670,7 +1751,7 @@ a.ui.labels .label:hover {
 | 
			
		||||
 | 
			
		||||
.editor-toolbar {
 | 
			
		||||
  background-color: #404552;
 | 
			
		||||
  border-color: #7f98ad;
 | 
			
		||||
  border-color: #4b505f;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.edit-diff > div > .ui.table {
 | 
			
		||||
@@ -1801,7 +1882,7 @@ a.ui.labels .label:hover {
 | 
			
		||||
.CodeMirror {
 | 
			
		||||
  color: #9daccc;
 | 
			
		||||
  background-color: #2e323e;
 | 
			
		||||
  border-color: #7f98ad;
 | 
			
		||||
  border-color: #4b505f;
 | 
			
		||||
  border-top: 0;
 | 
			
		||||
 | 
			
		||||
  div.CodeMirror-cursor {
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user