Skip to content

Commit 5626811

Browse files
silverwindzeripathtechknowlogick
authored
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: #12491 Co-authored-by: zeripath <[email protected]> Co-authored-by: techknowlogick <[email protected]>
1 parent 1b07db7 commit 5626811

File tree

1 file changed

+126
-45
lines changed

1 file changed

+126
-45
lines changed

‎web_src/less/themes/theme-arc-green.less‎

Lines changed: 126 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -600,14 +600,14 @@ footer {
600600

601601
.ui.input input {
602602
background: #404552;
603-
border: 2px solid #353945;
603+
border: 1px solid #4b505f;
604604
color: #dbdbdb;
605605
}
606606

607607
.ui.input input:focus,
608608
.ui.input.focus input {
609609
background: #404552;
610-
border: 2px solid #353945;
610+
border: 1px solid #6a737d;
611611
color: #dbdbdb;
612612
}
613613

@@ -618,7 +618,7 @@ footer {
618618
.ui.label,
619619
.ui.label.basic {
620620
color: #dbdbdb;
621-
background-color: #404552;
621+
background-color: #2a2e39;
622622
}
623623

624624
.issue.list > .item .title {
@@ -734,6 +734,7 @@ a.ui.basic.green.label:hover {
734734
}
735735

736736
.ui.form input:not([type]),
737+
.ui.form textarea,
737738
.ui.form input[type="date"],
738739
.ui.form input[type="datetime-local"],
739740
.ui.form input[type="email"],
@@ -744,13 +745,34 @@ a.ui.basic.green.label:hover {
744745
.ui.form input[type="tel"],
745746
.ui.form input[type="text"],
746747
.ui.form input[type="time"],
747-
.ui.form input[type="url"] {
748+
.ui.form input[type="url"],
749+
.ui.selection.dropdown {
748750
color: #9e9e9e;
749751
background: #404552;
750-
border: 2px solid #353945;
752+
border: 1px solid #4b505f;
753+
}
754+
755+
.ui.form input:not([type]):hover,
756+
.ui.form textarea:hover,
757+
.ui.form input[type="date"]:hover,
758+
.ui.form input[type="datetime-local"]:hover,
759+
.ui.form input[type="email"]:hover,
760+
.ui.form input[type="file"]:hover,
761+
.ui.form input[type="number"]:hover,
762+
.ui.form input[type="password"]:hover,
763+
.ui.form input[type="search"]:hover,
764+
.ui.form input[type="tel"]:hover,
765+
.ui.form input[type="text"]:hover,
766+
.ui.form input[type="time"]:hover,
767+
.ui.form input[type="url"]:hover,
768+
.ui.selection.dropdown:hover {
769+
background: #404552;
770+
border: 1px solid #4b505f;
771+
color: #dbdbdb;
751772
}
752773

753774
.ui.form input:not([type]):focus,
775+
.ui.form textarea:focus,
754776
.ui.form input[type="date"]:focus,
755777
.ui.form input[type="datetime-local"]:focus,
756778
.ui.form input[type="email"]:focus,
@@ -761,14 +783,66 @@ a.ui.basic.green.label:hover {
761783
.ui.form input[type="tel"]:focus,
762784
.ui.form input[type="text"]:focus,
763785
.ui.form input[type="time"]:focus,
764-
.ui.form input[type="url"]:focus {
786+
.ui.form input[type="url"]:focus,
787+
.ui.selection.dropdown:focus {
765788
background: #404552;
766-
border: 2px solid #4b505f;
789+
border: 1px solid #6a737d;
767790
color: #dbdbdb;
768791
}
769792

793+
.ui.form .fields.error .field textarea,
794+
.ui.form .fields.error .field select,
795+
.ui.form .fields.error .field input:not([type]),
796+
.ui.form .fields.error .field input[type="date"],
797+
.ui.form .fields.error .field input[type="datetime-local"],
798+
.ui.form .fields.error .field input[type="email"],
799+
.ui.form .fields.error .field input[type="number"],
800+
.ui.form .fields.error .field input[type="password"],
801+
.ui.form .fields.error .field input[type="search"],
802+
.ui.form .fields.error .field input[type="tel"],
803+
.ui.form .fields.error .field input[type="time"],
804+
.ui.form .fields.error .field input[type="text"],
805+
.ui.form .fields.error .field input[type="file"],
806+
.ui.form .fields.error .field input[type="url"],
807+
.ui.form .field.error textarea,
808+
.ui.form .field.error select,
809+
.ui.form .field.error input:not([type]),
810+
.ui.form .field.error input[type="date"],
811+
.ui.form .field.error input[type="datetime-local"],
812+
.ui.form .field.error input[type="email"],
813+
.ui.form .field.error input[type="number"],
814+
.ui.form .field.error input[type="password"],
815+
.ui.form .field.error input[type="search"],
816+
.ui.form .field.error input[type="tel"],
817+
.ui.form .field.error input[type="time"],
818+
.ui.form .field.error input[type="text"],
819+
.ui.form .field.error input[type="file"],
820+
.ui.form .field.error input[type="url"] {
821+
background-color: #522;
822+
border: 1px solid #7d3434;
823+
color: #f9cbcb;
824+
}
825+
826+
.ui.form .field.error select:focus,
827+
.ui.form .field.error input:not([type]):focus,
828+
.ui.form .field.error input[type="date"]:focus,
829+
.ui.form .field.error input[type="datetime-local"]:focus,
830+
.ui.form .field.error input[type="email"]:focus,
831+
.ui.form .field.error input[type="number"]:focus,
832+
.ui.form .field.error input[type="password"]:focus,
833+
.ui.form .field.error input[type="search"]:focus,
834+
.ui.form .field.error input[type="tel"]:focus,
835+
.ui.form .field.error input[type="time"]:focus,
836+
.ui.form .field.error input[type="text"]:focus,
837+
.ui.form .field.error input[type="file"]:focus,
838+
.ui.form .field.error input[type="url"]:focus {
839+
background-color: #522;
840+
border: 1px solid #a04141;
841+
color: #f9cbcb;
842+
}
843+
770844
.ui.action.input:not([class*="left action"]) input:focus {
771-
border-right-color: #4b505f !important;
845+
border-right-color: #6a737d !important;
772846
}
773847

774848
.ui.green.button,
@@ -799,6 +873,20 @@ a.ui.basic.green.label:hover {
799873
color: #dbdbdb;
800874
}
801875

876+
.ui.search > .results {
877+
background: #383c4a;
878+
border-color: #4c505c;
879+
}
880+
881+
.ui.search > .results .result:hover,
882+
.ui.category.search > .results .category .result:hover {
883+
background: #404552;
884+
}
885+
886+
.ui.search > .results .result .title {
887+
color: #dbdbdb;
888+
}
889+
802890
.ui.table thead th,
803891
.ui.table > thead > tr > th {
804892
background: #404552;
@@ -1060,17 +1148,6 @@ a.ui.basic.green.label:hover {
10601148
box-shadow: 0 0 0 1px #13ae38 inset !important;
10611149
}
10621150

1063-
.ui.form textarea,
1064-
.ui.form textarea:focus {
1065-
color: #dbdbdb;
1066-
background: #404552;
1067-
border: 2px solid #353945;
1068-
}
1069-
1070-
.ui.form textarea:focus {
1071-
border: 1px solid #456580;
1072-
}
1073-
10741151
.ui .info.segment.top {
10751152
background-color: #404552 !important;
10761153
}
@@ -1152,12 +1229,6 @@ td.blob-hunk {
11521229
box-shadow: 0 2px 3px 0 rgba(34, 36, 38, .15);
11531230
}
11541231

1155-
.ui.selection.dropdown {
1156-
background: #404552;
1157-
border: 1px solid #404552;
1158-
color: #9e9e9e;
1159-
}
1160-
11611232
.ui.menu .ui.dropdown .menu > .active.item {
11621233
color: #dbdbdb !important;
11631234
}
@@ -1325,57 +1396,58 @@ input {
13251396

13261397
.ui.checkbox input:checked ~ .box:after,
13271398
.ui.checkbox input:checked ~ label:after {
1328-
color: #7f98ad;
1399+
color: #dbdbdb;
13291400
}
13301401

13311402
.ui.checkbox input:checked ~ .box:before,
13321403
.ui.checkbox input:checked ~ label:before {
1333-
background: #304251;
1404+
background: #404552;
13341405
opacity: 1;
1335-
color: #7f98ad;
1336-
border-color: #304251;
1406+
color: #dbdbdb;
1407+
border-color: #4b505f;
13371408
}
13381409

13391410
.ui.checkbox .box:hover::before,
13401411
.ui.checkbox label:hover::before {
1341-
background: #304251;
1412+
background: #404552;
1413+
border-color: #4b505f;
13421414
}
13431415

13441416
.ui.checkbox .box:before,
13451417
.ui.checkbox label:before {
1346-
background: #304251;
1347-
border: 1px solid #304251;
1418+
background: #404552;
1419+
border: 1px solid #4b505f;
13481420
}
13491421

13501422
.ui.checkbox label:before {
1351-
border-color: #476075;
1423+
border-color: #4b505f;
13521424
}
13531425

13541426
.ui.checkbox .box:active::before,
13551427
.ui.checkbox label:active::before {
1356-
background: #304251;
1357-
border-color: rgba(34, 36, 38, .35);
1428+
background: #404552;
1429+
border-color: #6a737d;
13581430
}
13591431

13601432
.ui.checkbox input:focus ~ .box:before,
13611433
.ui.checkbox input:focus ~ label:before {
1362-
border-color: #304251;
1363-
background: #304251;
1434+
border-color: #6a737d;
1435+
background: #404552;
13641436
}
13651437

13661438
.ui.checkbox input:checked:focus ~ .box:before,
13671439
.ui.checkbox input:checked:focus ~ label:before,
13681440
.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ .box:before,
13691441
.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label:before {
1370-
border-color: #304251;
1371-
background: #304251;
1442+
border-color: #6a737d;
1443+
background: #404552;
13721444
}
13731445

13741446
.ui.checkbox input:checked:focus ~ .box:after,
13751447
.ui.checkbox input:checked:focus ~ label:after,
13761448
.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ .box:after,
13771449
.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label:after {
1378-
color: #7f98ad;
1450+
color: #dbdbdb;
13791451
}
13801452

13811453
.ui.checkbox input:focus ~ .box:after,
@@ -1384,8 +1456,17 @@ input {
13841456
color: #9a9a9a;
13851457
}
13861458

1387-
.ui.selection.dropdown:hover {
1388-
border: 1px solid #456580;
1459+
.ui.radio.checkbox label::after,
1460+
.ui.radio.checkbox input:checked ~ label::after,
1461+
.ui.radio.checkbox input:focus ~ label::after,
1462+
.ui.radio.checkbox input:focus:checked ~ label::after, {
1463+
background: #dbdbdb;
1464+
}
1465+
1466+
.ui.radio.checkbox input:checked ~ label::before,
1467+
.ui.radio.checkbox input:focus ~ label::before,
1468+
.ui.radio.checkbox input:focus:checked ~ label::before {
1469+
background: none;
13891470
}
13901471

13911472
.ui.selection.dropdown .menu > .item {
@@ -1413,7 +1494,7 @@ input {
14131494
}
14141495

14151496
.ui.form .dropzone {
1416-
border: 2px dashed #7f98ad;
1497+
border: 1px dashed #7f98ad;
14171498
background-color: #2e323e;
14181499

14191500
.dz-button {
@@ -1670,7 +1751,7 @@ a.ui.labels .label:hover {
16701751

16711752
.editor-toolbar {
16721753
background-color: #404552;
1673-
border-color: #7f98ad;
1754+
border-color: #4b505f;
16741755
}
16751756

16761757
.edit-diff > div > .ui.table {
@@ -1801,7 +1882,7 @@ a.ui.labels .label:hover {
18011882
.CodeMirror {
18021883
color: #9daccc;
18031884
background-color: #2e323e;
1804-
border-color: #7f98ad;
1885+
border-color: #4b505f;
18051886
border-top: 0;
18061887

18071888
div.CodeMirror-cursor {

0 commit comments

Comments
 (0)