improve ui details

This commit is contained in:
fuxiaohei 2014-09-23 21:43:45 +08:00
parent 135d3733b3
commit 904f799c1a
4 changed files with 419 additions and 419 deletions

View file

@ -45,6 +45,9 @@ img.avatar-100 {
height: 100px; height: 100px;
vertical-align: middle; vertical-align: middle;
} }
.drop-down .panel-header {
font-size: 14px;
}
#wrapper { #wrapper {
padding: 0; padding: 0;
margin: 0 0 -55px 0; margin: 0 0 -55px 0;
@ -703,11 +706,12 @@ ol.linenums {
height: 69px; height: 69px;
} }
#dashboard-header > .menu-line > li { #dashboard-header > .menu-line > li {
padding: 12px 0; padding: 12px 6px;
} }
#dashboard-header > .menu-line > li.right > a { #dashboard-header > .menu-line > li.right > a {
font-size: 1.2em; font-size: 1.2em;
color: #444444; color: #444444;
padding: .4em .8em;
} }
#dashboard-header > .menu-line > li.right > a:hover { #dashboard-header > .menu-line > li.right > a:hover {
background-color: transparent; background-color: transparent;
@ -724,6 +728,7 @@ ol.linenums {
} }
#dashboard { #dashboard {
padding: 24px 0; padding: 24px 0;
margin-bottom: 60px;
} }
#dashboard-sidebar .panel-header h4 { #dashboard-sidebar .panel-header h4 {
margin: 0; margin: 0;
@ -737,7 +742,7 @@ ol.linenums {
border-top-left-radius: .3em; border-top-left-radius: .3em;
border-top-right-radius: .3em; border-top-right-radius: .3em;
width: 100%; width: 100%;
height: 35px; height: 32px;
} }
#dashboard-sidebar-menu > li { #dashboard-sidebar-menu > li {
border: 1px solid #d6d6d6; border: 1px solid #d6d6d6;
@ -746,8 +751,8 @@ ol.linenums {
border-bottom: none; border-bottom: none;
} }
#dashboard-sidebar-menu > li > a { #dashboard-sidebar-menu > li > a {
padding-top: .4em; padding-top: .3em;
padding-bottom: .4em; padding-bottom: .3em;
} }
#dashboard-sidebar-menu > li.first { #dashboard-sidebar-menu > li.first {
border-top-left-radius: .3em; border-top-left-radius: .3em;
@ -821,6 +826,7 @@ ol.linenums {
} }
#dashboard-my-repo .repo-count { #dashboard-my-repo .repo-count {
margin-left: 4px; margin-left: 4px;
font-size: .8em;
} }
#dashboard-my-org, #dashboard-my-org,
#dashboard-my-mirror { #dashboard-my-mirror {
@ -828,7 +834,7 @@ ol.linenums {
} }
#dashboard-new-repo { #dashboard-new-repo {
width: 50px; width: 50px;
height: 35px; height: 33px;
padding-top: 6px; padding-top: 6px;
margin-right: 1px; margin-right: 1px;
border-top-left-radius: .3em; border-top-left-radius: .3em;
@ -994,7 +1000,6 @@ The register and sign-in page style
} }
#repo-header-meta a > .btn { #repo-header-meta a > .btn {
line-height: 16px; line-height: 16px;
font-size: 1.05em;
margin-left: 16px; margin-left: 16px;
} }
#repo-header-meta a > .btn i { #repo-header-meta a > .btn i {

View file

@ -55,6 +55,11 @@ img.avatar-100{
height: 100px; height: 100px;
vertical-align: middle; vertical-align: middle;
} }
.drop-down{
.panel-header{
font-size: 14px;
}
}
#wrapper { #wrapper {
padding: 0; padding: 0;
margin: 0 0 -55px 0; margin: 0 0 -55px 0;

View file

@ -14,12 +14,13 @@
height: 69px; height: 69px;
> .menu-line { > .menu-line {
> li { > li {
padding: 12px 0; padding: 12px 6px;
} }
> li.right { > li.right {
> a { > a {
font-size: 1.2em; font-size: 1.2em;
color: @dashboardHeaderLinkColor; color: @dashboardHeaderLinkColor;
padding: .4em .8em;
&:hover { &:hover {
background-color: transparent; background-color: transparent;
color: @dashboardHeaderLinkHoverColor; color: @dashboardHeaderLinkHoverColor;
@ -34,18 +35,16 @@
} }
} }
} }
// dashboard context switch selection // dashboard context switch selection
#dashboard-selection-menu { #dashboard-selection-menu {
a img { a img {
margin: -4px 10px 0 0; margin: -4px 10px 0 0;
} }
} }
#dashboard { #dashboard {
padding: 24px 0; padding: 24px 0;
margin-bottom: 60px;
} }
// dashboard sidebar contains contributed repositories panel, // dashboard sidebar contains contributed repositories panel,
// and my repositories panel // and my repositories panel
#dashboard-sidebar { #dashboard-sidebar {
@ -58,7 +57,6 @@
border-bottom-right-radius: .3em; border-bottom-right-radius: .3em;
} }
} }
#dashboard-sidebar-menu { #dashboard-sidebar-menu {
border-top-left-radius: .3em; border-top-left-radius: .3em;
border-top-right-radius: .3em; border-top-right-radius: .3em;
@ -68,8 +66,8 @@
margin-right: -1px; margin-right: -1px;
border-bottom: none; border-bottom: none;
> a { > a {
padding-top: .4em; padding-top: .3em;
padding-bottom: .4em; padding-bottom: .3em;
} }
} }
> li.first { > li.first {
@ -83,7 +81,7 @@
float: right; float: right;
} }
width: 100%; width: 100%;
height: 35px; height: 32px;
> li.js-tab-nav-show { > li.js-tab-nav-show {
background-color: #EEEEEE; background-color: #EEEEEE;
} }
@ -94,7 +92,6 @@
} }
} }
} }
#dashboard-my-mirror, #dashboard-my-mirror,
#dashboard-my-org, #dashboard-my-org,
#dashboard-my-repo { #dashboard-my-repo {
@ -130,7 +127,6 @@
border-top: 1px solid #d6d6d6; border-top: 1px solid #d6d6d6;
} }
} }
#dashboard-my-repo { #dashboard-my-repo {
.panel-header { .panel-header {
.octicon { .octicon {
@ -140,18 +136,17 @@
} }
.repo-count { .repo-count {
margin-left: 4px; margin-left: 4px;
font-size: .8em;
} }
} }
#dashboard-my-org, #dashboard-my-org,
#dashboard-my-mirror { #dashboard-my-mirror {
display: none; display: none;
} }
// the button of new repository in my repositories panel // the button of new repository in my repositories panel
#dashboard-new-repo { #dashboard-new-repo {
width: 50px; width: 50px;
height: 35px; height: 33px;
padding-top: 6px; padding-top: 6px;
margin-right: 1px; margin-right: 1px;
.octicon { .octicon {
@ -160,7 +155,6 @@
border-top-left-radius: .3em; border-top-left-radius: .3em;
border-top-right-radius: .3em; border-top-right-radius: .3em;
} }
// the drop-down menu of #dashboard-new-repo // the drop-down menu of #dashboard-new-repo
#dashboard-new-repo-menu { #dashboard-new-repo-menu {
top: 35px; top: 35px;
@ -172,28 +166,26 @@
font-size: 1.1em; font-size: 1.1em;
} }
} }
#dashboard-selection-menu { #dashboard-selection-menu {
width: auto; width: auto;
max-width: 300px; max-width: 300px;
> .drop-down { > .drop-down {
top: 56px; top: 56px;
}
li {
white-space: nowrap;
&.checked {
.octicon {
opacity: 1;
}
} }
li { a {
white-space: nowrap; text-overflow: ellipsis;
&.checked { -o-text-overflow: ellipsis;
.octicon { overflow: hidden;
opacity: 1;
}
}
a {
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
overflow: hidden;
}
} }
}
} }
// the drop-down menu of #dashboard-selection-menu // the drop-down menu of #dashboard-selection-menu
#dashboard-switch-menu { #dashboard-switch-menu {
> li { > li {
@ -226,7 +218,6 @@
border-bottom-left-radius: .3em; border-bottom-left-radius: .3em;
border-bottom-right-radius: .3em; border-bottom-right-radius: .3em;
} }
#dashboard-news { #dashboard-news {
.news { .news {
margin-right: 2.4em; margin-right: 2.4em;

View file

@ -6,460 +6,459 @@
/* repository main */ /* repository main */
#repo-wrapper { #repo-wrapper {
padding-bottom: 100px; padding-bottom: 100px;
} }
#repo-header { #repo-header {
height: 69px; height: 69px;
border-bottom: 1px solid@repoHeaderBorderColor; border-bottom: 1px solid@repoHeaderBorderColor;
background-color: @repoHeaderBgColor; background-color: @repoHeaderBgColor;
} }
#repo-header-name { #repo-header-name {
line-height: 66px; line-height: 66px;
color: @repoHeaderNameColor; color: @repoHeaderNameColor;
font-size: 1.6em; font-size: 1.6em;
font-weight: normal; font-weight: normal;
margin-bottom: 0; margin-bottom: 0;
i { i {
margin-right: 12px; margin-right: 12px;
vertical-align: middle; vertical-align: middle;
} }
.divider { .divider {
margin: 0 4px; margin: 0 4px;
} }
} }
#repo-header-meta { #repo-header-meta {
line-height: 66px; line-height: 66px;
li { li {
> a { > a {
padding: 0; padding: 0;
&:hover { &:hover {
background-color: transparent; background-color: transparent;
} }
} }
} }
a { a {
&>.btn { & > .btn {
line-height: 16px; line-height: 16px;
font-size: 1.05em; margin-left: 16px;
margin-left: 16px; i {
i { margin-right: 6px;
margin-right: 6px; }
} .num {
.num { margin-left: 6px;
margin-left: 6px; }
} }
} }
}
} }
#repo-header-download-btn { #repo-header-download-btn {
> .btn > i { > .btn > i {
margin-right: 0 !important; margin-right: 0 !important;
} }
&:hover { &:hover {
&:after, .btn { &:after, .btn {
background-color: @btnHoverBlackColor; background-color: @btnHoverBlackColor;
color: #FFF; color: #FFF;
} }
} }
&:after { &:after {
background-color: @btnBlackColor; background-color: @btnBlackColor;
padding: 9px 16px 8px 0; padding: 9px 16px 8px 0;
margin-left: -8px !important; margin-left: -8px !important;
color: #FFF; color: #FFF;
border-top: 1px solid@btnBlackColor; border-top: 1px solid@btnBlackColor;
border-bottom: 1px solid@btnBlackColor; border-bottom: 1px solid@btnBlackColor;
border-top-right-radius: .25em; border-top-right-radius: .25em;
border-bottom-right-radius: .25em; border-bottom-right-radius: .25em;
} }
} }
#repo-header-download-drop { #repo-header-download-drop {
line-height: 24px; line-height: 24px;
width: 440px; width: 440px;
top: 50px; top: 50px;
left: -370px; left: -370px;
padding: 20px; padding: 20px;
box-sizing: border-box; box-sizing: border-box;
z-index: 1; z-index: 1;
.btn > i { .btn > i {
margin-right: 6px; margin-right: 6px;
} }
button, button,
input { input {
font-size: 11px; font-size: 11px;
} }
} }
#repo-content { #repo-content {
padding: 18px 0; padding: 18px 0;
} }
#repo-clone-url { #repo-clone-url {
border-right: none; border-right: none;
width: 190px; width: 190px;
border-left: none; border-left: none;
} }
#repo-clone-help { #repo-clone-help {
clear: both; clear: both;
line-height: 48px; line-height: 48px;
} }
#repo-clone-zip { #repo-clone-zip {
line-height: 48px; line-height: 48px;
a { a {
cursor: pointer; cursor: pointer;
color: white; color: white;
overflow: visible; overflow: visible;
padding: .6em 1.2em; padding: .6em 1.2em;
} }
.btn { .btn {
margin: 0 6px; margin: 0 6px;
} }
} }
#repo-desc { #repo-desc {
font-size: 1.2em; font-size: 1.2em;
} }
#repo-sidebar-nav { #repo-sidebar-nav {
.label { .label {
font-size: 12px; font-size: 12px;
line-height: 1.4em; line-height: 1.4em;
margin-top: 2px; margin-top: 2px;
} }
i { i {
margin-right: 6px; margin-right: 6px;
} }
} }
#repo-file-nav { #repo-file-nav {
padding: .6em 0 1em 0; padding: .6em 0 1em 0;
> li > a { > li > a {
padding-left: 0; padding-left: 0;
&:hover { &:hover {
background-color: transparent; background-color: transparent;
} }
} }
li.repo-jump > a { li.repo-jump > a {
padding-right: 0; padding-right: 0;
.btn { .btn {
margin-left: -1px; margin-left: -1px;
} }
} }
} }
#repo-branch-switch { #repo-branch-switch {
> a { > a {
.btn { .btn {
padding-right: 30px; padding-right: 30px;
} }
&:after { &:after {
position: absolute; position: absolute;
top: 12px; top: 12px;
right: 30px; right: 30px;
margin-left: 0; margin-left: 0;
color: @baseFontColor; color: @baseFontColor;
} }
} }
> .drop-down { > .drop-down {
top: 40px; top: 40px;
left: 0; left: 0;
} }
} }
#repo-branch-filter-ipt { #repo-branch-filter-ipt {
width: 100%; width: 100%;
border-left: none; border-left: none;
border-right: none; border-right: none;
box-sizing: border-box; box-sizing: border-box;
} }
#repo-branch-tag { #repo-branch-tag {
.tab-nav { .tab-nav {
border-bottom: 1px solid #EAEAEA; border-bottom: 1px solid #EAEAEA;
a { a {
padding: .3em .8em; padding: .3em .8em;
} }
.js-tab-nav-show { .js-tab-nav-show {
background-color: #EEE; background-color: #EEE;
font-weight: bold; font-weight: bold;
} }
} }
} }
#repo-branch-list, #repo-branch-list,
#repo-tag-list { #repo-tag-list {
li { li {
i { i {
margin-right: 12px; margin-right: 12px;
opacity: 0; opacity: 0;
} }
} }
li.checked { li.checked {
i { i {
opacity: 1; opacity: 1;
} }
} }
} }
#repo-tag-list { #repo-tag-list {
display: none; display: none;
} }
#repo-bread { #repo-bread {
.bread { .bread {
padding-right: 0; padding-right: 0;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
} }
} }
#repo-main { #repo-main {
padding-right: 40px; padding-right: 40px;
box-sizing: border-box; box-sizing: border-box;
} }
#repo-files-table { #repo-files-table {
margin-bottom: 20px; margin-bottom: 20px;
th, td { th, td {
text-align: left; text-align: left;
line-height: 32px; line-height: 32px;
} }
td.icon { td.icon {
width: 16px; width: 16px;
padding-right: .1em; padding-right: .1em;
padding-left: 1em; padding-left: 1em;
} }
td.name { td.name {
max-width: 120px; max-width: 120px;
.text-truncate { .text-truncate {
max-width: 100%; max-width: 100%;
} }
} }
td.age { td.age {
max-width: 120px; max-width: 120px;
text-align: right; text-align: right;
} }
td.msg { td.msg {
max-width: 440px; max-width: 440px;
.text-truncate { .text-truncate {
max-width: 100%; max-width: 100%;
} }
} }
td.age, td.age,
td.size, td.size,
td.msg a { td.msg a {
color: #888; color: #888;
} }
td.msg a:hover { td.msg a:hover {
color: #428BCA; color: #428BCA;
text-decoration: underline; text-decoration: underline;
} }
tbody { tbody {
background-color: #FFF; background-color: #FFF;
tr:hover { tr:hover {
background-color: #ffffEE; background-color: #ffffEE;
} }
} }
thead { thead {
background-color: #F0F0F0; background-color: #F0F0F0;
.author { .author {
a { a {
margin: 0 .4em; margin: 0 .4em;
} }
} }
.last-commit { .last-commit {
strong { strong {
color: #444; color: #444;
} }
.text-truncate { .text-truncate {
margin-left: .4em; margin-left: .4em;
} }
} }
.last-commit .text-truncate, .last-commit .text-truncate,
.age { .age {
font-weight: normal; font-weight: normal;
color: #888; color: #888;
} }
} }
} }
#repo-readme { #repo-readme {
margin-bottom: 80px; margin-bottom: 80px;
} }
#repo-bare-start { #repo-bare-start {
margin-bottom: 100px; margin-bottom: 100px;
.panel-content { .panel-content {
background-color: #FFF; background-color: #FFF;
} }
pre { pre {
margin: 0 40px; margin: 0 40px;
padding: 6px 10px; padding: 6px 10px;
border: 1px solid #ddd; border: 1px solid #ddd;
background: #f8f8f8; background: #f8f8f8;
} }
} }
.repo-bare { .repo-bare {
#repo-bare-start { #repo-bare-start {
h2 { h2 {
margin-top: 30px; margin-top: 30px;
margin-bottom: 24px; margin-bottom: 24px;
} }
} }
#repo-header-meta { #repo-header-meta {
display: none; display: none;
} }
#repo-clone-ssh { #repo-clone-ssh {
margin-left: 200px; margin-left: 200px;
} }
#repo-clone-copy { #repo-clone-copy {
margin-right: 200px; margin-right: 200px;
} }
#repo-clone-help { #repo-clone-help {
clear: both; clear: both;
width: 100%; width: 100%;
} }
#repo-clone-url { #repo-clone-url {
width: 520px; width: 520px;
} }
} }
/* repository create */ /* repository create */
#team-create-form, #team-create-form,
#repo-migrate-form, #repo-migrate-form,
#repo-create-form { #repo-create-form {
width: 800px; width: 800px;
margin: 60px auto auto auto; margin: 60px auto auto auto;
background: white; background: white;
h2 { h2 {
margin: .5em 1em; margin: .5em 1em;
} }
.field { .field {
margin: 1.2em 0 2em 0; margin: 1.2em 0 2em 0;
} }
.ipt { .ipt {
width: 540px; width: 540px;
} }
textarea { textarea {
height: 120px; height: 120px;
} }
.avatar { .avatar {
vertical-align: middle; vertical-align: middle;
margin-right: .6em; margin-right: .6em;
width: 28px; width: 28px;
height: 28px; height: 28px;
} }
&:hover { &:hover {
box-shadow: 0px 0px 6px #CCC; box-shadow: 0px 0px 6px #CCC;
} }
} }
#repo-create-cancel { #repo-create-cancel {
margin-left: 4em; margin-left: 4em;
} }
#repo-create-owner-list { #repo-create-owner-list {
top: 30px; top: 30px;
left: 0; left: 0;
width: auto; width: auto;
max-width: 300px; max-width: 300px;
.octicon { .octicon {
margin-right: 12px; margin-right: 12px;
opacity: 0; opacity: 0;
} }
.avatar { .avatar {
width: 20px; width: 20px;
height: 20px; height: 20px;
} }
li { li {
white-space: nowrap; white-space: nowrap;
&.checked { &.checked {
.octicon { .octicon {
opacity: 1; opacity: 1;
} }
} }
a { a {
text-overflow: ellipsis; text-overflow: ellipsis;
-o-text-overflow: ellipsis; -o-text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
} }
} }
} }
.file-name { .file-name {
margin-left: 1em; margin-left: 1em;
} }
.file-size { .file-size {
font-size: 13px; font-size: 13px;
color: #888; color: #888;
margin-left: 1em; margin-left: 1em;
} }
.code-view { .code-view {
overflow: auto; overflow: auto;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
background: white; background: white;
.view-raw { .view-raw {
min-height: 40px; min-height: 40px;
text-align: center; text-align: center;
padding-top: 20px; padding-top: 20px;
.btn { .btn {
font-size: 1.05em; font-size: 1.05em;
line-height: 16px; line-height: 16px;
padding: 6px 8px; padding: 6px 8px;
} }
} }
table { table {
width: 100%; width: 100%;
td { td {
padding: 0; padding: 0;
} }
} }
.lines-num { .lines-num {
vertical-align: top; vertical-align: top;
text-align: right; text-align: right;
color: #999; color: #999;
background: #f5f5f5; background: #f5f5f5;
width: 1%; width: 1%;
span { span {
font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
line-height: 18px; line-height: 18px;
padding: 0 8px 0 10px; padding: 0 8px 0 10px;
cursor: pointer; cursor: pointer;
display: block; display: block;
margin-top: 2px; margin-top: 2px;
font-size: 12px; font-size: 12px;
} }
} }
.lines-code > pre { .lines-code > pre {
border: none; border: none;
border-left: 1px solid #ddd; border-left: 1px solid #ddd;
> ol.linenums > li { > ol.linenums > li {
padding: 0 10px; padding: 0 10px;
&.active { &.active {
background: #ffffdd; background: #ffffdd;
} }
} }
} }
} }
.repo-setting-zone { .repo-setting-zone {
padding: 30px; padding: 30px;
} }
#team-repositories-list, #team-repositories-list,
#team-members-list, #team-members-list,
#repo-collab-list { #repo-collab-list {
list-style: none; list-style: none;
padding: 10px 0 5px 0; padding: 10px 0 5px 0;
li.collab { li.collab {
clear: both; clear: both;
height: 50px; height: 50px;
padding: 0 15px 0 15px; padding: 0 15px 0 15px;
} }
a.member { a.member {
color: #444; color: #444;
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
&:hover { &:hover {
color: #4183C4; color: #4183C4;
} }
} }
.avatar { .avatar {
margin-right: 1em; margin-right: 1em;
width: 40px; width: 40px;
} }
.remove-collab { .remove-collab {
color: #DD4B39; color: #DD4B39;
} }
} }
.repo-user-list-block { .repo-user-list-block {
position: relative; position: relative;
top: 5px; top: 5px;
} }
.setting-list { .setting-list {
width: 100%; width: 100%;
list-style: none; list-style: none;
} }