@@ -22,6 +22,7 @@ --gradient-gray: linear-gradient(135deg, rgba(149, 165, 166, 0.1) 0%, rgba(149, 165, 166, 0.05) 100%); --gradient-header: linear-gradient(135deg, rgba(231, 76, 60, 0.1) 0%, rgba(231, 76, 60, 0.05) 100%);
--scrollbar-track: rgba(255, 255, 255, 0.05);
--scrollbar-thumb: rgba(231, 76, 60, 0.3);
+ --text-glow: 0 0 10px rgba(231, 76, 60, 0.5);
}
:root[data-theme="light"] {
@@ -47,6 +48,7 @@ --gradient-gray: linear-gradient(135deg, rgba(108, 117, 125, 0.1) 0%, rgba(108, 117, 125, 0.05) 100%); --gradient-header: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(220, 53, 69, 0.05) 100%);
--scrollbar-track: rgba(0, 0, 0, 0.05);
--scrollbar-thumb: rgba(220, 53, 69, 0.3);
+ --text-glow: 0 0 10px rgba(220, 53, 69, 0.5);
}
* {
@@ -448,11 +450,337 @@ font-weight: 600; color: var(--text-primary);
}
-.tracker-jackett__cell--description {
- max-width: 300px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
+/* Yes/No value styling */
+.tracker-table__cell--yes {
+ position: relative;
+}
+
+.tracker-table__cell--yes::after {
+ content: attr(data-value);
+ display: inline-block;
+ padding: 1px;
+ background-color: rgba(46, 204, 113, 0.1);
+ color: #2ecc71;
+ border: 1px solid #2ecc71;
+ border-radius: 5px;
+ font-weight: 600;
+ font-size: 0.8rem;
+ text-align: center;
+ min-width: 40px;
+}
+
+.tracker-table__cell--no {
+ position: relative;
+}
+
+.tracker-table__cell--no::after {
+ content: attr(data-value);
+ display: inline-block;
+ padding: 1px;
+ background-color: rgba(231, 76, 60, 0.1);
+ color: #e74c3c;
+ border: 1px solid #e74c3c;
+ border-radius: 5px;
+ font-weight: 600;
+ font-size: 0.8rem;
+ text-align: center;
+ min-width: 40px;
+}
+
+/* Difficulty level styling */
+.tracker-table__cell--easy {
+ position: relative;
+}
+
+.tracker-table__cell--easy::after {
+ content: attr(data-value);
+ display: inline-block;
+ padding: 1px;
+ background-color: rgba(46, 204, 113, 0.1);
+ color: #2ecc71;
+ border: 1px solid #2ecc71;
+ border-radius: 5px;
+ font-weight: 600;
+ font-size: 0.8rem;
+ text-align: center;
+ min-width: 50px;
+}
+
+.tracker-table__cell--moderate {
+ position: relative;
+}
+
+.tracker-table__cell--moderate::after {
+ content: attr(data-value);
+ display: inline-block;
+ padding: 1px;
+ background-color: rgba(255, 193, 7, 0.1);
+ color: #ffc107;
+ border: 1px solid #ffc107;
+ border-radius: 5px;
+ font-weight: 600;
+ font-size: 0.8rem;
+ text-align: center;
+ min-width: 50px;
+}
+
+.tracker-table__cell--tough {
+ position: relative;
+}
+
+.tracker-table__cell--tough::after {
+ content: attr(data-value);
+ display: inline-block;
+ padding: 1px;
+ background-color: rgba(231, 76, 60, 0.1);
+ color: #e74c3c;
+ border: 1px solid #e74c3c;
+ border-radius: 5px;
+ font-weight: 600;
+ font-size: 0.8rem;
+ text-align: center;
+ min-width: 50px;
+}
+
+/* Mozilla Observatory Grade styling */
+.tracker-table__cell--grade-a-plus {
+ position: relative;
+}
+
+.tracker-table__cell--grade-a-plus::after {
+ content: attr(data-value);
+ display: inline-block;
+ padding: 1px;
+ color: #22c55e;
+ border-radius: 5px;
+ font-weight: 600;
+ font-size: 0.8rem;
+ text-align: center;
+ min-width: 40px;
+}
+
+.tracker-table__cell--grade-a {
+ position: relative;
+}
+
+.tracker-table__cell--grade-a::after {
+ content: attr(data-value);
+ display: inline-block;
+ padding: 1px;
+ color: #2ecc71;
+ border-radius: 5px;
+ font-weight: 600;
+ font-size: 0.8rem;
+ text-align: center;
+ min-width: 40px;
+}
+
+.tracker-table__cell--grade-a-minus {
+ position: relative;
+}
+
+.tracker-table__cell--grade-a-minus::after {
+ content: attr(data-value);
+ display: inline-block;
+ padding: 1px;
+ color: #65a30d;
+ border-radius: 5px;
+ font-weight: 600;
+ font-size: 0.8rem;
+ text-align: center;
+ min-width: 40px;
+}
+
+.tracker-table__cell--grade-b-plus {
+ position: relative;
+}
+
+.tracker-table__cell--grade-b-plus::after {
+ content: attr(data-value);
+ display: inline-block;
+ padding: 1px;
+ color: #84cc16;
+ border-radius: 5px;
+ font-weight: 600;
+ font-size: 0.8rem;
+ text-align: center;
+ min-width: 40px;
+}
+
+.tracker-table__cell--grade-b {
+ position: relative;
+}
+
+.tracker-table__cell--grade-b::after {
+ content: attr(data-value);
+ display: inline-block;
+ padding: 1px;
+ color: #a3e635;
+ border-radius: 5px;
+ font-weight: 600;
+ font-size: 0.8rem;
+ text-align: center;
+ min-width: 40px;
+}
+
+.tracker-table__cell--grade-b-minus {
+ position: relative;
+}
+
+.tracker-table__cell--grade-b-minus::after {
+ content: attr(data-value);
+ display: inline-block;
+ padding: 1px;
+ color: #ffc107;
+ border-radius: 5px;
+ font-weight: 600;
+ font-size: 0.8rem;
+ text-align: center;
+ min-width: 40px;
+}
+
+.tracker-table__cell--grade-c-plus {
+ position: relative;
+}
+
+.tracker-table__cell--grade-c-plus::after {
+ content: attr(data-value);
+ display: inline-block;
+ padding: 1px;
+ color: #fb923c;
+ border-radius: 5px;
+ font-weight: 600;
+ font-size: 0.8rem;
+ text-align: center;
+ min-width: 40px;
+}
+
+.tracker-table__cell--grade-c {
+ position: relative;
+}
+
+.tracker-table__cell--grade-c::after {
+ content: attr(data-value);
+ display: inline-block;
+ padding: 1px;
+ color: #f97316;
+ border-radius: 5px;
+ font-weight: 600;
+ font-size: 0.8rem;
+ text-align: center;
+ min-width: 40px;
+}
+
+.tracker-table__cell--grade-c-minus {
+ position: relative;
+}
+
+.tracker-table__cell--grade-c-minus::after {
+ content: attr(data-value);
+ display: inline-block;
+ padding: 1px;
+ color: #ea580c;
+ border-radius: 5px;
+ font-weight: 600;
+ font-size: 0.8rem;
+ text-align: center;
+ min-width: 40px;
+}
+
+.tracker-table__cell--grade-d-plus {
+ position: relative;
+}
+
+.tracker-table__cell--grade-d-plus::after {
+ content: attr(data-value);
+ display: inline-block;
+ padding: 1px;
+ color: #ef4444;
+ border-radius: 5px;
+ font-weight: 600;
+ font-size: 0.8rem;
+ text-align: center;
+ min-width: 40px;
+}
+
+.tracker-table__cell--grade-d {
+ position: relative;
+}
+
+.tracker-table__cell--grade-d::after {
+ content: attr(data-value);
+ display: inline-block;
+ padding: 1px;
+ color: #dc2626;
+ border-radius: 5px;
+ font-weight: 600;
+ font-size: 0.8rem;
+ text-align: center;
+ min-width: 40px;
+}
+
+.tracker-table__cell--grade-d-minus {
+ position: relative;
+}
+
+.tracker-table__cell--grade-d-minus::after {
+ content: attr(data-value);
+ display: inline-block;
+ padding: 1px;
+ color: #b91c1c;
+ border-radius: 5px;
+ font-weight: 600;
+ font-size: 0.8rem;
+ text-align: center;
+ min-width: 40px;
+}
+
+.tracker-table__cell--grade-f {
+ position: relative;
+}
+
+.tracker-table__cell--grade-f::after {
+ content: attr(data-value);
+ display: inline-block;
+ padding: 1px;
+ color: #991b1b;
+ border-radius: 5px;
+ font-weight: 600;
+ font-size: 0.8rem;
+ text-align: center;
+ min-width: 40px;
+}
+
+/* Light theme adjustments for yes/no values */
+:root[data-theme="light"] .tracker-table__cell--yes::after {
+ background-color: rgba(39, 174, 96, 0.08);
+ color: #27ae60;
+ border-color: #27ae60;
+}
+
+:root[data-theme="light"] .tracker-table__cell--no::after {
+ background-color: rgba(220, 53, 69, 0.08);
+ color: #dc3545;
+ border-color: #dc3545;
+}
+
+/* Light theme adjustments for difficulty levels */
+:root[data-theme="light"] .tracker-table__cell--easy::after {
+ background-color: rgba(39, 174, 96, 0.08);
+ color: #27ae60;
+ border-color: #27ae60;
+}
+
+:root[data-theme="light"] .tracker-table__cell--moderate::after {
+ background-color: rgba(255, 193, 7, 0.1);
+ color: #e6ac00;
+ border-color: #e6ac00;
+}
+
+:root[data-theme="light"] .tracker-table__cell--tough::after {
+ background-color: rgba(220, 53, 69, 0.08);
+ color: #dc3545;
+ border-color: #dc3545;
}
/* Jackett Section */
@@ -232,34 +232,19 @@ @mouseleave="hideTooltip()" class="tracker-table__sortable">
Points <span class="icon icon-sort"></span>
</th>
- <th @click="sortBy('Hit & Run')"
- @mouseenter="showTooltip($event, 'Whether the tracker enforces hit and run rules (must seed for minimum time/ratio)')"
- @mouseleave="hideTooltip()"
- class="tracker-table__sortable">
+ <th @click="sortBy('Hit & Run')" class="tracker-table__sortable">
H&R <span class="icon icon-sort"></span>
</th>
- <th @click="sortBy('Birthdate')"
- @mouseenter="showTooltip($event, 'Year the tracker was founded or launched')"
- @mouseleave="hideTooltip()"
- class="tracker-table__sortable">
+ <th @click="sortBy('Birthdate')" class="tracker-table__sortable">
B-Day <span class="icon icon-sort"></span>
</th>
- <th @click="sortBy('Join')"
- @mouseenter="showTooltip($event, 'How users can join the tracker (Invite, Application, Open, etc.)')"
- @mouseleave="hideTooltip()"
- class="tracker-table__sortable">
+ <th @click="sortBy('Join')" class="tracker-table__sortable">
Join <span class="icon icon-sort"></span>
</th>
- <th @click="sortBy('Join Diff')"
- @mouseenter="showTooltip($event, 'How difficult it is to join the tracker (Easy, Moderate, Tough)')"
- @mouseleave="hideTooltip()"
- class="tracker-table__sortable">
+ <th @click="sortBy('Join Diff')" class="tracker-table__sortable">
Join Diff <span class="icon icon-sort"></span>
</th>
- <th @click="sortBy('Updated')"
- @mouseenter="showTooltip($event, 'Date when the tracker\'s information was last updated in this database')"
- @mouseleave="hideTooltip()"
- class="tracker-table__sortable">
+ <th @click="sortBy('Updated')" class="tracker-table__sortable">
Updated <span class="icon icon-sort"></span>
</th>
</tr>
@@ -271,18 +256,65 @@ <td class="tracker-table__cell tracker-table__cell--name" x-text="tracker.Name"></td> <td class="tracker-table__cell" x-text="tracker.Abbreviation"></td>
<td class="tracker-table__cell" x-text="tracker.Type"></td>
<td class="tracker-table__cell" x-text="tracker.Codebase"></td>
- <td class="tracker-table__cell" x-text="tracker['Observatory Grade']"></td>
+ <td class="tracker-table__cell"
+ :class="tracker['Observatory Grade'] === 'A+' || tracker['Observatory Grade'] === 'A +' ? 'tracker-table__cell--grade-a-plus' :
+ tracker['Observatory Grade'] === 'A' ? 'tracker-table__cell--grade-a' :
+ tracker['Observatory Grade'] === 'A-' || tracker['Observatory Grade'] === 'A -' ? 'tracker-table__cell--grade-a-minus' :
+ tracker['Observatory Grade'] === 'B+' || tracker['Observatory Grade'] === 'B +' ? 'tracker-table__cell--grade-b-plus' :
+ tracker['Observatory Grade'] === 'B' ? 'tracker-table__cell--grade-b' :
+ tracker['Observatory Grade'] === 'B-' || tracker['Observatory Grade'] === 'B -' ? 'tracker-table__cell--grade-b-minus' :
+ tracker['Observatory Grade'] === 'C+' || tracker['Observatory Grade'] === 'C +' ? 'tracker-table__cell--grade-c-plus' :
+ tracker['Observatory Grade'] === 'C' ? 'tracker-table__cell--grade-c' :
+ tracker['Observatory Grade'] === 'C-' || tracker['Observatory Grade'] === 'C -' ? 'tracker-table__cell--grade-c-minus' :
+ tracker['Observatory Grade'] === 'D+' || tracker['Observatory Grade'] === 'D +' ? 'tracker-table__cell--grade-d-plus' :
+ tracker['Observatory Grade'] === 'D' ? 'tracker-table__cell--grade-d' :
+ tracker['Observatory Grade'] === 'D-' || tracker['Observatory Grade'] === 'D -' ? 'tracker-table__cell--grade-d-minus' :
+ tracker['Observatory Grade'] === 'F' ? 'tracker-table__cell--grade-f' : ''"
+ :data-value="tracker['Observatory Grade']"
+ :style="(tracker['Observatory Grade'] && tracker['Observatory Grade'] !== '-' && tracker['Observatory Grade'].trim() !== '') ? 'color: transparent;' : ''">
+ <span x-show="!tracker['Observatory Grade'] || tracker['Observatory Grade'] === '-' || tracker['Observatory Grade'].trim() === ''" x-text="tracker['Observatory Grade']"></span>
+ </td>
<td class="tracker-table__cell" x-text="tracker.Users"></td>
<td class="tracker-table__cell" x-text="tracker.Torrents"></td>
<td class="tracker-table__cell" x-text="tracker.Peers"></td>
- <td class="tracker-table__cell" x-text="tracker.Ratio"></td>
- <td class="tracker-table__cell" x-text="tracker['Ratio Diff']"></td>
- <td class="tracker-table__cell" x-text="tracker.Freeleech"></td>
- <td class="tracker-table__cell" x-text="tracker.Points"></td>
- <td class="tracker-table__cell" x-text="tracker['Hit & Run']"></td>
+ <td class="tracker-table__cell"
+ :class="tracker.Ratio === 'Yes' ? 'tracker-table__cell--yes' : tracker.Ratio === 'No' ? 'tracker-table__cell--no' : ''"
+ :data-value="tracker.Ratio"
+ :style="(tracker.Ratio === 'Yes' || tracker.Ratio === 'No') ? 'color: transparent;' : ''">
+ <span x-show="tracker.Ratio !== 'Yes' && tracker.Ratio !== 'No'" x-text="tracker.Ratio"></span>
+ </td>
+ <td class="tracker-table__cell"
+ :class="tracker['Ratio Diff'] === 'Easy' ? 'tracker-table__cell--easy' : tracker['Ratio Diff'] === 'Moderate' ? 'tracker-table__cell--moderate' : tracker['Ratio Diff'] === 'Tough' ? 'tracker-table__cell--tough' : ''"
+ :data-value="tracker['Ratio Diff']"
+ :style="(tracker['Ratio Diff'] === 'Easy' || tracker['Ratio Diff'] === 'Moderate' || tracker['Ratio Diff'] === 'Tough') ? 'color: transparent;' : ''">
+ <span x-show="tracker['Ratio Diff'] !== 'Easy' && tracker['Ratio Diff'] !== 'Moderate' && tracker['Ratio Diff'] !== 'Tough'" x-text="tracker['Ratio Diff']"></span>
+ </td>
+ <td class="tracker-table__cell"
+ :class="tracker.Freeleech === 'Yes' ? 'tracker-table__cell--yes' : tracker.Freeleech === 'No' ? 'tracker-table__cell--no' : ''"
+ :data-value="tracker.Freeleech"
+ :style="(tracker.Freeleech === 'Yes' || tracker.Freeleech === 'No') ? 'color: transparent;' : ''">
+ <span x-show="tracker.Freeleech !== 'Yes' && tracker.Freeleech !== 'No'" x-text="tracker.Freeleech"></span>
+ </td>
+ <td class="tracker-table__cell"
+ :class="tracker.Points === 'Yes' ? 'tracker-table__cell--yes' : tracker.Points === 'No' ? 'tracker-table__cell--no' : ''"
+ :data-value="tracker.Points"
+ :style="(tracker.Points === 'Yes' || tracker.Points === 'No') ? 'color: transparent;' : ''">
+ <span x-show="tracker.Points !== 'Yes' && tracker.Points !== 'No'" x-text="tracker.Points"></span>
+ </td>
+ <td class="tracker-table__cell"
+ :class="tracker['Hit & Run'] === 'Yes' ? 'tracker-table__cell--yes' : tracker['Hit & Run'] === 'No' ? 'tracker-table__cell--no' : ''"
+ :data-value="tracker['Hit & Run']"
+ :style="(tracker['Hit & Run'] === 'Yes' || tracker['Hit & Run'] === 'No') ? 'color: transparent;' : ''">
+ <span x-show="tracker['Hit & Run'] !== 'Yes' && tracker['Hit & Run'] !== 'No'" x-text="tracker['Hit & Run']"></span>
+ </td>
<td class="tracker-table__cell" x-text="tracker.Birthdate"></td>
<td class="tracker-table__cell" x-text="tracker.Join"></td>
- <td class="tracker-table__cell" x-text="tracker['Join Diff']"></td>
+ <td class="tracker-table__cell"
+ :class="tracker['Join Diff'] === 'Easy' ? 'tracker-table__cell--easy' : tracker['Join Diff'] === 'Moderate' ? 'tracker-table__cell--moderate' : tracker['Join Diff'] === 'Tough' ? 'tracker-table__cell--tough' : ''"
+ :data-value="tracker['Join Diff']"
+ :style="(tracker['Join Diff'] === 'Easy' || tracker['Join Diff'] === 'Moderate' || tracker['Join Diff'] === 'Tough') ? 'color: transparent;' : ''">
+ <span x-show="tracker['Join Diff'] !== 'Easy' && tracker['Join Diff'] !== 'Moderate' && tracker['Join Diff'] !== 'Tough'" x-text="tracker['Join Diff']"></span>
+ </td>
<td class="tracker-table__cell" x-text="tracker.Updated"></td>
</tr>
</template>
