Files
metrics/source/templates/classic/style.css
2021-03-21 12:14:05 +01:00

988 lines
18 KiB
CSS

/* SVG global context */
svg {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
font-size: 14px;
color: #777777;
}
/* Headers */
h1, h2, h3 {
margin: 8px 0 2px;
padding: 0;
color: #0366d6;
font-weight: normal;
}
h1 svg, h2 svg, h3 svg {
fill: currentColor;
}
h1 {
font-size: 20px;
font-weight: bold;
}
h2 {
font-size: 16px;
}
h3 {
font-size: 14px;
}
/* Fields */
section > .field {
margin-left: 5px;
margin-right: 5px;
}
.field {
display: flex;
align-items: center;
margin-bottom: 2px;
white-space: nowrap;
}
.field svg {
margin: 0 8px;
fill: #959da5;
flex-shrink: 0;
}
.field.error {
color: #cb2431;
}
.field.error svg {
fill: #cb2431;
}
/* Displays */
.row {
display: flex;
}
.row section {
flex: 1 1 0;
}
.column {
display: flex;
flex-direction: column;
align-items: center;
}
.center {
justify-content: center;
}
.horizontal {
justify-content: space-around;
}
.horizontal-wrap {
flex-wrap: wrap;
}
.horizontal .field {
flex: 1 1 0;
}
.no-wrap {
white-space: nowrap;
}
.fill-width {
width: 100%;
}
.margin-bottom {
margin-bottom: 16px;
}
/* User avatar */
.avatar {
border-radius: 50%;
margin: 0 6px;
}
.avatar.organization {
border-radius: 15%;
}
/* Commit calendar */
.calendar.field {
margin: 4px 0;
margin-left: 7px;
}
.calendar .day {
outline: 1px solid rgba(27,31,35,.04);
outline-offset: -1px;
}
/* Progress bars */
svg.bar {
margin: 4px 0;
}
/* Language */
.field.language {
margin: 0 8px;
flex-grow: 0;
}
.field.language.details {
display: flex;
justify-content: space-between;
}
.field.language.details small {
display: flex;
justify-content: space-between;
color: #666666;
text-align: right;
}
.field.language.details > *, .field.language.details small > * {
flex: 1 1 0;
}
/* Labels */
.label {
background-color: #F1F8FF;
color: #0366D6;
padding: 0 10px;
font-weight: 500;
line-height: 22px;
margin: 2px 5px;
white-space: nowrap;
border-radius: 32px;
font-size: 12px;
}
.label:hover {
background-color: #DDEEFF;
cursor: pointer;
}
/* Habits */
.habits {
margin: 0;
list-style-type: none;
padding-left: 37px;
}
/* Footer */
footer {
margin-top: 8px;
font-size: 10px;
font-style: italic;
color: #666666;
text-align: right;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 0 4px;
}
/* Speed test categories */
.categories {
display: flex;
align-items: center;
justify-content: space-around;
margin-top: 4px;
}
.categorie {
display: flex;
flex-direction: column;
align-items: center;
flex: 1 1 0;
}
/* Gauges */
.gauge {
stroke-linecap: round;
fill: none;
}
.gauge.high {
color: #18b663;
}
.gauge.average {
color: #fb8c00;
}
.gauge.low {
color: #e53935;
}
.gauge.info {
color: #58A6FF;
}
.gauge-base, .gauge-arc {
stroke: currentColor;
stroke-width: 10;
}
.gauge-base {
stroke-opacity: .2;
}
.gauge-arc {
fill: none;
stroke-dashoffset: 0;
animation-delay: 250ms;
animation: animation-gauge 1s ease forwards
}
.gauge text {
fill: currentColor;
font-size: 40px;
font-family: monospace;
text-anchor: middle;
font-weight: 600;
}
.gauge .title {
font-size: 18px;
color: #777777;
}
@keyframes animation-gauge {
from {
stroke-dasharray: 0 329;
}
}
.audits {
margin-top: 8px;
}
.audit.text {
min-width: 42px;
}
.audit svg {
margin: 0;
}
.audit.high {
fill: #18b663;
}
.audit.average {
fill: #fb8c00;
}
.audit.low {
fill: #e53935;
}
.screenshot {
width: 452px;
height: 315px;
margin: 8px 14px 4px;
border-radius: 5px;
}
/* Music plugin */
.tracklist {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-left: 28px;
margin-top: 4px;
width: 100%;
}
.track {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 4px;
}
.track img {
margin: 0 10px;
border-radius: 7px;
}
.track .name {
font-size: 14px;
line-height: 14px;
font-weight: 600;
}
.track .artist, .track .played-at {
font-size: 12px;
color: #666666;
}
/* Posts plugin */
.post {
align-items: flex-start;
}
.post .infos {
display: flex;
margin-bottom: 4px;
}
.post .infos .left {
flex-shrink: 0;
font-size: 12px;
color: #666666;
width: 72px;
padding-top: 1px;
text-align: center;
}
.post .infos .cover {
width: 100%;
height: 56px;
background-position: center;
background-size: cover;
border-radius: 6px;
overflow: hidden;
}
.post .infos .right {
width: 376px;
padding-left: 4px;
}
.post .infos .title, .post .infos .description {
font-size: 14px;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
max-height: 38px;
/* May not work in all browsers */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.post .infos .description {
margin-top: 3px;
font-size: 12px;
max-height: 48px;
color: #666666;
-webkit-line-clamp: 3;
}
/* Topics */
.topics {
display: flex;
flex-wrap: wrap;
}
.topics img {
border-radius: 5px;
margin: 4px;
}
/* Tweets */
.tweet {
font-size: 13px;
margin-top: 6px;
margin-bottom: 16px;
margin-left: 18px;
border-left: 3px solid #777777B2;
padding-left: 6px;
}
.tweet .mention, .tweet .link, .tweet .hashtag {
color: #0366d6;
}
.tweet .date {
margin: 6px 0;
font-size: 12px;
color: #666666;
}
.tweet .attachments {
display: flex;
width: 450px;
margin-top: 8px;
}
.tweet .attachments > div {
flex: 1 1 0;
width: 0;
border-radius: 6px;
background-position: center;
background-size: cover;
height: 200px;
margin: 2px;
box-shadow: 0px 0px 1px #777777A0;
overflow: hidden;
display: flex;
align-items: flex-end;
}
.tweet .attachments .infos {
background-color: #000000D0;
color: white;
display: flex;
flex-direction: column;
width: 100%;
padding-bottom: 4px;
}
.tweet .attachments .infos > div {
margin: 4px 8px 0;
}
.tweet .attachments .infos .title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tweet .attachments .infos .description {
font-size: 11px;
color: #666666;
}
/* Charts and graphs */
.chart {
padding: 0 8px;
}
.chart-bars {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 100%;
margin: 8px 0 4px;
flex-grow: 1;
min-height: 70px;
}
.chart-bars .entry {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
font-size: 10px;
color: #666666;
}
.chart-bars .entry .value {
font-size: 7px;
}
.chart-bars .entry .empty {
width: 100%;
text-align: center;
}
.chart-bars .bar {
width: 7px;
background-color: var(--color-calendar-graph-day-bg);
border: 1px solid var(--color-calendar-graph-day-border);
border-radius: 5px;
}
.chart-bars.horizontal {
flex-direction: column;
height: 100%;
}
.chart-bars.horizontal .entry {
align-items: center;
flex-direction: row;
width: 100%;
min-height: 1rem;
}
.chart-bars.horizontal .entry .name {
flex-shrink: 0;
text-align: right;
width: 34%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chart-bars .entry .bottom {
margin-bottom: -1rem;
line-height: 1rem;
}
.chart-bars.horizontal .bar {
height: 7px;
width: auto;
margin: 0 6px;
}
/* Repository */
.repository {
display: flex;
flex-direction: column;
width: 100%;
margin: 6px 0;
}
.repository .name {
display: flex;
align-items: center;
justify-content: space-between;
width: 440px;
}
.repository .name span:first-child {
color: #58a6ff;
}
.repository .name span:last-child {
color: #666666;
font-size: 13px;
}
.repository .description {
display: block;
width: 440px;
white-space: normal;
}
.repository .description, .repository .infos {
color: #666666;
margin-left: 38px;
font-size: 13px;
}
.repository .infos > div {
display: flex;
align-items: center;
margin-right: 16px;
}
.repository .infos svg {
margin: 0;
margin-right: 4px;
}
/* Activity */
.activity {
margin-bottom: 12px;
}
.activity .field {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
max-width: 450px;
white-space: nowrap;
margin-bottom: 0;
}
.activity .repo, .activity .issue, .activity .commit .sha {
color: #58a6ff;
margin: 0 4px;
}
.activity .issue {
flex-grow: 1;
width: 0%;
text-overflow: ellipsis;
overflow: hidden;
}
.activity .code {
background-color: #7777771F;
padding: 1px 5px;
font-size: 80%;
border-radius: 6px;
color: #777777;
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
margin: 0 4px -3px;
}
.activity .bold, .activity .user {
font-weight: 600;
margin: 0 4px;
}
.activity .details, .activity .timestamp {
padding-left: 42px;
display: flex;
flex-direction: column;
font-size: 13px;
color: #666666;
}
.activity .timestamp {
font-size: 10px;
margin-top: 4px;
}
.activity .details > div {
display: flex;
align-items: center;
}
.activity .commit .sha {
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
}
.activity .commit .message {
overflow: hidden;
text-overflow: ellipsis;
width: 360px;
white-space: nowrap;
}
.activity .details .comment {
overflow: hidden;
text-overflow: ellipsis;
display: block;
width: 420px;
margin-top: 6px;
border-left: 3px solid #777777B2;
padding-left: 6px;
max-height: 38px;
/* May not work in all browsers */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* People */
.people {
padding: 0 10px;
}
.people .avatar {
margin: 0 2px;
}
/* Projects */
.project .description {
overflow: hidden;
text-overflow: ellipsis;
display: block;
width: 420px;
margin-left: 37px;
max-height: 38px;
font-size: 12px;
white-space: normal;
/* May not work in all browsers */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* Anilist */
.anilist {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-left: 28px;
margin-top: 4px;
}
.anilist .media {
display: flex;
margin-bottom: 4px;
width: 450px;
}
.anilist .media img {
margin: 0 10px;
border-radius: 7px;
}
.anilist .media .about {
flex-grow: 1;
}
.anilist .media .name {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
line-height: 14px;
color: #58a6ff;
}
.anilist .media .infos {
font-size: 12px;
color: #666666;
}
.anilist .media .infos > div {
display: inline-flex;
align-items: center;
margin-right: 16px;
}
.anilist .media .infos svg {
fill: currentColor;
height: 12px;
width: 12px;
margin: 0;
margin-right: 4px;
}
.anilist .media .description {
overflow: hidden;
text-overflow: ellipsis;
display: block;
width: 380px;
max-height: 38px;
font-size: 12px;
white-space: normal;
/* May not work in all browsers */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.anilist .characters {
display: flex;
flex-wrap: wrap;
}
.anilist .characters img {
margin: 2px;
border-radius: 7px;
}
/* Licenses */
.licenses {
display: flex;
}
.licenses .column {
align-items: flex-start;
font-size: 12px;
color: #666666;
flex-shrink: 0;
}
.licenses-details {
margin-top: 8px;
}
.field.license.details {
display: flex;
justify-content: space-between;
}
.field.license.details small {
display: flex;
justify-content: space-between;
color: #666666;
text-align: right;
}
.licenses .column:nth-child(1) {
margin-left: 13px;
width: 25%;
}
.licenses .column:nth-child(2) {
width: 25%;
}
.licenses .column:nth-child(3) {
width: 50%;
}
.licenses .column svg {
height: 12px;
width: 12px;
}
.licenses .column .title {
font-weight: 600;
margin-left: 15px;
}
.licenses .column .permission svg {
fill: #56d364;
}
.licenses .column .limitation svg {
fill: #f85149;
}
.licenses .column .condition svg {
fill: #58a6ff;
}
/* Contributors */
.contributors {
display: flex;
flex-wrap: wrap;
margin-left: 6px;
}
.contributors .label {
padding-left: 0;
display: flex;
align-items: center;
}
.contributors .label img {
margin-left: 0;
}
.contributors .contributions {
display: flex;
align-items: center;
font-size: .7rem;
margin-left: 6px;
margin-right: -10px;
background-color: #DDEEFF;
padding: 0 7px;
border-top-right-radius: 32px;
border-bottom-right-radius: 32px;
}
.contributors .contributions svg {
fill: #0366D6;
margin-left: 4px;
width: .8rem;
height: .8rem;
}
/* Introduction */
.introduction {
white-space: normal;
margin: 0 13px 2px;
}
/* Stackoverflow */
.stackoverflow {
margin-left: 38px;
}
.stackoverflow .entry {
margin: 4px 0 12px;
}
.stackoverflow .title {
color: #58a6ff;
white-space: normal;
align-items: flex-start;
}
.stackoverflow .body, .stackoverflow .infos {
color: #666666;
font-size: 13px;
margin-left: 32px;
}
.stackoverflow .infos {
display: flex;
align-items: center;
}
.stackoverflow .infos > div {
display: inline-flex;
align-items: center;
margin-right: 16px;
}
.stackoverflow .infos svg {
fill: currentColor;
height: 12px;
width: 12px;
margin: 0;
margin-right: 4px;
flex-shrink: 0;
}
.stackoverflow .body {
overflow: hidden;
text-overflow: ellipsis;
border-left: 3px solid #777777B2;
padding-left: 6px;
width: 400px;
}
/* Achievements */
.achievement {
display: flex;
margin: 4px 0;
}
.achievement .icon {
margin: 0 4px;
width: 44px;
height: 44px;
}
.achievement .text {
font-size: 12px;
color: #666666;
}
.achievement .unlock {
font-size: 9px;
color: #666666;
}
.achievement .title {
font-size: 14px;
color: #58A6FF;
}
.achievement .gauge.info {
color: #58A6FF;
}
.achievement.x .title {
color: #666666;
}
.achievement.x .gauge.info {
color: #B0B0B0;
}
.achievement.b .title {
color: #9D8FFF;
}
.achievement.b .gauge.info {
color: #9E91FF;
}
.achievement.a .title {
color: #D79533;
}
.achievement.a .gauge.info {
color: #E7BD69;
}
.achievement.s .title {
color: #FF0000;
}
.achievement.s .gauge.info {
color: #FF0000;
}
.achievement.s .icon {
filter: sepia() saturate(100);
}
.achievement.secret .title{
color: #FF76CD;
}
.achievement.secret .gauge.info {
color: #FF79D1;
}
.achievement .gh {
border: 1px solid currentColor;
border-radius: 16px;
font-size: 10px;
padding: 0 5px;
}
.achievement .gauge-base, .achievement .gauge-arc {
stroke-width: 6;
}
/* RSS feed */
.rss {
align-items: flex-start;
}
.rss .infos {
margin-bottom: 3px;
}
.rss .infos .date {
font-size: 10px;
color: #666666;
}
/* Fade animation */
.af {
opacity: 0;
animation: animation-fade 1s ease forwards;
}
@keyframes animation-fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Twemoji and GitHub emoji */
.twemoji, .gemoji {
height: 1em;
width: 1em;
margin-bottom: -.125em;
}
/* Cake day */
.cakeday, .cakeday svg {
animation: animation-rainbow 1.2s;
animation-iteration-count: infinite;
animation-timing-function: steps(1);
}
/* Rainbow animation */
@keyframes animation-rainbow {
0%, 100%{ color: #7F00FF; fill: #7F00FF; }
14% { color: #A933FF; fill: #A933FF; }
29%{ color: #007FFF; fill: #007FFF; }
43%{ color: #00FF7F; fill: #00FF7F; }
57%{ color: #FFFF00; fill: #FFFF00; }
71%{ color: #FF7F00; fill: #FF7F00; }
86%{ color: #FF0000; fill: #FF0000; }
}
/* Calendar */
:root {
--color-calendar-graph-day-bg: #ebedf0;
--color-calendar-graph-day-border: rgba(27,31,35,0.06);
--color-calendar-graph-day-L1-bg: #9be9a8;
--color-calendar-graph-day-L2-bg: #40c463;
--color-calendar-graph-day-L3-bg: #30a14e;
--color-calendar-graph-day-L4-bg: #216e39;
--color-calendar-halloween-graph-day-L1-bg: #ffee4a;
--color-calendar-halloween-graph-day-L2-bg: #ffc501;
--color-calendar-halloween-graph-day-L3-bg: #fe9600;
--color-calendar-halloween-graph-day-L4-bg: #03001c;
--color-calendar-graph-day-L4-border: rgba(27,31,35,0.06);
--color-calendar-graph-day-L3-border: rgba(27,31,35,0.06);
--color-calendar-graph-day-L2-border: rgba(27,31,35,0.06);
--color-calendar-graph-day-L1-border: rgba(27,31,35,0.06);
}
/* End delimiter */
#metrics-end {
width: 100%;
}
.no-animations * {
transition-delay: 0s !important;
transition-duration: 0s !important;
animation-delay: -0.0001s !important;
animation-duration: 0s !important;
animation-play-state: paused !important;
caret-color: transparent !important;
}