This commit is contained in:
Free 2021-08-18 19:43:34 +02:00
parent f61c3cdf0b
commit e57e1e94a7

View file

@ -1,7 +1,7 @@
/* Update 1.0.3
- Fixed table stretching due to the grid
- Better keyboard accessability
- Fixed Codeberg dropdown
/* Update 1.0.4
- Combined feed list to make it more compact, while still looking nice.
- Styled User / Organization lists
- Added minor blur to tabs in User page
*/
:root {
--base-border-radius: 6px;
@ -970,10 +970,9 @@ html {
.page-content.repository:not(.milestones).file > .ui.container .repository-summary .language-stats,
.page-content.repository:not(.milestones).commits > .ui.container .repository-summary .language-stats,
.page-content.repository:not(.milestones).branches > .ui.container .repository-summary .language-stats {
border-radius: 100px !important;
border-radius: var(--base-border-radius) !important;
overflow: hidden !important;
pointer-events: none;
top: 0;
}
.page-content.repository:not(.milestones).file > .ui.container .repository-summary .horizontal.list:not(.two),
.page-content.repository:not(.milestones).commits > .ui.container .repository-summary .horizontal.list:not(.two),
@ -1126,7 +1125,7 @@ html {
}
/*** USER PROFILES & EXPLORE PAGES ***/
.explore,
.user:not(.list),
.page-content.user,
.profile {
display: flex;
flex-wrap: wrap;
@ -1134,20 +1133,20 @@ html {
/* Responsive explore page */
}
.explore.explore > .ui.container,
.user:not(.list).explore > .ui.container,
.page-content.user.explore > .ui.container,
.profile.explore > .ui.container {
max-width: calc(100vw - 40px);
width: 3000px !important;
padding: 0 calc(10vw - 80px);
}
.explore.organization > .ui.container:first-child,
.user:not(.list).organization > .ui.container:first-child,
.page-content.user.organization > .ui.container:first-child,
.profile.organization > .ui.container:first-child {
padding-top: 30px;
padding-bottom: 30px;
}
.explore.organization > .ui.container:first-child #org-info,
.user:not(.list).organization > .ui.container:first-child #org-info,
.page-content.user.organization > .ui.container:first-child #org-info,
.profile.organization > .ui.container:first-child #org-info {
display: flex;
flex-direction: column;
@ -1155,60 +1154,60 @@ html {
justify-content: center;
}
.explore.organization > .ui.container:first-child #org-info > p,
.user:not(.list).organization > .ui.container:first-child #org-info > p,
.page-content.user.organization > .ui.container:first-child #org-info > p,
.profile.organization > .ui.container:first-child #org-info > p {
margin: 0 !important;
margin-bottom: 0.2rem !important;
}
.explore.organization > .ui.container:first-child #org-info .item,
.user:not(.list).organization > .ui.container:first-child #org-info .item,
.page-content.user.organization > .ui.container:first-child #org-info .item,
.profile.organization > .ui.container:first-child #org-info .item {
display: flex;
align-items: center;
}
.explore.organization > .ui.container:first-child #org-info .item a,
.user:not(.list).organization > .ui.container:first-child #org-info .item a,
.page-content.user.organization > .ui.container:first-child #org-info .item a,
.profile.organization > .ui.container:first-child #org-info .item a {
margin-left: 4px;
}
.explore.organization .ui.eleven.wide.column::before,
.user:not(.list).organization .ui.eleven.wide.column::before,
.page-content.user.organization .ui.eleven.wide.column::before,
.profile.organization .ui.eleven.wide.column::before {
content: unset !important;
}
.explore > .ui.container,
.user:not(.list) > .ui.container,
.page-content.user > .ui.container,
.profile > .ui.container {
max-width: 1350px;
width: 100% !important;
padding: 0 20px;
}
.explore > .ui.container[class="ui container"] .five.wide.column,
.user:not(.list) > .ui.container[class="ui container"] .five.wide.column,
.page-content.user > .ui.container[class="ui container"] .five.wide.column,
.profile > .ui.container[class="ui container"] .five.wide.column {
width: 320px !important;
flex: 1 0 320px !important;
position: sticky;
bottom: 0;
bottom: 10px;
align-self: flex-end;
min-height: 100vh;
}
.explore > .ui.container[class="ui container"] .five.wide.column .card,
.user:not(.list) > .ui.container[class="ui container"] .five.wide.column .card,
.page-content.user > .ui.container[class="ui container"] .five.wide.column .card,
.profile > .ui.container[class="ui container"] .five.wide.column .card {
width: 100%;
border: 0;
background: none !important;
}
.explore > .ui.container[class="ui container"] .five.wide.column .card #profile-avatar,
.user:not(.list) > .ui.container[class="ui container"] .five.wide.column .card #profile-avatar,
.page-content.user > .ui.container[class="ui container"] .five.wide.column .card #profile-avatar,
.profile > .ui.container[class="ui container"] .five.wide.column .card #profile-avatar {
padding-left: 0.7rem;
padding-right: 2rem !important;
padding-top: 0.5rem;
}
.explore > .ui.container[class="ui container"] .five.wide.column .card #profile-avatar .avatar,
.user:not(.list) > .ui.container[class="ui container"] .five.wide.column .card #profile-avatar .avatar,
.page-content.user > .ui.container[class="ui container"] .five.wide.column .card #profile-avatar .avatar,
.profile > .ui.container[class="ui container"] .five.wide.column .card #profile-avatar .avatar {
border-radius: calc(var(--base-border-radius) * 2) !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
@ -1218,13 +1217,13 @@ html {
max-height: 80vh;
}
.explore > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name,
.user:not(.list) > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name,
.page-content.user > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name,
.profile > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name {
font-size: 2rem;
display: contents;
}
.explore > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name span,
.user:not(.list) > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name span,
.page-content.user > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name span,
.profile > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name span {
text-align: left;
font-weight: 600;
@ -1232,12 +1231,12 @@ html {
margin: 1.5rem 0;
}
.explore > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name span.header,
.user:not(.list) > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name span.header,
.page-content.user > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name span.header,
.profile > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name span.header {
font-weight: 500;
letter-spacing: 0.1em;
height: 44px;
line-height: 50px;
height: 39px;
line-height: 40px;
margin-bottom: -1.2em;
margin-top: 0;
background: var(--color-body);
@ -1247,17 +1246,17 @@ html {
box-shadow: 0 -5px 5px var(--color-body);
}
.explore > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name span.username,
.user:not(.list) > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name span.username,
.page-content.user > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name span.username,
.profile > .ui.container[class="ui container"] .five.wide.column .card .profile-avatar-name span.username {
z-index: 2;
}
.explore > .ui.container[class="ui container"] .five.wide.column .card .extra,
.user:not(.list) > .ui.container[class="ui container"] .five.wide.column .card .extra,
.page-content.user > .ui.container[class="ui container"] .five.wide.column .card .extra,
.profile > .ui.container[class="ui container"] .five.wide.column .card .extra {
border: 0 !important;
}
.explore > .ui.container[class="ui container"] .five.wide.column .card .extra li,
.user:not(.list) > .ui.container[class="ui container"] .five.wide.column .card .extra li,
.page-content.user > .ui.container[class="ui container"] .five.wide.column .card .extra li,
.profile > .ui.container[class="ui container"] .five.wide.column .card .extra li {
border: 0 !important;
padding: 0.3rem 0.7rem;
@ -1265,91 +1264,108 @@ html {
align-items: center;
}
.explore > .ui.container[class="ui container"] .five.wide.column .card .extra li svg,
.user:not(.list) > .ui.container[class="ui container"] .five.wide.column .card .extra li svg,
.page-content.user > .ui.container[class="ui container"] .five.wide.column .card .extra li svg,
.profile > .ui.container[class="ui container"] .five.wide.column .card .extra li svg {
margin-right: 8px;
}
.explore > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs,
.user:not(.list) > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs,
.page-content.user > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs,
.profile > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs {
justify-content: center;
margin-top: 1rem !important;
}
.explore > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs li,
.user:not(.list) > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs li,
.page-content.user > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs li,
.profile > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs li {
flex-grow: 1 !important;
}
.explore > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs li a,
.user:not(.list) > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs li a,
.page-content.user > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs li a,
.profile > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs li a {
width: 100%;
}
.explore > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs li a img,
.user:not(.list) > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs li a img,
.page-content.user > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs li a img,
.profile > .ui.container[class="ui container"] .five.wide.column .card .extra li .user-orgs li a img {
width: 35px;
height: 35px;
}
.explore > .ui.container[class="ui container"] .five.wide.column .card .extra li .render-content p,
.user:not(.list) > .ui.container[class="ui container"] .five.wide.column .card .extra li .render-content p,
.page-content.user > .ui.container[class="ui container"] .five.wide.column .card .extra li .render-content p,
.profile > .ui.container[class="ui container"] .five.wide.column .card .extra li .render-content p {
padding: 0.6rem 0;
padding-bottom: 0.7rem !important;
word-break: normal !important;
}
.explore > .ui.container[class="ui container"] .five.wide.column .card .extra .follow form,
.user:not(.list) > .ui.container[class="ui container"] .five.wide.column .card .extra .follow form,
.page-content.user > .ui.container[class="ui container"] .five.wide.column .card .extra .follow form,
.profile > .ui.container[class="ui container"] .five.wide.column .card .extra .follow form {
margin-top: 1rem;
width: 100%;
}
.explore > .ui.container .eleven.wide.column,
.user:not(.list) > .ui.container .eleven.wide.column,
.page-content.user > .ui.container .eleven.wide.column,
.profile > .ui.container .eleven.wide.column {
flex-grow: 100;
width: 500px !important;
max-width: 100%;
}
.explore > .ui.container .eleven.wide.column .ui.secondary.stackable.pointing.tight.menu,
.user:not(.list) > .ui.container .eleven.wide.column .ui.secondary.stackable.pointing.tight.menu,
.page-content.user > .ui.container .eleven.wide.column .ui.secondary.stackable.pointing.tight.menu,
.profile > .ui.container .eleven.wide.column .ui.secondary.stackable.pointing.tight.menu {
margin: 0 -2px;
margin-bottom: 1.5rem;
position: sticky;
top: 0px !important;
margin-top: -45px;
height: 45px;
margin-top: -40px;
height: 40px;
z-index: 9999;
background-color: var(--color-body);
}
@supports (backdrop-filter: blur(10px)) {
.explore > .ui.container .eleven.wide.column .ui.secondary.stackable.pointing.tight.menu,
.page-content.user > .ui.container .eleven.wide.column .ui.secondary.stackable.pointing.tight.menu,
.profile > .ui.container .eleven.wide.column .ui.secondary.stackable.pointing.tight.menu {
backdrop-filter: blur(10px);
background-color: transparent;
}
.explore > .ui.container .eleven.wide.column .ui.secondary.stackable.pointing.tight.menu::before,
.page-content.user > .ui.container .eleven.wide.column .ui.secondary.stackable.pointing.tight.menu::before,
.profile > .ui.container .eleven.wide.column .ui.secondary.stackable.pointing.tight.menu::before {
content: "";
position: absolute;
inset: 0;
background-color: var(--color-body);
opacity: 0.8;
}
}
.explore > .ui.container .eleven.wide.column::before,
.user:not(.list) > .ui.container .eleven.wide.column::before,
.page-content.user > .ui.container .eleven.wide.column::before,
.profile > .ui.container .eleven.wide.column::before {
content: "";
position: sticky;
margin: 0 !important;
margin-left: -100vw !important;
margin-top: 45px !important;
margin-top: 40px !important;
width: 200vw;
display: block;
border-bottom: 1px solid var(--color-secondary);
top: 44px;
top: 39px;
z-index: -1;
}
.explore > .ui.container .item .meta,
.user:not(.list) > .ui.container .item .meta,
.page-content.user > .ui.container .item .meta,
.profile > .ui.container .item .meta {
display: flex;
align-items: center;
}
.explore > .ui.container .item .meta svg,
.user:not(.list) > .ui.container .item .meta svg,
.page-content.user > .ui.container .item .meta svg,
.profile > .ui.container .item .meta svg {
margin-right: 4px;
}
.explore > .ui.container .item .meta a,
.user:not(.list) > .ui.container .item .meta a,
.page-content.user > .ui.container .item .meta a,
.profile > .ui.container .item .meta a {
max-width: calc(100% - 20px);
white-space: nowrap;
@ -1360,12 +1376,39 @@ html {
.ui.container > .news,
.feeds > .news {
border: 1px solid var(--color-secondary) !important;
border-bottom: none !important;
background: var(--color-box-body);
margin-bottom: 1rem;
border-radius: var(--base-border-radius);
border-radius: var(--base-border-radius) var(--base-border-radius) 0 0;
padding: 10px 12px !important;
position: relative;
}
.ui.container > .news + .news,
.feeds > .news + .news {
border-radius: 0 !important;
}
.ui.container > .news:last-child,
.feeds > .news:last-child {
border-radius: 0 0 var(--base-border-radius) var(--base-border-radius) !important;
border-bottom: 1px solid var(--color-secondary) !important;
}
.ui.container > .news::before,
.feeds > .news::before {
content: "";
position: absolute;
inset: 0;
background: var(--color-primary);
opacity: 0;
}
.ui.container > .news:hover::before,
.feeds > .news:hover::before,
.ui.container > .news:focus-within::before,
.feeds > .news:focus-within::before {
opacity: 0.05;
}
.ui.container > .news .ui.left,
.feeds > .news .ui.left {
width: 40px;
}
.ui.container > .news .ui.left img,
.feeds > .news .ui.left img {
margin: 0 !important;
@ -1377,6 +1420,7 @@ html {
.feeds > .news .ui.grid {
margin: 0 !important;
padding: 0 !important;
padding-top: 1px !important;
}
.ui.container > .news .ui.grid > .column,
.feeds > .news .ui.grid > .column {
@ -1438,13 +1482,15 @@ html {
display: none;
}
/* REPOSITORY LIST */
.ui.repository.list {
.ui.repository.list,
.ui.user.list {
margin-top: 16px !important;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
grid-gap: 16px;
}
.ui.repository.list .item {
.ui.repository.list .item,
.ui.user.list .item {
width: 400px;
width: 100%;
min-height: unset !important;
@ -1459,35 +1505,44 @@ html {
align-content: flex-start;
}
.ui.repository.list .item:hover,
.ui.repository.list .item:focus-within {
.ui.user.list .item:hover,
.ui.repository.list .item:focus-within,
.ui.user.list .item:focus-within {
box-shadow: var(--lm-shadow);
}
.ui.repository.list .item:focus-within {
.ui.repository.list .item:focus-within,
.ui.user.list .item:focus-within {
outline: 1px solid var(--color-primary) !important;
}
.ui.repository.list .item .header {
.ui.repository.list .item .header,
.ui.user.list .item .header {
display: contents !important;
}
.ui.repository.list .item .header .repo-title {
.ui.repository.list .item .header .repo-title,
.ui.user.list .item .header .repo-title {
display: contents;
position: relative;
font-size: 1.2rem;
line-height: 1.4em;
}
.ui.repository.list .item .header .repo-title a {
.ui.repository.list .item .header .repo-title a,
.ui.user.list .item .header .repo-title a {
white-space: normal !important;
word-break: normal !important;
}
.ui.repository.list .item .header .repo-title > * {
.ui.repository.list .item .header .repo-title > *,
.ui.user.list .item .header .repo-title > * {
grid-column: 2/span 4;
}
.ui.repository.list .item .header .repo-title .labels {
.ui.repository.list .item .header .repo-title .labels,
.ui.user.list .item .header .repo-title .labels {
grid-column: 3;
grid-row: 2;
margin-left: 0 !important;
white-space: nowrap;
}
.ui.repository.list .item .header .repo-title a::before {
.ui.repository.list .item .header .repo-title a::before,
.ui.user.list .item .header .repo-title a::before {
content: "";
position: absolute;
top: 0;
@ -1495,7 +1550,8 @@ html {
height: 80px;
width: 100%;
}
.ui.repository.list .item .header .avatar {
.ui.repository.list .item .header .avatar,
.ui.user.list .item .header .avatar {
height: 50px !important;
width: 50px !important;
margin-right: 12px !important;
@ -1504,25 +1560,31 @@ html {
grid-row: 1/span 2;
border-radius: 12px;
}
.ui.repository.list .item .header .metas {
.ui.repository.list .item .header .metas,
.ui.user.list .item .header .metas {
grid-column: 2;
grid-row: 2;
width: 100%;
}
.ui.repository.list .item .description {
.ui.repository.list .item .description,
.ui.user.list .item .description {
display: contents;
}
.ui.repository.list .item .description > p:first-child {
.ui.repository.list .item .description > p:first-child,
.ui.user.list .item .description > p:first-child {
padding-top: 4px;
margin-bottom: 0px;
}
.ui.repository.list .item .description > * {
.ui.repository.list .item .description > *,
.ui.user.list .item .description > * {
grid-column: 1/span 4;
}
.ui.repository.list .item .description > *:nth-last-child(2) {
.ui.repository.list .item .description > *:nth-last-child(2),
.ui.user.list .item .description > *:nth-last-child(2) {
margin-bottom: 0 !important;
}
.ui.repository.list .item .description .time {
.ui.repository.list .item .description .time,
.ui.user.list .item .description .time {
grid-row: 2;
grid-column: 4;
padding-top: 7px;
@ -1534,16 +1596,19 @@ html {
z-index: 3;
direction: rtl;
}
.ui.repository.list .item .description .tags {
.ui.repository.list .item .description .tags,
.ui.user.list .item .description .tags {
display: flex;
overflow-x: auto;
scrollbar-width: none;
margin-top: 8px;
}
.ui.repository.list .item .description .tags a > div {
.ui.repository.list .item .description .tags a > div,
.ui.user.list .item .description .tags a > div {
width: max-content !important;
}
.ui.repository.list .item .description .tags::after {
.ui.repository.list .item .description .tags::after,
.ui.user.list .item .description .tags::after {
content: "";
min-width: 100px;
margin-left: 100px;
@ -1553,13 +1618,35 @@ html {
background: linear-gradient(to right, transparent, var(--color-box-body));
pointer-events: none;
}
.ui.repository.list .item .content,
.ui.user.list .item .content {
padding-left: 12px;
margin-bottom: -0.4em;
}
.ui.repository.list .item .content .header a,
.ui.user.list .item .content .header a {
font-weight: 600;
text-transform: capitalize;
}
.ui.repository.list .item .content .description,
.ui.user.list .item .content .description {
display: flex;
flex-direction: column;
padding-left: 22px;
line-height: 1.8em;
margin-top: 0.5em;
}
.ui.repository.list .item .content .description svg,
.ui.user.list .item .content .description svg {
margin-bottom: -1.45em !important;
margin-left: -22px !important;
}
/*** DASHBOARD ***/
.dashboard {
display: flex;
flex-wrap: wrap;
margin: auto;
max-width: 100%;
padding: 30px 10px;
padding: 30px 0;
width: 1300px;
margin-bottom: -45px;
@ -1597,7 +1684,7 @@ html {
.dashboard .dashboard-navbar > .ui > .item,
.dashboard .dashboard-navbar > .ui > .right > .item {
flex-direction: column;
margin: 0 20px !important;
margin: 0px !important;
text-align: center;
flex-grow: 1;
display: flex !important;