From 76f712d163ab98e921a4801afaeca2813d29d820 Mon Sep 17 00:00:00 2001 From: Free Date: Thu, 12 Aug 2021 21:24:57 +0200 Subject: [PATCH 1/3] 1.0.3 - Fixed table stretching due to the grid - Better keyboard accessability - Fixed Codeberg dropdown --- Gitea/theme-gitea-modern.styl | 135 +++++++++++++++++++++++++--------- 1 file changed, 99 insertions(+), 36 deletions(-) diff --git a/Gitea/theme-gitea-modern.styl b/Gitea/theme-gitea-modern.styl index 6497f6d..4f69121 100644 --- a/Gitea/theme-gitea-modern.styl +++ b/Gitea/theme-gitea-modern.styl @@ -1,7 +1,14 @@ -/* This code should work with any preprocessor that supports nesting and the use of "&", like "Stylus" (Recommended) and "Less". */ + + +/* Update 1.0.3 +- Fixed table stretching due to the grid +- Better keyboard accessability +- Fixed Codeberg dropdown +*/ :root { --base-border-radius: 6px; + } html.theme-gitea, html.theme-arc-green { --fonts-override: var(--fonts-regular); @@ -12,6 +19,17 @@ a[rel*="nofollow"]:not(.ui), .link:not(.ui) { text-underline-offset: 5px; } } +* { + outline: 0px dashed var(--color-primary); + outline-offset: -2px; + transition: outline-color .5s, outline-offset .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; +} @keyframes slideInY { from { opacity: 0; transform: scale(.97); } @@ -145,6 +163,37 @@ a[rel*="nofollow"]:not(.ui), .link:not(.ui) { } } + +/* 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); @@ -186,32 +235,8 @@ a[rel*="nofollow"]:not(.ui), .link:not(.ui) { } -/* 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; - } - } -} /** Other Elements **/ #user-heatmap { @@ -248,6 +273,26 @@ a[rel*="nofollow"]:not(.ui), .link:not(.ui) { } + +/* 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; @@ -402,6 +447,11 @@ html { 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; @@ -532,6 +582,7 @@ html { background: none; color: var(--color-text); opacity: .7; + border-radius: 12px !important; svg { margin: 0; width: 22px; @@ -762,7 +813,6 @@ html { #repo-files-table { margin-top: 0; - overflow: hidden; background: none !important; thead { position: relative; @@ -797,6 +847,16 @@ html { 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; @@ -821,7 +881,13 @@ html { } .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 { @@ -885,12 +951,14 @@ html { 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 6; + grid-row: 1 / span 50; border: 0; margin-top: 12px !important; margin-left: 30px; @@ -1330,6 +1398,9 @@ html { &:hover, &:focus-within { box-shadow: var(--lm-shadow); } + &:focus-within { + outline: 1px solid var(--color-primary) !important; + } .header { display: contents !important; @@ -1625,15 +1696,6 @@ html { margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 1rem !important; - .close span { - font-size: 1.7em; - font-weight: 200; - margin-right: 2px; - } - h4 { - margin-right: 1.7em; - font-weight: 600; - } } } @@ -1732,3 +1794,4 @@ footer { } } + From b3b7b237e644709695cdf58dbd326bd495301c3d Mon Sep 17 00:00:00 2001 From: Free Date: Thu, 12 Aug 2021 21:29:39 +0200 Subject: [PATCH 2/3] 1.0.3 --- Gitea/theme-gitea-modern.user.css | 3502 ++++++++++++++--------------- 1 file changed, 1703 insertions(+), 1799 deletions(-) diff --git a/Gitea/theme-gitea-modern.user.css b/Gitea/theme-gitea-modern.user.css index 147170b..e71cbf8 100644 --- a/Gitea/theme-gitea-modern.user.css +++ b/Gitea/theme-gitea-modern.user.css @@ -1,10 +1,11 @@ /* ==UserStyle== @name Gitea Modern -@version 1.0.2 +@version 1.0.3 @description A modern style for Gitea and Codeberg! @updateURL https://codeberg.org/Freeplay/CSS-Styles/raw/branch/main/Gitea/Gitea-modern.user.css @homepageURL https://codeberg.org/Freeplay/CSS-Styles @supportURL https://codeberg.org/Freeplay/CSS-Styles/issues +@preprocessor stylus -- AUTHOR STUFF -- @namespace Freeplay @@ -28,1900 +29,1803 @@ @-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 +*/ -/* This code should work with any preprocessor that supports nesting and the use of "&", like "Stylus" (Recommended) and "Less". */ :root { - --base-border-radius: 6px; + --base-border-radius: 6px; + } -html.theme-gitea, -html.theme-arc-green { - --fonts-override: var(--fonts-regular); +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; +a[rel*="nofollow"]:not(.ui), .link:not(.ui) { + &:hover, &:focus { + text-decoration: underline; + text-underline-offset: 5px; + } } +* { + outline: 0px dashed var(--color-primary); + outline-offset: -2px; + transition: outline-color .5s, outline-offset .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; +} + +@keyframes slideInY { + from { opacity: 0; transform: scale(.97); } + to { opacity: 1; transform: scale(1); } +} +@keyframes slideOutY { + from { opacity: 1; transform: scale(1); } + to { opacity: 0; transform: scale(.97); } +} + /*** Change Border Radius's ***/ .ui.buttons .ui.basic.button { - border-radius: 0; + 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.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); + 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; + 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; + border-radius: var(--base-border-radius) var(--base-border-radius) 0 0; } + .ui.avatar { - border-radius: var(--base-border-radius) !important; + border-radius: var(--base-border-radius) !important; } + /*** Buttons ***/ .ui.compact.button { - padding-top: 0.3em; - padding-bottom: 0.3em; - min-height: 0.8em; - display: inline-flex; - align-items: center; + padding-top: .3em; + padding-bottom: .3em; + min-height: .8em; + display: inline-flex; + align-items: center; + svg { + margin-bottom: -1px !important; + } } -.ui.compact.button svg { - margin-bottom: -1px !important; -} -.ui.basic.button, -.ui.basic.label { - background: none; +.ui.basic.button, .ui.basic.label { + background: none; } + + + /*** Inputs ***/ + .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; + 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; + display: none; } + + /*** Layouts ***/ + .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; + 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; + width: auto !important; + flex-grow: 1; } .ui.compact.tiny.menu { - flex-grow: 1; -} -.ui.compact.tiny.menu a { - flex-grow: 1; - justify-content: center; + 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; -} -.page-content:not(.home) > .middle > .column { - padding: 0 !important; -} -/* 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; -} -.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; + 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; -/* Remove stuff that isn't needed when JS is disabled */ + 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; + } + } + } -.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; + + + +/*** 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; + } } -.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; +.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; -} -#user-heatmap .vch__wrapper { - min-width: 500px; + 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; + 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; + 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; + } } -.label:not(.basic).sha > .detail { -/* Fix SHA Padding */ - margin-left: 6px !important; -} -.label:not(.basic) 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.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, .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; -} -.ui.tabular.menu::before { - content: ""; - position: absolute; - bottom: 1px; - left: 0; - right: 0; - z-index: -1; - border-top: 1px solid var(--color-secondary); + 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; -} -.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; + 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; -} -.repository .filter.menu .menu .info { - width: 100% !important; - padding: 0.8em !important; - line-height: 1.2em; - white-space: normal !important; + 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; + scrollbar-width: auto !important; } .full.height { - padding-bottom: 30px; + 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; + --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):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; + 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; - } - .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; - } - .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%; - } +@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; -/* 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; - overflow: hidden; - 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 .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 a { - 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; - } - .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 6; - 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: 100px !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), - .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; - } + 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; -} -.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; +.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; -} -#release-list .four.wide.column { - position: sticky !important; - top: 0px; - height: min-content; - width: 150px !important; + 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.explore > .ui.container, -.user:not(.list).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, -.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, -.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, -.user:not(.list).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, -.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, -.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, -.profile.organization .ui.eleven.wide.column::before { - content: unset !important; -} -.explore > .ui.container, -.user:not(.list) > .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, -.profile > .ui.container[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; -} -.explore > .ui.container[class="ui container"] .five.wide.column .card, -.user:not(.list) > .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, -.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, -.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, -.user:not(.list) > .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, -.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, -.user:not(.list) > .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; - 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, -.user:not(.list) > .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, -.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, -.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, -.user:not(.list) > .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, -.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, -.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, -.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, -.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, -.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, -.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, -.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, -.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; - z-index: 9999; - background-color: var(--color-body); -} -.explore > .ui.container .eleven.wide.column::before, -.user:not(.list) > .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; - width: 200vw; - display: block; - border-bottom: 1px solid var(--color-secondary); - top: 44px; - z-index: -1; -} -.explore > .ui.container .item .meta, -.user:not(.list) > .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, -.profile > .ui.container .item .meta svg { - margin-right: 4px; -} -.explore > .ui.container .item .meta a, -.user:not(.list) > .ui.container .item .meta a, -.profile > .ui.container .item .meta a { - max-width: calc(100% - 20px); - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; +.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.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; -} -.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.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; -} -.ui.repository.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.repository.list .item:focus-within { - box-shadow: var(--lm-shadow); -} -.ui.repository.list .item .header { - display: contents !important; -} -.ui.repository.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 { - white-space: normal !important; - word-break: normal !important; -} -.ui.repository.list .item .header .repo-title > * { - grid-column: 2/span 4; -} -.ui.repository.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 { - content: ""; - position: absolute; - top: 0; - left: 0; - height: 80px; - width: 100%; -} -.ui.repository.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 { - grid-column: 2; - grid-row: 2; - width: 100%; -} -.ui.repository.list .item .description { - display: contents; -} -.ui.repository.list .item .description > p:first-child { - padding-top: 4px; - margin-bottom: 0px; -} -.ui.repository.list .item .description > * { - grid-column: 1/span 4; -} -.ui.repository.list .item .description > *:nth-last-child(2) { - margin-bottom: 0 !important; -} -.ui.repository.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 { - display: flex; - overflow-x: auto; - scrollbar-width: none; - margin-top: 8px; -} -.ui.repository.list .item .description .tags a > div { - width: max-content !important; -} -.ui.repository.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; + 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 */ -/* 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: 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: -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 codeberg-announcement-widget > div .close span { - font-size: 1.7em; - font-weight: 200; - margin-right: 2px; -} -.dashboard > .ui.container #app codeberg-announcement-widget > div h4 { - margin-right: 1.7em; - font-weight: 600; -} -.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; + 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; + 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; + } } -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); - } -} -@-webkit-keyframes slideInY { - from { - opacity: 0; - transform: scale(0.97); - } - to { - opacity: 1; - transform: scale(1); - } -} -@-o-keyframes slideInY { - from { - opacity: 0; - transform: scale(0.97); - } - to { - opacity: 1; - transform: scale(1); - } -} -@keyframes slideInY { - 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(0.97); - } -} - - - + } @-moz-document domain("codeberg.org") { From d52753e83983ac814d6ccc97b0af0571ca74546a Mon Sep 17 00:00:00 2001 From: Free Date: Thu, 12 Aug 2021 21:30:55 +0200 Subject: [PATCH 3/3] 1.0.3 --- Gitea/theme-gitea-modern.css | 121 ++++++++++++++++++++++++----------- 1 file changed, 85 insertions(+), 36 deletions(-) diff --git a/Gitea/theme-gitea-modern.css b/Gitea/theme-gitea-modern.css index 047f02e..f32752b 100644 --- a/Gitea/theme-gitea-modern.css +++ b/Gitea/theme-gitea-modern.css @@ -1,4 +1,8 @@ -/* This code should work with any preprocessor that supports nesting and the use of "&", like "Stylus" (Recommended) and "Less". */ +/* Update 1.0.3 +- Fixed table stretching due to the grid +- Better keyboard accessability +- Fixed Codeberg dropdown +*/ :root { --base-border-radius: 6px; } @@ -13,6 +17,17 @@ a[rel*="nofollow"]: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; +} /*** Change Border Radius's ***/ .ui.buttons .ui.basic.button { border-radius: 0; @@ -139,6 +154,31 @@ a[rel*="nofollow"]:not(.ui):focus, .page-content:not(.home) > .middle > .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; +/* 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; +} +/*** Popups ***/ /* Tooltips */ .popup.tiny.inverted { background: var(--color-body); @@ -176,30 +216,6 @@ a[rel*="nofollow"]:not(.ui):focus, .settings > .ui.container { max-width: 1150px !important; } -/* No Script Message */ -.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; -} /** Other Elements **/ #user-heatmap { overflow: auto hidden; @@ -231,6 +247,20 @@ a[rel*="nofollow"]:not(.ui):focus, .label:not(.basic) svg { margin-right: 4px; } +/* Alerts */ +.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; +} /*** Menu's ***/ .ui.tabular.menu, .ui.tight.menu { @@ -376,6 +406,12 @@ html { 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, @@ -509,6 +545,7 @@ html { 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; @@ -732,7 +769,6 @@ html { } .page-content.repository:not(.milestones) > .ui.container #repo-files-table { margin-top: 0; - overflow: hidden; background: none !important; } .page-content.repository:not(.milestones) > .ui.container #repo-files-table thead { @@ -769,6 +805,15 @@ html { 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; @@ -789,7 +834,15 @@ html { .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); } @@ -842,6 +895,8 @@ html { 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 > *, @@ -852,7 +907,7 @@ html { .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 6; + grid-row: 1/span 50; border: 0; margin-top: 12px !important; margin-left: 30px; @@ -1407,6 +1462,9 @@ html { .ui.repository.list .item:focus-within { box-shadow: var(--lm-shadow); } +.ui.repository.list .item:focus-within { + outline: 1px solid var(--color-primary) !important; +} .ui.repository.list .item .header { display: contents !important; } @@ -1695,15 +1753,6 @@ html { margin-right: 0 !important; margin-bottom: 1rem !important; } -.dashboard > .ui.container #app codeberg-announcement-widget > div .close span { - font-size: 1.7em; - font-weight: 200; - margin-right: 2px; -} -.dashboard > .ui.container #app codeberg-announcement-widget > div h4 { - margin-right: 1.7em; - font-weight: 600; -} .dashboard > .ui.container #app .tabable { background: none; margin-right: 0 !important;