]> source.dussan.org Git - gitea.git/commitdiff
improve ui details
authorfuxiaohei <fuxiaohei@vip.qq.com>
Tue, 23 Sep 2014 13:43:45 +0000 (21:43 +0800)
committerfuxiaohei <fuxiaohei@vip.qq.com>
Tue, 23 Sep 2014 13:43:45 +0000 (21:43 +0800)
public/ng/css/gogs.css
public/ng/less/gogs/base.less
public/ng/less/gogs/dashboard.less
public/ng/less/gogs/repository.less

index 5429d0126479858e66cfd18284c677cc774f4a05..1d0c468cacad3c63bd5a7060207f86903c0d89cd 100644 (file)
@@ -45,6 +45,9 @@ img.avatar-100 {
   height: 100px;
   vertical-align: middle;
 }
+.drop-down .panel-header {
+  font-size: 14px;
+}
 #wrapper {
   padding: 0;
   margin: 0 0 -55px 0;
@@ -703,11 +706,12 @@ ol.linenums {
   height: 69px;
 }
 #dashboard-header > .menu-line > li {
-  padding: 12px 0;
+  padding: 12px 6px;
 }
 #dashboard-header > .menu-line > li.right > a {
   font-size: 1.2em;
   color: #444444;
+  padding: .4em .8em;
 }
 #dashboard-header > .menu-line > li.right > a:hover {
   background-color: transparent;
@@ -724,6 +728,7 @@ ol.linenums {
 }
 #dashboard {
   padding: 24px 0;
+  margin-bottom: 60px;
 }
 #dashboard-sidebar .panel-header h4 {
   margin: 0;
@@ -737,7 +742,7 @@ ol.linenums {
   border-top-left-radius: .3em;
   border-top-right-radius: .3em;
   width: 100%;
-  height: 35px;
+  height: 32px;
 }
 #dashboard-sidebar-menu > li {
   border: 1px solid #d6d6d6;
@@ -746,8 +751,8 @@ ol.linenums {
   border-bottom: none;
 }
 #dashboard-sidebar-menu > li > a {
-  padding-top: .4em;
-  padding-bottom: .4em;
+  padding-top: .3em;
+  padding-bottom: .3em;
 }
 #dashboard-sidebar-menu > li.first {
   border-top-left-radius: .3em;
@@ -821,6 +826,7 @@ ol.linenums {
 }
 #dashboard-my-repo .repo-count {
   margin-left: 4px;
+  font-size: .8em;
 }
 #dashboard-my-org,
 #dashboard-my-mirror {
@@ -828,7 +834,7 @@ ol.linenums {
 }
 #dashboard-new-repo {
   width: 50px;
-  height: 35px;
+  height: 33px;
   padding-top: 6px;
   margin-right: 1px;
   border-top-left-radius: .3em;
@@ -994,7 +1000,6 @@ The register and sign-in page style
 }
 #repo-header-meta a > .btn {
   line-height: 16px;
-  font-size: 1.05em;
   margin-left: 16px;
 }
 #repo-header-meta a > .btn i {
index 241846dbbdeb845f3823eafef69f9c25a37ebdf1..47d8b1b65c747cb9d9c29c73d1969cc98fee2819 100644 (file)
@@ -55,6 +55,11 @@ img.avatar-100{
   height: 100px;
   vertical-align: middle;
 }
+.drop-down{
+  .panel-header{
+    font-size: 14px;
+  }
+}
 #wrapper {
     padding: 0;
     margin: 0 0 -55px 0;
index 60aa807269200ec27f9456af68ce7ea13ba251f1..1609b9d1c998c107afe2b473c39ee2eee5505bc6 100644 (file)
   height: 69px;
   > .menu-line {
     > li {
-      padding: 12px 0;
+      padding: 12px 6px;
     }
     > li.right {
       > a {
         font-size: 1.2em;
         color: @dashboardHeaderLinkColor;
+        padding: .4em .8em;
         &:hover {
           background-color: transparent;
           color: @dashboardHeaderLinkHoverColor;
     }
   }
 }
-
 // dashboard context switch selection
 #dashboard-selection-menu {
   a img {
     margin: -4px 10px 0 0;
   }
 }
-
 #dashboard {
   padding: 24px 0;
+  margin-bottom: 60px;
 }
-
 // dashboard sidebar contains contributed repositories panel,
 // and my repositories panel
 #dashboard-sidebar {
@@ -58,7 +57,6 @@
     border-bottom-right-radius: .3em;
   }
 }
-
 #dashboard-sidebar-menu {
   border-top-left-radius: .3em;
   border-top-right-radius: .3em;
@@ -68,8 +66,8 @@
     margin-right: -1px;
     border-bottom: none;
     > a {
-      padding-top: .4em;
-      padding-bottom: .4em;
+      padding-top: .3em;
+      padding-bottom: .3em;
     }
   }
   > li.first {
@@ -83,7 +81,7 @@
     float: right;
   }
   width: 100%;
-  height: 35px;
+  height: 32px;
   > li.js-tab-nav-show {
     background-color: #EEEEEE;
   }
@@ -94,7 +92,6 @@
     }
   }
 }
-
 #dashboard-my-mirror,
 #dashboard-my-org,
 #dashboard-my-repo {
     border-top: 1px solid #d6d6d6;
   }
 }
-
 #dashboard-my-repo {
   .panel-header {
     .octicon {
   }
   .repo-count {
     margin-left: 4px;
+    font-size: .8em;
   }
 }
-
 #dashboard-my-org,
 #dashboard-my-mirror {
   display: none;
 }
-
 // the button of new repository in my repositories panel
 #dashboard-new-repo {
   width: 50px;
-  height: 35px;
+  height: 33px;
   padding-top: 6px;
   margin-right: 1px;
   .octicon {
   border-top-left-radius: .3em;
   border-top-right-radius: .3em;
 }
-
 // the drop-down menu of #dashboard-new-repo
 #dashboard-new-repo-menu {
   top: 35px;
     font-size: 1.1em;
   }
 }
-
 #dashboard-selection-menu {
-    width: auto;
-    max-width: 300px;
-    > .drop-down {
-        top: 56px;
+  width: auto;
+  max-width: 300px;
+  > .drop-down {
+    top: 56px;
+  }
+  li {
+    white-space: nowrap;
+    &.checked {
+      .octicon {
+        opacity: 1;
+      }
     }
-    li {
-        white-space: nowrap;
-        &.checked {
-            .octicon {
-                opacity: 1;
-            }
-        }
-        a {
-            text-overflow: ellipsis;
-            -o-text-overflow: ellipsis;
-            overflow: hidden;
-        }
+    a {
+      text-overflow: ellipsis;
+      -o-text-overflow: ellipsis;
+      overflow: hidden;
     }
+  }
 }
-
 // the drop-down menu of #dashboard-selection-menu
 #dashboard-switch-menu {
   > li {
   border-bottom-left-radius: .3em;
   border-bottom-right-radius: .3em;
 }
-
 #dashboard-news {
   .news {
     margin-right: 2.4em;
index c86cb7f07ff3be82580de640d7916fc630228d7b..0753d11fb76704596f324d2936a82a60e805c2fa 100644 (file)
 /* repository main */
 
 #repo-wrapper {
-       padding-bottom: 100px;
+  padding-bottom: 100px;
 }
 #repo-header {
-       height: 69px;
-       border-bottom: 1px solid@repoHeaderBorderColor;
+  height: 69px;
+  border-bottom: 1px solid@repoHeaderBorderColor;
 
-background-color: @repoHeaderBgColor;
+  background-color: @repoHeaderBgColor;
 
 }
 #repo-header-name {
-       line-height: 66px;
-       color: @repoHeaderNameColor;
-       font-size: 1.6em;
-       font-weight: normal;
-       margin-bottom: 0;
-       i {
-               margin-right: 12px;
-               vertical-align: middle;
-       }
-       .divider {
-               margin: 0 4px;
-       }
+  line-height: 66px;
+  color: @repoHeaderNameColor;
+  font-size: 1.6em;
+  font-weight: normal;
+  margin-bottom: 0;
+  i {
+    margin-right: 12px;
+    vertical-align: middle;
+  }
+  .divider {
+    margin: 0 4px;
+  }
 }
 #repo-header-meta {
-       line-height: 66px;
-       li {
-               > a {
-                       padding: 0;
-                       &:hover {
-                               background-color: transparent;
-                       }
-               }
-       }
-       a {
-               &>.btn {
-                       line-height: 16px;
-                       font-size: 1.05em;
-                       margin-left: 16px;
-                       i {
-                               margin-right: 6px;
-                       }
-                       .num {
-                               margin-left: 6px;
-                       }
-               }
-       }
+  line-height: 66px;
+  li {
+    > a {
+      padding: 0;
+      &:hover {
+        background-color: transparent;
+      }
+    }
+  }
+  a {
+    & > .btn {
+      line-height: 16px;
+      margin-left: 16px;
+      i {
+        margin-right: 6px;
+      }
+      .num {
+        margin-left: 6px;
+      }
+    }
+  }
 }
 #repo-header-download-btn {
-       > .btn > i {
-               margin-right: 0 !important;
-       }
-       &:hover {
-               &:after, .btn {
-                       background-color: @btnHoverBlackColor;
-                       color: #FFF;
-               }
-       }
-       &:after {
-               background-color: @btnBlackColor;
-               padding: 9px 16px 8px 0;
-               margin-left: -8px !important;
-               color: #FFF;
-               border-top: 1px solid@btnBlackColor;
-               border-bottom: 1px solid@btnBlackColor;
-               border-top-right-radius: .25em;
-               border-bottom-right-radius: .25em;
-       }
+  > .btn > i {
+    margin-right: 0 !important;
+  }
+  &:hover {
+    &:after, .btn {
+      background-color: @btnHoverBlackColor;
+      color: #FFF;
+    }
+  }
+  &:after {
+    background-color: @btnBlackColor;
+    padding: 9px 16px 8px 0;
+    margin-left: -8px !important;
+    color: #FFF;
+    border-top: 1px solid@btnBlackColor;
+    border-bottom: 1px solid@btnBlackColor;
+    border-top-right-radius: .25em;
+    border-bottom-right-radius: .25em;
+  }
 }
 #repo-header-download-drop {
-       line-height: 24px;
-       width: 440px;
-       top: 50px;
-       left: -370px;
-       padding: 20px;
-       box-sizing: border-box;
-       z-index: 1;
-       .btn > i {
-               margin-right: 6px;
-       }
-       button,
-       input {
-               font-size: 11px;
-       }
+  line-height: 24px;
+  width: 440px;
+  top: 50px;
+  left: -370px;
+  padding: 20px;
+  box-sizing: border-box;
+  z-index: 1;
+  .btn > i {
+    margin-right: 6px;
+  }
+  button,
+  input {
+    font-size: 11px;
+  }
 }
 #repo-content {
-       padding: 18px 0;
+  padding: 18px 0;
 }
 #repo-clone-url {
-       border-right: none;
-       width: 190px;
-       border-left: none;
+  border-right: none;
+  width: 190px;
+  border-left: none;
 }
 #repo-clone-help {
-       clear: both;
-       line-height: 48px;
+  clear: both;
+  line-height: 48px;
 }
 #repo-clone-zip {
-       line-height: 48px;
-       a {
-               cursor: pointer;
-               color: white;
-               overflow: visible;
-               padding: .6em 1.2em;
-       }
-       .btn {
-               margin: 0 6px;
-       }
+  line-height: 48px;
+  a {
+    cursor: pointer;
+    color: white;
+    overflow: visible;
+    padding: .6em 1.2em;
+  }
+  .btn {
+    margin: 0 6px;
+  }
 }
 #repo-desc {
-       font-size: 1.2em;
+  font-size: 1.2em;
 }
 #repo-sidebar-nav {
-       .label {
-               font-size: 12px;
-               line-height: 1.4em;
-               margin-top: 2px;
-       }
-       i {
-               margin-right: 6px;
-       }
+  .label {
+    font-size: 12px;
+    line-height: 1.4em;
+    margin-top: 2px;
+  }
+  i {
+    margin-right: 6px;
+  }
 }
 #repo-file-nav {
-       padding: .6em 0 1em 0;
-       > li > a {
-               padding-left: 0;
-               &:hover {
-                       background-color: transparent;
-               }
-       }
-       li.repo-jump > a {
-               padding-right: 0;
-               .btn {
-                       margin-left: -1px;
-               }
-       }
+  padding: .6em 0 1em 0;
+  > li > a {
+    padding-left: 0;
+    &:hover {
+      background-color: transparent;
+    }
+  }
+  li.repo-jump > a {
+    padding-right: 0;
+    .btn {
+      margin-left: -1px;
+    }
+  }
 }
 #repo-branch-switch {
-       > a {
-               .btn {
-                       padding-right: 30px;
-               }
-               &:after {
-                       position: absolute;
-                       top: 12px;
-                       right: 30px;
-                       margin-left: 0;
-                       color: @baseFontColor;
+  > a {
+    .btn {
+      padding-right: 30px;
+    }
+    &:after {
+      position: absolute;
+      top: 12px;
+      right: 30px;
+      margin-left: 0;
+      color: @baseFontColor;
 
-               }
-       }
-       > .drop-down {
-               top: 40px;
-               left: 0;
-       }
+    }
+  }
+  > .drop-down {
+    top: 40px;
+    left: 0;
+  }
 }
 #repo-branch-filter-ipt {
-       width: 100%;
-       border-left: none;
-       border-right: none;
-       box-sizing: border-box;
+  width: 100%;
+  border-left: none;
+  border-right: none;
+  box-sizing: border-box;
 }
 #repo-branch-tag {
-       .tab-nav {
-               border-bottom: 1px solid #EAEAEA;
-               a {
-                       padding: .3em .8em;
-               }
-               .js-tab-nav-show {
-                       background-color: #EEE;
-                       font-weight: bold;
-               }
-       }
+  .tab-nav {
+    border-bottom: 1px solid #EAEAEA;
+    a {
+      padding: .3em .8em;
+    }
+    .js-tab-nav-show {
+      background-color: #EEE;
+      font-weight: bold;
+    }
+  }
 }
 #repo-branch-list,
 #repo-tag-list {
-       li {
-               i {
-                       margin-right: 12px;
-                       opacity: 0;
-               }
-       }
-       li.checked {
-               i {
-                       opacity: 1;
-               }
-       }
+  li {
+    i {
+      margin-right: 12px;
+      opacity: 0;
+    }
+  }
+  li.checked {
+    i {
+      opacity: 1;
+    }
+  }
 }
 #repo-tag-list {
-       display: none;
+  display: none;
 }
 #repo-bread {
-       .bread {
-               padding-right: 0;
-               font-size: 16px;
-               font-weight: bold;
-       }
+  .bread {
+    padding-right: 0;
+    font-size: 16px;
+    font-weight: bold;
+  }
 }
 #repo-main {
-       padding-right: 40px;
-       box-sizing: border-box;
+  padding-right: 40px;
+  box-sizing: border-box;
 }
 #repo-files-table {
-       margin-bottom: 20px;
-       th, td {
-               text-align: left;
-               line-height: 32px;
-       }
-       td.icon {
-               width: 16px;
-               padding-right: .1em;
-               padding-left: 1em;
-       }
-       td.name {
-               max-width: 120px;
-               .text-truncate {
-                       max-width: 100%;
-               }
-       }
-       td.age {
-               max-width: 120px;
-               text-align: right;
-       }
-       td.msg {
-               max-width: 440px;
-               .text-truncate {
-                       max-width: 100%;
-               }
-       }
-       td.age,
-       td.size,
-       td.msg a {
-               color: #888;
-       }
-       td.msg a:hover {
-               color: #428BCA;
-               text-decoration: underline;
-       }
-       tbody {
-               background-color: #FFF;
-               tr:hover {
-                       background-color: #ffffEE;
-               }
-       }
-       thead {
-               background-color: #F0F0F0;
-               .author {
-                       a {
-                               margin: 0 .4em;
-                       }
-               }
-               .last-commit {
-                       strong {
-                               color: #444;
-                       }
-                       .text-truncate {
-                               margin-left: .4em;
-                       }
-               }
-               .last-commit .text-truncate,
-               .age {
-                       font-weight: normal;
-                       color: #888;
-               }
-       }
+  margin-bottom: 20px;
+  th, td {
+    text-align: left;
+    line-height: 32px;
+  }
+  td.icon {
+    width: 16px;
+    padding-right: .1em;
+    padding-left: 1em;
+  }
+  td.name {
+    max-width: 120px;
+    .text-truncate {
+      max-width: 100%;
+    }
+  }
+  td.age {
+    max-width: 120px;
+    text-align: right;
+  }
+  td.msg {
+    max-width: 440px;
+    .text-truncate {
+      max-width: 100%;
+    }
+  }
+  td.age,
+  td.size,
+  td.msg a {
+    color: #888;
+  }
+  td.msg a:hover {
+    color: #428BCA;
+    text-decoration: underline;
+  }
+  tbody {
+    background-color: #FFF;
+    tr:hover {
+      background-color: #ffffEE;
+    }
+  }
+  thead {
+    background-color: #F0F0F0;
+    .author {
+      a {
+        margin: 0 .4em;
+      }
+    }
+    .last-commit {
+      strong {
+        color: #444;
+      }
+      .text-truncate {
+        margin-left: .4em;
+      }
+    }
+    .last-commit .text-truncate,
+    .age {
+      font-weight: normal;
+      color: #888;
+    }
+  }
 }
 #repo-readme {
-       margin-bottom: 80px;
+  margin-bottom: 80px;
 }
 #repo-bare-start {
-       margin-bottom: 100px;
-       .panel-content {
-               background-color: #FFF;
-       }
-       pre {
-               margin: 0 40px;
-               padding: 6px 10px;
-               border: 1px solid #ddd;
-               background: #f8f8f8;
-       }
+  margin-bottom: 100px;
+  .panel-content {
+    background-color: #FFF;
+  }
+  pre {
+    margin: 0 40px;
+    padding: 6px 10px;
+    border: 1px solid #ddd;
+    background: #f8f8f8;
+  }
 }
 .repo-bare {
-       #repo-bare-start {
-               h2 {
-                       margin-top: 30px;
-                       margin-bottom: 24px;
-               }
-       }
-       #repo-header-meta {
-               display: none;
-       }
-       #repo-clone-ssh {
-               margin-left: 200px;
-       }
-       #repo-clone-copy {
-               margin-right: 200px;
-       }
-       #repo-clone-help {
-               clear: both;
-               width: 100%;
-       }
-       #repo-clone-url {
-               width: 520px;
-       }
+  #repo-bare-start {
+    h2 {
+      margin-top: 30px;
+      margin-bottom: 24px;
+    }
+  }
+  #repo-header-meta {
+    display: none;
+  }
+  #repo-clone-ssh {
+    margin-left: 200px;
+  }
+  #repo-clone-copy {
+    margin-right: 200px;
+  }
+  #repo-clone-help {
+    clear: both;
+    width: 100%;
+  }
+  #repo-clone-url {
+    width: 520px;
+  }
 }
 /* repository create */
 
 #team-create-form,
 #repo-migrate-form,
 #repo-create-form {
-       width: 800px;
-       margin: 60px auto auto auto;
-       background: white;
-       h2 {
-               margin: .5em 1em;
-       }
-       .field {
-               margin: 1.2em 0 2em 0;
-       }
-       .ipt {
-               width: 540px;
-       }
-       textarea {
-               height: 120px;
-       }
-       .avatar {
-               vertical-align: middle;
-               margin-right: .6em;
-               width: 28px;
-               height: 28px;
-       }
-       &:hover {
-               box-shadow: 0px 0px 6px #CCC;
-       }
+  width: 800px;
+  margin: 60px auto auto auto;
+  background: white;
+  h2 {
+    margin: .5em 1em;
+  }
+  .field {
+    margin: 1.2em 0 2em 0;
+  }
+  .ipt {
+    width: 540px;
+  }
+  textarea {
+    height: 120px;
+  }
+  .avatar {
+    vertical-align: middle;
+    margin-right: .6em;
+    width: 28px;
+    height: 28px;
+  }
+  &:hover {
+    box-shadow: 0px 0px 6px #CCC;
+  }
 }
 #repo-create-cancel {
-       margin-left: 4em;
+  margin-left: 4em;
 }
 #repo-create-owner-list {
-       top: 30px;
-       left: 0;
-       width: auto;
-       max-width: 300px;
-       .octicon {
-               margin-right: 12px;
-               opacity: 0;
-       }
-       .avatar {
-               width: 20px;
-               height: 20px;
-       }
-       li {
-               white-space: nowrap;
-               &.checked {
-                       .octicon {
-                               opacity: 1;
-                       }
-               }
-               a {
-                       text-overflow: ellipsis;
-                       -o-text-overflow: ellipsis;
-                       overflow: hidden;
-               }
-       }
+  top: 30px;
+  left: 0;
+  width: auto;
+  max-width: 300px;
+  .octicon {
+    margin-right: 12px;
+    opacity: 0;
+  }
+  .avatar {
+    width: 20px;
+    height: 20px;
+  }
+  li {
+    white-space: nowrap;
+    &.checked {
+      .octicon {
+        opacity: 1;
+      }
+    }
+    a {
+      text-overflow: ellipsis;
+      -o-text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
 }
 .file-name {
-       margin-left: 1em;
+  margin-left: 1em;
 }
 .file-size {
-       font-size: 13px;
-       color: #888;
-       margin-left: 1em;
+  font-size: 13px;
+  color: #888;
+  margin-left: 1em;
 }
 .code-view {
-       overflow: auto;
-       overflow-x: auto;
-       overflow-y: hidden;
-       background: white;
-       .view-raw {
-               min-height: 40px;
-               text-align: center;
-               padding-top: 20px;
-               .btn {
-                       font-size: 1.05em;
-                       line-height: 16px;
-                       padding: 6px 8px;
-               }
-       }
-       table {
-               width: 100%;
-               td {
-                       padding: 0;
-               }
-       }
-       .lines-num {
-               vertical-align: top;
-               text-align: right;
-               color: #999;
-               background: #f5f5f5;
-               width: 1%;
-               span {
-                       font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
-                       line-height: 18px;
-                       padding: 0 8px 0 10px;
-                       cursor: pointer;
-                       display: block;
-                       margin-top: 2px;
-                       font-size: 12px;
-               }
-       }
-       .lines-code > pre {
-               border: none;
-               border-left: 1px solid #ddd;
-               > ol.linenums > li {
-                       padding: 0 10px;
-                       &.active {
-                               background: #ffffdd;
-                       }
-               }
-       }
+  overflow: auto;
+  overflow-x: auto;
+  overflow-y: hidden;
+  background: white;
+  .view-raw {
+    min-height: 40px;
+    text-align: center;
+    padding-top: 20px;
+    .btn {
+      font-size: 1.05em;
+      line-height: 16px;
+      padding: 6px 8px;
+    }
+  }
+  table {
+    width: 100%;
+    td {
+      padding: 0;
+    }
+  }
+  .lines-num {
+    vertical-align: top;
+    text-align: right;
+    color: #999;
+    background: #f5f5f5;
+    width: 1%;
+    span {
+      font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+      line-height: 18px;
+      padding: 0 8px 0 10px;
+      cursor: pointer;
+      display: block;
+      margin-top: 2px;
+      font-size: 12px;
+    }
+  }
+  .lines-code > pre {
+    border: none;
+    border-left: 1px solid #ddd;
+    > ol.linenums > li {
+      padding: 0 10px;
+      &.active {
+        background: #ffffdd;
+      }
+    }
+  }
 }
 .repo-setting-zone {
-       padding: 30px;
+  padding: 30px;
 }
 #team-repositories-list,
 #team-members-list,
 #repo-collab-list {
-       list-style: none;
-       padding: 10px 0 5px 0;
-       li.collab {
-               clear: both;
-               height: 50px;
-               padding: 0 15px 0 15px;
-       }
-       a.member {
-               color: #444;
-               height: 50px;
-               line-height: 50px;
-               &:hover {
-                       color: #4183C4;
-               }
-       }
-       .avatar {
-               margin-right: 1em;
-               width: 40px;
-       }
-       .remove-collab {
-               color: #DD4B39;
-       }
+  list-style: none;
+  padding: 10px 0 5px 0;
+  li.collab {
+    clear: both;
+    height: 50px;
+    padding: 0 15px 0 15px;
+  }
+  a.member {
+    color: #444;
+    height: 50px;
+    line-height: 50px;
+    &:hover {
+      color: #4183C4;
+    }
+  }
+  .avatar {
+    margin-right: 1em;
+    width: 40px;
+  }
+  .remove-collab {
+    color: #DD4B39;
+  }
 }
 .repo-user-list-block {
-       position: relative;
-       top: 5px;
+  position: relative;
+  top: 5px;
 }
 .setting-list {
-       width: 100%;
-       list-style: none;
+  width: 100%;
+  list-style: none;
 }
\ No newline at end of file