danvics/debrid-services-comparison
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add styles for check and cross SVG indicators in tables

Browse source
This commit is contained in:
fynks 2025-08-24 20:06:17 +05:00
parent 5a37223b6f
commit 5a7e179b05
2 changed files with 16 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
dist/css/styles.css vendored
View file

@ -1111,6 +1111,18 @@ tr:hover {
color: var(--text-secondary); color: var(--text-secondary);
font-family: 'Courier New', Courier, monospace; font-family: 'Courier New', Courier, monospace;
} }
.table-check, .table-cross{
padding: 0.2em;
border-radius: 50px;
}
.table-check{
background-color: rgba(90, 221, 90, 0.568);
}
.table-cross{
background-color: #db747465;
}
/* Search */ /* Search */
.search-section { .search-section {

8
dist/js/app.js vendored
View file

@ -245,8 +245,8 @@ class TableManager {
<td class="status-cell" role="gridcell" data-status="${providerData[provider]}"> <td class="status-cell" role="gridcell" data-status="${providerData[provider]}">
<span class="status-indicator ${isSupported ? 'supported' : 'not-supported'}" aria-label="${isSupported ? 'Supported' : 'Not supported'}"> <span class="status-indicator ${isSupported ? 'supported' : 'not-supported'}" aria-label="${isSupported ? 'Supported' : 'Not supported'}">
${isSupported ${isSupported
? '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22,4 12,14.01 9,11.01"></polyline></svg>' ? '<svg class="table-check" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22,4 12,14.01 9,11.01"></polyline></svg>'
: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>' : '<svg class="table-cross" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>'
} }
</span> </span>
</td> </td>
@ -498,8 +498,8 @@ class ComparisonManager {
_generateComparisonRows(provider1, provider2) { _generateComparisonRows(provider1, provider2) {
const rows = []; const rows = [];
const checkSvg = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22,4 12,14.01 9,11.01"></polyline></svg>'; const checkSvg = '<svg class="table-check" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22,4 12,14.01 9,11.01"></polyline></svg>';
const crossSvg = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>'; const crossSvg = '<svg class="table-cross" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>';
for (const [host, providerData] of Object.entries(this.data)) { for (const [host, providerData] of Object.entries(this.data)) {
const support1 = providerData[provider1] === 'yes'; const support1 = providerData[provider1] === 'yes';