mirror of
https://github.com/Lissy93/dashy.git
synced 2024-12-28 11:25:25 +03:00
✨ Adds widget for monitoring CVE vulnerabilities
This commit is contained in:
Alicie
Alicia Sykes
parent
6c0fb6fd41
commit
1296ca0bda
@ -12,6 +12,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
|
||||
- [RSS Feed](#rss-feed)
|
||||
- [XKCD Comics](#xkcd-comics)
|
||||
- [Code Stats](#code-stats)
|
||||
- [Vulnerability Feed](#vulnerability-feed)
|
||||
- [Public Holidays](#public-holidays)
|
||||
- [TFL Status](#tfl-status)
|
||||
- [Exchange Rates](#exchange-rates)
|
||||
@ -277,6 +278,44 @@ Display your coding summary. [Code::Stats](https://codestats.net/) is a free and
|
||||
|
||||
---
|
||||
|
||||
### Vulnerability Feed
|
||||
|
||||
Display a feed of recent vulnerabilities, with optional filtering by score, exploits, vendor and product. All fields are optional.
|
||||
|
||||
<p align="center"><img width="400" src="https://i.ibb.co/DYJMpjp/vulnerability-feed.png" /></p>
|
||||
|
||||
##### Options
|
||||
|
||||
**Field** | **Type** | **Required** | **Description**
|
||||
--- | --- | --- | ---
|
||||
**`sortBy`** | `string` | _Optional_ | The sorting method. Can be either `publish-date`, `last-update` or `cve-code`. Defaults to `publish-date`
|
||||
**`limit`** | `number` | _Optional_ | The number of results to fetch. Can be between `5` and `30`, defaults to `10`
|
||||
**`minScore`** | `number` | _Optional_ | If set, will only display results with a CVE score higher than the number specified. Can be a number between `0` and `9.9`. By default, vulnerabilities of all CVE scores are shown
|
||||
**`hasExploit`** | `boolean` | _Optional_ | If set to `true`, will only show results with active exploits. Defaults to `false`
|
||||
**`vendorId`** | `number` | _Optional_ | Only show results from a specific vendor, specified by ID. See [Vendor Search](https://www.cvedetails.com/vendor-search.php) for list of vendors. E.g. `23` (Debian), `26` (Microsoft), `23682` (CloudFlare)
|
||||
**`productId`** | `number` | _Optional_ | Only show results from a specific app or product, specified by ID. See [Product Search](https://www.cvedetails.com/product-search.php) for list of products. E.g. `13534` (Docker), `15913` (NextCloud), `19294` (Portainer), `17908` (ProtonMail)
|
||||
|
||||
|
||||
##### Example
|
||||
|
||||
```yaml
|
||||
- type: cve-vulnerabilities
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```yaml
|
||||
- type: cve-vulnerabilities
|
||||
options:
|
||||
sortBy: publish-date
|
||||
productId: 28125
|
||||
hasExploit: true
|
||||
minScore: 5
|
||||
limit: 30
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Public Holidays
|
||||
|
||||
Counting down to the next day off work? This widget displays upcoming public holidays for your country. Data is fetched from [Enrico](http://kayaposoft.com/enrico/)
|
||||
|
||||
236
src/components/Widgets/CveVulnerabilities.vue
Normal file
236
src/components/Widgets/CveVulnerabilities.vue
Normal file
@ -0,0 +1,236 @@
|
||||
<template>
|
||||
<div class="cve-wrapper" v-if="cveList">
|
||||
<div v-for="cve in cveList" :key="cve.id" class="cve-row">
|
||||
<a class="upper" :href="cve.url" target="_blank">
|
||||
<p :class="`score ${makeScoreColor(cve.score)}`">{{ cve.score }}</p>
|
||||
<div class="title-wrap">
|
||||
<p class="title">{{ cve.id }}</p>
|
||||
<span class="date">{{ cve.publishDate | formatDate }}</span>
|
||||
<span class="last-updated">Last Updated: {{ cve.updateDate | formatDate }}</span>
|
||||
<span :class="`exploit-count ${makeExploitColor(cve.numExploits)}`">
|
||||
{{ cve.numExploits | formatExploitCount }}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
<p class="description">
|
||||
{{ cve.description | formatDescription }}
|
||||
<a v-if="cve.description.length > 350" class="read-more" :href="cve.url" target="_blank">
|
||||
Keep Reading
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import WidgetMixin from '@/mixins/WidgetMixin';
|
||||
import { timestampToDate, truncateStr } from '@/utils/MiscHelpers';
|
||||
import { widgetApiEndpoints, serviceEndpoints } from '@/utils/defaults';
|
||||
|
||||
export default {
|
||||
mixins: [WidgetMixin],
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
cveList: null,
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
formatDate(date) {
|
||||
return timestampToDate(date);
|
||||
},
|
||||
formatDescription(description) {
|
||||
return truncateStr(description, 350);
|
||||
},
|
||||
formatExploitCount(numExploits) {
|
||||
if (!numExploits) return 'Number of exploits not known';
|
||||
if (numExploits === '0') return 'No published exploits';
|
||||
return `${numExploits} known exploit${numExploits !== '1' ? 's' : ''}`;
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
/* Get sort order, defaults to publish date */
|
||||
sortBy() {
|
||||
const usersChoice = this.options.sortBy;
|
||||
let sortCode;
|
||||
switch (usersChoice) {
|
||||
case ('publish-date'): sortCode = 1; break;
|
||||
case ('last-update'): sortCode = 2; break;
|
||||
case ('cve-code'): sortCode = 3; break;
|
||||
default: sortCode = 1;
|
||||
}
|
||||
return `&orderby=${sortCode}`;
|
||||
},
|
||||
/* The minimum CVE score to fetch/ show, defaults to 4 */
|
||||
minScore() {
|
||||
const usersChoice = this.options.minScore;
|
||||
let minScoreVal = 4;
|
||||
if (usersChoice && (usersChoice >= 0 || usersChoice <= 10)) {
|
||||
minScoreVal = usersChoice;
|
||||
}
|
||||
return `&cvssscoremin=${minScoreVal}`;
|
||||
},
|
||||
vendorId() {
|
||||
return (this.options.vendorId) ? `&vendor_id=${this.options.vendorId}` : '';
|
||||
},
|
||||
productId() {
|
||||
return (this.options.productId) ? `&product_id=${this.options.productId}` : '';
|
||||
},
|
||||
/* Should only show results with exploits, defaults to false */
|
||||
hasExploit() {
|
||||
const shouldShow = this.options.hasExploit ? 1 : 0;
|
||||
return `&hasexp=${shouldShow}`;
|
||||
},
|
||||
/* The number of results to fetch/ show, defaults to 10 */
|
||||
limit() {
|
||||
const usersChoice = this.options.limit;
|
||||
let numResults = 10;
|
||||
if (usersChoice && (usersChoice >= 5 || usersChoice <= 30)) {
|
||||
numResults = usersChoice;
|
||||
}
|
||||
return `&numrows=${numResults}`;
|
||||
},
|
||||
endpoint() {
|
||||
return `${widgetApiEndpoints.cveVulnerabilities}?${this.sortBy}${this.limit}`
|
||||
+ `${this.minScore}${this.vendorId}${this.hasExploit}`;
|
||||
},
|
||||
proxyReqEndpoint() {
|
||||
const baseUrl = process.env.VUE_APP_DOMAIN || window.location.origin;
|
||||
return `${baseUrl}${serviceEndpoints.corsProxy}`;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/* Make GET request to CoinGecko API endpoint */
|
||||
fetchData() {
|
||||
axios.request({
|
||||
method: 'GET',
|
||||
url: this.proxyReqEndpoint,
|
||||
headers: { 'Target-URL': this.endpoint },
|
||||
})
|
||||
.then((response) => {
|
||||
this.processData(response.data);
|
||||
}).catch((error) => {
|
||||
this.error('Unable to fetch CVE data', error);
|
||||
}).finally(() => {
|
||||
this.finishLoading();
|
||||
});
|
||||
},
|
||||
/* Assign data variables to the returned data */
|
||||
processData(data) {
|
||||
const cveList = [];
|
||||
data.forEach((cve) => {
|
||||
cveList.push({
|
||||
id: cve.cve_id,
|
||||
score: cve.cvss_score,
|
||||
url: cve.url,
|
||||
description: cve.summary,
|
||||
numExploits: cve.exploit_count,
|
||||
publishDate: cve.publish_date,
|
||||
updateDate: cve.update_date,
|
||||
});
|
||||
});
|
||||
this.cveList = cveList;
|
||||
},
|
||||
makeExploitColor(numExploits) {
|
||||
if (!numExploits || Number.isNaN(parseInt(numExploits, 10))) return 'fg-grey';
|
||||
const count = parseInt(numExploits, 10);
|
||||
if (count === 0) return 'fg-green';
|
||||
if (count === 1) return 'fg-orange';
|
||||
if (count > 1) return 'fg-red';
|
||||
return 'fg-grey';
|
||||
},
|
||||
makeScoreColor(inputScore) {
|
||||
if (!inputScore || Number.isNaN(parseFloat(inputScore, 10))) return 'bg-grey';
|
||||
const score = parseFloat(inputScore, 10);
|
||||
if (score >= 9) return 'bg-red';
|
||||
if (score >= 7) return 'bg-orange';
|
||||
if (score >= 4) return 'bg-yellow';
|
||||
if (score >= 0.1) return 'bg-green';
|
||||
return 'bg-blue';
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.cve-wrapper {
|
||||
.cve-row {
|
||||
p, span, a {
|
||||
font-size: 1rem;
|
||||
margin: 0.5rem 0;
|
||||
color: var(--widget-text-color);
|
||||
&.bg-green { background: var(--success); }
|
||||
&.bg-yellow { background: var(--warning); }
|
||||
&.bg-orange { background: var(--error); }
|
||||
&.bg-red { background: var(--danger); }
|
||||
&.bg-blue { background: var(--info); }
|
||||
&.bg-grey { background: var(--neutral); }
|
||||
&.fg-green { color: var(--success); }
|
||||
&.fg-yellow { color: var(--warning); }
|
||||
&.fg-orange { color: var(--error); }
|
||||
&.fg-red { color: var(--danger); }
|
||||
&.fg-blue { color: var(--info); }
|
||||
&.fg-grey { color: var(--neutral); }
|
||||
}
|
||||
a.upper {
|
||||
display: flex;
|
||||
margin: 0.25rem 0 0 0;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
.score {
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
padding: 0.45rem 0.25rem 0.25rem 0.25rem;
|
||||
margin-right: 0.5rem;
|
||||
border-radius: 30px;
|
||||
font-family: var(--font-monospace);
|
||||
background: var(--widget-text-color);
|
||||
color: var(--widget-background-color);
|
||||
}
|
||||
.title {
|
||||
font-family: var(--font-monospace);
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
.date, .last-updated {
|
||||
font-size: 0.8rem;
|
||||
margin: 0;
|
||||
opacity: var(--dimming-factor);
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
.exploit-count {
|
||||
display: none;
|
||||
font-size: 0.8rem;
|
||||
margin: 0;
|
||||
padding-left: 0.5rem;
|
||||
opacity: var(--dimming-factor);
|
||||
border-left: 1px solid var(--widget-text-color);
|
||||
}
|
||||
.seperator {
|
||||
font-size: 0.8rem;
|
||||
margin: 0;
|
||||
opacity: var(--dimming-factor);
|
||||
}
|
||||
.description {
|
||||
margin: 0 0.25rem 0.5rem 0.25rem;
|
||||
}
|
||||
a.read-more {
|
||||
opacity: var(--dimming-factor);
|
||||
}
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px dashed var(--widget-text-color);
|
||||
}
|
||||
.last-updated {
|
||||
display: none;
|
||||
}
|
||||
&:hover {
|
||||
.date { display: none; }
|
||||
.exploit-count, .last-updated { display: inline; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -46,6 +46,13 @@
|
||||
@error="handleError"
|
||||
:ref="widgetRef"
|
||||
/>
|
||||
<CveVulnerabilities
|
||||
v-else-if="widgetType === 'cve-vulnerabilities'"
|
||||
:options="widgetOptions"
|
||||
@loading="setLoaderState"
|
||||
@error="handleError"
|
||||
:ref="widgetRef"
|
||||
/>
|
||||
<CodeStats
|
||||
v-else-if="widgetType === 'code-stats'"
|
||||
:options="widgetOptions"
|
||||
@ -256,6 +263,7 @@ export default {
|
||||
CodeStats: () => import('@/components/Widgets/CodeStats.vue'),
|
||||
CryptoPriceChart: () => import('@/components/Widgets/CryptoPriceChart.vue'),
|
||||
CryptoWatchList: () => import('@/components/Widgets/CryptoWatchList.vue'),
|
||||
CveVulnerabilities: () => import('@/components/Widgets/CveVulnerabilities.vue'),
|
||||
EmbedWidget: () => import('@/components/Widgets/EmbedWidget.vue'),
|
||||
ExchangeRates: () => import('@/components/Widgets/ExchangeRates.vue'),
|
||||
Flights: () => import('@/components/Widgets/Flights.vue'),
|
||||
|
||||
@ -1,127 +1,128 @@
|
||||
@import '@/styles/media-queries.scss';
|
||||
|
||||
:root {
|
||||
/* Basic*/
|
||||
--primary: #5cabca; // Main accent color
|
||||
--background: #0b1021; // Page background
|
||||
--background-darker: #05070e; // Used for navigation bar, footer and fills
|
||||
|
||||
/* Action Colors */
|
||||
--info: #04e4f4;
|
||||
--success: #20e253;
|
||||
--warning: #f6f000;
|
||||
--danger: #f80363;
|
||||
--neutral: #272f4d;
|
||||
--white: #fff;
|
||||
--black: #000;
|
||||
|
||||
/* Modified Colors */
|
||||
--item-group-background: #0b1021cc;
|
||||
--medium-grey: #5e6474;
|
||||
--item-background: #607d8b33;
|
||||
--item-background-hover: #607d8b4d;
|
||||
|
||||
/* Semi-Transparent Black*/
|
||||
--transparent-70: #000000b3;
|
||||
--transparent-50: #00000080;
|
||||
--transparent-30: #0000004d;
|
||||
|
||||
/* Semi-Transparent White*/
|
||||
--transparent-white-70: #ffffffb3;
|
||||
--transparent-white-50: #ffffff80;
|
||||
--transparent-white-30: #ffffff4d;
|
||||
|
||||
/* Color variables for specific components
|
||||
* all variables are optional, since they inherit initial values from above*
|
||||
* Using specific variables makes overriding for custom themes really easy */
|
||||
--heading-text-color: var(--primary);
|
||||
// Nav-bar links
|
||||
--nav-link-text-color: var(--primary);
|
||||
--nav-link-background-color: #607d8b33;
|
||||
--nav-link-text-color-hover: var(--primary);
|
||||
--nav-link-background-color-hover: #607d8b33;
|
||||
--nav-link-border-color: transparent;
|
||||
--nav-link-border-color-hover: var(--primary);
|
||||
--nav-link-shadow: 1px 1px 2px #232323;
|
||||
--nav-link-shadow-hover: 1px 1px 2px #232323;
|
||||
// Link items and sections
|
||||
--item-text-color: var(--primary);
|
||||
--item-text-color-hover: var(--item-text-color);
|
||||
--item-group-outer-background: var(--primary);
|
||||
--item-group-heading-text-color: var(--item-group-background);
|
||||
--item-group-heading-text-color-hover: var(--background);
|
||||
// Homepage settings
|
||||
--settings-text-color: var(--primary);
|
||||
--settings-background: var(--background);
|
||||
// Config menu
|
||||
--config-settings-color: var(--primary);
|
||||
--config-settings-background: var(--background-darker);
|
||||
--config-code-color: var(--background);
|
||||
--config-code-background: var(--white);
|
||||
--code-editor-color: var(--black);
|
||||
--code-editor-background: var(--white);
|
||||
// Widgets
|
||||
--widget-text-color: var(--primary);
|
||||
--widget-background-color: var(--background-darker);
|
||||
--widget-accent-color: var(--background);
|
||||
// Interactive editor
|
||||
--interactive-editor-color: var(--primary);
|
||||
--interactive-editor-background: var(--background);
|
||||
--interactive-editor-background-darker: var(--background-darker);
|
||||
// Cloud backup/ restore menu
|
||||
--cloud-backup-color: var(--config-settings-color);
|
||||
--cloud-backup-background: var(--config-settings-background);
|
||||
// Search bar (on homepage)
|
||||
--search-container-background: var(--background-darker);
|
||||
--search-field-background: var(--background);
|
||||
--search-label-color: var(--settings-text-color);
|
||||
// Page footer
|
||||
--footer-text-color: var(--medium-grey);
|
||||
--footer-text-color-link: var(--primary);
|
||||
--footer-background: var(--background-darker);
|
||||
// Right-click context menu
|
||||
--context-menu-background: var(--background);
|
||||
--context-menu-color: var(--primary);
|
||||
--context-menu-secondary-color: var(--background-darker);
|
||||
// Workspace view
|
||||
--side-bar-background: var(--background-darker);
|
||||
--side-bar-background-lighter: var(--background);
|
||||
--side-bar-color: var(--primary);
|
||||
--side-bar-item-background: var(--side-bar-background);
|
||||
--side-bar-item-color: var(--side-bar-color);
|
||||
// Minimal view
|
||||
--minimal-view-background-color: var(--background);
|
||||
--minimal-view-title-color: var(--primary);
|
||||
--minimal-view-settings-color: var(--primary);
|
||||
--minimal-view-section-heading-color: var(--primary);
|
||||
--minimal-view-section-heading-background: var(--background-darker);
|
||||
--minimal-view-search-background: var(--background-darker);
|
||||
--minimal-view-search-color: var(--primary);
|
||||
--minimal-view-group-color: var(--primary);
|
||||
--minimal-view-group-background: var(--background-darker);
|
||||
// Login page
|
||||
--login-form-color: var(--primary);
|
||||
--login-form-background: var(--background);
|
||||
--login-form-background-secondary: var(--background-darker);
|
||||
// About page
|
||||
--about-page-color: var(--white);
|
||||
--about-page-background: var(--background);
|
||||
--about-page-accent: var(--primary);
|
||||
// Webpage colors, highlight, scrollbar
|
||||
--scroll-bar-color: var(--primary);
|
||||
--scroll-bar-background: var(--background-darker);
|
||||
--highlight-color: var(--background);
|
||||
--highlight-background: var(--primary);
|
||||
--progress-bar: var(--primary);
|
||||
// Misc components
|
||||
--loading-screen-color: var(--primary);
|
||||
--loading-screen-background: var(--background);
|
||||
--status-check-tooltip-background: var(--background-darker);
|
||||
--status-check-tooltip-color: var(--primary);
|
||||
--welcome-popup-background: var(--background-darker);
|
||||
--welcome-popup-text-color: var(--primary);
|
||||
--toast-background: var(--primary);
|
||||
--toast-color: var(--background);
|
||||
--description-tooltip-background: var(--background-darker);
|
||||
--description-tooltip-color: var(--primary);
|
||||
}
|
||||
@import '@/styles/media-queries.scss';
|
||||
|
||||
:root {
|
||||
/* Basic*/
|
||||
--primary: #5cabca; // Main accent color
|
||||
--background: #0b1021; // Page background
|
||||
--background-darker: #05070e; // Used for navigation bar, footer and fills
|
||||
|
||||
/* Action Colors */
|
||||
--info: #04e4f4;
|
||||
--success: #20e253;
|
||||
--warning: #f6f000;
|
||||
--error: #fca016;
|
||||
--danger: #f80363;
|
||||
--neutral: #272f4d;
|
||||
--white: #fff;
|
||||
--black: #000;
|
||||
|
||||
/* Modified Colors */
|
||||
--item-group-background: #0b1021cc;
|
||||
--medium-grey: #5e6474;
|
||||
--item-background: #607d8b33;
|
||||
--item-background-hover: #607d8b4d;
|
||||
|
||||
/* Semi-Transparent Black*/
|
||||
--transparent-70: #000000b3;
|
||||
--transparent-50: #00000080;
|
||||
--transparent-30: #0000004d;
|
||||
|
||||
/* Semi-Transparent White*/
|
||||
--transparent-white-70: #ffffffb3;
|
||||
--transparent-white-50: #ffffff80;
|
||||
--transparent-white-30: #ffffff4d;
|
||||
|
||||
/* Color variables for specific components
|
||||
* all variables are optional, since they inherit initial values from above*
|
||||
* Using specific variables makes overriding for custom themes really easy */
|
||||
--heading-text-color: var(--primary);
|
||||
// Nav-bar links
|
||||
--nav-link-text-color: var(--primary);
|
||||
--nav-link-background-color: #607d8b33;
|
||||
--nav-link-text-color-hover: var(--primary);
|
||||
--nav-link-background-color-hover: #607d8b33;
|
||||
--nav-link-border-color: transparent;
|
||||
--nav-link-border-color-hover: var(--primary);
|
||||
--nav-link-shadow: 1px 1px 2px #232323;
|
||||
--nav-link-shadow-hover: 1px 1px 2px #232323;
|
||||
// Link items and sections
|
||||
--item-text-color: var(--primary);
|
||||
--item-text-color-hover: var(--item-text-color);
|
||||
--item-group-outer-background: var(--primary);
|
||||
--item-group-heading-text-color: var(--item-group-background);
|
||||
--item-group-heading-text-color-hover: var(--background);
|
||||
// Homepage settings
|
||||
--settings-text-color: var(--primary);
|
||||
--settings-background: var(--background);
|
||||
// Config menu
|
||||
--config-settings-color: var(--primary);
|
||||
--config-settings-background: var(--background-darker);
|
||||
--config-code-color: var(--background);
|
||||
--config-code-background: var(--white);
|
||||
--code-editor-color: var(--black);
|
||||
--code-editor-background: var(--white);
|
||||
// Widgets
|
||||
--widget-text-color: var(--primary);
|
||||
--widget-background-color: var(--background-darker);
|
||||
--widget-accent-color: var(--background);
|
||||
// Interactive editor
|
||||
--interactive-editor-color: var(--primary);
|
||||
--interactive-editor-background: var(--background);
|
||||
--interactive-editor-background-darker: var(--background-darker);
|
||||
// Cloud backup/ restore menu
|
||||
--cloud-backup-color: var(--config-settings-color);
|
||||
--cloud-backup-background: var(--config-settings-background);
|
||||
// Search bar (on homepage)
|
||||
--search-container-background: var(--background-darker);
|
||||
--search-field-background: var(--background);
|
||||
--search-label-color: var(--settings-text-color);
|
||||
// Page footer
|
||||
--footer-text-color: var(--medium-grey);
|
||||
--footer-text-color-link: var(--primary);
|
||||
--footer-background: var(--background-darker);
|
||||
// Right-click context menu
|
||||
--context-menu-background: var(--background);
|
||||
--context-menu-color: var(--primary);
|
||||
--context-menu-secondary-color: var(--background-darker);
|
||||
// Workspace view
|
||||
--side-bar-background: var(--background-darker);
|
||||
--side-bar-background-lighter: var(--background);
|
||||
--side-bar-color: var(--primary);
|
||||
--side-bar-item-background: var(--side-bar-background);
|
||||
--side-bar-item-color: var(--side-bar-color);
|
||||
// Minimal view
|
||||
--minimal-view-background-color: var(--background);
|
||||
--minimal-view-title-color: var(--primary);
|
||||
--minimal-view-settings-color: var(--primary);
|
||||
--minimal-view-section-heading-color: var(--primary);
|
||||
--minimal-view-section-heading-background: var(--background-darker);
|
||||
--minimal-view-search-background: var(--background-darker);
|
||||
--minimal-view-search-color: var(--primary);
|
||||
--minimal-view-group-color: var(--primary);
|
||||
--minimal-view-group-background: var(--background-darker);
|
||||
// Login page
|
||||
--login-form-color: var(--primary);
|
||||
--login-form-background: var(--background);
|
||||
--login-form-background-secondary: var(--background-darker);
|
||||
// About page
|
||||
--about-page-color: var(--white);
|
||||
--about-page-background: var(--background);
|
||||
--about-page-accent: var(--primary);
|
||||
// Webpage colors, highlight, scrollbar
|
||||
--scroll-bar-color: var(--primary);
|
||||
--scroll-bar-background: var(--background-darker);
|
||||
--highlight-color: var(--background);
|
||||
--highlight-background: var(--primary);
|
||||
--progress-bar: var(--primary);
|
||||
// Misc components
|
||||
--loading-screen-color: var(--primary);
|
||||
--loading-screen-background: var(--background);
|
||||
--status-check-tooltip-background: var(--background-darker);
|
||||
--status-check-tooltip-color: var(--primary);
|
||||
--welcome-popup-background: var(--background-darker);
|
||||
--welcome-popup-text-color: var(--primary);
|
||||
--toast-background: var(--primary);
|
||||
--toast-color: var(--background);
|
||||
--description-tooltip-background: var(--background-darker);
|
||||
--description-tooltip-color: var(--primary);
|
||||
}
|
||||
|
||||
@ -142,3 +142,8 @@ export const roundPrice = (price) => {
|
||||
else if (price <= 0.01) decimals = 5;
|
||||
return price.toFixed(decimals);
|
||||
};
|
||||
|
||||
/* Cuts string off at given length, and adds an ellipse */
|
||||
export const truncateStr = (str, len = 60, ellipse = '...') => {
|
||||
return str.length > len + ellipse.length ? `${str.slice(0, len)}${ellipse}` : str;
|
||||
};
|
||||
|
||||
@ -211,6 +211,7 @@ module.exports = {
|
||||
codeStats: 'https://codestats.net/',
|
||||
cryptoPrices: 'https://api.coingecko.com/api/v3/coins/',
|
||||
cryptoWatchList: 'https://api.coingecko.com/api/v3/coins/markets/',
|
||||
cveVulnerabilities: 'http://www.cvedetails.com/json-feed.php',
|
||||
exchangeRates: 'https://v6.exchangerate-api.com/v6/',
|
||||
flights: 'https://aerodatabox.p.rapidapi.com/flights/airports/icao/',
|
||||
githubTrending: 'https://gh-trending-repos.herokuapp.com/',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user