You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
2.9 KiB
113 lines
2.9 KiB
<!DOCTYPE html> |
|
<title>CSS site color pallete</title> |
|
<style> |
|
td { |
|
width: 20em; |
|
padding: 0 2%; |
|
} |
|
.color-block { |
|
height: 50px; |
|
border: 10px solid white; |
|
} |
|
.color-desc { |
|
height: 25px; |
|
padding: 5% 0 0 0; |
|
text-align: center; |
|
} |
|
</style> |
|
|
|
<table> |
|
<tr> |
|
<td class="color-desc"> |
|
$background: #e5e5e5 |
|
</td> |
|
<td class="color-desc"> |
|
$componentbg: #f5f5f5 |
|
</td> |
|
<td class="color-desc"> |
|
$componentfg1: #262626 |
|
</td> |
|
</tr> |
|
<tr> |
|
<td class="color-block" style="background-color: #e5e5e5;"></td> |
|
<td class="color-block" style="background-color: #f5f5f5;"></td> |
|
<td class="color-block" style="background-color: #262626;"></td> |
|
</tr> |
|
<tr> |
|
<td class="color-desc"> |
|
$componentfg2: rgba(0,0,0,.5) |
|
</td> |
|
<td class="color-desc"> |
|
$componentfg3: rgba(0,0,0,.2) |
|
</td> |
|
<td class="color-desc"> |
|
$componentfg4: #737373 |
|
</td> |
|
</tr> |
|
<tr> |
|
<td class="color-block" style="background-color: rgba(0,0,0,.5);"></td> |
|
<td class="color-block" style="background-color: rgba(0,0,0,.2);"></td> |
|
<td class="color-block" style="background-color: #737373;"></td> |
|
</tr> |
|
<tr> |
|
<td class="color-desc"> |
|
$sidepanebg: white |
|
</td> |
|
<td class="color-desc"> |
|
$bordercolor: #ccc |
|
</td> |
|
<td class="color-desc"> |
|
$actioncolor1: rgb(132,184,25) |
|
</td> |
|
</tr> |
|
<tr> |
|
<td class="color-block" style="background-color: white;"></td> |
|
<td class="color-block" style="background-color: #ccc;"></td> |
|
<td class="color-block" style="background-color: rgb(132,184,25);"></td> |
|
</tr> |
|
<tr> |
|
<td class="color-desc"> |
|
$actioncolor2: rgb(0,149,52) |
|
</td> |
|
<td class="color-desc"> |
|
none: #222 |
|
</td> |
|
<td class="color-desc"> |
|
none: #db4f39 |
|
</td> |
|
</tr> |
|
<tr> |
|
<td class="color-block" style="background-color: rgb(0,149,52);"></td> |
|
<td class="color-block" style="background-color: #222;"></td> |
|
<td class="color-block" style="background-color: #db4f39;"></td> |
|
</tr> |
|
<tr> |
|
<td class="color-desc"> |
|
none: #84b819 |
|
</td> |
|
<td class="color-desc"> |
|
none: rgba(0,0,0,.4) |
|
</td> |
|
<td class="color-desc"> |
|
none: rgba(0,0,0,.3) |
|
</td> |
|
</tr> |
|
<tr> |
|
<td class="color-block" style="background-color: #84b819;"></td> |
|
<td class="color-block" style="background-color: rgba(0,0,0,.4);"></td> |
|
<td class="color-block" style="background-color: rgba(0,0,0,.3);"></td> |
|
</tr> |
|
<tr> |
|
<td class="color-desc"> |
|
$grey5: #aaa |
|
</td> |
|
<td class="color-desc"> |
|
$grey6: #ddd |
|
</td> |
|
|
|
</tr> |
|
<tr> |
|
<td class="color-block" style="background-color: #aaa;"></td> |
|
<td class="color-block" style="background-color: #ddd;"></td> |
|
</tr> |
|
</table>
|
|
|