mirror of https://github.com/lissy93/dashy
🔀 Merge pull request #319 from Lissy93/FIX/ui-editor-improvments
[FIX] UI Bug Fixes for Interactive Editor + Style Refactor Fixes #301 Fixes #310 Fixes #311 Fixes #312
This commit is contained in:
Alicia Sykes
GitHub
commit
30530cb65b
|
|
@ -0,0 +1,14 @@
|
|||
# Ignore list, for automated broken link checking
|
||||
|
||||
https://fonts.gstatic.com/**
|
||||
https://metager.org/meta/**
|
||||
https://developers.cloudflare.com/**
|
||||
|
||||
http://localhost**
|
||||
https://localhost**
|
||||
http://192.168**
|
||||
https://192.168**
|
||||
file:///github/**
|
||||
http://[dashy-location]**
|
||||
https://[dashy-location]**
|
||||
**.local/**
|
||||
|
|
@ -1,5 +1,11 @@
|
|||
# Changelog
|
||||
|
||||
## 💄 1.9.1 - Editor and Theming Fixes and Improvements [PR #319](https://github.com/Lissy93/dashy/pull/319)
|
||||
- Bug fixes for interactive editor: #310, #311, #312
|
||||
- Adds option to modify text font through the UI
|
||||
- Adds two new themes: One Dark and Adventure
|
||||
- Theming stylesheet refactor, better inheritance
|
||||
|
||||
## 🐳 1.9.0 - Alpha of Dashy-Lite Docker Container [PR #306](https://github.com/Lissy93/dashy/pull/306)
|
||||
- Create an Alpine-based container, that serves the built app up with plain NGINX, instead of Node.
|
||||
- This is much lighter, but doesn't currently support any of the server-side actions (like status-checks, and writing changes to disk)
|
||||
|
|
|
|||
|
|
@ -1,77 +1,6 @@
|
|||
# Config file for pull-request-badge. See: https://pullrequestbadge.com/ by @stefanbuck
|
||||
# Dynamically inserts status badges into PR description, based on certain conditions
|
||||
|
||||
# Checks if the required sections are missing
|
||||
- label: ⚠️Missing
|
||||
message: Category
|
||||
color: '#f25265'
|
||||
when: $payload.pull_request.body.includes('Category') === false
|
||||
- label: ⚠️Missing
|
||||
message: Overview
|
||||
color: '#f25265'
|
||||
when: $payload.pull_request.body.includes('Overview') === false
|
||||
- label: ⚠️Missing
|
||||
message: Quality Checklist
|
||||
color: '#f25265'
|
||||
when: $payload.pull_request.body.includes('Code Quality Checklist') === false
|
||||
- label: ⚠️Description
|
||||
message: Incomplete
|
||||
color: '#f25265'
|
||||
when: $payload.pull_request.body.length < 25
|
||||
- label: ⚠️Missing
|
||||
message: Label
|
||||
color: '#f25265'
|
||||
when: $labels.length == 0
|
||||
|
||||
# Show note when task list has unfinished items
|
||||
- label: ⚠️Notice
|
||||
message: Unchecked Tasks
|
||||
when: $payload.pull_request.body.includes('- [ ] ')
|
||||
color: '#f25265'
|
||||
|
||||
# Show badge indicating PR status
|
||||
- label: Status
|
||||
message: ✏️ Draft
|
||||
when: $isDraft
|
||||
color: '#ffa933'
|
||||
- label: Status
|
||||
message: 🧱 Work in Progress
|
||||
when: $payload.pull_request.title.includes('WIP')
|
||||
color: '#29e3f4'
|
||||
- label: Status
|
||||
message: ✅ Ready
|
||||
color: '#3ef963'
|
||||
when: $labels.includes('🔀 Ready for Merge')
|
||||
|
||||
# Add size label based on very large or tiny PRs
|
||||
- label: PR Size
|
||||
message: Extra Large
|
||||
color: '#f9833e'
|
||||
when: '$additions > 1000'
|
||||
- label: PR Size
|
||||
message: Large
|
||||
color: '#f4b546'
|
||||
when: '$additions > 500 && $additions < 1000'
|
||||
- label: PR Size
|
||||
message: Medium
|
||||
color: '#f3ff59'
|
||||
when: '$additions > 10 && $additions < 500'
|
||||
- label: PR Size
|
||||
message: Quick
|
||||
color: '#3eef8b'
|
||||
when: '$additions < 10'
|
||||
|
||||
# Show PR number, to destination and from destination
|
||||
- label: '#$prNumber'
|
||||
message: '$payload.pull_request.user.login /$payload.pull_request.head.ref → $payload.repository.full_name'
|
||||
color: '#ab5afc'
|
||||
url: 'https://github.com/$slug/tree/$branchName'
|
||||
|
||||
# Show total code added minus deleted
|
||||
- label: New Code
|
||||
message: 'Commits: $payload.pull_request.commits | Files Changed: $payload.pull_request.changed_files | Additions: $payload.pull_request.additions-$payload.pull_request.deletions'
|
||||
color: '#dddd00'
|
||||
|
||||
# Show submitting user's username and profile link
|
||||
- label: 💕 Submitted by
|
||||
message: $payload.pull_request.user.login
|
||||
|
|
@ -125,6 +54,77 @@
|
|||
color: '#39b0fd'
|
||||
when: $labels.includes('🌐 Language')
|
||||
|
||||
# Add size label based on very large or tiny PRs
|
||||
- label: PR Size
|
||||
message: Extra Large
|
||||
color: '#f9833e'
|
||||
when: '$additions > 1000'
|
||||
- label: PR Size
|
||||
message: Large
|
||||
color: '#f4b546'
|
||||
when: '$additions > 500 && $additions < 1000'
|
||||
- label: PR Size
|
||||
message: Medium
|
||||
color: '#f3ff59'
|
||||
when: '$additions > 10 && $additions < 500'
|
||||
- label: PR Size
|
||||
message: Quick
|
||||
color: '#3eef8b'
|
||||
when: '$additions < 10'
|
||||
|
||||
# Show badge indicating PR status
|
||||
- label: Status
|
||||
message: ✏️ Draft
|
||||
when: $isDraft
|
||||
color: '#ffa933'
|
||||
- label: Status
|
||||
message: 🧱 Work in Progress
|
||||
when: $payload.pull_request.title.includes('WIP')
|
||||
color: '#29e3f4'
|
||||
- label: Status
|
||||
message: ✅ Ready
|
||||
color: '#3ef963'
|
||||
when: $labels.includes('🔀 Ready for Merge')
|
||||
|
||||
# Show PR number, to destination and from destination
|
||||
- label: '#$prNumber'
|
||||
message: '$payload.pull_request.user.login /$payload.pull_request.head.ref → $payload.repository.full_name'
|
||||
color: '#ab5afc'
|
||||
url: 'https://github.com/$slug/tree/$branchName'
|
||||
|
||||
# Show total code added minus deleted
|
||||
- label: New Code
|
||||
message: 'Commits: $payload.pull_request.commits | Files Changed: $payload.pull_request.changed_files | Additions: $payload.pull_request.additions-$payload.pull_request.deletions'
|
||||
color: '#dddd00'
|
||||
|
||||
# Checks if the required sections are missing
|
||||
- label: ⚠️Missing
|
||||
message: Category
|
||||
color: '#f25265'
|
||||
when: $payload.pull_request.body.includes('Category') === false
|
||||
- label: ⚠️Missing
|
||||
message: Overview
|
||||
color: '#f25265'
|
||||
when: $payload.pull_request.body.includes('Overview') === false
|
||||
- label: ⚠️Missing
|
||||
message: Quality Checklist
|
||||
color: '#f25265'
|
||||
when: $payload.pull_request.body.includes('Code Quality Checklist') === false
|
||||
- label: ⚠️Description
|
||||
message: Incomplete
|
||||
color: '#f25265'
|
||||
when: $payload.pull_request.body.length < 25
|
||||
- label: ⚠️Missing
|
||||
message: Label
|
||||
color: '#f25265'
|
||||
when: $labels.length == 0
|
||||
|
||||
# Show note when task list has unfinished items
|
||||
- label: ⚠️Notice
|
||||
message: Unchecked Tasks
|
||||
when: $payload.pull_request.body.includes('- [ ] ')
|
||||
color: '#f25265'
|
||||
|
||||
# Show warning, when certain tags are applied
|
||||
- label: Warning
|
||||
message: ⛔ Do Not Merge
|
||||
|
|
|
|||
|
|
@ -11,10 +11,15 @@ jobs:
|
|||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
|
||||
- name: Load Excludes
|
||||
run: |
|
||||
LYCHEE_EXCLUDE=$(sed -e :a -e 'N;s/\n/ /;ta' .github/.lycheeexclude)
|
||||
echo "LYCHEE_EXCLUDE=$LYCHEE_EXCLUDE" >> $GITHUB_ENV
|
||||
|
||||
- name: Check for Broken Links
|
||||
uses: lycheeverse/lychee-action@v1.0.8
|
||||
with:
|
||||
args: --verbose -a 200,302,304,429 --no-progress **/*.md **/*.html
|
||||
args: --verbose -a 200,302,304,429 --exclude ${{ env.LYCHEE_EXCLUDE }} --exclude-mail --no-progress **/*.md
|
||||
env:
|
||||
GITHUB_TOKEN: ${{secrets.BOT_GITHUB_TOKEN}}
|
||||
LYCHEE_OUT: .github/broken-link-report.md
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ If the status is always returning an error, despite the service being online, th
|
|||
If your service requires requests to include any authorization in the headers, then use the `statusCheckHeaders` property, as described above.
|
||||
If you are still having issues, it may be because your target application is blocking requests from Dashy's IP. This is a [CORS error](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS), and can be fixed by setting the headers on your target app, to include:
|
||||
```
|
||||
Access-Control-Allow-Origin: https://location-of-dashy/
|
||||
Access-Control-Allow-Origin: https://[dashy-location]/
|
||||
Vary: Origin
|
||||
```
|
||||
If the URL you are checking is not using HTTPS, then you may need to disable the rejection of insecure requests. This can be done by setting `statusCheckAllowInsecure` to true for a given item.
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
{
|
||||
"name": "Dashy",
|
||||
"version": "1.9.0",
|
||||
"version": "1.9.1",
|
||||
"license": "MIT",
|
||||
"main": "server",
|
||||
"author": "Alicia Sykes <alicia@omg.lol> (https://aliciasykes.com)",
|
||||
"scripts": {
|
||||
"start": "node server",
|
||||
"dev": "vue-cli-service serve",
|
||||
|
|
|
|||
|
|
@ -101,6 +101,7 @@
|
|||
"export-button": "Export Custom Variables",
|
||||
"reset-button": "Reset Styles for",
|
||||
"show-all-button": "Show All Variables",
|
||||
"change-fonts-button": "Change Fonts",
|
||||
"save-button": "Save",
|
||||
"cancel-button": "Cancel",
|
||||
"saved-toast": "{theme} Updated Successfully",
|
||||
|
|
|
|||
|
|
@ -152,6 +152,7 @@ export default {
|
|||
}
|
||||
InfoHandler('Config has succesfully been saved in browser storage', 'Config Update');
|
||||
this.showToast(this.$t('config-editor.success-msg-local'), true);
|
||||
this.$store.commit(StoreKeys.SET_EDIT_MODE, false);
|
||||
},
|
||||
writeToDisk() {
|
||||
// 1. Convert JSON into YAML
|
||||
|
|
@ -211,7 +212,7 @@ div.edit-mode-bottom-banner {
|
|||
/* Main sections */
|
||||
.edit-banner-section {
|
||||
padding: 0.5rem;
|
||||
height: 100%;
|
||||
height: 90%;
|
||||
/* Section sub-titles */
|
||||
p.section-sub-title {
|
||||
margin: 0;
|
||||
|
|
@ -234,7 +235,7 @@ div.edit-mode-bottom-banner {
|
|||
grid-template-columns: repeat(2, 1fr);
|
||||
button {
|
||||
margin: 0.25rem;
|
||||
height: fit-content;
|
||||
height: stretch;
|
||||
}
|
||||
p.section-sub-title {
|
||||
grid-column-start: span 2;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<template>
|
||||
<div
|
||||
:class="`collapsable ${checkSpanNum(cols, 'col')} ${checkSpanNum(rows, 'row')}`"
|
||||
:class="`collapsable ${rowColSpanClass} ${collapseClass}`"
|
||||
:style="`${color ? 'background: '+color : ''}; ${sanitizeCustomStyles(customStyles)};`"
|
||||
>
|
||||
<input
|
||||
:id="sectionKey"
|
||||
class="toggle"
|
||||
type="checkbox"
|
||||
:checked="getCollapseState()"
|
||||
:checked="isExpanded"
|
||||
@change="collapseChanged"
|
||||
tabIndex="-1"
|
||||
>
|
||||
|
|
@ -56,6 +56,19 @@ export default {
|
|||
if (this.isEditMode) return undefined;
|
||||
return `collapsible-${this.uniqueKey}`;
|
||||
},
|
||||
collapseClass() {
|
||||
return !this.isExpanded ? ' is-collapsed' : 'is-open';
|
||||
},
|
||||
rowColSpanClass() {
|
||||
const { rows, cols, checkSpanNum } = this;
|
||||
return `${checkSpanNum(cols, 'col')} ${checkSpanNum(rows, 'row')}`;
|
||||
},
|
||||
},
|
||||
data: () => ({
|
||||
isExpanded: false,
|
||||
}),
|
||||
mounted() {
|
||||
this.isExpanded = this.getCollapseState();
|
||||
},
|
||||
methods: {
|
||||
/* Check that row & column span is valid, and not over the max */
|
||||
|
|
@ -69,29 +82,28 @@ export default {
|
|||
sanitizeCustomStyles(userCss) {
|
||||
return userCss ? userCss.replace(/[^a-zA-Z0-9- :;.]/g, '') : '';
|
||||
},
|
||||
/* If not already done, then add object structure to local storage */
|
||||
/* Returns local storage collapse state data, and if not yet set then initialized is */
|
||||
initialiseStorage() {
|
||||
const storageKey = localStorageKeys.COLLAPSE_STATE;
|
||||
/* Initialize function will create and set a blank object to storage */
|
||||
const initStorage = () => localStorage.setItem(
|
||||
localStorageKeys.COLLAPSE_STATE, JSON.stringify({}),
|
||||
);
|
||||
if (!localStorage[localStorageKeys.COLLAPSE_STATE]) initStorage(); // Initialise if not set
|
||||
try { // Check storage is valid JSON, and has not been corrupted
|
||||
JSON.parse(localStorage[localStorageKeys.COLLAPSE_STATE]);
|
||||
} catch {
|
||||
const initStorage = () => localStorage.setItem(storageKey, JSON.stringify({}));
|
||||
// If not yet set, then call initialize
|
||||
if (!localStorage[storageKey]) {
|
||||
initStorage();
|
||||
return {};
|
||||
}
|
||||
return JSON.parse(localStorage[localStorageKeys.COLLAPSE_STATE]);
|
||||
// Otherwise, return value of local storage
|
||||
return JSON.parse(localStorage[storageKey]);
|
||||
},
|
||||
/* If not specified by user, get last state from local storage */
|
||||
/* If specified by user, return conf collapse state, otherwise check local storage */
|
||||
getCollapseState() {
|
||||
if (this.collapsed !== undefined) return !this.collapsed;
|
||||
const collapseStateObject = this.initialiseStorage();
|
||||
let collapseState = !this.collapsed;
|
||||
if (this.collapsed !== undefined) return !this.collapsed; // Check users config
|
||||
const collapseStateObject = this.initialiseStorage(); // Check local storage
|
||||
if (collapseStateObject[this.uniqueKey] !== undefined) {
|
||||
collapseState = collapseStateObject[this.uniqueKey];
|
||||
return collapseStateObject[this.uniqueKey];
|
||||
}
|
||||
return collapseState;
|
||||
// Nothing specified, return Open
|
||||
return true;
|
||||
},
|
||||
/* When section collapsed, update local storage, to remember for next time */
|
||||
setCollapseState(id, newState) {
|
||||
|
|
@ -104,9 +116,10 @@ export default {
|
|||
},
|
||||
/* Called when collapse state changes, trigger local storage update if needed */
|
||||
collapseChanged(whatChanged) {
|
||||
this.isExpanded = whatChanged.srcElement.checked;
|
||||
if (this.collapseState === undefined) { // Only run, if user hasn't manually set prop
|
||||
this.initialiseStorage();
|
||||
this.setCollapseState(this.uniqueKey.toString(), whatChanged.srcElement.checked);
|
||||
this.setCollapseState(this.uniqueKey.toString(), this.isExpanded);
|
||||
}
|
||||
},
|
||||
openEditModal() {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
@contextmenu.prevent
|
||||
:href="hyperLinkHref"
|
||||
:target="anchorTarget"
|
||||
:class="`item ${!icon? 'short': ''} size-${itemSize} ${isAddNew ? 'add-new' : ''}`"
|
||||
:class="`item ${makeClassList}`"
|
||||
v-tooltip="getTooltipOptions()"
|
||||
rel="noopener noreferrer" tabindex="0"
|
||||
:id="`link-${id}`"
|
||||
|
|
@ -30,8 +30,10 @@
|
|||
:statusSuccess="statusResponse ? statusResponse.successStatus : undefined"
|
||||
:statusText="statusResponse ? statusResponse.message : undefined"
|
||||
/>
|
||||
<!-- Edit icon (displayed only when in edit mode) -->
|
||||
<EditModeIcon v-if="isEditMode" class="edit-mode-item" @click="openItemSettings()" />
|
||||
</a>
|
||||
<!-- Right-click context menu -->
|
||||
<ContextMenu
|
||||
:show="contextMenuOpen && !isAddNew"
|
||||
v-click-outside="closeContextMenu"
|
||||
|
|
@ -43,6 +45,7 @@
|
|||
@openMoveItemMenu="openMoveItemMenu"
|
||||
@openDeleteItem="openDeleteItem"
|
||||
/>
|
||||
<!-- Edit and move item menu modals -->
|
||||
<MoveItemTo v-if="isEditMode" :itemId="id" />
|
||||
<EditItem v-if="editMenuOpen" :itemId="id"
|
||||
@closeEditMenu="closeEditMenu"
|
||||
|
|
@ -114,6 +117,14 @@ export default {
|
|||
accumulatedTarget() {
|
||||
return this.target || this.appConfig.defaultOpeningMethod || defaultOpeningMethod;
|
||||
},
|
||||
/* Based on item props, adjust class names */
|
||||
makeClassList() {
|
||||
const {
|
||||
icon, itemSize, isAddNew, isEditMode,
|
||||
} = this;
|
||||
return `size-${itemSize} ${!icon ? 'short' : ''} `
|
||||
+ `${isAddNew ? 'add-new' : ''} ${isEditMode ? 'is-edit-mode' : ''}`;
|
||||
},
|
||||
/* Convert config target value, into HTML anchor target attribute */
|
||||
anchorTarget() {
|
||||
if (this.isEditMode) return '_self';
|
||||
|
|
@ -353,10 +364,10 @@ export default {
|
|||
box-shadow: var(--item-hover-shadow);
|
||||
background: var(--item-background-hover);
|
||||
color: var(--item-text-color-hover);
|
||||
position: relative;
|
||||
.tile-title span.text {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
// position: relative;
|
||||
// .tile-title span.text {
|
||||
// white-space: pre-wrap;
|
||||
// }
|
||||
}
|
||||
&:focus {
|
||||
outline: 2px solid var(--primary);
|
||||
|
|
@ -521,13 +532,18 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
/* Adjust positioning of status indicator, when in edit mode */
|
||||
a.item.is-edit-mode {
|
||||
&.size-medium .status-indicator { top: 1rem; }
|
||||
&.size-small .status-indicator { right: 1rem; }
|
||||
&.size-large .status-indicator { top: 1.5rem; }
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!-- An un-scoped style tag, since tooltip is outside this DOM tree -->
|
||||
<style lang="scss">
|
||||
|
||||
.disabled-link {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -64,8 +64,7 @@ export default {
|
|||
outline: none;
|
||||
border: none;
|
||||
border-radius: var(--curve-factor);
|
||||
-webkit-box-shadow: 1px 1px 2px #232323;
|
||||
box-shadow: 1px 1px 2px #232323;
|
||||
box-shadow: var(--nav-link-shadow);
|
||||
color: var(--nav-link-text-color);
|
||||
background: var(--nav-link-background-color);
|
||||
border: 1px solid var(--nav-link-border-color);
|
||||
|
|
@ -74,6 +73,7 @@ export default {
|
|||
color: var(--nav-link-text-color-hover);
|
||||
background: var(--nav-link-background-color-hover);
|
||||
border: 1px solid var(--nav-link-border-color-hover);
|
||||
box-shadow: var(--nav-link-shadow-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,22 +27,25 @@
|
|||
</v-swatches>
|
||||
<input v-else
|
||||
:id="`color-input-${colorName}`"
|
||||
:value="customColors[colorName]"
|
||||
class="misc-input"
|
||||
v-model="customColors[colorName]"
|
||||
:class="`misc-input ${isTextual(colorName, customColors[colorName]) ? 'long-input' : ''}`"
|
||||
@input="setVariable(colorName, customColors[colorName])"
|
||||
/>
|
||||
</div> <!-- End of color list -->
|
||||
</div>
|
||||
<!-- More options: Export, Reset, Show all -->
|
||||
<p @click="showFontVariables" class="action-text-btn show-all-vars-btn">
|
||||
{{ $t('theme-maker.change-fonts-button') }}
|
||||
</p>
|
||||
<p @click="findAllVariableNames" class="action-text-btn show-all-vars-btn">
|
||||
{{ $t('theme-maker.show-all-button') }}
|
||||
</p>
|
||||
<p @click="exportToClipboard" class="action-text-btn">
|
||||
{{ $t('theme-maker.export-button') }}
|
||||
</p>
|
||||
<p @click="resetAndSave" class="action-text-btn">
|
||||
{{ $t('theme-maker.reset-button') }} '{{ themeToEdit }}'
|
||||
</p>
|
||||
<p @click="findAllVariableNames" class="action-text-btn show-all-vars-btn">
|
||||
{{ $t('theme-maker.show-all-button') }}
|
||||
</p>
|
||||
<!-- Save and cancel buttons -->
|
||||
<div class="action-buttons">
|
||||
<Button :click="saveChanges">
|
||||
|
|
@ -138,6 +141,13 @@ export default {
|
|||
});
|
||||
return data;
|
||||
},
|
||||
/* Adds font variables to list */
|
||||
showFontVariables() {
|
||||
const currentVariables = this.customColors;
|
||||
const fonts = ['font-headings', 'font-body', 'font-monospace'];
|
||||
const fontVariables = this.makeInitialData(fonts);
|
||||
this.customColors = { ...currentVariables, ...fontVariables };
|
||||
},
|
||||
/* Find all available CSS variables for the current applied theme */
|
||||
findAllVariableNames() {
|
||||
const availableVariables = Array.from(document.styleSheets)
|
||||
|
|
@ -146,7 +156,7 @@ export default {
|
|||
((acc, sheet) => ([
|
||||
...acc,
|
||||
...Array.from(sheet.cssRules).reduce(
|
||||
(def, rule) => (rule.selectorText === ':root'
|
||||
(def, rule) => (rule.selectorText === ':root' || rule.selectorText === 'html'
|
||||
? [...def, ...Array.from(rule.style).filter(name => name.startsWith('--'))] : def),
|
||||
[],
|
||||
),
|
||||
|
|
@ -159,13 +169,25 @@ export default {
|
|||
/* Returns a complmenting text color for the palete input foreground */
|
||||
/* White if the color is dark, otherwise black */
|
||||
getForegroundColor(colorHex) {
|
||||
/* Converts a 3-digit hex code to a 6-digit hex code (e.g. #f01 --> #ff0011) */
|
||||
const threeToSix = (hex) => {
|
||||
let digit = hex;
|
||||
digit = digit.split('').map((item) => (item === '#' ? item : item + item)).join('');
|
||||
return digit;
|
||||
};
|
||||
/* Converts hex code to RGB (e.g. #ff0011 --> rgb(255,0,0) ) */
|
||||
const hexToRgb = (hex) => {
|
||||
const colorParts = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
let hexCode = hex.slice(0, 7);
|
||||
if (hex.startsWith('#') && hex.length === 4) hexCode = threeToSix(hexCode);
|
||||
const colorParts = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hexCode);
|
||||
if (!colorParts || colorParts.length < 3) return 'black';
|
||||
const parse = (index) => parseInt(colorParts[index], 16);
|
||||
return colorParts ? { r: parse(1), g: parse(2), b: parse(3) } : null;
|
||||
};
|
||||
/* Given an RGB value, return the lightness ratio */
|
||||
const getLightness = (rgb) => (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
|
||||
if (!colorHex.startsWith('#')) return 'white'; // Not a hex, do nothing
|
||||
// Convert hex to RGB obj, get lightness, and return opposing color
|
||||
return getLightness(hexToRgb(colorHex.trim())) < 100 ? 'white' : 'black';
|
||||
},
|
||||
/* The contents of the style attribute, to set background and text color of swatch */
|
||||
|
|
@ -179,6 +201,7 @@ export default {
|
|||
// If value is a dimension, then it aint a color
|
||||
if ((/rem|px|%/.exec(variableValue))) return false;
|
||||
const nonColorVariables = [ // Known non-color variables
|
||||
'--font-headings', '--font-body', '--font-monospace',
|
||||
'--curve-factor', '--curve-factor-navbar', '--curve-factor-small',
|
||||
'--dimming-factor', '--scroll-bar-width', '--header-height', '--footer-height',
|
||||
'--item-group-padding', '--item-shadow', '--item-hover-shadow:', '--item-icon-transform',
|
||||
|
|
@ -189,6 +212,10 @@ export default {
|
|||
if (nonColorVariables.includes(`--${variableName}`)) return false;
|
||||
return true; // It must be a color, we'll use the color picker
|
||||
},
|
||||
/* Determine if a given key is that of a known font variable, or has a long value */
|
||||
isTextual(varName, varValue) {
|
||||
return varName.startsWith('font-') || (varValue && varValue.length > 12);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -202,7 +229,7 @@ div.theme-configurator-wrapper {
|
|||
right: 1rem;
|
||||
width: 16rem;
|
||||
min-height: 12rem;
|
||||
max-height: 28rem;
|
||||
max-height: 32rem;
|
||||
padding: 0.5rem;
|
||||
z-index: 5;
|
||||
overflow-y: visible;
|
||||
|
|
@ -218,7 +245,7 @@ div.theme-configurator-wrapper {
|
|||
}
|
||||
|
||||
div.color-row-container {
|
||||
max-height: 16rem;
|
||||
max-height: 20rem;
|
||||
overflow-y: visible;
|
||||
@extend .scroll-bar;
|
||||
div.color-row {
|
||||
|
|
@ -250,6 +277,15 @@ div.theme-configurator-wrapper {
|
|||
box-shadow: inset 0 0 4px 4px #00000080;
|
||||
outline: none;
|
||||
}
|
||||
&.long-input {
|
||||
cursor: text;
|
||||
font-style: italic;
|
||||
font-weight: 200;
|
||||
padding: 0.5rem 0.2rem;
|
||||
font-size: 0.75rem;
|
||||
width: 9rem;
|
||||
&:hover { box-shadow: none; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -42,6 +42,8 @@
|
|||
--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);
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
|
||||
html[data-theme='callisto'] {
|
||||
--primary: #00CCB4;
|
||||
--background: #141b33;
|
||||
--background-darker: #060913;
|
||||
--item-group-background: #0b1021;
|
||||
--item-background: #141b33;
|
||||
--item-background-hover: #060913;
|
||||
--item-background: var(--background);
|
||||
--item-background-hover: var(--background-darker);
|
||||
--item-hover-shadow: 0 1px 3px #00ccb4b3, 0 1px 2px #00ccb4bf;
|
||||
--primary: #00CCB4;
|
||||
--font-body: 'Inconsolata', 'Georgia', sans-serif;
|
||||
--font-headings: 'PTMono', 'Courier New', monospace;
|
||||
}
|
||||
|
|
@ -16,7 +16,7 @@ html[data-theme='thebe'] {
|
|||
--background-darker: #060913;
|
||||
--item-group-background: #0b1021;
|
||||
--item-background: #141b33;
|
||||
--item-background-hover: #060913;
|
||||
--item-background-hover: var(--background-darker);
|
||||
--item-hover-shadow: 0 1px 3px #9660ecb3, 0 1px 2px #9660ecbf;
|
||||
--primary: #b187f5;
|
||||
--item-group-outer-background: #9660EC
|
||||
|
|
@ -26,17 +26,17 @@ html[data-theme='thebe'] {
|
|||
|
||||
html[data-theme='dracula'] {
|
||||
--font-headings: 'Allerta Stencil', sans-serif;
|
||||
--primary: #7a8cc5;
|
||||
--primary: #98ace9;
|
||||
--background: #44475a;
|
||||
--background-darker: #282a36;
|
||||
--item-group-background: #282a36;
|
||||
--item-group-background: var(--background-darker);
|
||||
--item-background: none;
|
||||
--item-background-hover: #191b22;
|
||||
--item-shadow: none;
|
||||
--item-hover-shadow: none;
|
||||
--settings-text-color: #98ace9;
|
||||
--config-settings-color: #98ace9;
|
||||
--item-group-outer-background: #282a36;
|
||||
--settings-text-color: var(--primary);
|
||||
--config-settings-color: var(--primary);
|
||||
--item-group-outer-background: var(--background-darker);
|
||||
.item { border: 1px solid var(--primary); }
|
||||
.collapsable:nth-child(1n) label { color: #8be9fd; }
|
||||
.collapsable:nth-child(2n) label { color: #50fa7b; }
|
||||
|
|
@ -47,45 +47,48 @@ html[data-theme='dracula'] {
|
|||
|
||||
html[data-theme='bee'] {
|
||||
--primary: #c3eb5c;
|
||||
--background: #0b1021;
|
||||
--item-background: #1c2636;
|
||||
--item-group-background: #0b1021;
|
||||
--nav-link-background-color: #0b1021;
|
||||
--item-group-background: var(--background);
|
||||
--nav-link-background-color: var(--background);
|
||||
--font-headings: 'Sniglet', cursive;
|
||||
}
|
||||
|
||||
html[data-theme='raspberry-jam'] {
|
||||
--primary: #eb2d6c;
|
||||
--background: #0b1021;
|
||||
--item-background: #1c2636;
|
||||
--item-group-background: #0b1021;
|
||||
--nav-link-background-color: #0b1021;
|
||||
--config-code-background: #0b1021;
|
||||
--config-code-color: #eb2d6c;
|
||||
--item-group-background: var(--background);
|
||||
--nav-link-background-color: var(--background);
|
||||
--config-code-background: #1c1e24;
|
||||
--config-code-color: var(--primary);
|
||||
--font-headings: 'Sniglet', cursive;
|
||||
}
|
||||
|
||||
html[data-theme='tiger'] {
|
||||
--primary: #f58233;
|
||||
--background: #0b1021;
|
||||
--item-background: #1c2636;
|
||||
--item-group-background: #0b1021;
|
||||
--nav-link-background-color: #0b1021;
|
||||
--item-group-background: var(--background);
|
||||
--nav-link-background-color: var(--background);
|
||||
--font-headings: 'Sniglet', cursive;
|
||||
}
|
||||
|
||||
html[data-theme='matrix-red'] {
|
||||
--background: #000;
|
||||
--background-darker: #000;
|
||||
--primary: red;
|
||||
--outline-color: red;
|
||||
--curve-factor: 0px;
|
||||
--background: var(--black);
|
||||
--background-darker: var(--black);
|
||||
--primary: #f00;
|
||||
--outline-color: var(--primary);
|
||||
--curve-factor: 0;
|
||||
--font-body: 'Cutive Mono', monospace;
|
||||
--font-headings: 'VT323', monospace;
|
||||
}
|
||||
|
||||
html[data-theme='matrix'] {
|
||||
--background: #000;
|
||||
--background-darker: #000;
|
||||
--background: var(--black);
|
||||
--background-darker: var(--black);
|
||||
--primary: #2bca2b;
|
||||
--outline-color: #2bca2b;
|
||||
--outline-color: var(--primary);
|
||||
--curve-factor: 0px;
|
||||
--font-body: 'Cutive Mono', monospace;
|
||||
--font-headings: 'VT323', monospace;
|
||||
|
|
@ -133,33 +136,34 @@ html[data-theme='blue-purple'] {
|
|||
}
|
||||
|
||||
html[data-theme='hacker-girl'] {
|
||||
--background: #000;
|
||||
--background-darker: #000;
|
||||
--background: var(--black);
|
||||
--background-darker: var(--black);
|
||||
--primary: #e435f1;
|
||||
--outline-color: #e435f1;
|
||||
--outline-color: var(--primary);
|
||||
--curve-factor: 0px;
|
||||
--font-body: 'Cutive Mono', monospace;
|
||||
--font-headings: 'VT323', monospace;
|
||||
}
|
||||
|
||||
html[data-theme='high-contrast-light'] {
|
||||
--background: #fff;
|
||||
--background-darker: #fff;
|
||||
--item-group-background: #fff;
|
||||
--item-background: #fff;
|
||||
--primary: #000;
|
||||
--outline-color: #000;
|
||||
--primary: var(--black);
|
||||
--background: var(--white);
|
||||
--background-darker: var(--white);
|
||||
--item-group-background: var(--background-darker);
|
||||
--item-background: var(--background);
|
||||
--outline-color: var(--primary);
|
||||
--curve-factor: 0px;
|
||||
--config-code-color: #000;
|
||||
--config-code-color: var(--primary);
|
||||
--font-headings: 'PTMono', 'Courier New', monospace;
|
||||
}
|
||||
|
||||
html[data-theme='high-contrast-dark'] {
|
||||
--background: #000;
|
||||
--background-darker: #000;
|
||||
--item-group-background: #000;
|
||||
--primary: #fff;
|
||||
--outline-color: #fff;
|
||||
--primary: var(--white);
|
||||
--background: var(--black);
|
||||
--background-darker: var(--black);
|
||||
--item-group-background: var(--background-darker);
|
||||
--item-background: var(--background);
|
||||
--outline-color: var(--primary);
|
||||
--curve-factor: 0px;
|
||||
--font-headings: 'PTMono', 'Courier New', monospace;
|
||||
}
|
||||
|
|
@ -191,42 +195,42 @@ html[data-theme='nord-frost'] {
|
|||
html[data-theme='material-original'] {
|
||||
--font-body: 'Roboto', serif;
|
||||
--primary: #29B6F6;
|
||||
--settings-text-color: #01579b;
|
||||
--background: #f1f1f1;
|
||||
--background-darker: #01579B;
|
||||
--item-group-heading-text-color: #01579B;
|
||||
--settings-text-color: var(--background-darker);
|
||||
--item-group-heading-text-color: var(--background-darker);
|
||||
--item-group-shadow: none;
|
||||
--item-group-outer-background: none;
|
||||
--item-group-background: none;
|
||||
--item-background: #fff;
|
||||
--item-background-hover: #fff;
|
||||
--settings-background: #29B6F6;
|
||||
--search-container-background: #29B6F6;
|
||||
--item-background: var(--white);
|
||||
--item-background-hover: var(--white);
|
||||
--settings-background: var(--primary);
|
||||
--search-container-background: var(--primary);
|
||||
--curve-factor: 2px;
|
||||
--curve-factor-navbar: 0;
|
||||
--item-group-padding: 5px 0 0;
|
||||
--item-text-color: #01579B;
|
||||
--item-text-color: var(--background-darker);
|
||||
--item-shadow: 0 1px 3px #0000001f, 0 1px 2px #0000003d;
|
||||
--item-hover-shadow: 0 1px 4px #00000029, 0 2px 4px #0000002a;
|
||||
--item-icon-transform: drop-shadow(1px 2px 1px var(--transparent-30)) saturate(0.65);
|
||||
--item-icon-transform-hover: drop-shadow(1px 3px 2px var(--transparent-30)) saturate(2);
|
||||
--settings-container-shadow: 0 1px 3px #0000005e, 0 1px 2px #00000085;
|
||||
--welcome-popup-background: #01579b;
|
||||
--welcome-popup-background: var(--background-darker);
|
||||
--welcome-popup-text-color: #ffffff;
|
||||
--config-code-color: #000;
|
||||
--item-group-heading-text-color-hover: #01579b;
|
||||
--config-settings-background: #01579b;
|
||||
--config-settings-color: #fff;
|
||||
--interactive-editor-background: #01579b;
|
||||
--interactive-editor-color: #fff;
|
||||
--interactive-editor-background-darker: #29B6F6;
|
||||
--heading-text-color: #fff;
|
||||
--config-code-color: var(--black);
|
||||
--item-group-heading-text-color-hover: var(--background-darker);
|
||||
--config-settings-background: var(--background-darker);
|
||||
--config-settings-color: var(--white);
|
||||
--interactive-editor-background: var(--background-darker);
|
||||
--interactive-editor-color: var(--white);
|
||||
--interactive-editor-background-darker: var(--primary);
|
||||
--heading-text-color: var(--white);
|
||||
--status-check-tooltip-background: #f2f2f2;
|
||||
--status-check-tooltip-color: #01579b;
|
||||
--status-check-tooltip-color: var(--background-darker);
|
||||
--description-tooltip-background: #f2f2f2;
|
||||
--description-tooltip-color: #01579b;
|
||||
--login-form-background: #fff;
|
||||
--about-page-accent: #000;
|
||||
--description-tooltip-color: var(--background-darker);
|
||||
--login-form-background: var(--white);
|
||||
--about-page-accent: var(--black);
|
||||
--about-page-color: var(--background-darker);
|
||||
--about-page-background: var(--background);
|
||||
--context-menu-background: var(--white);
|
||||
|
|
@ -293,14 +297,15 @@ html[data-theme='colorful'] {
|
|||
--font-headings: 'Podkova', monospace;
|
||||
--primary: #e8eae1;
|
||||
--background: #0b1021;
|
||||
--item-background: #05070e;
|
||||
--item-background-hover: #0b1021;
|
||||
--background-darker: #05070e;
|
||||
--item-background: var(--background-darker);
|
||||
--item-background-hover: var(--background);
|
||||
--item-group-background: transparent;
|
||||
--item-group-outer-background: #05070e;
|
||||
--item-group-heading-text-color: #e8eae1;
|
||||
--item-group-heading-text-color-hover: #fff;
|
||||
--item-hover-shadow: 1px 4px 6px #000000;
|
||||
--nav-link-background-color: #141826;
|
||||
--item-group-outer-background: var(--background-darker);
|
||||
--item-group-heading-text-color: var(--primary);
|
||||
--item-group-heading-text-color-hover: var(--primary);
|
||||
--item-hover-shadow: 1px 4px 6px var(--black);
|
||||
--nav-link-background-color: var(--background);
|
||||
.item-wrapper:nth-child(1n) { .item { color: #eb5cad; border: 1px solid #eb5cad; } }
|
||||
.item-wrapper:nth-child(2n) { .item { color: #985ceb; border: 1px solid #985ceb; } }
|
||||
.item-wrapper:nth-child(3n) { .item { color: #5c90eb; border: 1px solid #5c90eb; } }
|
||||
|
|
@ -313,12 +318,12 @@ html[data-theme='colorful'] {
|
|||
opacity: 0.85;
|
||||
outline: none;
|
||||
background: currentColor;
|
||||
span.text, p.description { color: #05070e; }
|
||||
span.text, p.description { color: var(--background-darker); }
|
||||
i.fas, i.fab, i.far, i.fal, i.fad {
|
||||
filter: drop-shadow(1px 3px 2px var(--transparent-50));
|
||||
color: #05070e;
|
||||
color: var(--background-darker);
|
||||
}
|
||||
svg path { fill: #05070e; }
|
||||
svg path { fill: var(--background-darker); }
|
||||
}
|
||||
h1, h2, h3, h4 {
|
||||
font-weight: normal;
|
||||
|
|
@ -505,35 +510,35 @@ html[data-theme='material'] {
|
|||
--item-group-outer-background: none;
|
||||
--item-group-shadow: none;
|
||||
--item-group-background: none;
|
||||
--item-background: #fff;
|
||||
--item-background-hover: #fff;
|
||||
--item-background: var(--white);
|
||||
--item-background-hover: var(--white);
|
||||
--item-shadow: 0 1px 3px #0000001f, 0 1px 2px #0000003d;
|
||||
--item-hover-shadow: 0 1px 4px #00000029, 0 2px 4px #0000002a;
|
||||
--item-text-color: #363636;
|
||||
--item-group-heading-text-color-hover: #363636;
|
||||
--item-text-color: var(--primary);
|
||||
--item-group-heading-text-color-hover: var(--primary);
|
||||
--item-icon-transform-hover: none;
|
||||
--nav-link-background-color: #0c4eba;
|
||||
--nav-link-text-color: #fff;
|
||||
--nav-link-text-color: var(--white);
|
||||
--nav-link-border-color: #0c4eba;
|
||||
--settings-text-color: #363636;
|
||||
--config-code-color: #363636;
|
||||
--settings-text-color: var(--primary);
|
||||
--config-code-color: var(--primary);
|
||||
--config-settings-background: #f5f5f5;
|
||||
--config-settings-color: #473f3f;
|
||||
--interactive-editor-color: #473f3f;
|
||||
--interactive-editor-background: #f5f5f5;
|
||||
--interactive-editor-background-darker: #fff;
|
||||
--heading-text-color: #fff;
|
||||
--interactive-editor-background-darker: var(--white);
|
||||
--heading-text-color: var(--white);
|
||||
--curve-factor: 3px;
|
||||
--curve-factor-navbar: 8px;
|
||||
--search-container-background: #4285f4;
|
||||
--welcome-popup-text-color: #f5f5f5;
|
||||
--footer-text-color: #f5f5f5cc;
|
||||
// --login-form-background-secondary: #f5f5f5cc;
|
||||
--context-menu-background: #fff;
|
||||
--context-menu-background: var(--white);
|
||||
--context-menu-secondary-color: #f5f5f5;
|
||||
--transparent-white-50: #00000080;
|
||||
--status-check-tooltip-background: #fff;
|
||||
--description-tooltip-background: #fff;
|
||||
--status-check-tooltip-background: var(--white);
|
||||
--description-tooltip-background: var(--white);
|
||||
--description-tooltip-color: #473f3f;
|
||||
--side-bar-background-lighter: #0c4eba;
|
||||
--side-bar-item-background: #f5f5f5;
|
||||
|
|
@ -543,10 +548,10 @@ html[data-theme='material'] {
|
|||
--minimal-view-settings-color: var(--primary);
|
||||
--minimal-view-section-heading-color: var(--primary);
|
||||
--minimal-view-section-heading-background: #f6f6f6;
|
||||
--minimal-view-search-background: #fff;
|
||||
--minimal-view-search-background: var(--white);
|
||||
--minimal-view-search-color: var(--primary);
|
||||
--minimal-view-group-color: var(--primary);
|
||||
--minimal-view-group-background: #fff;
|
||||
--minimal-view-group-background: var(--white);
|
||||
|
||||
.minimal-section-inner.selected, div.minimal-section-heading {
|
||||
border: none;
|
||||
|
|
@ -568,17 +573,17 @@ html[data-theme='material'] {
|
|||
|
||||
header {
|
||||
background: #4285f4;
|
||||
color: #fff;
|
||||
color: var(--white);
|
||||
.page-titles span.subtitle {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
footer {
|
||||
opacity: 1;
|
||||
color: #fff;
|
||||
color: var(--white);
|
||||
}
|
||||
section.filter-container form label {
|
||||
color: #fff;
|
||||
color: var(--white);
|
||||
}
|
||||
.prism-editor-wrapper {
|
||||
background: #f5f5f5;
|
||||
|
|
@ -682,28 +687,28 @@ html[data-theme='minimal-light'] {
|
|||
--item-background-hover: #f2f2f2;
|
||||
--item-shadow: none;
|
||||
--item-hover-shadow: none;
|
||||
--item-text-color: #101931;
|
||||
--item-group-heading-text-color-hover: #101931;
|
||||
--settings-text-color: #101931;
|
||||
--config-code-color: #101931;
|
||||
--item-text-color: var(--background-darker);
|
||||
--item-group-heading-text-color-hover: var(--background-darker);
|
||||
--settings-text-color: var(--background-darker);
|
||||
--config-code-color: var(--background-darker);
|
||||
--nav-link-background-color: none;
|
||||
--search-container-background: #fff;
|
||||
--search-container-background: var(--white);
|
||||
--curve-factor: 4px;
|
||||
--curve-factor-navbar: 8px;
|
||||
--status-check-tooltip-background: #f2f2f2;
|
||||
--status-check-tooltip-color: #000;
|
||||
--status-check-tooltip-color: var(--black);
|
||||
--description-tooltip-background: #f2f2f2;
|
||||
--description-tooltip-color: #000;
|
||||
--login-form-color: #101931;
|
||||
--description-tooltip-color: var(--black);
|
||||
--login-form-color: var(--background-darker);
|
||||
--about-page-background: var(--background);
|
||||
--about-page-color: var(--background-darker);
|
||||
--context-menu-color: var(--background-darker);
|
||||
--context-menu-secondary-color: var(--primary);
|
||||
section.filter-container {
|
||||
background: #fff;
|
||||
background: var(--white);
|
||||
border-bottom: 1px dashed #00000038;
|
||||
input#filter-tiles {
|
||||
border: 1px solid #101931;
|
||||
border: 1px solid var(--background-darker);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -716,18 +721,18 @@ html[data-theme='minimal-dark'] {
|
|||
--item-group-shadow: none;
|
||||
--item-group-background: none;
|
||||
--item-background: none;
|
||||
--item-background-hover: #090b0e;
|
||||
--item-background-hover: var(--background-darker);
|
||||
--item-shadow: none;
|
||||
--item-hover-shadow: none;
|
||||
--item-text-color: #fff;
|
||||
--item-group-heading-text-color-hover: #fff;
|
||||
--settings-text-color: #fff;
|
||||
--config-code-color: #fff;
|
||||
--item-text-color: var(--white);
|
||||
--item-group-heading-text-color-hover: var(--white);
|
||||
--settings-text-color: var(--white);
|
||||
--config-code-color: var(--white);
|
||||
--nav-link-background-color: none;
|
||||
--search-container-background: #14171e;
|
||||
--search-container-background: var(--background);
|
||||
--curve-factor: 4px;
|
||||
--curve-factor-navbar: 8px;
|
||||
--item-group-heading-text-color: #fff;
|
||||
--item-group-heading-text-color: var(--white);
|
||||
--item-group-heading-text-color-hover: #ffffffbf;
|
||||
--about-page-background: var(--background);
|
||||
--about-page-color: var(--primary);
|
||||
|
|
@ -740,7 +745,7 @@ html[data-theme='minimal-dark'] {
|
|||
background: #14171e;
|
||||
border-bottom: 1px dashed #ffffff38;
|
||||
input#filter-tiles {
|
||||
border: 1px solid #fff;
|
||||
border: 1px solid var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -752,29 +757,26 @@ html[data-theme='minimal-dark'] {
|
|||
html[data-theme='vaporware'] {
|
||||
--primary: #09bfe6;
|
||||
--background: #100e2c;
|
||||
--background-darker: #6c27ea;
|
||||
--background-darker: linear-gradient(0deg, rgba(108,39,234,1) 0%, rgba(132,76,235,1) 80%);
|
||||
--settings-text-color: #6c27ea;
|
||||
--background-darker: #7b2af1;
|
||||
--settings-text-color: #8d51fc;
|
||||
--item-group-outer-background: #096de6;
|
||||
--item-group-outer-background: var(--primary);
|
||||
--item-group-background: #190e2c;
|
||||
--item-group-heading-text-color: #190e2c;
|
||||
--item-group-heading-text-color-hover: #5118b9;
|
||||
--item-group-background: var(--background);
|
||||
--item-group-heading-text-color: var(--background);
|
||||
--item-group-heading-text-color-hover: var(--background-darker);
|
||||
--item-text-color: var(--primary);
|
||||
--item-background: #1a174d;
|
||||
--item-background-hover: #2b2670;
|
||||
--item-background-hover: var(--background);;
|
||||
--footer-text-color: var(--white);
|
||||
--item-shadow: none;
|
||||
--curve-factor: 2px;
|
||||
--curve-factor-navbar: 6px;
|
||||
--login-form-color: #09bfe6;
|
||||
--config-settings-background: #100e2c;
|
||||
--status-check-tooltip-background: #100e2c;
|
||||
--description-tooltip-background: #100e2c;
|
||||
|
||||
.home {
|
||||
background: linear-gradient(180deg, rgba(16,14,44,1) 10%, rgba(27,24,79,1) 40%, rgba(16,14,44,1) 100%);
|
||||
}
|
||||
--login-form-color: var(--primary);
|
||||
--config-settings-background: var(--background);
|
||||
--status-check-tooltip-background: var(--background);
|
||||
--description-tooltip-background: var(--background);
|
||||
--heading-text-color: var(--background);
|
||||
--search-label-color: var(--background);
|
||||
|
||||
div.item-group-container {
|
||||
gap: 0.3rem;
|
||||
|
|
@ -819,29 +821,33 @@ html[data-theme='vaporware'] {
|
|||
background: url('https://i.ibb.co/JqcJcGK/vaporwave-sunset-wallpaper.jpg');
|
||||
background-size: cover;
|
||||
}
|
||||
// body {
|
||||
// background: url('https://i.ibb.co/JqcJcGK/vaporwave-sunset-wallpaper.jpg');
|
||||
// background-size: cover;
|
||||
// div.home, div.options-outer, div.options-container, section.filter-container {
|
||||
// background: none;
|
||||
// }
|
||||
// }
|
||||
body {
|
||||
background: url('https://i.ibb.co/JqcJcGK/vaporwave-sunset-wallpaper.jpg');
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
background-position: center center;
|
||||
// Remove background from certain components
|
||||
div.home, div.options-outer, div.options-container, section.filter-container,
|
||||
section.settings-outer, div.show-hide-container.hide-btn, div.show-hide-container.show-btn {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme='glow'], html[data-theme=glow-colorful] {
|
||||
--primary: #5c6da9;
|
||||
--background: #f6f6f6;
|
||||
--background-darker: #fff;
|
||||
--background-darker: var(--white);
|
||||
--curve-factor: 12px;
|
||||
--item-group-background: #fff;
|
||||
--item-group-outer-background: #fff;
|
||||
--item-background: #fff;
|
||||
--item-group-background: var(--white);
|
||||
--item-group-outer-background: var(--white);
|
||||
--item-background: var(--white);
|
||||
--font-headings: 'Sniglet', cursive;
|
||||
|
||||
--item-group-heading-text-color: #5c6da9;
|
||||
--item-group-heading-text-color-hover: #5c6da9;
|
||||
--item-group-heading-text-color: var(--primary);
|
||||
--item-group-heading-text-color-hover: var(--primary);
|
||||
--item-group-shadow: 0 5px 16px 0 #9f72ff33;
|
||||
--item-background-hover: #fff;
|
||||
--item-background-hover: var(--white);
|
||||
--item-shadow: 0 1px 5px 0 #8656ef80;
|
||||
--item-hover-shadow: 0 1px 8px 0 #8656efa6;
|
||||
--item-icon-transform: drop-shadow(1px 2px 3px var(--transparent-50)) saturate(0.95);
|
||||
|
|
@ -883,7 +889,7 @@ html[data-theme='glow'], html[data-theme=glow-colorful] {
|
|||
--item-group-shadow: 0 5px 16px 0 #9f72ff33;
|
||||
--item-group-heading-text-color: #8656ef;
|
||||
--item-group-heading-text-color-hover: #783cfb;
|
||||
--item-background-hover: #fff;
|
||||
--item-background-hover: var(--white);
|
||||
--item-shadow: 0 1px 5px 0 #8656ef80;
|
||||
--item-hover-shadow: 0 1px 8px 0 #8656efa6;
|
||||
--item-icon-transform: drop-shadow(1px 2px 3px #8656ef80) saturate(0.95);
|
||||
|
|
@ -894,7 +900,7 @@ html[data-theme='glow'], html[data-theme=glow-colorful] {
|
|||
--item-group-shadow: 0 5px 16px 0 #728cff33;
|
||||
--item-group-heading-text-color: #d356ef;
|
||||
--item-group-heading-text-color-hover: #d73bf9;
|
||||
--item-background-hover: #fff;
|
||||
--item-background-hover: var(--white);
|
||||
--item-shadow: 0 1px 5px 0 #d356ef80;
|
||||
--item-hover-shadow: 0 1px 8px 0 #d356efa6;
|
||||
--item-icon-transform: drop-shadow(1px 2px 3px #d356ef80) saturate(0.95);
|
||||
|
|
@ -905,7 +911,7 @@ html[data-theme='glow'], html[data-theme=glow-colorful] {
|
|||
--item-group-shadow: 0 5px 16px 0 #728cff33;
|
||||
--item-group-heading-text-color: #56ddef;
|
||||
--item-group-heading-text-color-hover: #3cdefb;
|
||||
--item-background-hover: #fff;
|
||||
--item-background-hover: var(--white);
|
||||
--item-shadow: 0 1px 5px 0 #56ddef80;
|
||||
--item-hover-shadow: 0 1px 8px 0 #56ddefa6;
|
||||
--item-icon-transform: drop-shadow(1px 2px 3px #56ddef80) saturate(0.95);
|
||||
|
|
@ -986,7 +992,7 @@ html[data-theme="dashy-docs"] {
|
|||
--background: #202020;
|
||||
--background-darker: #121212;
|
||||
--item-group-background: none;
|
||||
--item-group-outer-background: #121212;
|
||||
--item-group-outer-background: var(--background-darker);
|
||||
--item-group-heading-text-color: var(--background);
|
||||
--item-group-heading-text-color-hover: var(--background);
|
||||
--item-background: var(--background);
|
||||
|
|
@ -1112,6 +1118,160 @@ html[data-theme="dashy-docs"] {
|
|||
}
|
||||
}
|
||||
|
||||
html[data-theme="adventure"] {
|
||||
// Main colors
|
||||
--primary: #ffffffe6;
|
||||
--background: #0b1021;
|
||||
--background-darker: #181c3a;
|
||||
// Typography
|
||||
--font-headings: 'Podkova', 'Roboto', serif;
|
||||
--font-body: 'Roboto', serif;
|
||||
// Items
|
||||
--item-background: #181c3a80;
|
||||
--item-background-hover: #181c3a99;
|
||||
--item-shadow: 1px 1px 2px #130f23;
|
||||
--item-hover-shadow: 2px 2px 4px #130f23;
|
||||
// Sections
|
||||
--item-group-heading-text-color: var(--white);
|
||||
--item-group-heading-text-color-hover: var(--primary);
|
||||
--item-group-shadow: none;
|
||||
--item-group-background: none;
|
||||
--item-group-outer-background: none;
|
||||
// Background Image
|
||||
body {
|
||||
background: url('https://i.ibb.co/wdqSsGh/adventure-bg.jpg');
|
||||
background-size: cover;
|
||||
}
|
||||
// Remove background from certain components
|
||||
div.home, div.options-outer, div.options-container, section.filter-container,
|
||||
section.settings-outer, div.show-hide-container.hide-btn, div.show-hide-container.show-btn {
|
||||
background: none;
|
||||
}
|
||||
// Style overides
|
||||
label.lbl-toggle h3 { font-size: 1.3rem; font-weight: bold; }
|
||||
.content-inner { border-top: 1px dashed var(--primary); }
|
||||
a.item.size-large:hover { border-left: 3px solid var(--white); }
|
||||
.item.size-large .tile-title p.description { height: 3rem; }
|
||||
.is-collapsed {
|
||||
background: var(--item-background);
|
||||
box-shadow: var(--item-shadow);
|
||||
&:hover {
|
||||
background: var(--item-background-hover);
|
||||
box-shadow: var(--item-hover-shadow);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme="color-block"] {
|
||||
// Main colors
|
||||
--primary: #E94560;
|
||||
--background: #16213E;
|
||||
--background-darker: #0e172b;
|
||||
// Typography
|
||||
--font-headings: 'Podkova', 'Roboto', serif;
|
||||
--font-body: 'Roboto', serif;
|
||||
// Items
|
||||
--item-background: #1b294c;
|
||||
--item-background-hover: var(--item-background);
|
||||
--item-shadow: 4px 4px 0px var(--background-darker), -3px 0px 0px var(--primary), 2px 2px 6px var(--black);
|
||||
--item-hover-shadow: 6px 6px 0px var(--background-darker), -5px 0px 0px var(--primary), 2px 2px 9px var(--black);
|
||||
// Sections
|
||||
--item-group-heading-text-color: var(--white);
|
||||
--item-group-heading-text-color-hover: var(--primary);
|
||||
--item-group-shadow: none;
|
||||
--item-group-background: none;
|
||||
--item-group-outer-background: none;
|
||||
// Nav Links
|
||||
--nav-link-background-color: var(--background);
|
||||
--nav-link-background-color-hover: var(--background);
|
||||
--nav-link-border-color: transparent;
|
||||
--nav-link-border-color-hover: transparent;
|
||||
--nav-link-shadow: 4px 4px 0px var(--background-darker), -3px 0px 0px var(--primary), 2px 2px 6px var(--black);
|
||||
--nav-link-shadow-hover: 6px 6px 0px var(--background-darker), -4px 0px 0px var(--primary), 2px 2px 9px var(--black);
|
||||
// Misc
|
||||
--curve-factor: 4px;
|
||||
--curve-factor-navbar: 8px;
|
||||
|
||||
// Style overrides
|
||||
label.lbl-toggle h3 { font-size: 1.3rem; font-weight: bold; }
|
||||
.content-inner { border-top: 1px dashed var(--primary); }
|
||||
.item.size-large .tile-title p.description { height: 3rem; }
|
||||
.item, .nav-outer nav .nav-item { border-radius: 0; }
|
||||
.item.size-large { margin: 0.5rem; }
|
||||
// Show outline when collapsed
|
||||
.is-collapsed {
|
||||
background: var(--item-background);
|
||||
box-shadow: var(--item-shadow);
|
||||
&:hover {
|
||||
background: var(--item-background-hover);
|
||||
box-shadow: var(--item-hover-shadow);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme="one-dark"] {
|
||||
|
||||
// Main colors
|
||||
--primary: #c5cad3;
|
||||
--background: #282c33;
|
||||
--background-darker: #1c1f23;
|
||||
// Typography
|
||||
--font-headings: 'Podkova', 'Roboto', serif;
|
||||
--font-body: 'Roboto', serif;
|
||||
// Items
|
||||
--item-background: var(--background-darker);
|
||||
--item-background-hover: var(--item-background);
|
||||
--item-shadow: 4px 4px 0px var(--background-darker), -3px 0px 0px var(--primary), 2px 2px 6px var(--black);
|
||||
--item-hover-shadow: 6px 6px 0px var(--background-darker), -5px 0px 0px var(--primary), 2px 2px 9px var(--black);
|
||||
// Sections
|
||||
--item-group-heading-text-color: var(--white);
|
||||
--item-group-heading-text-color-hover: var(--primary);
|
||||
--item-group-shadow: none;
|
||||
--item-group-background: none;
|
||||
--item-group-outer-background: none;
|
||||
// Nav Links
|
||||
--nav-link-background-color: var(--background);
|
||||
--nav-link-background-color-hover: var(--background);
|
||||
--nav-link-border-color: transparent;
|
||||
--nav-link-border-color-hover: transparent;
|
||||
--nav-link-shadow: 4px 4px 0px var(--background-darker), -3px 0px 0px var(--primary), 2px 2px 6px var(--black);
|
||||
--nav-link-shadow-hover: 6px 6px 0px var(--background-darker), -4px 0px 0px var(--primary), 2px 2px 9px var(--black);
|
||||
// Misc
|
||||
--curve-factor: 4px;
|
||||
--curve-factor-navbar: 6px;
|
||||
|
||||
// Style overrides
|
||||
label.lbl-toggle h3 { font-size: 1.3rem; font-weight: bold; }
|
||||
.content-inner { border-top: 1px dashed var(--primary); }
|
||||
.item.size-large .tile-title p.description { height: 3rem; }
|
||||
.item, .nav-outer nav .nav-item { border-radius: 0; }
|
||||
.item.size-large { margin: 0.5rem; }
|
||||
// Show outline when collapsed
|
||||
.is-collapsed {
|
||||
background: var(--item-background);
|
||||
box-shadow: var(--item-shadow);
|
||||
&:hover {
|
||||
background: var(--item-background-hover);
|
||||
box-shadow: var(--item-hover-shadow);
|
||||
}
|
||||
}
|
||||
// Colored Item Accents
|
||||
.item-wrapper:nth-child(1n) { --current: #e06b74; }
|
||||
.item-wrapper:nth-child(2n) { --current: #98c379; }
|
||||
.item-wrapper:nth-child(3n) { --current: #e5c07a; }
|
||||
.item-wrapper:nth-child(4n) { --current: #62aeef; }
|
||||
.item-wrapper:nth-child(5n) { --current: #c678dd; }
|
||||
.item-wrapper:nth-child(6n) { --current: #55b6c2; }
|
||||
.item-wrapper .item {
|
||||
color: var(--current);
|
||||
box-shadow: -3px 0px 0px var(--current), 1px 1px 3px #000000e6;
|
||||
&:hover {
|
||||
box-shadow: -5px 0px 0px var(--current), 2px 2px 3px #000000e6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
html[data-theme="oblivion-blue"] {
|
||||
--primary: #82a5f3;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,17 +50,20 @@ module.exports = {
|
|||
'oblivion',
|
||||
'material',
|
||||
'material-dark',
|
||||
'dracula',
|
||||
'colorful',
|
||||
'dashy-docs',
|
||||
'colorful',
|
||||
'one-dark',
|
||||
'dracula',
|
||||
'adventure',
|
||||
'nord-frost',
|
||||
'nord',
|
||||
'minimal-dark',
|
||||
'minimal-light',
|
||||
'nord',
|
||||
'nord-frost',
|
||||
'thebe',
|
||||
'cyberpunk',
|
||||
'matrix',
|
||||
'matrix-red',
|
||||
'color-block',
|
||||
'glow',
|
||||
'raspberry-jam',
|
||||
'bee',
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@
|
|||
:class="`item-group-container `
|
||||
+ `orientation-${layout} `
|
||||
+ `item-size-${itemSizeBound} `
|
||||
+ (isEditMode ? 'edit-mode ' : '')
|
||||
+ (singleSectionView ? 'single-section-view ' : '')
|
||||
+ (this.colCount ? `col-count-${this.colCount} ` : '')"
|
||||
>
|
||||
|
|
@ -350,6 +351,11 @@ export default {
|
|||
/* Hide when search term returns nothing */
|
||||
.no-results { display: none; }
|
||||
|
||||
/* Additional spacing when in edit mode */
|
||||
&.edit-mode {
|
||||
margin-bottom: 12rem;
|
||||
}
|
||||
|
||||
/* When in single-section view mode */
|
||||
&.single-section-view {
|
||||
display: block;
|
||||
|
|
|
|||
Loading…
Reference in New Issue