kallithea Changeset - 350f4730e2a3

Changeset - 350f4730e2a3

Parent rev.

Child rev.

[Not reviewed]

default

0 5 0

domruf - 8 years ago 2017-10-25 22:53:27
dominikruf@gmail.com

less: use color variables

Using variables makes it much easier to change them later or for user to
override them.

Mainly increased use of @kallithea-theme-main-color and other colors ... and
introducing diff background colors.

5 files changed with 20 insertions and 17 deletions:

kallithea/public/less/kallithea-diff.less

kallithea/public/less/kallithea-select2.less

kallithea/public/less/kallithea-tags.less

kallithea/public/less/kallithea-variables.less

kallithea/public/less/style.less

0 comments (0 inline, 0 general)

kallithea/public/less/kallithea-diff.less

➞

Show inline comments

 /* bootstrap progress bar has margin-bottom we don't want that in files list */
 .cs_files .progress {
   margin-bottom: 0;
+}
 /* progress bars should be aligned right */
 .cs_files .changes {
   float: right;
-  color: #577632;
+  color: @kallithea-theme-main-color;
+}
 /* colors for changes */
 .cs_files .changes .added {
   color: inherit;
-  background-color: #BBFFBB;
+  background-color: @add-bg-color;
   float: left;
   text-align: center;
   font-size: 9px;
   padding: 2px 0px 2px 0px;
+}
 .cs_files .changes .deleted {
-  background-color: #FF8888;
+  background-color: @delete-bg-color;
   float: left;
   text-align: center;
   font-size: 9px;
   padding: 2px 0px 2px 0px;
+}
 /* binary
 NEW_FILENODE = 1
 DEL_FILENODE = 2
 MOD_FILENODE = 3
 RENAMED_FILENODE = 4
 CHMOD_FILENODE = 5
 BIN_FILENODE = 6
 */
 .changes .bin {
-  background-color: #BBFFBB;
+  background-color: @add-bg-color;
   float: left;
   text-align: center;
   font-size: 9px;
   padding: 2px 0px 2px 0px;
+}
 /* added binary */
 .changes .bin.bin1 {
-  background-color: #BBFFBB;
+  background-color: @add-bg-color;
+}
 /* deleted binary*/
 .changes .bin.bin2 {
-  background-color: #FF8888;
+  background-color: @delete-bg-color;
+}
 /* mod binary*/
 .changes .bin.bin3 {
-  background-color: #DDDDDD;
+  background-color: @change-bg-color;
+}
 /* rename file*/
 .changes .bin.bin4 {
   background-color: #6D99FF;
+}
 /* chmod file*/
 .changes .bin.bin5 {
   background-color: #6D99FF;
+}
 /* center collapse button */
 .diff-collapse {
   text-align: center;
   margin-bottom: 15px;
+}
 .code-difftable {
   /* the whole line should be colored */
   border-collapse: collapse;
   border-radius: 0px !important;
   width: 100%;
   /* line coloring */
   .context {
-    background: none repeat scroll 0 0 #DDE7EF;
+    background: none repeat scroll 0 0 @highlight-line-color;
     color: #999;
+  }
   .add {
     background: none repeat scroll 0 0 #DDFFDD;
+  }
   .add ins {
     background: none repeat scroll 0 0 #AAFFAA;
     text-decoration: none;
+  }
   .del {
     background: none repeat scroll 0 0 #FFDDDD;
+  }
   .del del {
     background: none repeat scroll 0 0 #FFAAAA;
     text-decoration: none;
+  }
   /* tabs */
   td.code pre u:before {
     content: "\21a6";
     display: inline-block;
     width: 0;
+  }
   /* CR */
   td.code pre u.cr:before {
     content: "\21a4";
     display: inline-block;
+  }
   /* whitespace characters */
   td.code pre u {
     color: rgba(0, 0, 0, 0.3);
+  }
   /* trailing spaces */
   td.code pre i {
     border-style: solid;
     border-width: 0 0 0 1px;
     border-color: rgba(0, 0, 0, 0.3);
+  }
   /** LINE NUMBERS **/
   .lineno {
     padding-left: 2px;
     padding-right: 2px !important;
     width: 30px;
     border-right: 1px solid #CCC !important;
     border-left: 0px solid #CCC !important;
     border-top: 0px solid #CCC !important;
     border-bottom: none !important;
@@ @@ -147,80 +147,80 @@ BIN_FILENODE = 6 @@
   /** CODE **/
   .code {
     display: block;
+  }
   .code pre {
     border: 0;
     padding: 0;
     margin: 0;
     background: none;
     min-height: 17px;
     line-height: 17px;
     white-space: pre-wrap;
     word-break: break-all;
+  }
   /* leading +/- on changed lines */
   .del .code pre:before {
     content: "-";
     color: #800;
+  }
   .add .code pre:before {
     content: "+";
     color: #080;
+  }
   .code pre:before {
     content: " ";
     margin: 0 2px;
+  }
+}
 /* comment bubble */
 .add-bubble {
   position: relative;
   display: none;
   float: left;
   width: 0px;
   height: 0px;
   left: -8px;
   box-sizing: border-box;
+}
 /* comment bubble, only visible when in a commentable diff */
 .commentable-diff tr.line.add:hover td .add-bubble,
 .commentable-diff tr.line.del:hover td .add-bubble,
 .commentable-diff tr.line.unmod:hover td .add-bubble {
   display: block;
   z-index: 1;
+}
 .add-bubble div {
-  background: #577632;
+  background: @kallithea-theme-main-color;
   width: 16px;
   height: 16px;
   cursor: pointer;
   padding: 0 2px 2px 0.5px;
-  border: 1px solid #577632;
+  border: 1px solid @kallithea-theme-main-color;
   border-radius: 3px;
   box-sizing: border-box;
+}
 .add-bubble div:before {
   font-size: 14px;
   color: #ffffff;
   font-family: "kallithea";
   content: '\1f5ea';
+}
 .add-bubble div:hover {
   transform: scale(1.2, 1.2);
+}
 /* file diff icons */
 .icon-diff-modified:before {
   color: #d0b44c;
+}
 .icon-diff-removed:before {
   color: #bd2c00;
+}
 .icon-diff-added:before {
   color: #6cc644;
+}
 .icon-diff-renamed:before {
   color: #677a85;
+}

kallithea/public/less/kallithea-select2.less

➞

Show inline comments

 .branch-switcher,
 .repo-switcher {
   .select2-choice {
     height: 100%;
     padding: 0;
+  }
   .select2-container,
   .select2-choice,
   .select2-choice > span {
     background: transparent !important;
     border: 0 !important;
     box-shadow: none !important;
     color: #FFFFFF !important;
+  }
   .select2-choice .select2-chosen {
     margin-right: 0;
     line-height: @line-height-computed;
+  }
   .select2-arrow {
     display: none !important;
+  }
+}
 .branch-switcher-dropdown.select2-drop.select2-drop-active,
 .repo-switcher-dropdown.select2-drop.select2-drop-active {
   box-shadow: none;
-  background-color: #577632;
+  background-color: @kallithea-theme-main-color;
   border: 1px solid rgba(0, 0, 0, 0.15);
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+}
 .repo-switcher-dropdown.select2-drop.select2-drop-active {
   color: black;
   .select2-result.select2-highlighted {
     color: @navbar-inverse-link-hover-color;
     background-color: @navbar-inverse-link-hover-bg;
+  }
   .select2-result-label {
     color: white;
+  }
+}
 /* fix padding of select2 entries in navbar to match .navbar-nav > li > a */
 .navbar-inverse {
   .navbar-nav {
     > li > .select2-container a {
       padding: @nav-link-padding;
       padding-top:    @navbar-padding-vertical;
       padding-bottom: @navbar-padding-vertical;
+    }
     li.active > .select2-container,
     .select2-container:hover,
     .select2-container:focus,
     .select2-container-active {
       color: @navbar-inverse-link-hover-color;
       background-color: @navbar-inverse-link-hover-bg;
+    }
+  }
+}
 .select2-container {
   /* select2 already has border and padding, remove bootstrap form-control border and padding */
   &.form-control {
     border: 0;
     padding: 0;
+  }
   /* make select2 as big as form-controls */
   .select2-choice {
     height: 100%;
+  }
   .select2-chosen {
     line-height: @input-height-base - 2; /* subtract border width */
+  }
+}
 /* highlight query in user autocomplete search results */

kallithea/public/less/kallithea-tags.less

➞

Show inline comments

 .metatag {
   .label;
   color: #000;
+}
 .metatag[data-tag="dead"] {
   background-color: #E44;
+}
 .metatag[data-tag="stale"] {
   background-color: #EA4;
+}
 .metatag[data-tag="featured"] {
   background-color: #AEA;
+}
 .metatag[data-tag="requires"] {
   background-color: #9CF;
+}
 .metatag[data-tag="recommends"] {
   background-color: #BDF;
+}
 .metatag[data-tag="lang"] {
   background-color: #FAF474;
+}
 .metatag[data-tag="license"] {
   border: solid 1px #9CF;
   background-color: #DEF;
+}
 .metatag[data-tag="see"] {
   border: solid 1px #CBD;
   background-color: #EDF;
+}
 a.metatag[data-tag="license"]:hover {
-  background-color: #577632;
+  background-color: @kallithea-theme-main-color;
   color: #FFF;
   text-decoration: none;
+}
 #perms .perm_tag {
   position: relative;
   top: -2px;
   margin-left: 3px;
   padding: 3px 3px 1px 3px;
   font-size: 10px;
   font-weight: bold;
   text-transform: uppercase;
   white-space: nowrap;
   border-radius: 3px;
   &.admin {
     background-color: #B94A48;
     color: #ffffff;
+  }
   &.write {
       background-color: #DB7525;
       color: #ffffff;
+  }
   &.read {
       background-color: #468847;
       color: #ffffff;
+  }
   &.none {
       background-color: #bfbfbf;
       color: #ffffff;
+  }
+}
 .mergetag {
   padding: 1px 3px 1px 3px;
   background-color: #fca062;
   font-size: 10px;
   color: #ffffff;
   text-transform: uppercase;
   white-space: nowrap;
   border-radius: 3px;
   margin-right: 2px;
+}
 .parent {
   color: #666666;
   clear: both;
+}
 .logtags {
   line-height: 2.2em;
+}
 .phasetag,
 .bumpedtag,
 .divergenttag,
 .extincttag,
 .unstabletag,
 .repotag,
 .branchtag,
 .logtags .tagtag,
 .logtags .booktag {
   margin: 0px 2px;
+}
 .phasetag,
 .bumpedtag,
 .divergenttag,
 .extincttag,
 .unstabletag,
 .repotag,
 .branchtag,
 .tagtag,
 .booktag,
 .spantag {
   padding: 1px 3px 1px 3px;
   font-size: 10px;
-  color: #577632;
+  color: @kallithea-theme-main-color;
   white-space: nowrap;
   border-radius: 4px;
   border: 1px solid #d9e8f8;
+}
 table#changesets .phasetag,
 table#changesets .bumpedtag,
 table#changesets .divergenttag,
 table#changesets .extincttag,
 table#changesets .unstabletag,
 table#changesets .branchtag,
 table#changesets .tagtag,
 table#changesets .booktag {
   margin-right: 0.5em;
+}
 .phasetag,
 .bumpedtag,
 .divergenttag,
 .extincttag,
 .unstabletag,
 .repotag,
 .branchtag,
 .tagtag,
 .booktag {
   float: left;
   display: inline-block;
+}
 .logtags .phasetag,
 .logtags .bumpedtag,
 .logtags .divergenttag,
 .logtags .extincttag,
 .logtags .unstabletag,
 .logtags .branchtag,
 .logtags .tagtag,
 .logtags .booktag,
 .mergetag,
 .merge {
   float: right;
   line-height: 1em;
   margin: 1px 1px !important;
   display: block;
+}
 .repotag {
   border-color: #56A546;
   color: #46A546;
   font-size: 8px;
   text-transform: uppercase;
+}
 #context-bar .repotag,

kallithea/public/less/kallithea-variables.less

➞

Show inline comments

 /* basic variables */
 @kallithea-theme-main-color:        #577632;
 @kallithea-theme-inverse-color:     #FFF;
 /* logo */
 @kallithea-logo-url:                "../images/kallithea-logo.svg";
 @kallithea-logo-width:              140px;
 @kallithea-logo-height:             30px;
 @kallithea-logo-bottom:             4px;
 /* bootstrap override */
 @brand-primary:                     @kallithea-theme-main-color;
 @link-hover-color:                  darken(@kallithea-theme-main-color, 20.0%);
 @btn-default-bg:                    #E7E7E7;
 @font-family-monospace:             Lucida Console, Consolas, Monaco, Inconsolata, Liberation Mono, monospace;
 @navbar-height:                     44px;
 @navbar-padding-vertical:           12px;
 @navbar-inverse-color:              @kallithea-theme-inverse-color;
 @navbar-inverse-bg:                 @kallithea-theme-main-color;
 @navbar-inverse-border:             @kallithea-theme-main-color;
 @navbar-inverse-link-color:         @kallithea-theme-inverse-color;
 @navbar-inverse-link-hover-bg:      tint(@kallithea-theme-main-color, 15.0%);
 @navbar-inverse-link-active-bg:     @navbar-inverse-link-hover-bg;
 @navbar-inverse-toggle-hover-bg:    @navbar-inverse-link-hover-bg;
 @navbar-inverse-toggle-border-color:@kallithea-theme-main-color;
 @nav-pills-active-link-hover-color: @navbar-inverse-color;
 @nav-pills-active-link-hover-bg:    @navbar-inverse-bg;
 @dropdown-link-color:               @navbar-inverse-color;
 @dropdown-bg:                       @navbar-inverse-bg;
 @headings-font-weight:              700;
 /* custom variables */
 @highlight-color:                   #FAFFA6;
 @highlight-line-color:              #DDE7EF;
 @add-bg-color:                      #BBFFBB;
 @change-bg-color:                   #DDDDDD;
 @delete-bg-color:                   #FF8888;

kallithea/public/less/style.less

➞

Show inline comments

@@ @@ -775,97 +775,97 @@ div.form div.buttons { @@
+}
 input.status_change_checkbox,
 input.status_change_radio {
   margin: 0 0 5px 15px;
+}
 @keyframes animated-comment-background {
 % {
     background-position: 0 0;
+  }
 % {
     background-position: 20px 0;
+  }
+}
 .comment-preview.failed .user,
 .comment-preview.failed .panel-body {
   color: #666;
+}
 .comment-preview .comment-submission-status {
   float: right;
+}
 .comment-preview .comment-submission-status .btn-group {
   margin-left: 10px;
+}
 .comment-preview.submitting .panel-body {
   background-image: linear-gradient(-45deg, #FAFAFA, #FAFAFA 25%, #FFF 25%, #FFF 50%, #FAFAFA 50%, #FAFAFA 75%, #FFF 75%, #FFF 100%);
   background-size: 20px 20px;
   animation: animated-comment-background 0.4s linear infinite;
+}
 /****
 PULL REQUESTS
 *****/
 div.pr-details-title.closed {
   color: #555;
   background: #eee;
+}
 div.pr {
   margin: 0px 15px;
   padding: 4px 4px;
+}
 tr.pr-closed td {
   background-color: #eee !important;
   color: #555 !important;
+}
 span.pr-closed-tag {
   margin-bottom: 1px;
   margin-right: 1px;
   padding: 1px 3px;
   font-size: 10px;
-  color: #577632;
+  color: @kallithea-theme-main-color;
   white-space: nowrap;
   border-radius: 4px;
   border: 1px solid #d9e8f8;
   line-height: 1.5em;
+}
 .panel-body .pr-box {
   max-width: 978px;
   margin-right: 15px;
+}
 #s2id_org_ref,
 #s2id_other_ref,
 #s2id_org_repo,
 #s2id_other_repo {
   min-width: 150px;
   margin: 5px;
+}
 #pr-summary > .pr-not-edit {
   min-height: 50px !important;
+}
 #pr-edit-btn {
   margin: 20px 0 0 !important;
   position: absolute;
+}
 /* make 'next iteration' changeset table smaller and scrollable */
 #pr-summary #updaterevs {
   max-height: 200px;
   overflow-y: auto;
   overflow-x: hidden;
+}
 /****
   PERMS
 *****/
 .perm-gravatar-ac {
   vertical-align: middle;
   padding: 2px;
   width: 14px;
   height: 14px;
+}
 /* avoid gaps between the navbar and browser */
 .navbar.mainmenu {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
+}
 .navbar.footer {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
@@ @@ -890,87 +890,87 @@ div.comment:target > .panel { @@
 .btn-image-diff-swap {
   margin: 5px;
+}
 .img-diff {
   max-width: 45%;
   height: auto;
   margin: 5px;
   /* http://lea.verou.me/demos/css3-patterns.html */
   background-image: linear-gradient(45deg, #888 25%, transparent 25%, transparent), linear-gradient(-45deg, #888 25%, transparent 25%, transparent), linear-gradient(45deg, transparent 75%, #888 75%), linear-gradient(-45deg, transparent 75%, #888 75%);
   background-size: 10px 10px;
   background-color: #999;
+}
 .img-preview {
   max-width: 100%;
   height: auto;
   margin: 5px;
+}
 div.comment-prev-next-links div.prev-comment,
 div.comment-prev-next-links div.next-comment {
   display: inline-block;
   min-width: 150px;
   margin: 3px 6px;
+}
 #comments-general-comments div.comment-prev-next-links div.prev-comment,
 #comments-general-comments div.comment-prev-next-links div.next-comment {
   margin-left: 0;
+}
 #content div.panel .changelog-panel > .changelog-heading,
 #content div.panel .changelog-panel > ul.pagination {
   margin-left: 100px;
+}
 /* undo Bootstrap chrome/webkit blue outline on focus in navbar */
 .navbar-inverse .navbar-nav > li > a:focus {
   outline: 0;
+}
 /* use same badge coloring in navbar inverse as in panel-heading */
 .navbar-inverse {
   .badge {
     color: @navbar-inverse-bg;
     background-color: @navbar-inverse-color;
+  }
+}
 /* pygments style */
 div.search-code-body pre .match {
-  background-color: #FAFFA6;
+  background-color: @highlight-color;
+}
 div.search-code-body pre .break {
-  background-color: #DDE7EF;
+  background-color: @highlight-line-color;
   width: 100%;
   color: #747474;
   display: block;
+}
 div.annotatediv {
   margin-left: 2px;
   margin-right: 4px;
+}
 .code-highlight {
   border-left: 1px solid #ccc;
+}
 .code-highlight pre,
 .linenodiv pre {
   padding: 5px 2px 0px 5px;
   margin: 0;
+}
 .code-highlight pre div:target {
   background-color: #FFFFBE !important;
+}
 .linenos a { text-decoration: none; }
 /* Stylesheets for the context bar */
 #quick_login > .pull-right .list-group-item {
-  background-color: #577632;
+  background-color: @kallithea-theme-main-color;
   border: 0;
+}
 #content #context-pages .follow .show-following,
 #content #context-pages .following .show-follow {
   display: none;
+}
 nav.navbar #quick > li > a,
 #context-pages > ul > li > a {
   height: @navbar-height;
+}

0 comments (0 inline, 0 general)