From f61c3cdf0bf341ff2d325844c94e1be6eec181ba Mon Sep 17 00:00:00 2001 From: Free Date: Wed, 18 Aug 2021 19:42:45 +0200 Subject: [PATCH 1/3] 1.0.4 - Combined feed list to make it more compact, while still looking nice. - Styled User / Organization lists - Added minor blur to tabs in User page --- Gitea/theme-gitea-modern.styl | 132 +++++++++++++++++++++++++--------- 1 file changed, 97 insertions(+), 35 deletions(-) diff --git a/Gitea/theme-gitea-modern.styl b/Gitea/theme-gitea-modern.styl index 4f69121..c0dee6c 100644 --- a/Gitea/theme-gitea-modern.styl +++ b/Gitea/theme-gitea-modern.styl @@ -1,14 +1,16 @@ +// main: theme-gitea-modern.user.styl, out: theme-gitea-modern.css - -/* Update 1.0.3 -- Fixed table stretching due to the grid -- Better keyboard accessability -- Fixed Codeberg dropdown + +/* Update 1.0.4 +- Combined feed list to make it more compact, while still looking nice. +- Styled User / Organization lists +- Added minor blur to tabs in User page */ + :root { --base-border-radius: 6px; - + } html.theme-gitea, html.theme-arc-green { --fonts-override: var(--fonts-regular); @@ -698,7 +700,7 @@ html { #repo-topics { margin: 0 -4px; margin-bottom: 0 !important; - margin-top: -.5rem !important; + margin-top: -.5rem !important; align-items: flex-start !important; & > *:last-child { margin: 2px !important; @@ -847,7 +849,7 @@ html { display: inline-flex !important; transform: translateY(1px); } - + .message-wrapper { overflow: visible; display: inline-flex; @@ -1006,10 +1008,17 @@ html { border: 0 !important; } .language-stats { - border-radius: 100px !important; + border-radius: var(--base-border-radius) !important; overflow: hidden !important; pointer-events: none; - top: 0; + // top: unset; + // position: absolute; + // bottom: 0; + // height: 10px; + // width: 80vh; + // transform: rotate(90deg) translate(-60%, -55px); + // max-width: 500px; + // width: 100px; } .horizontal.list:not(.two) { padding-top: 1rem; @@ -1130,11 +1139,11 @@ html { } /*** USER PROFILES & EXPLORE PAGES ***/ -.explore, .user:not(.list), .profile { +.explore, .page-content.user, .profile { display: flex; flex-wrap: wrap; justify-content: center; - + /* Responsive explore page */ &.explore > .ui.container { max-width: calc(100vw - 40px); @@ -1176,7 +1185,7 @@ html { width: 320px !important; flex: 1 0 320px !important; position: sticky; - bottom: 0; + bottom: 10px; align-self: flex-end; min-height: 100vh; .card { @@ -1205,12 +1214,12 @@ html { font-weight: 600; padding-left: .7rem; margin: 1.5rem 0; - + &.header { font-weight: 500; letter-spacing: .1em; - height: 44px; - line-height: 50px; + height: 39px; + line-height: 40px; margin-bottom: -1.2em; margin-top: 0; background: var(--color-body); @@ -1271,21 +1280,32 @@ html { margin-bottom: 1.5rem; position: sticky; top: 0px !important; - margin-top: -45px; - height: 45px; + margin-top: -40px; + height: 40px; z-index: 9999; background-color: var(--color-body); + @supports (backdrop-filter: blur(10px)) { + backdrop-filter: blur(10px); + background-color: transparent; + &::before { + content: ""; + position: absolute; + inset: 0; + background-color: var(--color-body); + opacity: .8; + } + } } &::before { content: ""; position: sticky; margin: 0 !important; margin-left: -100vw !important; - margin-top: 45px !important; + margin-top: 40px !important; width: 200vw; display: block; border-bottom: 1px solid var(--color-secondary); - top: 44px; + top: 39px; z-index: -1; } } @@ -1309,13 +1329,32 @@ html { /* DASHBOARD / USER FEEDS */ .ui.container > .news, .feeds > .news { border: 1px solid var(--color-secondary) !important; + border-bottom: none !important; background: var(--color-box-body); - margin-bottom: 1rem; - border-radius: var(--base-border-radius); + // margin-bottom: 1rem; + border-radius: var(--base-border-radius) var(--base-border-radius) 0 0; padding: 10px 12px !important; - position: relative; - + position: relative; + & + .news { + border-radius: 0 !important; + } + &:last-child { + border-radius: 0 0 var(--base-border-radius) var(--base-border-radius) !important; + border-bottom: 1px solid var(--color-secondary) !important; + } + &::before { + content: ""; + position: absolute; + inset: 0; + background: var(--color-primary); + opacity: 0; + // z-index: -1; + } + &:hover::before, &:focus-within::before { + opacity: .05; + } .ui.left { + width: 40px; img { margin: 0 !important; margin-top: 2px !important; @@ -1326,6 +1365,7 @@ html { .ui.grid { margin: 0 !important; padding: 0 !important; + padding-top: 1px !important; & > .column { padding: 0 !important; width: 100% !important; @@ -1367,7 +1407,7 @@ html { margin-bottom: 0; } ul { - border-left: 4px solid var(--color-secondary); + border-left: 4px solid var(--color-secondary); } } .divider { @@ -1376,12 +1416,13 @@ html { } /* REPOSITORY LIST */ -.ui.repository.list { +.ui.repository.list, +.ui.user.list { margin-top: 16px !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); grid-gap: 16px; - + .item { width: 400px; width: 100%; @@ -1491,6 +1532,30 @@ html { } } } + + // User & Organization cards + .content { + padding-left: 12px; + margin-bottom: -.4em; + .header { + a { + font-weight: 600; + text-transform: capitalize; + } + } + .description { + display: flex; + flex-direction: column; + padding-left: 22px; + line-height: 1.8em; + margin-top: .5em; + svg { + margin-bottom: -1.45em !important; + margin-left: -22px !important; + } + } + } + } } @@ -1501,7 +1566,6 @@ html { flex-wrap: wrap; margin: auto; max-width: 100%; - padding: 30px 10px; padding: 30px 0; width: 1300px; margin-bottom: -45px; @@ -1539,7 +1603,7 @@ html { & > .item, & > .right > .item { flex-direction: column; - margin: 0 20px !important; + margin: 0px !important; text-align: center; flex-grow: 1; display: flex !important; @@ -1554,7 +1618,7 @@ html { & > .dropdown, .button { text-indent: 0px !important; } - span { + span { text-align: center; } @@ -1595,7 +1659,7 @@ html { margin: 0 auto !important; display: flex; flex-wrap: wrap-reverse; - flex: 9999 1 650px; + flex: 9999 1 650px; --container-padding-x: calc(2.5% + 0px); @@ -1660,7 +1724,7 @@ html { #app { height: min-content; position: sticky; - + bottom: 0; align-self: flex-end; margin: 0 auto !important; @@ -1691,7 +1755,7 @@ html { } codeberg-announcement-widget { background: none !important; - + & > div { margin-top: 0 !important; margin-right: 0 !important; @@ -1793,5 +1857,3 @@ footer { padding: 0 40px; } } - - From e57e1e94a743ce72ea6bf50d6d2316cf606d9f80 Mon Sep 17 00:00:00 2001 From: Free Date: Wed, 18 Aug 2021 19:43:34 +0200 Subject: [PATCH 2/3] 1.0.4 --- Gitea/theme-gitea-modern.css | 227 ++++++++++++++++++++++++----------- 1 file changed, 157 insertions(+), 70 deletions(-) diff --git a/Gitea/theme-gitea-modern.css b/Gitea/theme-gitea-modern.css index f32752b..19a3820 100644 --- a/Gitea/theme-gitea-modern.css +++ b/Gitea/theme-gitea-modern.css @@ -1,7 +1,7 @@ -/* Update 1.0.3 -- Fixed table stretching due to the grid -- Better keyboard accessability -- Fixed Codeberg dropdown +/* Update 1.0.4 +- Combined feed list to make it more compact, while still looking nice. +- Styled User / Organization lists +- Added minor blur to tabs in User page */ :root { --base-border-radius: 6px; @@ -970,10 +970,9 @@ html { .page-content.repository:not(.milestones).file > .ui.container .repository-summary .language-stats, .page-content.repository:not(.milestones).commits > .ui.container .repository-summary .language-stats, .page-content.repository:not(.milestones).branches > .ui.container .repository-summary .language-stats { - border-radius: 100px !important; + border-radius: var(--base-border-radius) !important; overflow: hidden !important; pointer-events: none; - top: 0; } .page-content.repository:not(.milestones).file > .ui.container .repository-summary .horizontal.list:not(.two), .page-content.repository:not(.milestones).commits > .ui.container .repository-summary .horizontal.list:not(.two), @@ -1126,7 +1125,7 @@ html { } /*** USER PROFILES & EXPLORE PAGES ***/ .explore, -.user:not(.list), +.page-content.user, .profile { display: flex; flex-wrap: wrap; @@ -1134,20 +1133,20 @@ html { /* Responsive explore page */ } .explore.explore > .ui.container, -.user:not(.list).explore > .ui.container, +.page-content.user.explore > .ui.container, .profile.explore > .ui.container { max-width: calc(100vw - 40px); width: 3000px !important; padding: 0 calc(10vw - 80px); } .explore.organization > .ui.container:first-child, -.user:not(.list).organization > .ui.container:first-child, +.page-content.user.organization > .ui.container:first-child, .profile.organization > .ui.container:first-child { padding-top: 30px; padding-bottom: 30px; } .explore.organization > .ui.container:first-child #org-info, -.user:not(.list).organization > .ui.container:first-child #org-info, +.page-content.user.organization > .ui.container:first-child #org-info, .profile.organization > .ui.container:first-child #org-info { display: flex; flex-direction: column; @@ -1155,60 +1154,60 @@ html { justify-content: center; } .explore.organization > .ui.container:first-child #org-info > p, -.user:not(.list).organization > .ui.container:first-child #org-info > p, +.page-content.user.organization > .ui.container:first-child #org-info > p, .profile.organization > .ui.container:first-child #org-info > p { margin: 0 !important; margin-bottom: 0.2rem !important; } .explore.organization > .ui.container:first-child #org-info .item, -.user:not(.list).organization > .ui.container:first-child #org-info .item, +.page-content.user.organization > .ui.container:first-child #org-info .item, .profile.organization > .ui.container:first-child #org-info .item { display: flex; align-items: center; } .explore.organization > .ui.container:first-child #org-info .item a, -.user:not(.list).organization > .ui.container:first-child #org-info .item a, +.page-content.user.organization > .ui.container:first-child #org-info .item a, .profile.organization > .ui.container:first-child #org-info .item a { margin-left: 4px; } .explore.organization .ui.eleven.wide.column::before, -.user:not(.list).organization .ui.eleven.wide.column::before, +.page-content.user.organization .ui.eleven.wide.column::before, .profile.organization .ui.eleven.wide.column::before { content: unset !important; } .explore > .ui.container, -.user:not(.list) > .ui.container, +.page-content.user > .ui.container, .profile > .ui.container { max-width: 1350px; width: 100% !important; padding: 0 20px; } .explore > .ui.container[class="ui container"] .five.wide.column, -.user:not(.list) > .ui.container[class="ui container"] .five.wide.column, +.page-content.user > .ui.container[class="ui container"] .five.wide.column, .profile > .ui.container[class="ui container"] .five.wide.column { width: 320px !important; flex: 1 0 320px !important; position: sticky; - bottom: 0; + bottom: 10px; align-self: flex-end; min-height: 100vh; } .explore > .ui.container[class="ui container"] .five.wide.column .card, -.user:not(.list) > .ui.container[class="ui container"] .five.wide.column .card, +.page-content.user > .ui.container[class="ui container"] .five.wide.column .card, .profile > .ui.container[class="ui container"] .five.wide.column .card { width: 100%; border: 0; background: none !important; } .explore > .ui.container[class="ui container"] .five.wide.column .card #profile-avatar, -.user:not(.list) > .ui.container[class="ui container"] .five.wide.column .card #profile-avatar, +.page-content.user > .ui.container[class="ui container"] .five.wide.column .card #profile-avatar, .profile > .ui.container[class="ui container"] .five.wide.column .card #profile-avatar { padding-left: 0.7rem; padding-right: 2rem !important; padding-top: 0.5rem; } .explore > .ui.container[class="ui container"] .five.wide.column .card #profile-avatar .avatar, -.user:not(.list) > .ui.container[class="ui container"] .five.wide.column .card #profile-avatar .avatar, +.page-content.user > .ui.container[class="ui container"] .five.wide.column .card #profile-avatar .avatar, .profile > .ui.container[class="ui container"] .five.wide.column .card #profile-avatar .avatar { border-radius: calc(var(--base-border-radius) * 2) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.1); @@ -1218,13 +1217,13 @@ html { max-height: 80vh; } .explore > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name, -.user:not(.list) > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name, +.page-content.user > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name, .profile > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name { font-size: 2rem; display: contents; } .explore > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name span, -.user:not(.list) > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name span, +.page-content.user > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name span, .profile > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name span { text-align: left; font-weight: 600; @@ -1232,12 +1231,12 @@ html { margin: 1.5rem 0; } .explore > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name span.header, -.user:not(.list) > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name span.header, +.page-content.user > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name span.header, .profile > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name span.header { font-weight: 500; letter-spacing: 0.1em; - height: 44px; - line-height: 50px; + height: 39px; + line-height: 40px; margin-bottom: -1.2em; margin-top: 0; background: var(--color-body); @@ -1247,17 +1246,17 @@ html { box-shadow: 0 -5px 5px var(--color-body); } .explore > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name span.username, -.user:not(.list) > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name span.username, +.page-content.user > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name span.username, .profile > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name span.username { z-index: 2; } .explore > .ui.container[class="ui container"] .five.wide.column .card .extra, -.user:not(.list) > .ui.container[class="ui container"] .five.wide.column .card .extra, +.page-content.user > .ui.container[class="ui container"] .five.wide.column .card .extra, .profile > .ui.container[class="ui container"] .five.wide.column .card .extra { border: 0 !important; } .explore > .ui.container[class="ui container"] .five.wide.column .card .extra li, -.user:not(.list) > .ui.container[class="ui container"] .five.wide.column .card .extra li, +.page-content.user > .ui.container[class="ui container"] .five.wide.column .card .extra li, .profile > .ui.container[class="ui container"] .five.wide.column .card .extra li { border: 0 !important; padding: 0.3rem 0.7rem; @@ -1265,91 +1264,108 @@ html { align-items: center; } .explore > .ui.container[class="ui container"] .five.wide.column .card .extra li svg, -.user:not(.list) > .ui.container[class="ui container"] .five.wide.column .card .extra li svg, +.page-content.user > .ui.container[class="ui container"] .five.wide.column .card .extra li svg, .profile > .ui.container[class="ui container"] .five.wide.column .card .extra li svg { margin-right: 8px; } .explore > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs, -.user:not(.list) > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs, +.page-content.user > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs, .profile > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs { justify-content: center; margin-top: 1rem !important; } .explore > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs li, -.user:not(.list) > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs li, +.page-content.user > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs li, .profile > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs li { flex-grow: 1 !important; } .explore > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs li a, -.user:not(.list) > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs li a, +.page-content.user > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs li a, .profile > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs li a { width: 100%; } .explore > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs li a img, -.user:not(.list) > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs li a img, +.page-content.user > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs li a img, .profile > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs li a img { width: 35px; height: 35px; } .explore > .ui.container[class="ui container"] .five.wide.column .card .extra li .render-content p, -.user:not(.list) > .ui.container[class="ui container"] .five.wide.column .card .extra li .render-content p, +.page-content.user > .ui.container[class="ui container"] .five.wide.column .card .extra li .render-content p, .profile > .ui.container[class="ui container"] .five.wide.column .card .extra li .render-content p { padding: 0.6rem 0; padding-bottom: 0.7rem !important; word-break: normal !important; } .explore > .ui.container[class="ui container"] .five.wide.column .card .extra .follow form, -.user:not(.list) > .ui.container[class="ui container"] .five.wide.column .card .extra .follow form, +.page-content.user > .ui.container[class="ui container"] .five.wide.column .card .extra .follow form, .profile > .ui.container[class="ui container"] .five.wide.column .card .extra .follow form { margin-top: 1rem; width: 100%; } .explore > .ui.container .eleven.wide.column, -.user:not(.list) > .ui.container .eleven.wide.column, +.page-content.user > .ui.container .eleven.wide.column, .profile > .ui.container .eleven.wide.column { flex-grow: 100; width: 500px !important; max-width: 100%; } .explore > .ui.container .eleven.wide.column .ui.secondary.stackable.pointing.tight.menu, -.user:not(.list) > .ui.container .eleven.wide.column .ui.secondary.stackable.pointing.tight.menu, +.page-content.user > .ui.container .eleven.wide.column .ui.secondary.stackable.pointing.tight.menu, .profile > .ui.container .eleven.wide.column .ui.secondary.stackable.pointing.tight.menu { margin: 0 -2px; margin-bottom: 1.5rem; position: sticky; top: 0px !important; - margin-top: -45px; - height: 45px; + margin-top: -40px; + height: 40px; z-index: 9999; background-color: var(--color-body); } +@supports (backdrop-filter: blur(10px)) { + .explore > .ui.container .eleven.wide.column .ui.secondary.stackable.pointing.tight.menu, + .page-content.user > .ui.container .eleven.wide.column .ui.secondary.stackable.pointing.tight.menu, + .profile > .ui.container .eleven.wide.column .ui.secondary.stackable.pointing.tight.menu { + backdrop-filter: blur(10px); + background-color: transparent; + } + .explore > .ui.container .eleven.wide.column .ui.secondary.stackable.pointing.tight.menu::before, + .page-content.user > .ui.container .eleven.wide.column .ui.secondary.stackable.pointing.tight.menu::before, + .profile > .ui.container .eleven.wide.column .ui.secondary.stackable.pointing.tight.menu::before { + content: ""; + position: absolute; + inset: 0; + background-color: var(--color-body); + opacity: 0.8; + } +} .explore > .ui.container .eleven.wide.column::before, -.user:not(.list) > .ui.container .eleven.wide.column::before, +.page-content.user > .ui.container .eleven.wide.column::before, .profile > .ui.container .eleven.wide.column::before { content: ""; position: sticky; margin: 0 !important; margin-left: -100vw !important; - margin-top: 45px !important; + margin-top: 40px !important; width: 200vw; display: block; border-bottom: 1px solid var(--color-secondary); - top: 44px; + top: 39px; z-index: -1; } .explore > .ui.container .item .meta, -.user:not(.list) > .ui.container .item .meta, +.page-content.user > .ui.container .item .meta, .profile > .ui.container .item .meta { display: flex; align-items: center; } .explore > .ui.container .item .meta svg, -.user:not(.list) > .ui.container .item .meta svg, +.page-content.user > .ui.container .item .meta svg, .profile > .ui.container .item .meta svg { margin-right: 4px; } .explore > .ui.container .item .meta a, -.user:not(.list) > .ui.container .item .meta a, +.page-content.user > .ui.container .item .meta a, .profile > .ui.container .item .meta a { max-width: calc(100% - 20px); white-space: nowrap; @@ -1360,12 +1376,39 @@ html { .ui.container > .news, .feeds > .news { border: 1px solid var(--color-secondary) !important; + border-bottom: none !important; background: var(--color-box-body); - margin-bottom: 1rem; - border-radius: var(--base-border-radius); + border-radius: var(--base-border-radius) var(--base-border-radius) 0 0; padding: 10px 12px !important; position: relative; } +.ui.container > .news + .news, +.feeds > .news + .news { + border-radius: 0 !important; +} +.ui.container > .news:last-child, +.feeds > .news:last-child { + border-radius: 0 0 var(--base-border-radius) var(--base-border-radius) !important; + border-bottom: 1px solid var(--color-secondary) !important; +} +.ui.container > .news::before, +.feeds > .news::before { + content: ""; + position: absolute; + inset: 0; + background: var(--color-primary); + opacity: 0; +} +.ui.container > .news:hover::before, +.feeds > .news:hover::before, +.ui.container > .news:focus-within::before, +.feeds > .news:focus-within::before { + opacity: 0.05; +} +.ui.container > .news .ui.left, +.feeds > .news .ui.left { + width: 40px; +} .ui.container > .news .ui.left img, .feeds > .news .ui.left img { margin: 0 !important; @@ -1377,6 +1420,7 @@ html { .feeds > .news .ui.grid { margin: 0 !important; padding: 0 !important; + padding-top: 1px !important; } .ui.container > .news .ui.grid > .column, .feeds > .news .ui.grid > .column { @@ -1438,13 +1482,15 @@ html { display: none; } /* REPOSITORY LIST */ -.ui.repository.list { +.ui.repository.list, +.ui.user.list { margin-top: 16px !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); grid-gap: 16px; } -.ui.repository.list .item { +.ui.repository.list .item, +.ui.user.list .item { width: 400px; width: 100%; min-height: unset !important; @@ -1459,35 +1505,44 @@ html { align-content: flex-start; } .ui.repository.list .item:hover, -.ui.repository.list .item:focus-within { +.ui.user.list .item:hover, +.ui.repository.list .item:focus-within, +.ui.user.list .item:focus-within { box-shadow: var(--lm-shadow); } -.ui.repository.list .item:focus-within { +.ui.repository.list .item:focus-within, +.ui.user.list .item:focus-within { outline: 1px solid var(--color-primary) !important; } -.ui.repository.list .item .header { +.ui.repository.list .item .header, +.ui.user.list .item .header { display: contents !important; } -.ui.repository.list .item .header .repo-title { +.ui.repository.list .item .header .repo-title, +.ui.user.list .item .header .repo-title { display: contents; position: relative; font-size: 1.2rem; line-height: 1.4em; } -.ui.repository.list .item .header .repo-title a { +.ui.repository.list .item .header .repo-title a, +.ui.user.list .item .header .repo-title a { white-space: normal !important; word-break: normal !important; } -.ui.repository.list .item .header .repo-title > * { +.ui.repository.list .item .header .repo-title > *, +.ui.user.list .item .header .repo-title > * { grid-column: 2/span 4; } -.ui.repository.list .item .header .repo-title .labels { +.ui.repository.list .item .header .repo-title .labels, +.ui.user.list .item .header .repo-title .labels { grid-column: 3; grid-row: 2; margin-left: 0 !important; white-space: nowrap; } -.ui.repository.list .item .header .repo-title a::before { +.ui.repository.list .item .header .repo-title a::before, +.ui.user.list .item .header .repo-title a::before { content: ""; position: absolute; top: 0; @@ -1495,7 +1550,8 @@ html { height: 80px; width: 100%; } -.ui.repository.list .item .header .avatar { +.ui.repository.list .item .header .avatar, +.ui.user.list .item .header .avatar { height: 50px !important; width: 50px !important; margin-right: 12px !important; @@ -1504,25 +1560,31 @@ html { grid-row: 1/span 2; border-radius: 12px; } -.ui.repository.list .item .header .metas { +.ui.repository.list .item .header .metas, +.ui.user.list .item .header .metas { grid-column: 2; grid-row: 2; width: 100%; } -.ui.repository.list .item .description { +.ui.repository.list .item .description, +.ui.user.list .item .description { display: contents; } -.ui.repository.list .item .description > p:first-child { +.ui.repository.list .item .description > p:first-child, +.ui.user.list .item .description > p:first-child { padding-top: 4px; margin-bottom: 0px; } -.ui.repository.list .item .description > * { +.ui.repository.list .item .description > *, +.ui.user.list .item .description > * { grid-column: 1/span 4; } -.ui.repository.list .item .description > *:nth-last-child(2) { +.ui.repository.list .item .description > *:nth-last-child(2), +.ui.user.list .item .description > *:nth-last-child(2) { margin-bottom: 0 !important; } -.ui.repository.list .item .description .time { +.ui.repository.list .item .description .time, +.ui.user.list .item .description .time { grid-row: 2; grid-column: 4; padding-top: 7px; @@ -1534,16 +1596,19 @@ html { z-index: 3; direction: rtl; } -.ui.repository.list .item .description .tags { +.ui.repository.list .item .description .tags, +.ui.user.list .item .description .tags { display: flex; overflow-x: auto; scrollbar-width: none; margin-top: 8px; } -.ui.repository.list .item .description .tags a > div { +.ui.repository.list .item .description .tags a > div, +.ui.user.list .item .description .tags a > div { width: max-content !important; } -.ui.repository.list .item .description .tags::after { +.ui.repository.list .item .description .tags::after, +.ui.user.list .item .description .tags::after { content: ""; min-width: 100px; margin-left: 100px; @@ -1553,13 +1618,35 @@ html { background: linear-gradient(to right, transparent, var(--color-box-body)); pointer-events: none; } +.ui.repository.list .item .content, +.ui.user.list .item .content { + padding-left: 12px; + margin-bottom: -0.4em; +} +.ui.repository.list .item .content .header a, +.ui.user.list .item .content .header a { + font-weight: 600; + text-transform: capitalize; +} +.ui.repository.list .item .content .description, +.ui.user.list .item .content .description { + display: flex; + flex-direction: column; + padding-left: 22px; + line-height: 1.8em; + margin-top: 0.5em; +} +.ui.repository.list .item .content .description svg, +.ui.user.list .item .content .description svg { + margin-bottom: -1.45em !important; + margin-left: -22px !important; +} /*** DASHBOARD ***/ .dashboard { display: flex; flex-wrap: wrap; margin: auto; max-width: 100%; - padding: 30px 10px; padding: 30px 0; width: 1300px; margin-bottom: -45px; @@ -1597,7 +1684,7 @@ html { .dashboard .dashboard-navbar > .ui > .item, .dashboard .dashboard-navbar > .ui > .right > .item { flex-direction: column; - margin: 0 20px !important; + margin: 0px !important; text-align: center; flex-grow: 1; display: flex !important; @@ -1936,4 +2023,4 @@ footer .container { opacity: 0; transform: scale(0.97); } -} \ No newline at end of file +} From 69c33bdc5fb2dae69f5190b93b562986b6e796bc Mon Sep 17 00:00:00 2001 From: Free Date: Wed, 18 Aug 2021 19:46:59 +0200 Subject: [PATCH 3/3] 1.0.4 --- Gitea/theme-gitea-modern.user.css | 3808 +++++++++++++++-------------- 1 file changed, 1993 insertions(+), 1815 deletions(-) diff --git a/Gitea/theme-gitea-modern.user.css b/Gitea/theme-gitea-modern.user.css index e71cbf8..92bac14 100644 --- a/Gitea/theme-gitea-modern.user.css +++ b/Gitea/theme-gitea-modern.user.css @@ -1,8 +1,8 @@ /* ==UserStyle== @name Gitea Modern -@version 1.0.3 +@version 1.0.4 @description A modern style for Gitea and Codeberg! -@updateURL https://codeberg.org/Freeplay/CSS-Styles/raw/branch/main/Gitea/Gitea-modern.user.css +@updateURL https://codeberg.org/Freeplay/CSS-Styles/raw/branch/main/Gitea/theme-gitea-modern.user.css @homepageURL https://codeberg.org/Freeplay/CSS-Styles @supportURL https://codeberg.org/Freeplay/CSS-Styles/issues @preprocessor stylus @@ -11,1828 +11,2006 @@ @namespace Freeplay @author Freeplay (https://freeplay.codeberg.page/) +@var text notice 'Make sure you are using the "Stylus" browser extension, not "Stylish"!' "'https://add0n.com/stylus.html'" + ==/UserStyle== */ - - - /* Make sure you're using the "Stylus" - /// browser extension!: - /// https://add0n.com/stylus.html - /// Don't use "Stylish". */ - - - /* You can apply more Gita instances by - /// Clicking the plus button next to the - /// Textboxes below, and inserting the - /// instance URL. */ - - @-moz-document domain("codeberg.org"), domain("gitea.com"), domain("try.gitea.io"), domain("gitdab.com"), domain("git.fsfe.org"), domain("git.passageenseine.fr"), domain("dev.sum7.eu") { - - - - - -/* Update 1.0.3 -- Fixed table stretching due to the grid -- Better keyboard accessability -- Fixed Codeberg dropdown -*/ - -:root { - --base-border-radius: 6px; - + :root { + --base-border-radius: 6px; + } + html.theme-gitea, + html.theme-arc-green { + --fonts-override: var(--fonts-regular); + } + a[rel*="nofollow"]:not(.ui):hover, + .link:not(.ui):hover, + a[rel*="nofollow"]:not(.ui):focus, + .link:not(.ui):focus { + text-decoration: underline; + text-underline-offset: 5px; + } + * { + outline: 0px dashed var(--color-primary); + outline-offset: -2px; + transition: outline-color 0.5s, outline-offset 0.5s; + } + :focus-visible:not(input) { + box-shadow: 0 0 18px 0px var(--color-primary) !important; + border-radius: 2px; + outline: 2px solid var(--color-primary) !important; + outline-offset: 2px; + } + .ui.buttons .ui.basic.button { + border-radius: 0; + } + .ui.button, + .ui.basic.button, + .ui.menu, + .input.action.fluid, + .ui.label, + .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.table, + .tab-size-8 { + border-radius: var(--base-border-radius); + } + .ui.menu > .item:first-child, + .ui.buttons .button:first-child, + .ui.buttons > .ui.basic.button:first-child { + border-radius: var(--base-border-radius) 0 0 var(--base-border-radius); + } + .ui.compact.menu:not(.secondary) .item:last-child, + .ui.buttons .button:last-child, + .ui.action.input > .button:last-child, + .ui.buttons > .ui.basic.button:last-child { + border-radius: 0 var(--base-border-radius) var(--base-border-radius) 0; + } + .ui.top.attached.header { + border-radius: var(--base-border-radius) var(--base-border-radius) 0 0; + } + .ui.avatar { + border-radius: var(--base-border-radius) !important; + } + .ui.compact.button { + padding-top: 0.3em; + padding-bottom: 0.3em; + min-height: 0.8em; + display: inline-flex; + align-items: center; + } + .ui.compact.button svg { + margin-bottom: -1px !important; + } + .ui.basic.button, + .ui.basic.label { + background: none; + } + .input.action.fluid { + border: 1px solid var(--color-secondary) !important; + height: 40px; + } + .input.action.fluid input { + border: 0; + } + .input.action.fluid button { + margin: 2px !important; + margin-left: 0 !important; + padding-top: 0 !important; + padding-bottom: 0 !important; + box-sizing: border-box; + border-radius: var(--base-border-radius) !important; + } + .input.action.fluid .icon { + border: 0 !important; + } + .input.action.fluid:focus-within { + outline: 1px solid var(--color-primary); + outline-offset: -1px; + } + .ui.form + .ui.divider { + display: none; + } + .three.column { + margin-left: 0; + margin-right: 0; + } + .three.column .column { + width: auto !important; + align-items: center !important; + display: flex !important; + } + .three.column .column form { + width: 100%; + } + .three.column .column:first-child { + padding-left: 0; + } + .three.column .column:last-child { + padding-right: 0; + } + .three.column .center { + flex-grow: 100; + padding-left: 0 !important; + padding-right: 0 !important; + } + .ui.two.column.stackable.grid > .column { + width: auto !important; + flex-grow: 1; + } + .ui.compact.tiny.menu { + flex-grow: 1; + } + .ui.compact.tiny.menu a { + flex-grow: 1; + justify-content: center; + } + .page-content:not(.home) > .middle { + padding: calc(4vw + 1rem) 4vw !important; + width: 100% !important; + } + .page-content:not(.home) > .middle > .column { + padding: 0 !important; + } + .full.height > span[style="display: inline !important;"]:first-child { + margin: auto; + line-height: 40px; + padding: 30px; + text-align: center; +/* Remove stuff that isn't needed when JS is disabled */ + } + .full.height > span[style="display: inline !important;"]:first-child::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 40px; + background: var(--color-navbar); + border-bottom: 1px solid var(--color-secondary); + z-index: -1; + } + .full.height > span[style="display: inline !important;"]:first-child ~ .page-content #app, + .full.height > span[style="display: inline !important;"]:first-child ~ .page-content #user-heatmap, + .full.height > span[style="display: inline !important;"]:first-child ~ .page-content #user-heatmap + .divider { + display: none !important; + } + .popup.tiny.inverted { + background: var(--color-body); + color: var(--color-text); + box-shadow: var(--lm-large-shadow); + border: 1px solid var(--color-secondary); + pointer-events: none; + z-index: 1000; + } + .popup.tiny.inverted::before { + background: var(--color-body) !important; + z-index: -99999 !important; + border-color: var(--color-secondary) !important; + } + .ui.left.popup::before { + border: 0; + border-top: 1px solid; + border-right: 1px solid; + } + .ui.right.popup::before { + border: 0; + border-left: 1px solid; + border-bottom: 1px solid; + } + .ui.top.popup::before { + border: 0; + border-right: 1px solid; + border-bottom: 1px solid; + } + .ui.bottom.popup::before { + border: 0; + border-top: 1px solid; + border-left: 1px solid; + } + .settings > .ui.container { + max-width: 1150px !important; + } + #user-heatmap { + overflow: auto hidden; + justify-content: flex-start; + max-width: 900px; + margin: auto; + } + #user-heatmap .vch__wrapper { + min-width: 500px; + } + .repo-title a:nth-last-child(2) { + font-weight: 600 !important; + } + .label:not(.basic) { + border-radius: 100px !important; + padding: 4px 8px !important; + font-weight: 700; + align-items: center; + justify-content: center; + min-width: 24px !important; + display: inline-flex; + } + .label:not(.basic).sha > .detail { +/* Fix SHA Padding */ + margin-left: 6px !important; + } + .label:not(.basic) svg { + margin-right: 4px; + } + .alert-primary.p-10 { + border: 0 !important; + padding: 20px !important; + } + .alert-primary.p-10 .close span { + font-size: 1.7em; + font-weight: 200; + padding-right: 6px; + } + .alert-primary.p-10 h4 { + margin-right: 1.7em; + font-weight: 600; + } + .ui.tabular.menu, + .ui.tight.menu { + position: relative; + flex-direction: row !important; + flex-wrap: nowrap !important; + overflow: auto hidden !important; + scrollbar-width: thin; + padding-bottom: 2px; + scrollbar-color: var(--color-primary) var(--color-secondary); + border-bottom: 1px solid var(--color-secondary) !important; + } + .ui.tabular.menu.ui.tight.menu > .item, + .ui.tight.menu.ui.tight.menu > .item { + width: auto !important; + border-bottom-width: 0px !important; + position: relative !important; + } + .ui.tabular.menu.ui.tight.menu > .item::before, + .ui.tight.menu.ui.tight.menu > .item::before { + content: "" !important; + position: absolute !important; + bottom: 0 !important; + left: 20px !important; + right: 20px !important; + top: unset !important; + width: unset !important; + height: 2px !important; + opacity: 0.7; + border-radius: 4px 4px 0 0; + background: none; + display: flex !important; + transition: left 2s; + } + .ui.tabular.menu.ui.tight.menu > .item.active::before, + .ui.tight.menu.ui.tight.menu > .item.active::before { + background-color: var(--color-primary) !important; + left: 0 !important; + right: 0 !important; + } + .ui.tabular.menu { + border-bottom: 0 !important; + position: relative; + } + .ui.tabular.menu::before { + content: ""; + position: absolute; + bottom: 1px; + left: 0; + right: 0; + z-index: -1; + border-top: 1px solid var(--color-secondary); + } + .ui.tabular.menu:not(.borderless) > .item { + width: auto !important; + padding-left: 16px; + padding-right: 16px; + min-width: 70px; + justify-content: center; + position: relative; + } + .ui.tabular.menu:not(.borderless) > .item svg { + margin-right: 10px !important; + } + .ui.tabular.menu:not(.borderless) > .item.active { + border-radius: 10px 10px 0 0 !important; + z-index: 1; + } + .ui.tabular.menu:not(.borderless) > .item.active::after { + content: "" !important; + position: absolute; + width: 6px; + height: 6px; + bottom: 1px; + right: -7px; + border-bottom-left-radius: 100px; + box-shadow: -1px 1px 0 0px var(--color-secondary), -3px 3px 0px 2px var(--color-body); + } + .ui.tabular.menu:not(.borderless) > .item.active::before { + all: unset; + content: "" !important; + position: absolute; + width: 6px; + height: 6px; + bottom: 1px; + left: -7px; + border-bottom-right-radius: 100px; + box-shadow: 1px 1px 0 0px var(--color-secondary), 3px 3px 0px 2px var(--color-body); + display: unset !important; + } + .ui.tabular.menu:not(.borderless) > .item.active:first-child::before { + content: none !important; + } + .repository .filter.menu .menu { + max-height: 80vh; + width: max-content !important; + } + .repository .filter.menu .menu .info { + width: 100% !important; + padding: 0.8em !important; + line-height: 1.2em; + white-space: normal !important; + } + html { + scrollbar-width: auto !important; + } + .full.height { + padding-bottom: 30px; + } + .following.bar { + --min-height: 60px; + background: none !important; + border-bottom: 1px solid var(--color-secondary) !important; + background-color: var(--color-navbar) !important; + position: relative; + min-height: var(--min-height); + align-items: center; + z-index: 99999; + } + #navbar { + padding: 0 calc(2px + 1%) !important; + background: none !important; + max-width: 100rem; + transition: padding 1s; + min-height: var(--min-height) !important; + margin: auto; + } + #navbar > .item:not(.brand), + #navbar > .right > .item { + color: var(--color-text-dark) !important; + font-size: 1rem !important; + font-weight: 600; + padding: 0 calc(0px + 1.1%); + height: calc(var(--min-height) + 1px) !important; + margin: 0 !important; + border-radius: 0; + border-top: 1px solid transparent; + border-bottom: 1px solid transparent; + margin-bottom: -1px !important; + background: none !important; + box-sizing: border-box; + transition: border 0.5s, padding 0.7s; + } + #navbar > .item:not(.brand) > span, + #navbar > .right > .item > span { + height: 100%; + display: flex; + align-items: center; + } + #navbar > .item:not(.brand):hover, + #navbar > .right > .item:hover, + #navbar > .item:not(.brand).active, + #navbar > .right > .item.active, + #navbar > .item:not(.brand):focus, + #navbar > .right > .item:focus { + border-bottom: 1px solid var(--color-primary); + transition: border 0.1s; + outline: none; + } + #navbar .item.brand { + padding: 0 !important; + min-height: var(--min-height) !important; + margin-right: calc(-30px + 2%) !important; + } + #navbar .item.brand a { + width: 35px; + height: 35px; + margin-right: 20px; + background-position: center; + } + #navbar .item.brand a img { + width: 100%; + height: 100%; + } + #navbar .right { + position: sticky; + right: 1%; + background-color: var(--color-navbar); + box-shadow: 100px 0px 0 var(--color-navbar); + width: 100%; + min-width: max-content; + justify-content: flex-end; + } + #navbar .right > .item { + padding: 0 10px; + } + #navbar .right > .item > .text { + display: flex; + align-items: center; + } + #navbar .right > .item > .text span:not(.fitted) { + margin-left: 10px; + } + #navbar .right > .item > .text img ~ .fitted { + margin-left: 4px; + } +@media only screen and (min-width: 850px) { + .page-content.repository:not(.issues.repository.milestones):not(.new:not(.issue)) { + display: grid; + grid-row-gap: 10px; + grid-template-columns: 100px calc(100% - 100px); + padding: 0 20px; + padding-top: 20px; + width: 1367px; + max-width: 100%; + margin: auto; + } + .page-content.repository:not(.issues.repository.milestones):not(.new:not(.issue)) .header-wrapper { + display: contents; + } + .page-content.repository:not(.issues.repository.milestones):not(.new:not(.issue)) .header-wrapper > .ui.container:first-child { + grid-row: 1; + grid-column: 1/span 2; + width: 100%; + padding-left: 100px; + border: 0 !important; + box-shadow: none !important; + } + .page-content.repository:not(.issues.repository.milestones):not(.new:not(.issue)) .header-wrapper > .ui.container:first-child .avatar, + .page-content.repository:not(.issues.repository.milestones):not(.new:not(.issue)) .header-wrapper > .ui.container:first-child .repo-icon { + width: 50px !important; + height: 50px !important; + object-fit: contain; + margin: 0 10px; + margin-left: -90px; + margin-right: 39px !important; + margin-bottom: -10px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 8px !important; + } + .page-content.repository:not(.issues.repository.milestones):not(.new:not(.issue)) .header-wrapper > .ui.container:first-child .repo-title-wrap { + display: flex; + flex-direction: row !important; + align-items: center; + } + .page-content.repository:not(.issues.repository.milestones):not(.new:not(.issue)) .header-wrapper > .ui.container:first-child .fork-flag { + margin: 0 !important; + margin-left: 6px !important; + padding: 2px 8px; + font-size: 12px; + border-radius: var(--base-border-radius); + border: 1px solid var(--color-secondary); + } + .page-content.repository:not(.issues.repository.milestones):not(.new:not(.issue)) .header-wrapper .tabs { + order: -1; + width: auto !important; + width: 70px; + margin: 0 !important; + margin-top: 60px !important; + grid-column: 1; + grid-row: 2/span 5; + height: min-content; + position: sticky; + bottom: 20px; + margin-bottom: -60px !important; + align-self: flex-end; + align-content: flex-start; + min-height: calc(100vh - 40px); + } + .page-content.repository:not(.issues.repository.milestones):not(.new:not(.issue)) .header-wrapper .tabs .tabular { + flex-direction: column !important; + padding-right: 30px; + overflow: visible !important; + padding-left: 0; + border-bottom: 0 !important; + } + .page-content.repository:not(.issues.repository.milestones):not(.new:not(.issue)) .header-wrapper .tabs .tabular::before { + content: unset !important; + } + .page-content.repository:not(.issues.repository.milestones):not(.new:not(.issue)) .header-wrapper .tabs .tabular .item { + display: flex; + flex-direction: column; + text-align: center; + padding-top: 12px; + padding-bottom: 18px; + position: relative; + background: none; + color: var(--color-text); + opacity: 0.7; + border-radius: 12px !important; + } + .page-content.repository:not(.issues.repository.milestones):not(.new:not(.issue)) .header-wrapper .tabs .tabular .item svg { + margin: 0; + width: 22px; + height: 22px; + max-width: unset !important; + margin-bottom: 10px; + margin-right: 0 !important; + overflow: visible; + order: -2; + } + .page-content.repository:not(.issues.repository.milestones):not(.new:not(.issue)) .header-wrapper .tabs .tabular .item .label { + margin: 0 !important; + margin-top: -3px !important; + margin-bottom: 6px !important; + order: -1; + position: relative; + } + .page-content.repository:not(.issues.repository.milestones):not(.new:not(.issue)) .header-wrapper .tabs .tabular .item.active { + border: none; + opacity: 1; + } + .page-content.repository:not(.issues.repository.milestones):not(.new:not(.issue)) .header-wrapper .tabs .tabular .item.active::before { + content: unset !important; + } + .page-content.repository:not(.issues.repository.milestones):not(.new:not(.issue)) .header-wrapper .tabs .tabular .item.active::after { + all: unset; + content: ""; + position: absolute; + top: 2px; + left: -5px; + right: -5px; + bottom: 5px; + background: var(--color-primary); + opacity: 0.1; + border-radius: 12px !important; + z-index: -1; + } + .page-content.repository:not(.issues.repository.milestones):not(.new:not(.issue)) .header-wrapper .tabs .tabular .item:hover { + opacity: 0.9 !important; + } + .page-content.repository:not(.issues.repository.milestones):not(.new:not(.issue)) .header-wrapper .tabs .tabular .right.menu { + display: contents; + } + .page-content.repository:not(.issues.repository.milestones):not(.new:not(.issue)) .header-wrapper .divider { + display: none; + } + .page-content.repository:not(.issues.repository.milestones):not(.new:not(.issue)) > .ui.container { + width: 100%; + } } -html.theme-gitea, html.theme-arc-green { - --fonts-override: var(--fonts-regular); + .page-content.repository:not(.milestones) { + width: 1300px; + height: min-content; + max-width: 100%; + margin: auto; + margin-bottom: -80px; +/* Move the repo stats to the side, only when page width larger than 1000px */ + } + .page-content.repository:not(.milestones) .header-wrapper { + padding-top: 40px !important; + border-bottom: 0 !important; + background: none; + } + .page-content.repository:not(.milestones) .header-wrapper .repo-title { + flex-wrap: wrap; + line-height: 1.5em; + justify-content: center; + } + .page-content.repository:not(.milestones) .header-wrapper .repo-buttons { + display: flex; + flex-wrap: wrap; + justify-content: center; + } + .page-content.repository:not(.milestones) .header-wrapper .repo-buttons > * { + margin-top: 4px; + } + .page-content.repository:not(.milestones) .header-wrapper .tabs.container { + margin-bottom: -2px; + margin-left: 0; + margin-right: 0; + width: 100%; + border-bottom: 0 !important; + } + .page-content.repository:not(.milestones) .header-wrapper .tabs.container .tabular { + padding-left: 2rem; + padding-right: 2rem; + border-bottom: 0 !important; + } + .page-content.repository:not(.milestones) > .ui.container { + height: min-content; + } + .page-content.repository:not(.milestones) > .ui.container > div:not(.attached) { + height: min-content; + margin-top: 0 !important; + margin-bottom: 0.7rem !important; + } + .page-content.repository:not(.milestones) > .ui.container > .column + .divider:not(.header) { + border: 0; + margin: -22px 0 !important; + } + .page-content.repository:not(.milestones) > .ui.container > .column:first-child > .column { + padding-top: 0; + } + .page-content.repository:not(.milestones) > .ui.container #repo-desc { + font-size: 1.14rem; + line-height: 1.6rem; + } + .page-content.repository:not(.milestones) > .ui.container #repo-topics { + margin: 0 -4px; + margin-bottom: 0 !important; + margin-top: -0.5rem !important; + align-items: flex-start !important; + } + .page-content.repository:not(.milestones) > .ui.container #repo-topics > *:last-child { + margin: 2px !important; + height: 22px !important; + margin-bottom: 0.7rem !important; + } + .page-content.repository:not(.milestones) > .ui.container .repo-topic { + border-radius: 100px; + padding: 4px 10px; + color: var(--color-primary); + font-size: 0.9rem; + position: relative; + } + .page-content.repository:not(.milestones) > .ui.container .repo-topic:not(:hover) { + background: none; + } + .page-content.repository:not(.milestones) > .ui.container .repo-topic::before { + content: ""; + position: absolute; + inset: 0; + border-radius: 100px; + background: var(--color-primary); + opacity: 0.07; + z-index: -1; + } + .page-content.repository:not(.milestones) > .ui.container .form .ui.tabular.menu { + margin-bottom: -2px; + z-index: 1; + } + .page-content.repository:not(.milestones) > .ui.container #comment-form .markdown { + padding-top: 15px; + } + .page-content.repository:not(.milestones) > .ui.container .mobile--no-negative-margins { + margin: 10px -6px; + flex-wrap: wrap; + grid-row-gap: 5px; + } + .page-content.repository:not(.milestones) > .ui.container .mobile--no-negative-margins > .item:nth-last-child(+2) { + flex-grow: 1; + } + .page-content.repository:not(.milestones) > .ui.container .mobile--no-negative-margins > .item:last-child { + flex: 3 1 100px; + margin-left: 4px; + } + .page-content.repository:not(.milestones) > .ui.container .mobile--no-negative-margins > .item:first-child .floating.filter.dropdown > .basic.small.compact.button .text { + font-size: 0; + display: flex; + align-items: center; + } + .page-content.repository:not(.milestones) > .ui.container .mobile--no-negative-margins > .item:first-child .floating.filter.dropdown > .basic.small.compact.button .text strong { + font-size: 1rem; + margin-left: 8px; + margin-right: 4px; + text-transform: capitalize; + font-weight: 500; + } + .page-content.repository:not(.milestones) > .ui.container .mobile--no-negative-margins .breadcrumb { + margin: 0 10px; + } + .page-content.repository:not(.milestones) > .ui.container .mobile--no-negative-margins button, + .page-content.repository:not(.milestones) > .ui.container .mobile--no-negative-margins .button { + align-content: center; + display: flex; + align-items: center; + height: 32px !important; + padding-left: 16px !important; + padding-right: 16px !important; + box-sizing: border-box; + } + .page-content.repository:not(.milestones) > .ui.container .mobile--no-negative-margins button.icon, + .page-content.repository:not(.milestones) > .ui.container .mobile--no-negative-margins .button.icon { + padding-left: 8px !important; + padding-right: 8px !important; + } + .page-content.repository:not(.milestones) > .ui.container .mobile--no-negative-margins #file-buttons { + margin: 0 4px !important; + } + .page-content.repository:not(.milestones) > .ui.container .mobile--no-negative-margins #clone-panel { + width: 0px !important; + box-sizing: border-box; + flex-grow: 1; + border: 1px solid var(--color-secondary); + padding: 2px; + height: 32px; + border-radius: var(--base-border-radius); + } + .page-content.repository:not(.milestones) > .ui.container .mobile--no-negative-margins #clone-panel input { + width: 0px !important; + min-width: unset; + flex-grow: 1; + border: 0; + background: none; + border-radius: var(--base-border-radius) !important; + } + .page-content.repository:not(.milestones) > .ui.container .mobile--no-negative-margins #clone-panel button { + border-radius: var(--base-border-radius) !important; + margin-right: 2px; + height: 100% !important; + background: none; + border: 0; + } + .page-content.repository:not(.milestones) > .ui.container .mobile--no-negative-margins #clone-panel button:hover { + background: var(--color-light); + } + .page-content.repository:not(.milestones) > .ui.container .mobile--no-negative-margins #clone-panel button:last-child { + margin-right: 0; + } + .page-content.repository:not(.milestones) > .ui.container #repo-files-table { + margin-top: 0; + background: none !important; + } + .page-content.repository:not(.milestones) > .ui.container #repo-files-table thead { + position: relative; + } + .page-content.repository:not(.milestones) > .ui.container #repo-files-table thead::after { + content: ""; + position: absolute; + inset: 0; + background: var(--color-primary); + opacity: 0.05; + z-index: -1; + } + .page-content.repository:not(.milestones) > .ui.container #repo-files-table thead tr { + background: none !important; + } + .page-content.repository:not(.milestones) > .ui.container #repo-files-table thead th { + padding: 12px 12px; + background: none !important; + } + .page-content.repository:not(.milestones) > .ui.container #repo-files-table thead th a { + color: var(--color-text); + } + .page-content.repository:not(.milestones) > .ui.container #repo-files-table thead th > .avatar { + width: 20px; + height: 20px; + margin: 4px; + margin-right: 8px !important; + } + .page-content.repository:not(.milestones) > .ui.container #repo-files-table thead .avatar { + margin-right: 4px; + } + .page-content.repository:not(.milestones) > .ui.container #repo-files-table thead .avatar + a { + display: inline-flex !important; + transform: translateY(1px); + } + .page-content.repository:not(.milestones) > .ui.container #repo-files-table thead .message-wrapper { + overflow: visible; + display: inline-flex; + } + .page-content.repository:not(.milestones) > .ui.container #repo-files-table thead .message-wrapper a { + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + .page-content.repository:not(.milestones) > .ui.container #repo-files-table thead .commit-body { + padding: 6px; + padding-right: 0; + } + .page-content.repository:not(.milestones) > .ui.container #repo-files-table tr { + position: relative; + } + .page-content.repository:not(.milestones) > .ui.container #repo-files-table td::before { + content: ""; + position: absolute !important; + inset: 0; + pointer-events: none !important; + z-index: -100 !important; + background: var(--color-primary); + opacity: 0; + } + .page-content.repository:not(.milestones) > .ui.container #repo-files-table tr:hover td:nth-child(2)::before, + .page-content.repository:not(.milestones) > .ui.container #repo-files-table tr:focus-within td:nth-child(2)::before { + opacity: 0.1; + } + .page-content.repository:not(.milestones) > .ui.container #repo-files-table .truncate { + overflow: visible; + display: inline-flex; + } + .page-content.repository:not(.milestones) > .ui.container #repo-files-table .truncate a { + margin: -8px 0; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + width: 100%; + color: var(--color-text); + } + .page-content.repository:not(.milestones) > .ui.container #repo-files-table .truncate a:hover, + .page-content.repository:not(.milestones) > .ui.container #repo-files-table .truncate a:focus { + color: var(--color-primary); + } + .page-content.repository:not(.milestones) > .ui.container #repo-files-table .truncate svg { + margin: 0 10px; + margin-top: 2px; + } + .page-content.repository:not(.milestones) > .ui.container #repo-files-table .name { + padding-left: 8px; + } + .page-content.repository:not(.milestones) > .ui.container #repo-files-table .message, + .page-content.repository:not(.milestones) > .ui.container #repo-files-table .right { + opacity: 0.8; + } + .page-content.repository:not(.milestones) > .ui.container .file-header { + padding: 8px 16px !important; + font-size: 1rem; + } + .page-content.repository:not(.milestones) > .ui.container .file-header .octicon-book { + color: var(--color-text-light-2) !important; + margin-right: 10px !important; + } + .page-content.repository:not(.milestones) > .ui.container .file-header strong { + line-height: 35px; + } + .page-content.repository:not(.milestones) > .ui.container .issue.list { + margin-top: -8px !important; + } + .page-content.repository:not(.milestones) > .ui.container .ui.grid > .eleven { + margin-left: 1rem; + } + .page-content.repository:not(.milestones) > .ui.container .ui.grid > .four > .metas { + position: sticky; + min-height: calc(100vh - 40px); + bottom: 20px; + top: unset; + align-self: flex-end; + } +@media only screen and (min-width: 1000px) { + .page-content.repository:not(.milestones).file > .ui.container, + .page-content.repository:not(.milestones).commits > .ui.container, + .page-content.repository:not(.milestones).branches > .ui.container { + margin: 0 !important; + grid-column: 2; + width: auto !important; + max-width: 100% !important; + display: grid; + grid-template-columns: calc(100% - 100px) 100px; + grid-template-rows: min-content !important; + align-items: flex-start; + } + .page-content.repository:not(.milestones).file > .ui.container > *, + .page-content.repository:not(.milestones).commits > .ui.container > *, + .page-content.repository:not(.milestones).branches > .ui.container > * { + grid-column: 1; + } + .page-content.repository:not(.milestones).file > .ui.container .repository-summary, + .page-content.repository:not(.milestones).commits > .ui.container .repository-summary, + .page-content.repository:not(.milestones).branches > .ui.container .repository-summary { + grid-column: 2; + grid-row: 1/span 50; + border: 0; + margin-top: 12px !important; + margin-left: 30px; + height: min-content; + position: sticky; + bottom: 20px; + align-self: flex-end; + background: none !important; + min-height: calc(100vh - 40px); + margin-bottom: -60px !important; + overflow: visible !important; + display: flex; + flex-direction: column; + align-items: center; + } + .page-content.repository:not(.milestones).file > .ui.container .repository-summary .segment, + .page-content.repository:not(.milestones).commits > .ui.container .repository-summary .segment, + .page-content.repository:not(.milestones).branches > .ui.container .repository-summary .segment { + background: none; + } + .page-content.repository:not(.milestones).file > .ui.container .repository-summary .language-stats-details, + .page-content.repository:not(.milestones).commits > .ui.container .repository-summary .language-stats-details, + .page-content.repository:not(.milestones).branches > .ui.container .repository-summary .language-stats-details { + display: flex !important; + padding: 0; + border-top: 1px solid rgba(0,0,0,0.1); + overflow: hidden; + background: none !important; + } + .page-content.repository:not(.milestones).file > .ui.container .repository-summary .language-stats-details .item, + .page-content.repository:not(.milestones).commits > .ui.container .repository-summary .language-stats-details .item, + .page-content.repository:not(.milestones).branches > .ui.container .repository-summary .language-stats-details .item { + flex-direction: column; + } + .page-content.repository:not(.milestones).file > .ui.container .repository-summary .language-stats-details .item > *, + .page-content.repository:not(.milestones).commits > .ui.container .repository-summary .language-stats-details .item > *, + .page-content.repository:not(.milestones).branches > .ui.container .repository-summary .language-stats-details .item > * { + margin: 0 !important; + } + .page-content.repository:not(.milestones).file > .ui.container .repository-summary .language-stats-details .item i, + .page-content.repository:not(.milestones).commits > .ui.container .repository-summary .language-stats-details .item i, + .page-content.repository:not(.milestones).branches > .ui.container .repository-summary .language-stats-details .item i { + margin-bottom: 8px !important; + } + .page-content.repository:not(.milestones).file > .ui.container .repository-summary .repository-menu, + .page-content.repository:not(.milestones).commits > .ui.container .repository-summary .repository-menu, + .page-content.repository:not(.milestones).branches > .ui.container .repository-summary .repository-menu { + display: block !important; + height: unset !important; + } + .page-content.repository:not(.milestones).file > .ui.container .repository-summary .language-stats-details, + .page-content.repository:not(.milestones).commits > .ui.container .repository-summary .language-stats-details, + .page-content.repository:not(.milestones).branches > .ui.container .repository-summary .language-stats-details { + height: unset !important; + padding: 0 !important; + margin: 0 !important; + order: 2; + border: 0 !important; + } + .page-content.repository:not(.milestones).file > .ui.container .repository-summary .language-stats, + .page-content.repository:not(.milestones).commits > .ui.container .repository-summary .language-stats, + .page-content.repository:not(.milestones).branches > .ui.container .repository-summary .language-stats { + border-radius: var(--base-border-radius) !important; + overflow: hidden !important; + pointer-events: none; + } + .page-content.repository:not(.milestones).file > .ui.container .repository-summary .horizontal.list:not(.two), + .page-content.repository:not(.milestones).commits > .ui.container .repository-summary .horizontal.list:not(.two), + .page-content.repository:not(.milestones).branches > .ui.container .repository-summary .horizontal.list:not(.two) { + padding-top: 1rem; + } + .page-content.repository:not(.milestones).file > .ui.container .repository-summary .list, + .page-content.repository:not(.milestones).commits > .ui.container .repository-summary .list, + .page-content.repository:not(.milestones).branches > .ui.container .repository-summary .list { + flex-direction: column; + background: none !important; + } + .page-content.repository:not(.milestones).file > .ui.container .repository-summary .list .item, + .page-content.repository:not(.milestones).commits > .ui.container .repository-summary .list .item, + .page-content.repository:not(.milestones).branches > .ui.container .repository-summary .list .item { + border-radius: 12px !important; + padding: 12px 0 !important; + padding-bottom: 18px !important; + position: relative; + margin-right: 0 !important; + } + .page-content.repository:not(.milestones).file > .ui.container .repository-summary .list .item a, + .page-content.repository:not(.milestones).commits > .ui.container .repository-summary .list .item a, + .page-content.repository:not(.milestones).branches > .ui.container .repository-summary .list .item a { + padding: 0 !important; + } + .page-content.repository:not(.milestones).file > .ui.container .repository-summary .list .item .bold, + .page-content.repository:not(.milestones).commits > .ui.container .repository-summary .list .item .bold, + .page-content.repository:not(.milestones).branches > .ui.container .repository-summary .list .item .bold, + .page-content.repository:not(.milestones).file > .ui.container .repository-summary .list .item b, + .page-content.repository:not(.milestones).commits > .ui.container .repository-summary .list .item b, + .page-content.repository:not(.milestones).branches > .ui.container .repository-summary .list .item b { + font-weight: 500 !important; + } + .page-content.repository:not(.milestones).file > .ui.container .repository-summary .list .item.active, + .page-content.repository:not(.milestones).commits > .ui.container .repository-summary .list .item.active, + .page-content.repository:not(.milestones).branches > .ui.container .repository-summary .list .item.active { + background: none !important; + } + .page-content.repository:not(.milestones).file > .ui.container .repository-summary .list .item.active::before, + .page-content.repository:not(.milestones).commits > .ui.container .repository-summary .list .item.active::before, + .page-content.repository:not(.milestones).branches > .ui.container .repository-summary .list .item.active::before { + content: ""; + position: absolute; + top: 0; + left: -5px; + right: -5px; + bottom: 5px; + background: var(--color-primary); + opacity: 0.1; + z-index: -1; + border-radius: 12px; + } + .page-content.repository:not(.milestones).file > .ui.container .repository-summary .list a, + .page-content.repository:not(.milestones).commits > .ui.container .repository-summary .list a, + .page-content.repository:not(.milestones).branches > .ui.container .repository-summary .list a, + .page-content.repository:not(.milestones).file > .ui.container .repository-summary .list span, + .page-content.repository:not(.milestones).commits > .ui.container .repository-summary .list span, + .page-content.repository:not(.milestones).branches > .ui.container .repository-summary .list span { + display: flex; + flex-direction: column; + padding: 0 10px; + justify-content: center; + } + .page-content.repository:not(.milestones).file > .ui.container .repository-summary .list a > *, + .page-content.repository:not(.milestones).commits > .ui.container .repository-summary .list a > *, + .page-content.repository:not(.milestones).branches > .ui.container .repository-summary .list a > *, + .page-content.repository:not(.milestones).file > .ui.container .repository-summary .list span > *, + .page-content.repository:not(.milestones).commits > .ui.container .repository-summary .list span > *, + .page-content.repository:not(.milestones).branches > .ui.container .repository-summary .list span > * { + margin-bottom: 5px; + } + .page-content.repository:not(.milestones).file > .ui.container .repository-summary .list a svg, + .page-content.repository:not(.milestones).commits > .ui.container .repository-summary .list a svg, + .page-content.repository:not(.milestones).branches > .ui.container .repository-summary .list a svg, + .page-content.repository:not(.milestones).file > .ui.container .repository-summary .list span svg, + .page-content.repository:not(.milestones).commits > .ui.container .repository-summary .list span svg, + .page-content.repository:not(.milestones).branches > .ui.container .repository-summary .list span svg { + width: 100%; + height: 20px; + margin-bottom: 10px !important; + } } -a[rel*="nofollow"]:not(.ui), .link:not(.ui) { - &:hover, &:focus { - text-decoration: underline; - text-underline-offset: 5px; - } + .issue.list, + .milestone.list { + border: 1px solid var(--color-secondary); + border-radius: var(--base-border-radius); + background: var(--color-menu); + padding: 0 !important; + margin-top: 1rem; + } + .issue.list.milestone.list li, + .milestone.list.milestone.list li { + border-bottom-style: solid !important; + } + .issue.list.milestone.list li:last-child, + .milestone.list.milestone.list li:last-child { + border-bottom: 0; + } + .issue.list li, + .milestone.list li { + padding: 10px !important; + padding-bottom: 6px !important; + position: relative; + } + .issue.list li:hover, + .milestone.list li:hover { + box-shadow: inset 0 0 600px -300px var(--color-primary); + } + .issue.list li .issue-item-left, + .milestone.list li .issue-item-left { + padding-top: 2px; + } + .issue.list li .issue-item-left svg, + .milestone.list li .issue-item-left svg { + margin-right: 8px; + } + .issue.list li .issue-item-top-row a, + .milestone.list li .issue-item-top-row a { + vertical-align: unset !important; + } + .issue.list li .issue-item-bottom-row, + .milestone.list li .issue-item-bottom-row { + margin-top: -2px !important; + } + .issue.list li .issue-item-bottom-row svg, + .milestone.list li .issue-item-bottom-row svg { + margin-top: 3px; + } + .issue.list li .content, + .milestone.list li .content { + padding-bottom: 2px; + padding-top: 2px !important; + } + .issue.list .label, + .milestone.list .label { + margin-top: -1px; + position: relative; + } + #release-list { + padding-left: 0; + } + #release-list .four.wide.column { + position: sticky !important; + top: 0px; + height: min-content; + width: 150px !important; + } + .explore, + .page-content.user, + .profile { + display: flex; + flex-wrap: wrap; + justify-content: center; +/* Responsive explore page */ + } + .explore.explore > .ui.container, + .page-content.user.explore > .ui.container, + .profile.explore > .ui.container { + max-width: calc(100vw - 40px); + width: 3000px !important; + padding: 0 calc(10vw - 80px); + } + .explore.organization > .ui.container:first-child, + .page-content.user.organization > .ui.container:first-child, + .profile.organization > .ui.container:first-child { + padding-top: 30px; + padding-bottom: 30px; + } + .explore.organization > .ui.container:first-child #org-info, + .page-content.user.organization > .ui.container:first-child #org-info, + .profile.organization > .ui.container:first-child #org-info { + display: flex; + flex-direction: column; + margin: 0 10px; + justify-content: center; + } + .explore.organization > .ui.container:first-child #org-info > p, + .page-content.user.organization > .ui.container:first-child #org-info > p, + .profile.organization > .ui.container:first-child #org-info > p { + margin: 0 !important; + margin-bottom: 0.2rem !important; + } + .explore.organization > .ui.container:first-child #org-info .item, + .page-content.user.organization > .ui.container:first-child #org-info .item, + .profile.organization > .ui.container:first-child #org-info .item { + display: flex; + align-items: center; + } + .explore.organization > .ui.container:first-child #org-info .item a, + .page-content.user.organization > .ui.container:first-child #org-info .item a, + .profile.organization > .ui.container:first-child #org-info .item a { + margin-left: 4px; + } + .explore.organization .ui.eleven.wide.column::before, + .page-content.user.organization .ui.eleven.wide.column::before, + .profile.organization .ui.eleven.wide.column::before { + content: unset !important; + } + .explore > .ui.container, + .page-content.user > .ui.container, + .profile > .ui.container { + max-width: 1350px; + width: 100% !important; + padding: 0 20px; + } + .explore > .ui.container[class="ui container"] .five.wide.column, + .page-content.user > .ui.container[class="ui container"] .five.wide.column, + .profile > .ui.container[class="ui container"] .five.wide.column { + width: 320px !important; + flex: 1 0 320px !important; + position: sticky; + bottom: 10px; + align-self: flex-end; + min-height: 100vh; + } + .explore > .ui.container[class="ui container"] .five.wide.column .card, + .page-content.user > .ui.container[class="ui container"] .five.wide.column .card, + .profile > .ui.container[class="ui container"] .five.wide.column .card { + width: 100%; + border: 0; + background: none !important; + } + .explore > .ui.container[class="ui container"] .five.wide.column .card #profile-avatar, + .page-content.user > .ui.container[class="ui container"] .five.wide.column .card #profile-avatar, + .profile > .ui.container[class="ui container"] .five.wide.column .card #profile-avatar { + padding-left: 0.7rem; + padding-right: 2rem !important; + padding-top: 0.5rem; + } + .explore > .ui.container[class="ui container"] .five.wide.column .card #profile-avatar .avatar, + .page-content.user > .ui.container[class="ui container"] .five.wide.column .card #profile-avatar .avatar, + .profile > .ui.container[class="ui container"] .five.wide.column .card #profile-avatar .avatar { + border-radius: calc(var(--base-border-radius) * 2) !important; + box-shadow: 0 4px 12px rgba(0,0,0,0.1); + border: 1px solid var(--color-secondary); + background: var(--color-body); + height: 100% !important; + max-height: 80vh; + } + .explore > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name, + .page-content.user > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name, + .profile > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name { + font-size: 2rem; + display: contents; + } + .explore > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name span, + .page-content.user > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name span, + .profile > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name span { + text-align: left; + font-weight: 600; + padding-left: 0.7rem; + margin: 1.5rem 0; + } + .explore > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name span.header, + .page-content.user > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name span.header, + .profile > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name span.header { + font-weight: 500; + letter-spacing: 0.1em; + height: 39px; + line-height: 40px; + margin-bottom: -1.2em; + margin-top: 0; + background: var(--color-body); + position: sticky; + top: 0px; + z-index: 3; + box-shadow: 0 -5px 5px var(--color-body); + } + .explore > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name span.username, + .page-content.user > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name span.username, + .profile > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name span.username { + z-index: 2; + } + .explore > .ui.container[class="ui container"] .five.wide.column .card .extra, + .page-content.user > .ui.container[class="ui container"] .five.wide.column .card .extra, + .profile > .ui.container[class="ui container"] .five.wide.column .card .extra { + border: 0 !important; + } + .explore > .ui.container[class="ui container"] .five.wide.column .card .extra li, + .page-content.user > .ui.container[class="ui container"] .five.wide.column .card .extra li, + .profile > .ui.container[class="ui container"] .five.wide.column .card .extra li { + border: 0 !important; + padding: 0.3rem 0.7rem; + display: flex; + align-items: center; + } + .explore > .ui.container[class="ui container"] .five.wide.column .card .extra li svg, + .page-content.user > .ui.container[class="ui container"] .five.wide.column .card .extra li svg, + .profile > .ui.container[class="ui container"] .five.wide.column .card .extra li svg { + margin-right: 8px; + } + .explore > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs, + .page-content.user > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs, + .profile > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs { + justify-content: center; + margin-top: 1rem !important; + } + .explore > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs li, + .page-content.user > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs li, + .profile > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs li { + flex-grow: 1 !important; + } + .explore > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs li a, + .page-content.user > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs li a, + .profile > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs li a { + width: 100%; + } + .explore > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs li a img, + .page-content.user > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs li a img, + .profile > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs li a img { + width: 35px; + height: 35px; + } + .explore > .ui.container[class="ui container"] .five.wide.column .card .extra li .render-content p, + .page-content.user > .ui.container[class="ui container"] .five.wide.column .card .extra li .render-content p, + .profile > .ui.container[class="ui container"] .five.wide.column .card .extra li .render-content p { + padding: 0.6rem 0; + padding-bottom: 0.7rem !important; + word-break: normal !important; + } + .explore > .ui.container[class="ui container"] .five.wide.column .card .extra .follow form, + .page-content.user > .ui.container[class="ui container"] .five.wide.column .card .extra .follow form, + .profile > .ui.container[class="ui container"] .five.wide.column .card .extra .follow form { + margin-top: 1rem; + width: 100%; + } + .explore > .ui.container .eleven.wide.column, + .page-content.user > .ui.container .eleven.wide.column, + .profile > .ui.container .eleven.wide.column { + flex-grow: 100; + width: 500px !important; + max-width: 100%; + } + .explore > .ui.container .eleven.wide.column .ui.secondary.stackable.pointing.tight.menu, + .page-content.user > .ui.container .eleven.wide.column .ui.secondary.stackable.pointing.tight.menu, + .profile > .ui.container .eleven.wide.column .ui.secondary.stackable.pointing.tight.menu { + margin: 0 -2px; + margin-bottom: 1.5rem; + position: sticky; + top: 0px !important; + margin-top: -40px; + height: 40px; + z-index: 9999; + background-color: var(--color-body); + } + @supports (backdrop-filter: blur(10px)) { + .explore > .ui.container .eleven.wide.column .ui.secondary.stackable.pointing.tight.menu, + .page-content.user > .ui.container .eleven.wide.column .ui.secondary.stackable.pointing.tight.menu, + .profile > .ui.container .eleven.wide.column .ui.secondary.stackable.pointing.tight.menu { + backdrop-filter: blur(10px); + background-color: transparent; + } + .explore > .ui.container .eleven.wide.column .ui.secondary.stackable.pointing.tight.menu::before, + .page-content.user > .ui.container .eleven.wide.column .ui.secondary.stackable.pointing.tight.menu::before, + .profile > .ui.container .eleven.wide.column .ui.secondary.stackable.pointing.tight.menu::before { + content: ""; + position: absolute; + inset: 0; + background-color: var(--color-body); + opacity: 0.8; + } + } + .explore > .ui.container .eleven.wide.column::before, + .page-content.user > .ui.container .eleven.wide.column::before, + .profile > .ui.container .eleven.wide.column::before { + content: ""; + position: sticky; + margin: 0 !important; + margin-left: -100vw !important; + margin-top: 40px !important; + width: 200vw; + display: block; + border-bottom: 1px solid var(--color-secondary); + top: 39px; + z-index: -1; + } + .explore > .ui.container .item .meta, + .page-content.user > .ui.container .item .meta, + .profile > .ui.container .item .meta { + display: flex; + align-items: center; + } + .explore > .ui.container .item .meta svg, + .page-content.user > .ui.container .item .meta svg, + .profile > .ui.container .item .meta svg { + margin-right: 4px; + } + .explore > .ui.container .item .meta a, + .page-content.user > .ui.container .item .meta a, + .profile > .ui.container .item .meta a { + max-width: calc(100% - 20px); + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + .ui.container > .news, + .feeds > .news { + border: 1px solid var(--color-secondary) !important; + border-bottom: none !important; + background: var(--color-box-body); + border-radius: var(--base-border-radius) var(--base-border-radius) 0 0; + padding: 10px 12px !important; + position: relative; + } + .ui.container > .news + .news, + .feeds > .news + .news { + border-radius: 0 !important; + } + .ui.container > .news:last-child, + .feeds > .news:last-child { + border-radius: 0 0 var(--base-border-radius) var(--base-border-radius) !important; + border-bottom: 1px solid var(--color-secondary) !important; + } + .ui.container > .news::before, + .feeds > .news::before { + content: ""; + position: absolute; + inset: 0; + background: var(--color-primary); + opacity: 0; + } + .ui.container > .news:hover::before, + .feeds > .news:hover::before, + .ui.container > .news:focus-within::before, + .feeds > .news:focus-within::before { + opacity: 0.05; + } + .ui.container > .news .ui.left, + .feeds > .news .ui.left { + width: 40px; + } + .ui.container > .news .ui.left img, + .feeds > .news .ui.left img { + margin: 0 !important; + margin-top: 2px !important; + margin-right: 15px !important; + border-radius: var(--base-border-radius); + } + .ui.container > .news .ui.grid, + .feeds > .news .ui.grid { + margin: 0 !important; + padding: 0 !important; + padding-top: 1px !important; + } + .ui.container > .news .ui.grid > .column, + .feeds > .news .ui.grid > .column { + padding: 0 !important; + width: 100% !important; + } + .ui.container > .news .ui.grid > .column > div, + .feeds > .news .ui.grid > .column > div { + display: flex; + flex-wrap: wrap; + min-height: 60px; + } + .ui.container > .news .ui.grid > .column > div > *:first-child, + .feeds > .news .ui.grid > .column > div > *:first-child { + min-width: 100%; + } + .ui.container > .news .ui.grid > .column > div > *:last-child, + .feeds > .news .ui.grid > .column > div > *:last-child { + margin-left: auto; + margin-top: auto; + } + .ui.container > .news .ui.grid .content, + .feeds > .news .ui.grid .content { + max-width: 100%; + } + .ui.container > .news .ui.grid > .column > div > p:first-child, + .feeds > .news .ui.grid > .column > div > p:first-child { + margin-bottom: 0.4rem; + font-weight: 600; + } + .ui.container > .news .ui.grid > .right.column, + .feeds > .news .ui.grid > .right.column { + position: absolute; + top: 45px; + left: 0; + width: 52px !important; + text-align: center; + } + .ui.container > .news .ui.grid > .right.column svg, + .feeds > .news .ui.grid > .right.column svg { + width: 28px; + height: 28px; + padding: 4px; + } + .ui.container > .news .ui.grid .title, + .feeds > .news .ui.grid .title, + .ui.container > .news .ui.grid p, + .feeds > .news .ui.grid p, + .ui.container > .news .ui.grid ul, + .feeds > .news .ui.grid ul { + margin-bottom: 0; + } + .ui.container > .news .ui.grid ul, + .feeds > .news .ui.grid ul { + border-left: 4px solid var(--color-secondary); + } + .ui.container > .news .divider, + .feeds > .news .divider { + display: none; + } + .ui.repository.list, + .ui.user.list { + margin-top: 16px !important; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); + grid-gap: 16px; + } + .ui.repository.list .item, + .ui.user.list .item { + width: 400px; + width: 100%; + min-height: unset !important; + padding: 14px 16px !important; + border: 1px solid var(--color-secondary); + background: var(--color-box-body); + border-radius: 8px; + flex-grow: 1; + display: grid !important; + position: relative; + grid-template-columns: max-content 1fr; + align-content: flex-start; + } + .ui.repository.list .item:hover, + .ui.user.list .item:hover, + .ui.repository.list .item:focus-within, + .ui.user.list .item:focus-within { + box-shadow: var(--lm-shadow); + } + .ui.repository.list .item:focus-within, + .ui.user.list .item:focus-within { + outline: 1px solid var(--color-primary) !important; + } + .ui.repository.list .item .header, + .ui.user.list .item .header { + display: contents !important; + } + .ui.repository.list .item .header .repo-title, + .ui.user.list .item .header .repo-title { + display: contents; + position: relative; + font-size: 1.2rem; + line-height: 1.4em; + } + .ui.repository.list .item .header .repo-title a, + .ui.user.list .item .header .repo-title a { + white-space: normal !important; + word-break: normal !important; + } + .ui.repository.list .item .header .repo-title > *, + .ui.user.list .item .header .repo-title > * { + grid-column: 2/span 4; + } + .ui.repository.list .item .header .repo-title .labels, + .ui.user.list .item .header .repo-title .labels { + grid-column: 3; + grid-row: 2; + margin-left: 0 !important; + white-space: nowrap; + } + .ui.repository.list .item .header .repo-title a::before, + .ui.user.list .item .header .repo-title a::before { + content: ""; + position: absolute; + top: 0; + left: 0; + height: 80px; + width: 100%; + } + .ui.repository.list .item .header .avatar, + .ui.user.list .item .header .avatar { + height: 50px !important; + width: 50px !important; + margin-right: 12px !important; + margin-left: -2px; + grid-column: 1; + grid-row: 1/span 2; + border-radius: 12px; + } + .ui.repository.list .item .header .metas, + .ui.user.list .item .header .metas { + grid-column: 2; + grid-row: 2; + width: 100%; + } + .ui.repository.list .item .description, + .ui.user.list .item .description { + display: contents; + } + .ui.repository.list .item .description > p:first-child, + .ui.user.list .item .description > p:first-child { + padding-top: 4px; + margin-bottom: 0px; + } + .ui.repository.list .item .description > *, + .ui.user.list .item .description > * { + grid-column: 1/span 4; + } + .ui.repository.list .item .description > *:nth-last-child(2), + .ui.user.list .item .description > *:nth-last-child(2) { + margin-bottom: 0 !important; + } + .ui.repository.list .item .description .time, + .ui.user.list .item .description .time { + grid-row: 2; + grid-column: 4; + padding-top: 7px; + margin-left: 10px; + text-align: right; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + z-index: 3; + direction: rtl; + } + .ui.repository.list .item .description .tags, + .ui.user.list .item .description .tags { + display: flex; + overflow-x: auto; + scrollbar-width: none; + margin-top: 8px; + } + .ui.repository.list .item .description .tags a > div, + .ui.user.list .item .description .tags a > div { + width: max-content !important; + } + .ui.repository.list .item .description .tags::after, + .ui.user.list .item .description .tags::after { + content: ""; + min-width: 100px; + margin-left: 100px; + height: 100%; + position: sticky; + right: 0px; + background: linear-gradient(to right, transparent, var(--color-box-body)); + pointer-events: none; + } + .ui.repository.list .item .content, + .ui.user.list .item .content { + padding-left: 12px; + margin-bottom: -0.4em; + } + .ui.repository.list .item .content .header a, + .ui.user.list .item .content .header a { + font-weight: 600; + text-transform: capitalize; + } + .ui.repository.list .item .content .description, + .ui.user.list .item .content .description { + display: flex; + flex-direction: column; + padding-left: 22px; + line-height: 1.8em; + margin-top: 0.5em; + } + .ui.repository.list .item .content .description svg, + .ui.user.list .item .content .description svg { + margin-bottom: -1.45em !important; + margin-left: -22px !important; + } + .dashboard { + display: flex; + flex-wrap: wrap; + margin: auto; + max-width: 100%; + padding: 30px 0; + width: 1300px; + margin-bottom: -45px; +/* Move Navbar to the side */ +/* Main Content */ + } + .dashboard .dashboard-navbar { + width: auto; + position: sticky; + bottom: 10px; + align-self: flex-end; + height: min-content; + z-index: 2; + flex: 1 1 80px; + max-width: calc(100% - 60px); + margin: 0 auto; + } + .dashboard .dashboard-navbar > .menu { + padding-top: 0 !important; + padding-right: 0 !important; + } + .dashboard .dashboard-navbar > .ui { + display: flex; + flex-wrap: wrap; + flex-direction: row !important; + padding-top: 20px; + } + .dashboard .dashboard-navbar > .ui .right.right { + margin-left: 0 !important; + display: flex; + flex-wrap: wrap; + flex-direction: row !important; + flex-grow: 1; + } + .dashboard .dashboard-navbar > .ui > .item, + .dashboard .dashboard-navbar > .ui > .right > .item { + flex-direction: column; + margin: 0px !important; + text-align: center; + flex-grow: 1; + display: flex !important; + align-content: center; + align-items: center; + padding-bottom: 20px; + max-width: 100%; + width: 80px !important; + text-indent: -0.35em !important; + } + .dashboard .dashboard-navbar > .ui > .item > .dropdown, + .dashboard .dashboard-navbar > .ui > .right > .item > .dropdown, + .dashboard .dashboard-navbar > .ui > .item .button, + .dashboard .dashboard-navbar > .ui > .right > .item .button { + text-indent: 0px !important; + } + .dashboard .dashboard-navbar > .ui > .item span, + .dashboard .dashboard-navbar > .ui > .right > .item span { + text-align: center; + } + .dashboard .dashboard-navbar > .ui > .item svg:not(.octicon-plus), + .dashboard .dashboard-navbar > .ui > .right > .item svg:not(.octicon-plus) { + width: 100%; + height: 22px; + margin: 0 !important; + margin-bottom: 10px !important; + } + .dashboard .dashboard-navbar > .ui > .item .dropdown > span, + .dashboard .dashboard-navbar > .ui > .right > .item .dropdown > span { + flex-direction: column; + } + .dashboard .dashboard-navbar > .ui > .item .dropdown > span img, + .dashboard .dashboard-navbar > .ui > .right > .item .dropdown > span img { + margin: 0 auto; + width: 40px; + height: 40px !important; + max-height: unset; + margin-bottom: 10px; + } + .dashboard .dashboard-navbar > .ui > .item .dropdown > span .icon, + .dashboard .dashboard-navbar > .ui > .right > .item .dropdown > span .icon { + margin-bottom: 0 !important; + } + .dashboard .dashboard-navbar > .ui > .item .dropdown > span .avatar, + .dashboard .dashboard-navbar > .ui > .right > .item .dropdown > span .avatar { + border-radius: var(--base-border-radius); + } + .dashboard .dashboard-navbar > .ui > .item .dropdown > span span, + .dashboard .dashboard-navbar > .ui > .right > .item .dropdown > span span { + margin-bottom: -4px; + } + .dashboard > .ui.container { + margin: 0 auto !important; + display: flex; + flex-wrap: wrap-reverse; + flex: 9999 1 650px; + --container-padding-x: calc(2.5% + 0px); +/* Right Sidebar */ + } + .dashboard > .ui.container > .ui.stackable.grid { + width: 100%; + justify-content: center; +/* Change to row wrapping for better responsiveness, aswell as adding a border to better differenciate buttons */ + } + .dashboard > .ui.container > .ui.stackable.grid > .ten.column { + flex-grow: 1; + z-index: 1; + padding: 15px var(--container-padding-x) !important; + margin: 0 auto !important; + } + .dashboard > .ui.container > .ui.stackable.grid > .column { + max-width: calc(100vw - 40px); + margin: 0 auto; + flex-grow: 1; + } + .dashboard > .ui.container > .ui.stackable.grid > .column .ui.secondary.menu, + .dashboard > .ui.container > .ui.stackable.grid > .column .ui.stackable.grid { + margin-left: 0 !important; + margin-right: 0 !important; + } + .dashboard > .ui.container > .ui.stackable.grid .four.wide.column { + min-width: 250px; + } + .dashboard > .ui.container > .ui.stackable.grid .four.wide.column > .menu { + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin: 0 -6px !important; + background: none !important; + } + .dashboard > .ui.container > .ui.stackable.grid .four.wide.column > .menu a { + display: flex; + flex: 1 0 max-content; + min-width: 200px; + max-width: calc(100% - 12px); + border: 1px solid var(--color-secondary); + margin: 3px 6px; + } + .dashboard > .ui.container > .ui.stackable.grid .four.wide.column > .menu a .right { + margin-left: auto; + } + .dashboard > .ui.container > .ui.stackable.grid .four.wide.column > .menu a span { + width: 100%; + } + .dashboard > .ui.container > .ui.stackable.grid .four.wide.column > .menu a .label { + margin-left: 4px; + } + .dashboard > .ui.container > .ui.stackable.grid .four.wide.column > .menu a:hover { + background-color: var(--color-light); + } + .dashboard > .ui.container > .ui.stackable.grid .four.wide.column > .menu .ui.divider { +/* Do what a divider is suppose to do, separate into two rows. */ + width: 100%; + margin: 12px 6px; + } + .dashboard > .ui.container #app { + height: min-content; + position: sticky; + bottom: 0; + align-self: flex-end; + margin: 0 auto !important; + margin-top: 0 !important; + padding: 0 var(--container-padding-x) !important; + padding-top: 10px !important; + padding-bottom: 0 !important; + z-index: 0; + max-width: 100% !important; + } + .dashboard > .ui.container #app > div { + height: 100%; + display: flex; + flex-direction: column; + min-height: calc(100vh - 30px); + } + .dashboard > .ui.container #app::before { + content: ""; + position: absolute; + bottom: 0; + border-left: 1px solid var(--color-secondary); + border-right: 1px solid var(--color-secondary); + width: 200vw; + height: 200vh; + right: calc(100% - 15px); + right: 100%; + z-index: -100; + background: var(--color-light); + } + .dashboard > .ui.container #app codeberg-announcement-widget { + background: none !important; + } + .dashboard > .ui.container #app codeberg-announcement-widget > div { + margin-top: 0 !important; + margin-right: 0 !important; + margin-bottom: 1rem !important; + } + .dashboard > .ui.container #app .tabable { + background: none; + margin-right: 0 !important; + box-sizing: border-box; + width: unset; + margin-bottom: 0; + } + .dashboard > .ui.container #app .dashboard-repos, + .dashboard > .ui.container #app .dashboard-orgs { + margin: 0 !important; + overflow-y: auto; + overflow-x: hidden; + scrollbar-width: thin; + margin-bottom: 0; + min-height: 200px; + height: 0; + flex-grow: 1; + padding-top: 15px; + } + .dashboard > .ui.container #app .dashboard-repos .repos-search .input, + .dashboard > .ui.container #app .dashboard-orgs .repos-search .input { + margin-bottom: 8px; + } + .dashboard > .ui.container #app .dashboard-repos > .ui:last-child, + .dashboard > .ui.container #app .dashboard-orgs > .ui:last-child { + margin-bottom: 78px; + } + .dashboard > .ui.container #app .dashboard-repos > *, + .dashboard > .ui.container #app .dashboard-orgs > * { + border: 0; + background: none; + } + .dashboard > .ui.container #app .dashboard-repos .header, + .dashboard > .ui.container #app .dashboard-orgs .header { + padding-top: 5px; + font-weight: 600; + } + .dashboard > .ui.container #app .dashboard-repos .header a, + .dashboard > .ui.container #app .dashboard-orgs .header a { + display: flex; + align-items: center; + } + .dashboard > .ui.container #app .dashboard-repos .header a svg, + .dashboard > .ui.container #app .dashboard-orgs .header a svg { + width: 18px; + height: 18px; + } + .dashboard > .ui.container #app .dashboard-repos .header, + .dashboard > .ui.container #app .dashboard-orgs .header, + .dashboard > .ui.container #app .dashboard-repos .repos-search, + .dashboard > .ui.container #app .dashboard-orgs .repos-search { + padding-left: 5px; + padding-right: 5px; + } + .dashboard > .ui.container #app .dashboard-repos .repos-search, + .dashboard > .ui.container #app .dashboard-orgs .repos-search { + padding-top: 0; + } + .dashboard > .ui.container #app .dashboard-repos .repos-search input, + .dashboard > .ui.container #app .dashboard-orgs .repos-search input, + .dashboard > .ui.container #app .dashboard-repos .repos-search .button, + .dashboard > .ui.container #app .dashboard-orgs .repos-search .button { + background: none !important; + } + .dashboard > .ui.container #app .dashboard-repos .table, + .dashboard > .ui.container #app .dashboard-orgs .table { + margin-top: 10px; + } + .dashboard > .ui.container #app .dashboard-repos li, + .dashboard > .ui.container #app .dashboard-orgs li { + background: none; + font-weight: 700; + border: 0; + } + .dashboard > .ui.container #app .dashboard-repos li a, + .dashboard > .ui.container #app .dashboard-orgs li a { + padding: 5px 5px; + } + .dashboard > .ui.container #app .dashboard-repos li a .item-name, + .dashboard > .ui.container #app .dashboard-orgs li a .item-name { + display: flex; + align-items: center; + } + .dashboard > .ui.container #app .dashboard-repos li a .item-name svg, + .dashboard > .ui.container #app .dashboard-orgs li a .item-name svg { + margin-right: 8px !important; + } + .dashboard > .ui.container #app .dashboard-repos li a strong, + .dashboard > .ui.container #app .dashboard-orgs li a strong { + font-weight: 700; + } + footer { + border: 0; + padding: 20px; + box-sizing: border-box; + width: auto !important; + border-top: 1px solid var(--color-secondary); + background: var(--color-body); + z-index: 2; + } + footer .container { + max-width: 1390px !important; + padding: 0 40px; + } +@-moz-keyframes slideInY { + from { + opacity: 0; + transform: scale(0.97); + } + to { + opacity: 1; + transform: scale(1); + } } -* { - outline: 0px dashed var(--color-primary); - outline-offset: -2px; - transition: outline-color .5s, outline-offset .5s; +@-webkit-keyframes slideInY { + from { + opacity: 0; + transform: scale(0.97); + } + to { + opacity: 1; + transform: scale(1); + } } -:focus-visible:not(input) { - box-shadow: 0 0 18px 0px var(--color-primary) !important; - border-radius: 2px; - outline: 2px solid var(--color-primary) !important; - outline-offset: 2px; +@-o-keyframes slideInY { + from { + opacity: 0; + transform: scale(0.97); + } + to { + opacity: 1; + transform: scale(1); + } } - @keyframes slideInY { - from { opacity: 0; transform: scale(.97); } - to { opacity: 1; transform: scale(1); } + from { + opacity: 0; + transform: scale(0.97); + } + to { + opacity: 1; + transform: scale(1); + } +} +@-moz-keyframes slideOutY { + from { + opacity: 1; + transform: scale(1); + } + to { + opacity: 0; + transform: scale(0.97); + } +} +@-webkit-keyframes slideOutY { + from { + opacity: 1; + transform: scale(1); + } + to { + opacity: 0; + transform: scale(0.97); + } +} +@-o-keyframes slideOutY { + from { + opacity: 1; + transform: scale(1); + } + to { + opacity: 0; + transform: scale(0.97); + } } @keyframes slideOutY { - from { opacity: 1; transform: scale(1); } - to { opacity: 0; transform: scale(.97); } + from { + opacity: 1; + transform: scale(1); + } + to { + opacity: 0; + transform: scale(0.97); + } } - -/*** Change Border Radius's ***/ -.ui.buttons .ui.basic.button { - border-radius: 0; } -.ui.button, .ui.basic.button, .ui.menu, .input.action.fluid, .ui.label, -.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.table, .tab-size-8, -{ - border-radius: var(--base-border-radius); -} -.ui.menu > .item:first-child, -.ui.buttons .button:first-child, -.ui.buttons > .ui.basic.button:first-child { - border-radius: var(--base-border-radius) 0 0 var(--base-border-radius); -} -.ui.compact.menu:not(.secondary) .item:last-child, -.ui.buttons .button:last-child, -.ui.action.input > .button:last-child, -.ui.buttons > .ui.basic.button:last-child { - border-radius: 0 var(--base-border-radius) var(--base-border-radius) 0; -} -.ui.top.attached.header { - border-radius: var(--base-border-radius) var(--base-border-radius) 0 0; -} - -.ui.avatar { - border-radius: var(--base-border-radius) !important; -} - -/*** Buttons ***/ -.ui.compact.button { - padding-top: .3em; - padding-bottom: .3em; - min-height: .8em; - display: inline-flex; - align-items: center; - svg { - margin-bottom: -1px !important; - } -} -.ui.basic.button, .ui.basic.label { - background: none; -} - - - -/*** Inputs ***/ - -.input.action.fluid { - border: 1px solid var(--color-secondary) !important; - height: 40px; - input { - border: 0; - } - button { - margin: 2px !important; - margin-left: 0 !important; - padding-top: 0 !important; - padding-bottom: 0 !important; - box-sizing: border-box; - border-radius: var(--base-border-radius) !important; - } - .icon { - border: 0 !important; - } - &:focus-within { - outline: 1px solid var(--color-primary); - outline-offset: -1px; - } -} -.ui.form + .ui.divider { - display: none; -} - - -/*** Layouts ***/ - -.three.column { - margin-left: 0; - margin-right: 0; - .column { - width: auto !important; - align-items: center !important; - display: flex !important; - form { - width: 100%; - } - &:first-child { - padding-left: 0; - } - &:last-child { - padding-right: 0; - } - } - .center { - flex-grow: 100; - padding-left: 0 !important; - padding-right: 0 !important; - } -} - -// Filter buttons & New Issue buttons on mobile -.ui.two.column.stackable.grid > .column { - width: auto !important; - flex-grow: 1; -} -.ui.compact.tiny.menu { - flex-grow: 1; - a { - flex-grow: 1; - justify-content: center; - } -} - -/* Better center content */ -.page-content:not(.home) > .middle { - padding: calc(4vw + 1rem) 4vw !important; - width: 100% !important; - & > .column { - padding: 0 !important; - } -} - - -/* No Script Message */ -.full.height > span[style="display: inline !important;"]:first-child { - margin: auto; - line-height: 40px; - padding: 30px; - text-align: center; - &::before { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 40px; - background: var(--color-navbar); - border-bottom: 1px solid var(--color-secondary); - z-index: -1; - } - - /* Remove stuff that isn't needed when JS is disabled */ - & ~ .page-content { - #app, #user-heatmap, #user-heatmap + .divider { - display: none !important; - } - } - -} - - - -/*** Popups ***/ -/* Tooltips */ -.popup.tiny.inverted { - background: var(--color-body); - color: var(--color-text); - box-shadow: var(--lm-large-shadow); - border: 1px solid var(--color-secondary); - pointer-events: none; - z-index: 1000; - &::before { - background: var(--color-body) !important; - z-index: -99999 !important; - border-color: var(--color-secondary) !important; - } -} -.ui.left.popup::before { - border: 0; - border-top: 1px solid; - border-right: 1px solid; -} -.ui.right.popup::before { - border: 0; - border-left: 1px solid; - border-bottom: 1px solid; -} -.ui.top.popup::before { - border: 0; - border-right: 1px solid; - border-bottom: 1px solid; -} -.ui.bottom.popup::before { - border: 0; - border-top: 1px solid; - border-left: 1px solid; -} - - -.settings > .ui.container { - max-width: 1150px !important; -} - - - - - -/** Other Elements **/ -#user-heatmap { - overflow: auto hidden; - justify-content: flex-start; - max-width: 900px; - margin: auto; - .vch__wrapper { - min-width: 500px; - - } -} - -/* Bold repo name, not author*/ -.repo-title a:nth-last-child(2) { - font-weight: 600 !important; -} - -/* Better labels */ -.label:not(.basic) { - border-radius: 100px !important; - padding: 4px 8px !important; - font-weight: 700; - align-items: center; - justify-content: center; - min-width: 24px !important; - display: inline-flex; - &.sha > .detail { /* Fix SHA Padding */ - margin-left: 6px !important; - } - svg { - margin-right: 4px; - } -} - - - -/* Alerts */ -.alert-primary.p-10 { - border: 0 !important; - padding: 20px !important; - .close { - // padding: 10px; - span { - font-size: 1.7em; - font-weight: 200; - padding-right: 6px; - } - } - h4 { - margin-right: 1.7em; - font-weight: 600; - } -} - - -/*** Menu's ***/ -.ui.tabular.menu, .ui.tight.menu { - position: relative; - flex-direction: row !important; - flex-wrap: nowrap !important; - overflow: auto hidden !important; - scrollbar-width: thin; - padding-bottom: 2px; - scrollbar-color:var(--color-primary) var(--color-secondary); - border-bottom: 1px solid var(--color-secondary) !important; - &.ui.tight.menu > .item { - width: auto !important; - border-bottom-width: 0px !important; - position: relative !important; - &::before { - content: "" !important; - position: absolute !important; - bottom: 0 !important; - left: 20px !important; - right: 20px !important; - top: unset !important; - width: unset !important; - height: 2px !important; - opacity: .7; - border-radius: 4px 4px 0 0; - background: none; - display: flex !important; - transition: left 2s; - } - &.active::before { - background-color: var(--color-primary) !important; - left: 0 !important; - right: 0 !important; - } - } -} -.ui.tabular.menu { - border-bottom: 0 !important; - position: relative; - &::before { - content: ""; - position: absolute; - bottom: 1px; - left: 0; - right: 0; - z-index: -1; - border-top: 1px solid var(--color-secondary); - } -} -.ui.tabular.menu:not(.borderless) > .item { - width: auto !important; - padding-left: 16px; - padding-right: 16px; - min-width: 70px; - justify-content: center; - position: relative; - svg { - margin-right: 10px !important; - } - &.active { - border-radius: 10px 10px 0 0 !important; - z-index: 1; - } - &.active::after { - content: "" !important; - position: absolute; - width: 6px; - height: 6px; - bottom: 1px; - right: -7px; - border-bottom-left-radius: 100px; - box-shadow: -1px 1px 0 0px var(--color-secondary), -3px 3px 0px 2px var(--color-body) ; - - } - &.active::before { - all: unset; - content: "" !important; - position: absolute; - width: 6px; - height: 6px; - bottom: 1px; - left: -7px; - border-bottom-right-radius: 100px; - box-shadow: 1px 1px 0 0px var(--color-secondary), 3px 3px 0px 2px var(--color-body) ; - display: unset !important; - } - &.active:first-child { - &::before { - content: none !important; - } - } -} - - -.repository .filter.menu .menu { - max-height: 80vh; - width: max-content !important; - .info { - width: 100% !important; - padding: .8em !important; - line-height: 1.2em; - white-space: normal !important; - } -} - - - - - - -/*** Body ***/ -html { - scrollbar-width: auto !important; -} -.full.height { - padding-bottom: 30px; -} - -/*** Header ***/ -.following.bar { - --min-height: 60px; - - background: none !important; - border-bottom: 1px solid var(--color-secondary) !important; - background-color: var(--color-navbar) !important; - position: relative; - min-height: var(--min-height); - align-items: center; - z-index: 99999; -} -#navbar { - padding: 0 calc(2px + 1%) !important; - background: none !important; - max-width: 100rem; - transition: padding 1s; - min-height: var(--min-height) !important; - margin: auto; - - - & > .item:not(.brand), & > .right > .item { - color: var(--color-text-dark) !important; - font-size: 1rem !important; - font-weight: 600; - - padding: 0 calc(0px + 1.1%); - height: calc(var(--min-height) + 1px) !important; - margin: 0 !important; - border-radius: 0; - border-top: 1px solid transparent; - border-bottom: 1px solid transparent; - margin-bottom: -1px !important; - background: none !important; - box-sizing: border-box; - transition: border .5s, padding .7s; - & > span { - height: 100%; - display: flex; - align-items: center; - } - &:hover, &.active, &:focus { - border-bottom: 1px solid var(--color-primary); - transition: border .1s; - outline: none; - } - } - .item.brand { - padding: 0 !important; - min-height: var(--min-height) !important; - margin-right: calc(-30px + 2%)!important; - } - .item.brand a { - width: 35px; - height: 35px; - margin-right: 20px; - background-position: center; - img { - width: 100%; - height: 100%; - } - } - .right { - position: sticky; - right: 1%; - background-color: var(--color-navbar); - box-shadow: 100px 0px 0 var(--color-navbar); - width: 100%; - min-width: max-content; - justify-content: flex-end; - & > .item { - padding: 0 10px; - & > .text { - display: flex; - align-items: center; - span:not(.fitted) { - margin-left: 10px; - } - img ~ .fitted { - margin-left: 4px; - } - } - } - } -} - - -/* Page content when width is larger than 850px */ -@media only screen and (min-width: 850px) { - - .page-content.repository:not(.issues.repository.milestones):not(.new:not(.issue)) { - display: grid; - grid-row-gap: 10px; - grid-template-columns: 100px calc(100% - 100px); - padding: 0 20px; - padding-top: 20px; - width: 1367px; - max-width: 100%; - margin: auto; - .header-wrapper { - display: contents; - & > .ui.container:first-child { - grid-row: 1; - grid-column: 1 / span 2; - width: 100%; - padding-left: 100px; - border: 0 !important; - box-shadow: none !important; - .avatar, .repo-icon { - width: 50px !important; - height: 50px !important; - object-fit: contain; - margin: 0 10px; - margin-left: -90px; - margin-right: 39px !important; - margin-bottom: -10px; - display: flex; - justify-content: center; - align-items: center; - border-radius: 8px !important; - - } - .repo-title-wrap { - display: flex; - flex-direction: row !important; - align-items: center; - } - .fork-flag { - margin: 0 !important; - margin-left: 6px !important; - padding: 2px 8px; - font-size: 12px; - - border-radius: var(--base-border-radius); - border: 1px solid var(--color-secondary); - } - } - .tabs { - order: -1; - width: auto !important; - width: 70px; - margin: 0 !important; - margin-top: 60px !important; - grid-column: 1; - grid-row: 2 / span 5; - height: min-content; - position: sticky; - bottom: 20px; - margin-bottom: -60px !important; - align-self: flex-end; - align-content: flex-start; - min-height: calc(100vh - 40px); - .tabular { - flex-direction: column !important; - padding-right: 30px; - overflow: visible !important; - padding-left: 0; - border-bottom: 0 !important; - &::before { - content: unset !important; - } - .item { - display: flex; - flex-direction: column; - text-align: center; - padding-top: 12px; - padding-bottom: 18px; - position: relative; - background: none; - color: var(--color-text); - opacity: .7; - border-radius: 12px !important; - svg { - margin: 0; - width: 22px; - height: 22px; - max-width: unset !important; - margin-bottom: 10px; - margin-right: 0 !important; - overflow: visible; - order: -2; - } - .label { - margin: 0 !important; - margin-top: -3px !important; - margin-bottom: 6px !important; - order: -1; - position: relative; - } - &.active { - border: none; - opacity: 1; - &::before { - content: unset !important; - } - &::after { - all: unset; - content: ""; - position: absolute; - top: 2px; - left: -5px; - right: -5px; - bottom: 5px; - background: var(--color-primary); - opacity: .1; - border-radius: 12px !important; - z-index: -1; - } - } - &:hover { - opacity: .9 !important; - } - } - .right.menu { - display: contents; - } - } - } - .divider { - display: none; - } - } - & > .ui.container { - width: 100%; - } - } -} - -/* Default Page Content, no width restraint */ -.page-content.repository:not(.milestones) { - width: 1300px; - height: min-content; - max-width: 100%; - margin: auto; - margin-bottom: -80px; - .header-wrapper { - padding-top: 40px !important; - border-bottom: 0 !important; - background: none; - .repo-title { - flex-wrap: wrap; - line-height: 1.5em; - justify-content: center; - } - .repo-buttons { - display: flex; - flex-wrap: wrap; - justify-content: center; - & > * { - margin-top: 4px; - } - } - .tabs.container { - margin-bottom: -2px; - margin-left: 0; - margin-right: 0; - width: 100%; - border-bottom: 0 !important; - .tabular { - padding-left: 2rem; - padding-right: 2rem; - border-bottom: 0 !important; - } - } - } - & > .ui.container { - height: min-content; - & > div:not(.attached) { - height: min-content; - margin-top: 0 !important; - margin-bottom: .7rem !important; - } - & > .column + .divider:not(.header) { - border: 0; - margin: -22px 0 !important; - } - & > .column:first-child > .column { - padding-top: 0; - } - - #repo-desc { - font-size: 1.14rem; - line-height: 1.6rem; - } - #repo-topics { - margin: 0 -4px; - margin-bottom: 0 !important; - margin-top: -.5rem !important; - align-items: flex-start !important; - & > *:last-child { - margin: 2px !important; - height: 22px !important; - margin-bottom: .7rem !important; - } - } - .repo-topic { - border-radius: 100px; - padding: 4px 10px; - color: var(--color-primary); - font-size: .9rem; - position: relative; - &:not(:hover) { - background: none; - } - &::before { - content: ""; - position: absolute; - inset: 0; - border-radius: 100px; - background: var(--color-primary); - opacity: .07; - z-index: -1; - } - } - - .form .ui.tabular.menu { - margin-bottom: -2px; - z-index: 1; - } - #comment-form .markdown { - padding-top: 15px; - } - - .mobile--no-negative-margins { - margin: 10px -6px; - flex-wrap: wrap; - grid-row-gap: 5px; - & > .item:nth-last-child(+2) { - flex-grow: 1; - } - & > .item:last-child { - flex: 3 1 100px; - margin-left: 4px; - } - & > .item:first-child .floating.filter.dropdown > .basic.small.compact.button { - .text { - font-size: 0; - display: flex; - align-items: center; - strong { - font-size: 1rem; - margin-left: 8px; - margin-right: 4px; - text-transform: capitalize; - font-weight: 500; - } - } - } - .breadcrumb { - margin: 0 10px; - } - button, .button { - align-content: center; - display: flex; - align-items: center; - height: 32px !important; - padding-left: 16px !important; - padding-right: 16px !important; - box-sizing: border-box; - &.icon { - padding-left: 8px !important; - padding-right: 8px !important; - } - } - #file-buttons { - margin: 0 4px !important; - } - #clone-panel { - width: 0px !important; - box-sizing: border-box; - flex-grow: 1; - border: 1px solid var(--color-secondary); - padding: 2px; - height: 32px; - border-radius: var(--base-border-radius); - input { - width: 0px !important; - min-width: unset; - flex-grow: 1; - border: 0; - background: none; - border-radius: var(--base-border-radius) !important; - } - button { - border-radius: var(--base-border-radius) !important; - margin-right: 2px; - height: 100% !important; - background: none; - border: 0; - &:hover { - background: var(--color-light); - } - } - button:last-child { - margin-right: 0; - } - } - } - - - #repo-files-table { - margin-top: 0; - background: none !important; - thead { - position: relative; - &::after { - content: ""; - position: absolute; - inset: 0; - background: var(--color-primary); - opacity: .05; - z-index: -1; - } - tr { - background: none !important; - } - th { - padding: 12px 12px; - background: none !important; - a { - color: var(--color-text); - } - } - th > .avatar { - width: 20px; - height: 20px; - margin: 4px; - margin-right: 8px !important; - } - .avatar { - margin-right: 4px; - } - .avatar + a { - display: inline-flex !important; - transform: translateY(1px); - } - - .message-wrapper { - overflow: visible; - display: inline-flex; - a { - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; - } - } - - .commit-body { - padding: 6px; - padding-right: 0; - } - } - - tr { - position: relative; - } - td::before { - content: ""; - position: absolute !important; - inset: 0; - pointer-events: none !important; - z-index: -100 !important; - background: var(--color-primary); - opacity: 0; - } - tr:hover td:nth-child(2)::before, tr:focus-within td:nth-child(2)::before { - opacity: .1; - } - - .truncate { - overflow: visible; - display: inline-flex; - a { - margin: -8px 0; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; - width: 100%; - color: var(--color-text); - &:hover, &:focus { - color: var(--color-primary); - } - } - svg { - margin: 0 10px; - margin-top: 2px; - } - - } - .name { - padding-left: 8px; - } - .message, .right { - opacity: .8; - } - - } - - .file-header { - padding: 8px 16px !important; - font-size: 1rem; - .octicon-book { - color: var(--color-text-light-2) !important; - margin-right: 10px !important; - } - strong { - line-height: 35px; - } - } - .issue.list { - margin-top: -8px !important; - } - - - .ui.grid > .eleven { - margin-left: 1rem; - } - - - .ui.grid > .four > .metas { - position: sticky; - min-height: calc(100vh - 40px); - bottom: 20px; - top: unset; - align-self: flex-end; - } - - - } - - /* Move the repo stats to the side, only when page width larger than 1000px */ - @media only screen and (min-width: 1000px) { - &.file, &.commits, &.branches { - & > .ui.container { - margin: 0 !important; - grid-column: 2; - width: auto !important; - max-width: 100% !important; - display: grid; - grid-template-columns: calc(100% - 100px) 100px; - grid-template-rows: min-content !important; - align-items: flex-start; - & > * { - grid-column: 1; - } - .repository-summary { - grid-column: 2; - grid-row: 1 / span 50; - border: 0; - margin-top: 12px !important; - margin-left: 30px; - height: min-content; - position: sticky; - bottom: 20px; - align-self: flex-end; - background: none !important; - min-height: calc(100vh - 40px); - margin-bottom: -60px !important; - overflow: visible !important; - display: flex; - flex-direction: column; - align-items: center; - - .segment { - background: none; - } - .language-stats-details { - display: flex !important; - padding: 0; - border-top: 1px solid rgba(0,0,0,0.1); - overflow: hidden; - background: none !important; - .item { - flex-direction: column; - & > * { - margin: 0 !important; - } - i { - margin-bottom: 8px !important; - } - } - } - .repository-menu { - display: block !important; - height: unset !important; - } - - .language-stats-details { - height: unset !important; - padding: 0 !important; - margin: 0 !important; - order: 2; - border: 0 !important; - } - .language-stats { - border-radius: 100px !important; - overflow: hidden !important; - pointer-events: none; - top: 0; - } - .horizontal.list:not(.two) { - padding-top: 1rem; - } - .list { - flex-direction: column; - background: none !important; - .item { - border-radius: 12px !important; - padding: 12px 0 !important; - padding-bottom: 18px !important; - position: relative; - margin-right: 0 !important; - a { - padding: 0 !important; - } - .bold, b { - font-weight: 500 !important; - } - &.active { - background: none !important; - &::before { - content: ""; - position: absolute; - top: 0; - left: -5px; - right:-5px; - bottom: 5px; - background: var(--color-primary); - opacity: .1; - z-index: -1; - border-radius: 12px; - } - } - } - a, span { - & > * { - margin-bottom: 5px; - } - svg { - width: 100%; - height: 20px; - margin-bottom: 10px !important; - } - display: flex; - flex-direction: column; - padding: 0 10px; - justify-content: center; - } - } - } - - - - } - } - } - -} - -/* ISSUES LIST / MILESTONES LIST, mostly issue's list though. */ -.issue.list, .milestone.list { - border: 1px solid var(--color-secondary); - border-radius: var(--base-border-radius); - background: var(--color-menu); - padding: 0 !important; - margin-top: 1rem; - &.milestone.list li { - border-bottom-style: solid !important; - &:last-child { - border-bottom: 0; - } - } - li { - padding: 10px !important; - padding-bottom: 6px !important; - position: relative; - &:hover { - box-shadow: inset 0 0 600px -300px var(--color-primary); - } - .issue-item-left { - padding-top: 2px; - svg { - margin-right: 8px; - } - } - .issue-item-top-row { - a { - vertical-align: unset !important; - } - } - .issue-item-bottom-row { - margin-top: -2px !important; - svg { - margin-top: 3px; - } - } - .content { - padding-bottom: 2px; - padding-top: 2px !important; - } - } - .label { - margin-top: -1px; - position: relative; - } -} - -/* Repo page releases list */ -#release-list { - padding-left: 0; - .four.wide.column { - position: sticky !important; - top: 0px; - height: min-content; - width: 150px !important; - } -} - -/*** USER PROFILES & EXPLORE PAGES ***/ -.explore, .user:not(.list), .profile { - display: flex; - flex-wrap: wrap; - justify-content: center; - - /* Responsive explore page */ - &.explore > .ui.container { - max-width: calc(100vw - 40px); - width: 3000px !important; - padding: 0 calc(10vw - 80px); - } - &.organization { - & > .ui.container:first-child { - padding-top: 30px; - padding-bottom: 30px; - #org-info { - display: flex; - flex-direction: column; - margin: 0 10px; - justify-content: center; - & > p { - margin: 0 !important; - margin-bottom: .2rem !important; - } - .item { - display: flex; - align-items: center; - a { - margin-left: 4px; - } - } - } - } - .ui.eleven.wide.column::before { - content: unset !important; - } - } - - & > .ui.container { - max-width: 1350px; - width: 100% !important; - padding: 0 20px; - &[class="ui container"] .five.wide.column { - width: 320px !important; - flex: 1 0 320px !important; - position: sticky; - bottom: 0; - align-self: flex-end; - min-height: 100vh; - .card { - width: 100%; - border: 0; - background: none !important; - #profile-avatar { - padding-left: .7rem; - padding-right: 2rem !important; - padding-top: .5rem; - - } - #profile-avatar .avatar { - border-radius: calc(var(--base-border-radius) * 2) !important; - box-shadow: 0 4px 12px rgba(0,0,0,0.1); - border: 1px solid var(--color-secondary); - background: var(--color-body); - height: 100% !important; - max-height: 80vh; - } - .profile-avatar-name { - font-size: 2rem; - display: contents; - span { - text-align: left; - font-weight: 600; - padding-left: .7rem; - margin: 1.5rem 0; - - &.header { - font-weight: 500; - letter-spacing: .1em; - height: 44px; - line-height: 50px; - margin-bottom: -1.2em; - margin-top: 0; - background: var(--color-body); - position: sticky; - top: 0px; - z-index: 3; - box-shadow: 0 -5px 5px var(--color-body); - } - &.username { - z-index: 2; - } - } - } - .extra { - border: 0 !important; - li { - border: 0 !important; - padding: .3rem .7rem; - display: flex; - align-items: center; - svg { - margin-right: 8px; - } - .user-orgs { - justify-content: center; - margin-top: 1rem !important; - li { - flex-grow: 1 !important; - a { - width: 100%; - img { - width: 35px; - height: 35px; - } - } - } - } - .render-content p { - padding: .6rem 0; - padding-bottom: .7rem !important; - word-break: normal !important; - } - } - .follow form { - margin-top: 1rem; - width: 100%; - } - } - - } - } - .eleven.wide.column { - flex-grow: 100; - width: 500px !important; - max-width: 100%; - .ui.secondary.stackable.pointing.tight.menu { - margin: 0 -2px; - margin-bottom: 1.5rem; - position: sticky; - top: 0px !important; - margin-top: -45px; - height: 45px; - z-index: 9999; - background-color: var(--color-body); - } - &::before { - content: ""; - position: sticky; - margin: 0 !important; - margin-left: -100vw !important; - margin-top: 45px !important; - width: 200vw; - display: block; - border-bottom: 1px solid var(--color-secondary); - top: 44px; - z-index: -1; - } - } - .item .meta { - display: flex; - align-items: center; - svg { - margin-right: 4px; - } - a { - max-width: calc(100% - 20px); - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - } - - } -} - -/* DASHBOARD / USER FEEDS */ -.ui.container > .news, .feeds > .news { - border: 1px solid var(--color-secondary) !important; - background: var(--color-box-body); - margin-bottom: 1rem; - border-radius: var(--base-border-radius); - padding: 10px 12px !important; - position: relative; - - .ui.left { - img { - margin: 0 !important; - margin-top: 2px !important; - margin-right: 15px !important; - border-radius: var(--base-border-radius); - } - } - .ui.grid { - margin: 0 !important; - padding: 0 !important; - & > .column { - padding: 0 !important; - width: 100% !important; - & > div { - display: flex; - flex-wrap: wrap; - min-height: 60px; - & > *:first-child { - min-width: 100%; - } - & > *:last-child { - margin-left: auto; - margin-top: auto; - } - } - } - .content { - max-width: 100%; - } - & > .column > div > p:first-child { - margin-bottom: 0.4rem; - font-weight: 600; - } - - - & > .right.column { - position: absolute; - top: 45px; - left: 0; - width: 52px !important; - text-align: center; - svg { - width: 28px; - height: 28px; - padding: 4px; - } - } - .title, p, ul { - margin-bottom: 0; - } - ul { - border-left: 4px solid var(--color-secondary); - } - } - .divider { - display: none; - } -} - -/* REPOSITORY LIST */ -.ui.repository.list { - margin-top: 16px !important; - display: grid; - grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); - grid-gap: 16px; - - .item { - width: 400px; - width: 100%; - min-height: unset !important; - padding: 14px 16px !important; - border: 1px solid var(--color-secondary); - background: var(--color-box-body); - border-radius: 8px; - flex-grow: 1; - display: grid !important; - position: relative; - grid-template-columns: max-content 1fr; - align-content: flex-start; - &:hover, &:focus-within { - box-shadow: var(--lm-shadow); - } - &:focus-within { - outline: 1px solid var(--color-primary) !important; - } - - .header { - display: contents !important; - .repo-title { - display: contents; - position: relative; - font-size: 1.2rem; - line-height: 1.4em; - a { - white-space: normal !important; - word-break: normal !important; - } - & > * { - grid-column: 2 / span 4; - } - .labels { - grid-column: 3; - grid-row: 2; - margin-left: 0 !important; - white-space: nowrap; - } - a::before { - content: ""; - position: absolute; - top: 0; - left: 0; - height: 80px; - width: 100%; - } - } - .avatar { - height: 50px !important; - width: 50px !important; - margin-right: 12px !important; - margin-left: -2px; - grid-column: 1; - grid-row: 1 / span 2; - border-radius: 12px; - } - - .metas { - grid-column: 2; - grid-row: 2; - width: 100%; - } - } - .description { - display: contents; - & > p:first-child { - padding-top: 4px; - margin-bottom: 0px; - } - & > * { - grid-column: 1 / span 4; - } - & > *:nth-last-child(2) { - margin-bottom: 0 !important; - } - .time { - grid-row: 2; - grid-column: 4; - padding-top: 7px; - margin-left: 10px; - text-align: right; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - z-index: 3; - direction: rtl; - } - .tags { - display: flex; - overflow-x: auto; - scrollbar-width: none; - margin-top: 8px; - a > div { - width: max-content !important; - } - &::after { - content: ""; - min-width: 100px; - margin-left: 100px; - height: 100%; - position: sticky; - right: 0px; - background: linear-gradient(to right, transparent, var(--color-box-body)); - pointer-events: none; - } - } - } - } - -} - -/*** DASHBOARD ***/ -.dashboard { - display: flex; - flex-wrap: wrap; - margin: auto; - max-width: 100%; - padding: 30px 10px; - padding: 30px 0; - width: 1300px; - margin-bottom: -45px; - - - - /* Move Navbar to the side */ - .dashboard-navbar { - width: auto; - position: sticky; - bottom: 10px; - align-self: flex-end; - height: min-content; - z-index: 2; - flex: 1 1 80px; - max-width: calc(100% - 60px); - margin: 0 auto; - & > .menu { - padding-top: 0 !important; - padding-right: 0 !important; - } - & > .ui { - display: flex; - flex-wrap: wrap; - flex-direction: row !important; - padding-top: 20px; - - .right.right { - margin-left: 0 !important; - display: flex; - flex-wrap: wrap; - flex-direction: row !important; - flex-grow: 1; - } - & > .item, & > .right > .item { - - flex-direction: column; - margin: 0 20px !important; - text-align: center; - flex-grow: 1; - display: flex !important; - align-content: center; - align-items: center; - padding-bottom: 20px; - - max-width: 100%; - width: 80px !important; - text-indent: -.35em !important; - - & > .dropdown, .button { - text-indent: 0px !important; - } - span { - text-align: center; - - } - svg:not(.octicon-plus) { - width: 100%; - height: 22px; - margin: 0 !important; - margin-bottom: 10px !important; - } - - .dropdown > span { - flex-direction: column; - img { - margin: 0 auto; - width: 40px; - height: 40px !important; - max-height: unset; - margin-bottom: 10px; - } - .icon { - margin-bottom: 0 !important; - } - .avatar { - border-radius: var(--base-border-radius); - } - span { - margin-bottom: -4px; - } - } - - } - } - } - - - /* Main Content */ - & > .ui.container { - margin: 0 auto !important; - display: flex; - flex-wrap: wrap-reverse; - flex: 9999 1 650px; - - --container-padding-x: calc(2.5% + 0px); - - - - & > .ui.stackable.grid { - width: 100%; - justify-content: center; - & > .ten.column { - flex-grow: 1; - z-index: 1; - padding: 15px var(--container-padding-x) !important; - margin: 0 auto !important; - } - & > .column { - max-width: calc(100vw - 40px); - margin: 0 auto; - flex-grow: 1; - .ui.secondary.menu, .ui.stackable.grid { - margin-left: 0 !important; - margin-right: 0 !important; - } - } - /* Change to row wrapping for better responsiveness, aswell as adding a border to better differenciate buttons */ - .four.wide.column { - min-width: 250px; - & > .menu { - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin: 0 -6px !important; - background: none !important; - a { - display: flex; - flex: 1 0 max-content; - min-width: 200px; - max-width: calc(100% - 12px); - border: 1px solid var(--color-secondary); - margin: 3px 6px; - .right { - margin-left: auto; - } - span { - width: 100%; - } - .label { - margin-left: 4px; - } - &:hover { - background-color: var(--color-light); - } - } - .ui.divider { - /* Do what a divider is suppose to do, separate into two rows. */ - width: 100%; - margin: 12px 6px; - } - } - } - } - /* Right Sidebar */ - #app { - height: min-content; - position: sticky; - - bottom: 0; - align-self: flex-end; - margin: 0 auto !important; - margin-top: 0 !important; - padding: 0 var(--container-padding-x) !important; - padding-top: 10px !important; - padding-bottom: 0 !important; - z-index: 0; - max-width: 100% !important; - & > div { - height: 100%; - display: flex; - flex-direction: column; - min-height: calc(100vh - 30px); - } - &::before { - content: ""; - position: absolute; - bottom: 0; - border-left: 1px solid var(--color-secondary); - border-right: 1px solid var(--color-secondary); - width: 200vw; - height: 200vh; - right: calc(100% - 15px); - right: 100%; - z-index: -100; - background: var(--color-light); - } - codeberg-announcement-widget { - background: none !important; - - & > div { - margin-top: 0 !important; - margin-right: 0 !important; - margin-bottom: 1rem !important; - } - } - - .tabable { - background: none; - margin-right: 0 !important; - box-sizing: border-box; - width: unset; - margin-bottom: 0; - } - .dashboard-repos, .dashboard-orgs { - margin: 0 !important; - overflow-y: auto; - overflow-x: hidden; - scrollbar-width: thin; - margin-bottom: 0; - min-height: 200px; - height: 0; - flex-grow: 1; - padding-top: 15px; - .repos-search .input { - margin-bottom: 8px; - } - & > .ui:last-child { - margin-bottom: 78px; - } - & > * { - border: 0; - background: none; - } - .header { - padding-top: 5px; - font-weight: 600; - a { - display: flex; - align-items: center; - svg { - width: 18px; - height: 18px; - } - } - } - .header, .repos-search { - padding-left: 5px; - padding-right: 5px; - } - .repos-search { - padding-top: 0; - input, .button { - background: none !important; - } - } - .table { - margin-top: 10px; - } - li { - background: none; - font-weight: 700; - border: 0; - a { - padding: 5px 5px; - - .item-name { - display: flex; - align-items: center; - svg { - margin-right: 8px !important; - } - } - strong { - font-weight: 700; - } - } - } - } - } - } -} - - - - - - -footer { - border: 0; - padding: 20px; - box-sizing: border-box; - width: auto !important; - border-top: 1px solid var(--color-secondary); - background: var(--color-body); - z-index: 2; - .container { - max-width: 1390px !important; - padding: 0 40px; - } -} - - -} -@-moz-document domain("codeberg.org") { - /* Fix Codeberg Logo */ - .item.brand a { - border-radius: 100px; - background-color: var(--color-primary) !important; - box-shadow: 0 1px 2px var(--color-primary); - } -} \ No newline at end of file