Skip to content

Commit 1399770

Browse files
silverwindsilverwind
committed
CSS and color tweaks
- Unify navbar-style menus - Fix admin bar overlapping menu bar - Fixes file edit comment box - Fix double border on review box - Fix review timeline icons
1 parent 03fa2ec commit 1399770

File tree

9 files changed

+69
-108
lines changed

9 files changed

+69
-108
lines changed

‎templates/repo/editor/commit_form.tmpl

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@
22
<img width="48" height="48" class="ui image commit-avatar" src="{{.SignedUser.RelAvatarLink}}">
33
<div class="commit-form">
44
<h3>{{- if .CanCommitToBranch.WillSign}}
5-
<i title="{{.i18n.Tr "repo.signing.will_sign" .CanCommitToBranch.SigningKey}}" class="lock green icon"></i>{{.i18n.Tr "repo.editor.commit_signed_changes"}}
5+
<span title="{{.i18n.Tr "repo.signing.will_sign" .CanCommitToBranch.SigningKey}}">{{svg "octicon-lock" 24}}</span>
6+
{{.i18n.Tr "repo.editor.commit_signed_changes"}}
67
{{- else}}
7-
<i title="{{.i18n.Tr (printf "repo.signing.wont_sign.%s" .CanCommitToBranch.WontSignReason)}}" class="unlock grey icon"></i>{{.i18n.Tr "repo.editor.commit_changes"}}
8+
<span title="{{.i18n.Tr (printf "repo.signing.wont_sign.%s" .CanCommitToBranch.WontSignReason)}}">{{svg "octicon-unlock" 24}}</span>
9+
{{.i18n.Tr "repo.editor.commit_changes"}}
810
{{- end}}</h3>
911
<div class="field">
1012
<input name="commit_summary" placeholder="{{if .PageIsDelete}}{{.i18n.Tr "repo.editor.delete" .TreePath}}{{else if .PageIsUpload}}{{.i18n.Tr "repo.editor.upload_files_to_dir" .TreePath}}{{else if .IsNewFile}}{{.i18n.Tr "repo.editor.add_tmpl"}}{{else}}{{.i18n.Tr "repo.editor.update" .TreePath}}{{end}}" value="{{.commit_summary}}" autofocus>

‎templates/repo/issue/view_content/comments.tmpl

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -403,10 +403,10 @@
403403
<img src="{{.Poster.RelAvatarLink}}">
404404
</a>
405405
{{end}}
406-
<span class="badge {{if eq .Review.Type 1}}green
407-
{{- else if eq .Review.Type 2}}grey
408-
{{- else if eq .Review.Type 3}}red
409-
{{- else}}grey{{end}}">{{svg (printf "octicon-%s" .Review.Type.Icon)}}</span>
406+
<span class="badge {{if eq .Review.Type 1}}bg-green
407+
{{- else if eq .Review.Type 2}}bg-grey
408+
{{- else if eq .Review.Type 3}}bg-red
409+
{{- else}}bg-grey{{end}} text-white">{{svg (printf "octicon-%s" .Review.Type.Icon)}}</span>
410410
<span class="text grey">
411411
{{if .OriginalAuthor }}
412412
<span class="text black"><i class="fa {{MigrationIcon $.Repository.GetOriginalURLHostname}}" aria-hidden="true"></i> {{ .OriginalAuthor }}</span><span class="text grey"> {{if $.Repository.OriginalURL}}</span><span class="text migrate">({{$.i18n.Tr "repo.migrated_from" $.Repository.OriginalURL $.Repository.GetOriginalURLHostname | Safe }}){{end}}</span>

‎templates/user/profile.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{{template "base/head" .}}
2-
<div class="user profile">
2+
<div class="user profile mt-5">
33
<div class="ui container">
44
<div class="ui stackable grid">
55
<div class="ui five wide column">

‎web_src/less/_base.less

Lines changed: 48 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@
8484
--color-input-background: #ffffff;
8585
--color-input-border: #dedede;
8686
--color-input-border-hover: #cecece;
87+
--color-navbar: #f5f5f5;
8788
}
8889

8990
:root:lang(ja) {
@@ -233,6 +234,15 @@ a:hover,
233234
margin: 0 -1.25px;
234235
}
235236

237+
.ui.pointing.dropdown > .menu:not(.hidden)::after {
238+
background: var(--color-box-body);
239+
box-shadow: -1px -1px 0 0 var(--color-secondary);
240+
}
241+
242+
.ui.progress[data-percent="0"] .bar .progress {
243+
color: var(--color-text);
244+
}
245+
236246
.ui.attached.table {
237247
border-color: var(--color-secondary);
238248
}
@@ -376,6 +386,10 @@ a:hover,
376386
margin-left: .5rem;
377387
}
378388

389+
.ui.dropdown .menu {
390+
border-color: var(--color-secondary);
391+
}
392+
379393
.ui.form .field > .selection.dropdown > .dropdown.icon {
380394
height: auto;
381395
}
@@ -967,10 +981,9 @@ footer {
967981

968982
.ui.menu.new-menu {
969983
justify-content: center !important;
970-
padding-top: 15px !important;
971-
margin-top: -15px !important;
972-
margin-bottom: 15px !important;
973-
background: #fafafa;
984+
padding-top: 1rem !important;
985+
margin-bottom: 1rem !important;
986+
background: var(--color-navbar);
974987
border-width: 1px !important;
975988
}
976989

@@ -1002,7 +1015,7 @@ footer {
10021015
position: absolute;
10031016
margin-top: -15px;
10041017
display: block;
1005-
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 100%);
1018+
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), var(--color-navbar) 100%);
10061019
content: ' ';
10071020
right: 0;
10081021
height: 53px;
@@ -1472,24 +1485,41 @@ table th[data-sortt-desc] {
14721485
text-transform: none;
14731486
}
14741487

1475-
.ui.tabular.menu {
1476-
.item {
1477-
padding: 11px 12px;
1478-
color: rgba(0, 0, 0, .5);
1479-
}
1488+
.ui.tabular.menu .item {
1489+
padding: 11px 12px;
1490+
color: var(--color-secondary-dark-6);
1491+
}
14801492

1481-
.item:hover {
1482-
color: rgba(0, 0, 0, .8);
1483-
}
1493+
.ui.tabular.menu .item:hover {
1494+
color: var(--color-text);
1495+
}
14841496

1485-
.item.active {
1486-
color: rgba(0, 0, 0, .9);
1487-
margin-top: 1px; /* offset fomantic's margin-bottom: -1px */
1488-
}
1497+
.ui.tabular.menu .item.active {
1498+
background: var(--color-body) !important;
1499+
border-color: var(--color-secondary) !important;
1500+
color: var(--color-text);
1501+
margin-top: 1px; /* offset fomantic's margin-bottom: -1px */
1502+
}
1503+
1504+
.ui.secondary.pointing.menu {
1505+
border-bottom: none !important;
14891506
}
14901507

14911508
.ui.secondary.pointing.menu .item {
1492-
padding: 12px;
1509+
border-bottom: none !important;
1510+
color: var(--color-secondary-dark-6);
1511+
}
1512+
1513+
.ui.secondary.pointing.menu .active.item {
1514+
background: var(--color-body) !important;
1515+
color: var(--color-text);
1516+
}
1517+
1518+
.ui.secondary.pointing.menu .active.item:hover,
1519+
.ui.secondary.pointing.menu .dropdown.item:hover,
1520+
.ui.secondary.pointing.menu .link.item:hover,
1521+
.ui.secondary.pointing.menu a.item:hover {
1522+
color: var(--color-text);
14931523
}
14941524

14951525
.ui.header .ui.label {

‎web_src/less/_explore.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
padding-top: 15px !important;
77
margin-top: -15px !important;
88
margin-bottom: 15px !important;
9-
background-color: #fafafa !important;
9+
background-color: var(--color-navbar) !important;
1010
border-width: 1px !important;
1111

1212
.svg {

‎web_src/less/_repository.less

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -519,21 +519,23 @@
519519
padding: 15px;
520520
margin-bottom: 10px;
521521
border: 1px solid var(--color-secondary);
522+
background: var(--color-box-body);
522523
border-radius: 3px;
523524
#avatar-arrow;
524525

525526
&::after {
526-
border-right-color: var(--color-box-header);
527+
border-right-color: var(--color-box-body);
527528
}
528529

529530
.quick-pull-choice {
530531
.branch-name {
531532
display: inline-block;
532-
padding: 3px 6px;
533+
padding: 2px 4px;
533534
font: 12px var(--fonts-monospace);
534-
color: rgba(0, 0, 0, .65);
535-
background-color: rgba(209, 227, 237, .45);
535+
color: var(--color-white);
536+
background: var(--color-grey);
536537
border-radius: 3px;
538+
margin: 0 2px;
537539
}
538540

539541
.new-branch-name-input {
@@ -741,14 +743,6 @@
741743
align-items: center;
742744
}
743745

744-
.avatar,
745-
.type-icon {
746-
.svg {
747-
width: 23px;
748-
height: 23px;
749-
}
750-
}
751-
752746
.text {
753747
margin: .3em 0 .5em .5em;
754748
}

‎web_src/less/_review.less

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -180,3 +180,7 @@ a.blob-excerpt:hover {
180180
max-width: 900px;
181181
}
182182
}
183+
184+
.review-box > .segment {
185+
border: none !important;
186+
}

‎web_src/less/_user.less

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
@import "variables.less";
22

33
.user {
4-
&:not(.icon) {
5-
padding-top: 15px;
6-
}
7-
84
&.profile {
95
.ui.card {
106
.header,

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

Lines changed: 1 addition & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@
7979
--color-input-background: #2e323e;
8080
--color-input-border: #454a57;
8181
--color-input-border-hover: #505667;
82+
--color-navbar: #2a2e3a;
8283
}
8384

8485
/* Background */
@@ -884,35 +885,6 @@ a.ui.basic.green.label:hover {
884885
border-bottom: 1px solid #304251;
885886
}
886887

887-
.ui.tabular.menu {
888-
border-bottom-color: var(--color-secondary);
889-
890-
.item.active {
891-
border-top-color: var(--color-secondary);
892-
border-left-color: var(--color-secondary);
893-
border-right-color: var(--color-secondary);
894-
background: #383c4a;
895-
color: #dbdbdb;
896-
}
897-
898-
.item {
899-
color: var(--color-secondary-dark-6);
900-
}
901-
902-
.item:hover {
903-
color: #dbdbdb;
904-
}
905-
906-
&.navbar {
907-
.item.active {
908-
border-top-color: transparent;
909-
border-left-color: transparent;
910-
border-right-color: transparent;
911-
background: #383c4a;
912-
}
913-
}
914-
}
915-
916888
.markdown:not(code) .highlight pre,
917889
.markdown:not(code) pre {
918890
background-color: #2a2e3a;
@@ -1156,43 +1128,6 @@ td.blob-hunk {
11561128
background: #353945;
11571129
}
11581130

1159-
.ui.secondary.pointing.menu {
1160-
border-bottom-color: rgba(255, 255, 255, .15);
1161-
}
1162-
1163-
.ui.secondary.pointing.menu .active.item {
1164-
color: #dbdbdb;
1165-
}
1166-
1167-
.ui.secondary.pointing.menu .active.item:hover {
1168-
color: #dbdbdb;
1169-
}
1170-
1171-
.ui.secondary.pointing.menu .dropdown.item:hover,
1172-
.ui.secondary.pointing.menu .link.item:hover,
1173-
.ui.secondary.pointing.menu a.item:hover {
1174-
color: #dbdbdb;
1175-
}
1176-
1177-
.ui.pointing.dropdown > .menu:not(.hidden)::after {
1178-
background: #2c303a;
1179-
}
1180-
1181-
.explore .navbar {
1182-
background-color: #2a2e3a !important;
1183-
}
1184-
1185-
.ui.menu.new-menu {
1186-
background: #2a2e3a;
1187-
border-color: transparent !important;
1188-
1189-
@media @mediaLgAndDown {
1190-
&::after {
1191-
background: linear-gradient(to right, transparent 0%, #2a2e3a 100%);
1192-
}
1193-
}
1194-
}
1195-
11961131
.ui.attached.info.message,
11971132
.ui.info.message {
11981133
box-shadow: 0 0 0 1px #4b5e71 inset, 0 0 0 0 transparent;

0 commit comments

Comments
 (0)