avior/code-stats-vscode
1
0
Fork 0
mirror of https://gitlab.com/aviortheking/code-stats-vscode.git synced 2025-04-22 10:52:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Playing with colors

Browse Source
This commit is contained in:
Valentin Ivanov 2018-04-26 16:59:26 -04:00 committed by Juha Ristolainen
parent 674f657acb
commit 2343164b29
2 changed files with 78 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
assets/profile.css
View File

@ -1,8 +1,16 @@
/* Dark theme color palette */
.vscode-dark {
--color-language: #dbd5b9;
--color-primary: #E3C23D;
--color-secondary: #5D5535;
--color-bar-background: #303030;
}
.vscode-dark1 {
--color-language: #ddca7e;
--color-primary: #dcc97e;
--color-secondary: #00ca7e;
--color-secondary: #318245;
--color-bar-background: #303030;
}
/* Light theme color palette */
@ -11,6 +19,10 @@
--color-primary: #00ca7e;
}
.profile {
color: var(--color-language);
}
h3 {
text-align: center;
}
@ -18,6 +30,7 @@ h3 {
sup {
top: -.5em;
font-size: 75%;
color: var(--color-primary);
}
.language-progress {
@ -60,15 +73,15 @@ circle {
}
circle.backg {
stroke: #424242;
stroke: var(--color-bar-background);
}
circle.newxp {
stroke: #ddca7e;
stroke: var(--color-primary);
}
circle.oldxp {
stroke: #318245;
stroke: var(--color-secondary);
}
.language {
@ -96,7 +109,7 @@ circle.oldxp {
.progress {
height: 20px;
margin-bottom: 20px;
background-color: #303030;
background-color: var(--color-bar-background);
border-radius: 4px;
border: solid 1px;
border-color: #424242;
@ -111,26 +124,14 @@ circle.oldxp {
font-size: 12px;
line-height: 20px;
text-align: center;
background-color: #ddca7e;
background-color: var(--color-secondary);
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}
.progress-bar-success {
background-color: #318245;
.progress-bar-new {
background-color: var(--color-primary);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}

49
assets/profile.html.eex
View File

@ -1,34 +1,25 @@
<link rel="stylesheet" href="file:///${style}">
<h3> ${profile.user} Level ${profile.level} (${profile.total_xp} XP)
<div class="profile">
<h3> ${profile.user} <sup>${profile.level}</sup> ${profile.total_xp} xp
<% if( profile.new_xp > 0 ) { %>
<sup>(+
<%= profile.new_xp %>)</sup>
<sup>+<%= profile.new_xp %></sup>
<% } %>
</h3>
<div class="progress">
<div class="progress-bar progress-bar-success" style='width:${profile.progress}%;'>
<span class="sr-only">Level progress ${profile.progress - profile.new_progress}%.</span>
<div class="progress-bar" style='width:${profile.progress}%;'>
</div>
<div class="progress-bar progress-bar-striped progress-bar-warning" style='width:${profile.new_progress}%;'>
<span class="sr-only">Recent level progress ${profile.new_progress}%.</span>
<div class="progress-bar progress-bar-new" style='width:${profile.new_progress}%;'>
</div>
</div>
<div class="languages">
<% for( let l in languages) { %>
<div class="language-progress">
<div class="language">
<%= languages[l].name %>
<span>
<%= languages[l].level %>
</span>
</div>
<span class="tooltiptext">
<strong><%=languages[l].xp %> XP</strong>
<strong><%=languages[l].xp %> xp</strong>
<% if( languages[l].new_xp > 0 ) { %>
<sup>(+
<%= languages[l].new_xp %>)</sup>
<sup style="color:black">+<%= languages[l].new_xp %></sup>
<% } %>
</span>
<svg viewBox="0 0 100 100">
@ -36,35 +27,35 @@
<circle class="newxp" cx="50" cy="50" r="45" stroke-dasharray="282.6" stroke-dashoffset='${ ((100-languages[l].progress) * 282.6 / 100) }'></circle>
<circle class="oldxp" cx="50" cy="50" r="45" stroke-dasharray="282.6" stroke-dashoffset='${ ((100-languages[l].progress + languages[l].new_progress) * 282.6 / 100) }'></circle>
</svg>
<div class="language">
<%= languages[l].name %>
<span>
<%= languages[l].level %>
</span>
</div>
</div>
<% } %>
</div>
<p/>
<div class="machines">
<% for( let m in machines) { %>
<div class="machine">
<strong>
<%= machines[m].name %>
</strong>
<span class="level">
level <%= machines[m].level %>
</span>
<span class="xp">
(<%= machines[m].xp %> XP)
<sup> <%= machines[m].level %> </sup>
<%= machines[m].xp %> xp
<% if( machines[m].new_xp > 0 ) { %>
<sup>(+
<%= machines[m].new_xp %>)</sup>
<sup>+<%= machines[m].new_xp %></sup>
<% } %>
</span>
<div class="progress">
<div class="progress-bar progress-bar-success" style='width:${machines[m].progress}%;'>
<span class="sr-only">Level progress ${machines[m].progress - machines[m].new_progress}%.</span>
<div class="progress-bar" style='width:${machines[m].progress}%;'>
</div>
<div class="progress-bar progress-bar-striped progress-bar-warning" style='width:${machines[m].new_progress}%;'>
<span class="sr-only">Recent level progress ${machines[m].new_progress}%.</span>
<div class="progress-bar progress-bar-new" style='width:${machines[m].new_progress}%;'>
</div>
</div>
</div>
<% } %>
</div>
<div>