From e064cfd4827151723d3b967236ab3ba104eda325 Mon Sep 17 00:00:00 2001 From: Vrifox Date: Wed, 7 Oct 2020 10:19:36 +0200 Subject: [PATCH] =?UTF-8?q?modified=20repository-summery,=20nav=20font-siz?= =?UTF-8?q?e=20and=20user:=20secondary=20menu;=20=E2=80=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/css/theme-gitea-vrifox-backend.css | 52 +++++++++++---- public/css/theme-gitea-vrifox-frontend.css | 77 +++++++++++++++++----- source/partials/_nav.scss | 3 +- source/partials/repository.scss | 64 ++++++++++++++++-- source/partials/user.scss | 13 ++-- 5 files changed, 165 insertions(+), 44 deletions(-) diff --git a/public/css/theme-gitea-vrifox-backend.css b/public/css/theme-gitea-vrifox-backend.css index 00e99b4..db61919 100644 --- a/public/css/theme-gitea-vrifox-backend.css +++ b/public/css/theme-gitea-vrifox-backend.css @@ -26,7 +26,7 @@ body > .full.height::first-line, .ui.main.menu { background: #3c3c5a; border-bottom: 0; - font-size: 1em; + font-size: 15px; min-height: 64px; font-family: monospace, "Lucida Console", "Monaco"; } .ui.main.menu #navbar { @@ -59,7 +59,8 @@ body > .full.height::first-line, .ui.main.menu .dropdown.item > .menu { margin-top: 0; } .ui.main.menu .dropdown.item > .menu, .ui.main.menu.text.menu .dropdown.item > .menu { - border: 0; } + border: 0; + z-index: 110; } .ui.main.menu .dropdown.item:hover, .ui.main.menu .link.item:hover, .ui.main.menu .active.item:hover, @@ -148,13 +149,33 @@ body > .full.height::first-line, border: 0; box-shadow: none; } .repository .container .repository-summary .repository-menu { - background: #3c3c5a !important; } - .repository .container .repository-summary .repository-menu .item a { - color: #f5f5ff !important; } - .repository .container .repository-summary .repository-menu .item a:hover { - color: white !important; } - .repository .container .repository-summary .language-stats-details .horizontal.list .item { - padding: 10px; } + background: #3c3c5a !important; + border-radius: 5px; + padding: 0; } + .repository .container .repository-summary .repository-menu .item { + border-bottom: 2px solid transparent; + border-radius: 0 !important; + border-top: 2px solid transparent; + margin: 0; + padding: 0; + transition: background .2s; } + .repository .container .repository-summary .repository-menu .item:hover { + background: #32324b; } + .repository .container .repository-summary .repository-menu .item.active { + background: initial; + border-bottom: 2px solid white; } + .repository .container .repository-summary .repository-menu .item.active:hover { + background: #32324b; } + .repository .container .repository-summary .repository-menu .item a { + color: #f5f5ff !important; + display: block; + padding: 8px; } + .repository .container .repository-summary .language-stats-details { + background: #32324b; } + .repository .container .repository-summary .language-stats-details .horizontal.list .item span { + color: #f5f5ff; } + .repository .container .repository-summary .language-stats { + background: #3c3c5a; } .repository .container .secondary.menu .item .blue.buttons .button { background: #3c3c5a; @@ -640,21 +661,24 @@ body > .full.height::first-line, .user .container .grid .secondary.pointing.menu { background: #464669; border: 0; - border-radius: 0 0 5px 5px; - border-top: 15px solid #464669; + border-radius: 5px 5px 0 0; margin-top: -15px; overflow-x: auto; overflow-y: hidden; - padding: 0 20px 2px 20px; + padding: 0 20px; position: sticky; - top: -5px; + scrollbar-color: #d7d7e1 #464669; + top: 0; + transform: rotateX(180deg); z-index: 100; } .user .container .grid .secondary.pointing.menu .item { border-bottom: 2px solid transparent; border-radius: 5px 5px 0 0; color: #f5f5ff; font-family: monospace, "Lucida Console", "Monaco"; - transform: background .2s, color .2s; } + margin-bottom: 10px; + transform: rotateX(180deg); + transition: background .2s, color .2s; } .user .container .grid .secondary.pointing.menu .item:hover { background: #3c3c5a; color: white; } diff --git a/public/css/theme-gitea-vrifox-frontend.css b/public/css/theme-gitea-vrifox-frontend.css index ae128d6..5ec36b8 100644 --- a/public/css/theme-gitea-vrifox-frontend.css +++ b/public/css/theme-gitea-vrifox-frontend.css @@ -27,7 +27,7 @@ body > .full.height::first-line, .ui.main.menu { background: #3c3c5a; border-bottom: 0; - font-size: 1em; + font-size: 15px; min-height: 64px; font-family: monospace, "Lucida Console", "Monaco"; } .ui.main.menu #navbar { @@ -64,7 +64,8 @@ body > .full.height::first-line, .ui.main.menu .dropdown.item > .menu { margin-top: 0; } .ui.main.menu .dropdown.item > .menu, .ui.main.menu.text.menu .dropdown.item > .menu { - border: 0; } + border: 0; + z-index: 110; } .ui.main.menu .dropdown.item:hover, .ui.main.menu .link.item:hover, .ui.main.menu .active.item:hover, @@ -159,24 +160,50 @@ body > .full.height::first-line, height: initial; overflow: auto; } .repository .container .repository-summary .repository-menu { - background: #3c3c5a !important; } - .repository .container .repository-summary .repository-menu .item a { - color: #f5f5ff !important; } - .repository .container .repository-summary .repository-menu .item a:hover { - color: white !important; } - .repository .container .repository-summary .repository-menu .item a svg { - display: none; } + background: #3c3c5a !important; + border-radius: 5px; + padding: 0; } + .repository .container .repository-summary .repository-menu .item { + border-bottom: 2px solid transparent; + border-radius: 0 !important; + border-top: 2px solid transparent; + margin: 0; + padding: 0; + transition: background .2s; } + .repository .container .repository-summary .repository-menu .item:hover { + background: #32324b; } + .repository .container .repository-summary .repository-menu .item.active { + background: initial; + border-bottom: 2px solid white; } + .repository .container .repository-summary .repository-menu .item.active:hover { + background: #32324b; } + .repository .container .repository-summary .repository-menu .item a { + color: #f5f5ff !important; + display: block; + padding: 8px; } + .repository .container .repository-summary .repository-menu .item a svg { + display: none; } .repository .container .repository-summary .language-stats-details { background: #32324b; padding: 0; } .repository .container .repository-summary .language-stats-details .horizontal.list .item { - padding: 10px; - border-radius: 0; } + border-radius: 0; + padding: 10px; } + .repository .container .repository-summary .language-stats-details .horizontal.list .item:first-of-type { + border-right: 1px dashed #464669; } .repository .container .repository-summary .language-stats-details .horizontal.list .item .color-icon { display: none; } .repository .container .repository-summary .language-stats-details .horizontal.list .item span { - color: #f5f5ff; } + color: #f5f5ff; + display: flex; + margin: 0 auto; + width: min-content; } + .repository .container .repository-summary .language-stats-details .horizontal.list .item span b { + font-weight: 400; + margin-left: 10px; + order: 2; } .repository .container .repository-summary .language-stats { + background: #3c3c5a; display: none; } .repository .container .secondary.menu .item.choose.reference { @@ -566,11 +593,22 @@ body > .full.height::first-line, .repository.diff .container div .diff-stats.detail-files li .diff-counter .del { color: #ff8282; } +.repository.diff .container div .diff-file-box .diff-file-header .fold-code { + display: none; } + +.repository.diff .container div .diff-file-box .diff-file-header .diff-counter .add { + color: #64c882; + margin-right: 10px; } + .repository.diff .container div .diff-file-box .diff-file-header .diff-counter .bar { - background: #ff8282; } + background: #ff8282; + display: none; } .repository.diff .container div .diff-file-box .diff-file-header .diff-counter .bar .pull-left.add { background: #64c882; } +.repository.diff .container div .diff-file-box .diff-file-header .diff-counter .del { + color: #ff8282; } + .repository.diff .container div .diff-file-box .diff-file-header .file { color: #f5f5ff; } @@ -723,21 +761,24 @@ body > .full.height::first-line, .user .container .grid .secondary.pointing.menu { background: #464669; border: 0; - border-radius: 0 0 5px 5px; - border-top: 15px solid #464669; + border-radius: 5px 5px 0 0; margin-top: -15px; overflow-x: auto; overflow-y: hidden; - padding: 0 20px 2px 20px; + padding: 0 20px; position: sticky; - top: -5px; + scrollbar-color: #d7d7e1 #464669; + top: 0; + transform: rotateX(180deg); z-index: 100; } .user .container .grid .secondary.pointing.menu .item { border-bottom: 2px solid transparent; border-radius: 5px 5px 0 0; color: #f5f5ff; font-family: monospace, "Lucida Console", "Monaco"; - transform: background .2s, color .2s; } + margin-bottom: 10px; + transform: rotateX(180deg); + transition: background .2s, color .2s; } .user .container .grid .secondary.pointing.menu .item:hover { background: #3c3c5a; color: white; } diff --git a/source/partials/_nav.scss b/source/partials/_nav.scss index ab0cb66..8531ecb 100644 --- a/source/partials/_nav.scss +++ b/source/partials/_nav.scss @@ -1,7 +1,7 @@ .ui.main.menu { background: rgb(60, 60, 90); border-bottom: 0; - font-size: 1em; + font-size: 15px; min-height: 64px; font-family: $font-family; #navbar { @@ -58,6 +58,7 @@ .dropdown.item > .menu, &.text.menu .dropdown.item > .menu { border: 0; + z-index: 110; } .dropdown.item:hover, .link.item:hover, diff --git a/source/partials/repository.scss b/source/partials/repository.scss index 8a807a1..4a964c1 100644 --- a/source/partials/repository.scss +++ b/source/partials/repository.scss @@ -116,12 +116,29 @@ } .repository-menu { background: rgb(60, 60, 90) !important; + border-radius: $border-radius; + padding: 0; .item { + border-bottom: 2px solid transparent; + border-radius: 0 !important; + border-top: 2px solid transparent; + margin: 0; + padding: 0; + transition: background .2s; + &:hover { + background: rgb(50, 50, 75); + } + &.active { + background: initial; + border-bottom: 2px solid rgb(255, 255, 255); + &:hover { + background: rgb(50, 50, 75); + } + } a { color: rgb(245, 245, 255) !important; - &:hover { - color: rgb(255, 255, 255) !important; - } + display: block; + padding: 8px; svg { @if $nojavascript == true { display: none; @@ -131,15 +148,20 @@ } } .language-stats-details { + background: rgb(50, 50, 75); @if $nojavascript == true { - background: rgb(50, 50, 75); padding: 0; } .horizontal.list { .item { - padding: 10px; @if $nojavascript == true { border-radius: 0; + padding: 10px; + } + &:first-of-type { + @if $nojavascript == true { + border-right: 1px dashed rgb(70, 70, 105); + } } .color-icon { @if $nojavascript == true { @@ -147,14 +169,25 @@ } } span { + color: rgb(245, 245, 255); @if $nojavascript == true { - color: rgb(245, 245, 255); + display: flex; + margin: 0 auto; + width: min-content; + } + b { + @if $nojavascript == true { + font-weight: 400; + margin-left: 10px; + order: 2; + } } } } } } .language-stats { + background: rgb(60, 60, 90); @if $nojavascript == true { display: none; } @@ -802,13 +835,32 @@ } .diff-file-box { .diff-file-header { + .fold-code { + @if $nojavascript == true { + display: none; + } + } .diff-counter { + .add { + @if $nojavascript == true { + color: rgb(100, 200, 130); + margin-right: 10px; + } + } .bar { background: rgb(255, 130, 130); + @if $nojavascript == true { + display: none; + } .pull-left.add { background: rgb(100, 200, 130); } } + .del { + @if $nojavascript == true { + color: rgb(255, 130, 130); + } + } } .file { color: rgb(245, 245, 255); diff --git a/source/partials/user.scss b/source/partials/user.scss index 78edd32..385c041 100644 --- a/source/partials/user.scss +++ b/source/partials/user.scss @@ -31,21 +31,24 @@ .secondary.pointing.menu { background: rgb(70, 70, 105); border: 0; - border-radius: 0 0 5px 5px; - border-top: 15px solid #464669; + border-radius: 5px 5px 0 0; margin-top: -15px; overflow-x: auto; overflow-y: hidden; - padding: 0 20px 2px 20px; + padding: 0 20px; position: sticky; - top: -5px; + scrollbar-color: rgb(215, 215, 225) rgb(70, 70, 105); + top: 0; + transform: rotateX(180deg); z-index: 100; .item { border-bottom: 2px solid transparent; border-radius: 5px 5px 0 0; color: rgb(245, 245, 255); font-family: $font-family; - transform: background .2s, color .2s; + margin-bottom: 10px; + transform: rotateX(180deg); + transition: background .2s, color .2s; &:hover { background: rgb(60, 60, 90); color: rgb(255, 255, 255);