]> source.dussan.org Git - gitea.git/commitdiff
CSS color variables, less bold font weight and more (#13567)
authorsilverwind <me@silverwind.io>
Sun, 15 Nov 2020 20:58:16 +0000 (21:58 +0100)
committerGitHub <noreply@github.com>
Sun, 15 Nov 2020 20:58:16 +0000 (15:58 -0500)
* CSS color variables, less bold font weight

- Define color variables for fully saturated colors and apply them where
  it made sense
- Add background color helper classes
- Globally reduce bold font weight from 700 to 500
- Remove border from timeline icons
- Unify dropzone styling
- Various border style consolidations

* attempt to fix test

* another attempt at tests

* fix contains

20 files changed:
integrations/pull_merge_test.go
integrations/pull_status_test.go
templates/repo/issue/view_content/comments.tmpl
templates/repo/issue/view_content/pull.tmpl
web_src/fomantic/_site/globals/site.variables
web_src/fomantic/build/semantic.css
web_src/less/_admin.less
web_src/less/_base.less
web_src/less/_chroma.less
web_src/less/_dashboard.less
web_src/less/_home.less
web_src/less/_markdown.less
web_src/less/_organization.less
web_src/less/_repository.less
web_src/less/_review.less
web_src/less/_tribute.less
web_src/less/_user.less
web_src/less/features/heatmap.less
web_src/less/helpers.less
web_src/less/themes/theme-arc-green.less

index 04e68ff3dcc46e3a25ba612ab4f88df06395d4e6..b5edb41eeca4b289064790bc470a226a52f75a9e 100644 (file)
@@ -194,7 +194,7 @@ func TestCantMergeWorkInProgress(t *testing.T) {
                req := NewRequest(t, "GET", resp.Header().Get("Location"))
                resp = session.MakeRequest(t, req, http.StatusOK)
                htmlDoc := NewHTMLParser(t, resp.Body)
-               text := strings.TrimSpace(htmlDoc.doc.Find(".attached.merge-section.no-header > .text.grey").Last().Text())
+               text := strings.TrimSpace(htmlDoc.doc.Find(".merge-section > .item").Last().Text())
                assert.NotEmpty(t, text, "Can't find WIP text")
 
                // remove <strong /> from lang
index 95ed755fbb63e5310adeb87e9bdc48da092a8dee..0002784792b6003e3bdf1fae0bd834ef7a5e56c4 100644 (file)
@@ -114,7 +114,7 @@ func TestPullCreate_EmptyChangesWithCommits(t *testing.T) {
                resp := session.MakeRequest(t, req, http.StatusOK)
                doc := NewHTMLParser(t, resp.Body)
 
-               text := strings.TrimSpace(doc.doc.Find(".item.text.green").Text())
-               assert.EqualValues(t, "This pull request can be merged automatically.", text)
+               text := strings.TrimSpace(doc.doc.Find(".merge-section").Text())
+               assert.Contains(t, text, "This pull request can be merged automatically.")
        })
 }
index 6f189800727a2cbe11a932a42fe7c3ef8309a560..77b02f67a561b3062b6a113236878a9e4736e606 100644 (file)
@@ -91,7 +91,7 @@
                </div>
        {{else if eq .Type 1}}
                <div class="timeline-item event" id="{{.HashTag}}">
-                       <span class="badge">{{svg "octicon-dot-fill"}}</span>
+                       <span class="badge bg-green text-white">{{svg "octicon-dot-fill"}}</span>
                        <a class="ui avatar image" href="{{.Poster.HomeLink}}">
                                <img src="{{.Poster.RelAvatarLink}}">
                        </a>
                </div>
        {{else if eq .Type 2}}
                <div class="timeline-item event" id="{{.HashTag}}">
-                       <span class="badge">{{svg "octicon-circle-slash"}}</span>
+                       <span class="badge bg-red text-white">{{svg "octicon-circle-slash"}}</span>
                        <a class="ui avatar image" href="{{.Poster.HomeLink}}">
                                <img src="{{.Poster.RelAvatarLink}}">
                        </a>
                </div>
        {{else if eq .Type 28}}
                <div class="timeline-item event" id="{{.HashTag}}">
-                       <span class="badge purple">{{svg "octicon-git-merge"}}</span>
+                       <span class="badge bg-purple text-white">{{svg "octicon-git-merge"}}</span>
                        <a class="ui avatar image" href="{{.Poster.HomeLink}}">
                                <img src="{{.Poster.RelAvatarLink}}">
                        </a>
index 6b62def2cc8926cd1db3bea044638350ffc345a0..347b3b15d3baeb359ebe88da73ed33315bc0f8b6 100644 (file)
@@ -97,7 +97,7 @@
                {{$canAutoMerge := false}}
                <div class="ui attached merge-section segment {{if not $.LatestCommitStatus}}no-header{{end}}">
                        {{if .Issue.PullRequest.HasMerged}}
-                               <div class="item text purple">
+                               <div class="item text">
                                        {{if .Issue.PullRequest.MergedCommitID}}
                                                {{$link := printf "%s/commit/%s" $.Repository.HTMLURL .Issue.PullRequest.MergedCommitID}}
                                                {{$.i18n.Tr "repo.pulls.merged_as" $link (ShortSha .Issue.PullRequest.MergedCommitID) | Safe}}
                                        </div>
                                {{end}}
                        {{else if .Issue.IsClosed}}
-                               <div class="item text grey">
+                               <div class="item text">
                                        {{if .IsPullRequestBroken}}
                                                {{$.i18n.Tr "repo.pulls.cant_reopen_deleted_branch"}}
                                        {{else}}
                                        </div>
                                {{end}}
                        {{else if .IsPullFilesConflicted}}
-                               <div class="item text grey">
+                               <div class="item text">
                                        {{svg "octicon-x"}}
                                        {{$.i18n.Tr "repo.pulls.files_conflicted"}}
                                        {{range .ConflictedFiles}}
                                        {{end}}
                                </div>
                        {{else if .IsPullRequestBroken}}
-                               <div class="item text red">
+                               <div class="item">
                                        <i class="icon icon-octicon">{{svg "octicon-x"}}</i>
                                        {{$.i18n.Tr "repo.pulls.data_broken"}}
                                </div>
                        {{else if .IsPullWorkInProgress}}
-                               <div class="item text grey">
+                               <div class="item">
                                        <i class="icon icon-octicon">{{svg "octicon-x"}}</i>
                                        {{$.i18n.Tr "repo.pulls.cannot_merge_work_in_progress" (.WorkInProgressPrefix|Escape) | Str2html}}
                                </div>
                        {{else if .Issue.PullRequest.IsChecking}}
-                               <div class="item text yellow">
+                               <div class="item">
                                        <i class="icon icon-octicon">{{svg "octicon-sync"}}</i>
                                        {{$.i18n.Tr "repo.pulls.is_checking"}}
                                </div>
                        {{else if .Issue.PullRequest.CanAutoMerge}}
                                {{if .IsBlockedByApprovals}}
-                                       <div class="item text red">
+                                       <div class="item">
                                                <i class="icon icon-octicon">{{svg "octicon-x"}}</i>
                                        {{$.i18n.Tr "repo.pulls.blocked_by_approvals" .GrantedApprovals .Issue.PullRequest.ProtectedBranch.RequiredApprovals}}
                                        </div>
                                {{else if .IsBlockedByRejection}}
-                                       <div class="item text red">
+                                       <div class="item">
                                                <i class="icon icon-octicon">{{svg "octicon-x"}}</i>
                                        {{$.i18n.Tr "repo.pulls.blocked_by_rejection"}}
                                        </div>
                                {{else if .IsBlockedByOutdatedBranch}}
-                                       <div class="item text red">
+                                       <div class="item">
                                                <i class="icon icon-octicon">{{svg "octicon-x"}}</i>
                                        {{$.i18n.Tr "repo.pulls.blocked_by_outdated_branch"}}
                                        </div>
                                {{else if .IsBlockedByChangedProtectedFiles}}
-                                       <div class="item text red">
+                                       <div class="item">
                                                <i class="icon icon-octicon">{{svg "octicon-x" 16}}</i>
                                                {{$.i18n.Tr (TrN $.i18n.Lang $.ChangedProtectedFilesNum "repo.pulls.blocked_by_changed_protected_files_1" "repo.pulls.blocked_by_changed_protected_files_n") | Safe }}
                                                <div class="ui ordered list">
                                                </div>
                                        </div>
                                {{else if and .EnableStatusCheck (or .RequiredStatusCheckState.IsError .RequiredStatusCheckState.IsFailure)}}
-                                       <div class="item text red">
+                                       <div class="item">
                                                <i class="icon icon-octicon">{{svg "octicon-x"}}</i>
                                                {{$.i18n.Tr "repo.pulls.required_status_check_failed"}}
                                        </div>
                                {{else if and .EnableStatusCheck (not .RequiredStatusCheckState.IsSuccess)}}
-                                       <div class="item text red">
+                                       <div class="item">
                                                <i class="icon icon-octicon">{{svg "octicon-x"}}</i>
                                                {{$.i18n.Tr "repo.pulls.required_status_check_missing"}}
                                        </div>
                                {{else if and .AllowMerge .RequireSigned (not .WillSign)}}
-                                       <div class="item text red">
+                                       <div class="item">
                                                <i class="icon icon-octicon">{{svg "octicon-x"}}</i>
                                                {{$.i18n.Tr "repo.pulls.require_signed_wont_sign"}}
                                        </div>
-                                       <div class="item text yellow">
+                                       <div class="item">
                                                <i class="icon unlock"></i>
                                                {{$.i18n.Tr (printf "repo.signing.wont_sign.%s" .WontSignReason) }}
                                        </div>
                                {{$notAllOverridableChecksOk := or .IsBlockedByApprovals .IsBlockedByRejection .IsBlockedByOutdatedBranch .IsBlockedByChangedProtectedFiles (and .EnableStatusCheck (not .RequiredStatusCheckState.IsSuccess))}}
                                {{if and (or $.IsRepoAdmin (not $notAllOverridableChecksOk)) (or (not .AllowMerge) (not .RequireSigned) .WillSign)}}
                                        {{if $notAllOverridableChecksOk}}
-                                               <div class="item text yellow">
+                                               <div class="item">
                                                        <i class="icon icon-octicon">{{svg "octicon-dot-fill"}}</i>
                                                        {{$.i18n.Tr "repo.pulls.required_status_check_administrator"}}
                                                </div>
                                        {{else}}
-                                               <div class="item text green">
+                                               <div class="item">
                                                        <i class="icon icon-octicon">{{svg "octicon-check"}}</i>
                                                        {{$.i18n.Tr "repo.pulls.can_auto_merge_desc"}}
                                                </div>
                                        {{end}}
                                        {{if .WillSign}}
-                                               <div class="item text green">
+                                               <div class="item">
                                                        <i class="icon lock green"></i>
                                                        {{$.i18n.Tr "repo.signing.will_sign" .SigningKey}}
                                                </div>
                                        {{else if .IsSigned}}
-                                               <div class="item text">
+                                               <div class="item">
                                                        <i class="icon unlock"></i>
                                                        {{$.i18n.Tr (printf "repo.signing.wont_sign.%s" .WontSignReason) }}
                                                </div>
                                {{$canAutoMerge = true}}
                                {{if (gt .Issue.PullRequest.CommitsBehind 0)}}
                                        <div class="ui divider"></div>
-                                       <div class="item item-section text grey">
+                                       <div class="item item-section">
                                                <div class="item-section-left">
                                                        <i class="icon icon-octicon">{{svg "octicon-alert"}}</i>
                                                        {{$.i18n.Tr "repo.pulls.outdated_with_base_branch"}}
index efd2e2a27d2032b49fc561e79e3f78ecb0a727ff..550d44b3b5089e3534e356da31f1b6cae509c542 100644 (file)
@@ -2,3 +2,4 @@
 
 @headerFont: var(--fonts-regular);
 @pageFont: var(--fonts-regular);
+@bold: 500;
index 8fe1c7384a09df36a22ed1394cb9a1b6f9c1efa2..c2cc6356ef397e2284115cd2c6bc656d344a8b6b 100644 (file)
   margin: 0;
   padding: 0.75em 1em;
   color: rgba(0, 0, 0, 0.4);
-  font-weight: bold;
+  font-weight: 500;
   border-top: 1px solid rgba(34, 36, 38, 0.15);
   transition: background 0.1s ease, color 0.1s ease;
 }
 *******************************/
 
 .ui.breadcrumb .active.section {
-  font-weight: bold;
+  font-weight: 500;
 }
 
 /*******************************
   padding: 0.78571429em 1.5em 0.78571429em;
   text-transform: none;
   text-shadow: none;
-  font-weight: bold;
+  font-weight: 500;
   line-height: 1em;
   font-style: normal;
   text-align: center;
   line-height: 1.78571429em;
   color: rgba(0, 0, 0, 0.4);
   font-style: normal;
-  font-weight: bold;
+  font-weight: 500;
   box-shadow: 0 0 0 1px transparent inset;
 }
 
 
 .ui.cards > .card > .content > .header:not(.ui),
 .ui.card > .content > .header:not(.ui) {
-  font-weight: bold;
+  font-weight: 500;
   font-size: 1.28571429em;
   margin-top: -0.21425em;
   line-height: 1.28571429em;
@@ -7305,7 +7305,7 @@ a.inverted.ui.card:hover,
 .ui.comments .comment .author {
   font-size: 1em;
   color: rgba(0, 0, 0, 0.87);
-  font-weight: bold;
+  font-weight: 500;
 }
 
 .ui.comments .comment a.author {
@@ -8158,7 +8158,7 @@ body.dimmable > .dimmer {
   margin: 1rem 0;
   line-height: 1;
   height: 0;
-  font-weight: bold;
+  font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: rgba(0, 0, 0, 0.85);
@@ -8616,7 +8616,7 @@ body.dimmable > .dimmer {
 .ui.dropdown .menu > .header {
   margin: 1rem 0 0.75rem;
   padding: 0 1.14285714rem;
-  font-weight: bold;
+  font-weight: 500;
   text-transform: uppercase;
 }
 
@@ -9416,7 +9416,7 @@ select.ui.dropdown {
 }
 
 .ui.inline.dropdown > .text {
-  font-weight: bold;
+  font-weight: 500;
 }
 
 .ui.inline.dropdown .menu {
@@ -9437,7 +9437,7 @@ select.ui.dropdown {
 
 .ui.dropdown .menu .active.item {
   background: transparent;
-  font-weight: bold;
+  font-weight: 500;
   color: rgba(0, 0, 0, 0.95);
   box-shadow: none;
   z-index: 12;
@@ -10679,7 +10679,7 @@ select.ui.dropdown {
   margin: 0 0 0.28571429rem 0;
   color: rgba(0, 0, 0, 0.87);
   font-size: 0.92857143em;
-  font-weight: bold;
+  font-weight: 500;
   text-transform: none;
 }
 
@@ -12186,7 +12186,7 @@ select.ui.dropdown {
   margin: 0 0 0.28571429rem 0;
   color: rgba(0, 0, 0, 0.87);
   font-size: 0.92857143em;
-  font-weight: bold;
+  font-weight: 500;
   text-transform: none;
 }
 
@@ -12395,7 +12395,7 @@ select.ui.dropdown {
   margin-bottom: 0;
   vertical-align: baseline;
   font-size: 0.92857143em;
-  font-weight: bold;
+  font-weight: 500;
   color: rgba(0, 0, 0, 0.87);
   text-transform: none;
 }
@@ -14785,7 +14785,7 @@ select.ui.dropdown {
   margin: calc(2rem - 0.1428571428571429em) 0 1rem;
   padding: 0 0;
   font-family: var(--fonts-regular);
-  font-weight: bold;
+  font-weight: 500;
   line-height: 1.28571429em;
   text-transform: none;
   color: rgba(0, 0, 0, 0.87);
@@ -15045,7 +15045,7 @@ h6.ui.header .sub.header {
 .ui.sub.header {
   padding: 0;
   margin-bottom: 0.14285714rem;
-  font-weight: bold;
+  font-weight: 500;
   font-size: 0.85714286em;
   text-transform: uppercase;
   color: '';
@@ -25869,7 +25869,7 @@ img.ui.bordered.image {
   display: inline-block;
   margin: -0.21425em 0 0;
   font-family: var(--fonts-regular);
-  font-weight: bold;
+  font-weight: 500;
   color: rgba(0, 0, 0, 0.85);
 }
 
@@ -26365,7 +26365,7 @@ img.ui.bordered.image {
   padding: 0.5833em 0.833em;
   color: rgba(0, 0, 0, 0.6);
   text-transform: none;
-  font-weight: bold;
+  font-weight: 500;
   border: 0 solid transparent;
   border-radius: 0.28571429rem;
   transition: background 0.1s ease;
@@ -26419,7 +26419,7 @@ a.ui.label {
 .ui.label > .detail {
   display: inline-block;
   vertical-align: top;
-  font-weight: bold;
+  font-weight: 500;
   margin-left: 1em;
   opacity: 0.8;
 }
@@ -28906,7 +28906,7 @@ ol.ui.list ol li,
   display: block;
   margin: 0;
   font-family: var(--fonts-regular);
-  font-weight: bold;
+  font-weight: 500;
   color: rgba(0, 0, 0, 0.87);
 }
 
@@ -30943,13 +30943,13 @@ ol.ui.suffixed.list li:before,
   margin: 0;
   background: '';
   text-transform: normal;
-  font-weight: bold;
+  font-weight: 500;
 }
 
 .ui.vertical.menu .item > .header:not(.ui) {
   margin: 0 0 0.5em;
   font-size: 1em;
-  font-weight: bold;
+  font-weight: 500;
 }
 
 /*--------------
@@ -31002,7 +31002,7 @@ ol.ui.suffixed.list li:before,
 
 .ui.menu .ui.dropdown .menu > .active.item {
   background: rgba(0, 0, 0, 0.03) !important;
-  font-weight: bold !important;
+  font-weight: 500 !important;
   color: rgba(0, 0, 0, 0.95) !important;
 }
 
@@ -31410,7 +31410,7 @@ Floated Menu / Item
 
 .ui.vertical.menu .item .menu .active.item {
   background-color: transparent;
-  font-weight: bold;
+  font-weight: 500;
   color: rgba(0, 0, 0, 0.95);
 }
 
@@ -31458,7 +31458,7 @@ Floated Menu / Item
   color: rgba(0, 0, 0, 0.95);
   border-top-width: 1px;
   border-color: #D4D4D5;
-  font-weight: bold;
+  font-weight: 500;
   margin-bottom: -1px;
   box-shadow: none;
   border-radius: 0.28571429rem 0.28571429rem 0 0 !important;
@@ -31827,7 +31827,7 @@ Floated Menu / Item
   background-color: transparent;
   box-shadow: none;
   border-color: currentColor;
-  font-weight: bold;
+  font-weight: 500;
   color: rgba(0, 0, 0, 0.95);
 }
 
@@ -31935,7 +31935,7 @@ Floated Menu / Item
   color: rgba(0, 0, 0, 0.85);
   font-size: 0.92857143em;
   text-transform: uppercase;
-  font-weight: bold;
+  font-weight: 500;
 }
 
 /* Image */
@@ -33233,7 +33233,7 @@ Floated Menu / Item
 .ui.message .header {
   display: block;
   font-family: var(--fonts-regular);
-  font-weight: bold;
+  font-weight: 500;
   margin: -0.14285714em 0 0 0;
 }
 
@@ -33970,7 +33970,7 @@ Floated Menu / Item
 .ui.modal > .header:not(.ui) {
   font-size: 1.42857143rem;
   line-height: 1.28571429em;
-  font-weight: bold;
+  font-weight: 500;
 }
 
 /*--------------
@@ -34750,7 +34750,7 @@ Floated Menu / Item
   font-family: var(--fonts-regular);
   font-size: 1.14285714em;
   line-height: 1.2;
-  font-weight: bold;
+  font-weight: 500;
 }
 
 .ui.popup > .header + .content {
@@ -35644,7 +35644,7 @@ Floated Menu / Item
   color: rgba(255, 255, 255, 0.7);
   text-shadow: none;
   margin-top: -0.5em;
-  font-weight: bold;
+  font-weight: 500;
   text-align: left;
 }
 
@@ -35659,7 +35659,7 @@ Floated Menu / Item
   left: 0;
   bottom: auto;
   color: rgba(0, 0, 0, 0.87);
-  font-weight: bold;
+  font-weight: 500;
   text-shadow: none;
   margin-top: 0.2em;
   text-align: center;
@@ -37055,7 +37055,7 @@ template {
 .ui.search > .results .result .title {
   margin: -0.14285714em 0 0;
   font-family: var(--fonts-regular);
-  font-weight: bold;
+  font-weight: 500;
   font-size: 1em;
   color: rgba(0, 0, 0, 0.85);
 }
@@ -37082,7 +37082,7 @@ template {
 .ui.search > .results > .message .header {
   font-family: var(--fonts-regular);
   font-size: 1rem;
-  font-weight: bold;
+  font-weight: 500;
   color: rgba(0, 0, 0, 0.87);
 }
 
@@ -37100,7 +37100,7 @@ template {
   background: #F3F4F5;
   padding: 0.92857143em 1em;
   color: rgba(0, 0, 0, 0.87);
-  font-weight: bold;
+  font-weight: 500;
   text-align: center;
 }
 
@@ -37291,7 +37291,7 @@ template {
   font-family: var(--fonts-regular);
   font-size: 1em;
   padding: 0.4em 1em;
-  font-weight: bold;
+  font-weight: 500;
   color: rgba(0, 0, 0, 0.4);
   border-bottom: 1px solid rgba(34, 36, 38, 0.1);
 }
@@ -39052,7 +39052,7 @@ h5 {
   font-family: var(--fonts-regular);
   line-height: 1.28571429em;
   margin: calc(2rem - 0.1428571428571429em) 0 1rem;
-  font-weight: bold;
+  font-weight: 500;
   padding: 0;
 }
 
@@ -39388,7 +39388,7 @@ body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:hover {
   padding: 0.92857143em 0.78571429em;
   vertical-align: inherit;
   font-style: none;
-  font-weight: bold;
+  font-weight: 500;
   text-transform: none;
   border-bottom: 1px solid rgba(34, 36, 38, 0.1);
   border-left: none;
@@ -39563,7 +39563,7 @@ body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:hover {
   .ui.table:not(.unstackable) > tr > td:first-child,
   .ui.table:not(.unstackable) > tbody > tr > td:first-child,
   .ui.table:not(.unstackable) > tfoot > tr > td:first-child {
-    font-weight: bold;
+    font-weight: 500;
   }
 
   /* Definition Table */
@@ -39894,7 +39894,7 @@ body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:hover {
 .ui.definition.table > tfoot > tr > td:first-child:not(.ignored),
 .ui.definition.table tr td.definition {
   background: rgba(0, 0, 0, 0.03);
-  font-weight: bold;
+  font-weight: 500;
   color: rgba(0, 0, 0, 0.95);
   text-transform: '';
   box-shadow: '';
index 1a6180d2276adf60aa827323c963d31d1d433011..d1bcfb6e25a2ef9cc6affc068b1f53b5da73b32a 100644 (file)
@@ -64,7 +64,7 @@
     }
 
     dt {
-      font-weight: bolder;
+      font-weight: 500;
       float: left;
       width: 285px;
       clear: left;
index 7a484e42691310d828a092487e91f9f825c5e2c3..293c460fd944901ff95abe3ab0acab22621f3895 100644 (file)
   --color-secondary-alpha-70: #dededeb3;
   --color-secondary-alpha-80: #dededecc;
   --color-secondary-alpha-90: #dededee1;
+  /* colors */
+  --color-red: #db2828;
+  --color-orange: #f2711c;
+  --color-yellow: #fbbd08;
+  --color-olive: #b5cc18;
+  --color-green: #21ba45;
+  --color-teal: #00b5ad;
+  --color-blue: #2185d0;
+  --color-violet: #6435c9;
+  --color-purple: #a333c8;
+  --color-pink: #e03997;
+  --color-brown: #a5673f;
+  --color-grey: #767676;
+  --color-black: #1b1c1d;
+  --color-gold: #a1882b;
+  --color-white: #ffffff;
+  /* target-based colors */
   --color-body: #ffffff;
   --color-text: #212121;
   --color-box-header: #f7f7f7;
 @font-face {
   font-family: "Yu Gothic";
   src: local("Yu Gothic Bold");
-  font-weight: 700;
+  font-weight: 500;
 }
 
 @font-face {
@@ -119,6 +136,11 @@ samp {
   font-family: var(--fonts-monospace);
 }
 
+b,
+strong {
+  font-weight: 500;
+}
+
 body {
   background-color: var(--color-body);
   overflow-y: auto;
@@ -415,10 +437,10 @@ a:hover,
 
   .text {
     &.red {
-      color: #d95c5c !important;
+      color: var(--color-red) !important;
 
       a {
-        color: #d95c5c !important;
+        color: var(--color-red) !important;
 
         &:hover {
           color: #e67777 !important;
@@ -447,7 +469,7 @@ a:hover,
     }
 
     &.grey {
-      color: #767676 !important;
+      color: var(--color-grey) !important;
 
       a {
         color: #444444 !important;
@@ -459,27 +481,27 @@ a:hover,
     }
 
     &.light.grey {
-      color: #888888 !important;
+      color: var(--color-grey) !important;
     }
 
     &.green {
-      color: #6cc644 !important;
+      color: var(--color-green) !important;
     }
 
     &.purple {
-      color: #6e5494 !important;
+      color: var(--color-purple) !important;
     }
 
     &.yellow {
-      color: #fbbd08 !important;
+      color: var(--color-yellow) !important;
     }
 
     &.orange {
-      color: #f2711c !important;
+      color: var(--color-orange) !important;
     }
 
     &.gold {
-      color: #a1882b !important;
+      color: var(--color-gold) !important;
     }
 
     &.left {
@@ -499,7 +521,7 @@ a:hover,
     }
 
     &.bold {
-      font-weight: bold;
+      font-weight: 500;
     }
 
     &.italic {
@@ -534,7 +556,7 @@ a:hover,
   }
 
   &.bottom.attached.message {
-    font-weight: bold;
+    font-weight: 500;
     text-align: left;
     color: black;
 
@@ -544,7 +566,7 @@ a:hover,
 
     & > span,
     .pull-right > span {
-      color: #21ba45;
+      color: var(--color-green);
     }
   }
 
@@ -556,22 +578,22 @@ a:hover,
   .error {
     &.header {
       background-color: #ffe8e6 !important;
-      border-color: #db2828;
+      border-color: var(--color-red);
     }
 
     &.segment {
-      border-color: #db2828;
+      border-color: var(--color-red);
     }
   }
 
   .warning {
     &.header {
       background-color: #f9edbe !important;
-      border-color: #efc16b;
+      border-color: var(--color-yellow);
     }
 
     &.segment {
-      border-color: #efc16b;
+      border-color: var(--color-yellow);
     }
   }
 
@@ -652,7 +674,7 @@ a:hover,
 
   .background {
     &.red {
-      background-color: #d95c5c !important;
+      background-color: var(--color-red) !important;
     }
 
     &.blue {
@@ -664,31 +686,31 @@ a:hover,
     }
 
     &.grey {
-      background-color: #767676 !important;
+      background-color: var(--color-grey) !important;
     }
 
     &.light.grey {
-      background-color: #888888 !important;
+      background-color: var(--color-grey) !important;
     }
 
     &.green {
-      background-color: #6cc644 !important;
+      background-color: var(--color-green) !important;
     }
 
     &.purple {
-      background-color: #6e5494 !important;
+      background-color: var(--color-purple) !important;
     }
 
     &.yellow {
-      background-color: #fbbf09 !important;
+      background-color: var(--color-yellow) !important;
     }
 
     &.orange {
-      background-color: #f2711c !important;
+      background-color: var(--color-orange) !important;
     }
 
     &.gold {
-      background-color: #a1882b !important;
+      background-color: var(--color-gold) !important;
     }
   }
 
@@ -707,7 +729,7 @@ a:hover,
   .border {
     border: 1px solid;
     &.red {
-      border-color: #d95c5c !important;
+      border-color: var(--color-red) !important;
     }
 
     &.blue {
@@ -719,31 +741,31 @@ a:hover,
     }
 
     &.grey {
-      border-color: #767676 !important;
+      border-color: var(--color-grey) !important;
     }
 
     &.light.grey {
-      border-color: #888888 !important;
+      border-color: var(--color-grey) !important;
     }
 
     &.green {
-      border-color: #6cc644 !important;
+      border-color: var(--color-green) !important;
     }
 
     &.purple {
-      border-color: #6e5494 !important;
+      border-color: var(--color-purple) !important;
     }
 
     &.yellow {
-      border-color: #fbbd08 !important;
+      border-color: var(--color-yellow) !important;
     }
 
     &.orange {
-      border-color: #f2711c !important;
+      border-color: var(--color-orange) !important;
     }
 
     &.gold {
-      border-color: #a1882b !important;
+      border-color: var(--color-gold) !important;
     }
   }
 
@@ -804,7 +826,7 @@ a:hover,
 
 .scrolling.menu {
   .item.selected {
-    font-weight: 700 !important;
+    font-weight: 500 !important;
   }
 }
 
@@ -1056,7 +1078,7 @@ i.icon.centerlock {
   span {
     &.bottom-line {
       &::after {
-        border-bottom: 1px solid #eaecef;
+        border-bottom: 1px solid var(--color-secondary);
       }
     }
 
@@ -1171,7 +1193,7 @@ i.icon.centerlock {
 .lines-code,
 .lines-commit {
   .bottom-line {
-    border-bottom: 1px solid #eaecef;
+    border-bottom: 1px solid var(--color-secondary);
   }
 }
 .code-view {
@@ -1268,13 +1290,13 @@ i.icon.centerlock {
 
 .svg {
   span.green & {
-    color: #21ba45;
+    color: var(--color-green);
   }
   span.red & {
-    color: #db2828;
+    color: var(--color-red);
   }
   span.purple & {
-    color: #a333c8;
+    color: var(--color-purple);
   }
 }
 
index 11de7b86ba543cf0dd3ce492afe32a47677111e7..28a795784d6ca0a51f4a145ce0ba0c513ea53571 100644 (file)
 /* GenericStrong */
 
 .chroma .gs {
-  font-weight: bold;
+  font-weight: 500;
 }
 /* GenericSubheading */
 
index f2dd145f552e15fb74b8caf03f134b1c4ffdb124..d798f2bed5ffc1c7cf792374571c3f3f6a4f240a 100644 (file)
@@ -61,7 +61,7 @@
     }
 
     .right.stackable.menu > .item.active {
-      color: #d9453d;
+      color: var(--color-red);
     }
   }
 
index 139df3022b19d6dfe98fda51f88c95625a625a17..707c8732799de8e236185144cae5d214e0d6657e 100644 (file)
@@ -25,7 +25,7 @@
     }
 
     .svg {
-      color: #5aa509;
+      color: var(--color-green);
       height: 40px;
       width: 50px;
       vertical-align: bottom;
@@ -45,7 +45,7 @@
   }
 
   a {
-    color: #5aa509;
+    color: var(--color-green);
   }
 }
 
index 868fe5c146b07b20bdfa0618841ae14cd3dbac6f..7a29630575ddab34546a66b6e7329b82d213b0f0 100644 (file)
@@ -26,7 +26,7 @@
   }
 
   .absent {
-    color: #cc0000;
+    color: var(--color-red);
   }
 
   .anchor {
@@ -77,7 +77,7 @@
   h6 {
     margin-top: 1em;
     margin-bottom: 16px;
-    font-weight: bold;
+    font-weight: 500;
     line-height: 1.4;
 
     &:first-of-type {
     margin-top: 16px;
     font-size: 1em;
     font-style: italic;
-    font-weight: bold;
+    font-weight: 500;
   }
 
   dl dd {
   }
 
   table th {
-    font-weight: bold;
+    font-weight: 500;
   }
 
   table th,
   }
 
   .csv-data th {
-    font-weight: bold;
+    font-weight: 500;
     background: #f8f8f8;
     border-top: 0;
   }
index 11b53a4cf115e893866257d83342ffd2f01bfa6e..a22190b9300fd3d8f5bc053ff7bee2190e19150e 100644 (file)
       .item {
         margin-left: 0;
         margin-right: 0;
-        border-bottom: 1px solid #eeeeee;
+        border-bottom: 1px solid var(--color-secondary);
 
         .ui.avatar {
           width: 48px;
         padding: 10px 15px;
 
         &:not(:last-child) {
-          border-bottom: 1px solid #eeeeee;
+          border-bottom: 1px solid var(--color-secondary);
         }
       }
     }
         line-height: 32px;
 
         &:not(:last-child) {
-          border-bottom: 1px solid #dddddd;
+          border-bottom: 1px solid var(--color-secondary);
         }
 
         .button {
         margin-right: -14px;
         margin-left: -14px !important;
         padding: 10px;
-        border-bottom: 1px solid #e1e4e8;
+        border-bottom: 1px solid var(--color-secondary);
         border-top: none;
 
         a {
index 662a057715cac75bf4600aea3435995dc2074686..27624d57687f5f3dc18b9c01a140cb495e6bb596 100644 (file)
           }
 
           .btn-octicon:hover {
-            color: #4078c0;
+            color: var(--color-primary);
           }
 
           .btn-octicon-danger:hover {
         }
 
         .badge {
-          width: 32px;
-          height: 32px;
+          width: 34px;
+          height: 34px;
           background-color: var(--color-timeline);
-          border: 2px solid var(--color-timeline);
           border-radius: 50%;
           display: flex;
           float: left;
-          margin-left: -32px;
+          margin-left: -34px;
           margin-right: 8px;
           color: #666;
           align-items: center;
             height: 22px;
             padding: 3px;
 
-            &.octicon-circle-slash {
-              color: #bd2c00;
-            }
-
-            &.octicon-dot-fill {
-              color: #6cc644;
-            }
-
             &.octicon-comment {
               margin-top: 2px;
             }
         }
 
         .author {
-          font-weight: 700;
+          font-weight: 500;
         }
 
         .comment-form-reply .footer {
           }
 
           > .bottom.segment {
-            background: #f3f4f5;
+            background: var(--color-box-body);
 
             .ui.images::after {
               clear: both;
       margin-right: -14px;
       margin-left: -14px;
       padding: 10px;
-      border-bottom: 1px solid #e1e4e8;
+      border-bottom: 1px solid var(--color-secondary);
       border-top: none;
 
       a {
         color: #000000;
 
         &:hover {
-          color: #4078c0;
+          color: var(--color-primary);
         }
       }
 
         }
 
         .overdue {
-          color: red;
+          color: var(--color-red);
         }
       }
 
         max-width: 90px;
 
         &:last-child {
-          border-left: 1px solid #b4b4b4;
+          border-left: 1px solid var(--color-secondary);
         }
       }
 
       flex: 0 0 auto;
 
       .bar {
-        background-color: #bd2c00;
+        background-color: var(--color-red);
         height: 12px;
         width: 40px;
         display: inline-block;
         vertical-align: text-top;
 
         .add {
-          background-color: #55a532;
+          background-color: var(--color-green);
           height: 12px;
         }
       }
       margin-right: 15px;
 
       .del {
-        color: red;
+        color: var(--color-red);
       }
       .add {
-        color: green;
+        color: var(--color-green);
       }
     }
   }
 
   &.release {
     #release-list {
-      border-top: 1px solid #dddddd;
+      border-top: 1px solid var(--color-secondary);
       margin-top: 20px;
       padding-top: 15px;
 
         }
 
         .detail {
-          border-left: 2px solid #dddddd;
+          border-left: 2px solid var(--color-secondary);
 
           .author {
             img {
       .item {
         padding-top: 10px;
         padding-bottom: 10px;
-        border-bottom: 1px solid #dddddd;
+        border-bottom: 1px solid var(--color-secondary);
 
         .ui.avatar {
           float: left;
           line-height: 2em;
 
           &:not(:last-child) {
-            border-bottom: 1px solid #dddddd;
+            border-bottom: 1px solid var(--color-secondary);
           }
         }
       }
     .title {
       color: #444444;
       font-size: 15px;
-      font-weight: bold;
+      font-weight: 500;
       margin: 0 6px;
 
       &:hover {
       }
 
       .overdue {
-        color: red;
+        color: var(--color-red);
       }
     }
   }
 
 .ui.form {
   .dropzone {
-    border: 2px dashed #0087f5;
+    border: 2px dashed var(--color-secondary);
+    background: none;
     box-shadow: none !important;
     padding: 0;
     min-height: 5rem;
   .list {
     > .item {
       .green:not(.ui.button) {
-        color: #21ba45;
+        color: var(--color-green);
       }
 
       &:not(:first-child) {
index df6da056c877ca261625c25acea34760f49a32d7..65e36432a31f6ade2207aa65bc1b24dcfeca6c17 100644 (file)
@@ -82,7 +82,7 @@
   }
 
   .footer {
-    border-top: 1px solid #f1f1f1;
+    border-top: 1px solid var(--color-secondary);
     padding: 10px 0;
 
     .markdown-info {
index adac4d28b2942fe706797c759274bc047d7428b1..cfa2e5ded69b3cafbb8d43555f58d3c17923bde9 100644 (file)
@@ -7,7 +7,7 @@
 
 .tribute-container ul {
   margin-top: 0 !important;
-  background: #ffffff !important;
+  background: var(--color-body) !important;
 }
 
 .tribute-container li {
@@ -22,7 +22,7 @@
 
 .tribute-container li.highlight,
 .tribute-container li:hover {
-  background: #2185d0 !important;
+  background: var(--color-primary) !important;
   color: #ffffff !important;
 }
 
index 4af96bfd3dbac14ef51f9c4cb6f12bb4c41eaa04..9fa319deb643cce948a7691a7a52bcd5c073ce49 100644 (file)
@@ -11,7 +11,7 @@
       }
 
       .header {
-        font-weight: 700;
+        font-weight: 500;
         font-size: 1.3rem;
         margin-top: -.2rem;
         line-height: 1.3rem;
       font-size: 2em;
 
       &.green {
-        color: #21ba45;
+        color: var(--color-green);
       }
 
       &.red {
-        color: #d01919;
+        color: var(--color-red);
       }
 
       &.purple {
-        color: #a333c8;
+        color: var(--color-purple);
       }
 
       &.blue {
-        color: #2185d0;
+        color: var(--color-blue);
       }
     }
 
index 3aa46a500f32501a586da2f0d4be065bee2cb03b..3c11e0593e2ade16ad79bde1ab8ca321991a817e 100644 (file)
@@ -15,7 +15,6 @@
 
   .total-contributions {
     text-align: left;
-    font-weight: 500;
     margin-top: 0;
   }
 }
index 7721e97d7df05e405cd62605a61963828ccf6531..d50aea0264194a46b1b1fdb94efd48d407f06822 100644 (file)
 .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; }
 
+.bg-red { background: var(--color-red) !important; }
+.bg-orange { background: var(--color-orange) !important; }
+.bg-yellow { background: var(--color-yellow) !important; }
+.bg-olive { background: var(--color-olive) !important; }
+.bg-green { background: var(--color-green) !important; }
+.bg-teal { background: var(--color-teal) !important; }
+.bg-blue { background: var(--color-blue) !important; }
+.bg-violet { background: var(--color-violet) !important; }
+.bg-purple { background: var(--color-purple) !important; }
+.bg-pink { background: var(--color-pink) !important; }
+.bg-brown { background: var(--color-brown) !important; }
+.bg-grey { background: var(--color-grey) !important; }
+.bg-gold { background: var(--color-gold) !important; }
+
+.text-white { color: var(--color-white) !important; }
+
 .m-0 { margin: 0 !important; }
 .m-1 { margin: .125rem !important; }
 .m-2 { margin: .25rem !important; }
index 638d5262d13455b67d23c670c09b03f176b179e7..781a15ee8ec8290c7d22cad3143c0fa4ff332f6a 100644 (file)
   --color-secondary-alpha-70: #454a57b3;
   --color-secondary-alpha-80: #454a57cc;
   --color-secondary-alpha-90: #454a57e1;
+  /* colors */
+  --color-red: #db2828;
+  --color-orange: #f2711c;
+  --color-yellow: #fbbd08;
+  --color-olive: #b5cc18;
+  --color-green: #21ba45;
+  --color-teal: #00b5ad;
+  --color-blue: #2185d0;
+  --color-violet: #6435c9;
+  --color-purple: #a333c8;
+  --color-pink: #e03997;
+  --color-brown: #a5673f;
+  --color-grey: #767676;
+  --color-black: #1b1c1d;
+  --color-gold: #a1882b;
+  --color-white: #ffffff;
+  /* target-based colors */
   --color-body: #383c4a;
   --color-box-header: #454a57;
   --color-box-body: #353945;
   --color-text: #b6bac5;
-  --color-timeline: #454a57;
+  --color-timeline: #4a505c;
   --color-input-text: #dcdcdc;
   --color-input-background: #2e323e;
   --color-input-border: #454a57;
 /* GenericStrong */
 
 .chroma .gs {
-  font-weight: bold;
+  font-weight: 500;
 }
 /* GenericSubheading */
 
   background: #6a737d;
 }
 
-.repository.branches .commit-divergence .bar-group:last-child {
-  border-color: #6a737d;
-}
-
 .ui.horizontal.segments > .segment {
   background-color: #383c4a;
 }
@@ -532,10 +545,6 @@ body {
   color: #a0cc75;
 }
 
-.repository.release #release-list {
-  border-top-color: var(--color-secondary);
-}
-
 .repository .milestone.list > .item .operate > a {
   color: #87ab63;
 }
@@ -624,6 +633,17 @@ footer {
   color: #dbdbdb;
 }
 
+.ui.labels a.label:hover,
+a.ui.label:hover {
+  background: #454b5a;
+  color: #dbdbdb;
+}
+
+.ui.basic.labels a.label:hover,
+a.ui.basic.label:hover {
+  background: var(--color-body);
+}
+
 .ui.red.label,
 .ui.red.labels .label {
   background-color: #7d3434 !important;
@@ -1017,10 +1037,6 @@ a.ui.basic.green.label:hover {
 }
 
 .repository.view.issue .comment-list .comment .content {
-  > .bottom.segment {
-    background: #353945;
-  }
-
   .header {
     color: #dbdbdb;
     background-color: var(--color-secondary);
@@ -1044,14 +1060,6 @@ a.ui.basic.green.label:hover {
   }
 }
 
-.repository.new.issue .comment.form .content::after {
-  border-right-color: #353945;
-}
-
-.repository.new.issue .comment.form .content::before {
-  border-right-color: #353945;
-}
-
 .repository.view.issue .comment-list .timeline-item .badge {
   color: #ccc;
 }
@@ -1337,13 +1345,8 @@ td.blob-hunk {
   box-shadow: 0 0 0 1px rgba(121, 71, 66, .5) inset, 0 0 0 0 transparent;
 }
 
-.ui.form .dropzone {
-  border: 1px dashed var(--color-secondary);
-  background-color: #2e323e;
-
-  .dz-button {
-    color: rgba(158, 158, 158, .8);
-  }
+.ui.form .dropzone .dz-button {
+  color: rgba(158, 158, 158, .8);
 }
 
 .ui.form .dropzone:hover .dz-button {
@@ -1380,11 +1383,6 @@ td.blob-hunk {
   background: #2e323e !important;
 }
 
-.bottom-line,
-.bottom-line::after {
-  border-color: #4e525e !important;
-}
-
 .lines-num {
   color: var(--color-secondary-dark-6) !important;
   border-color: var(--color-secondary) !important;
@@ -1500,11 +1498,6 @@ a.blob-excerpt:hover {
   border-bottom: 1px dashed var(--color-secondary);
 }
 
-.ui.text.yellow,
-.yellow.icon.icon.icon {
-  color: #e4ac07 !important;
-}
-
 .repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(1),
 .repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(2),
 .repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(3),
@@ -1531,15 +1524,6 @@ a.blob-excerpt:hover {
   border-color: #634343 !important;
 }
 
-.repository .labelspage .item,
-.organization.settings .labelspage .item,
-.organization.teams .repositories .item:not(:last-child),
-.organization.teams .members .item:not(:last-child),
-.organization.teams .detail .item:not(:last-child),
-.organization.members .list .item {
-  border-bottom-color: var(--color-secondary);
-}
-
 .repository .labelspage .item a,
 .organization.settings .labelspage .item a {
   color: #6a737d;
@@ -1621,13 +1605,8 @@ a.blob-excerpt:hover {
     border: 0;
   }
 
-  .footer {
-    border-top-color: var(--color-secondary);
-
-    .markdown-info {
-      color: inherit;
-    }
-
+  .footer .markdown-info {
+    color: inherit;
   }
 }
 
@@ -1790,10 +1769,6 @@ footer .container .links > * {
   color: var(--color-secondary-dark-6);
 }
 
-.repository.release #release-list > li .detail {
-  border-left-color: var(--color-secondary);
-}
-
 .repository.release #release-list > li .detail .dot {
   background-color: #505667;
   border-color: #383c4a;
@@ -1807,15 +1782,6 @@ footer .container .links > * {
   box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .6);
 }
 
-.tribute-container ul {
-  background: #2d303b !important;
-}
-
-.tribute-container li.highlight,
-.tribute-container li:hover {
-  background: #728e5e !important;
-}
-
 .repository .repo-header .ui.huge.breadcrumb.repo-title .repo-header-icon .avatar {
   color: #2a2e3a;
 }