You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2481 lines
50 KiB
2481 lines
50 KiB
// main: theme-gitea-modern.user.styl, out: theme-gitea-modern.css, compress: true |
|
// Ignore above, just compiler stuff |
|
|
|
/* Update 1.0.17 |
|
- Remove uppercasing on fork names (#28) |
|
- Fixed icon missplacement in comments (#27) |
|
- More fixes |
|
*/ |
|
|
|
:root { |
|
--base-border-radius: 6px; |
|
} |
|
html.theme-gitea, html.theme-arc-green { |
|
--fonts-override: var(--fonts-regular); |
|
accent-color: var(--color-primary); |
|
} |
|
a[rel*="nofollow"]:not(.ui), .link:not(.ui) { |
|
&:hover, &:focus { |
|
text-decoration: underline; |
|
text-underline-offset: 5px; |
|
} |
|
} |
|
|
|
*:not(input) { |
|
outline: 0px dashed var(--color-primary); |
|
outline-offset: -3px; |
|
transition: outline-color .5s, outline-offset .5s; |
|
} |
|
:focus-visible:not(input) { |
|
box-shadow: 0 0 5px 0px var(--color-primary) !important; |
|
border-radius: 2px; |
|
outline: 2px solid var(--color-primary) !important; |
|
outline-offset: 0px; |
|
} |
|
|
|
@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:not(.secondary) > .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 ***/ |
|
.button { |
|
text-overflow: ellipsis; |
|
} |
|
.ui.compact.button { |
|
padding-top: .3em; |
|
padding-bottom: .3em; |
|
min-height: 2.4em; |
|
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: auto; |
|
background-color: var(--color-input-background); |
|
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; |
|
border-color: var(--color-primary) !important; |
|
} |
|
} |
|
.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; |
|
.small:not(.modal), a { |
|
max-height: 40px !important; |
|
min-height: unset; |
|
display: flex; |
|
align-items: center; |
|
} |
|
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; |
|
} |
|
} |
|
|
|
|
|
/*** Popups ***/ |
|
/* Tooltips */ |
|
.popup.tiny.inverted { |
|
background: var(--color-body); |
|
color: var(--color-text); |
|
box-shadow: var(--lt-shadowDefault) !important; |
|
border: 1px solid var(--color-secondary); |
|
pointer-events: none; |
|
z-index: 9999999; |
|
&::before { |
|
background: var(--color-body) !important; |
|
z-index: -99999 !important; |
|
border-color: var(--color-secondary) !important; |
|
} |
|
} |
|
.ui.left.popup::before { |
|
border: 0; |
|
border-top: 1px solid; |
|
border-right: 1px solid; |
|
} |
|
.ui.right.popup::before { |
|
border: 0; |
|
border-left: 1px solid; |
|
border-bottom: 1px solid; |
|
} |
|
.ui.top.popup::before { |
|
border: 0; |
|
border-right: 1px solid; |
|
border-bottom: 1px solid; |
|
} |
|
.ui.bottom.popup::before { |
|
border: 0; |
|
border-top: 1px solid; |
|
border-left: 1px solid; |
|
} |
|
|
|
|
|
.settings > .ui.container { |
|
max-width: 1150px !important; |
|
} |
|
|
|
|
|
|
|
|
|
|
|
/** Other Elements **/ |
|
|
|
// Filter buttons & New Issue buttons on mobile |
|
.ui.two.column.stackable.grid > .column { |
|
width: auto !important; |
|
flex-grow: 1; |
|
} |
|
.ui.compact.tiny.menu { |
|
flex-grow: 1; |
|
a { |
|
flex-grow: 1; |
|
justify-content: center; |
|
} |
|
} |
|
|
|
/* Better center content */ |
|
.page-content:not(.home) > .middle { |
|
padding: calc(4vw + 1rem) 4vw !important; |
|
width: 100% !important; |
|
& > .column { |
|
padding: 0 !important; |
|
} |
|
} |
|
|
|
|
|
/* No Script Message */ |
|
.full.height > span[style="display: inline !important;"]:first-child { |
|
margin: auto; |
|
line-height: 40px; |
|
padding: 30px; |
|
text-align: center; |
|
&::before { |
|
content: ""; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
height: 40px; |
|
background: var(--color-navbar); |
|
border-bottom: 1px solid var(--color-secondary); |
|
z-index: -1; |
|
} |
|
|
|
/* Remove stuff that isn't needed when JS is disabled */ |
|
& ~ .page-content { |
|
#app, #dashboard-repo-list, #user-heatmap, #user-heatmap + .divider { |
|
display: none !important; |
|
} |
|
.dashboard-navbar { |
|
bottom: unset !important; |
|
top: 10px !important; |
|
align-self: flex-start !important; |
|
padding-top: 10px; |
|
} |
|
} |
|
|
|
} |
|
|
|
// Make heatmap not smoll on smoll screens |
|
#user-heatmap { |
|
overflow: auto hidden; |
|
justify-content: flex-start; |
|
max-width: 900px; |
|
margin: auto; |
|
align-items: stretch; |
|
.vch__wrapper { |
|
min-width: 600px; |
|
} |
|
} |
|
|
|
/* Bold repo name, not author*/ |
|
.repo-title a:nth-last-child(2) { |
|
font-weight: 600 !important; |
|
} |
|
|
|
/* Better labels */ |
|
.label:not(.basic) { |
|
border-radius: 100px !important; |
|
padding: 4px 8px !important; |
|
font-weight: 700; |
|
align-items: center; |
|
justify-content: center; |
|
min-width: 24px !important; |
|
display: inline-flex; |
|
&.sha > .detail { /* Fix SHA Padding */ |
|
margin-left: 6px !important; |
|
} |
|
svg { |
|
margin-right: 4px; |
|
} |
|
} |
|
|
|
|
|
|
|
/* Alerts */ |
|
.alert-primary.p-10 { |
|
border: 0 !important; |
|
padding: 20px !important; |
|
.close { |
|
// padding: 10px; |
|
span { |
|
font-size: 1.7em; |
|
font-weight: 200; |
|
padding-right: 6px; |
|
} |
|
} |
|
h4 { |
|
margin-right: 1.7em; |
|
font-weight: 600; |
|
} |
|
} |
|
|
|
|
|
/*** Menu's ***/ |
|
.ui.tabular.menu, .ui.tight.menu { |
|
position: relative; |
|
flex-direction: row !important; |
|
flex-wrap: nowrap !important; |
|
overflow: auto hidden !important; |
|
scrollbar-width: thin; |
|
padding-bottom: 2px; |
|
scrollbar-color:var(--color-primary) var(--color-secondary); |
|
border-bottom: 1px solid var(--color-secondary) !important; |
|
&.ui.tight.menu > .item { |
|
width: auto !important; |
|
border-bottom-width: 0px !important; |
|
position: relative !important; |
|
padding: .85714286em 1.14285714em; |
|
&::before { |
|
content: "" !important; |
|
position: absolute !important; |
|
bottom: 0 !important; |
|
left: 20px !important; |
|
right: 20px !important; |
|
top: unset !important; |
|
width: unset !important; |
|
height: 2px !important; |
|
opacity: .7; |
|
border-radius: 4px 4px 0 0; |
|
background: none; |
|
display: flex !important; |
|
transition: left 2s; |
|
} |
|
&.active::before { |
|
background-color: var(--color-primary) !important; |
|
left: 0 !important; |
|
right: 0 !important; |
|
} |
|
} |
|
} |
|
.ui.tabular.menu { |
|
border-bottom: 0 !important; |
|
position: relative; |
|
&::before { |
|
content: ""; |
|
position: absolute; |
|
bottom: 1px; |
|
left: 0; |
|
right: 0; |
|
z-index: -1; |
|
border-top: 1px solid var(--color-secondary); |
|
} |
|
} |
|
.ui.tabular.menu:not(.borderless) > .item { |
|
width: auto !important; |
|
padding: 16px 24px; |
|
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; |
|
} |
|
} |
|
} |
|
|
|
// That menu right below the Header |
|
.ui.secondary.pointing.menu { |
|
background: none !important; |
|
.new-menu-inner { |
|
width: 1150px; |
|
padding: 0 20px; |
|
} |
|
.item { |
|
// font-weight: 600; |
|
border: none; |
|
} |
|
.active { |
|
position: relative; |
|
&::before { |
|
all: unset; |
|
content: ""; |
|
position: absolute; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
height: 2px; |
|
background-color: var(--color-primary) !important; |
|
display: flex !important; |
|
opacity: .7; |
|
} |
|
} |
|
.item:last-child { |
|
padding-right: 1.14286em !important; |
|
} |
|
&::after { |
|
content: unset !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 { |
|
scroll-behavior: smooth; |
|
scroll-snap-type: y mandatory; |
|
scrollbar-width: auto !important; |
|
} |
|
.full.height { |
|
padding-bottom: 30px; |
|
} |
|
|
|
/*** Header ***/ |
|
.following.bar { |
|
--min-height: 60px; |
|
background: none !important; |
|
border-bottom: 1px solid var(--color-secondary) !important; |
|
background-color: var(--color-navbar) !important; |
|
position: relative; |
|
min-height: var(--min-height); |
|
align-items: center; |
|
#navbar { |
|
padding: 0 calc(18px + 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%); |
|
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) { |
|
// Still tweaking selectors a bit |
|
// .page-content.repository:not(.issues.repository.milestones):not(.new:not(.issue):not(.wiki):not(.release)) { |
|
.page-content.repository:not(.issues.repository.milestones) { |
|
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; |
|
& > .middle { |
|
grid-column: 1 / span 2; |
|
} |
|
.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; |
|
z-index: 2; |
|
} |
|
.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; |
|
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); |
|
// z-index: 2; |
|
&::before { |
|
content: ""; |
|
position: absolute; |
|
bottom: 0; |
|
left: 20px; |
|
right: 50px; |
|
top: -10px |
|
background-color: var(--color-body); |
|
box-shadow: 0 0 20px 20px var(--color-body); |
|
opacity: .8; |
|
} |
|
.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%; |
|
} |
|
} |
|
|
|
/* PROJECTS BOARD */ |
|
#project-board { |
|
width: calc(100vw + 10px); |
|
max-width: unset; |
|
justify-self: center; |
|
margin-left: -100px; |
|
margin-top: -10px; |
|
margin-bottom: calc(-100vh + 0px); |
|
overflow-x: auto; |
|
scrollbar-color: var(--color-primary) transparent; |
|
position: static; |
|
height: calc(100vh - 175px); |
|
scroll-snap-align: end; |
|
& > .board { |
|
overflow: visible; |
|
margin: 0 auto !important; |
|
padding-left: 100px; |
|
box-sizing: content-box; |
|
width: 1227px; |
|
height: 100% !important; |
|
|
|
&::after { |
|
content: ""; |
|
display: flex; |
|
min-width: 100px; |
|
} |
|
.board-column { |
|
height: 100% !important; |
|
box-sizing: border-box; |
|
box-shadow: 20px 0 0 0 var(--color-body); |
|
} |
|
.card { |
|
box-sizing: border-box; |
|
} |
|
} |
|
} |
|
} |
|
|
|
/* 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-inline: 0 !important; |
|
width: 100%; |
|
margin-bottom: .7em; |
|
.tabular { |
|
padding-inline: 3rem; |
|
border-bottom: 0 !important; |
|
&::before { |
|
content: unset !important; |
|
} |
|
.item { |
|
display: flex; |
|
flex-direction: column; |
|
text-align: center; |
|
padding-top: 12px; |
|
padding-bottom: 18px; |
|
width: 90px !important; |
|
max-width: 100% !important; |
|
flex-grow: 1; |
|
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; |
|
} |
|
.right.menu .item { |
|
justify-content: center |
|
} |
|
|
|
} |
|
} |
|
.divider { |
|
display: none !important; |
|
} |
|
} |
|
& > .ui.container { |
|
height: min-content; |
|
position: relative; |
|
// For projects board |
|
& > .three.column.stackable.grid:focus-within { // Still allow keyboard users to access menu, since it would be hidden behind |
|
position: relative; |
|
z-index: 3; |
|
background-color: var(--color-body) |
|
} |
|
& > .three.column.stackable.grid + .ui.divider + .two.column.stackable.grid { |
|
position: absolute; |
|
z-index: 2; |
|
background-color: var(--color-body); |
|
inset: 0; |
|
margin: 0 !important; |
|
height: 39px; |
|
& > .column { |
|
padding: 0 !important; |
|
.item { |
|
padding-block: 0 !important; |
|
} |
|
} |
|
} |
|
& > 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 Content |
|
#repo-desc { |
|
font-size: 1.14rem; |
|
line-height: 1.6rem; |
|
margin-bottom: 0 !important; |
|
&:not(:empty) { |
|
margin-bottom: .3rem !important; |
|
} |
|
} |
|
#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; |
|
} |
|
|
|
.repository-summary-language-stats { |
|
border: 0; |
|
.language-stats-details { |
|
padding: 0 !important; |
|
} |
|
.item { |
|
position: relative; |
|
width: auto; |
|
flex-grow: 1; |
|
padding: 0 !important; |
|
min-width: min-content; |
|
&.ac { |
|
padding: 12px !important; |
|
} |
|
.ui, .ac { |
|
display: block; |
|
line-height: 1.4em; |
|
width: 100%; |
|
padding: 8px; |
|
svg { |
|
vertical-align: top; |
|
margin-right: .2em; |
|
} |
|
} |
|
&::after { |
|
all: unset; |
|
content: ""; |
|
inset: 0; |
|
position: absolute; |
|
background-color: var(--color-primary); |
|
border-radius: var(--base-border-radius); |
|
opacity: .1; |
|
pointer-events: none; |
|
} |
|
} |
|
.language-stats { |
|
border-radius: 100px; |
|
overflow: hidden; |
|
margin-top: .7em |
|
} |
|
} |
|
|
|
.mobile--no-negative-margins { |
|
margin: 10px -.35714286em; |
|
flex-wrap: wrap; |
|
flex-direction: row !important; |
|
grid-row-gap: 5px; |
|
.mx-0, .mr-1 { |
|
width: auto !important; |
|
} |
|
& > .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; |
|
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: 300px !important; |
|
box-sizing: border-box; |
|
flex-grow: 1; |
|
border: 1px solid var(--color-secondary); |
|
padding: 2px; |
|
height: auto; |
|
|
|
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; |
|
background: none; |
|
border: 0; |
|
height: 28px !important; |
|
&:hover { |
|
background: var(--color-light); |
|
} |
|
} |
|
button:last-child { |
|
margin-right: 0; |
|
} |
|
} |
|
} |
|
|
|
|
|
#repo-files-table { |
|
margin-top: 0; |
|
background: none !important; |
|
display: flex; |
|
flex-direction: column; |
|
thead { |
|
position: relative; |
|
&::after { |
|
content: ""; |
|
position: absolute; |
|
inset: 0; |
|
background: var(--color-primary); |
|
opacity: .05; |
|
z-index: -1; |
|
} |
|
tr { |
|
background: none !important; |
|
// padding: 0 !important; |
|
} |
|
th { |
|
padding: 12px 12px; |
|
background: none !important; |
|
max-width: 100%; |
|
&:first-child { |
|
width: 0; |
|
flex-grow: 1; |
|
display: flex !important; |
|
align-items: center; |
|
flex-wrap: wrap; |
|
& > a { |
|
min-width: max-content !important; |
|
max-width: 100px; |
|
} |
|
} |
|
&:last-child { |
|
padding-block: 0 !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; |
|
} |
|
|
|
.commit-summary { |
|
display: contents; |
|
} |
|
.message-wrapper { |
|
// overflow: visible; |
|
display: inline-flex; |
|
width: 100px; |
|
flex-grow: 1; |
|
a { |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
max-width: 100%; |
|
} |
|
} |
|
.commit-body { |
|
padding: 6px; |
|
padding-right: 0; |
|
width: 100%; |
|
} |
|
} |
|
|
|
tr { |
|
position: relative; |
|
width: 100%; |
|
display: flex !important; |
|
align-items: center; |
|
td:first-child { |
|
width: 250px; |
|
max-width: 50%; |
|
} |
|
td:nth-child(2) { |
|
width: 0 !important; |
|
max-width: unset; |
|
flex-grow: 1; |
|
} |
|
} |
|
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%; |
|
color: var(--color-text); |
|
&:hover, &:focus { |
|
color: var(--color-primary); |
|
} |
|
&:last-child { |
|
flex-grow: 1; |
|
} |
|
} |
|
svg { |
|
margin: 0 10px; |
|
margin-top: 2px; |
|
} |
|
|
|
} |
|
.name { |
|
padding-left: 8px; |
|
} |
|
.message, .right:not(.popup) { |
|
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; |
|
} |
|
|
|
// Fix pull req header showing borders on the sides |
|
.diff-box.sticky { |
|
margin: 0 -1px; |
|
border-bottom: 0; |
|
} |
|
.sticky-2nd-row { |
|
// margin-top: 2px; |
|
box-shadow: 0 -2px 0 2px var(--color-body); |
|
} |
|
|
|
|
|
// Issue Comments |
|
.ui.timeline { |
|
margin-left: -16px; |
|
} |
|
.timeline-item { |
|
&.comment { |
|
display: flex; |
|
.content { |
|
flex-grow: 1 |
|
} |
|
} |
|
.timeline-avatar { |
|
position: relative; |
|
left: 0; |
|
// top: .5em; |
|
width: 0; |
|
margin-top: .7em; |
|
z-index: 2; |
|
img, svg { |
|
margin: 0; |
|
height: 1.6em !important; |
|
min-width: 1.6em; |
|
width: 1.6em !important; |
|
} |
|
} |
|
&.form .timeline-avatar { |
|
display: none !important; |
|
} |
|
.comment-header, .form, .no-header { |
|
&::after, &::before { |
|
content: unset !important; |
|
} |
|
} |
|
.comment-header-left, .no-header > .text { |
|
// padding-left: calc(1.7em + 14px) !important; |
|
} |
|
.header { |
|
padding-left: calc(1.7em + 22px) !important; |
|
} |
|
.reactions { |
|
border: 0 !important; |
|
padding: 0 1em; |
|
margin-top: -.4em !important; |
|
padding-bottom: .4em !important; |
|
& > a { |
|
padding: 4px 8px !important; |
|
margin-right: .5em; |
|
margin-bottom: .5em; |
|
border: 1px solid var(--color-secondary); |
|
border-radius: calc(var(--base-border-radius) * 2); |
|
|
|
.reaction { |
|
font-size: 1em; |
|
} |
|
} |
|
.select-reaction { |
|
padding: 0 !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, |
|
[class="ui attached segment two column grid"] + [class="ui attached segment horizontal segments"], // Activies buttons |
|
{ |
|
grid-column: 2; |
|
grid-row: 1 / span 50; |
|
border: 0; |
|
margin-top: 12px !important; |
|
margin-left: 30px; |
|
height: min-content; |
|
position: sticky; |
|
width: 70px; |
|
bottom: 20px; |
|
top: unset; |
|
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: var(--base-border-radius) !important; |
|
overflow: hidden !important; |
|
pointer-events: none; |
|
margin-top: 0; |
|
} |
|
.horizontal.list:not(.two) { |
|
padding-top: 1rem; |
|
} |
|
.list, |
|
&.horizontal, // Activies buttons |
|
{ |
|
flex-direction: column; |
|
background: none !important; |
|
justify-content: flex-start; |
|
.item, & > a.attached.segment { |
|
border-radius: 12px !important; |
|
padding: 12px 0 !important; |
|
padding-bottom: 18px !important; |
|
flex-grow: 0; |
|
position: relative; |
|
margin-right: 0 !important; |
|
border: none; |
|
a { |
|
padding: 0 !important; |
|
} |
|
.bold, b { |
|
font-weight: 500 !important; |
|
} |
|
&.active, &:target { |
|
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; |
|
} |
|
} |
|
&::after { |
|
content: unset !important; |
|
} |
|
} |
|
&.list 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; |
|
padding: 10px 15px !important; |
|
&:last-child { |
|
border-bottom: 0; |
|
} |
|
& > a { |
|
font-size: 1.4em; |
|
} |
|
} |
|
li { |
|
padding: 8px 10px !important; |
|
// padding-bottom: 6px !important; |
|
// padding-top: 0px !important; |
|
position: relative; |
|
&:hover:before, &:focus-within:before { |
|
content: ""; |
|
position: absolute; |
|
inset: 0; |
|
background-color: var(--color-primary); |
|
z-index: 0; |
|
opacity: .07; |
|
pointer-events: none; |
|
} |
|
& > * { |
|
z-index: 1; |
|
} |
|
.issue-item-left { |
|
padding-top: 2px; |
|
svg { |
|
margin-right: 8px; |
|
} |
|
} |
|
.issue-item-top-row { |
|
// margin-bottom: 4px; |
|
display: flex; |
|
flex-wrap: wrap; |
|
a { |
|
vertical-align: unset !important; |
|
margin-bottom: 8px; |
|
} |
|
& > a { |
|
margin-right: 4px; |
|
} |
|
.label { |
|
line-height: 1em; |
|
font-weight: 500; |
|
text-transform: capitalize; |
|
filter: saturate(.8); |
|
} |
|
} |
|
.issue-item-bottom-row { |
|
margin-top: -6px !important; |
|
svg { |
|
margin-top: 3px; |
|
} |
|
.checklist { |
|
margin-left: auto; |
|
} |
|
} |
|
.content { |
|
padding-bottom: 2px; |
|
padding-top: 2px !important; |
|
} |
|
.issue-item-icons-right { |
|
width: 5em; |
|
justify-content: flex-end; |
|
.text { |
|
min-width: unset; |
|
margin-left: 0; |
|
} |
|
} |
|
.issue-item-icons-right a { |
|
display: flex; |
|
align-items: center; |
|
} |
|
} |
|
.label { |
|
margin-top: -1px; |
|
position: relative; |
|
} |
|
} |
|
|
|
/* Repo page releases list */ |
|
#release-list { |
|
padding-left: 0; |
|
.four.wide.column { |
|
width: 150px !important; |
|
} |
|
} |
|
|
|
/*** USER PROFILES & EXPLORE PAGES ***/ |
|
.explore, .page-content.user, .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; |
|
// Profile Column |
|
&[class="ui container"] .five.wide.column { |
|
width: 320px !important; |
|
flex: 1 0 320px !important; |
|
position: sticky; |
|
bottom: 10px; |
|
align-self: flex-end; |
|
min-height: 100vh; |
|
line-height: 1.5em; |
|
.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: 39px; |
|
line-height: 40px; |
|
margin-bottom: -1em; |
|
white-space: nowrap; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
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 { |
|
padding: .6rem 0; |
|
padding-bottom: .7rem !important; |
|
p { |
|
word-break: normal !important; |
|
line-height: 1.5em; |
|
} |
|
} |
|
} |
|
.follow form { |
|
margin-top: 1rem; |
|
width: 100%; |
|
} |
|
} |
|
|
|
} |
|
} |
|
// Repo's column |
|
.eleven.wide.column { |
|
flex-grow: 100; |
|
width: 500px !important; |
|
max-width: 100%; |
|
.ui.secondary.stackable.pointing.tight.menu { |
|
margin: 0 -2px; |
|
margin: 0 -20px; |
|
margin-left: -40px; |
|
margin-bottom: 1.5rem; |
|
position: sticky; |
|
top: -2px !important; |
|
margin-top: -42px; |
|
height: 42px; |
|
z-index: 99; |
|
background-color: var(--color-body); |
|
&::before { |
|
content: ""; |
|
min-width: 40px; |
|
display: block; |
|
position: sticky; |
|
left: 0px; |
|
background: linear-gradient(to right, var(--color-body), transparent); |
|
z-index: 1; |
|
} |
|
@supports (backdrop-filter: blur(10px)) { |
|
backdrop-filter: blur(10px); |
|
background-color: transparent; |
|
&::after { |
|
all: unset; |
|
z-index: -1; |
|
content: "" !important; |
|
position: absolute; |
|
inset: 0; |
|
background-color: var(--color-body); |
|
opacity: .8; |
|
} |
|
} |
|
} |
|
&::before { |
|
content: ""; |
|
position: sticky; |
|
margin: 0 !important; |
|
margin-left: -100vw !important; |
|
margin-top: 42px !important; |
|
width: 200vw; |
|
display: block; |
|
border-bottom: 1px solid var(--color-secondary); |
|
top: 39px; |
|
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; |
|
} |
|
} |
|
|
|
} |
|
} |
|
|
|
/* USER FEEDS */ |
|
.ui.container > .news, .feeds > .news { |
|
border: 1px solid var(--color-secondary) !important; |
|
border-bottom: none !important; |
|
background: var(--color-box-body); |
|
// margin-bottom: 1rem; |
|
border-radius: var(--base-border-radius) var(--base-border-radius) 0 0; |
|
padding: 12px 12px !important; |
|
position: relative; |
|
overflow: hidden; |
|
& + .news { |
|
border-radius: 0 !important; |
|
} |
|
&:last-child { |
|
border-radius: 0 0 var(--base-border-radius) var(--base-border-radius) !important; |
|
border-bottom: 1px solid var(--color-secondary) !important; |
|
} |
|
&::before { |
|
content: ""; |
|
position: absolute; |
|
inset: 0; |
|
background: var(--color-primary); |
|
opacity: 0; |
|
transition: opacity .2s; |
|
} |
|
&:hover::before, &:focus-within::before { |
|
opacity: .05; |
|
} |
|
.ui.left { |
|
width: 42px; |
|
img { |
|
margin: 0 !important; |
|
// margin-top: 3px !important; |
|
margin-right: 18px !important; |
|
border-radius: var(--base-border-radius); |
|
} |
|
} |
|
.ui.grid { |
|
margin: 0 !important; |
|
padding: 0 !important; |
|
padding-top: 1px !important; |
|
min-height: 30px; |
|
& > .column { |
|
padding: 0 !important; |
|
width: 100% !important; |
|
& > div { |
|
display: flex; |
|
flex-wrap: wrap; |
|
align-items: center; |
|
min-height: 100%; |
|
p { |
|
height: max-content; |
|
} |
|
& > *:first-child { |
|
// min-width: 100%; |
|
min-width: calc(100% - 200px); |
|
margin-bottom: 0 !important; |
|
} |
|
& > :not(:first-child):not(:last-child) { |
|
min-width: calc(100% - 200px); |
|
margin-top: .3em; |
|
} |
|
& > *: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: 32px; |
|
left: 0; |
|
width: 53px !important; |
|
text-align: center; |
|
z-index: 2; |
|
svg { |
|
width: 26px; |
|
height: 26px; |
|
padding: 3px; |
|
fill: black !important; |
|
background-color: var(--color-box-body); |
|
border-radius: 100px; |
|
border: 1px solid var(--color-secondary); |
|
path { |
|
fill: var(--color-primary); |
|
} |
|
} |
|
} |
|
.title, p, ul { |
|
margin-bottom: 0; |
|
} |
|
ul { |
|
margin-top: 0; |
|
border-left: 4px solid var(--color-secondary); |
|
li .mr-2 { |
|
margin-top: .1em; |
|
} |
|
} |
|
} |
|
.divider { |
|
display: none; |
|
} |
|
} |
|
|
|
/* REPOSITORY LIST */ |
|
.ui.repository.list, |
|
.ui.user.list { |
|
margin-top: 16px !important; |
|
display: grid; |
|
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); |
|
grid-gap: 16px; |
|
|
|
.item { |
|
width: 100%; |
|
max-width: calc(100vw - 40px); |
|
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(--lt-shadowDefault); |
|
} |
|
&:focus-within { |
|
// outline: 1px solid var(--color-primary) !important; |
|
border-color: 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; |
|
text-decoration: none !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; |
|
// line-height: 24px |
|
height: max-content; |
|
margin-block: auto !important; |
|
} |
|
.tags { |
|
display: flex; |
|
overflow-x: auto; |
|
scrollbar-width: none; |
|
margin-top: 8px; |
|
border-radius: 100px; |
|
&::-webkit-scrollbar { |
|
display: none; |
|
} |
|
a > div { |
|
width: max-content !important; |
|
} |
|
a:last-child { |
|
padding-right: 100px; |
|
} |
|
&::after { |
|
content: ""; |
|
min-width: 100px; |
|
margin-left: -100px; |
|
height: 100%; |
|
position: sticky; |
|
display: flex; |
|
right: 0px; |
|
background: linear-gradient(to right, transparent, var(--color-box-body)); |
|
pointer-events: none; |
|
} |
|
} |
|
} |
|
|
|
// User & Organization cards |
|
.content { |
|
padding-left: 12px; |
|
margin-bottom: -.4em; |
|
.header { |
|
a { |
|
font-weight: 600; |
|
text-transform: capitalize; |
|
} |
|
} |
|
.description { |
|
display: flex; |
|
flex-direction: column; |
|
padding-left: 22px; |
|
line-height: 1.8em; |
|
margin-top: .5em; |
|
svg { |
|
margin-bottom: -1.45em !important; |
|
margin-left: -22px !important; |
|
} |
|
} |
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
/*** DASHBOARD ***/ |
|
.dashboard { |
|
display: flex; |
|
flex-wrap: wrap; |
|
margin: auto; |
|
max-width: 100%; |
|
padding: 30px 0; |
|
width: 1400px; |
|
margin-bottom: -45px; |
|
gap: -50px; |
|
|
|
/* 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; |
|
margin-left: 10px !important; |
|
margin-bottom: 40px; |
|
background-color: var(--color-bg); |
|
& > .menu { |
|
padding-top: 0 !important; |
|
padding-right: 0 !important; |
|
} |
|
.button { |
|
white-space: nowrap; |
|
max-width: 100% !important; |
|
padding-inline: 10px !important; |
|
overflow: hidden; |
|
} |
|
& > .ui { |
|
display: flex; |
|
flex-wrap: wrap; |
|
flex-direction: row !important; |
|
padding-top: 20px; |
|
|
|
.right.right { |
|
display: contents; |
|
} |
|
& > .item, & > .right > .item { |
|
|
|
flex-direction: column; |
|
margin: 0px !important; |
|
text-align: center; |
|
flex-grow: 1; |
|
display: flex !important; |
|
align-content: center; |
|
align-items: center; |
|
padding-bottom: 20px; |
|
|
|
max-width: 100%; |
|
width: 80px !important; |
|
text-indent: -.35em !important; |
|
|
|
& > .dropdown, .button { |
|
text-indent: 0px !important; |
|
} |
|
span { |
|
text-align: center; |
|
} |
|
.label { |
|
margin: 0 !important; |
|
} |
|
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; |
|
} |
|
} |
|
|
|
} |
|
} |
|
} |
|
|
|
& > .divider { |
|
// margin: 0 -10px; |
|
} |
|
|
|
/* Main Content */ |
|
& > .ui.container { |
|
margin: 0 auto !important; |
|
display: flex; |
|
flex-wrap: wrap-reverse !important; |
|