Implemented notes importing
This commit is contained in:
@@ -1,115 +1,287 @@
|
||||
:root {
|
||||
--window-close: #f77669;
|
||||
--window-minify: #ffcb6b;
|
||||
--window-expand: #c3e88d;
|
||||
|
||||
--background-header: #393d3e;
|
||||
--background-code: #1f1e1e;
|
||||
}
|
||||
|
||||
.twitch-note-container {
|
||||
position: fixed;
|
||||
z-index: 1000000;
|
||||
min-width: 420px;
|
||||
max-width: 95vw;
|
||||
min-height: 240px;
|
||||
max-height: 50vh;
|
||||
background: var(--color-background-base);
|
||||
border: var(--border-width-default) solid var(--color-border-base) !important;
|
||||
position: fixed;
|
||||
z-index: 1000000;
|
||||
min-width: 420px;
|
||||
max-width: 95vw;
|
||||
min-height: 240px;
|
||||
max-height: 50vh;
|
||||
background: var(--color-background-base);
|
||||
border: var(--border-width-default) solid var(--color-border-base) !important;
|
||||
}
|
||||
|
||||
.twitch-note-header {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border-bottom: var(--border-width-default) solid var(--color-border-base) !important;
|
||||
position: relative;
|
||||
cursor: move;
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border-bottom: var(--border-width-default) solid var(--color-border-base) !important;
|
||||
position: relative;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.twitch-note-title {
|
||||
color: var(--color-text-alt) !important;
|
||||
font-size: var(--font-size-6) !important;
|
||||
font-weight: var(--font-weight-semibold) !important;
|
||||
text-transform: uppercase !important;
|
||||
padding-left: calc((32px - var(--font-size-6)) / 2);
|
||||
color: var(--color-text-alt) !important;
|
||||
font-size: var(--font-size-6) !important;
|
||||
font-weight: var(--font-weight-semibold) !important;
|
||||
text-transform: uppercase !important;
|
||||
padding-left: calc((32px - var(--font-size-6)) / 2);
|
||||
}
|
||||
|
||||
.twitch-note-close-button {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
aspect-ration: 1;
|
||||
color: var(--color-text-alt) !important;
|
||||
font-size: var(--font-size-6) !important;
|
||||
font-weight: var(--font-weight-semibold) !important;
|
||||
text-transform: uppercase !important;
|
||||
border: var(--border-width-default) solid var(--color-border-base) !important;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
aspect-ratio: 1;
|
||||
color: var(--color-text-alt) !important;
|
||||
font-size: var(--font-size-6) !important;
|
||||
font-weight: var(--font-weight-semibold) !important;
|
||||
text-transform: uppercase !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.twitch-note-content {
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 32px;
|
||||
background: transparent;
|
||||
color: var(--color-text-base) !important;
|
||||
font-family: var(--font-base);
|
||||
vertical-align: baseline;
|
||||
outline: none;
|
||||
overflow: auto;
|
||||
padding: calc((32px - var(--font-size-6)) / 2);
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 32px;
|
||||
background: transparent;
|
||||
color: var(--color-text-base) !important;
|
||||
font-family: var(--font-base);
|
||||
vertical-align: baseline;
|
||||
outline: none;
|
||||
overflow: auto;
|
||||
padding: calc((32px - var(--font-size-6)) / 2);
|
||||
}
|
||||
|
||||
.twitch-note-save-button {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 32px;
|
||||
border-top: var(--border-width-default) solid var(--color-border-base) !important;
|
||||
cursor: pointer;
|
||||
color: var(--color-text-alt) !important;
|
||||
font-size: var(--font-size-6) !important;
|
||||
font-weight: var(--font-weight-semibold) !important;
|
||||
text-transform: uppercase !important;
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 32px;
|
||||
border-top: var(--border-width-default) solid var(--color-border-base) !important;
|
||||
cursor: pointer;
|
||||
color: var(--color-text-alt) !important;
|
||||
font-size: var(--font-size-6) !important;
|
||||
font-weight: var(--font-weight-semibold) !important;
|
||||
text-transform: uppercase !important;
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.twitch-notes-settings-button {
|
||||
z-index: var(--z-index-default) !important;
|
||||
position: relative !important;
|
||||
background-color: var(--color-background-button-primary-default);
|
||||
color: var(--color-text-button-primary);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
-webkit-box-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
justify-content: center;
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
border-radius: var(--border-radius-medium);
|
||||
font-size: var(--button-text-default);
|
||||
height: var(--button-size-default);
|
||||
padding: 0 var(--button-padding-x);
|
||||
z-index: var(--z-index-default) !important;
|
||||
position: relative !important;
|
||||
background-color: var(--color-background-button-primary-default);
|
||||
color: var(--color-text-button-primary);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
-webkit-box-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
justify-content: center;
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
border-radius: var(--border-radius-medium);
|
||||
font-size: var(--button-text-default);
|
||||
height: var(--button-size-default);
|
||||
padding: 0 var(--button-padding-x);
|
||||
}
|
||||
|
||||
.twitch-note-settings-container {
|
||||
position: absolute;
|
||||
z-index: var(--z-index-balloon);
|
||||
inset: auto 0px 100% auto;
|
||||
margin-bottom: 8px;
|
||||
margin-right: -5.3rem;
|
||||
.twitch-notes-settings-container {
|
||||
border: 0;
|
||||
font: inherit;
|
||||
padding: 0;
|
||||
vertical-align: baseline;
|
||||
position: fixed;
|
||||
z-index: var(--z-index-balloon);
|
||||
inset: auto 0 0 auto;
|
||||
margin: 0 69px 48px 0;
|
||||
}
|
||||
|
||||
.twitch-notes-settings-balloon {
|
||||
display: inline-block;
|
||||
max-width: 90vw;
|
||||
min-width: 0;
|
||||
white-space: nowrap;
|
||||
border-radius: 0.6rem !important;
|
||||
background-color: var(--color-background-base) !important;
|
||||
box-shadow: var(--shadow-elevation-2) !important;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.twitch-notes-settings-popover {
|
||||
white-space: normal;
|
||||
width: 32rem;
|
||||
}
|
||||
|
||||
.twitch-notes-settings-header {
|
||||
display: flex !important;
|
||||
-webkit-box-align: center !important;
|
||||
align-items: center !important;
|
||||
position: relative !important;
|
||||
padding-left: 1rem !important;
|
||||
padding-right: 1rem !important;
|
||||
background-color: var(--color-background-base) !important;
|
||||
min-height: 4rem;
|
||||
}
|
||||
|
||||
.twitch-notes-settings-header-left-element {
|
||||
left: 0 !important;
|
||||
margin-right: 0.5rem !important;
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
.twitch-notes-settings-header-center-element {
|
||||
-webkit-box-align: center !important;
|
||||
align-items: center !important;
|
||||
display: flex !important;
|
||||
text-align: center !important;
|
||||
-webkit-box-flex: 1 !important;
|
||||
flex-grow: 1 !important;
|
||||
-webkit-box-pack: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.twitch-notes-settings-header-center-element-content {
|
||||
line-height: 1.5;
|
||||
color: var(--color-text-alt) !important;
|
||||
font-size: var(--font-size-5) !important;
|
||||
font-weight: var(--font-weight-semibold) !important;
|
||||
}
|
||||
|
||||
|
||||
.twitch-notes-settings-header-right-element {
|
||||
right: 0 !important;
|
||||
margin-left: 0.5rem !important;
|
||||
}
|
||||
|
||||
.twitch-notes-settings-close-button {
|
||||
cursor: default;
|
||||
text-transform: none;
|
||||
text-indent: 0;
|
||||
text-shadow: none;
|
||||
letter-spacing: normal;
|
||||
text-rendering: auto;
|
||||
appearance: auto;
|
||||
writing-mode: horizontal-tb !important;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
font: inherit;
|
||||
border: none;
|
||||
font-size: var(--button-text-default);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
-webkit-box-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
border-radius: var(--border-radius-medium);
|
||||
height: calc(var(--button-size-default) - 1rem);
|
||||
width: calc(var(--button-size-default) - 1rem);
|
||||
background-color: var(--color-background-button-text-default);
|
||||
color: var(--color-fill-button-icon);
|
||||
}
|
||||
|
||||
.twitch-notes-settings-scrollable-area {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
max-height: 478px;
|
||||
}
|
||||
|
||||
.twitch-notes-settings-content {
|
||||
box-sizing: content-box;
|
||||
min-width: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
max-height: inherit!important;
|
||||
margin: 1rem;
|
||||
padding-bottom: 0!important;
|
||||
}
|
||||
|
||||
.twitch-notes-settings-option-line {
|
||||
position: relative !important;
|
||||
width: calc(100% - 2rem)!important;
|
||||
}
|
||||
|
||||
.twitch-notes-settings-option-line-button {
|
||||
border-radius: var(--border-radius-medium);
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.twitch-notes-settings-option-line-button:hover {
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
background-color: var(--color-background-interactable-hover);
|
||||
}
|
||||
|
||||
.twitch-notes-settings-option-line-button-container {
|
||||
display: flex !important;
|
||||
-webkit-box-align: center !important;
|
||||
align-items: center !important;
|
||||
position: relative !important;
|
||||
padding: 0.5rem !important;
|
||||
}
|
||||
|
||||
.twitch-notes-settings-option-line-button-container-content {
|
||||
-webkit-box-flex: 1 !important;
|
||||
flex-grow: 1 !important;
|
||||
}
|
||||
|
||||
.twitch-note-settings-separator {
|
||||
border-top: 1px solid var(--color-border-base);
|
||||
margin-top: 1rem !important;
|
||||
margin-left: 0.5rem !important;
|
||||
margin-right: 0.5rem !important;
|
||||
padding-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
.twitch-notes-x-button {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
top: 0;
|
||||
fill: currentcolor;
|
||||
}
|
||||
|
||||
.twitch-notes-blurred-background {
|
||||
position: fixed;
|
||||
inset: 0 0 0 0;
|
||||
z-index: 2000000;
|
||||
background: rgba(0,0,0,0.4);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.twitch-notes-center-floating-container {
|
||||
background: var(--color-background-base);
|
||||
border: var(--border-width-default) solid var(--color-border-base) !important;
|
||||
padding: 4rem 2rem 2rem;
|
||||
position: fixed;
|
||||
top: 50vh;
|
||||
left: 50vw;
|
||||
transform: translate(-50%, -50%);
|
||||
max-height: 90vh;
|
||||
max-width: 90vw;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,16 @@
|
||||
(function runTwitchNotes() {
|
||||
function save(filename, data) {
|
||||
const blob = new Blob([data], {type: 'text/json'});
|
||||
const elem = window.document.createElement('a');
|
||||
elem.href = window.URL.createObjectURL(blob);
|
||||
elem.download = filename;
|
||||
document.body.appendChild(elem);
|
||||
elem.click();
|
||||
document.body.removeChild(elem);
|
||||
}
|
||||
|
||||
const Notes = {
|
||||
inputData: {},
|
||||
getSavedUserList: () => {
|
||||
return JSON.parse(localStorage.getItem(LS_UserList) || "[]");
|
||||
},
|
||||
@@ -13,11 +23,225 @@
|
||||
}
|
||||
},
|
||||
saveNote: (username, note) => {
|
||||
console.log({username, note});
|
||||
Notes.addUserToSavedList(username);
|
||||
localStorage.setItem(LS_Prefix + username, note);
|
||||
},
|
||||
getNote: (username) => {
|
||||
return localStorage.getItem(LS_Prefix + username) || "";
|
||||
},
|
||||
exportNotes: () => {
|
||||
save('twitch-notes-' + (Date.now()) + '.json', JSON.stringify({
|
||||
users: Notes.getSavedUserList(),
|
||||
notes: Notes.getSavedUserList().map(user => {
|
||||
return {user: user, note: Notes.getNote(user)};
|
||||
}),
|
||||
settings: {},
|
||||
}));
|
||||
},
|
||||
importNotesConflictResolve: (user, resultsContainer, container, blurredBackground) => {
|
||||
const diffBlurredBackground = createElement('div', null, 'twitch-notes-blurred-background');
|
||||
const diffContainer = createElement('div', '<strong>Select which note to keep for <em>' + user + '</em></strong><br /><em>You can modify notes to merge them and keep updated one</em><br /><br />', 'twitch-notes-center-floating-container');
|
||||
|
||||
const inputContainer = createElement('div', null, null, {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'no-wrap',
|
||||
width: '100%',
|
||||
});
|
||||
|
||||
const valueStyle = {
|
||||
minWidth: '320px',
|
||||
padding: '6px',
|
||||
border: '1px solid #FFFFFF19'
|
||||
};
|
||||
const valueAttr = {contentEditable: 'true'};
|
||||
|
||||
const localValueContainer = createElement('div');
|
||||
const pLocal = createElement('p', '<strong>Locally saved note</strong>');
|
||||
localValueContainer.appendChild(pLocal);
|
||||
const localValue = createElement('div', Notes.getNote(user), null, valueStyle, valueAttr, 'local-value-container');
|
||||
const localValueSave = createElement('button', 'Save this', 'twitch-notes-settings-button');
|
||||
localValueSave.addEventListener('click', () => {
|
||||
const val = document.getElementById('local-value-container').innerHTML;
|
||||
Notes.inputData.notes = Notes.inputData.notes.map(n => n.user === user ? {
|
||||
user: n.user,
|
||||
note: val,
|
||||
resolved: true
|
||||
} : n);
|
||||
diffBlurredBackground.remove();
|
||||
resultsContainer.remove();
|
||||
Notes.importNotesResult(container, blurredBackground);
|
||||
});
|
||||
localValueContainer.appendChild(localValue);
|
||||
localValueContainer.innerHTML += '<br />';
|
||||
localValueContainer.appendChild(localValueSave);
|
||||
|
||||
const importedValueContainer = createElement('div');
|
||||
const iLocal = createElement('p', '<strong>Imported note</strong>');
|
||||
importedValueContainer.appendChild(iLocal);
|
||||
const importedValue = createElement('div', Notes.inputData.notes.filter(n => n.user === user)[0].note || '', null, valueStyle, valueAttr, 'import-value-container');
|
||||
const importedValueSave = createElement('button', 'Save this', 'twitch-notes-settings-button');
|
||||
importedValueSave.addEventListener('click', () => {
|
||||
const val = document.getElementById('import-value-container').innerHTML;
|
||||
Notes.inputData.notes = Notes.inputData.notes.map(n => n.user === user ? {
|
||||
user: n.user,
|
||||
note: val,
|
||||
resolved: true
|
||||
} : n);
|
||||
diffBlurredBackground.remove();
|
||||
resultsContainer.remove();
|
||||
Notes.importNotesResult(container, blurredBackground);
|
||||
});
|
||||
|
||||
importedValueContainer.appendChild(importedValue);
|
||||
importedValueContainer.innerHTML += '<br />';
|
||||
importedValueContainer.appendChild(importedValueSave);
|
||||
|
||||
|
||||
inputContainer.appendChild(localValueContainer);
|
||||
inputContainer.appendChild(importedValueContainer);
|
||||
|
||||
diffContainer.appendChild(inputContainer);
|
||||
diffBlurredBackground.appendChild(diffContainer);
|
||||
document.body.appendChild(diffBlurredBackground);
|
||||
},
|
||||
importNotesResult: (container, blurredBackground) => {
|
||||
|
||||
const willBeAdded = [];
|
||||
let willBeOverwritten = [];
|
||||
const noChanges = [];
|
||||
|
||||
for (let user of Notes.inputData.users) {
|
||||
if (Notes.getNote(user)) {
|
||||
if (Notes.inputData.notes.find(note => note.user === user).resolved || Notes.getNote(user) !== Notes.inputData.notes.find(note => note.user === user).note) {
|
||||
willBeOverwritten.push(user);
|
||||
} else {
|
||||
noChanges.push(user);
|
||||
}
|
||||
} else {
|
||||
willBeAdded.push(user);
|
||||
}
|
||||
}
|
||||
|
||||
const resultsContainer = createElement('div', null);
|
||||
|
||||
if (willBeOverwritten.length) {
|
||||
const overwrittenContainer = createElement('div', '<strong>Note conflicts found for:</strong><br />', null, {
|
||||
marginTop: '1rem',
|
||||
});
|
||||
for (let item of willBeOverwritten) {
|
||||
const row = createElement('div', item + ' ', null, {
|
||||
color: Notes.inputData.notes.find(note => note.user === item).resolved ? 'green' : 'red',
|
||||
});
|
||||
const resolve = createElement('a', Notes.inputData.notes.find(note => note.user === item).resolved ? '[update]' : '[resolve]', null, {
|
||||
cursor: 'pointer',
|
||||
});
|
||||
resolve.addEventListener('click', () => {
|
||||
Notes.importNotesConflictResolve(item, resultsContainer, container, blurredBackground);
|
||||
})
|
||||
row.appendChild(resolve);
|
||||
overwrittenContainer.appendChild(row);
|
||||
}
|
||||
resultsContainer.appendChild(overwrittenContainer);
|
||||
}
|
||||
|
||||
if (willBeAdded.length) {
|
||||
const addedContainer = createElement('div', '<strong>Note will be added for:</strong><br />' + willBeAdded.join('<br />'), null, {
|
||||
marginTop: '1rem',
|
||||
color: 'white'
|
||||
})
|
||||
resultsContainer.appendChild(addedContainer);
|
||||
}
|
||||
|
||||
if (noChanges.length) {
|
||||
const noChangesContainer = createElement('div', '<strong>No changes for:</strong><br />' + noChanges.join('<br />'), null, {
|
||||
marginTop: '1rem',
|
||||
color: 'gray'
|
||||
})
|
||||
resultsContainer.appendChild(noChangesContainer);
|
||||
}
|
||||
|
||||
const spacer = createElement('div', null, null, {height: '24px'});
|
||||
resultsContainer.appendChild(spacer);
|
||||
|
||||
/*
|
||||
TODO: make popup to allow checking differences between existing notes and ones that would override them
|
||||
TODO: allow to edit notes and select which one to keep after import, if any content was modified after opening comparison window show that record was merged as a status
|
||||
TODO: show visually that records have some data that will be merged or overwritten entirely
|
||||
*/
|
||||
|
||||
willBeOverwritten = willBeOverwritten.filter(x => !Notes.inputData.notes.find(n => n.user === x).resolved);
|
||||
|
||||
const saveButton = createElement('button', 'Complete import', 'twitch-notes-settings-button',
|
||||
willBeOverwritten.length > 0 ? {background: 'gray'} : null,
|
||||
willBeOverwritten.length > 0 ? {disabled: 'true'} : null)
|
||||
|
||||
resultsContainer.appendChild(saveButton)
|
||||
|
||||
if (willBeOverwritten.length > 0) {
|
||||
const note = createElement('div', '<em>Import cannot be completed while there are unresolved conflicts</em>', null, {
|
||||
color: 'gray',
|
||||
});
|
||||
resultsContainer.appendChild(note);
|
||||
} else {
|
||||
saveButton.addEventListener('click', () => {
|
||||
for (let note of Notes.inputData.notes) {
|
||||
Notes.saveNote(note.user, note.note);
|
||||
}
|
||||
blurredBackground.remove();
|
||||
Notes.inputData = {};
|
||||
});
|
||||
}
|
||||
|
||||
container.appendChild(resultsContainer);
|
||||
},
|
||||
importNotes: () => {
|
||||
const blurredBackground = createElement('div', null, 'twitch-notes-blurred-background');
|
||||
const container = createElement('div', '<strong>WARNING!</strong> <em>This action might override existing data!</em><br /><br />', 'twitch-notes-center-floating-container');
|
||||
const inputBlock = createElement('div', 'Select exported twitch notes file<br /><br />');
|
||||
const input = createElement('input', null, 'twitch-notes-file-input', null, {
|
||||
type: 'file',
|
||||
accept: '.json'
|
||||
});
|
||||
const settingsCloseButton = createElement('button', xButton, 'twitch-notes-settings-close-button', {
|
||||
position: 'absolute',
|
||||
top: '1rem',
|
||||
right: '1rem',
|
||||
});
|
||||
inputBlock.appendChild(input);
|
||||
settingsCloseButton.addEventListener('click', () => {
|
||||
blurredBackground.remove();
|
||||
});
|
||||
input.addEventListener('change', () => {
|
||||
let file = input.files[0];
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
let reader = new FileReader();
|
||||
reader.readAsText(file, "UTF-8");
|
||||
reader.onload = function (evt) {
|
||||
Notes.inputData = JSON.parse(evt.target.result.toString());
|
||||
if (Notes.inputData) {
|
||||
inputBlock.style.display = 'none';
|
||||
Notes.importNotesResult(container, blurredBackground);
|
||||
}
|
||||
}
|
||||
reader.onerror = function () {
|
||||
console.error("error reading file");
|
||||
}
|
||||
});
|
||||
|
||||
container.appendChild(settingsCloseButton);
|
||||
container.appendChild(inputBlock);
|
||||
blurredBackground.appendChild(container);
|
||||
document.body.appendChild(blurredBackground);
|
||||
},
|
||||
clearAllData: () => {
|
||||
console.log('TODO: Implement Notes Data Clearing');
|
||||
},
|
||||
openAllNotes: () => {
|
||||
console.log('TODO: Implement Open All Notes functionality');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -47,7 +271,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
function createElement(tag, body, classes, styles, attributes) {
|
||||
function createElement(tag, body, classes, styles, attributes, id) {
|
||||
const element = document.createElement(tag);
|
||||
|
||||
if (body) {
|
||||
@@ -80,6 +304,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
element.setAttribute('id', id ? id : 'element-' + Math.floor((Math.random() * 10000000)))
|
||||
|
||||
return element;
|
||||
}
|
||||
|
||||
@@ -125,7 +351,7 @@
|
||||
isMouseDown = true;
|
||||
});
|
||||
|
||||
const closeButton = createElement('span', "X", 'twitch-note-close-button')
|
||||
const closeButton = createElement('span', xButton, 'twitch-note-close-button')
|
||||
closeButton.addEventListener("click", function close() {
|
||||
removeContainer(username);
|
||||
});
|
||||
@@ -173,7 +399,7 @@
|
||||
});
|
||||
|
||||
const img = createElement('img', null, null, {
|
||||
height: '18px',
|
||||
height: '18px',
|
||||
paddingRight: '4px'
|
||||
}, {
|
||||
src: "https://cdn.rdarius.lt/icons/32-id-card.png"
|
||||
@@ -194,14 +420,95 @@
|
||||
}
|
||||
}
|
||||
|
||||
function createChatSettingsLine(text) {
|
||||
const element = createElement('div', null, 'twitch-notes-settings-option-line');
|
||||
const button = createElement('button', null, 'twitch-notes-settings-option-line-button');
|
||||
const buttonContainer = createElement('div', null, 'twitch-notes-settings-option-line-button-container');
|
||||
const buttonContainerContent = createElement('div', text, 'twitch-notes-settings-option-line-button-container-content');
|
||||
buttonContainer.appendChild(buttonContainerContent);
|
||||
button.appendChild(buttonContainer);
|
||||
element.appendChild(button);
|
||||
|
||||
return element;
|
||||
}
|
||||
|
||||
function createChatSettingsSeparator() {
|
||||
return createElement('div', null, 'twitch-note-settings-separator');
|
||||
}
|
||||
|
||||
function toggleSettings() {
|
||||
if (!settingsWindow) {
|
||||
const settingsContainer = createElement('div', null, 'twitch-notes-settings-container');
|
||||
const settingsBalloon = createElement('div', null, 'twitch-notes-settings-balloon');
|
||||
const settingsPopover = createElement('div', null, 'twitch-notes-settings-popover');
|
||||
|
||||
// startOf: settings header
|
||||
const settingsHeader = createElement('div', null, 'twitch-notes-settings-header');
|
||||
const settingsHeaderLeftElement = createElement('div', null, 'twitch-notes-settings-header-left-element')
|
||||
settingsHeader.appendChild(settingsHeaderLeftElement);
|
||||
const settingsHeaderCenterElement = createElement('div', null, 'twitch-notes-settings-header-center-element')
|
||||
settingsHeader.appendChild(settingsHeaderCenterElement);
|
||||
const settingsHeaderCenterElementContent = createElement('p', 'Twitch Notes Settings', 'twitch-notes-settings-header-center-element-content')
|
||||
settingsHeaderCenterElement.appendChild(settingsHeaderCenterElementContent);
|
||||
const settingsHeaderRightElement = createElement('div', null, 'twitch-notes-settings-header-right-element')
|
||||
settingsHeader.appendChild(settingsHeaderRightElement);
|
||||
const settingsCloseButton = createElement('button', xButton, 'twitch-notes-settings-close-button');
|
||||
settingsHeaderRightElement.appendChild(settingsCloseButton);
|
||||
settingsPopover.appendChild(settingsHeader);
|
||||
// endOf: settings header
|
||||
|
||||
settingsCloseButton.addEventListener('click', toggleSettings);
|
||||
|
||||
|
||||
// startOf: scrollable area
|
||||
const settingsScrollableArea = createElement('div', null, 'twitch-notes-settings-scrollable-area');
|
||||
const settingsContent = createElement('div', null, 'twitch-notes-settings-content');
|
||||
settingsScrollableArea.appendChild(settingsContent);
|
||||
|
||||
const exportNotes = createChatSettingsLine('Export Notes');
|
||||
settingsContent.appendChild(exportNotes);
|
||||
const importNotes = createChatSettingsLine('Import Notes');
|
||||
settingsContent.appendChild(importNotes);
|
||||
const clearData = createChatSettingsLine('Clear Data');
|
||||
settingsContent.appendChild(clearData);
|
||||
settingsContent.appendChild(createChatSettingsSeparator());
|
||||
const openAllNotes = createChatSettingsLine('View All Notes');
|
||||
settingsContent.appendChild(openAllNotes);
|
||||
|
||||
exportNotes.addEventListener('click', Notes.exportNotes);
|
||||
importNotes.addEventListener('click', Notes.importNotes);
|
||||
clearData.addEventListener('click', Notes.clearAllData);
|
||||
openAllNotes.addEventListener('click', Notes.openAllNotes);
|
||||
|
||||
|
||||
settingsPopover.appendChild(settingsScrollableArea);
|
||||
// endOf: scrollable area
|
||||
|
||||
|
||||
settingsBalloon.appendChild(settingsPopover);
|
||||
settingsContainer.appendChild(settingsBalloon);
|
||||
settingsWindow = settingsContainer;
|
||||
document.body.appendChild(settingsWindow);
|
||||
settingsWindowOpen = true;
|
||||
return;
|
||||
}
|
||||
|
||||
if (settingsWindowOpen) {
|
||||
settingsWindow.style.display = 'none';
|
||||
settingsWindowOpen = false;
|
||||
} else {
|
||||
settingsWindow.style.display = 'block';
|
||||
settingsWindowOpen = true;
|
||||
}
|
||||
console.log('toggle settings');
|
||||
}
|
||||
|
||||
const xButton = `<svg width="100%" height="100%" viewBox="0 0 20 20" x="0px" y="0px" class="twitch-notes-x-button"><g><path d="M8.5 10L4 5.5 5.5 4 10 8.5 14.5 4 16 5.5 11.5 10l4.5 4.5-1.5 1.5-4.5-4.5L5.5 16 4 14.5 8.5 10z"></path></g></svg>`;
|
||||
let openContainers = {};
|
||||
let isMouseDown = false;
|
||||
let activeContainer = null;
|
||||
// let settingsWindowOpen = false;
|
||||
let settingsWindowOpen = false;
|
||||
let settingsWindow = null;
|
||||
|
||||
let LS_UserList = "twitch-note-all-users-list";
|
||||
let LS_Prefix = "twitch-note-";
|
||||
|
||||
818
Twitch Notes/twitchvars.css
Normal file
818
Twitch Notes/twitchvars.css
Normal file
@@ -0,0 +1,818 @@
|
||||
:root {
|
||||
--border-width-default: 1px;
|
||||
--border-width-input: 2px;
|
||||
--border-width-input-overlay-unfocused: 1px;
|
||||
--border-width-marked: 3px;
|
||||
--border-width-spinner: 2px;
|
||||
--border-width-tag: 2px;
|
||||
--border-radius-none: 0;
|
||||
--border-radius-small: 0.2rem;
|
||||
--border-radius-medium: 0.4rem;
|
||||
--border-radius-large: 0.6rem;
|
||||
--border-radius-extra-large: 1rem;
|
||||
--border-radius-extra-extra-large: 1.6rem;
|
||||
--border-radius-rounded: 9000px;
|
||||
--break-xs: 480px;
|
||||
--break-sm: 768px;
|
||||
--break-md: 1024px;
|
||||
--break-lg: 1200px;
|
||||
--break-xl: 1440px;
|
||||
--break-xxl: 1600px;
|
||||
--color-brand-muted-ice: #d6e4ff;
|
||||
--color-brand-muted-cupcake: #ffa3ee;
|
||||
--color-brand-muted-mint: #5cffbe;
|
||||
--color-brand-muted-sky: #7aa7ff;
|
||||
--color-brand-muted-blush: #ffcdcc;
|
||||
--color-brand-muted-canary: #ebeb00;
|
||||
--color-brand-muted-smoke: #d3d3d9;
|
||||
--color-brand-muted-lavender: #d1b3ff;
|
||||
--color-brand-muted-mustard: #ffd37a;
|
||||
--color-brand-muted-emerald: #00f593;
|
||||
--color-brand-muted-coral: #ff8280;
|
||||
--color-brand-muted-ocean: #1345aa;
|
||||
--color-brand-accent-grape: #5c16c5;
|
||||
--color-brand-accent-dragonfruit: #ff38db;
|
||||
--color-brand-accent-carrot: #e69900;
|
||||
--color-brand-accent-sun: #ebeb00;
|
||||
--color-brand-accent-lime: #00f593;
|
||||
--color-brand-accent-turquoise: #00f0f0;
|
||||
--color-brand-accent-eggplant: #451093;
|
||||
--color-brand-accent-wine: #ae1392;
|
||||
--color-brand-accent-slime: #00f593;
|
||||
--color-brand-accent-seafoam: #5cffbe;
|
||||
--color-brand-accent-cherry: #eb0400;
|
||||
--color-brand-accent-marine: #1f69ff;
|
||||
--color-brand-accent-seaweed: #00a3a3;
|
||||
--color-brand-accent-pebble: #848494;
|
||||
--color-brand-accent-moon: #efeff1;
|
||||
--color-brand-accent-fiji: #5cffbe;
|
||||
--color-brand-accent-blueberry: #1f69ff;
|
||||
--color-brand-accent-arctic: #00f0f0;
|
||||
--color-brand-accent-highlighter: #f5f500;
|
||||
--color-brand-accent-flamingo: #ff38db;
|
||||
--color-brand-accent-ruby: #eb0400;
|
||||
--color-brand-accent-punch: #ffcdcc;
|
||||
--color-brand-accent-creamsicle: #ffd37a;
|
||||
--color-white: #fff;
|
||||
--color-black: #000;
|
||||
--color-red: #e91916;
|
||||
--color-red-darker: #bb1411;
|
||||
--color-orange: #ffd37a;
|
||||
--color-yellow: #ffd37a;
|
||||
--color-green: #00f593;
|
||||
--color-green-darker: #00ad96;
|
||||
--color-blue: #1f69ff;
|
||||
--color-prime-blue: #0e9bd8;
|
||||
--color-magenta: #c53dff;
|
||||
--color-error: #eb0400;
|
||||
--color-warn: #ffd37a;
|
||||
--color-success: #00f593;
|
||||
--color-info: #1f69ff;
|
||||
--color-accent: #9147ff;
|
||||
--color-twitch-purple: #9147ff;
|
||||
--color-twitch-purple-1: #040109;
|
||||
--color-twitch-purple-2: #0d031c;
|
||||
--color-twitch-purple-3: #15052e;
|
||||
--color-twitch-purple-4: #24094e;
|
||||
--color-twitch-purple-5: #330c6e;
|
||||
--color-twitch-purple-6: #451093;
|
||||
--color-twitch-purple-7: #5c16c5;
|
||||
--color-twitch-purple-8: #772ce8;
|
||||
--color-twitch-purple-9: #9147ff;
|
||||
--color-twitch-purple-10: #a970ff;
|
||||
--color-twitch-purple-11: #bf94ff;
|
||||
--color-twitch-purple-12: #d1b3ff;
|
||||
--color-twitch-purple-13: #e3d1ff;
|
||||
--color-twitch-purple-14: #ede0ff;
|
||||
--color-twitch-purple-15: #f3ebff;
|
||||
--color-hinted-grey-1: #0e0e10;
|
||||
--color-hinted-grey-2: #18181b;
|
||||
--color-hinted-grey-3: #1f1f23;
|
||||
--color-hinted-grey-4: #26262c;
|
||||
--color-hinted-grey-5: #323239;
|
||||
--color-hinted-grey-6: #3b3b44;
|
||||
--color-hinted-grey-7: #53535f;
|
||||
--color-hinted-grey-8: #848494;
|
||||
--color-hinted-grey-9: #adadb8;
|
||||
--color-hinted-grey-10: #c8c8d0;
|
||||
--color-hinted-grey-11: #d3d3d9;
|
||||
--color-hinted-grey-12: #dedee3;
|
||||
--color-hinted-grey-13: #e6e6ea;
|
||||
--color-hinted-grey-14: #efeff1;
|
||||
--color-hinted-grey-15: #f7f7f8;
|
||||
--color-transparent: transparent;
|
||||
--color-opac-b-1: rgba(0,0,0,.05);
|
||||
--color-opac-b-2: rgba(0,0,0,.1);
|
||||
--color-opac-b-3: rgba(0,0,0,.15);
|
||||
--color-opac-b-4: rgba(0,0,0,.2);
|
||||
--color-opac-b-5: rgba(0,0,0,.25);
|
||||
--color-opac-b-6: rgba(0,0,0,.3);
|
||||
--color-opac-b-7: rgba(0,0,0,.4);
|
||||
--color-opac-b-8: rgba(0,0,0,.5);
|
||||
--color-opac-b-9: rgba(0,0,0,.6);
|
||||
--color-opac-b-10: rgba(0,0,0,.7);
|
||||
--color-opac-b-11: rgba(0,0,0,.75);
|
||||
--color-opac-b-12: rgba(0,0,0,.8);
|
||||
--color-opac-b-13: rgba(0,0,0,.85);
|
||||
--color-opac-b-14: rgba(0,0,0,.9);
|
||||
--color-opac-b-15: rgba(0,0,0,.95);
|
||||
--color-opac-w-1: hsla(0,0%,100%,.05);
|
||||
--color-opac-w-2: hsla(0,0%,100%,.1);
|
||||
--color-opac-w-3: hsla(0,0%,100%,.15);
|
||||
--color-opac-w-4: hsla(0,0%,100%,.2);
|
||||
--color-opac-w-5: hsla(0,0%,100%,.25);
|
||||
--color-opac-w-6: hsla(0,0%,100%,.3);
|
||||
--color-opac-w-7: hsla(0,0%,100%,.4);
|
||||
--color-opac-w-8: hsla(0,0%,100%,.5);
|
||||
--color-opac-w-9: hsla(0,0%,100%,.6);
|
||||
--color-opac-w-10: hsla(0,0%,100%,.7);
|
||||
--color-opac-w-11: hsla(0,0%,100%,.75);
|
||||
--color-opac-w-12: hsla(0,0%,100%,.8);
|
||||
--color-opac-w-13: hsla(0,0%,100%,.85);
|
||||
--color-opac-w-14: hsla(0,0%,100%,.9);
|
||||
--color-opac-w-15: hsla(0,0%,100%,.95);
|
||||
--color-opac-p-1: rgba(92,22,197,.05);
|
||||
--color-opac-p-2: rgba(92,22,197,.1);
|
||||
--color-opac-p-3: rgba(92,22,197,.15);
|
||||
--color-opac-p-4: rgba(92,22,197,.2);
|
||||
--color-opac-p-5: rgba(92,22,197,.25);
|
||||
--color-opac-p-6: rgba(92,22,197,.3);
|
||||
--color-opac-p-7: rgba(92,22,197,.4);
|
||||
--color-opac-p-8: rgba(92,22,197,.5);
|
||||
--color-opac-p-9: rgba(92,22,197,.6);
|
||||
--color-opac-p-10: rgba(92,22,197,.7);
|
||||
--color-opac-p-11: rgba(92,22,197,.75);
|
||||
--color-opac-p-12: rgba(92,22,197,.8);
|
||||
--color-opac-p-13: rgba(92,22,197,.85);
|
||||
--color-opac-p-14: rgba(92,22,197,.9);
|
||||
--color-opac-p-15: rgba(92,22,197,.95);
|
||||
--color-orange-1: #050301;
|
||||
--color-orange-2: #090601;
|
||||
--color-orange-3: #120d02;
|
||||
--color-orange-4: #251a04;
|
||||
--color-orange-5: #372706;
|
||||
--color-orange-6: #453008;
|
||||
--color-orange-7: #65470b;
|
||||
--color-orange-8: #7c570e;
|
||||
--color-orange-9: #9e6900;
|
||||
--color-orange-10: #c28100;
|
||||
--color-orange-11: #e69900;
|
||||
--color-orange-12: #ffb31a;
|
||||
--color-orange-13: #ffd37a;
|
||||
--color-orange-14: #ffdf9e;
|
||||
--color-orange-15: #ffebc2;
|
||||
--color-yellow-1: #050501;
|
||||
--color-yellow-2: #090901;
|
||||
--color-yellow-3: #0e0e02;
|
||||
--color-yellow-4: #1c1c03;
|
||||
--color-yellow-5: #292905;
|
||||
--color-yellow-6: #373706;
|
||||
--color-yellow-7: #4e4e09;
|
||||
--color-yellow-8: #60600b;
|
||||
--color-yellow-9: #7a7a00;
|
||||
--color-yellow-10: #949400;
|
||||
--color-yellow-11: #adad00;
|
||||
--color-yellow-12: #c7c700;
|
||||
--color-yellow-13: #e0e000;
|
||||
--color-yellow-14: #ebeb00;
|
||||
--color-yellow-15: #f5f500;
|
||||
--color-green-1: #010503;
|
||||
--color-green-2: #010906;
|
||||
--color-green-3: #02120c;
|
||||
--color-green-4: #042015;
|
||||
--color-green-5: #063221;
|
||||
--color-green-6: #074029;
|
||||
--color-green-7: #0a5738;
|
||||
--color-green-8: #016b40;
|
||||
--color-green-9: #018852;
|
||||
--color-green-10: #00a865;
|
||||
--color-green-11: #00c274;
|
||||
--color-green-12: #00db84;
|
||||
--color-green-13: #00f593;
|
||||
--color-green-14: #5cffbe;
|
||||
--color-green-15: #a8ffdc;
|
||||
--color-cyan-1: #010505;
|
||||
--color-cyan-2: #010909;
|
||||
--color-cyan-3: #021212;
|
||||
--color-cyan-4: #042020;
|
||||
--color-cyan-5: #052e2e;
|
||||
--color-cyan-6: #073c3c;
|
||||
--color-cyan-7: #095353;
|
||||
--color-cyan-8: #0c6a6a;
|
||||
--color-cyan-9: #018383;
|
||||
--color-cyan-10: #00a3a3;
|
||||
--color-cyan-11: #00b8b8;
|
||||
--color-cyan-12: #00d6d6;
|
||||
--color-cyan-13: #00f0f0;
|
||||
--color-cyan-14: #2effff;
|
||||
--color-cyan-15: #94ffff;
|
||||
--color-blue-1: #010205;
|
||||
--color-blue-2: #020712;
|
||||
--color-blue-3: #040d20;
|
||||
--color-blue-4: #071a40;
|
||||
--color-blue-5: #0a255c;
|
||||
--color-blue-6: #0d3177;
|
||||
--color-blue-7: #1345aa;
|
||||
--color-blue-8: #1756d3;
|
||||
--color-blue-9: #1f69ff;
|
||||
--color-blue-10: #528bff;
|
||||
--color-blue-11: #7aa7ff;
|
||||
--color-blue-12: #a3c2ff;
|
||||
--color-blue-13: #c7daff;
|
||||
--color-blue-14: #d6e4ff;
|
||||
--color-blue-15: #e5eeff;
|
||||
--color-magenta-1: #050104;
|
||||
--color-magenta-2: #12020f;
|
||||
--color-magenta-3: #20041b;
|
||||
--color-magenta-4: #37062e;
|
||||
--color-magenta-5: #4e0941;
|
||||
--color-magenta-6: #650b55;
|
||||
--color-magenta-7: #8a0f73;
|
||||
--color-magenta-8: #ae1392;
|
||||
--color-magenta-9: #c516a5;
|
||||
--color-magenta-10: #ff38db;
|
||||
--color-magenta-11: #ff75e6;
|
||||
--color-magenta-12: #ffa3ee;
|
||||
--color-magenta-13: #ffc7f5;
|
||||
--color-magenta-14: #ffd6f8;
|
||||
--color-magenta-15: #ffe5fa;
|
||||
--color-red-1: #050101;
|
||||
--color-red-2: #120202;
|
||||
--color-red-3: #200404;
|
||||
--color-red-4: #3c0807;
|
||||
--color-red-5: #530a09;
|
||||
--color-red-6: #6e0e0c;
|
||||
--color-red-7: #971311;
|
||||
--color-red-8: #bb1411;
|
||||
--color-red-9: #eb0400;
|
||||
--color-red-10: #ff4f4d;
|
||||
--color-red-11: #ff8280;
|
||||
--color-red-12: #ffaaa8;
|
||||
--color-red-13: #ffcdcc;
|
||||
--color-red-14: #ffdcdb;
|
||||
--color-red-15: #ffe6e5;
|
||||
--color-twitter: #1da1f2;
|
||||
--color-facebook: #3b5998;
|
||||
--color-reddit: #ff4500;
|
||||
--color-snapchat: #fffc00;
|
||||
--color-instagram: #405de6;
|
||||
--color-youtube: #cd201f;
|
||||
--color-paypal: #009cde;
|
||||
--color-paypal-blue: #009cde;
|
||||
--color-paypal-yellow: #fcc439;
|
||||
--color-vk: #45668e;
|
||||
--color-amazon: #fad677;
|
||||
--button-size-small: 2.4rem;
|
||||
--button-size-default: 3rem;
|
||||
--button-size-large: 3.6rem;
|
||||
--button-text-small: 1.2rem;
|
||||
--button-text-default: 1.3rem;
|
||||
--button-text-large: 1.4rem;
|
||||
--button-padding-x: 1rem;
|
||||
--button-padding-y: 0.5rem;
|
||||
--input-text-small: 1.2rem;
|
||||
--input-text-default: 1.3rem;
|
||||
--input-text-large: 1.4rem;
|
||||
--input-size-small: 2.4rem;
|
||||
--input-size-default: 3rem;
|
||||
--input-size-large: 3.6rem;
|
||||
--font-base: "Inter","Roobert","Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
--font-display: "Roobert","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
--font-mono: monospace;
|
||||
--font-size-1: 5.4rem;
|
||||
--font-size-2: 3.6rem;
|
||||
--font-size-3: 2.4rem;
|
||||
--font-size-4: 1.8rem;
|
||||
--font-size-5: 1.4rem;
|
||||
--font-size-6: 1.3rem;
|
||||
--font-size-7: 1.2rem;
|
||||
--font-size-8: 1.2rem;
|
||||
--font-size-base: 1.3rem;
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
--font-weight-hdr: 400;
|
||||
--line-height-body: 1.5;
|
||||
--line-height-heading: 1.2;
|
||||
--base-rem-unit: 10;
|
||||
--grid-columns: 12;
|
||||
--grid-gutter-width: 1.5rem;
|
||||
--grid-gutter-width-lg: 2rem;
|
||||
--grid-gutter-width-sm: 1rem;
|
||||
--grid-gutter-width-xs: 0.5rem;
|
||||
--opac-1: 0.05;
|
||||
--opac-2: 0.1;
|
||||
--opac-3: 0.15;
|
||||
--opac-4: 0.2;
|
||||
--opac-5: 0.25;
|
||||
--opac-6: 0.3;
|
||||
--opac-7: 0.4;
|
||||
--opac-8: 0.5;
|
||||
--opac-9: 0.6;
|
||||
--opac-10: 0.7;
|
||||
--opac-11: 0.75;
|
||||
--opac-12: 0.8;
|
||||
--opac-13: 0.85;
|
||||
--opac-14: 0.9;
|
||||
--opac-15: 0.95;
|
||||
--space-0: 0;
|
||||
--space-1: 1rem;
|
||||
--space-2: 2rem;
|
||||
--space-3: 3rem;
|
||||
--space-4: 4rem;
|
||||
--space-5: 5rem;
|
||||
--space-6: 6rem;
|
||||
--space-7: 7rem;
|
||||
--space-8: 8rem;
|
||||
--space-9: 9rem;
|
||||
--space-10: 10rem;
|
||||
--space-auto: auto;
|
||||
--space-05: 0.5rem;
|
||||
--timing-short: 100ms;
|
||||
--timing-medium: 150ms;
|
||||
--timing-long: 200ms;
|
||||
--z-index-modal: 5000;
|
||||
--z-index-notification: 4000;
|
||||
--z-index-overlay: 3000;
|
||||
--z-index-balloon: 2000;
|
||||
--z-index-sticky: 1000;
|
||||
--z-index-above: 10;
|
||||
--z-index-default: 1;
|
||||
--z-index-below: -1;
|
||||
--color-background-button: var(--color-twitch-purple-7);
|
||||
--color-background-button-hover: var(--color-twitch-purple-8);
|
||||
--color-background-button-focus: var(--color-twitch-purple-8);
|
||||
--color-background-button-active: var(--color-twitch-purple-7);
|
||||
--color-background-button-purchase: var(--color-opac-b-5);
|
||||
--color-background-button-status: var(--color-background-button-success);
|
||||
--color-background-button-status-hover: var(--color-background-button-error-hover);
|
||||
--color-background-button-status-focus: var(--color-background-button-error-hover);
|
||||
--color-background-button-status-active: var(--color-background-button-error-active);
|
||||
--color-background-button-success-focus: var(--color-green-darker);
|
||||
--color-background-button-alert: var(--color-red);
|
||||
--color-background-button-alert-hover: var(--color-red-darker);
|
||||
--color-background-button-alert-focus: var(--color-red-darker);
|
||||
--color-background-button-alert-active: var(--color-red);
|
||||
--color-background-button-overlay: var(--color-transparent);
|
||||
--color-background-button-overlay-hover: var(--color-opac-w-1);
|
||||
--color-background-button-overlay-focus: var(--color-opac-w-1);
|
||||
--color-background-button-overlay-active: transparent;
|
||||
--color-background-interactable-alpha-hover: var(--color-opac-w-4);
|
||||
--color-background-interactable-alpha-active: var(--color-opac-w-5);
|
||||
--color-background-interactable-alpha-selected: var(--color-opac-w-3);
|
||||
--color-text-button: var(--color-white);
|
||||
--color-text-button-hover: var(--color-white);
|
||||
--color-text-button-focus: var(--color-white);
|
||||
--color-text-button-active: var(--color-white);
|
||||
--color-text-button-secondary-hover: var(--color-hinted-grey-6);
|
||||
--color-text-button-secondary-focus: var(--color-hinted-grey-6);
|
||||
--color-text-button-secondary-active: var(--color-hinted-grey-6);
|
||||
--color-text-button-text-focus: var(--color-opac-w-1);
|
||||
--color-text-button-text-active: var(--color-opac-p-2);
|
||||
--color-text-button-status: var(--color-white);
|
||||
--color-text-button-status-hover: var(--color-white);
|
||||
--color-text-button-status-focus: var(--color-white);
|
||||
--color-text-button-status-active: var(--color-white);
|
||||
--color-text-button-success-hover: var(--color-black);
|
||||
--color-text-button-success-focus: var(--color-black);
|
||||
--color-text-button-success-active: var(--color-black);
|
||||
--color-text-button-alert: var(--color-black);
|
||||
--color-text-button-alert-hover: var(--color-black);
|
||||
--color-text-button-alert-focus: var(--color-black);
|
||||
--color-text-button-alert-active: var(--color-black);
|
||||
--color-text-button-overlay: var(--color-white);
|
||||
--color-text-button-overlay-hover: var(--color-white);
|
||||
--color-text-button-overlay-focus: var(--color-white);
|
||||
--color-text-button-overlay-active: var(--color-white);
|
||||
--color-text-interactable: currentColor;
|
||||
--color-text-interactable-hover: var(--color-white);
|
||||
--color-text-interactable-active: var(--color-white);
|
||||
--color-text-interactable-inverted: var(--color-white);
|
||||
--color-text-input-focus: transparent;
|
||||
--color-border-button: var(--color-twitch-purple-7);
|
||||
--color-border-button-hover: var(--color-twitch-purple-8);
|
||||
--color-border-button-focus: var(--color-twitch-purple-9);
|
||||
--color-border-button-active: var(--color-twitch-purple-8);
|
||||
--color-border-button-disabled: var(--color-opac-w-1);
|
||||
--color-border-button-status: var(--color-green);
|
||||
--color-border-button-status-hover: var(--color-red-darker);
|
||||
--color-border-button-status-focus: var(--color-red-darker);
|
||||
--color-border-button-status-active: var(--color-red);
|
||||
--color-border-button-success: var(--color-green);
|
||||
--color-border-button-success-hover: var(--color-green);
|
||||
--color-border-button-success-focus: var(--color-green);
|
||||
--color-border-button-success-active: var(--color-green);
|
||||
--color-border-button-alert: var(--color-red);
|
||||
--color-border-button-alert-hover: var(--color-red-darker);
|
||||
--color-border-button-alert-focus: var(--color-red-darker);
|
||||
--color-border-button-alert-active: var(--color-red);
|
||||
--color-border-button-overlay: var(--color-transparent);
|
||||
--color-border-button-overlay-hover: var(--color-transparent);
|
||||
--color-border-button-overlay-focus: var(--color-opac-w-6);
|
||||
--color-border-button-overlay-active: var(--color-opac-w-9);
|
||||
--color-border-button-overlay-bordered: var(--color-white);
|
||||
--color-border-interactable-selected: var(--color-twitch-purple-10);
|
||||
--shadow-input: inset 0 0 0 1px var(--color-twitch-purple-5);
|
||||
--shadow-input-error: 0 0 0 1px var(--color-border-error);
|
||||
--shadow-input-focus: 0 0 10px -2px var(--color-border-brand);
|
||||
--shadow-input-error-focus: 0 0 6px -2px var(--color-border-error);
|
||||
--shadow-interactable-focus: 0 0 6px 0 var(--color-twitch-purple-8);
|
||||
--color-background-subscriber-stream-tag-default: var(--color-twitch-purple-4);
|
||||
--color-background-subscriber-stream-tag-hover: var(--color-twitch-purple-3);
|
||||
--color-background-subscriber-stream-tag-active: var(--color-twitch-purple-4);
|
||||
--color-border-subscriber-stream-tag: var(--color-twitch-purple-5);
|
||||
--color-background-body: var(--color-hinted-grey-1);
|
||||
--color-background-base: var(--color-hinted-grey-2);
|
||||
--color-background-alt: var(--color-hinted-grey-3);
|
||||
--color-background-alt-2: var(--color-hinted-grey-4);
|
||||
--color-background-float: var(--color-hinted-grey-3);
|
||||
--color-background-accent: var(--color-twitch-purple-8);
|
||||
--color-background-accent-alt: var(--color-twitch-purple-7);
|
||||
--color-background-accent-alt-2: var(--color-twitch-purple-6);
|
||||
--color-background-placeholder: var(--color-opac-w-1);
|
||||
--color-background-overlay-placeholder: var(--color-opac-w-3);
|
||||
--color-background-live: var(--color-red);
|
||||
--color-background-prime: var(--color-prime-blue);
|
||||
--color-background-error: var(--color-red-11);
|
||||
--color-background-warn: var(--color-orange-13);
|
||||
--color-background-success: var(--color-green-13);
|
||||
--color-background-info: var(--color-blue-12);
|
||||
--color-background-brand: var(--color-twitch-purple-11);
|
||||
--color-background-overlay-error: var(--color-red-11);
|
||||
--color-background-overlay-warn: var(--color-orange-13);
|
||||
--color-background-overlay-success: var(--color-green-13);
|
||||
--color-background-overlay-info: var(--color-blue-12);
|
||||
--color-background-overlay-brand: var(--color-twitch-purple-11);
|
||||
--color-background-interactable-hover: var(--color-opac-w-4);
|
||||
--color-background-interactable-active: var(--color-opac-w-5);
|
||||
--color-background-interactable-selected: var(--color-background-button-brand);
|
||||
--color-background-interactable-overlay-hover: var(--color-opac-w-4);
|
||||
--color-background-interactable-overlay-active: var(--color-opac-w-5);
|
||||
--color-background-interactable-overlay-selected: var(--color-white);
|
||||
--color-background-interactable-destructive-hover: var(--color-red-darker);
|
||||
--color-background-interactable-destructive-active: var(--color-red);
|
||||
--color-background-button-primary-default: var(--color-background-button-brand);
|
||||
--color-background-button-primary-hover: var(--color-background-button-brand-hover);
|
||||
--color-background-button-primary-active: var(--color-background-button-brand-active);
|
||||
--color-background-button-secondary-default: var(--color-opac-w-3);
|
||||
--color-background-button-secondary-hover: var(--color-background-interactable-hover);
|
||||
--color-background-button-secondary-active: var(--color-background-interactable-active);
|
||||
--color-background-button-text-default: var(--color-transparent);
|
||||
--color-background-button-text-hover: var(--color-background-interactable-hover);
|
||||
--color-background-button-text-active: var(--color-background-interactable-active);
|
||||
--color-background-button-destructive-default: var(--color-background-button-error);
|
||||
--color-background-button-destructive-hover: var(--color-background-button-error-hover);
|
||||
--color-background-button-destructive-active: var(--color-background-button-error-active);
|
||||
--color-background-button-error: var(--color-red-10);
|
||||
--color-background-button-error-hover: var(--color-red-12);
|
||||
--color-background-button-error-active: var(--color-red-14);
|
||||
--color-background-button-warn: var(--color-orange-12);
|
||||
--color-background-button-warn-hover: var(--color-orange-14);
|
||||
--color-background-button-warn-active: var(--color-orange-15);
|
||||
--color-background-button-success: var(--color-green-12);
|
||||
--color-background-button-success-hover: var(--color-green-14);
|
||||
--color-background-button-success-active: var(--color-green-15);
|
||||
--color-background-button-info: var(--color-blue-11);
|
||||
--color-background-button-info-hover: var(--color-blue-13);
|
||||
--color-background-button-info-active: var(--color-blue-15);
|
||||
--color-background-button-brand: var(--color-twitch-purple-9);
|
||||
--color-background-button-brand-hover: var(--color-twitch-purple-8);
|
||||
--color-background-button-brand-active: var(--color-twitch-purple-7);
|
||||
--color-background-button-overlay-primary-default: var(--color-white);
|
||||
--color-background-button-overlay-primary-hover: var(--color-opac-w-14);
|
||||
--color-background-button-overlay-primary-active: var(--color-opac-w-13);
|
||||
--color-background-button-overlay-secondary-default: var(--color-opac-w-3);
|
||||
--color-background-button-overlay-secondary-hover: var(--color-background-interactable-overlay-hover);
|
||||
--color-background-button-overlay-secondary-active: var(--color-background-interactable-overlay-active);
|
||||
--color-background-button-overlay-text-default: var(--color-transparent);
|
||||
--color-background-button-overlay-text-hover: var(--color-background-interactable-overlay-hover);
|
||||
--color-background-button-overlay-text-active: var(--color-background-interactable-overlay-active);
|
||||
--color-background-button-overlay-error: var(--color-background-button-error);
|
||||
--color-background-button-overlay-error-hover: var(--color-background-button-error-hover);
|
||||
--color-background-button-overlay-error-active: var(--color-background-button-error-active);
|
||||
--color-background-button-overlay-warn: var(--color-background-button-warn);
|
||||
--color-background-button-overlay-warn-hover: var(--color-background-button-warn-hover);
|
||||
--color-background-button-overlay-warn-active: var(--color-background-button-warn-active);
|
||||
--color-background-button-overlay-success: var(--color-background-button-success);
|
||||
--color-background-button-overlay-success-hover: var(--color-background-button-success-hover);
|
||||
--color-background-button-overlay-success-active: var(--color-background-button-success-active);
|
||||
--color-background-button-overlay-info: var(--color-background-button-info);
|
||||
--color-background-button-overlay-info-hover: var(--color-background-button-info-hover);
|
||||
--color-background-button-overlay-info-active: var(--color-background-button-info-active);
|
||||
--color-background-button-overlay-brand: var(--color-white);
|
||||
--color-background-button-overlay-brand-hover: var(--color-opac-w-14);
|
||||
--color-background-button-overlay-brand-active: var(--color-opac-w-13);
|
||||
--color-background-button-icon-overlay-default: var(--color-transparent);
|
||||
--color-background-button-icon-overlay-hover: var(--color-background-interactable-overlay-hover);
|
||||
--color-background-button-icon-overlay-active: var(--color-background-interactable-overlay-active);
|
||||
--color-background-button-disabled: var(--color-opac-w-3);
|
||||
--color-background-button-overlay-disabled: var(--color-opac-w-2);
|
||||
--color-background-image-selector-overlay: var(--color-transparent);
|
||||
--color-background-input: var(--color-opac-w-4);
|
||||
--color-background-input-focus: var(--color-black);
|
||||
--color-background-input-checked: var(--color-twitch-purple-8);
|
||||
--color-background-input-overlay: var(--color-opac-b-4);
|
||||
--color-background-input-overlay-focus: var(--color-black);
|
||||
--color-background-input-checkbox-checked: var(--color-border-brand);
|
||||
--color-background-input-checkbox-checked-background: var(--color-black);
|
||||
--color-background-input-checkbox-checked-background-overlay: var(--color-black);
|
||||
--color-background-input-checkbox-checked-overlay: var(--color-white);
|
||||
--color-background-selectable: var(--color-opac-w-3);
|
||||
--color-background-selectable-hover: var(--color-opac-w-4);
|
||||
--color-background-selectable-overlay: var(--color-opac-w-3);
|
||||
--color-background-selectable-overlay-hover: var(--color-opac-w-4);
|
||||
--color-background-tag-default: var(--color-opac-w-3);
|
||||
--color-background-tag-hover: var(--color-background-interactable-hover);
|
||||
--color-background-tag-active: var(--color-background-interactable-active);
|
||||
--color-background-toggle: var(--color-transparent);
|
||||
--color-background-toggle-handle: var(--color-white);
|
||||
--color-background-toggle-handle-checked: var(--color-twitch-purple-10);
|
||||
--color-background-toggle-handle-overlay: var(--color-white);
|
||||
--color-background-toggle-hover: var(--color-opac-w-5);
|
||||
--color-background-toggle-focus: var(--color-opac-w-5);
|
||||
--color-background-toggle-checked: var(--color-black);
|
||||
--color-background-toggle-overlay: var(--color-opac-b-4);
|
||||
--color-background-toggle-overlay-checked: var(--color-black);
|
||||
--color-background-tooltip: var(--color-white);
|
||||
--color-background-overlay: var(--color-opac-b-9);
|
||||
--color-background-progress: var(--color-opac-w-4);
|
||||
--color-background-progress-status: var(--color-border-brand);
|
||||
--color-background-progress-status-error: var(--color-border-error);
|
||||
--color-background-progress-status-caution: var(--color-border-warn);
|
||||
--color-background-progress-status-success: var(--color-border-success);
|
||||
--color-background-progress-overlay-status: var(--color-opac-w-12);
|
||||
--color-background-progress-overlay-mask: var(--color-opac-b-7);
|
||||
--color-background-progress-countdown: none;
|
||||
--color-background-progress-countdown-status: var(--color-twitch-purple-9);
|
||||
--color-background-pill: var(--color-hinted-grey-7);
|
||||
--color-background-pill-new: var(--color-magenta-11);
|
||||
--color-background-pill-subtle: var(--color-hinted-grey-10);
|
||||
--color-background-pill-notification: var(--color-red);
|
||||
--color-background-range: var(--color-opac-w-4);
|
||||
--color-background-range-fill: var(--color-border-brand);
|
||||
--color-background-range-overlay: var(--color-opac-w-6);
|
||||
--color-background-range-overlay-fill: var(--color-white);
|
||||
--color-background-social-column: var(--color-hinted-grey-2);
|
||||
--color-background-top-nav: var(--color-twitch-purple-6);
|
||||
--color-background-chat: var(--color-twitch-purple-1);
|
||||
--color-background-chat-alt: var(--color-twitch-purple-3);
|
||||
--color-background-chat-header: var(--color-twitch-purple-2);
|
||||
--color-background-chat-line-mentioning: var(--color-hinted-grey-5);
|
||||
--color-background-chat-line-mentioned: var(--color-hinted-grey-15);
|
||||
--color-background-modal-overlay: var(--color-opac-b-13);
|
||||
--color-background-modal: var(--color-twitch-purple-3);
|
||||
--color-background-graph: var(--color-twitch-purple-2);
|
||||
--color-background-graph-fill: var(--color-twitch-purple-8);
|
||||
--color-background-scrollbar: var(--color-opac-w-8);
|
||||
--color-background-hover: var(--color-opac-w-3);
|
||||
--color-text-base: var(--color-hinted-grey-14);
|
||||
--color-text-alt: var(--color-hinted-grey-12);
|
||||
--color-text-alt-2: var(--color-hinted-grey-9);
|
||||
--color-text-link: var(--color-twitch-purple-11);
|
||||
--color-text-link-hover: var(--color-twitch-purple-10);
|
||||
--color-text-link-active: var(--color-twitch-purple-11);
|
||||
--color-text-link-focus: var(--color-twitch-purple-10);
|
||||
--color-text-link-visited: var(--color-twitch-purple-11);
|
||||
--color-text-live: var(--color-text-accessible-red);
|
||||
--color-text-alert: var(--color-text-accessible-red);
|
||||
--color-text-prime: var(--color-prime-blue);
|
||||
--color-text-error: var(--color-red-11);
|
||||
--color-text-warn: var(--color-orange-11);
|
||||
--color-text-success: var(--color-green-11);
|
||||
--color-text-info: var(--color-blue-11);
|
||||
--color-text-brand: var(--color-twitch-purple-11);
|
||||
--color-text-overlay-error: var(--color-red-11);
|
||||
--color-text-overlay-warn: var(--color-orange-11);
|
||||
--color-text-overlay-success: var(--color-green-11);
|
||||
--color-text-overlay-info: var(--color-blue-11);
|
||||
--color-text-overlay-brand: var(--color-white);
|
||||
--color-text-accessible-red: var(--color-red-11);
|
||||
--color-text-accessible-green: var(--color-green-11);
|
||||
--color-text-accessible-blue: var(--color-blue-11);
|
||||
--color-text-tab: var(--color-text-base);
|
||||
--color-text-tab-active: var(--color-twitch-purple-11);
|
||||
--color-text-badge-alt: var(--color-black);
|
||||
--color-text-badge-alt-2: var(--color-black);
|
||||
--color-text-button-primary: var(--color-white);
|
||||
--color-text-button-secondary: var(--color-text-base);
|
||||
--color-text-button-text: var(--color-text-brand);
|
||||
--color-text-button-text-hover: var(--color-text-base);
|
||||
--color-text-button-destructive: var(--color-text-button-error);
|
||||
--color-text-button-error: var(--color-black);
|
||||
--color-text-button-warn: var(--color-black);
|
||||
--color-text-button-success: var(--color-black);
|
||||
--color-text-button-info: var(--color-black);
|
||||
--color-text-button-brand: var(--color-white);
|
||||
--color-text-button-overlay-primary: var(--color-black);
|
||||
--color-text-button-overlay-secondary: var(--color-white);
|
||||
--color-text-button-overlay-text: var(--color-white);
|
||||
--color-text-button-overlay-error: var(--color-black);
|
||||
--color-text-button-overlay-warn: var(--color-black);
|
||||
--color-text-button-overlay-success: var(--color-black);
|
||||
--color-text-button-overlay-info: var(--color-black);
|
||||
--color-text-button-overlay-brand: var(--color-black);
|
||||
--color-text-button-disabled: var(--color-opac-w-8);
|
||||
--color-text-interactable-selected: var(--color-text-overlay);
|
||||
--color-text-interactable-overlay-selected: var(--color-black);
|
||||
--color-text-input: var(--color-text-base);
|
||||
--color-text-input-placeholder: var(--color-opac-w-10);
|
||||
--color-text-input-placeholder-overlay: var(--color-opac-w-10);
|
||||
--color-text-input-checked-icon: var(--color-white);
|
||||
--color-text-label: var(--color-hinted-grey-15);
|
||||
--color-text-label-optional: var(--color-hinted-grey-8);
|
||||
--color-text-hint: var(--color-hinted-grey-8);
|
||||
--color-text-tag: var(--color-opac-w-10);
|
||||
--color-text-toggle-checked-icon: var(--color-border-brand);
|
||||
--color-text-toggle-checked-icon-overlay: var(--color-white);
|
||||
--color-text-tooltip: var(--color-twitch-purple-1);
|
||||
--color-text-overlay: var(--color-white);
|
||||
--color-text-overlay-alt: var(--color-opac-w-13);
|
||||
--color-text-overlay-link: var(--color-white);
|
||||
--color-text-overlay-link-hover: var(--color-opac-w-12);
|
||||
--color-text-overlay-link-active: var(--color-white);
|
||||
--color-text-overlay-link-focus: var(--color-opac-w-12);
|
||||
--color-text-overlay-link-visited: var(--color-white);
|
||||
--color-text-pill: var(--color-black);
|
||||
--color-text-chat-line-mentioning: var(--color-white);
|
||||
--color-text-chat-line-mentioned: var(--color-hinted-grey-2);
|
||||
--color-text-channel-status-text-indicator-hosting: var(--color-black);
|
||||
--color-text-channel-status-text-indicator-rerun: var(--color-black);
|
||||
--color-text-channel-status-text-indicator-offline: var(--color-black);
|
||||
--color-text-channel-status-text-indicator-hosting-overlay: var(--color-black);
|
||||
--color-text-channel-status-text-indicator-rerun-overlay: var(--color-black);
|
||||
--color-text-channel-status-text-indicator-offline-overlay: var(--color-black);
|
||||
--color-text-ribbon: var(--color-white);
|
||||
--color-border-base: var(--color-opac-w-2);
|
||||
--color-border-region: var(--color-black);
|
||||
--color-border-overlay: var(--color-opac-w-5);
|
||||
--color-border-alert: var(--color-red);
|
||||
--color-border-error: var(--color-red-10);
|
||||
--color-border-warn: var(--color-orange-12);
|
||||
--color-border-success: var(--color-green-12);
|
||||
--color-border-info: var(--color-blue-10);
|
||||
--color-border-brand: var(--color-twitch-purple-10);
|
||||
--color-border-error-decorative: var(--color-red-10);
|
||||
--color-border-warn-decorative: var(--color-orange-12);
|
||||
--color-border-success-decorative: var(--color-green-12);
|
||||
--color-border-info-decorative: var(--color-blue-10);
|
||||
--color-border-brand-decorative: var(--color-twitch-purple-10);
|
||||
--color-border-overlay-error: var(--color-red-10);
|
||||
--color-border-overlay-warn: var(--color-orange-12);
|
||||
--color-border-overlay-success: var(--color-green-12);
|
||||
--color-border-overlay-info: var(--color-blue-10);
|
||||
--color-border-overlay-brand: var(--color-white);
|
||||
--color-border-overlay-error-decorative: var(--color-red-10);
|
||||
--color-border-overlay-warn-decorative: var(--color-orange-12);
|
||||
--color-border-overlay-success-decorative: var(--color-green-12);
|
||||
--color-border-overlay-info-decorative: var(--color-blue-10);
|
||||
--color-border-overlay-brand-decorative: var(--color-twitch-purple-10);
|
||||
--color-border-balloon-overlay: var(--color-opac-w-4);
|
||||
--color-border-tab: var(--color-border-base);
|
||||
--color-border-tab-hover: var(--color-twitch-purple-11);
|
||||
--color-border-tab-focus: var(--color-twitch-purple-11);
|
||||
--color-border-tab-active: var(--color-border-brand);
|
||||
--color-border-image-selector: var(--color-opac-b-6);
|
||||
--color-border-image-selector-overlay: var(--color-opac-w-6);
|
||||
--color-border-image-selector-overlay-selected: var(--color-white);
|
||||
--color-border-input: var(--color-opac-w-4);
|
||||
--color-border-input-hover: var(--color-opac-w-6);
|
||||
--color-border-input-focus: var(--color-border-brand);
|
||||
--color-border-input-error: var(--color-border-error);
|
||||
--color-border-input-overlay: var(--color-opac-w-6);
|
||||
--color-border-input-overlay-hover: var(--color-opac-w-8);
|
||||
--color-border-input-overlay-focus: var(--color-white);
|
||||
--color-border-input-checkbox: var(--color-opac-w-10);
|
||||
--color-border-input-checkbox-hover: var(--color-white);
|
||||
--color-border-input-checkbox-focus: var(--color-border-brand);
|
||||
--color-border-input-checkbox-checked: var(--color-border-brand);
|
||||
--color-border-input-checkbox-error: var(--color-border-error);
|
||||
--color-border-input-checkbox-overlay: var(--color-opac-w-10);
|
||||
--color-border-input-checkbox-hover-overlay: var(--color-white);
|
||||
--color-border-input-checkbox-checked-overlay: var(--color-white);
|
||||
--color-border-input-checkbox-overlay-focus: var(--color-white);
|
||||
--color-border-range-handle: var(--color-border-brand);
|
||||
--color-border-range-handle-focus: var(--color-white);
|
||||
--color-border-tag: var(--color-opac-w-3);
|
||||
--color-border-toggle: var(--color-opac-w-10);
|
||||
--color-border-toggle-hover: var(--color-white);
|
||||
--color-border-toggle-focus: var(--color-border-brand);
|
||||
--color-border-toggle-checked: var(--color-border-brand);
|
||||
--color-border-toggle-overlay: var(--color-opac-w-10);
|
||||
--color-border-toggle-overlay-hover: var(--color-white);
|
||||
--color-border-toggle-overlay-focus: var(--color-white);
|
||||
--color-border-toggle-overlay-checked: var(--color-white);
|
||||
--color-border-whisper-incoming: var(--color-twitch-purple-10);
|
||||
--color-border-whisper-outgoing: var(--color-hinted-grey-9);
|
||||
--color-border-selectable: var(--color-opac-w-3);
|
||||
--color-border-selectable-hover: var(--color-opac-w-4);
|
||||
--color-border-selectable-hover-selected: var(--color-white);
|
||||
--color-border-selectable-selected-outer: var(--color-white);
|
||||
--color-border-selectable-selected-inner: var(--color-black);
|
||||
--color-border-selectable-overlay: var(--color-opac-w-3);
|
||||
--color-border-selectable-overlay-hover: var(--color-opac-w-4);
|
||||
--color-border-selectable-overlay-selected: var(--color-white);
|
||||
--color-border-selectable-overlay-selected-inner: var(--color-black);
|
||||
--color-border-spinner: var(--color-opac-w-3);
|
||||
--color-border-spinner-fill: var(--color-hinted-grey-12);
|
||||
--color-border-quote: var(--color-hinted-grey-9);
|
||||
--color-data-series-a-base: var(--color-twitch-purple-12);
|
||||
--color-data-series-a-alt: var(--color-twitch-purple-11);
|
||||
--color-data-series-a-alt-2: var(--color-twitch-purple-10);
|
||||
--color-data-series-a-alt-3: var(--color-twitch-purple-9);
|
||||
--color-data-series-a-alt-4: var(--color-twitch-purple-8);
|
||||
--color-data-series-b-base: var(--color-magenta-12);
|
||||
--color-data-series-b-alt: var(--color-magenta-11);
|
||||
--color-data-series-b-alt-2: var(--color-magenta-10);
|
||||
--color-data-series-b-alt-3: var(--color-magenta-9);
|
||||
--color-data-series-b-alt-4: var(--color-magenta-8);
|
||||
--color-data-series-c-base: var(--color-blue-12);
|
||||
--color-data-series-c-alt: var(--color-blue-11);
|
||||
--color-data-series-c-alt-2: var(--color-blue-10);
|
||||
--color-data-series-c-alt-3: var(--color-blue-9);
|
||||
--color-data-series-c-alt-4: var(--color-blue-8);
|
||||
--color-data-series-d-base: var(--color-cyan-12);
|
||||
--color-data-series-d-alt: var(--color-cyan-11);
|
||||
--color-data-series-d-alt-2: var(--color-cyan-10);
|
||||
--color-data-series-d-alt-3: var(--color-cyan-9);
|
||||
--color-data-series-d-alt-4: var(--color-cyan-8);
|
||||
--color-data-series-e-base: var(--color-orange-12);
|
||||
--color-data-series-e-alt: var(--color-orange-11);
|
||||
--color-data-series-e-alt-2: var(--color-orange-10);
|
||||
--color-data-series-e-alt-3: var(--color-orange-9);
|
||||
--color-data-series-e-alt-4: var(--color-orange-8);
|
||||
--color-data-text-title: var(--color-text-base);
|
||||
--color-data-text-subtitle: var(--color-text-alt-2);
|
||||
--color-data-background-chart: var(--color-background-base);
|
||||
--color-data-axis: var(--color-text-alt-2);
|
||||
--color-data-grid: var(--color-border-base);
|
||||
--color-data-background-gauge: var(--color-background-alt);
|
||||
--color-data-indicator-positive: var(--color-cyan-11);
|
||||
--color-data-indicator-negative: var(--color-red-11);
|
||||
--color-icon-input-checked: var(--color-white);
|
||||
--color-icon-input-radio-checked: var(--color-white);
|
||||
--color-fill-base: var(--color-text-base);
|
||||
--color-fill-current: currentColor;
|
||||
--color-fill-alt: var(--color-text-alt);
|
||||
--color-fill-alt-2: var(--color-text-alt-2);
|
||||
--color-fill-offline: var(--color-hinted-grey-9);
|
||||
--color-fill-hosting: var(--color-orange-13);
|
||||
--color-fill-live: var(--color-red-9);
|
||||
--color-fill-recording: var(--color-red-9);
|
||||
--color-fill-alert: var(--color-error);
|
||||
--color-fill-error: var(--color-red-10);
|
||||
--color-fill-warn: var(--color-orange-12);
|
||||
--color-fill-success: var(--color-green-13);
|
||||
--color-fill-info: var(--color-blue-10);
|
||||
--color-fill-brand: var(--color-twitch-purple-10);
|
||||
--color-fill-error-overlay: var(--color-red-10);
|
||||
--color-fill-warn-overlay: var(--color-orange-12);
|
||||
--color-fill-success-overlay: var(--color-green-13);
|
||||
--color-fill-info-overlay: var(--color-blue-10);
|
||||
--color-fill-brand-overlay: var(--color-twitch-purple-10);
|
||||
--color-fill-prime: var(--color-prime-blue);
|
||||
--color-fill-drops: var(--color-green);
|
||||
--color-fill-crate: var(--color-green);
|
||||
--color-fill-range-notch: var(--color-hinted-grey-7);
|
||||
--color-fill-button-icon: var(--color-text-base);
|
||||
--color-fill-button-icon-hover: var(--color-text-base);
|
||||
--color-fill-button-icon-focus: var(--color-text-base);
|
||||
--color-fill-button-icon-active: var(--color-text-base);
|
||||
--color-fill-channel-status-text-indicator-hosting: var(--color-opac-w-10);
|
||||
--color-fill-channel-status-text-indicator-rerun: var(--color-opac-w-10);
|
||||
--color-fill-channel-status-text-indicator-offline: var(--color-white);
|
||||
--color-fill-channel-status-text-indicator-hosting-overlay: var(--color-opac-w-10);
|
||||
--color-fill-channel-status-text-indicator-rerun-overlay: var(--color-opac-w-10);
|
||||
--color-fill-channel-status-text-indicator-offline-overlay: var(--color-white);
|
||||
--color-fill-new-item-indicator: var(--color-magenta-11);
|
||||
--color-fill-presence-offline: var(--color-hinted-grey-9);
|
||||
--color-fill-presence-invisible: var(--color-hinted-grey-9);
|
||||
--color-fill-presence-online: var(--color-green-13);
|
||||
--color-fill-presence-away: var(--color-orange-12);
|
||||
--color-fill-presence-busy: var(--color-red-10);
|
||||
--color-fill-presence-idle: var(--color-orange-12);
|
||||
--color-fill-ribbon: var(--color-red-9);
|
||||
--color-social-twitter: var(--color-twitter);
|
||||
--color-social-facebook: var(--color-facebook);
|
||||
--color-social-reddit: var(--color-reddit);
|
||||
--color-social-snapchat: var(--color-snapchat);
|
||||
--color-social-instagram: var(--color-instagram);
|
||||
--color-social-youtube: var(--color-youtube);
|
||||
--color-social-paypal: var(--color-paypal);
|
||||
--color-social-vk: var(--color-vk);
|
||||
--shadow-elevation-umbra: 0.34;
|
||||
--shadow-elevation-penumbra: 0.26;
|
||||
--shadow-elevation-ambient: 0.28;
|
||||
--shadow-elevation-1: 0 1px 2px var(--color-opac-b-14),0 0px 2px var(--color-opac-b-14);
|
||||
--shadow-elevation-2: 0 4px 8px var(--color-opac-b-7),0 0px 4px var(--color-opac-b-7);
|
||||
--shadow-elevation-3: 0 6px 16px var(--color-opac-b-8),0 0px 4px var(--color-opac-b-7);
|
||||
--shadow-elevation-4: 0 12px 32px var(--color-opac-b-8),0 0px 8px var(--color-opac-b-7);
|
||||
--shadow-elevation-5: 0 32px 64px var(--color-opac-b-9),0 0px 16px var(--color-opac-b-7);
|
||||
--shadow-button-focus: 0 0 6px 0 var(--color-twitch-purple-8);
|
||||
--shadow-button-active: 0 0 6px 0 var(--color-twitch-purple-8);
|
||||
--shadow-button-disabled: none;
|
||||
--shadow-button-overlay-focus: 0 0 6px 0 var(--color-opac-w-6);
|
||||
--shadow-button-overlay-active: 0 0 6px 0 var(--color-opac-w-6);
|
||||
--shadow-tab-focus: 0 4px 6px -4px var(--color-twitch-purple-11);
|
||||
--shadow-balloon: 0 1px 1px var(--color-opac-b-5);
|
||||
--shadow-scrollbar: 0 0 1px 1px var(--color-opac-w-5);
|
||||
}
|
||||
Reference in New Issue
Block a user