638 lines
12 KiB
CSS
638 lines
12 KiB
CSS
/* Contributions */
|
|
.contributions {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.contribution {
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 6px;
|
|
margin: .25rem;
|
|
padding: .25rem .5rem;
|
|
padding-left: .25rem;
|
|
color: var(--color-text-primary) !important;
|
|
border: 1px solid var(--color-border-primary);
|
|
}
|
|
|
|
.contribution img {
|
|
height: 1.5rem;
|
|
width: 1.5rem;
|
|
margin-right: .5rem;
|
|
border-radius: 6px;
|
|
flex-shrink: 0;
|
|
box-shadow: 0 0 0 1px var(--color-avatar-border);
|
|
}
|
|
|
|
/** Progress bars */
|
|
.progress-bars {
|
|
display: flex;
|
|
margin: .5rem 0;
|
|
}
|
|
.progress {
|
|
height: 8px;
|
|
border-radius: 6px;
|
|
outline: 1px solid transparent;
|
|
}
|
|
.progress:not(:last-child) {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
.progress:not(:first-child) {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
.legend {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
.legend > * {
|
|
margin: 0 1rem;
|
|
}
|
|
|
|
/* Languages */
|
|
.languages .list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.languages .language {
|
|
width: 100%;
|
|
margin: 0 0 .5rem;
|
|
}
|
|
.languages .language .progress {
|
|
border-radius: 6px;
|
|
}
|
|
.languages .percent {
|
|
font-size: .8rem;
|
|
}
|
|
.languages .size {
|
|
display: flex;
|
|
font-size: .8rem;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* Topics */
|
|
.topics .list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.topic {
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 6px;
|
|
margin: .25rem;
|
|
padding: .25rem .5rem;
|
|
padding-left: .25rem;
|
|
color: var(--color-text-primary) !important;
|
|
border: 1px solid var(--color-border-primary);
|
|
}
|
|
.topic img {
|
|
height: 1.5rem;
|
|
width: 1.5rem;
|
|
margin-right: .5rem;
|
|
border-radius: 6px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Followup */
|
|
.followup {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: row;
|
|
}
|
|
.followup .followup-section {
|
|
width: 100%;
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
/* Isocalendar and calendar */
|
|
.isocalendar .svg {
|
|
margin-top: 8rem;
|
|
}
|
|
.calendar rect:hover {
|
|
cursor: pointer;
|
|
filter: brightness(4);
|
|
}
|
|
|
|
/* Activity */
|
|
.activity {
|
|
max-width: 90vw;
|
|
}
|
|
.activity > ul {
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style-type: none;
|
|
}
|
|
.activity > ul > li {
|
|
margin: 0 0 1rem;
|
|
}
|
|
.activity time {
|
|
font-size: .8rem;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
.activity svg {
|
|
fill: var(--color-text-primary);
|
|
flex-shrink: 0;
|
|
margin: .25rem 0;
|
|
margin-right: .5rem;
|
|
}
|
|
.activity .actor {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.activity .actor img {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border-radius: 50%;
|
|
margin-right: .5rem;
|
|
}
|
|
.activity .event {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
.activity .event ul {
|
|
font-size: .8rem;
|
|
}
|
|
.activity .content {
|
|
flex-grow: 1;
|
|
max-width: 95%;
|
|
}
|
|
.activity quote {
|
|
display: block;
|
|
margin: .5rem 0;
|
|
padding: 1rem;
|
|
border-radius: .25rem;
|
|
border: 1px solid var(--color-border-secondary);
|
|
color: var(--color-text-secondary);
|
|
overflow-x: auto;
|
|
}
|
|
|
|
/* Markdown */
|
|
.markdown p:first-child {
|
|
margin-top: 0;
|
|
}
|
|
.markdown p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.markdown p {
|
|
white-space: pre-wrap;
|
|
}
|
|
.markdown h1, .activity quote h2 {
|
|
border-bottom: 1px solid var(--color-markdown-frame-border);
|
|
}
|
|
.markdown blockquote {
|
|
margin: 0;
|
|
margin-bottom: 1rem;
|
|
padding: 0 .9rem;
|
|
border-left: .25rem solid var(--color-markdown-blockquote-border);
|
|
}
|
|
.markdown code {
|
|
background-color: var(--color-markdown-code-bg);
|
|
border-radius: .25rem;
|
|
padding: .125rem .25rem;
|
|
font-size: .9rem;
|
|
}
|
|
.markdown code[class^="language-"] {
|
|
display: block;
|
|
padding: 1rem;
|
|
}
|
|
.markdown ul {
|
|
margin-left: 0;
|
|
padding-left: 1rem;
|
|
font-size: 1rem !important;
|
|
}
|
|
.markdown input {
|
|
pointer-events: none
|
|
}
|
|
.markdown img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* User */
|
|
.user {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 2rem 0;
|
|
}
|
|
.user img {
|
|
border-radius: 50%;
|
|
height: 4.5rem;
|
|
width: 4.5rem;
|
|
margin: 0 1rem;
|
|
}
|
|
.user .info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.user .name {
|
|
font-size: 2rem;
|
|
}
|
|
.user .login {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
/* Sponsors */
|
|
.goal {
|
|
background-color: var(--color-markdown-code-bg);
|
|
border-radius: .25rem;
|
|
display: block;
|
|
padding: .5rem 1rem;
|
|
margin-top: 1rem;
|
|
}
|
|
.goal p {
|
|
margin: 0 0 .5rem;
|
|
}
|
|
.goal .progress-wrap {
|
|
background-color: var(--color-markdown-table-tr-border);
|
|
height: 8px;
|
|
border-radius: 6px;
|
|
}
|
|
.goal .objective {
|
|
text-align: right;
|
|
font-style: italic;
|
|
font-size: .8rem;
|
|
}
|
|
.goal .sponsors-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
img.avatar {
|
|
height: 2rem;
|
|
width: 2rem;
|
|
margin-right: .5rem;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
box-shadow: 0 0 0 1px var(--color-avatar-border);
|
|
}
|
|
|
|
/* Ranked achievements */
|
|
.rankeds {
|
|
margin-top: 2em;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.ranked {
|
|
flex: 1 1 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
.ranked .text {
|
|
min-height: 2rem;
|
|
}
|
|
.ranked .icon {
|
|
transform: scale(1.75);
|
|
}
|
|
.ranked .info {
|
|
margin-top: 1rem;
|
|
text-align: center;
|
|
}
|
|
.ranked .title {
|
|
font-size: 1.5rem;
|
|
margin-top: .5rem;
|
|
}
|
|
.user-rank {
|
|
font-size: 1.5rem;
|
|
}
|
|
.total-rank {
|
|
opacity: .75;
|
|
}
|
|
|
|
/* Achievements */
|
|
.achievements {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
.achievement {
|
|
display: flex;
|
|
margin: .5rem;
|
|
max-width: 18rem;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Reactions */
|
|
.reactions {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.reactions > div {
|
|
margin: 1.5rem;
|
|
}
|
|
|
|
.reactions .text {
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Repository */
|
|
.repositories {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
.repository {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
margin: .5rem;
|
|
max-width: 90vw;
|
|
border-radius: .25rem;
|
|
border: 1px solid var(--color-border-primary);
|
|
padding: .5rem .5rem 0;
|
|
}
|
|
|
|
.repository .field {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: .5rem;
|
|
}
|
|
.repository .field.infos {
|
|
flex-wrap: wrap;
|
|
}
|
|
.repository svg {
|
|
fill: currentColor;
|
|
}
|
|
.repository .infos, .repository .description {
|
|
font-size: .8rem;
|
|
}
|
|
|
|
.repository .name {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-left: .25rem;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.repository .name span:first-child {
|
|
color: var(--color-text-link);
|
|
}
|
|
|
|
.repository .name span:last-child {
|
|
color: var(--color-text-secondary);
|
|
font-size: .7rem;
|
|
}
|
|
|
|
.repository .infos > div {
|
|
color: var(--color-text-secondary);
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
.repository .infos svg {
|
|
margin: 0;
|
|
margin-right: .25rem;
|
|
}
|
|
|
|
/* Charts */
|
|
.chart-bars {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
width: 100%;
|
|
height: 12rem;
|
|
overflow: auto;
|
|
}
|
|
.chart-bars .entry {
|
|
flex: 1 1 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.chart-bars .entry .value {
|
|
color: var(--color-text-secondary);
|
|
font-size: .8rem;
|
|
}
|
|
.chart-bars .entry .label {
|
|
margin: 0 .25rem;
|
|
}
|
|
.chart-bars .bar {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Code highlighting */
|
|
.token.comment {
|
|
color: #669900;
|
|
}
|
|
.token.punctuation {
|
|
color: #8a93a8;
|
|
}
|
|
.token.namespace, .token.constant, .token.symbol, .token.keyword {
|
|
color: #b44418;
|
|
}
|
|
.token.regex, .token.string, .token.char, .token.number, .token.boolean {
|
|
color: #2777AA;
|
|
}
|
|
.token.property, .token.tag {
|
|
color: #48428a;
|
|
}
|
|
.token.builtin, .token.operator {
|
|
color: #106cbc;
|
|
}
|
|
.token.trimmed {
|
|
font-style: italic;
|
|
color: #77777760;
|
|
}
|
|
.token.coord {
|
|
color: #D2A8FF;
|
|
font-weight: bold;
|
|
}
|
|
.token.inserted:not(.prefix) {
|
|
color: #AAD0B4DC;
|
|
background-color: #336543DC;
|
|
}
|
|
.token.deleted:not(.prefix) {
|
|
color: #EED2D0DC;
|
|
background-color: #9A5256DC;
|
|
}
|
|
|
|
/* Icon gauges */
|
|
.gauge {
|
|
stroke-linecap: round;
|
|
fill: none;
|
|
color: #58A6FF;
|
|
}
|
|
.gauge text {
|
|
fill: #ffffff;
|
|
}
|
|
.gauge-base, .gauge-arc {
|
|
stroke: currentColor;
|
|
stroke-width: 6;
|
|
}
|
|
.gauge-base {
|
|
stroke-opacity: .2;
|
|
}
|
|
.gauge-arc {
|
|
fill: none;
|
|
stroke-dashoffset: 0;
|
|
animation-delay: 250ms;
|
|
animation: animation-gauge 1s ease forwards
|
|
}
|
|
@keyframes animation-gauge {
|
|
from {
|
|
stroke-dasharray: 0 329;
|
|
}
|
|
}
|
|
|
|
/* General and colors */
|
|
.icon {
|
|
margin: 0 .25rem;
|
|
width: 44px;
|
|
height: 44px;
|
|
}
|
|
.text {
|
|
font-size: 12px;
|
|
}
|
|
.info {
|
|
font-size: 14px;
|
|
color: #58A6FF;
|
|
}
|
|
.x .info {
|
|
color: #666666;
|
|
}
|
|
.x .gauge {
|
|
color: #B0B0B0;
|
|
}
|
|
.b .info {
|
|
color: #9D8FFF;
|
|
}
|
|
.b .gauge {
|
|
color: #9E91FF;
|
|
}
|
|
.a .info {
|
|
color: #D79533;
|
|
}
|
|
.a .gauge {
|
|
color: #E7BD69;
|
|
}
|
|
.s .info {
|
|
color: #EB355E;
|
|
}
|
|
.s .gauge {
|
|
color: #EB355E;
|
|
}
|
|
.secret .info {
|
|
color: #FF76CD;
|
|
}
|
|
.secret .gauge {
|
|
color: #FF79D1;
|
|
}
|
|
|
|
/* Header */
|
|
h2 {
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: normal;
|
|
}
|
|
h2 svg {
|
|
margin-right: .25rem;
|
|
fill: currentColor;
|
|
height: 1.25rem;
|
|
width: 1.25rem;
|
|
}
|
|
|
|
/* Inputs */
|
|
label {
|
|
cursor: pointer;
|
|
}
|
|
label:hover {
|
|
background-color: var(--color-input-contrast-bg);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
input[type=text], input[type=number], select {
|
|
background-color: var(--color-input-contrast-bg);
|
|
padding: .4rem .8rem;
|
|
color: var(--color-text-primary);
|
|
background-color: var(--color-input-bg);
|
|
border: 1px solid var(--color-input-border);
|
|
border-radius: 6px;
|
|
outline: none;
|
|
box-shadow: var(--color-shadow-inset);
|
|
}
|
|
|
|
input[type=text]:focus, input[type=number]:focus, select:focus {
|
|
background-color: var(--color-input-bg);
|
|
border-color: var(--color-state-focus-border);
|
|
outline: none;
|
|
box-shadow: var(--color-state-focus-shadow);
|
|
}
|
|
|
|
button {
|
|
color: var(--color-btn-primary-text);
|
|
background-color: var(--color-btn-primary-bg);
|
|
border-color: var(--color-btn-primary-border);
|
|
box-shadow: var(--color-btn-primary-shadow),var(--color-btn-primary-inset-shadow);
|
|
padding: .4rem .8rem;
|
|
border-radius: 6px;
|
|
font-weight: 500;
|
|
margin: .5rem 0;
|
|
cursor: pointer;
|
|
transition-duration: all .12s ease-out;
|
|
}
|
|
|
|
button[disabled] {
|
|
color: var(--color-btn-primary-disabled-text);
|
|
background-color: var(--color-btn-primary-disabled-bg);
|
|
border-color: var(--color-btn-primary-disabled-border);
|
|
}
|
|
|
|
button:focus {
|
|
outline: none;
|
|
}
|
|
|
|
/* */
|
|
small.footnote {
|
|
font-style: italic;
|
|
opacity: .8;
|
|
display: block;
|
|
text-align: left;
|
|
}
|
|
|
|
/* Media screen */
|
|
@media only screen and (min-width: 740px) {
|
|
.rankeds {
|
|
flex-direction: row;
|
|
margin: 4rem 0 2rem;
|
|
}
|
|
.ranked {
|
|
margin-bottom: 0;
|
|
}
|
|
.languages .language {
|
|
width: 25%;
|
|
}
|
|
.followup .followup-section {
|
|
width: calc(50% - 1rem);
|
|
margin-right: 1rem;
|
|
}
|
|
.search {
|
|
width: 520px;
|
|
}
|
|
.repository {
|
|
max-width: 416px;
|
|
}
|
|
}
|
|
|
|
/* Loading bar */
|
|
.loading-bar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
z-index: 9999;
|
|
}
|
|
.loading-bar > div {
|
|
background-color: #58A6FF;
|
|
height: 100%;
|
|
transition: all .12s ease-out;
|
|
} |