gitea/public/ng/less/gogs/base.less

@import "../ui/var";
@headerBgColor: #428BCA;
@headerLinkFontColor: #FFF;
@headerLinkHoverColor: #fff65f;
@headerLinkCurrentColor: #fff65f;
@headerSignOutColor: #ff908b;
@footerBorderColor: #D6D6D6;
@footerFontColor: #888;
@langNum: 2px;
// means 2 items
html,
body {
    height: 100%;
}
.octicon,
.fa {
    width: 16px;
    text-align: center;
}
.container {
    max-width: 1170px;
    padding: 0 1.5em;
    margin: auto;
}
img.avatar-16 {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}
img.avatar-20 {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}
img.avatar-24 {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}
img.avatar-30 {
    width: 30px;
    height: 30px;
    vertical-align: middle;
}
img.avatar-40 {
  width: 40px;
  height: 40px;
  vertical-align: middle;
}
img.avatar-48{
  width: 48px;
  height: 48px;
  vertical-align: middle;
}
img.avatar-100{
  width: 100px;
  height: 100px;
  vertical-align: middle;
}
.drop-down{
  .panel-header{
    font-size: 14px;
  }
}
#wrapper {
    padding: 0;
    margin: 0 0 -55px 0;
    min-height: 100%;
}
#footer {
    background-color: white;
    border-top: 1px solid@footerBorderColor;

clear: both;
    width: 100%;
    .container {
        padding: 15px;
    }
    color:@footerFontColor;
.official,
    .version {
        color: @footerFontColor;
    }
}
#footer-links {
    > * {
        border-left: 1px solid@footerBorderColor;
        padding-left: 8px;
        margin-left: 5px;
        &:first-child {
            border-left: none;
        }
    }
}
#footer-lang {
    position: relative;
    .drop-down {
        top: -2-31*@langNum;
        left: -2px;
        position: absolute;
        height: -3+31*@langNum;
        z-index: 100;
        font-size: 12px;
        width: 170%;
        min-width: 140px;
        li > a {
            padding: 3px 9px;
        }
    }
}
#header {
    background-color: @headerBgColor;
    height: 45px;
    > .menu-line {
        > li > a {
            display: inline-block;
            color:@headerLinkFontColor;
            &:hover {
                background-color: transparent;
                color: @headerLinkHoverColor;
            }
        }
        > li.head {
            color: @headerLinkFontColor;
        }
        > li.hover a:after {
            bottom: -9px;
            color: @headerLinkFontColor;
        }
        > li.current > a {
            color: @headerLinkCurrentColor;
            font-weight: bold;
        }
    }
}
#header-nav-user {
    height: 44px;
    img {
        margin: -2px 10px 0 0;
        border-radius: 3px;
    }
}
#header-nav-sign-out > a:hover {
    color: @headerSignOutColor !important;
}
#header-nav-logo {
    padding: 6px 1.2em 6px 0;
}
#header-nav-explore,
#header-nav-help {
    font-size: 14px;
}
#header-new-repo-menu {
    width: 180px;
    background-color: #FFF;
    top: 44px;
    border-top: none;
    .octicon {
        margin-right: 6px;
        font-size: 1.1em;
    }
    left:-66px;
}
.switching-list {
    width: 100%;
    list-style: none;
    > li {
        border-bottom: 1px solid #eaeaea;
        &:last-child {
            border-bottom: none;
        }
        > a {
            padding: .4em 1.2em;
            display: block;
            color: #444;
            &:hover {
                background-color: #428bca !important;
                color: #fff !important;
            }
        }
    }
}
.social-buttons {
    .btn {
        border: none;
        font-size: 16px;
        border-radius: 4px;
        margin-right: 12px;
        font-family: 'PT Sans Narrow', sans-serif;
        padding: 5px 12px;
        color: #FFF;
        .fa {
            margin-right: 6px;
            font-size: 16px;
        }
    }
    .twitter {
        background-color: #1c6399;
        &:hover {
            background-color: #1c5487;
        }
    }
    .github {
        background-color: #444;
        &:hover {
            background-color: #333;
        }
    }
    .google {
        background-color: #C03D20;
        &:hover {
            background-color: #D56060;
        }
    }
    .weibo {
        background-color: #bf1324;
        &:hover {
            background-color: #b94c4a;
        }
    }
    .qq {
        background-color: #03a2ef;
        &:hover {
            background-color: #3cb3ff;
        }
    }
}
.main-wrapper {
    padding: 20px 0 40px;
}
.user-list {
    width: auto;
    min-width: 180px;
    max-width: 300px;
    img {
        width: 28px;
        height: 28px;
        margin-right: 1em;
        margin-top: 1px;
        vertical-align: middle;
    }
    li {
        cursor: pointer;
        font-weight: bold;
    }
}
.text-success {
    color: #3c763d;
}
.text-blue {
    color: #15c;
}
.text-red {
    color: #DD4B39;
}
.text-grey {
    color: #999999;
}
.text-black {
    color: #444444;
}
.text-gold {
    color: #a1882b;
}
.table {
    width: 100%;
    max-width: 100%;
    > thead > tr > th,
    > tbody > tr > th,
    > tfoot > tr > th,
    > thead > tr > td,
    > tbody > tr > td,
    > tfoot > tr > td {
        border-top: 1px solid #e7eaec;
        line-height: 1.42857;
        padding: 8px;
        vertical-align: top;
    }
    th {
        text-align: left;
    }
}
.table-striped {
    >tbody>tr:nth-child(odd)>td,
    >tbody>tr:nth-child(odd)>th {
        background-color: #f9f9f9;
    }
}
.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
    li {
        display: inline;
    }
}
.list-unstyled {
    padding-left: 0;
    list-style: none;
}
.emoji {
    width: 1.5em;
    height: 1.5em;
    display: inline-block;
}