Move less from public/ to web_src/ so that it will not be packe… (#8908)

18 files changed, 6777 insertions, 0 deletions

diff --git a/web_src/less/_admin.less b/web_src/less/_admin.less
new file mode 100644
index 0000000000..0bd685142a
--- /dev/null
+++ b/web_src/less/_admin.less
@@ -0,0 +1,74 @@
+.admin {
+    padding-top: 15px;
+
+    .table.segment {
+        padding: 0;
+        font-size: 13px;
+
+        &:not(.striped) {
+            padding-top: 5px;
+
+            thead {
+                th:last-child {
+                    padding-right: 5px !important;
+                }
+            }
+        }
+
+        th {
+            padding-top: 5px;
+            padding-bottom: 5px;
+        }
+
+        &:not(.select) {
+            th,
+            td {
+                &:first-of-type {
+                    padding-left: 15px !important;
+                }
+            }
+        }
+    }
+
+    .ui.header,
+    .ui.segment {
+        box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
+    }
+
+    &.user {
+        .email {
+            max-width: 200px;
+        }
+    }
+
+    dl.admin-dl-horizontal {
+        padding: 20px;
+        margin: 0;
+
+        dd {
+            margin-left: 275px;
+        }
+
+        dt {
+            font-weight: bolder;
+            float: left;
+            width: 285px;
+            clear: left;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+
+    &.config {
+        #test-mail-btn {
+            margin-left: 5px;
+        }
+    }
+
+    code,
+    pre {
+        white-space: pre-wrap;
+        word-wrap: break-word;
+    }
+}
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
new file mode 100644
index 0000000000..8bf49b1ef9
--- /dev/null
+++ b/web_src/less/_base.less
@@ -0,0 +1,1101 @@
+@font-face {
+    font-family: 'Lato';
+    src: url('../vendor/assets/lato-fonts/lato-regular.eot');
+    src: url('../vendor/assets/lato-fonts/lato-regular.eot?#iefix') format('embedded-opentype'), url('../vendor/assets/lato-fonts/lato-regular.woff2') format('woff2'), url('../vendor/assets/lato-fonts/lato-regular.woff') format('woff'), url('../vendor/assets/lato-fonts/lato-regular.ttf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Lato';
+    src: url('../vendor/assets/lato-fonts/lato-italic.eot');
+    src: url('../vendor/assets/lato-fonts/lato-italic.eot?#iefix') format('embedded-opentype'), url('../vendor/assets/lato-fonts/lato-italic.woff2') format('woff2'), url('../vendor/assets/lato-fonts/lato-italic.woff') format('woff'), url('../vendor/assets/lato-fonts/lato-italic.ttf') format('truetype');
+    font-weight: 400;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Lato';
+    src: url('../vendor/assets/lato-fonts/lato-bold.eot');
+    src: url('../vendor/assets/lato-fonts/lato-bold.eot?#iefix') format('embedded-opentype'), url('../vendor/assets/lato-fonts/lato-bold.woff2') format('woff2'), url('../vendor/assets/lato-fonts/lato-bold.woff') format('woff'), url('../vendor/assets/lato-fonts/lato-bold.ttf') format('truetype');
+    font-weight: 700;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Lato';
+    src: url('../vendor/assets/lato-fonts/lato-bolditalic.eot');
+    src: url('../vendor/assets/lato-fonts/lato-bolditalic.eot?#iefix') format('embedded-opentype'), url('../vendor/assets/lato-fonts/lato-bolditalic.woff2') format('woff2'), url('../vendor/assets/lato-fonts/lato-bolditalic.woff') format('woff'), url('../vendor/assets/lato-fonts/lato-bolditalic.ttf') format('truetype');
+    font-weight: 700;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Yu Gothic';
+    src: local('Yu Gothic Medium');
+    font-weight: 400;
+}
+
+@font-face {
+    font-family: 'Yu Gothic';
+    src: local('Yu Gothic Bold');
+    font-weight: 700;
+}
+
+@default-fonts: -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Helvetica, Arial;
+@monospaced-fonts: 'SF Mono', Consolas, Menlo, 'Liberation Mono', Monaco, 'Lucida Console';
+
+.override-fonts(@fonts) {
+    textarea {
+        font-family: @fonts, sans-serif;
+    }
+
+    .markdown:not(code) {
+        font-family: @fonts, sans-serif;
+    }
+
+    /* We're going to just override the semantic fonts here */
+    h1,
+    h2,
+    h3,
+    h4,
+    h5 {
+        font-family: Lato, @fonts, sans-serif;
+    }
+
+    .home .hero h1,
+    .home .hero h2 {
+        font-family: 'PT Sans Narrow', Lato, @fonts, sans-serif;
+    }
+
+    .ui.accordion .title:not(.ui),
+    .ui.button,
+    .ui.card > .content > .header.ui.card > .content > .header,
+    .ui.category.search > .results .category > .name,
+    .ui.form input:not([type]),
+    .ui.form input[type="date"],
+    .ui.form input[type="datetime-local"],
+    .ui.form input[type="email"],
+    .ui.form input[type="file"],
+    .ui.form input[type="number"],
+    .ui.form input[type="password"],
+    .ui.form input[type="search"],
+    .ui.form input[type="tel"],
+    .ui.form input[type="text"],
+    .ui.form input[type="time"],
+    .ui.form input[type="url"],
+    .ui.header,
+    .ui.items > .item > .content > .header,
+    .ui.list .list > .item .header,
+    .ui.list > .item .header,
+    .ui.menu,
+    .ui.message .header,
+    .ui.modal > .header,
+    .ui.popup > .header,
+    .ui.search > .results .result .title,
+    .ui.search > .results > .message .header,
+    body,
+    .ui.input > input,
+    .ui.input input,
+    .ui.statistics .statistic > .value,
+    .ui.statistic > .value,
+    .ui.statistics .statistic > .label,
+    .ui.statistic > .label,
+    .ui.steps .step .title,
+    .ui.text.container,
+    .ui.language > .menu > .item& {
+        font-family: Lato, @fonts, sans-serif;
+    }
+}
+
+.override-fonts(@default-fonts);
+
+body {
+    background-color: #ffffff;
+    overflow-y: auto;
+    -webkit-font-smoothing: antialiased;
+    display: flex;
+    flex-direction: column;
+}
+
+@ja-fonts: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Source Han Sans JP', 'Noto Sans CJK JP', 'Droid Sans Japanese', 'Meiryo', 'MS PGothic';
+:lang(ja) {
+    .override-fonts(@default-fonts, @ja-fonts;);
+}
+
+@zh-CN-fonts: 'PingFang SC', 'Hiragino Sans GB', 'Source Han Sans CN', 'Source Han Sans SC', 'Noto Sans CJK SC', 'Microsoft YaHei', 'Heiti SC', SimHei;
+:lang(zh-CN) {
+    .override-fonts(@default-fonts, @zh-CN-fonts;);
+}
+
+@zh-TW-fonts: 'PingFang TC', 'Hiragino Sans TC', 'Source Han Sans TW', 'Source Han Sans TC', 'Noto Sans CJK TC', 'Microsoft JhengHei', 'Heiti TC', PMingLiU;
+:lang(zh-TW) {
+    .override-fonts(@default-fonts, @zh-TW-fonts;);
+}
+
+@zh-HK-fonts: 'PingFang HK', 'Hiragino Sans TC', 'Source Han Sans HK', 'Source Han Sans TC', 'Noto Sans CJK TC', 'Microsoft JhengHei', 'Heiti TC', PMingLiU_HKSCS, PMingLiU;
+:lang(zh-HK) {
+    .override-fonts(@default-fonts, @zh-HK-fonts;);
+}
+
+@ko-fonts: 'Apple SD Gothic Neo', 'NanumBarunGothic', 'Malgun Gothic', 'Gulim', 'Dotum', 'Nanum Gothic', 'Source Han Sans KR', 'Noto Sans CJK KR';
+:lang(ko) {
+    .override-fonts(@default-fonts, @ko-fonts;);
+}
+
+img {
+    border-radius: 3px;
+}
+
+table {
+    border-collapse: collapse;
+}
+
+a {
+    cursor: pointer;
+}
+
+.rounded {
+    border-radius: 0.28571429rem !important;
+}
+
+.wrap {
+    word-wrap: break-word;
+    word-break: break-all;
+}
+
+pre,
+code,
+.mono {
+    font: 12px @monospaced-fonts, monospace;
+
+    &.raw {
+        padding: 7px 12px;
+        margin: 10px 0;
+        background-color: #f8f8f8;
+        border: 1px solid #dddddd;
+        border-radius: 3px;
+        font-size: 13px;
+        line-height: 1.5;
+        overflow: auto;
+    }
+
+    &.wrap {
+        white-space: pre-wrap;
+        word-break: break-all;
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+    }
+}
+
+.dont-break-out {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-all;
+    hyphens: auto;
+}
+
+.full.height {
+    flex-grow: 1;
+    padding-bottom: 80px;
+}
+
+.following.bar {
+    z-index: 900;
+    left: 0;
+    margin: 0 !important;
+
+    &.light {
+        background-color: white;
+        border-bottom: 1px solid #dddddd;
+        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.04);
+    }
+
+    .column .menu {
+        margin-top: 0;
+    }
+
+    .top.menu a.item.brand {
+        padding-left: 0;
+    }
+
+    .brand .ui.mini.image {
+        width: 30px;
+    }
+
+    .top.menu a.item:hover,
+    .top.menu .dropdown.item:hover,
+    .top.menu .dropdown.item.active {
+        background-color: transparent;
+    }
+
+    .top.menu a.item:hover {
+        color: rgba(0, 0, 0, 0.45);
+    }
+
+    .top.menu .menu {
+        z-index: 900;
+    }
+
+    .octicon {
+        &.fitted {
+            margin-right: 0;
+        }
+
+        margin-right: 0.75em;
+    }
+
+    .searchbox {
+        background-color: #f4f4f4 !important;
+
+        &:focus {
+            background-color: #e9e9e9 !important;
+        }
+    }
+
+    .text .octicon {
+        width: 16px;
+        text-align: center;
+    }
+
+    #navbar {
+        width: 100vw;
+        min-height: 52px;
+        padding: 0 0.5rem;
+    }
+
+    #navbar .brand {
+        margin: 0;
+    }
+
+    @media only screen and (max-width: 767px) {
+        #navbar:not(.shown) > *:not(:first-child) {
+            display: none;
+        }
+    }
+}
+
+.right.stackable.menu {
+    // responsive fix: this makes sure that the right menu when the page
+    // is on mobile view will have elements stacked on top of each other.
+    // no, stackable won't work on right menus.
+    margin-left: auto;
+    display: flex;
+    align-items: inherit;
+    flex-direction: inherit;
+}
+
+.ui {
+    &.left {
+        float: left;
+    }
+
+    &.right {
+        float: right;
+    }
+
+    &.button,
+    &.menu .item {
+        user-select: auto;
+    }
+
+    &.container {
+        &.fluid {
+            &.padded {
+                padding: 0 10px 0 10px;
+            }
+        }
+    }
+
+    &.form {
+        .ui.button {
+            font-weight: normal;
+        }
+    }
+
+    &.floating.label {
+        z-index: 10;
+    }
+
+    &.transparent.label {
+        background-color: transparent;
+    }
+
+    &.nopadding {
+        padding: 0;
+    }
+
+    &.menu,
+    &.vertical.menu,
+    &.segment {
+        box-shadow: none;
+    }
+
+    /* Overide semantic selector '.ui.menu:not(.vertical) .item > .button' */
+    /* This fixes the commit graph button on the commits page */
+
+    .menu:not(.vertical) .item > .button.compact {
+        padding: 0.58928571em 1.125em;
+    }
+
+    .menu:not(.vertical) .item > .button.small {
+        font-size: 0.92857143rem;
+    }
+
+    &.menu .ui.dropdown.item .menu .item {
+        width: 100%;
+    }
+
+    &.dropdown .menu > .item > .floating.label {
+        z-index: 11;
+    }
+
+    &.dropdown .menu .menu > .item > .floating.label {
+        z-index: 21;
+    }
+
+    .text {
+        &.red {
+            color: #d95c5c !important;
+
+            a {
+                color: #d95c5c !important;
+
+                &:hover {
+                    color: #e67777 !important;
+                }
+            }
+        }
+
+        &.blue {
+            color: #428bca !important;
+
+            a {
+                color: #1155cc !important;
+
+                &:hover {
+                    color: #428bca !important;
+                }
+            }
+        }
+
+        &.black {
+            color: #444444;
+
+            &:hover {
+                color: #000000;
+            }
+        }
+
+        &.grey {
+            color: #767676 !important;
+
+            a {
+                color: #444444 !important;
+
+                &:hover {
+                    color: #000000 !important;
+                }
+            }
+        }
+
+        &.light.grey {
+            color: #888888 !important;
+        }
+
+        &.green {
+            color: #6cc644 !important;
+        }
+
+        &.purple {
+            color: #6e5494 !important;
+        }
+
+        &.yellow {
+            color: #fbbd08 !important;
+        }
+
+        &.gold {
+            color: #a1882b !important;
+        }
+
+        &.left {
+            text-align: left !important;
+        }
+
+        &.right {
+            text-align: right !important;
+        }
+
+        &.small {
+            font-size: 0.75em;
+        }
+
+        &.normal {
+            font-weight: normal;
+        }
+
+        &.bold {
+            font-weight: bold;
+        }
+
+        &.italic {
+            font-style: italic;
+        }
+
+        &.truncate {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            display: inline-block;
+        }
+
+        &.thin {
+            font-weight: normal;
+        }
+
+        &.middle {
+            vertical-align: middle;
+        }
+
+        &.nopadding {
+            padding: 0;
+        }
+
+        &.nomargin {
+            margin: 0;
+        }
+    }
+
+    .message {
+        text-align: center;
+    }
+
+    &.bottom.attached.message {
+        font-weight: bold;
+        text-align: left;
+        color: black;
+
+        .pull-right {
+            color: black;
+        }
+
+        & > span,
+        .pull-right > span {
+            color: #21ba45;
+        }
+    }
+
+    .header > i + .content {
+        padding-left: 0.75rem;
+        vertical-align: middle;
+    }
+
+    .warning {
+        &.header {
+            background-color: #f9edbe !important;
+            border-color: #efc16b;
+        }
+
+        &.segment {
+            border-color: #efc16b;
+        }
+    }
+
+    .info {
+        &.segment {
+            border: 1px solid #c5d5dd;
+
+            &.top {
+                background-color: #e6f1f6 !important;
+
+                h3,
+                h4 {
+                    margin-top: 0;
+                }
+
+                h3:last-child {
+                    margin-top: 4px;
+                }
+
+                > :last-child {
+                    margin-bottom: 0;
+                }
+            }
+        }
+    }
+
+    .normal.header {
+        font-weight: normal;
+    }
+
+    .avatar.image {
+        border-radius: 3px;
+    }
+
+    .form {
+        .fake {
+            display: none !important;
+        }
+
+        .sub.field {
+            margin-left: 25px;
+        }
+    }
+
+    .sha.label {
+        font-family: @monospaced-fonts, monospace;
+        font-size: 13px;
+        padding: 6px 10px 4px 10px;
+        font-weight: normal;
+        margin: 0 6px;
+    }
+
+    .button.truncate {
+        display: inline-block;
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        vertical-align: top;
+        white-space: nowrap;
+        margin-right: 6px;
+    }
+
+    &.status.buttons {
+        .octicon {
+            margin-right: 4px;
+        }
+    }
+
+    &.inline.delete-button {
+        padding: 8px 15px;
+        font-weight: normal;
+    }
+
+    .background {
+        &.red {
+            background-color: #d95c5c !important;
+        }
+
+        &.blue {
+            background-color: #428bca !important;
+        }
+
+        &.black {
+            background-color: #444444;
+        }
+
+        &.grey {
+            background-color: #767676 !important;
+        }
+
+        &.light.grey {
+            background-color: #888888 !important;
+        }
+
+        &.green {
+            background-color: #6cc644 !important;
+        }
+
+        &.purple {
+            background-color: #6e5494 !important;
+        }
+
+        &.yellow {
+            background-color: #fbbf09 !important;
+        }
+
+        &.gold {
+            background-color: #a1882b !important;
+        }
+    }
+
+    .migrate {
+        color: #888888 !important;
+        opacity: 0.5;
+        a {
+            color: #444444 !important;
+
+            &:hover {
+                color: #000000 !important;
+            }
+        }
+    }
+
+    .border {
+        border: 1px solid;
+        &.red {
+            border-color: #d95c5c !important;
+        }
+
+        &.blue {
+            border-color: #428bca !important;
+        }
+
+        &.black {
+            border-color: #444444;
+        }
+
+        &.grey {
+            border-color: #767676 !important;
+        }
+
+        &.light.grey {
+            border-color: #888888 !important;
+        }
+
+        &.green {
+            border-color: #6cc644 !important;
+        }
+
+        &.purple {
+            border-color: #6e5494 !important;
+        }
+
+        &.yellow {
+            border-color: #fbbd08 !important;
+        }
+
+        &.gold {
+            border-color: #a1882b !important;
+        }
+    }
+
+    .branch-tag-choice {
+        line-height: 20px;
+    }
+
+    &.pagination.menu {
+        @media only screen and (max-width: 767px) {
+            .item:not(.active):not(.navigation),
+            .item.navigation span.navigation_label {
+                display: none;
+            }
+        }
+    }
+}
+
+.file-comment {
+    font: 12px @monospaced-fonts, monospace;
+    color: rgba(0, 0, 0, 0.87);
+}
+
+.ui.floating.dropdown {
+    .overflow.menu {
+        .scrolling.menu.items {
+            border-radius: 0 !important;
+            box-shadow: none !important;
+            border-bottom: 1px solid rgba(34, 36, 38, 0.15);
+        }
+    }
+}
+
+.user-menu > .item {
+    width: 100%;
+    border-radius: 0 !important;
+}
+
+.scrolling.menu {
+    .item.selected {
+        font-weight: 700 !important;
+    }
+}
+
+footer {
+    background-color: white;
+    border-top: 1px solid #d6d6d6;
+    width: 100%;
+    flex-basis: 40px;
+    color: #888888;
+
+    .container {
+        width: 100vw !important;
+        padding: 0 0.5rem;
+
+        .fa {
+            width: 16px;
+            text-align: center;
+            color: #428bca;
+        }
+
+        .links > * {
+            border-left: 1px solid #d6d6d6;
+            padding-left: 8px;
+            margin-left: 5px;
+
+            &:first-child {
+                border-left: 0;
+            }
+        }
+    }
+
+    .ui.language .menu {
+        max-height: 500px;
+        overflow-y: auto;
+        margin-bottom: 7px;
+    }
+
+    .ui {
+        &.left,
+        &.right {
+            line-height: 40px;
+        }
+    }
+}
+
+.hide {
+    display: none;
+
+    &.show-outdated {
+        display: none !important;
+    }
+
+    &.hide-outdated {
+        display: none !important;
+    }
+}
+
+.center {
+    text-align: center;
+}
+
+.generate-img(16);
+.generate-img(@n, @i: 1) when (@i =< @n) {
+    .img-@{i} {
+        width: (2px * @i) !important;
+        height: (2px * @i) !important;
+    }
+
+    .generate-img(@n, (@i + 1));
+}
+
+// Conditional display
+@media only screen and (min-width: 768px) {
+    .mobile-only,
+    .ui.button.mobile-only {
+        display: none;
+    }
+
+    // has the same behaviour of sr-only, hiding the content for
+    // non-screenreaders, but is shown on mobile devices.
+    .sr-mobile-only {
+        .sr-only();
+    }
+}
+
+@media only screen and (max-width: 767px) {
+    .not-mobile {
+        display: none;
+    }
+}
+
+// Accessibility
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+}
+
+.sr-only-focusable:active,
+.sr-only-focusable:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+}
+
+@media only screen and (max-width: 991px) and (min-width: 768px) {
+    .ui.container {
+        width: 95%;
+    }
+}
+
+/* Overrides some styles of the Highlight.js plugin */
+.hljs {
+    background: inherit !important;
+    padding: 0 !important;
+}
+
+.ui.menu.new-menu {
+    justify-content: center !important;
+    padding-top: 15px !important;
+    margin-top: -15px !important;
+    margin-bottom: 15px !important;
+    background-color: #fafafa !important;
+    border-width: 1px !important;
+}
+
+@media only screen and (max-width: 1200px) {
+    .ui.menu.new-menu {
+        overflow-x: auto !important;
+        justify-content: left !important;
+        padding-bottom: 5px;
+    }
+
+    .ui.menu.new-menu::-webkit-scrollbar {
+        height: 8px;
+        display: none;
+    }
+
+    .ui.menu.new-menu:hover::-webkit-scrollbar {
+        display: block;
+    }
+
+    .ui.menu.new-menu::-webkit-scrollbar-track {
+        background: rgba(0, 0, 0, 0.01);
+    }
+
+    .ui.menu.new-menu::-webkit-scrollbar-thumb {
+        background: rgba(0, 0, 0, 0.2);
+    }
+
+    .ui.menu.new-menu:after {
+        position: absolute;
+        margin-top: -15px;
+        display: block;
+        background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 100%);
+        content: ' ';
+        right: 0;
+        height: 53px;
+        z-index: 1000;
+        width: 60px;
+        clear: none;
+        visibility: visible;
+    }
+
+    .ui.menu.new-menu a.item:last-child {
+        padding-right: 30px !important;
+    }
+}
+
+[v-cloak] {
+    display: none !important;
+}
+
+.repos-search {
+    padding-bottom: 0 !important;
+}
+
+.repos-filter {
+    margin-top: 0 !important;
+    border-bottom-width: 0 !important;
+    margin-bottom: 2px !important;
+}
+
+#user-heatmap {
+    width: 107%; // Fixes newest contributions not showing
+    text-align: center;
+
+    svg:not(:root) {
+        overflow: inherit;
+        padding: 0 !important;
+    }
+
+    @media only screen and (max-width: 1200px) {
+        & {
+            display: none;
+        }
+    }
+
+    .total-contributions {
+        text-align: left;
+        font-weight: 500;
+        margin-top: 0;
+    }
+}
+
+.heatmap-color-0 {
+    background-color: #f4f4f4;
+}
+
+.heatmap-color-1 {
+    background-color: #d8efbf;
+}
+
+.heatmap-color-2 {
+    background-color: #9fdb81;
+}
+
+.heatmap-color-3 {
+    background-color: #66c74b;
+}
+
+.heatmap-color-4 {
+    background-color: #609926;
+}
+
+.heatmap-color-5 {
+    background-color: #025900;
+}
+
+.archived-icon {
+    color: lighten(#000000, 70%) !important;
+}
+
+.oauth2-authorize-application-box {
+    margin-top: 3em !important;
+}
+
+/* Tab color tweaks */
+.ui.tabular.menu .item {
+    color: rgba(0, 0, 0, 0.5);
+}
+
+.ui.tabular.menu .item:hover {
+    color: rgba(0, 0, 0, 0.8);
+}
+
+.ui.tabular.menu .item.active {
+    color: rgba(0, 0, 0, 0.9);
+}
+
+/* multiple radio or checkboxes as inline element */
+.inline-grouped-list {
+    display: inline-block;
+    vertical-align: top;
+
+    > .ui {
+        display: block;
+        margin-top: 5px;
+        margin-bottom: 10px;
+
+        &:first-child {
+            margin-top: 1px;
+        }
+    }
+}
+
+i.icons .icon:first-child {
+    margin-right: 0;
+}
+
+i.icon.centerlock {
+    top: 1.5em;
+}
+
+.ui.label > .detail .icons {
+    margin-right: 0.25em;
+}
+
+.ui.label > .detail .icons .icon {
+    margin-right: 0;
+}
+
+.lines-num {
+    vertical-align: top;
+    text-align: right !important;
+    color: #999999;
+    background: #f5f5f5;
+    width: 1%;
+    user-select: none;
+
+    span {
+        &:before {
+            content: attr(data-line-number);
+            line-height: 20px !important;
+            padding: 0 10px;
+            cursor: pointer;
+            display: block;
+        }
+    }
+}
+
+.lines-num,
+.lines-code {
+    padding: 0 !important;
+
+    pre,
+    ol,
+    .hljs {
+        background-color: white;
+        margin: 0;
+        padding: 0 !important;
+
+        li {
+            display: block;
+            width: 100%;
+
+            &:before {
+                content: ' ';
+            }
+        }
+    }
+}
+
+.lines-commit {
+    vertical-align: top;
+    color: #999999;
+    padding: 0 !important;
+    background: #f5f5f5;
+    width: 1%;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+
+    .blame-info {
+        width: 350px;
+        max-width: 350px;
+        display: block;
+        user-select: none;
+        padding: 0 0 0 10px;
+
+        .blame-data {
+            display: flex;
+            font-family: @default-fonts;
+
+            .blame-message {
+                flex-grow: 2;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                line-height: 20px;
+            }
+
+            .blame-time,
+            .blame-avatar {
+                flex-shrink: 0;
+            }
+        }
+    }
+
+    .ui.avatar.image {
+        height: 18px;
+        width: 18px;
+    }
+}
+
+.lines-num,
+.lines-code,
+.lines-commit {
+    .bottom-line {
+        border-bottom: 1px solid #eaecef;
+    }
+}
+
+.code-view {
+    overflow: auto;
+    overflow-x: auto;
+    overflow-y: hidden;
+
+    *:not(.fa):not(.octicon):not(.icon) {
+        font-size: 12px;
+        font-family: @monospaced-fonts, monospace;
+        line-height: 20px;
+    }
+
+    table {
+        width: 100%;
+    }
+
+    .active {
+        background: #fff866;
+    }
+}
diff --git a/web_src/less/_dashboard.less b/web_src/less/_dashboard.less
new file mode 100644
index 0000000000..8749fb8802
--- /dev/null
+++ b/web_src/less/_dashboard.less
@@ -0,0 +1,192 @@
+.dashboard {
+    padding-top: 15px;
+
+    &.feeds,
+    &.issues {
+        .context.user.menu {
+            z-index: 101;
+            min-width: 200px;
+
+            .ui.header {
+                font-size: 1rem;
+                text-transform: none;
+            }
+        }
+
+        .filter.menu {
+            width: initial;
+
+            .item {
+                text-align: left;
+
+                .text {
+                    height: 16px;
+                    vertical-align: middle;
+
+                    &.truncate {
+                        width: 85%;
+                    }
+                }
+
+                .floating.label {
+                    top: 7px;
+                    left: 90%;
+                    width: 15%;
+
+                    @media only screen and (max-width: 768px) {
+                        top: 10px;
+                        left: auto;
+                        width: auto;
+                        right: 13px;
+                    }
+                }
+            }
+
+            // Sort
+            .jump.item {
+                margin: 1px;
+                padding-right: 0;
+            }
+
+            .menu {
+                max-height: 300px;
+                overflow-x: auto;
+                right: 0 !important;
+                left: auto !important;
+            }
+
+            @media only screen and (max-width: 768px) {
+                width: 100%;
+            }
+        }
+
+        .right.stackable.menu > .item.active {
+            color: #d9453d;
+        }
+    }
+
+    /* Accomodate for Semantic's 1px hacks on .attached elements */
+
+    .dashboard-repos {
+        margin: 0 1px;
+    }
+
+    .dashboard-navbar {
+        width: 100vw;
+        padding: 0 0.5rem;
+    }
+}
+
+&.feeds {
+    .news {
+        > .ui.grid {
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        .ui.avatar {
+            margin-top: 13px;
+        }
+
+        .time-since {
+            font-size: 13px;
+        }
+
+        .issue.title {
+            width: 80%;
+        }
+
+        .push.news .content ul {
+            font-size: 13px;
+            list-style: none;
+            padding-left: 10px;
+
+            img {
+                margin-bottom: -2px;
+            }
+
+            .text.truncate {
+                width: 80%;
+                margin-bottom: -5px;
+            }
+        }
+
+        .commit-id {
+            font-family: @monospaced-fonts, monospace;
+        }
+
+        code {
+            padding: 1px;
+            font-size: 85%;
+            background-color: rgba(0, 0, 0, 0.04);
+            border-radius: 3px;
+            word-break: break-all;
+        }
+    }
+
+    .list {
+        .header {
+            .ui.label {
+                margin-top: -4px;
+                padding: 4px 5px;
+                font-weight: normal;
+            }
+
+            .plus.icon {
+                margin-top: 5px;
+            }
+        }
+
+        ul {
+            list-style: none;
+            margin: 0;
+            padding-left: 0;
+
+            li {
+                &:not(:last-child) {
+                    border-bottom: 1px solid #ebebeb;
+                }
+
+                &.private {
+                    background-color: #fcf8e9;
+                }
+
+                a {
+                    padding: 6px 1.2em;
+                    display: block;
+
+                    .octicon {
+                        color: #888888;
+
+                        &.rear {
+                            font-size: 15px;
+                        }
+                    }
+
+                    .star-num {
+                        font-size: 12px;
+                    }
+                }
+            }
+        }
+
+        .repo-owner-name-list {
+            .item-name {
+                max-width: 70%;
+                margin-bottom: -4px;
+            }
+        }
+
+        #collaborative-repo-list {
+            .owner-and-repo {
+                max-width: 80%;
+                margin-bottom: -5px;
+            }
+
+            .owner-name {
+                max-width: 120px;
+                margin-bottom: -5px;
+            }
+        }
+    }
+}
diff --git a/web_src/less/_editor.less b/web_src/less/_editor.less
new file mode 100644
index 0000000000..453b8b433e
--- /dev/null
+++ b/web_src/less/_editor.less
@@ -0,0 +1,26 @@
+.CodeMirror {
+    font: 14px @monospaced-fonts, monospace;
+
+    &.cm-s-default {
+        border-radius: 3px;
+        padding: 0 !important;
+    }
+
+    .cm-comment {
+        background: inherit !important;
+    }
+}
+
+.repository.file.editor .tab[data-tab="write"] {
+    padding: 0 !important;
+}
+
+.repository.file.editor .tab[data-tab="write"] .editor-toolbar {
+    border: 0 !important;
+}
+
+.repository.file.editor .tab[data-tab="write"] .CodeMirror {
+    border-left: 0;
+    border-right: 0;
+    border-bottom: 0;
+}
diff --git a/web_src/less/_emojify.less b/web_src/less/_emojify.less
new file mode 100644
index 0000000000..4cd9da3f21
--- /dev/null
+++ b/web_src/less/_emojify.less
@@ -0,0 +1,10 @@
+.emoji {

+    width: 1.5em;

+    height: 1.5em;

+    display: inline-block;

+    background-size: contain;

+}

+

+.ui.label .emoji {

+    height: 1.2em !important;

+}

diff --git a/web_src/less/_explore.less b/web_src/less/_explore.less
new file mode 100644
index 0000000000..ad9adc70e0
--- /dev/null
+++ b/web_src/less/_explore.less
@@ -0,0 +1,111 @@
+.explore {
+    padding-top: 15px;
+
+    .navbar {
+        justify-content: center;
+        padding-top: 15px !important;
+        margin-top: -15px !important;
+        margin-bottom: 15px !important;
+        background-color: #fafafa !important;
+        border-width: 1px !important;
+
+        .octicon {
+            width: 16px;
+            text-align: center;
+            margin-right: 5px;
+        }
+    }
+}
+
+.ui.repository.list {
+    .item {
+        padding-bottom: 25px;
+
+        &:not(:first-child) {
+            border-top: 1px solid #eeeeee;
+            padding-top: 25px;
+        }
+
+        .ui.header {
+            font-size: 1.5rem;
+            padding-bottom: 10px;
+
+            .name {
+                word-break: break-all;
+            }
+
+            .metas {
+                color: #888888;
+                font-size: 14px;
+                font-weight: normal;
+
+                span:not(:last-child) {
+                    margin-right: 5px;
+                }
+            }
+        }
+
+        .time {
+            font-size: 12px;
+            color: #808080;
+        }
+
+        .ui.tags {
+            margin-bottom: 1em;
+        }
+
+        .ui.avatar.image {
+            width: 24px;
+            height: 24px;
+        }
+    }
+}
+
+.ui.repository.branches {
+    .info {
+        font-size: 12px;
+        color: #808080;
+        display: flex;
+        white-space: pre;
+        .commit-message {
+            max-width: 72em;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+    .overflow-visible {
+        overflow: visible;
+    }
+}
+
+.ui.user.list {
+    .item {
+        padding-bottom: 25px;
+
+        &:not(:first-child) {
+            border-top: 1px solid #eeeeee;
+            padding-top: 25px;
+        }
+
+        .ui.avatar.image {
+            width: 40px;
+            height: 40px;
+        }
+
+        .description {
+            margin-top: 5px;
+
+            .octicon:not(:first-child) {
+                margin-left: 5px;
+            }
+
+            a {
+                color: #333333;
+
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
+        }
+    }
+}
diff --git a/web_src/less/_form.less b/web_src/less/_form.less
new file mode 100644
index 0000000000..2f37666fb6
--- /dev/null
+++ b/web_src/less/_form.less
@@ -0,0 +1,250 @@
+.form {
+    .help {
+        color: #999999;
+        padding-top: 0.6em;
+        padding-bottom: 0.6em;
+        display: inline-block;
+    }
+}
+
+.ui.attached.header {
+    background: #f0f0f0;
+
+    .right {
+        margin-top: -5px;
+
+        .button {
+            padding: 8px 10px;
+            font-weight: normal;
+        }
+    }
+}
+
+@create-page-form-input-padding: 250px !important;
+#create-page-form {
+    form {
+        margin: auto;
+
+        .ui.message {
+            text-align: center;
+        }
+
+        @media only screen and (min-width: 768px) {
+            width: 800px !important;
+
+            .header {
+                padding-left: @create-page-form-input-padding+30px;
+            }
+
+            .inline.field > label {
+                text-align: right;
+                width: @create-page-form-input-padding;
+                word-wrap: break-word;
+            }
+
+            .help {
+                margin-left: @create-page-form-input-padding+15px;
+            }
+
+            .optional .title {
+                margin-left: @create-page-form-input-padding;
+            }
+
+            input,
+            textarea {
+                width: 50% !important;
+            }
+        }
+
+        @media only screen and (max-width: 767px) {
+            .optional .title {
+                margin-left: 15px;
+            }
+
+            .inline.field > label {
+                display: block;
+            }
+        }
+    }
+}
+
+.signin {
+    .oauth2 {
+        div {
+            display: inline-block;
+
+            p {
+                margin: 10px 5px 0 0;
+                float: left;
+            }
+        }
+
+        a {
+            margin-right: 3px;
+
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+
+        img {
+            width: 32px;
+            height: 32px;
+
+            &.openidConnect {
+                width: auto;
+            }
+        }
+    }
+}
+
+@media only screen and (min-width: 768px) {
+    .g-recaptcha {
+        margin: 0 auto !important;
+        width: 304px;
+        padding-left: 30px;
+    }
+}
+
+@media screen and (max-height: 575px) {
+    #rc-imageselect,
+    .g-recaptcha {
+        transform: scale(0.77);
+        transform-origin: 0 0;
+    }
+}
+
+.user.activate,
+.user.forgot.password,
+.user.reset.password,
+.user.signin,
+.user.signup {
+    @input-padding: 200px;
+    #create-page-form;
+
+    form {
+        width: 700px !important;
+
+        .header {
+            padding-left: 0 !important;
+            text-align: center;
+        }
+
+        .inline.field > label {
+            width: @input-padding;
+        }
+
+        .inline.field > label,
+        input {
+            @media only screen and (max-width: 768px) {
+                width: 100% !important;
+            }
+        }
+
+        input[type=number] {
+            -moz-appearance: textfield;
+        }
+
+        input::-webkit-outer-spin-button,
+        input::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+    }
+}
+
+.repository {
+    &.new.repo,
+    &.new.migrate,
+    &.new.fork {
+        #create-page-form;
+
+        form {
+            .dropdown {
+                .dropdown.icon {
+                    margin-top: -7px !important;
+                    padding-bottom: 5px;
+                }
+
+                .text {
+                    margin-right: 0 !important;
+
+                    i {
+                        margin-right: 0 !important;
+                    }
+                }
+            }
+
+            .header {
+                padding-left: 0 !important;
+                text-align: center;
+            }
+
+            @media only screen and (max-width: 768px) {
+                label,
+                input,
+                .selection.dropdown {
+                    width: 100% !important;
+                }
+
+                .field button,
+                .field a {
+                    margin-bottom: 1em;
+                    width: 100%;
+                }
+            }
+        }
+    }
+
+    &.new.repo {
+        .ui.form {
+            @media only screen and (min-width: 768px) {
+                #auto-init {
+                    margin-left: @create-page-form-input-padding+15px;
+                }
+            }
+
+            .selection.dropdown:not(.owner) {
+                width: 50% !important;
+
+                @media only screen and (max-width: 768px) {
+                    width: 100% !important;
+                }
+            }
+        }
+    }
+}
+
+.new.webhook {
+    form {
+        .help {
+            margin-left: 25px;
+        }
+    }
+
+    .events.fields {
+        .column {
+            padding-left: 40px;
+        }
+    }
+}
+
+.githook {
+    textarea {
+        font-family: @monospaced-fonts, monospace;
+    }
+}
+
+.new.org .ui.form {
+    @media only screen and (max-width: 768px) {
+        .field button,
+        .field a {
+            margin-bottom: 1em;
+            width: 100%;
+        }
+
+        .field input {
+            width: 100% !important;
+        }
+    }
+}
diff --git a/web_src/less/_home.less b/web_src/less/_home.less
new file mode 100644
index 0000000000..53fd76f098
--- /dev/null
+++ b/web_src/less/_home.less
@@ -0,0 +1,64 @@
+.home {
+    .logo {
+        max-width: 220px;
+    }
+
+    .hero {
+        @media only screen and (max-width: 767px) {
+            h1 {
+                font-size: 3.5em;
+            }
+
+            h2 {
+                font-size: 2em;
+            }
+        }
+
+        @media only screen and (min-width: 768px) {
+            h1 {
+                font-size: 5.5em;
+            }
+
+            h2 {
+                font-size: 3em;
+            }
+        }
+
+        .octicon {
+            color: #5aa509;
+            font-size: 40px;
+            width: 50px;
+        }
+
+        &.header {
+            font-size: 20px;
+        }
+    }
+
+    p.large {
+        font-size: 16px;
+    }
+
+    .stackable {
+        padding-top: 30px;
+    }
+
+    a {
+        color: #5aa509;
+    }
+}
+
+.signup {
+    padding-top: 15px;
+}
+
+footer {
+    .ui.container .left,
+    .ui.container .right {
+        @media only screen and (max-width: 880px) {
+            display: block;
+            text-align: center;
+            float: none;
+        }
+    }
+}
diff --git a/web_src/less/_install.less b/web_src/less/_install.less
new file mode 100644
index 0000000000..b38ec87b76
--- /dev/null
+++ b/web_src/less/_install.less
@@ -0,0 +1,38 @@
+.install {
+    padding-top: 45px;
+
+    form {
+        @input-padding: 320px !important;
+
+        label {
+            text-align: right;
+            width: @input-padding;
+        }
+
+        input {
+            width: 35% !important;
+        }
+
+        .field {
+            text-align: left;
+
+            .help {
+                margin-left: @input-padding+15px;
+            }
+
+            &.optional .title {
+                margin-left: 38%;
+            }
+        }
+    }
+
+    .ui {
+        .checkbox {
+            margin-left: 40% !important;
+
+            label {
+                width: auto !important;
+            }
+        }
+    }
+}
diff --git a/web_src/less/_markdown.less b/web_src/less/_markdown.less
new file mode 100644
index 0000000000..8c7b1125c9
--- /dev/null
+++ b/web_src/less/_markdown.less
@@ -0,0 +1,529 @@
+.markdown:not(code) {
+    overflow: hidden;
+    font-size: 16px;
+    line-height: 1.6 !important;
+    word-wrap: break-word;
+
+    &.ui.segment {
+        padding: 3em;
+    }
+
+    &.file-view {
+        padding: 2em 2em 2em !important;
+    }
+
+    > *:first-child {
+        margin-top: 0 !important;
+    }
+
+    > *:last-child {
+        margin-bottom: 0 !important;
+    }
+
+    a:not([href]) {
+        color: inherit;
+        text-decoration: none;
+    }
+
+    .absent {
+        color: #cc0000;
+    }
+
+    .anchor {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: block;
+        padding-right: 6px;
+        padding-left: 30px;
+        margin-left: -30px;
+    }
+
+    .anchor:focus {
+        outline: none;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        position: relative;
+        margin-top: 1em;
+        margin-bottom: 16px;
+        font-weight: bold;
+        line-height: 1.4;
+
+        &:first-of-type {
+            margin-top: 0 !important;
+        }
+    }
+
+    h1 .octicon-link,
+    h2 .octicon-link,
+    h3 .octicon-link,
+    h4 .octicon-link,
+    h5 .octicon-link,
+    h6 .octicon-link {
+        display: none;
+        color: #000000;
+        vertical-align: middle;
+    }
+
+    h1:hover .anchor,
+    h2:hover .anchor,
+    h3:hover .anchor,
+    h4:hover .anchor,
+    h5:hover .anchor,
+    h6:hover .anchor {
+        padding-left: 8px;
+        margin-left: -30px;
+        text-decoration: none;
+    }
+
+    h1:hover .anchor .octicon-link,
+    h2:hover .anchor .octicon-link,
+    h3:hover .anchor .octicon-link,
+    h4:hover .anchor .octicon-link,
+    h5:hover .anchor .octicon-link,
+    h6:hover .anchor .octicon-link {
+        display: inline-block;
+    }
+
+    h1 tt,
+    h1 code,
+    h2 tt,
+    h2 code,
+    h3 tt,
+    h3 code,
+    h4 tt,
+    h4 code,
+    h5 tt,
+    h5 code,
+    h6 tt,
+    h6 code {
+        font-size: inherit;
+    }
+
+    h1 {
+        padding-bottom: 0.3em;
+        font-size: 2.25em;
+        line-height: 1.2;
+        border-bottom: 1px solid #eeeeee;
+    }
+
+    h1 .anchor {
+        line-height: 1;
+    }
+
+    h2 {
+        padding-bottom: 0.3em;
+        font-size: 1.75em;
+        line-height: 1.225;
+        border-bottom: 1px solid #eeeeee;
+    }
+
+    h2 .anchor {
+        line-height: 1;
+    }
+
+    h3 {
+        font-size: 1.5em;
+        line-height: 1.43;
+    }
+
+    h3 .anchor {
+        line-height: 1.2;
+    }
+
+    h4 {
+        font-size: 1.25em;
+    }
+
+    h4 .anchor {
+        line-height: 1.2;
+    }
+
+    h5 {
+        font-size: 1em;
+    }
+
+    h5 .anchor {
+        line-height: 1.1;
+    }
+
+    h6 {
+        font-size: 1em;
+        color: #777777;
+    }
+
+    h6 .anchor {
+        line-height: 1.1;
+    }
+
+    p,
+    blockquote,
+    ul,
+    ol,
+    dl,
+    table,
+    pre {
+        margin-top: 0;
+        margin-bottom: 16px;
+    }
+
+    hr {
+        height: 4px;
+        padding: 0;
+        margin: 16px 0;
+        background-color: #e7e7e7;
+        border: 0;
+    }
+
+    ul,
+    ol {
+        padding-left: 2em;
+    }
+
+    ul.no-list,
+    ol.no-list {
+        padding: 0;
+        list-style-type: none;
+    }
+
+    ul ul,
+    ul ol,
+    ol ol,
+    ol ul {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+
+    ol ol,
+    ul ol {
+        list-style-type: lower-roman;
+    }
+
+    li > p {
+        margin-top: 0;
+    }
+
+    dl {
+        padding: 0;
+    }
+
+    dl dt {
+        padding: 0;
+        margin-top: 16px;
+        font-size: 1em;
+        font-style: italic;
+        font-weight: bold;
+    }
+
+    dl dd {
+        padding: 0 16px;
+        margin-bottom: 16px;
+    }
+
+    blockquote {
+        margin-left: 0;
+        padding: 0 15px;
+        color: #777777;
+        border-left: 4px solid #dddddd;
+    }
+
+    blockquote > :first-child {
+        margin-top: 0;
+    }
+
+    blockquote > :last-child {
+        margin-bottom: 0;
+    }
+
+    table {
+        width: auto;
+        overflow: auto;
+        word-break: keep-all;
+        display: block;
+    }
+
+    table th {
+        font-weight: bold;
+    }
+
+    table th,
+    table td {
+        padding: 6px 13px !important;
+        border: 1px solid #dddddd !important;
+    }
+
+    table tr {
+        background-color: #ffffff;
+        border-top: 1px solid #cccccc;
+    }
+
+    table tr:nth-child(2n) {
+        background-color: #f8f8f8;
+    }
+
+    img {
+        max-width: 100%;
+        box-sizing: border-box;
+    }
+
+    .emoji {
+        max-width: none;
+    }
+
+    span.frame {
+        display: block;
+        overflow: hidden;
+    }
+
+    span.frame > span {
+        display: block;
+        float: left;
+        width: auto;
+        padding: 7px;
+        margin: 13px 0 0;
+        overflow: hidden;
+        border: 1px solid #dddddd;
+    }
+
+    span.frame span img {
+        display: block;
+        float: left;
+    }
+
+    span.frame span span {
+        display: block;
+        padding: 5px 0 0;
+        clear: both;
+        color: #333333;
+    }
+
+    span.align-center {
+        display: block;
+        overflow: hidden;
+        clear: both;
+    }
+
+    span.align-center > span {
+        display: block;
+        margin: 13px auto 0;
+        overflow: hidden;
+        text-align: center;
+    }
+
+    span.align-center span img {
+        margin: 0 auto;
+        text-align: center;
+    }
+
+    span.align-right {
+        display: block;
+        overflow: hidden;
+        clear: both;
+    }
+
+    span.align-right > span {
+        display: block;
+        margin: 13px 0 0;
+        overflow: hidden;
+        text-align: right;
+    }
+
+    span.align-right span img {
+        margin: 0;
+        text-align: right;
+    }
+
+    span.float-left {
+        display: block;
+        float: left;
+        margin-right: 13px;
+        overflow: hidden;
+    }
+
+    span.float-left span {
+        margin: 13px 0 0;
+    }
+
+    span.float-right {
+        display: block;
+        float: right;
+        margin-left: 13px;
+        overflow: hidden;
+    }
+
+    span.float-right > span {
+        display: block;
+        margin: 13px auto 0;
+        overflow: hidden;
+        text-align: right;
+    }
+
+    code,
+    tt {
+        padding: 0.2em 0;
+        margin: 0;
+        font-size: 85%;
+        background-color: rgba(0, 0, 0, 0.04);
+        border-radius: 3px;
+    }
+
+    code:before,
+    code:after,
+    tt:before,
+    tt:after {
+        letter-spacing: -0.2em;
+        content: "\00a0";
+    }
+
+    code br,
+    tt br {
+        display: none;
+    }
+
+    del code {
+        text-decoration: inherit;
+    }
+
+    pre > code {
+        padding: 0;
+        margin: 0;
+        font-size: 100%;
+        word-break: normal;
+        white-space: pre;
+        background: transparent;
+        border: 0;
+    }
+
+    .highlight {
+        margin-bottom: 16px;
+    }
+
+    .highlight pre,
+    pre {
+        padding: 16px;
+        overflow: auto;
+        font-size: 85%;
+        line-height: 1.45;
+        background-color: #f7f7f7;
+        border-radius: 3px;
+    }
+
+    .highlight pre {
+        margin-bottom: 0;
+        word-break: normal;
+    }
+
+    pre {
+        word-wrap: normal;
+    }
+
+    pre code,
+    pre tt {
+        display: inline;
+        max-width: initial;
+        padding: 0;
+        margin: 0;
+        overflow: initial;
+        line-height: inherit;
+        word-wrap: normal;
+        background-color: transparent;
+        border: 0;
+    }
+
+    pre code:before,
+    pre code:after,
+    pre tt:before,
+    pre tt:after {
+        content: normal;
+    }
+
+    kbd {
+        display: inline-block;
+        padding: 3px 5px;
+        font-size: 11px;
+        line-height: 10px;
+        color: #555555;
+        vertical-align: middle;
+        background-color: #fcfcfc;
+        border: solid 1px #cccccc;
+        border-bottom-color: #bbbbbb;
+        border-radius: 3px;
+        box-shadow: inset 0 -1px 0 #bbbbbb;
+    }
+
+    input[type="checkbox"] {
+        vertical-align: middle !important;
+    }
+
+    .csv-data td,
+    .csv-data th {
+        padding: 5px;
+        overflow: hidden;
+        font-size: 12px;
+        line-height: 1;
+        text-align: left;
+        white-space: nowrap;
+    }
+
+    .csv-data .blob-num {
+        padding: 10px 8px 9px;
+        text-align: right;
+        background: #ffffff;
+        border: 0;
+    }
+
+    .csv-data tr {
+        border-top: 0;
+    }
+
+    .csv-data th {
+        font-weight: bold;
+        background: #f8f8f8;
+        border-top: 0;
+    }
+
+    .ui.list .list,
+    ol.ui.list ol,
+    ul.ui.list ul {
+        padding-left: 2em;
+    }
+}
+
+.repository.wiki.revisions {
+    .ui.container > .ui.stackable.grid {
+        -ms-flex-direction: row-reverse;
+        flex-direction: row-reverse;
+
+        > .header {
+            margin-top: 0;
+
+            .sub.header {
+                padding-left: 52px;
+                word-break: break-word;
+            }
+        }
+    }
+}
+
+.file-revisions-btn {
+    display: block;
+    float: left;
+    margin-bottom: 2px !important;
+    padding: 11px !important;
+    margin-right: 10px !important;
+
+    i {
+        -webkit-touch-callout: none;
+        -webkit-user-select: none;
+        -khtml-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+    }
+}
diff --git a/web_src/less/_organization.less b/web_src/less/_organization.less
new file mode 100644
index 0000000000..6071604cbc
--- /dev/null
+++ b/web_src/less/_organization.less
@@ -0,0 +1,171 @@
+.organization {
+    padding-top: 15px;
+
+    .head {
+        .ui.header {
+            .text {
+                vertical-align: middle;
+                font-size: 1.6rem;
+                margin-left: 15px;
+            }
+
+            .ui.right {
+                margin-top: 5px;
+            }
+        }
+    }
+
+    &.new.org {
+        #create-page-form;
+
+        form {
+            .header {
+                padding-left: 0 !important;
+                text-align: center;
+            }
+        }
+    }
+
+    &.options {
+        input {
+            min-width: 300px;
+        }
+    }
+
+    &.profile {
+        #org-avatar {
+            width: 100px;
+            height: 100px;
+            margin-right: 15px;
+        }
+
+        #org-info {
+            .ui.header {
+                font-size: 36px;
+                margin-bottom: 0;
+            }
+
+            .desc {
+                font-size: 16px;
+                margin-bottom: 10px;
+            }
+
+            .meta {
+                .item {
+                    display: inline-block;
+                    margin-right: 10px;
+
+                    .icon {
+                        margin-right: 5px;
+                    }
+                }
+            }
+        }
+
+        .ui.top.header {
+            .ui.right {
+                margin-top: 0;
+            }
+        }
+
+        .teams {
+            .item {
+                padding: 10px 15px;
+            }
+        }
+    }
+
+    &.teams,
+    &.profile {
+        .members {
+            .ui.avatar {
+                width: 48px;
+                height: 48px;
+                margin-right: 5px;
+            }
+        }
+    }
+
+    &.invite {
+        #invite-box {
+            margin: 50px auto auto;
+            width: 500px !important;
+
+            #search-user-box {
+                input {
+                    margin-left: 0;
+                    width: 300px;
+                }
+            }
+
+            .ui.button {
+                margin-left: 5px;
+                margin-top: -3px;
+            }
+        }
+    }
+
+    &.members {
+        .list {
+            .item {
+                margin-left: 0;
+                margin-right: 0;
+                border-bottom: 1px solid #eeeeee;
+
+                .ui.avatar {
+                    width: 48px;
+                    height: 48px;
+                }
+
+                .meta {
+                    line-height: 24px;
+                }
+            }
+        }
+    }
+
+    &.teams {
+        .detail {
+            .item {
+                padding: 10px 15px;
+
+                &:not(:last-child) {
+                    border-bottom: 1px solid #eeeeee;
+                }
+            }
+        }
+
+        .repositories,
+        .members {
+            .item {
+                padding: 10px 20px;
+                line-height: 32px;
+
+                &:not(:last-child) {
+                    border-bottom: 1px solid #dddddd;
+                }
+
+                .button {
+                    padding: 9px 10px;
+                }
+            }
+        }
+
+        #add-repo-form,
+        #repo-multiple-form,
+        #add-member-form {
+            input {
+                margin-left: 0;
+            }
+
+            .ui.button {
+                margin-left: 5px;
+                margin-top: -3px;
+            }
+        }
+
+        #repo-top-segment {
+            height: 60px;
+        }
+    }
+}
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
new file mode 100644
index 0000000000..84d59bbe91
--- /dev/null
+++ b/web_src/less/_repository.less
@@ -0,0 +1,2466 @@
+.repository {
+    @mega-octicon-width: 30px;
+
+    padding-top: 15px;
+
+    .repo-header {
+        .ui.compact.menu {
+            margin-left: 1rem;
+        }
+
+        .ui.header {
+            margin-top: 0;
+        }
+
+        .mega-octicon {
+            width: @mega-octicon-width;
+            font-size: 30px;
+        }
+
+        .ui.huge.breadcrumb {
+            font-weight: 400;
+            font-size: 1.5rem;
+
+            i.mega-octicon {
+                position: relative;
+                top: 5px;
+            }
+
+            i.octicon-lock {
+                margin-left: 5px;
+            }
+        }
+
+        .fork-flag {
+            margin-left: @mega-octicon-width + 6px;
+            margin-top: 3px;
+            display: block;
+            font-size: 12px;
+            white-space: nowrap;
+        }
+
+        .octicon.octicon-repo-forked {
+            margin-top: -1px;
+            font-size: 15px;
+        }
+
+        .button {
+            margin-top: 2px;
+            margin-bottom: 2px;
+        }
+    }
+
+    .tabs {
+        .navbar {
+            justify-content: initial;
+        }
+    }
+
+    .navbar {
+        display: flex;
+        justify-content: space-between;
+
+        .ui.label {
+            margin-left: 7px;
+            padding: 3px 5px;
+        }
+    }
+
+    .owner.dropdown {
+        min-width: 40% !important;
+    }
+
+    #file-buttons {
+        /* The reason for the !important is that Semantic itself has
+        margin-left: 0 !important on right items on mobile, which is mostly
+        to make sure elements which on menus would otherwise be on the right
+        align correctly with other elements when stacked.
+        Unfortunately, this brings some weird alignment on this particular
+        element, so we need to override it. */
+        margin-left: auto !important;
+        font-weight: normal;
+
+        .ui.button {
+            padding: 8px 10px;
+            font-weight: normal;
+        }
+    }
+
+    .metas {
+        .menu {
+            max-height: 300px;
+            overflow-x: auto;
+        }
+
+        .ui.list {
+            .hide {
+                display: none !important;
+            }
+
+            .item {
+                padding: 0;
+            }
+
+            .label.color {
+                padding: 0 8px;
+                margin-right: 5px;
+            }
+
+            a {
+                margin: 2px 0;
+
+                .text {
+                    color: #444444;
+
+                    &:hover {
+                        color: #000000;
+                    }
+                }
+            }
+        }
+
+        #deadlineForm input {
+            width: 12.8rem;
+            border-radius: 4px 0 0 4px;
+            border-right: 0;
+            white-space: nowrap;
+        }
+    }
+
+    .header-wrapper {
+        background-color: #fafafa;
+        margin-top: -15px;
+        padding-top: 15px;
+
+        .ui.tabs.divider {
+            border-bottom: 0;
+        }
+
+        .ui.tabular .octicon {
+            margin-right: 5px;
+        }
+    }
+
+    .filter.menu {
+        .label.color {
+            border-radius: 3px;
+            margin-left: 15px;
+            padding: 0 8px;
+        }
+
+        .octicon {
+            float: left;
+            margin: 5px -7px 0 -5px;
+            width: 16px;
+        }
+
+        &.labels .octicon {
+            margin: -2px -7px 0 -5px;
+        }
+
+        &.labels {
+            .label-filter .menu .info {
+                display: inline-block;
+                padding: 9px 7px 7px 7px;
+                text-align: center;
+                border-bottom: 1px solid #cccccc;
+                font-size: 12px;
+
+                code {
+                    border: 1px solid #cccccc;
+                    border-radius: 3px;
+                    padding: 3px 2px 1px 2px;
+                    font-size: 11px;
+                }
+            }
+        }
+
+        .text {
+            margin-left: 0.9em;
+        }
+
+        .menu {
+            max-height: 300px;
+            overflow-x: auto;
+            right: 0 !important;
+            left: auto !important;
+        }
+
+        .dropdown.item {
+            margin: 1px;
+            padding-right: 0;
+        }
+    }
+
+    .select-label {
+        .item {
+            max-width: 250px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .desc {
+            padding-left: 16px;
+        }
+    }
+
+    .ui.tabs {
+        &.container {
+            margin-top: 14px;
+            margin-bottom: 0;
+
+            .ui.menu {
+                border-bottom: 0;
+            }
+        }
+
+        &.divider {
+            margin-top: 0;
+            margin-bottom: 20px;
+        }
+    }
+
+    #clone-panel {
+        width: 350px;
+
+        @media only screen and (max-width: 768px) {
+            width: 100%;
+        }
+
+        input {
+            border-radius: 0;
+            padding: 5px 10px;
+            width: 50%;
+        }
+
+        .clone.button {
+            font-size: 13px;
+            padding: 0 5px;
+
+            &:first-child {
+                border-radius: 0.28571429rem 0 0 0.28571429rem;
+            }
+        }
+
+        .icon.button {
+            padding: 0 10px;
+        }
+
+        .dropdown .menu {
+            right: 0 !important;
+            left: auto !important;
+        }
+    }
+
+    &.file.list {
+        .repo-description {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        #repo-desc {
+            font-size: 1.2em;
+        }
+
+        .choose.reference {
+            .header .icon {
+                font-size: 1.4em;
+            }
+        }
+
+        .repo-path {
+
+            .section,
+            .divider {
+                display: inline;
+            }
+        }
+
+        #file-buttons {
+            font-weight: normal;
+
+            .ui.button {
+                padding: 8px 10px;
+                font-weight: normal;
+            }
+
+            .ui.tiny.blue.buttons {
+                @media only screen and (max-width: 768px) {
+                    width: 100%;
+                }
+            }
+        }
+
+        #repo-files-table {
+            thead {
+                th {
+                    padding-top: 8px;
+                    padding-bottom: 5px;
+                    font-weight: normal;
+                }
+
+                .ui.avatar {
+                    margin-bottom: 5px;
+                }
+
+                .commit-summary a {
+                    text-decoration: underline;
+                    text-decoration-style: dashed;
+
+                    &:hover {
+                        text-decoration-style: solid;
+                    }
+
+                    &.default-link {
+                        text-decoration: none;
+
+                        &:hover {
+                            text-decoration: underline;
+                            text-decoration-style: solid;
+                        }
+                    }
+                }
+            }
+
+            tbody {
+                .octicon {
+                    margin-left: 3px;
+                    margin-right: 5px;
+                    color: #777777;
+
+                    &.octicon-mail-reply {
+                        margin-right: 10px;
+                    }
+
+                    &.octicon-file-directory,
+                    &.octicon-file-submodule,
+                    &.octicon-file-symlink-directory {
+                        color: #1e70bf;
+                    }
+                }
+            }
+
+            td {
+                padding-top: 8px;
+                padding-bottom: 8px;
+                overflow: initial;
+
+                &.name {
+                    max-width: 150px;
+                }
+
+                &.message {
+                    max-width: 400px;
+                }
+
+                &.age {
+                    width: 120px;
+                }
+
+                .truncate {
+                    display: inline-block;
+                    max-width: 100%;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    vertical-align: top;
+                    white-space: nowrap;
+                }
+            }
+
+            td.message .isSigned {
+                cursor: default;
+            }
+
+            tr:hover {
+                background-color: #ffffee;
+            }
+
+            .jumpable-path {
+                color: #888888;
+            }
+        }
+
+        .non-diff-file-content {
+            .header {
+                .icon {
+                    font-size: 1em;
+                }
+
+                .file-actions {
+                    margin-bottom: -5px;
+
+                    .btn-octicon {
+                        display: inline-block;
+                        padding: 5px;
+                        margin-left: 5px;
+                        line-height: 1;
+                        color: #767676;
+                        vertical-align: middle;
+                        background: transparent;
+                        border: 0;
+                        outline: none;
+                    }
+
+                    .btn-octicon:hover {
+                        color: #4078c0;
+                    }
+
+                    .btn-octicon-danger:hover {
+                        color: #bd2c00;
+                    }
+
+                    .btn-octicon.disabled {
+                        color: #bbbbbb;
+                        cursor: default;
+                    }
+
+                    #delete-file-form {
+                        display: inline-block;
+                    }
+                }
+            }
+
+            .view-raw {
+                padding: 5px;
+
+                * {
+                    max-width: 100%;
+                }
+
+                img {
+                    padding: 5px 5px 0 5px;
+                }
+            }
+
+            .plain-text {
+                padding: 1em 2em 1em 2em;
+
+                pre {
+                    word-break: break-word;
+                    white-space: pre-wrap;
+                }
+            }
+
+            .csv {
+                overflow-x: auto;
+                padding: 0 !important;
+            }
+
+            pre {
+                overflow: auto;
+            }
+        }
+
+        .sidebar {
+            padding-left: 0;
+
+            .octicon {
+                width: 16px;
+            }
+        }
+    }
+
+    &.file.editor {
+        .treepath {
+            width: 100%;
+
+            input {
+                vertical-align: middle;
+                box-shadow: rgba(0, 0, 0, 0.0745098) 0 1px 2px inset;
+                width: inherit;
+                padding: 7px 8px;
+                margin-right: 5px;
+            }
+        }
+
+        .tabular.menu {
+            .octicon {
+                margin-right: 5px;
+            }
+        }
+
+        .commit-form-wrapper {
+            padding-left: 64px;
+
+            .commit-avatar {
+                float: left;
+                margin-left: -64px;
+                width: 3em;
+                height: auto;
+            }
+
+            .commit-form {
+                position: relative;
+                padding: 15px;
+                margin-bottom: 10px;
+                border: 1px solid #dddddd;
+                border-radius: 3px;
+                #avatar-arrow;
+
+                &:after {
+                    border-right-color: #ffffff;
+                }
+
+                .quick-pull-choice {
+                    .branch-name {
+                        display: inline-block;
+                        padding: 3px 6px;
+                        font: 12px @monospaced-fonts, monospace;
+                        color: rgba(0, 0, 0, 0.65);
+                        background-color: rgba(209, 227, 237, 0.45);
+                        border-radius: 3px;
+                    }
+
+                    .new-branch-name-input {
+                        position: relative;
+                        margin-left: 25px;
+
+                        input {
+                            width: 240px !important;
+                            padding-left: 26px !important;
+                        }
+                    }
+
+                    .octicon-git-branch {
+                        position: absolute;
+                        top: 9px;
+                        left: 10px;
+                        color: #b0c4ce;
+                    }
+                }
+            }
+        }
+    }
+
+    &.options {
+        #interval {
+            width: 100px !important;
+            min-width: 100px;
+        }
+
+        .danger {
+            .item {
+                padding: 20px 15px;
+            }
+
+            .ui.divider {
+                margin: 0;
+            }
+        }
+    }
+
+    @comment-avatar-width: 3em;
+
+    .comment textarea {
+        max-height: none !important;
+    }
+
+    &.new.issue {
+        .comment.form {
+            .comment {
+                .avatar {
+                    width: @comment-avatar-width;
+                }
+            }
+
+            .content {
+                margin-left: 4em;
+                #avatar-arrow;
+
+                &:after {
+                    border-right-color: #ffffff;
+                }
+
+                .markdown {
+                    font-size: 14px;
+                }
+            }
+
+            .metas {
+                min-width: 220px;
+
+                .filter.menu {
+                    max-height: 300px;
+                    overflow-x: auto;
+                }
+            }
+
+        }
+    }
+
+    &.view.issue {
+        .title {
+            padding-bottom: 0 !important;
+
+            h1 {
+                font-weight: 300;
+                font-size: 2.3rem;
+                margin-bottom: 5px;
+
+                .ui.input {
+                    font-size: 0.5em;
+                    vertical-align: top;
+                    width: 50%;
+                    min-width: 600px;
+
+                    input {
+                        font-size: 1.5em;
+                        padding: 6px 10px;
+                    }
+                }
+            }
+
+            .index {
+                font-weight: 300;
+                color: #aaaaaa;
+                letter-spacing: -1px;
+            }
+
+            .label {
+                margin-right: 10px;
+            }
+
+            .edit-zone {
+                margin-top: 10px;
+            }
+        }
+
+        .pull-desc {
+            code {
+                color: #0166e6;
+            }
+        }
+
+        .pull {
+            &.tabular.menu {
+                margin-bottom: 10px;
+
+                .octicon {
+                    margin-right: 5px;
+                }
+            }
+
+            &.tab.segment {
+                border: 0;
+                padding: 10px 0 0;
+                box-shadow: none;
+                background-color: inherit;
+            }
+
+            .merge.box {
+                .avatar {
+                    margin-left: 10px;
+                    margin-top: 10px;
+                }
+            }
+
+            .review-item {
+
+                .avatar,
+                .type-icon {
+                    float: none;
+                    display: inline-block;
+                    text-align: center;
+                    vertical-align: middle;
+
+                    .octicon {
+                        width: 23px;
+                        font-size: 23px;
+                        margin-top: 0.45em;
+                    }
+                }
+
+                .text {
+                    margin: 0.3em 0 0.5em 0.5em;
+                }
+
+                .type-icon {
+                    float: right;
+                    margin-right: 1em;
+                }
+
+                .divider {
+                    margin: 0.5rem 0;
+                }
+
+                .review-content {
+                    padding: 1em 0 1em 3.8em;
+                }
+            }
+        }
+
+        .comment-list {
+            &:not(.prevent-before-timeline):before {
+                display: block;
+                content: "";
+                position: absolute;
+                margin-top: 12px;
+                margin-bottom: 14px;
+                top: 0;
+                bottom: 0;
+                left: 96px;
+                width: 2px;
+                background-color: #f3f3f3;
+                z-index: -1;
+            }
+
+            .timeline-line {
+                position: relative;
+                display: block;
+                width: 100%;
+                max-width: 100%;
+
+                &:before {
+                    display: block;
+                    content: "";
+                    position: absolute;
+                    margin-top: 12px;
+                    margin-bottom: 14px;
+                    top: 0;
+                    bottom: 0;
+                    left: 82px;
+                    width: 2px;
+                    background-color: #f3f3f3;
+                    z-index: -1;
+                }
+            }
+
+            .comment {
+                .avatar {
+                    width: @comment-avatar-width;
+                }
+
+                .tag {
+                    color: #767676;
+                    margin-top: 3px;
+                    padding: 2px 5px;
+                    font-size: 12px;
+                    border: 1px solid rgba(0, 0, 0, 0.1);
+                    border-radius: 3px;
+                    &.pending {
+                        color: black;
+                        background-color: #fffbb2;
+                        margin-left: 5px;
+                    }
+                }
+
+                .actions {
+                    .item {
+                        float: left;
+
+                        &.tag {
+                            margin-right: 5px;
+                        }
+
+                        &.action {
+                            margin-top: 6px;
+                            margin-left: 10px;
+                        }
+                    }
+                }
+
+                .content {
+                    margin-left: 4em;
+
+                    > .header {
+                        #avatar-arrow;
+                        font-weight: normal;
+                        padding: auto 15px;
+                        position: relative;
+                        color: #767676;
+                        background-color: #f7f7f7;
+                        border-bottom: 1px solid #eeeeee;
+                        border-top-left-radius: 3px;
+                        border-top-right-radius: 3px;
+
+                        .text {
+                            max-width: 78%;
+                            padding-top: 10px;
+                            padding-bottom: 10px;
+                        }
+                    }
+
+                    > .merge-section {
+                        border-top: 1px solid #d4d4d5;
+                        background-color: #f7f7f7;
+                    }
+
+                    .markdown {
+                        font-size: 14px;
+                    }
+
+                    .no-content {
+                        color: #767676;
+                        font-style: italic;
+                    }
+
+                    > .bottom.segment {
+                        background: #f3f4f5;
+
+                        .ui.images::after {
+                            clear: both;
+                            content: ' ';
+                            display: block;
+                        }
+
+                        a {
+                            display: block;
+                            float: left;
+                            margin: 5px;
+                            padding: 5px;
+                            height: 150px;
+                            border: solid 1px #eeeeee;
+                            border-radius: 3px;
+                            max-width: 150px;
+                            background-color: #ffffff;
+
+                            &:before {
+                                content: ' ';
+                                display: inline-block;
+                                height: 100%;
+                                vertical-align: middle;
+                            }
+                        }
+
+                        .ui.image {
+                            max-height: 100%;
+                            width: auto;
+                            margin: 0;
+                            vertical-align: middle;
+                        }
+
+                        span.ui.image {
+                            font-size: 128px;
+                            color: #000000;
+                        }
+
+                        span.ui.image:hover {
+                            color: #000000;
+                        }
+                    }
+                }
+
+                .ui.form {
+                    .field:first-child {
+                        clear: none;
+                    }
+
+                    .tab.segment {
+                        border: 0;
+                        padding: 10px 0 0;
+                    }
+
+                    textarea {
+                        height: 200px;
+                        font-family: @monospaced-fonts, monospace;
+                    }
+                }
+
+                .edit.buttons {
+                    margin-top: 10px;
+                }
+            }
+
+            .event {
+                position: relative;
+                margin: 15px 0 15px 79px;
+                padding-left: 25px;
+
+                & > .octicon:not(.issue-symbol) {
+                    text-shadow: -2px 0 #fff, 0 2px #fff, 2px 0 #fff, 0 -2px #fff;
+                }
+
+                & > .octicon.issue-symbol {
+                    font-size: 20px;
+                    margin-left: -35px;
+                    margin-right: -1px;
+                    margin-top: 0 !important;
+                    height: 28px;
+                    width: 28px;
+                    border-radius: 50%;
+                    text-align: center;
+                    line-height: 28px;
+                    background: #eee;
+
+                    &::before {
+                        width: 15px;
+                        display: inline-block;
+                    }
+
+                    &.octicon-key::before {
+                        width: 18px;
+                    }
+
+                    &.octicon-circle-slash::before {
+                        width: 17px;
+                    }
+
+                    &.octicon-comment {
+                        font-size: 21px;
+                        line-height: 33px;
+
+                        &::before {
+                            width: 20px;
+                        }
+                    }
+                }
+
+                .octicon {
+                    width: 30px;
+                    float: left;
+                    text-align: center;
+
+                    &.octicon-circle-slash {
+                        margin-top: 5px;
+                        margin-left: -34.5px;
+                        font-size: 20px;
+                        color: #bd2c00;
+                    }
+
+                    &.octicon-primitive-dot {
+                        margin-top: -1px;
+                        margin-left: -28.5px;
+                        margin-right: -1px;
+                        font-size: 30px;
+                        color: #6cc644;
+                    }
+
+                    &.octicon-bookmark {
+                        margin-top: 2px;
+                        margin-left: -31px;
+                        margin-right: -1px;
+                        font-size: 25px;
+                    }
+
+                    &.octicon-eye {
+                        margin-top: 3px;
+                        margin-left: -36px;
+                        margin-right: 0;
+                        font-size: 22px;
+                    }
+
+                    &.octicon-x {
+                        margin-left: -33px;
+                        font-size: 25px;
+                    }
+                }
+
+                .detail {
+                    font-size: 0.9rem;
+                    margin-top: 5px;
+                    margin-left: 35px;
+
+                    .octicon {
+                        &.octicon-git-commit {
+                            margin-top: 2px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .ui.segment.metas {
+            margin-top: -3px;
+        }
+
+        .ui.participants {
+            img {
+                margin-top: 5px;
+                margin-right: 5px;
+            }
+        }
+
+        .ui.depending {
+            .item.is-closed {
+                .title {
+                    text-decoration: line-through;
+                }
+            }
+        }
+    }
+
+    .comment.form {
+        .ui.comments {
+            margin-top: -12px;
+            max-width: 100%;
+        }
+
+        .content {
+            .field:first-child {
+                clear: none;
+            }
+
+            .form {
+                #avatar-arrow;
+
+                &:after {
+                    border-right-color: #ffffff;
+                }
+            }
+
+            .tab.segment {
+                border: 0;
+                padding: 10px 0 0;
+            }
+
+            textarea {
+                height: 200px;
+                font-family: @monospaced-fonts, monospace;
+            }
+        }
+    }
+
+    .label.list {
+        list-style: none;
+        padding-top: 15px;
+
+        .item {
+            padding-top: 10px;
+            padding-bottom: 10px;
+            border-bottom: 1px dashed #aaaaaa;
+
+            a {
+                font-size: 15px;
+                padding-top: 5px;
+                padding-right: 10px;
+                color: #666666;
+
+                &:hover {
+                    color: #000000;
+                }
+
+                &.open-issues {
+                    margin-right: 30px;
+                }
+            }
+
+            .ui.label {
+                font-size: 1em;
+            }
+        }
+    }
+
+    .milestone.list {
+        list-style: none;
+        padding-top: 15px;
+
+        > .item {
+            padding-top: 10px;
+            padding-bottom: 10px;
+            border-bottom: 1px dashed #aaaaaa;
+
+            > a {
+                padding-top: 5px;
+                padding-right: 10px;
+                color: #000000;
+
+                &:hover {
+                    color: #4078c0;
+                }
+            }
+
+            .ui.progress {
+                width: 40%;
+                padding: 0;
+                border: 0;
+                margin: 0;
+
+                .bar {
+                    height: 20px;
+                }
+            }
+
+            .meta {
+                color: #999999;
+                padding-top: 5px;
+
+                .issue-stats .octicon {
+                    padding-left: 5px;
+                }
+
+                .overdue {
+                    color: red;
+                }
+            }
+
+            .operate {
+                margin-top: -15px;
+
+                > a {
+                    font-size: 15px;
+                    padding-top: 5px;
+                    padding-right: 10px;
+                    color: #666666;
+
+                    &:hover {
+                        color: #000000;
+                    }
+                }
+            }
+
+            .content {
+                padding-top: 10px;
+            }
+        }
+    }
+
+    &.new.milestone {
+        textarea {
+            height: 200px;
+        }
+
+        #deadline {
+            width: 150px;
+        }
+    }
+
+    &.compare.pull {
+        .show-form-container {
+            text-align: left;
+        }
+
+        .choose.branch {
+            .octicon {
+                padding-right: 10px;
+            }
+        }
+
+        .comment.form {
+            .content {
+                #avatar-arrow;
+
+                &:after {
+                    border-right-color: #ffffff;
+                }
+            }
+        }
+    }
+
+    .filter.dropdown .menu {
+        margin-top: 1px !important;
+    }
+
+    &.branches {
+        .commit-divergence {
+            .bar-group {
+                position: relative;
+                float: left;
+                padding-bottom: 6px;
+                width: 90px;
+
+                &:last-child {
+                    border-left: 1px solid #b4b4b4;
+                }
+            }
+
+            .count {
+                margin: 0 3px;
+
+                &.count-ahead {
+                    text-align: left;
+                }
+
+                &.count-behind {
+                    text-align: right;
+                }
+            }
+
+            .bar {
+                height: 4px;
+                position: absolute;
+                background-color: #d4d4d5;
+
+                &.bar-behind {
+                    right: 0;
+                }
+
+                &.bar-ahead {
+                    left: 0;
+                }
+            }
+        }
+    }
+
+    &.commits {
+        .header {
+            .search {
+                input {
+                    font-weight: normal;
+                    padding: 5px 10px;
+                }
+            }
+        }
+    }
+
+    #commits-table {
+        thead {
+            th:first-of-type {
+                padding-left: 15px;
+            }
+
+            .sha {
+                &td {
+                    text-align: center;
+                }
+
+                width: 140px;
+            }
+        }
+
+        td.sha .sha.label {
+            margin: 0;
+        }
+
+        td.message {
+            text-overflow: unset;
+        }
+
+        &.ui.basic.striped.table tbody tr:nth-child(2n) {
+            background-color: rgba(0, 0, 0, 0.02) !important;
+        }
+    }
+
+    #commits-table td.sha .sha.label,
+    #repo-files-table .sha.label {
+        border: 1px solid #bbbbbb;
+
+        .detail.icon {
+            background: #fafafa;
+            margin: -6px -10px -4px 0;
+            padding: 5px 3px 5px 6px;
+            border-left: 1px solid #bbbbbb;
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+
+        &.isSigned.isWarning {
+            border: 1px solid #db2828;
+            background: fade(#db2828, 10%);
+
+            .detail.icon {
+                border-left: 1px solid fade(#db2828, 50%);
+            }
+        }
+
+        &.isSigned.isVerified {
+            border: 1px solid #21ba45;
+            background: fade(#21ba45, 10%);
+
+            .detail.icon {
+                border-left: 1px solid #21ba45;
+            }
+
+            &:hover {
+                background: fade(#21ba45, 30%) !important;
+            }
+        }
+    }
+
+    .diff-detail-box {
+        padding: 7px 0;
+        background: #ffffff;
+        line-height: 30px;
+
+        > div:after {
+            clear: both;
+            content: "";
+            display: block;
+        }
+
+        span.status {
+            display: inline-block;
+            width: 12px;
+            height: 12px;
+            margin-right: 8px;
+            vertical-align: middle;
+
+            &.modify {
+                background-color: #f0db88;
+            }
+
+            &.add {
+                background-color: #b4e2b4;
+            }
+
+            &.del {
+                background-color: #e9aeae;
+            }
+
+            &.rename {
+                background-color: #dad8ff;
+            }
+        }
+
+        .detail-files {
+            background: #ffffff;
+            margin: 0;
+        }
+    }
+
+    .diff-box .header {
+        display: flex;
+        align-items: center;
+
+        .count {
+            margin-right: 12px;
+            font-size: 13px;
+            flex: 0 0 auto;
+
+            .bar {
+                background-color: #bd2c00;
+                height: 12px;
+                width: 40px;
+                display: inline-block;
+                margin: 2px 4px 0 4px;
+                vertical-align: text-top;
+
+                .add {
+                    background-color: #55a532;
+                    height: 12px;
+                }
+            }
+        }
+
+        .file {
+            flex: 1;
+            color: #888888;
+            word-break: break-all;
+        }
+
+        .button {
+            margin: -5px 0 -5px 12px;
+            padding: 8px 10px;
+            flex: 0 0 auto;
+        }
+    }
+
+    .diff-file-box {
+        .header {
+            background-color: #f7f7f7;
+        }
+
+        .file-body.file-code {
+            .lines-num {
+                text-align: right;
+                color: #a6a6a6;
+                background: #fafafa;
+                width: 1%;
+                min-width: 50px;
+                user-select: none;
+                vertical-align: top;
+
+                span.fold {
+                    display: block;
+                    text-align: center;
+                }
+            }
+
+            .lines-num-old {
+                border-right: 1px solid #dddddd;
+            }
+        }
+
+        .code-diff {
+            font-size: 12px;
+
+            td {
+                padding: 0 0 0 10px !important;
+                border-top: 0;
+            }
+
+            .lines-num {
+                border-color: #d4d4d5;
+                border-right-width: 1px;
+                border-right-style: solid;
+                padding: 0 5px !important;
+            }
+
+            tbody {
+                tr {
+                    td.halfwidth {
+                        // halfwidth is used in split view - and in that case, 1% of each
+                        width: 49%;
+                    }
+
+                    td.center {
+                        text-align: center;
+                    }
+
+                    .removed-code {
+                        background-color: #ff9999;
+                    }
+
+                    .added-code {
+                        background-color: #99ff99;
+                    }
+
+                    [data-line-num]::before {
+                        content: attr(data-line-num);
+                        text-align: right;
+                    }
+
+                    .lines-type-marker {
+                        width: 10px;
+                        min-width: 10px;
+                        user-select: none;
+                    }
+
+                    [data-type-marker]::before {
+                        content: attr(data-type-marker);
+                        text-align: right;
+                        display: inline-block;
+                    }
+                }
+            }
+        }
+
+        .code-diff-unified tbody tr {
+            &.del-code td {
+                background-color: #ffe0e0 !important;
+                border-color: #f1c0c0 !important;
+            }
+
+            &.add-code td {
+                background-color: #d6fcd6 !important;
+                border-color: #c1e9c1 !important;
+            }
+        }
+
+        .code-diff-split {
+
+            table,
+            tbody {
+                width: 100%;
+            }
+
+            tbody tr {
+
+                // light gray for empty lines before / after commit
+                &.add-code td:nth-child(1),
+                &.add-code td:nth-child(2),
+                &.add-code td:nth-child(3),
+                &.del-code td:nth-child(4),
+                &.del-code td:nth-child(5),
+                &.del-code td:nth-child(6) {
+                    background-color: #fafafa;
+                }
+
+                &.del-code td:nth-child(1),
+                &.del-code td:nth-child(2),
+                &.del-code td:nth-child(3),
+                td.del-code {
+                    background-color: #ffe0e0 !important;
+                    border-color: #f1c0c0 !important;
+                }
+
+                &.add-code td:nth-child(4),
+                &.add-code td:nth-child(5),
+                &.add-code td:nth-child(6),
+                td.add-code {
+                    background-color: #d6fcd6 !important;
+                    border-color: #c1e9c1 !important;
+                }
+
+                td:nth-child(4) {
+                    border-left-width: 1px;
+                    border-left-style: solid;
+                }
+            }
+        }
+
+        &.file-content {
+            img {
+                max-width: 100%;
+                padding: 5px 5px 0 5px;
+            }
+            img.emoji {
+                padding: 0;
+            }
+
+            clear: right;
+        }
+    }
+
+    .diff-stats {
+
+        clear: both;
+        margin-bottom: 5px;
+        max-height: 400px;
+        overflow: auto;
+        padding-left: 0;
+
+        li {
+            list-style: none;
+            padding-bottom: 4px;
+            margin-bottom: 4px;
+            border-bottom: 1px dashed #dddddd;
+            padding-left: 6px;
+        }
+
+        .diff-counter {
+            margin-right: 15px;
+
+            .del {
+                color: red;
+            }
+            .add {
+                color: green;
+            }
+        }
+    }
+
+    .repo-search-result {
+        padding-top: 10px;
+        padding-bottom: 10px;
+
+        .lines-num a {
+            color: inherit;
+        }
+    }
+
+    &.quickstart {
+        .guide {
+            .item {
+                padding: 1em;
+
+                small {
+                    font-weight: normal;
+                }
+            }
+
+            .clone.button:first-child {
+                border-radius: 0.28571429rem 0 0 0.28571429rem;
+            }
+
+            .ui.action.small.input {
+                width: 100%;
+            }
+
+            #repo-clone-url {
+                border-radius: 0;
+                padding: 5px 10px;
+                font-size: 1.2em;
+            }
+        }
+    }
+
+    &.release {
+        #release-list {
+            border-top: 1px solid #dddddd;
+            margin-top: 20px;
+            padding-top: 15px;
+
+            > li {
+                list-style: none;
+
+                .meta,
+                .detail {
+                    padding-top: 30px;
+                    padding-bottom: 40px;
+                }
+
+                .meta {
+                    text-align: right;
+                    position: relative;
+
+                    .tag:not(.icon) {
+                        display: block;
+                        margin-top: 15px;
+                    }
+
+                    .commit {
+                        display: block;
+                        margin-top: 10px;
+                    }
+                }
+
+                .detail {
+                    border-left: 1px solid #dddddd;
+
+                    .author {
+                        img {
+                            margin-bottom: -3px;
+                        }
+                    }
+
+                    .download {
+                        margin-top: 20px;
+
+                        > a {
+                            .octicon {
+                                margin-left: 5px;
+                                margin-right: 5px;
+                            }
+                        }
+
+                        .list {
+                            padding-left: 0;
+                            border-top: 1px solid #eeeeee;
+
+                            li {
+                                list-style: none;
+                                display: block;
+                                padding-top: 8px;
+                                padding-bottom: 8px;
+                                border-bottom: 1px solid #eeeeee;
+                            }
+                        }
+                    }
+
+                    .dot {
+                        width: 9px;
+                        height: 9px;
+                        background-color: #cccccc;
+                        z-index: 999;
+                        position: absolute;
+                        display: block;
+                        left: -5px;
+                        top: 40px;
+                        border-radius: 6px;
+                        border: 1px solid #ffffff;
+                    }
+                }
+            }
+        }
+    }
+
+    &.new.release {
+        .target {
+            min-width: 500px;
+
+            #tag-name {
+                margin-top: -4px;
+            }
+
+            .at {
+                margin-left: -5px;
+                margin-right: 5px;
+            }
+
+            .dropdown.icon {
+                margin: 0;
+                padding-top: 3px;
+            }
+
+            .selection.dropdown {
+                padding-top: 10px;
+                padding-bottom: 10px;
+            }
+        }
+
+        .prerelease.field {
+            margin-bottom: 0;
+        }
+
+        .field {
+
+            button,
+            input {
+                @media only screen and (max-width: 438px) {
+                    width: 100%;
+                }
+            }
+
+            button {
+                @media only screen and (max-width: 768px) {
+                    margin-bottom: 1em;
+                }
+            }
+        }
+    }
+
+    &.forks {
+        .list {
+            margin-top: 0;
+
+            .item {
+                padding-top: 10px;
+                padding-bottom: 10px;
+                border-bottom: 1px solid #dddddd;
+
+                .ui.avatar {
+                    float: left;
+                    margin-right: 5px;
+                }
+
+                .link {
+                    padding-top: 5px;
+                }
+            }
+        }
+    }
+
+    &.wiki {
+        &.start {
+            .ui.segment {
+                padding-top: 70px;
+                padding-bottom: 100px;
+
+                .mega-octicon {
+                    font-size: 48px;
+                }
+            }
+        }
+
+        &.new {
+            .CodeMirror {
+                .CodeMirror-code {
+                    font-family: @monospaced-fonts, monospace;
+
+                    .cm-comment {
+                        background: inherit;
+                    }
+                }
+            }
+
+            .editor-preview {
+                background-color: white;
+            }
+        }
+
+        &.view {
+            .choose.page {
+                margin-top: -5px;
+            }
+
+            .ui.sub.header {
+                text-transform: none;
+            }
+
+            > .markdown {
+                padding: 15px 30px;
+
+                h1,
+                h2,
+                h3,
+                h4,
+                h5,
+                h6 {
+                    &:first-of-type {
+                        margin-top: 0;
+                    }
+                }
+            }
+        }
+
+        @media only screen and (max-width: 767px) {
+            .dividing.header .stackable.grid .button {
+                margin-top: 2px;
+                margin-bottom: 2px;
+            }
+        }
+    }
+
+    &.settings {
+        &.collaboration {
+            .collaborator.list {
+                padding: 0;
+
+                > .item {
+                    margin: 0;
+                    line-height: 2em;
+
+                    &:not(:last-child) {
+                        border-bottom: 1px solid #dddddd;
+                    }
+                }
+            }
+
+            #repo-collab-form {
+                #search-user-box {
+                    .results {
+                        left: 7px;
+                    }
+                }
+
+                .ui.button {
+                    margin-left: 5px;
+                    margin-top: -3px;
+                }
+            }
+
+            #repo-collab-team-form {
+                #search-team-box {
+                    .results {
+                        left: 7px;
+                    }
+                }
+
+                .ui.button {
+                    margin-left: 5px;
+                    margin-top: -3px;
+                }
+            }
+        }
+
+        &.branches {
+            .protected-branches {
+                .selection.dropdown {
+                    width: 300px;
+                }
+
+                .item {
+                    border: 1px solid #eaeaea;
+                    padding: 10px 15px;
+
+                    &:not(:last-child) {
+                        border-bottom: 0;
+                    }
+                }
+            }
+
+            .branch-protection {
+                .help {
+                    margin-left: 26px;
+                    padding-top: 0;
+                }
+
+                .fields {
+                    margin-left: 20px;
+                    display: block;
+                }
+
+                .whitelist {
+                    margin-left: 26px;
+
+                    .dropdown img {
+                        display: inline-block;
+                    }
+                }
+            }
+        }
+
+        &.webhook {
+            .events {
+                .column {
+                    padding-bottom: 0;
+                }
+
+                .help {
+                    font-size: 13px;
+                    margin-left: 26px;
+                    padding-top: 0;
+                }
+            }
+        }
+    }
+
+    .ui.attached.isSigned.isVerified {
+        &:not(.positive) {
+            border-left: 1px solid #a3c293;
+            border-right: 1px solid #a3c293;
+        }
+
+        &.top:not(.positive) {
+            border-top: 1px solid #a3c293;
+        }
+
+        &:not(.positive):last-child {
+            border-bottom: 1px solid #a3c293;
+        }
+    }
+
+    .ui.segment.sub-menu {
+        padding: 7px;
+        line-height: 0;
+
+        .list {
+            width: 100%;
+            display: flex;
+
+            .item {
+                width: 100%;
+                border-radius: 3px;
+
+                a {
+                    color: black;
+
+                    &:hover {
+                        color: #666666;
+                    }
+                }
+
+                &.active {
+                    background: rgba(0, 0, 0, 0.05);
+                }
+            }
+        }
+    }
+
+    .segment.reactions,
+    .select-reaction {
+        &.dropdown .menu {
+            right: 0 !important;
+            left: auto !important;
+
+            > .header {
+                margin: 0.75rem 0 0.5rem;
+            }
+
+            > .item {
+                float: left;
+                padding: 0.5rem 0.5rem !important;
+
+                img.emoji {
+                    margin-right: 0;
+                }
+            }
+        }
+    }
+
+    .segment.reactions {
+        padding: 0.3em 1em;
+
+        .ui.label {
+            padding: 0.4em;
+
+            &.disabled {
+                cursor: default;
+            }
+
+            > img {
+                height: 1.5em !important;
+            }
+        }
+
+        .select-reaction {
+            float: none;
+
+            &:not(.active) a {
+                display: none;
+            }
+        }
+
+        &:hover .select-reaction a {
+            display: block;
+        }
+    }
+
+    .ui.fluid.action.input {
+        .ui.search.action.input {
+            flex: auto;
+        }
+    }
+}
+
+// End of .repository
+
+&.user-cards {
+    .list {
+        padding: 0;
+        display: flex;
+        flex-wrap: wrap;
+
+        .item {
+            list-style: none;
+            width: 32%;
+            margin: 10px 10px 10px 0;
+            padding-bottom: 14px;
+            float: left;
+
+            .avatar {
+                width: 48px;
+                height: 48px;
+                float: left;
+                display: block;
+                margin-right: 10px;
+            }
+
+            .name {
+                margin-top: 0;
+                margin-bottom: 0;
+                font-weight: normal;
+            }
+
+            .meta {
+                margin-top: 5px;
+            }
+        }
+    }
+}
+
+#search-repo-box,
+#search-user-box {
+    .results {
+        .result {
+            .image {
+                float: left;
+                margin-right: 8px;
+                width: 2em;
+                height: 2em;
+            }
+
+            .content {
+                margin: 6px 0;
+            }
+        }
+    }
+}
+
+#search-team-box {
+    .results {
+        .result {
+            .content {
+                margin: 6px 0;
+            }
+        }
+    }
+}
+
+#issue-filters.hide {
+    display: none;
+}
+
+#issue-actions {
+    margin-top: -1rem !important; // counteract padding from Semantic
+}
+
+#issue-actions.hide {
+    display: none;
+}
+
+.ui.checkbox.issue-checkbox {
+    vertical-align: middle;
+}
+
+.issue.list {
+    list-style: none;
+
+    > .item {
+        padding-top: 15px;
+        padding-bottom: 10px;
+        border-bottom: 1px dashed #aaaaaa;
+
+        .title {
+            color: #444444;
+            font-size: 15px;
+            font-weight: bold;
+            margin: 0 6px;
+
+            &:hover {
+                color: #000000;
+            }
+        }
+
+        .comment {
+            padding-right: 10px;
+            color: #666666;
+        }
+
+        .desc {
+            padding-top: 5px;
+            color: #999999;
+
+            .checklist {
+                padding-left: 5px;
+
+                .progress-bar {
+                    margin-left: 2px;
+                    width: 80px;
+                    height: 6px;
+                    display: inline-block;
+                    background-color: #eeeeee;
+                    overflow: hidden;
+                    border-radius: 3px;
+                    vertical-align: 2px !important;
+
+                    .progress {
+                        background-color: #cccccc;
+                        display: block;
+                        height: 100%;
+                    }
+                }
+            }
+
+            .due-date {
+                padding-left: 5px;
+            }
+
+            a.milestone {
+                margin-left: 5px;
+                color: #999999 !important;
+
+                &:hover {
+                    color: #000000 !important;
+                }
+            }
+
+            a.ref {
+                margin-left: 8px;
+                color: #999999 !important;
+
+                &:hover {
+                    color: #000000 !important;
+                }
+
+                span {
+                    margin-right: -4px;
+                }
+            }
+
+            .assignee {
+                margin-top: -5px;
+                margin-right: 5px;
+            }
+
+            .overdue {
+                color: red;
+            }
+        }
+    }
+}
+
+.page.buttons {
+    padding-top: 15px;
+}
+
+.ui.form {
+    .dropzone {
+        width: 100%;
+        margin-bottom: 10px;
+        border: 2px dashed #0087f5;
+        box-shadow: none !important;
+
+        .dz-error-message {
+            top: 140px;
+        }
+    }
+}
+
+.settings {
+    .content {
+        margin-top: 2px;
+
+        > .header,
+        .segment {
+            box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
+        }
+    }
+
+    .list {
+        > .item {
+            .green:not(.ui.button) {
+                color: #21ba45;
+            }
+
+            &:not(:first-child) {
+                border-top: 1px solid #eaeaea;
+                padding: 1rem;
+                margin: 15px -1rem -1rem -1rem;
+            }
+
+            > .mega-octicon {
+                display: table-cell;
+            }
+
+            > .mega-octicon + .content {
+                display: table-cell;
+                padding: 0 0 0 0.5em;
+                vertical-align: top;
+            }
+
+            .info {
+                margin-top: 10px;
+
+                .tab.segment {
+                    border: 0;
+                    padding: 10px 0 0;
+                }
+            }
+        }
+
+        &.key {
+            .meta {
+                padding-top: 5px;
+                color: #666666;
+            }
+        }
+
+        &.email {
+            > .item:not(:first-child) {
+                min-height: 60px;
+            }
+        }
+
+        &.collaborator {
+            > .item {
+                padding: 0;
+            }
+        }
+    }
+}
+
+.ui.vertical.menu {
+    .header.item {
+        font-size: 1.1em;
+        background: #f0f0f0;
+    }
+}
+
+.edit-label.modal,
+.new-label.segment {
+    .form {
+        .column {
+            padding-right: 0;
+        }
+
+        .buttons {
+            margin-left: auto;
+            padding-top: 15px;
+        }
+
+        .color.picker.column {
+            width: auto;
+
+            .color-picker {
+                height: 35px;
+                width: auto;
+                padding-left: 30px;
+            }
+        }
+
+        .minicolors-swatch.minicolors-sprite {
+            top: 10px;
+            left: 10px;
+            width: 15px;
+            height: 15px;
+        }
+
+        .precolors {
+            padding-left: 0;
+            padding-right: 0;
+            margin: 3px 10px auto 10px;
+            width: 120px;
+
+            .color {
+                float: left;
+                width: 15px;
+                height: 15px;
+            }
+        }
+    }
+}
+
+#avatar-arrow {
+
+    &:before,
+    &:after {
+        right: 100%;
+        top: 20px;
+        border: solid transparent;
+        content: " ";
+        height: 0;
+        width: 0;
+        position: absolute;
+        pointer-events: none;
+    }
+
+    &:before {
+        border-right-color: #d3d3d4;
+        border-width: 9px;
+        margin-top: -9px;
+    }
+
+    &:after {
+        border-right-color: #f7f7f7;
+        border-width: 8px;
+        margin-top: -8px;
+    }
+}
+
+#transfer-repo-modal,
+#delete-repo-modal {
+    .ui.message {
+        width: 100% !important;
+    }
+}
+
+// generate .tab-size-{i} from 1 to 16
+.generate-tab-size(16);
+
+.generate-tab-size(@n, @i: 1) when (@i =< @n) {
+    .tab-size-@{i} {
+        tab-size: @i !important;
+    }
+
+    .generate-tab-size(@n, (@i + 1));
+}
+
+.stats-table {
+    display: table;
+    width: 100%;
+
+    .table-cell {
+        display: table-cell;
+
+        &.tiny {
+            height: 0.5em;
+        }
+    }
+}
+
+tbody.commit-list {
+    vertical-align: baseline;
+}
+
+.commit-list .message-wrapper {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: calc(100% - 50px);
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.commit-list .commit-summary a {
+    text-decoration: underline;
+    text-decoration-style: dashed;
+
+    &:hover {
+        text-decoration-style: solid;
+    }
+
+    &.default-link {
+        text-decoration: none;
+
+        &:hover {
+            text-decoration: underline;
+            text-decoration-style: solid;
+        }
+    }
+}
+
+.commit-list .commit-status-link {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.commit-body {
+    white-space: pre-wrap;
+}
+
+.git-notes {
+    &.top {
+        text-align: left;
+    }
+
+    .commit-body {
+        margin: 0;
+    }
+}
+
+@media only screen and (max-width: 767px) {
+    .ui.stackable.menu {
+        &.mobile--margin-between-items > .item {
+            margin-top: 5px;
+            margin-bottom: 5px;
+        }
+
+        &.mobile--no-negative-margins {
+            margin-left: 0;
+            margin-right: 0;
+        }
+    }
+}
+
+#topic_edit {
+    margin-top: 5px;
+}
+
+#repo-topics {
+    margin-top: 5px;
+}
+
+.repo-topic {
+    cursor: pointer;
+}
+
+#new-dependency-drop-list {
+    &.ui.selection.dropdown {
+        min-width: 0;
+        width: 100%;
+        border-radius: 4px 0 0 4px;
+        border-right: 0;
+        white-space: nowrap;
+    }
+
+    .text {
+        width: 100%;
+        overflow: hidden;
+    }
+}
+
+#manage_topic {
+    font-size: 12px;
+}
+
+.label + #manage_topic {
+    margin-left: 5px;
+}
+
+.repo-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+
+.repo-header .repo-buttons {
+    display: flex;
+    align-items: center;
+}
+
+.repo-buttons .disabled-repo-button .label {
+    opacity: 0.5;
+}
+
+.repo-buttons .disabled-repo-button a.button {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.repo-buttons .disabled-repo-button a.button:hover {
+    background: none !important;
+    color: rgba(0, 0, 0, 0.6) !important;
+    box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset !important;
+}
+
+.repo-buttons .ui.labeled.button > .label {
+    border-left: 0 !important;
+    margin: 0 !important;
+}
+
+.tag-code,
+.tag-code td {
+    background-color: #f0f0f0 !important;
+    border-color: #d3cfcf !important;
+    padding-top: 8px;
+    padding-bottom: 8px;
+}
+
+.issue-keyword {
+    border-bottom: 1px dotted #959da5;
+    display: inline-block;
+}
+
+.file-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 12px !important;
+}
+
+.file-info {
+    display: flex;
+    align-items: center;
+}
+
+.file-info-entry + .file-info-entry {
+    border-left: 1px solid currentColor;
+    margin-left: 8px;
+    padding-left: 8px;
+}
+
+.title_wip_desc {
+    margin-top: 1em;
+}
diff --git a/web_src/less/_review.less b/web_src/less/_review.less
new file mode 100644
index 0000000000..c01e7533b4
--- /dev/null
+++ b/web_src/less/_review.less
@@ -0,0 +1,110 @@
+.ui.button.add-code-comment {
+    font-size: 14px;
+    height: 16px;
+    padding: 2px 0 0;
+    position: relative;
+    width: 16px;
+    z-index: 5;
+    float: left;
+    margin: -2px -10px -2px -20px;
+    opacity: 0;
+    transition: transform 0.1s ease-in-out;
+    transform: scale(1, 1);
+
+    &:hover {
+        transform: scale(1.2, 1.2);
+    }
+}
+
+.focus-lines-new .ui.button.add-code-comment.add-code-comment-right,
+.focus-lines-old .ui.button.add-code-comment.add-code-comment-left {
+    opacity: 1;
+}
+
+.comment-code-cloud {
+    padding: 4px;
+    position: relative;
+    border: 1px solid #f1f1f1;
+    margin: 13px 10px 5px auto;
+
+    &:before {
+        content: " ";
+        width: 0;
+        height: 0;
+        border-left: 13px solid transparent;
+        border-right: 13px solid transparent;
+        border-bottom: 13px solid #f1f1f1;
+        left: 20px;
+        position: absolute;
+        top: -13px;
+    }
+
+    .attached {
+        &.tab {
+            border: 0;
+            padding: 0;
+            margin: 0;
+
+            &.markdown {
+                padding: 1em;
+                min-height: 168px;
+            }
+        }
+
+        &.header {
+            padding: 0.1rem 1rem;
+        }
+    }
+
+    .right.menu.options .item {
+        padding: 0.85714286em 0.442857em;
+        cursor: pointer;
+    }
+
+    .ui.form textarea {
+        border: 0;
+    }
+
+    .ui.attached.tabular.menu {
+        background: #f7f7f7;
+        border: 1px solid #d4d4d5;
+        padding-top: 5px;
+        padding-left: 5px;
+        margin-top: 0;
+    }
+
+    .footer {
+        border-top: 1px solid #f1f1f1;
+        margin-top: 10px;
+
+        .markdown-info {
+            display: inline-block;
+            margin: 5px 0;
+            font-size: 12px;
+            color: rgba(0, 0, 0, 0.6);
+        }
+
+        .ui.right.floated {
+            padding-top: 6px;
+        }
+
+        &:after {
+            clear: both;
+            content: "";
+            display: block;
+        }
+    }
+
+    button.comment-form-reply {
+        margin: 0.5em 0.5em 0.5em 4.5em;
+    }
+
+    form.comment-form-reply {
+        margin: 0 0 0 4em;
+    }
+}
+
+.file-comment {
+    font: 12px @monospaced-fonts, monospace;
+    color: rgba(0, 0, 0, 0.87);
+}
diff --git a/web_src/less/_tribute.less b/web_src/less/_tribute.less
new file mode 100644
index 0000000000..ad097bef6d
--- /dev/null
+++ b/web_src/less/_tribute.less
@@ -0,0 +1,32 @@
+.tribute-container {
+    box-shadow: 0 1px 3px 1px #c7c7c7;
+
+    ul {
+        background: #ffffff;
+    }
+
+    li {
+        padding: 8px 12px;
+        border-bottom: 1px solid #dcdcdc;
+
+        img {
+            display: inline-block;
+            vertical-align: middle;
+            width: 28px;
+            height: 28px;
+            margin-right: 5px;
+        }
+
+        span.fullname {
+            font-weight: normal;
+            font-size: 0.8rem;
+            margin-left: 3px;
+        }
+    }
+
+    li.highlight,
+    li:hover {
+        background: #2185d0;
+        color: #ffffff;
+    }
+}
diff --git a/web_src/less/_user.less b/web_src/less/_user.less
new file mode 100644
index 0000000000..52c59464d8
--- /dev/null
+++ b/web_src/less/_user.less
@@ -0,0 +1,149 @@
+.user {
+    &:not(.icon) {
+        padding-top: 15px;
+    }
+
+    &.profile {
+        .ui.card {
+            .username {
+                display: block;
+            }
+
+            .extra.content {
+                padding: 0;
+
+                ul {
+                    margin: 0;
+                    padding: 0;
+
+                    li {
+                        padding: 10px;
+                        list-style: none;
+
+                        &:not(:last-child) {
+                            border-bottom: 1px solid #eaeaea;
+                        }
+
+                        .octicon,
+                        .fa {
+                            margin-left: 1px;
+                            margin-right: 5px;
+                        }
+
+                        &.follow {
+                            .ui.button {
+                                width: 100%;
+                            }
+                        }
+                    }
+                }
+            }
+
+            #profile-avatar {
+                @media only screen and (max-width: 768px) {
+                    height: 250px;
+                    overflow: hidden;
+
+                    img {
+                        max-height: 768px;
+                        max-width: 768px;
+                    }
+                }
+            }
+
+            @media only screen and (max-width: 768px) {
+                width: 100%;
+            }
+        }
+
+        .ui.repository.list {
+            margin-top: 25px;
+        }
+
+        #loading-heatmap {
+            margin-bottom: 1em;
+        }
+    }
+
+    &.followers {
+        .header.name {
+            font-size: 20px;
+            line-height: 24px;
+            vertical-align: middle;
+        }
+
+        .follow {
+            .ui.button {
+                padding: 8px 15px;
+            }
+        }
+    }
+
+    &.notification {
+        .octicon {
+            float: left;
+            font-size: 2em;
+
+            &.green {
+                color: #21ba45;
+            }
+
+            &.red {
+                color: #d01919;
+            }
+
+            &.purple {
+                color: #a333c8;
+            }
+
+            &.blue {
+                color: #2185d0;
+            }
+        }
+
+        .content {
+            float: left;
+            margin-left: 7px;
+        }
+
+        table {
+            form {
+                display: inline-block;
+            }
+
+            button {
+                padding: 3px 3px 3px 5px;
+            }
+
+            tr {
+                cursor: pointer;
+            }
+        }
+    }
+
+    &.link-account:not(.icon) {
+        padding-top: 15px;
+        padding-bottom: 5px;
+    }
+
+    &.settings {
+        .iconFloat {
+            float: left;
+        }
+    }
+}
+
+.user-orgs {
+    display: flex;
+    flex-flow: row wrap;
+    padding: 0;
+    margin: -3px !important;
+
+    li {
+        display: flex;
+        border-bottom: 0 !important;
+        padding: 3px !important;
+        width: 20%;
+        max-width: 60px;
+    }
+}
diff --git a/web_src/less/index.less b/web_src/less/index.less
new file mode 100644
index 0000000000..0ffd6c9be6
--- /dev/null
+++ b/web_src/less/index.less
@@ -0,0 +1,15 @@
+@import "_tribute";
+@import "_emojify";
+@import "_base";
+@import "_markdown";
+@import "_home";
+@import "_install";
+@import "_form";
+@import "_repository";
+@import "_editor";
+@import "_organization";
+@import "_user";
+@import "_dashboard";
+@import "_admin";
+@import "_explore";
+@import "_review";
diff --git a/web_src/less/themes/_base.less b/web_src/less/themes/_base.less
new file mode 100644
index 0000000000..e339a6fa8e
--- /dev/null
+++ b/web_src/less/themes/_base.less
@@ -0,0 +1,3 @@
+// TODO: Instead of having each theme file define each
+//       CSS/LESS item in this file and then overide
+//       in the theme files
diff --git a/web_src/less/themes/arc-green.less b/web_src/less/themes/arc-green.less
new file mode 100644
index 0000000000..06e7c78d41
--- /dev/null
+++ b/web_src/less/themes/arc-green.less
@@ -0,0 +1,1436 @@
+@import "_base";
+
+.hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 0.5em;
+    color: #bababa;
+}
+
+.hljs-strong,
+.hljs-emphasis {
+    color: #a8a8a2;
+}
+
+.hljs-bullet,
+.hljs-quote,
+.hljs-link,
+.hljs-number,
+.hljs-regexp,
+.hljs-literal {
+    color: #6896ba;
+}
+
+.hljs-code,
+.hljs-selector-class {
+    color: #a6e22e;
+}
+
+.hljs-emphasis {
+    font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-section,
+.hljs-attribute,
+.hljs-name,
+.hljs-variable {
+    color: #cb7832;
+}
+
+.hljs-params {
+    color: #b9b9b9;
+}
+
+.hljs-string {
+    color: #6a8759;
+}
+
+.hljs-subst,
+.hljs-type,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-symbol,
+.hljs-selector-id,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-addition {
+    color: #e0c46c;
+}
+
+.hljs-comment,
+.hljs-deletion,
+.hljs-meta {
+    color: #7f7f7f;
+}
+
+.repository .ui.segment.sub-menu .list .item a {
+    color: #dbdbdb;
+}
+
+.ui.horizontal.segments > .segment {
+    background-color: #383c4a;
+}
+
+body {
+    background: #383c4a;
+    color: #9e9e9e;
+}
+
+/* firefox scroll bars */
+
+* {
+    scrollbar-width: thin;
+    scrollbar-color: #87ab63 rgba(255, 255, 255, 0.1);
+}
+
+/* webkit scrollbars */
+
+::-webkit-scrollbar {
+    -webkit-appearance: none !important;
+    width: 10px !important;
+    height: 10px !important;
+}
+
+::-webkit-scrollbar-track {
+    border-radius: 0 !important;
+    background: rgba(255, 255, 255, 0.1) !important;
+}
+
+::-webkit-scrollbar-thumb {
+    cursor: pointer !important;
+    border-radius: 5px !important;
+    -webkit-transition: color 0.2s ease !important;
+    transition: color 0.2s ease !important;
+    background: #87ab63 !important;
+}
+
+::-webkit-scrollbar-thumb:window-inactive {
+    background: #87ab63 !important;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #87ab63 !important;
+}
+
+a {
+    color: #87ab63;
+}
+
+a:hover {
+    color: #a0cc75;
+}
+
+.ui.card > .extra a:not(.ui):hover,
+.ui.cards > .card > .extra a:not(.ui):hover {
+    color: #a0cc75;
+}
+
+.ui.breadcrumb a:hover {
+    color: #a0cc75;
+}
+
+.ui.breadcrumb a {
+    color: #87ab63;
+}
+
+.repository .metas .ui.list a .text {
+    color: #87ab63;
+}
+
+.repository .metas .ui.list a .text:hover {
+    color: #a0cc75;
+}
+
+.repository .label.list .item a {
+    color: #87ab63;
+}
+
+.repository .label.list .item a:hover {
+    color: #a0cc75;
+}
+
+.repository .milestone.list > .item > a {
+    color: #87ab63;
+}
+
+.repository .milestone.list > .item > a:hover {
+    color: #a0cc75;
+}
+
+.repository.release #release-list {
+    border-top: 1px solid #4c505c;
+}
+
+.repository .milestone.list > .item .operate > a {
+    color: #87ab63;
+}
+
+.repository .milestone.list > .item .operate > a:hover {
+    color: #a0cc75;
+}
+
+.ui.green.progress .bar {
+    background-color: #668844;
+}
+
+.ui.progress.success .bar {
+    background-color: #7b9e57 !important;
+}
+
+.following.bar.light {
+    background: #2e323e;
+    border-bottom: 1px solid #313131;
+}
+
+.ui.secondary.menu .active.item {
+    color: #dbdbdb;
+}
+
+.ui.secondary.menu .item {
+    color: #9e9e9e;
+}
+
+.following.bar .top.menu a.item:hover {
+    color: #ffffff;
+}
+
+.repository.view.issue .comment-list .comment .content > .bottom.segment a {
+    border: solid 1px #353945;
+    background-color: #353945;
+}
+
+.ui.attached.header {
+    background: #404552;
+    border: 1px solid #404552;
+    color: #dbdbdb;
+}
+
+.ui.attached.table {
+    border: 1px solid #304251;
+    background: #304251;
+}
+
+.feeds .list ul li:not(:last-child) {
+    border-bottom: 1px solid #333640;
+}
+
+.feeds .list ul li.private {
+    background: #353945;
+    border: 1px solid #333640;
+}
+
+.ui.secondary.menu .dropdown.item:hover,
+.ui.secondary.menu .link.item:hover,
+.ui.secondary.menu .active.item:hover,
+.ui.secondary.menu a.item:hover {
+    color: #ffffff;
+}
+
+.ui.menu .ui.dropdown .menu > .item {
+    background: #2c303a !important;
+    color: #9e9e9e !important;
+}
+
+.ui.secondary.menu .dropdown.item > .menu,
+.ui.text.menu .dropdown.item > .menu {
+    border: 1px solid #434444;
+}
+
+footer {
+    background: #2e323e;
+    border-top: 1px solid #313131;
+}
+
+.ui.menu .dropdown.item .menu {
+    background: #2c303a;
+}
+
+.ui.menu .ui.dropdown .menu > .item:hover,
+.ui.menu .ui.dropdown .menu > .selected.item {
+    color: #ffffff !important;
+}
+
+.ui.dropdown .menu > .header {
+    color: #dbdbdb;
+}
+
+.ui.red.label,
+.ui.red.labels .label {
+    background-color: #7d3434 !important;
+    border-color: #8a2121 !important;
+}
+
+.ui.menu {
+    background: #404552;
+    border: 1px solid #353945;
+}
+
+.ui.menu .active.item:hover,
+.ui.vertical.menu .active.item:hover {
+    color: #dbdbdb;
+    background: #4b5162;
+}
+
+.ui.link.menu .item:hover,
+.ui.menu .dropdown.item:hover,
+.ui.menu .link.item:hover,
+.ui.menu a.item:hover {
+    color: #dbdbdb;
+    background: #454b5a;
+}
+
+.ui.menu .active.item {
+    background: #4b5162;
+    color: #dbdbdb;
+}
+
+.ui.input input {
+    background: #404552;
+    border: 2px solid #353945;
+    color: #dbdbdb;
+}
+
+.ui.input input:focus,
+.ui.input.focus input {
+    background: #404552;
+    border: 2px solid #353945;
+    color: #dbdbdb;
+}
+
+.ui.accordion .title:not(.ui) {
+    color: #dbdbdb;
+}
+
+.ui.label {
+    color: #dbdbdb;
+    background-color: #404552;
+}
+
+.issue.list > .item .title {
+    color: #87ab63;
+}
+
+.issue.list > .item .title:hover {
+    color: #a0cc75;
+}
+
+.issue.list > .item {
+    border-bottom: 1px dashed #475767;
+}
+
+.ui.green.label,
+.ui.green.labels .label,
+.ui.basic.green.label {
+    background-color: #2d693b !important;
+    border-color: #2d693b !important;
+}
+
+.ui.basic.green.labels a.label:hover,
+a.ui.basic.green.label:hover {
+    background-color: #16ab39 !important;
+    border-color: #16ab39 !important;
+    color: #ffffff !important;
+}
+
+.issue.list > .item .comment {
+    color: #129c92;
+}
+
+.ui.basic.button,
+.ui.basic.buttons .button {
+    color: #797979 !important;
+}
+
+.ui.basic.red.active.button,
+.ui.basic.red.buttons .active.button {
+    box-shadow: 0 0 0 1px #c75252 inset !important;
+    color: #c75252 !important;
+}
+
+.ui.basic.button:focus,
+.ui.basic.button:hover,
+.ui.basic.buttons .button:focus,
+.ui.basic.buttons .button:hover {
+    background: transparent !important;
+    color: #dbdbdb !important;
+}
+
+.ui.menu .item {
+    background: #404552;
+    color: #9e9e9e;
+}
+
+.ui.menu .item.disabled,
+.ui.menu .item.disabled:hover {
+    color: #626773;
+}
+
+.ui.pagination.menu .active.item {
+    color: #dbdbdb;
+    background-color: #87ab63;
+}
+
+.repository .header-wrapper {
+    background-color: #2a2e3a;
+}
+
+.ui.tabular.menu .active.item {
+    background: #383c4a;
+    color: #dbdbdb;
+    border-left: 1px solid transparent;
+    border-right: 1px solid transparent;
+    border-top: 0;
+}
+
+.ui.tabular.menu .item {
+    color: #9e9e9e;
+}
+
+.ui.tabular.menu .item:hover {
+    color: #dbdbdb;
+}
+
+.ui.header,
+.ui.breadcrumb .divider {
+    color: #9e9e9e;
+}
+
+.ui.blue.label,
+.ui.blue.labels .label {
+    background-color: #26577b !important;
+    border-color: #26577b !important;
+}
+
+.ui.menu .item > .label {
+    background: #565454;
+}
+
+.ui.blue.button,
+.ui.blue.buttons .button {
+    background-color: #87ab63;
+}
+
+.ui.blue.button:hover,
+.ui.blue.buttons .button:hover {
+    background-color: #a0cc75;
+}
+
+.ui.form input:not([type]),
+.ui.form input[type="text"],
+.ui.form input[type="email"],
+.ui.form input[type="search"],
+.ui.form input[type="password"],
+.ui.form input[type="date"],
+.ui.form input[type="datetime-local"],
+.ui.form input[type="tel"],
+.ui.form input[type="time"],
+.ui.form input[type="url"],
+.ui.form input[type="number"] {
+    color: #9e9e9e;
+    background: #404552;
+    border: 2px solid #353945;
+}
+
+.ui.form input:not([type]):focus,
+.ui.form input[type="text"]:focus,
+.ui.form input[type="email"]:focus,
+.ui.form input[type="search"]:focus,
+.ui.form input[type="password"]:focus,
+.ui.form input[type="date"]:focus,
+.ui.form input[type="datetime-local"]:focus,
+.ui.form input[type="tel"]:focus,
+.ui.form input[type="time"]:focus,
+.ui.form input[type="url"]:focus,
+.ui.form input[type="number"]:focus {
+    background: #404552;
+    border: 2px solid #4b505f;
+    color: #dbdbdb;
+}
+
+.ui.action.input:not([class*="left action"]) input:focus {
+    border-right-color: #4b505f !important;
+}
+
+.ui.green.button,
+.ui.green.buttons .button {
+    background-color: #87ab63;
+}
+
+.ui.green.button:hover,
+.ui.green.buttons .button:hover {
+    background-color: #a0cc75;
+}
+
+.ui.button {
+    background: #383c4a;
+    border: 1px solid #4c505c;
+    color: #dbdbdb;
+}
+
+.ui.labeled.button:not([class*="left labeled"]) > .label,
+.ui[class*="left labeled"].button > .button {
+    background: #404552;
+    border: 1px solid #4c505c;
+    color: #87ab63;
+}
+
+.ui.button:hover {
+    background-color: #404552;
+    color: #dbdbdb;
+}
+
+.ui.table thead th {
+    background: #404552;
+    color: #dbdbdb;
+}
+
+.repository.file.list #repo-files-table tr:hover {
+    background-color: #393d4a;
+}
+
+.ui.table {
+    color: #a5a5a5 !important;
+    border-color: #4c505c;
+    background: #353945;
+}
+
+.ui.table tbody tr {
+    border-color: #333640;
+    background: #2a2e3a;
+}
+
+.ui .text.grey {
+    color: #808084 !important;
+}
+
+.ui.attached.table.segment {
+    background: #353945;
+    color: #dbdbdb !important;
+}
+
+.markdown:not(code) h2 {
+    border-bottom: 1px solid #304251;
+}
+
+.hljs,
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-subst {
+    color: #9daccc;
+}
+
+.markdown:not(code) .highlight pre,
+.markdown:not(code) pre {
+    background-color: #2a2e3a;
+    border: 1px solid #404552;
+}
+
+.markdown:not(code) table tr:nth-child(2n) {
+    background-color: #2a2e39;
+}
+
+.markdown:not(code) table tr:nth-child(2n-1) {
+    background-color: #383b44;
+}
+
+.markdown:not(code) table thead tr:nth-child(2n-1) {
+    background-color: #464c5d !important;
+}
+
+.markdown:not(code) table td,
+.markdown:not(code) table th {
+    border-color: #4c505c !important;
+}
+
+.repository.file.editor.edit,
+.repository.wiki.new .CodeMirror {
+    border-right: 1px solid rgba(187, 187, 187, 0.6);
+    border-left: 1px solid rgba(187, 187, 187, 0.6);
+    border-bottom: 1px solid rgba(187, 187, 187, 0.6);
+
+    .editor-preview,
+    .editor-preview-side {
+        background: #353945;
+
+        .markdown:not(code).ui.segment {
+            border-width: 0;
+        }
+    }
+}
+
+.ui.dropdown .menu {
+    background: #2c303a;
+}
+
+.ui.dropdown .menu > .message:not(.ui) {
+    color: #636363;
+}
+
+.ui.input {
+    color: #dbdbdb;
+}
+
+.overflow.menu .items .item {
+    color: #9d9d9d;
+}
+
+.overflow.menu .items .item:hover {
+    color: #dbdbdb;
+}
+
+.ui.segment {
+    background: #353945;
+    color: #9e9e9e !important;
+    border: 1px solid #404552;
+}
+
+.ui.active.button:active,
+.ui.button:active,
+.ui.button:focus {
+    background-color: #2e3e4e;
+    color: #dbdbdb;
+}
+
+.ui.dropdown .menu .selected.item,
+.ui.dropdown.selected {
+    color: #dbdbdb;
+}
+
+.ui.dropdown .menu > .item:hover {
+    color: #dbdbdb;
+}
+
+.ui.dropdown .menu > .item {
+    color: #9e9e9e;
+}
+
+.ui.attached.segment {
+    border: 1px solid #404552;
+}
+
+.repository.view.issue .comment-list .comment .content > .bottom.segment {
+    background: #353945;
+}
+
+.repository.view.issue .comment-list .comment .content .header {
+    color: #dbdbdb;
+    background-color: #404552;
+    border-bottom: 1px solid #353944;
+}
+
+.repository.view.issue .comment-list .comment .content .merge-section {
+    background-color: #404552;
+    border-top: 1px solid #353944;
+}
+
+.repository.view.issue .comment-list .event > .octicon.issue-symbol {
+    background: #3b4954;
+}
+
+.repository.view.issue .comment-list .event > .octicon:not(.issue-symbol) {
+    text-shadow: -2px 0 #383c4a, 0 2px #383c4a, 2px 0 #383c4a, 0 -2px #383c4a;
+}
+
+.ui .text.grey a {
+    color: #dbdbdb !important;
+}
+
+.ui.comments .comment .actions a {
+    color: #dbdbdb;
+}
+
+.repository.view.issue .comment-list .comment .content .header:after {
+    border-right-color: #404552;
+}
+
+.repository.new.issue .comment.form .content:after {
+    border-right-color: #353945;
+}
+
+.repository.view.issue .comment-list .comment .content .header:before {
+    border-right-color: #404552;
+}
+
+.repository.new.issue .comment.form .content:before {
+    border-right-color: #353945;
+}
+
+.repository.view.issue .comment-list:not(.prevent-before-timeline):before,
+.repository.view.issue .comment-list .timeline-line:before {
+    background-color: #3b4954;
+}
+
+.repository .comment.form .content .form:after {
+    border-right-color: #313c47;
+}
+
+.repository .comment.form .content .form:before {
+    border-right-color: #313c47;
+}
+
+.ui .text.grey a:hover {
+    color: #dbdbdb !important;
+}
+
+.ui.basic.green.active.button,
+.ui.basic.green.buttons .active.button {
+    color: #13ae38 !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;
+}
+
+.repository .diff-file-box .code-diff-unified tbody tr.del-code td {
+    background-color: #3c2626 !important;
+    border-color: #634343 !important;
+}
+
+.repository .diff-file-box .code-diff-unified tbody tr.add-code td {
+    background-color: #283e2d !important;
+    border-color: #314a37 !important;
+}
+
+.repository .diff-file-box .code-diff tbody tr .added-code {
+    background-color: #3a523a;
+}
+
+.hljs-title,
+.hljs-section,
+.hljs-selector-id {
+    color: #986c88;
+}
+
+.hljs-string,
+.hljs-doctag {
+    color: #8ab398;
+}
+
+.repository .diff-file-box .code-diff tbody tr .removed-code {
+    background-color: #5f3737;
+}
+
+.tag-code,
+.tag-code td {
+    background: #242637 !important;
+    border-color: transparent !important;
+}
+
+.ui.vertical.menu .active.item {
+    background: #4b5162;
+}
+
+.ui.vertical.menu .item {
+    background: #353945;
+}
+
+.ui.vertical.menu .header.item {
+    background: #404552;
+}
+
+.ui.vertical.menu {
+    background: #353945;
+    border: 1px solid #333640;
+}
+
+.ui.repository.list .item:not(:first-child) {
+    border-top: 1px solid #4c505c;
+}
+
+.ui .text.blue {
+    color: #87ab63 !important;
+}
+
+.ui.selection.active.dropdown,
+.ui.selection.active.dropdown .menu {
+    border-color: #4e5361;
+    box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
+}
+
+.ui.selection.active.dropdown:hover,
+.ui.selection.active.dropdown:hover .menu {
+    border-color: #4e5361;
+    box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
+}
+
+.ui.selection.dropdown {
+    background: #404552;
+    border: 1px solid #404552;
+    color: #9e9e9e;
+}
+
+.ui.menu .ui.dropdown .menu > .active.item {
+    color: #dbdbdb !important;
+}
+
+.ui.tabular.menu {
+    border-bottom: 1px solid #313c47;
+}
+
+.ui.card,
+.ui.cards > .card {
+    background: #353945;
+    box-shadow: 0 1px 3px 0 #4c505c, 0 0 0 1px #4c505c;
+}
+
+.ui.card > .content > .header,
+.ui.cards > .card > .content > .header {
+    color: #dbdbdb;
+}
+
+.ui.card > .extra a:not(.ui),
+.ui.cards > .card > .extra a:not(.ui) {
+    color: #87ab63;
+}
+
+.ui .text.black {
+    color: #9e9e9e;
+}
+
+.ui .text.black:hover {
+    color: #dbdbdb;
+}
+
+.ui.secondary.segment {
+    background: #353945;
+}
+
+.ui.secondary.pointing.menu .active.item {
+    color: #dbdbdb;
+    border: 0;
+    background: #383c4a;
+}
+
+.ui.user.list .item:not(:first-child) {
+    border-top: 1px solid #4c505c;
+}
+
+.ui.secondary.pointing.menu .active.item:hover {
+    border-color: #af8b4c;
+    color: #dbdbdb;
+    background: #4b5162;
+}
+
+.ui.secondary.pointing.menu .dropdown.item:hover,
+.ui.secondary.pointing.menu .link.item:hover,
+.ui.secondary.pointing.menu a.item:hover {
+    color: #dbdbdb;
+}
+
+.ui.checkbox label,
+.ui.checkbox + label,
+.ui.form .field > label {
+    color: #9e9e9e;
+}
+
+.ui.form .inline.field > label,
+.ui.form .inline.field > p,
+.ui.form .inline.fields .field > label,
+.ui.form .inline.fields .field > p,
+.ui.form .inline.fields > label {
+    color: #9e9e9e;
+}
+
+.user.settings .email.list .item:not(:first-child) {
+    border-top: 1px solid #3f4451;
+}
+
+.explore .navbar {
+    background-color: #2a2e3a !important;
+}
+
+.ui.menu.new-menu {
+    background-color: #2a2e3a !important;
+
+    @media only screen and (max-width: 1200px) {
+        &:after {
+            background-image: linear-gradient(to right, rgba(42, 46, 42, 0), rgba(42, 46, 42, 1) 100%);
+        }
+    }
+}
+
+input {
+    background: #2e323e;
+}
+
+.settings .key.list .item:not(:first-child) {
+    border-top: 1px solid #404552;
+}
+
+.ui.attached.info.message,
+.ui.info.message {
+    box-shadow: 0 0 0 1px #4b5e71 inset, 0 0 0 0 transparent;
+}
+
+.ui.bottom.attached.message {
+    background-color: #2c662d;
+    color: #87ab63;
+}
+
+.ui.bottom.attached.message .pull-right {
+    color: #87ab63;
+}
+
+.ui.info.message {
+    background-color: #2c3b4a;
+    color: #9ebcc5;
+}
+
+.ui .warning.header {
+    background-color: #5d3a22 !important;
+    border-color: #794f31;
+}
+
+.ui.red.message {
+    background-color: rgba(80, 23, 17, 0.6);
+    color: #f9cbcb;
+    box-shadow: 0 0 0 1px rgba(121, 71, 66, 0.5) inset, 0 0 0 0 transparent;
+}
+
+.ui.red.button,
+.ui.red.buttons .button {
+    background-color: #7d3434;
+}
+
+.ui.red.button:hover,
+.ui.red.buttons .button:hover {
+    background-color: #984646;
+}
+
+.ui.checkbox label:hover,
+.ui.checkbox + label:hover {
+    color: #dbdbdb !important;
+}
+
+.ui.checkbox input:checked ~ .box:after,
+.ui.checkbox input:checked ~ label:after {
+    color: #7f98ad;
+}
+
+.ui.checkbox input:checked ~ .box:before,
+.ui.checkbox input:checked ~ label:before {
+    background: #304251;
+    opacity: 1;
+    color: #7f98ad;
+    border-color: #304251;
+}
+
+.ui.checkbox .box:hover::before,
+.ui.checkbox label:hover::before {
+    background: #304251;
+}
+
+.ui.checkbox .box:before,
+.ui.checkbox label:before {
+    background: #304251;
+    border: 1px solid #304251;
+}
+
+.ui.checkbox label:before {
+    border-color: #476075;
+}
+
+.ui.checkbox .box:active::before,
+.ui.checkbox label:active::before {
+    background: #304251;
+    border-color: rgba(34, 36, 38, 0.35);
+}
+
+.ui.checkbox input:focus ~ .box:before,
+.ui.checkbox input:focus ~ label:before {
+    border-color: #304251;
+    background: #304251;
+}
+
+.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;
+}
+
+.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;
+}
+
+.ui.checkbox input:focus ~ .box:after,
+.ui.checkbox input:focus ~ label,
+.ui.checkbox input:focus ~ label:after {
+    color: #9a9a9a;
+}
+
+.ui.selection.dropdown:hover {
+    border: 1px solid #456580;
+}
+
+.ui.selection.dropdown .menu > .item {
+    border-top: 1px solid #313c47;
+}
+
+.ui.selection.visible.dropdown > .text:not(.default) {
+    color: #9e9e9e;
+}
+
+.ui.negative.message {
+    background-color: rgba(80, 23, 17, 0.6);
+    color: #f9cbcb;
+    box-shadow: 0 0 0 1px rgba(121, 71, 66, 0.5) inset, 0 0 0 0 transparent;
+}
+
+.hljs-tag,
+.hljs-name,
+.hljs-attribute {
+    color: #ef5e77;
+}
+
+.user.profile .ui.card .extra.content ul li:not(:last-child) {
+    border-bottom: 1px solid #4c505c;
+}
+
+.hljs-number,
+.hljs-literal,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag .hljs-attr {
+    color: #bd84bf;
+}
+
+.ui.form .dropzone {
+    border: 2px dashed #4c505c;
+}
+
+.ui.basic.red.button,
+.ui.basic.red.buttons .button {
+    box-shadow: 0 0 0 1px #a04141 inset !important;
+    color: #a04141 !important;
+}
+
+.ui.list .list > .item .header,
+.ui.list > .item .header {
+    color: #dedede;
+}
+
+.ui.list .list > .item .description,
+.ui.list > .item .description {
+    color: #9e9e9e;
+}
+
+.ui.user.list .item .description a {
+    color: #668cb1;
+}
+
+.repository.file.list #repo-files-table tbody .octicon.octicon-file-directory,
+.repository.file.list #repo-files-table tbody .octicon.octicon-file-submodule {
+    color: #7c9b5e;
+}
+
+.ui.blue.button:focus,
+.ui.blue.buttons .button:focus {
+    background-color: #a27558;
+}
+
+.ui.basic.blue.button:hover,
+.ui.basic.blue.buttons .button:hover {
+    box-shadow: 0 0 0 1px #87ab63 inset !important;
+    color: #87ab63 !important;
+}
+
+.ui.basic.blue.button:focus,
+.ui.basic.blue.buttons .button:focus {
+    box-shadow: 0 0 0 1px #87ab63 inset !important;
+    color: #87ab63 !important;
+}
+
+.lines-commit {
+    background: #2e323e !important;
+}
+
+.bottom-line {
+    border-color: #4e525e !important;
+}
+
+.lines-num {
+    background: #2e323e !important;
+    color: #9e9e9e !important;
+    border-color: #2d2d2d !important;
+}
+
+.lines-num pre,
+.lines-code pre,
+.lines-num ol,
+.lines-code ol,
+.lines-num .hljs,
+.lines-code .hljs {
+    background-color: #2a2e3a !important;
+}
+
+.code-view .active {
+    background: #554a00;
+}
+
+a.ui.label:hover,
+a.ui.labels .label:hover {
+    background-color: #505667 !important;
+    color: #dbdbdb !important;
+}
+
+.repository #commits-table td.sha .sha.label,
+.repository #repo-files-table .sha.label {
+    border-color: #888;
+}
+
+.repository #commits-table td.sha .sha.label.isSigned .detail.icon,
+.repository #repo-files-table .sha.label.isSigned .detail.icon {
+    background: none;
+    border-left-color: #888;
+}
+
+.repository .label.list .item {
+    border-bottom: 1px dashed #4c505c;
+}
+
+.ui.basic.blue.button,
+.ui.basic.blue.buttons .button {
+    box-shadow: 0 0 0 1px #87ab63 inset !important;
+    color: #87ab63 !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),
+.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(4),
+.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(5),
+.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(6) {
+    background-color: #2a2e3a;
+}
+
+.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(4),
+.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(5),
+.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(6),
+.repository .diff-file-box .code-diff-split tbody tr td.add-code {
+    background-color: #283e2d !important;
+    border-color: #314a37 !important;
+}
+
+.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(1),
+.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(2),
+.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(3),
+.repository .diff-file-box .code-diff-split tbody tr td.del-code {
+    background-color: #3c2626 !important;
+    border-color: #634343 !important;
+}
+
+.ui.blue.button:active,
+.ui.blue.buttons .button:active {
+    background-color: #a27558;
+}
+
+#git-graph-container li a {
+    color: #c79575;
+}
+
+#git-graph-container li .author {
+    color: #c79575;
+}
+
+.ui.header .sub.header {
+    color: #9e9e9e;
+}
+
+.ui.dividing.header {
+    border-bottom: 1px solid #4c505c;
+}
+
+.ui.modal > .header {
+    background: #404552;
+    color: #dbdbdb;
+}
+
+.ui.modal > .actions {
+    background: #404552;
+    border-top: 1px solid #404552;
+}
+
+.ui.modal > .content {
+    background: #383c4a;
+}
+
+.editor-toolbar {
+    background-color: #404552;
+
+    a {
+        color: #87ab63 !important;
+    }
+}
+
+.repository .diff-detail-box {
+    background-color: #383c4a;
+
+    .detail-files {
+        background-color: inherit;
+    }
+}
+
+.comment-code-cloud {
+    .ui.attached.tabular.menu {
+        background: none transparent;
+        border: 0;
+    }
+
+    .footer .markdown-info {
+        color: inherit;
+    }
+}
+
+.file-comment {
+    color: #888888;
+}
+
+.ui.comments .comment {
+    .author {
+        color: #dbdbdb;
+    }
+
+    .metadata {
+        color: #808084;
+    }
+
+    .text {
+        color: #9e9e9e;
+    }
+}
+
+.xdsoft_datetimepicker {
+    background: #2a2e39;
+    border: 1px solid #4c505c;
+    color: #9e9e9e;
+
+    .xdsoft_mounthpicker {
+        height: 36px;
+        background: #464c5d;
+        margin: -2px -8px 2px;
+        padding: 2px 8px 0;
+
+        button {
+            background-image: none;
+            text-indent: 0;
+            text-align: center;
+            color: #9e9e9e;
+
+            &.xdsoft_prev::before {
+                content: "\f0d9";
+                font: normal normal normal 14px/1 FontAwesome, serif;
+                font-size: 1.7em;
+            }
+
+            &.xdsoft_next::before {
+                content: "\f0da";
+                font: normal normal normal 14px/1 FontAwesome, serif;
+                font-size: 1.7em;
+            }
+
+            &.xdsoft_today_button::before {
+                content: "\f015";
+                font: normal normal normal 14px/1 FontAwesome, serif;
+                font-size: 1.4em;
+            }
+        }
+
+        & > div.xdsoft_label {
+            background: #464c5d;
+
+            i {
+                line-height: 14px;
+                background-image: none;
+                text-indent: 0;
+                text-align: center;
+
+                ::before {
+                    content: "\f0dd";
+                    font: normal normal normal 14px/1 FontAwesome, serif;
+                    font-size: 0.7em;
+                }
+            }
+
+            .xdsoft_select {
+                background: #353945;
+            }
+        }
+    }
+
+    .xdsoft_datepicker .xdsoft_calendar {
+        td,
+        th {
+            border-color: #4c505c;
+            background-color: #2a2e39;
+        }
+
+        td.xdsoft_other_month,
+        td.xdsoft_disabled {
+            opacity: 0.8;
+            background: #a0cc75;
+            color: #000000;
+        }
+
+    }
+}
+
+.heatmap(@heat) {
+    @heatmap-cold: #2d303b;
+    @heatmap-hot: #a0cc75;
+    background-color: mix(@heatmap-hot, @heatmap-cold, @heat);
+}
+
+.heatmap-color-0 {
+    .heatmap(0%);
+}
+
+.heatmap-color-1 {
+    .heatmap(20%);
+}
+
+.heatmap-color-2 {
+    .heatmap(40%);
+}
+
+.heatmap-color-3 {
+    .heatmap(60%);
+}
+
+.heatmap-color-4 {
+    .heatmap(80%);
+}
+
+.heatmap-color-5 {
+    .heatmap(100%);
+}
+
+/* code mirror dark theme */
+
+.CodeMirror {
+    color: #9daccc;
+    background-color: #2b2b2b;
+    border-top: 0;
+
+    div.CodeMirror-cursor {
+        border-left: 1px solid #9e9e9e;
+    }
+
+    .CodeMirror-gutters {
+        background-color: #2b2b2b;
+    }
+
+    ::selection,
+    ::-moz-selection,
+    .CodeMirror-selected {
+        background: #42402f !important;
+    }
+
+    &.cm-s-default,
+    &.cm-s-paper {
+        .cm-property {
+            color: #a0cc75;
+        }
+
+        .cm-header {
+            color: #9daccc;
+        }
+
+        .cm-quote {
+            color: #009900;
+        }
+
+        .cm-keyword {
+            color: #cc8a61;
+        }
+
+        .cm-atom {
+            color: #ef5e77;
+        }
+
+        .cm-number {
+            color: #ff5656;
+        }
+
+        .cm-def {
+            color: #e4e4e4;
+        }
+
+        .cm-variable-2 {
+            color: #00bdbf;
+        }
+
+        .cm-variable-3 {
+            color: #008855;
+        }
+
+        .cm-comment {
+            color: #8e9ab3;
+        }
+
+        .cm-string {
+            color: #a77272;
+        }
+
+        .cm-string-2 {
+            color: #ff5500;
+        }
+
+        .cm-meta,
+        .cm-qualifier {
+            color: #ffb176;
+        }
+
+        .cm-builtin {
+            color: #b7c951;
+        }
+
+        .cm-bracket {
+            color: #999977;
+        }
+
+        .cm-tag {
+            color: #f1d273;
+        }
+
+        .cm-attribute {
+            color: #bfcc70;
+        }
+
+        .cm-hr {
+            color: #999999;
+        }
+
+        .cm-url {
+            color: #c5cfd0;
+        }
+
+        .cm-link {
+            color: #d8c792;
+        }
+
+        .cm-error {
+            /* color: #ff6e00; */
+            color: #dbdbeb;
+        }
+    }
+}