From 1e112790d316453130ca39e39c76f3f211112464 Mon Sep 17 00:00:00 2001 From: Free Date: Tue, 27 Jul 2021 18:26:33 +0200 Subject: [PATCH] 0.1.0 --- Gitea/Gitea-modern.css | 1712 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 1712 insertions(+) diff --git a/Gitea/Gitea-modern.css b/Gitea/Gitea-modern.css index e69de29..8cff797 100644 --- a/Gitea/Gitea-modern.css +++ b/Gitea/Gitea-modern.css @@ -0,0 +1,1712 @@ +/* This code should work with any preprocessor that supports nesting and the use of "&", like "Stylus" (Recommended) and "Less". */ + +:root { + --base-border-radius: 6px; +} +html.theme-gitea, html.theme-arc-green { + --fonts-override: var(--fonts-regular); +} +a[rel*="nofollow"]:not(.ui), .link:not(.ui) { + &:hover, &:focus { + text-decoration: underline; + text-underline-offset: 5px; + } +} + +@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; +} +.ui.button, .ui.basic.button, .ui.menu, .input.action.fluid, .ui.label, +.ui.form input:not([type]), .ui.form input[type="date"], .ui.form input[type="datetime-local"], .ui.form input[type="email"], .ui.form input[type="file"], .ui.form input[type="number"], .ui.form input[type="password"], .ui.form input[type="search"], .ui.form input[type="tel"], .ui.form input[type="text"], .ui.form input[type="time"], .ui.form input[type="url"], +.ui.table, .tab-size-8, +{ + border-radius: var(--base-border-radius); +} +.ui.menu > .item:first-child, +.ui.buttons .button:first-child, +.ui.buttons > .ui.basic.button:first-child { + border-radius: var(--base-border-radius) 0 0 var(--base-border-radius); +} +.ui.compact.menu:not(.secondary) .item:last-child, +.ui.buttons .button:last-child, +.ui.action.input > .button:last-child, +.ui.buttons > .ui.basic.button:last-child { + border-radius: 0 var(--base-border-radius) var(--base-border-radius) 0; +} +.ui.top.attached.header { + border-radius: var(--base-border-radius) var(--base-border-radius) 0 0; +} + +.ui.avatar { + border-radius: var(--base-border-radius) !important; +} + +/*** Buttons ***/ +.ui.compact.button { + padding-top: .3em; + padding-bottom: .3em; + min-height: .8em; + display: inline-flex; + align-items: center; + svg { + margin-bottom: -1px !important; + } +} +.ui.basic.button, .ui.basic.label { + background: none; +} + + + +/*** Inputs ***/ + +.input.action.fluid { + border: 1px solid var(--color-secondary) !important; + height: 40px; + input { + border: 0; + } + button { + margin: 2px !important; + margin-left: 0 !important; + padding-top: 0 !important; + padding-bottom: 0 !important; + box-sizing: border-box; + border-radius: var(--base-border-radius) !important; + } + .icon { + border: 0 !important; + } + &:focus-within { + outline: 1px solid var(--color-primary); + outline-offset: -1px; + } +} +.ui.form + .ui.divider { + display: none; +} + + +/*** Layouts ***/ + +.three.column { + margin-left: 0; + margin-right: 0; + .column { + width: auto !important; + align-items: center !important; + display: flex !important; + form { + width: 100%; + } + &:first-child { + padding-left: 0; + } + &:last-child { + padding-right: 0; + } + } + .center { + flex-grow: 100; + padding-left: 0 !important; + padding-right: 0 !important; + } +} + +// Filter buttons & New Issue buttons on mobile +.ui.two.column.stackable.grid > .column { + width: auto !important; + flex-grow: 1; +} +.ui.compact.tiny.menu { + flex-grow: 1; + a { + flex-grow: 1; + justify-content: center; + } +} + +/* Better center content */ +.page-content:not(.home) > .middle { + padding: calc(4vw + 1rem) 4vw !important; + width: 100% !important; + & > .column { + padding: 0 !important; + } +} + +/* Tooltips */ +.popup.tiny.inverted { + background: var(--color-body); + color: var(--color-text); + box-shadow: var(--lm-large-shadow); + border: 1px solid var(--color-secondary); + pointer-events: none; + z-index: 1000; + &::before { + background: var(--color-body) !important; + z-index: -99999 !important; + border-color: var(--color-secondary) !important; + } +} +.ui.left.popup::before { + border: 0; + border-top: 1px solid; + border-right: 1px solid; +} +.ui.right.popup::before { + border: 0; + border-left: 1px solid; + border-bottom: 1px solid; +} +.ui.top.popup::before { + border: 0; + border-right: 1px solid; + border-bottom: 1px solid; +} +.ui.bottom.popup::before { + border: 0; + border-top: 1px solid; + border-left: 1px solid; +} + + +.settings > .ui.container { + max-width: 1150px !important; +} + + +/* 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 { + overflow: auto hidden; + justify-content: flex-start; + max-width: 900px; + margin: auto; + .vch__wrapper { + min-width: 500px; + + } +} + +/* Bold repo name, not author*/ +.repo-title a:nth-last-child(2) { + font-weight: 600 !important; +} + +/* Better labels */ +.label:not(.basic) { + border-radius: 100px !important; + padding: 4px 8px !important; + font-weight: 700; + align-items: center; + justify-content: center; + min-width: 24px !important; + display: inline-flex; + svg { + margin-right: 4px; + } +} + + +/*** Menu's ***/ +.ui.tabular.menu, .ui.tight.menu { + position: relative; + flex-direction: row !important; + flex-wrap: nowrap !important; + overflow: auto hidden !important; + scrollbar-width: thin; + padding-bottom: 2px; + scrollbar-color:var(--color-primary) var(--color-secondary); + border-bottom: 1px solid var(--color-secondary) !important; + &.ui.tight.menu > .item { + width: auto !important; + border-bottom-width: 0px !important; + position: relative !important; + &::before { + content: "" !important; + position: absolute !important; + bottom: 0 !important; + left: 20px !important; + right: 20px !important; + top: unset !important; + width: unset !important; + height: 2px !important; + opacity: .7; + border-radius: 4px 4px 0 0; + background: none; + display: flex !important; + transition: left 2s; + } + &.active::before { + background-color: var(--color-primary) !important; + left: 0 !important; + right: 0 !important; + } + } +} +.ui.tabular.menu { + border-bottom: 0 !important; + position: relative; + &::before { + content: ""; + position: absolute; + bottom: 1px; + left: 0; + right: 0; + z-index: -1; + border-top: 1px solid var(--color-secondary); + } +} +.ui.tabular.menu > .item { + width: auto !important; + padding-left: 16px; + padding-right: 16px; + min-width: 70px; + justify-content: center; + position: relative; + border-radius: 20px !important; + svg { + margin-right: 10px !important; + } + &.active { + border-radius: 10px 10px 0 0 !important; + z-index: 1; + } + &.active::after { + content: "" !important; + position: absolute; + width: 6px; + height: 6px; + bottom: 1px; + right: -7px; + border-bottom-left-radius: 100px; + box-shadow: -1px 1px 0 0px var(--color-secondary), -3px 3px 0px 2px var(--color-body) ; + + } + &.active::before { + all: unset; + content: "" !important; + position: absolute; + width: 6px; + height: 6px; + bottom: 1px; + left: -7px; + border-bottom-right-radius: 100px; + box-shadow: 1px 1px 0 0px var(--color-secondary), 3px 3px 0px 2px var(--color-body) ; + display: unset !important; + } + &.active:first-child { + &::before { + content: none !important; + } + } +} + + +.repository .filter.menu .menu { + max-height: 80vh; + width: max-content !important; + .info { + width: 100% !important; + padding: .8em !important; + line-height: 1.2em; + white-space: normal !important; + } +} + + + + + + +/*** Body ***/ +html { + scrollbar-width: auto !important; +} + + +/*** Header ***/ +.following.bar { + --min-height: 60px; + + background: none !important; + border-bottom: 1px solid var(--color-secondary) !important; + background-color: var(--color-navbar) !important; + position: relative; + min-height: var(--min-height); + align-items: center; + z-index: 99999; +} +#navbar { + padding: 0 calc(2px + 1%) !important; + background: none !important; + max-width: 100rem; + transition: padding 1s; + min-height: var(--min-height) !important; + margin: auto; + + + & > .item:not(.brand), & > .right > .item { + color: var(--color-text-dark) !important; + font-size: 1rem !important; + font-weight: 600; + + padding: 0 calc(0px + 1.1%); + height: calc(var(--min-height) + 1px) !important; + margin: 0 !important; + border-radius: 0; + border-top: 1px solid transparent; + border-bottom: 1px solid transparent; + margin-bottom: -1px !important; + background: none !important; + box-sizing: border-box; + transition: border .5s, padding .7s; + &: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 { + border-radius: 100px; + background-color: var(--color-primary) !important; + box-shadow: 0 1px 2px var(--color-primary); + width: 35px; + height: 35px; + margin-right: 20px; + background-position: center; + } + .right { + position: sticky; + right: 1%; + background-color: var(--color-navbar); + box-shadow: 100px 0px 0 var(--color-navbar); + width: 100%; + min-width: max-content; + justify-content: flex-end; + & > .item { + padding: 0 10px; + & > .text { + display: flex; + align-items: center; + span:not(.fitted) { + margin-left: 10px; + } + img ~ .fitted { + margin-left: 4px; + } + } + } + } +} + + +/* Page content when width is larger than 850px */ +@media only screen and (min-width: 850px) { + + .page-content.repository:not(.issues.repository.milestones):not(.new:not(.issue)) { + display: grid; + grid-row-gap: 10px; + grid-template-columns: 100px calc(100% - 100px); + padding: 0 20px; + padding-top: 20px; + width: 1367px; + max-width: 100%; + margin: auto; + .header-wrapper { + display: contents; + & > .ui.container:first-child { + grid-row: 1; + grid-column: 1 / span 2; + width: 100%; + padding-left: 100px; + border: 0 !important; + box-shadow: none !important; + .avatar, .repo-icon { + width: 50px !important; + height: 50px !important; + object-fit: contain; + margin: 0 10px; + margin-left: -90px; + margin-right: 39px !important; + margin-bottom: -10px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 8px !important; + + } + .repo-title-wrap { + display: flex; + flex-direction: row !important; + align-items: center; + } + .fork-flag { + margin: 0 !important; + margin-left: 6px !important; + padding: 2px 8px; + font-size: 12px; + + border-radius: var(--base-border-radius); + border: 1px solid var(--color-secondary); + } + } + .tabs { + order: -1; + width: auto !important; + width: 70px; + margin: 0 !important; + margin-top: 60px !important; + grid-column: 1; + grid-row: 2 / span 5; + height: min-content; + position: sticky; + bottom: 20px; + margin-bottom: -60px !important; + align-self: flex-end; + align-content: flex-start; + min-height: calc(100vh - 40px); + .tabular { + flex-direction: column !important; + padding-right: 30px; + overflow: visible !important; + padding-left: 0; + border-bottom: 0 !important; + &::before { + content: unset !important; + } + .item { + display: flex; + flex-direction: column; + text-align: center; + padding-top: 12px; + padding-bottom: 18px; + position: relative; + background: none; + color: var(--color-text); + opacity: .7; + svg { + margin: 0; + width: 22px; + height: 22px; + max-width: unset !important; + margin-bottom: 10px; + margin-right: 0 !important; + overflow: visible; + order: -2; + } + .label { + margin: 0 !important; + margin-top: -3px !important; + margin-bottom: 6px !important; + order: -1; + position: relative; + } + &.active { + border: none; + opacity: 1; + &::before { + content: unset !important; + } + &::after { + all: unset; + content: ""; + position: absolute; + top: 2px; + left: -5px; + right: -5px; + bottom: 5px; + background: var(--color-primary); + opacity: .1; + border-radius: 12px !important; + z-index: -1; + } + } + &:hover { + opacity: .9 !important; + } + } + .right.menu { + display: contents; + } + } + } + .divider { + display: none; + } + } + & > .ui.container { + width: 100%; + } + } +} + +/* Default Page Content, no width restraint */ +.page-content.repository:not(.milestones) { + width: 1300px; + height: min-content; + max-width: 100%; + margin: auto; + margin-bottom: -80px; + .header-wrapper { + padding-top: 40px !important; + border-bottom: 0 !important; + background: none; + .repo-title { + flex-wrap: wrap; + line-height: 1.5em; + justify-content: center; + } + .repo-buttons { + display: flex; + flex-wrap: wrap; + justify-content: center; + & > * { + margin-top: 4px; + } + } + .tabs.container { + margin-bottom: -2px; + margin-left: 0; + margin-right: 0; + width: 100%; + border-bottom: 0 !important; + .tabular { + padding-left: 2rem; + padding-right: 2rem; + border-bottom: 0 !important; + } + } + } + & > .ui.container { + height: min-content; + & > div:not(.attached) { + height: min-content; + margin-top: 0 !important; + margin-bottom: .7rem !important; + } + & > .column + .divider:not(.header) { + border: 0; + margin: -22px 0 !important; + } + & > .column:first-child > .column { + padding-top: 0; + } + + #repo-desc { + font-size: 1.14rem; + line-height: 1.6rem; + } + #repo-topics { + margin: 0 -4px; + margin-bottom: 0 !important; + margin-top: -.5rem !important; + align-items: flex-start !important; + & > *:last-child { + margin: 2px !important; + height: 22px !important; + margin-bottom: .7rem !important; + } + } + .repo-topic { + border-radius: 100px; + padding: 4px 10px; + color: var(--color-primary); + font-size: .9rem; + position: relative; + &:not(:hover) { + background: none; + } + &::before { + content: ""; + position: absolute; + inset: 0; + border-radius: 100px; + background: var(--color-primary); + opacity: .07; + z-index: -1; + } + } + + .form .ui.tabular.menu { + margin-bottom: -2px; + z-index: 1; + } + #comment-form .markdown { + padding-top: 15px; + } + + .mobile--no-negative-margins { + margin: 10px -6px; + flex-wrap: wrap; + grid-row-gap: 5px; + & > .item:nth-last-child(+2) { + flex-grow: 1; + } + & > .item:last-child { + flex: 3 1 100px; + margin-left: 4px; + } + & > .item:first-child .floating.filter.dropdown > .basic.small.compact.button { + .text { + font-size: 0; + display: flex; + align-items: center; + strong { + font-size: 1rem; + margin-left: 8px; + margin-right: 4px; + text-transform: capitalize; + font-weight: 500; + } + } + } + .breadcrumb { + margin: 0 10px; + } + button, .button { + align-content: center; + display: flex; + align-items: center; + height: 32px !important; + padding-left: 16px !important; + padding-right: 16px !important; + box-sizing: border-box; + } + #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; + overflow: hidden; + 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); + } + + .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 { + a { + 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-column: 1; + } + .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; + + .segment { + background: none; + } + .language-stats-details { + display: flex !important; + padding: 0; + border-top: 1px solid rgba(0,0,0,0.1); + overflow: hidden; + background: none !important; + .item { + flex-direction: column; + & > * { + margin: 0 !important; + } + i { + margin-bottom: 8px !important; + } + } + } + .repository-menu { + display: block !important; + height: unset !important; + } + + .language-stats-details { + height: unset !important; + padding: 0 !important; + margin: 0 !important; + order: 2; + border: 0 !important; + } + .language-stats { + border-radius: 100px !important; + overflow: hidden !important; + pointer-events: none; + top: 0; + } + .horizontal.list:not(.two) { + padding-top: 1rem; + } + .list { + flex-direction: column; + background: none !important; + .item { + border-radius: 12px !important; + padding: 12px 0 !important; + padding-bottom: 18px !important; + position: relative; + margin-right: 0 !important; + a { + padding: 0 !important; + } + .bold, b { + font-weight: 500 !important; + } + &.active { + background: none !important; + &::before { + content: ""; + position: absolute; + top: 0; + left: -5px; + right:-5px; + bottom: 5px; + background: var(--color-primary); + opacity: .1; + z-index: -1; + border-radius: 12px; + } + } + } + a, span { + & > * { + margin-bottom: 5px; + } + svg { + width: 100%; + height: 20px; + margin-bottom: 10px !important; + } + display: flex; + flex-direction: column; + padding: 0 10px; + justify-content: center; + } + } + } + + + + } + } + } + +} + +/* ISSUES LIST / MILESTONES LIST, mostly issue's list though. */ +.issue.list, .milestone.list { + border: 1px solid var(--color-secondary); + border-radius: var(--base-border-radius); + background: var(--color-menu); + padding: 0 !important; + margin-top: 1rem; + &.milestone.list li { + border-bottom-style: solid !important; + &:last-child { + border-bottom: 0; + } + } + li { + padding: 10px !important; + padding-bottom: 6px !important; + position: relative; + &:hover { + box-shadow: inset 0 0 600px -300px var(--color-primary); + } + .issue-item-left { + padding-top: 2px; + svg { + margin-right: 8px; + } + } + .issue-item-top-row { + a { + vertical-align: unset !important; + } + } + .issue-item-bottom-row { + margin-top: -2px !important; + svg { + margin-top: 3px; + } + } + .content { + padding-bottom: 2px; + padding-top: 2px !important; + } + } + .label { + margin-top: -1px; + position: relative; + } +} + +/* Repo page releases list */ +#release-list { + padding-left: 0; + .four.wide.column { + position: sticky !important; + top: 0px; + height: min-content; + width: 150px !important; + } +} + +/*** USER PROFILES & EXPLORE PAGES ***/ +.explore, .user:not(.list), .profile { + display: flex; + flex-wrap: wrap; + justify-content: center; + + /* Responsive explore page */ + &.explore > .ui.container { + max-width: calc(100vw - 40px); + width: 3000px !important; + padding: 0 calc(10vw - 80px); + } + &.organization { + & > .ui.container:first-child { + padding-top: 30px; + padding-bottom: 30px; + #org-info { + display: flex; + flex-direction: column; + margin: 0 10px; + justify-content: center; + & > p { + margin: 0 !important; + margin-bottom: .2rem !important; + } + .item { + display: flex; + align-items: center; + a { + margin-left: 4px; + } + } + } + } + .ui.eleven.wide.column::before { + content: unset !important; + } + } + + & > .ui.container { + max-width: 1350px; + width: 100% !important; + padding: 0 20px; + &[class="ui container"] .five.wide.column { + width: 320px !important; + flex: 1 0 320px !important; + position: sticky; + bottom: 0; + align-self: flex-end; + min-height: 100vh; + .card { + width: 100%; + border: 0; + background: none !important; + #profile-avatar { + padding-left: .7rem; + padding-right: 2rem !important; + padding-top: .5rem; + + } + #profile-avatar .avatar { + border-radius: calc(var(--base-border-radius) * 2) !important; + box-shadow: 0 4px 12px rgba(0,0,0,0.1); + border: 1px solid var(--color-secondary); + background: var(--color-body); + height: 100% !important; + max-height: 80vh; + } + .profile-avatar-name { + font-size: 2rem; + display: contents; + span { + text-align: left; + font-weight: 600; + padding-left: .7rem; + margin: 1.5rem 0; + + &.header { + font-weight: 500; + letter-spacing: .1em; + height: 44px; + line-height: 50px; + margin-bottom: -1.2em; + margin-top: 0; + background: var(--color-body); + position: sticky; + top: 0px; + z-index: 3; + box-shadow: 0 -5px 5px var(--color-body); + } + &.username { + z-index: 2; + } + } + } + .extra { + border: 0 !important; + li { + border: 0 !important; + padding: .3rem .7rem; + display: flex; + align-items: center; + svg { + margin-right: 8px; + } + .user-orgs { + justify-content: center; + margin-top: 1rem !important; + li { + flex-grow: 1 !important; + a { + width: 100%; + img { + width: 35px; + height: 35px; + } + } + } + } + .render-content p { + padding: .6rem 0; + padding-bottom: .7rem !important; + word-break: normal !important; + } + } + .follow form { + margin-top: 1rem; + width: 100%; + } + } + + } + } + .eleven.wide.column { + flex-grow: 100; + width: 500px !important; + max-width: 100%; + .ui.secondary.stackable.pointing.tight.menu { + margin: 0 -2px; + margin-bottom: 1.5rem; + position: sticky; + top: 0px !important; + margin-top: -45px; + height: 45px; + z-index: 9999; + background-color: var(--color-body); + } + &::before { + content: ""; + position: sticky; + margin: 0 !important; + margin-left: -100vw !important; + margin-top: 45px !important; + width: 200vw; + display: block; + border-bottom: 1px solid var(--color-secondary); + top: 44px; + z-index: -1; + } + } + .item .meta { + display: flex; + align-items: center; + svg { + margin-right: 4px; + } + a { + max-width: calc(100% - 20px); + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + } + + } +} + +/* DASHBOARD / USER FEEDS */ +.ui.container > .news, .feeds > .news { + border: 1px solid var(--color-secondary) !important; + background: var(--color-box-body); + margin-bottom: 1rem; + border-radius: var(--base-border-radius); + padding: 10px 12px !important; + position: relative; + + .ui.left { + img { + margin: 0 !important; + margin-top: 2px !important; + margin-right: 15px !important; + border-radius: var(--base-border-radius); + } + } + .ui.grid { + margin: 0 !important; + padding: 0 !important; + & > .column { + padding: 0 !important; + width: 100% !important; + & > div { + display: flex; + flex-wrap: wrap; + min-height: 60px; + & > *:first-child { + min-width: 100%; + } + & > *:last-child { + margin-left: auto; + margin-top: auto; + } + } + } + .content { + max-width: 100%; + } + & > .column > div > p:first-child { + margin-bottom: 0.4rem; + font-weight: 600; + } + + + & > .right.column { + position: absolute; + top: 45px; + left: 0; + width: 52px !important; + text-align: center; + svg { + width: 28px; + height: 28px; + padding: 4px; + } + } + .title, p, ul { + margin-bottom: 0; + } + ul { + border-left: 4px solid var(--color-secondary); + } + } + .divider { + display: none; + } +} + +/* REPOSITORY LIST */ +.ui.repository.list { + display: flex; + flex-wrap: wrap; + margin: 0 -10px; + margin-top: 10px !important; + .item { + width: 400px; + margin: 8px; + 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); + } + + .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: -100px; + + + + /* 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 { + flex: 1 0 max-content; + min-width: 200px; + border: 1px solid var(--color-secondary); + margin: 3px 6px; + &: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; + .close span { + font-size: 1.7em; + font-weight: 200; + margin-right: 2px; + } + h4 { + margin-right: 1.7em; + font-weight: 600; + } + } + } + + .tabable { + background: none; + margin-right: 0 !important; + box-sizing: border-box; + width: unset; + margin-bottom: 0; + } + .dashboard-repos, .dashboard-orgs { + margin: 0 !important; + overflow-y: auto; + overflow-x: hidden; + scrollbar-width: thin; + margin-bottom: 0; + min-height: 200px; + height: 0; + flex-grow: 1; + padding-top: 15px; + .repos-search .input { + margin-bottom: 8px; + } + & > .ui:last-child { + margin-bottom: 78px; + } + & > * { + border: 0; + background: none; + } + .header { + padding-top: 5px; + font-weight: 600; + a { + display: flex; + align-items: center; + svg { + width: 18px; + height: 18px; + } + } + } + .header, .repos-search { + padding-left: 5px; + padding-right: 5px; + } + .repos-search { + padding-top: 0; + input, .button { + background: none !important; + } + } + .table { + margin-top: 10px; + } + li { + background: none; + font-weight: 700; + border: 0; + a { + padding: 5px 5px; + + .item-name { + display: flex; + align-items: center; + svg { + margin-right: 8px !important; + } + } + strong { + font-weight: 700; + } + } + } + } + } + } +} + + + + + + +footer { + border: 0; + padding: 20px; + box-sizing: border-box; + width: auto !important; + border-top: 1px solid var(--color-secondary); + background: var(--color-body); + z-index: 2; + .container { + max-width: 1390px !important; + padding: 0 40px; + } +}