Refactor source paths
This commit is contained in:
linguist
424
source/templates/classic/style.css
Normal file
424
source/templates/classic/style.css
Normal file
@@ -0,0 +1,424 @@
|
||||
/* 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%;
|
||||
}
|
||||
|
||||
/* User avatar */
|
||||
.avatar {
|
||||
background-color: #000000;
|
||||
border-radius: 50%;
|
||||
margin: 0 6px;
|
||||
}
|
||||
|
||||
/* 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 small {
|
||||
margin-left: 4px;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* 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-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;
|
||||
}
|
||||
.track .artist {
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
/* Posts plugin */
|
||||
.post {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.post .infos {
|
||||
display: flex;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.post .infos .title {
|
||||
font-size: 14px;
|
||||
width: 400px;
|
||||
white-space: normal;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-height: 40px;;
|
||||
}
|
||||
.post .infos .date {
|
||||
flex-shrink: 0;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
width: 40px;
|
||||
padding-top: 1px;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
.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: 9px;
|
||||
}
|
||||
|
||||
.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;
|
||||
align-items: space-between;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.chart-bars.horizontal .entry {
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chart-bars.horizontal .entry .name {
|
||||
flex-shrink: 0;
|
||||
text-align: right;
|
||||
min-width: 30%;
|
||||
}
|
||||
|
||||
.chart-bars.horizontal .bar {
|
||||
height: 7px;
|
||||
width: auto;
|
||||
margin: 0 6px;
|
||||
}
|
||||
|
||||
/* Fade animation */
|
||||
.af {
|
||||
opacity: 0;
|
||||
animation: animation-fade 1s ease forwards;
|
||||
}
|
||||
@keyframes animation-fade {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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);
|
||||
}
|
||||
Reference in New Issue
Block a user