mirror of
https://github.com/officialdakari/Extera.git
synced 2025-04-11 23:08:46 +02:00
bump
This commit is contained in:
OfficialDakari
parent
b34b1fe732
commit
e807c1ca1b
6 changed files with 563 additions and 516 deletions
3
.vscode/settings.json
vendored
3
.vscode/settings.json
vendored
|
|
@ -19,5 +19,8 @@
|
|||
},
|
||||
"[javascript]": {
|
||||
"editor.defaultFormatter": "vscode.typescript-language-features"
|
||||
},
|
||||
"[scss]": {
|
||||
"editor.defaultFormatter": "vscode.css-language-features"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -417,7 +417,7 @@ function ProfileViewer() {
|
|||
|
||||
return (
|
||||
<div className="profile-viewer">
|
||||
{bannerUrl && <Banner url={bannerUrl} />}
|
||||
{bannerUrl && <Banner noBorder={true} url={bannerUrl} />}
|
||||
<div className="profile-viewer__user">
|
||||
<Avatar style={avStyle} imageSrc={avatarUrl} text={username} bgColor={colorMXID(userId)} size="large" />
|
||||
<div className="profile-viewer__user__info">
|
||||
|
|
|
|||
|
|
@ -96,6 +96,7 @@ function AppearanceSection() {
|
|||
{ text: 'Silver' },
|
||||
{ text: 'Dark' },
|
||||
{ text: 'Butter' },
|
||||
{ text: 'Extera Dark' },
|
||||
]}
|
||||
onSelect={(index) => {
|
||||
if (settings.useSystemTheme) toggleSystemTheme();
|
||||
|
|
|
|||
|
|
@ -3,206 +3,206 @@ import EventEmitter from 'events';
|
|||
import appDispatcher from '../dispatcher';
|
||||
|
||||
import cons from './cons';
|
||||
import { darkTheme, butterTheme, silverTheme } from '../../colors.css';
|
||||
import { darkTheme, butterTheme, silverTheme, exteraDarkTheme } from '../../colors.css';
|
||||
import { onLightFontWeight, onDarkFontWeight } from '../../config.css';
|
||||
|
||||
function getSettings() {
|
||||
const settings = localStorage.getItem('settings');
|
||||
if (settings === null) return null;
|
||||
return JSON.parse(settings);
|
||||
const settings = localStorage.getItem('settings');
|
||||
if (settings === null) return null;
|
||||
return JSON.parse(settings);
|
||||
}
|
||||
|
||||
function setSettings(key, value) {
|
||||
let settings = getSettings();
|
||||
if (settings === null) settings = {};
|
||||
settings[key] = value;
|
||||
localStorage.setItem('settings', JSON.stringify(settings));
|
||||
let settings = getSettings();
|
||||
if (settings === null) settings = {};
|
||||
settings[key] = value;
|
||||
localStorage.setItem('settings', JSON.stringify(settings));
|
||||
}
|
||||
|
||||
class Settings extends EventEmitter {
|
||||
constructor() {
|
||||
super();
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.themeClasses = [lightTheme, silverTheme, darkTheme, butterTheme];
|
||||
this.fontWeightClasses = [onLightFontWeight, onLightFontWeight, onDarkFontWeight, onDarkFontWeight]
|
||||
this.themes = ['', 'silver-theme', 'dark-theme', 'butter-theme'];
|
||||
this.themeIndex = this.getThemeIndex();
|
||||
this.themeClasses = [lightTheme, silverTheme, darkTheme, butterTheme, exteraDarkTheme];
|
||||
this.fontWeightClasses = [onLightFontWeight, onLightFontWeight, onDarkFontWeight, onDarkFontWeight]
|
||||
this.themes = ['', 'silver-theme', 'dark-theme', 'butter-theme', 'extera-dark-theme'];
|
||||
this.themeIndex = this.getThemeIndex();
|
||||
|
||||
this.useSystemTheme = this.getUseSystemTheme();
|
||||
this.isMarkdown = this.getIsMarkdown();
|
||||
this.isPeopleDrawer = this.getIsPeopleDrawer();
|
||||
this.hideMembershipEvents = this.getHideMembershipEvents();
|
||||
this.hideNickAvatarEvents = this.getHideNickAvatarEvents();
|
||||
this._showNotifications = this.getShowNotifications();
|
||||
this.isNotificationSounds = this.getIsNotificationSounds();
|
||||
this.useSystemTheme = this.getUseSystemTheme();
|
||||
this.isMarkdown = this.getIsMarkdown();
|
||||
this.isPeopleDrawer = this.getIsPeopleDrawer();
|
||||
this.hideMembershipEvents = this.getHideMembershipEvents();
|
||||
this.hideNickAvatarEvents = this.getHideNickAvatarEvents();
|
||||
this._showNotifications = this.getShowNotifications();
|
||||
this.isNotificationSounds = this.getIsNotificationSounds();
|
||||
|
||||
this.darkModeQueryList = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
this.darkModeQueryList = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
|
||||
this.darkModeQueryList.addEventListener('change', () => this.applyTheme())
|
||||
this.darkModeQueryList.addEventListener('change', () => this.applyTheme())
|
||||
|
||||
this.isTouchScreenDevice = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0);
|
||||
}
|
||||
this.isTouchScreenDevice = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0);
|
||||
}
|
||||
|
||||
getThemeIndex() {
|
||||
if (typeof this.themeIndex === 'number') return this.themeIndex;
|
||||
getThemeIndex() {
|
||||
if (typeof this.themeIndex === 'number') return this.themeIndex;
|
||||
|
||||
const settings = getSettings();
|
||||
if (settings === null) return 0;
|
||||
if (typeof settings.themeIndex === 'undefined') return 0;
|
||||
// eslint-disable-next-line radix
|
||||
return parseInt(settings.themeIndex);
|
||||
}
|
||||
const settings = getSettings();
|
||||
if (settings === null) return 0;
|
||||
if (typeof settings.themeIndex === 'undefined') return 0;
|
||||
// eslint-disable-next-line radix
|
||||
return parseInt(settings.themeIndex);
|
||||
}
|
||||
|
||||
getThemeName() {
|
||||
return this.themes[this.themeIndex];
|
||||
}
|
||||
getThemeName() {
|
||||
return this.themes[this.themeIndex];
|
||||
}
|
||||
|
||||
_clearTheme() {
|
||||
this.themes.forEach((themeName, index) => {
|
||||
if (themeName !== '') document.body.classList.remove(themeName);
|
||||
document.body.classList.remove(this.themeClasses[index]);
|
||||
document.body.classList.remove(this.fontWeightClasses[index]);
|
||||
document.body.classList.remove('prism-light')
|
||||
document.body.classList.remove('prism-dark')
|
||||
});
|
||||
}
|
||||
_clearTheme() {
|
||||
this.themes.forEach((themeName, index) => {
|
||||
if (themeName !== '') document.body.classList.remove(themeName);
|
||||
document.body.classList.remove(this.themeClasses[index]);
|
||||
document.body.classList.remove(this.fontWeightClasses[index]);
|
||||
document.body.classList.remove('prism-light')
|
||||
document.body.classList.remove('prism-dark')
|
||||
});
|
||||
}
|
||||
|
||||
applyTheme() {
|
||||
this._clearTheme();
|
||||
const autoThemeIndex = this.darkModeQueryList.matches ? 2 : 0;
|
||||
const themeIndex = this.useSystemTheme ? autoThemeIndex : this.themeIndex;
|
||||
if (this.themes[themeIndex] === undefined) return
|
||||
if (this.themes[themeIndex]) document.body.classList.add(this.themes[themeIndex]);
|
||||
document.body.classList.add(this.themeClasses[themeIndex]);
|
||||
document.body.classList.add(this.fontWeightClasses[themeIndex]);
|
||||
document.body.classList.add(themeIndex < 2 ? 'prism-light' : 'prism-dark');
|
||||
}
|
||||
applyTheme() {
|
||||
this._clearTheme();
|
||||
const autoThemeIndex = this.darkModeQueryList.matches ? 2 : 0;
|
||||
const themeIndex = this.useSystemTheme ? autoThemeIndex : this.themeIndex;
|
||||
if (this.themes[themeIndex] === undefined) return
|
||||
if (this.themes[themeIndex]) document.body.classList.add(this.themes[themeIndex]);
|
||||
document.body.classList.add(this.themeClasses[themeIndex]);
|
||||
document.body.classList.add(this.fontWeightClasses[themeIndex]);
|
||||
document.body.classList.add(themeIndex < 2 ? 'prism-light' : 'prism-dark');
|
||||
}
|
||||
|
||||
setTheme(themeIndex) {
|
||||
this.themeIndex = themeIndex;
|
||||
setSettings('themeIndex', this.themeIndex);
|
||||
this.applyTheme();
|
||||
}
|
||||
setTheme(themeIndex) {
|
||||
this.themeIndex = themeIndex;
|
||||
setSettings('themeIndex', this.themeIndex);
|
||||
this.applyTheme();
|
||||
}
|
||||
|
||||
toggleUseSystemTheme() {
|
||||
this.useSystemTheme = !this.useSystemTheme;
|
||||
setSettings('useSystemTheme', this.useSystemTheme);
|
||||
this.applyTheme();
|
||||
toggleUseSystemTheme() {
|
||||
this.useSystemTheme = !this.useSystemTheme;
|
||||
setSettings('useSystemTheme', this.useSystemTheme);
|
||||
this.applyTheme();
|
||||
|
||||
this.emit(cons.events.settings.SYSTEM_THEME_TOGGLED, this.useSystemTheme);
|
||||
}
|
||||
this.emit(cons.events.settings.SYSTEM_THEME_TOGGLED, this.useSystemTheme);
|
||||
}
|
||||
|
||||
getUseSystemTheme() {
|
||||
if (typeof this.useSystemTheme === 'boolean') return this.useSystemTheme;
|
||||
getUseSystemTheme() {
|
||||
if (typeof this.useSystemTheme === 'boolean') return this.useSystemTheme;
|
||||
|
||||
const settings = getSettings();
|
||||
if (settings === null) return true;
|
||||
if (typeof settings.useSystemTheme === 'undefined') return true;
|
||||
return settings.useSystemTheme;
|
||||
}
|
||||
const settings = getSettings();
|
||||
if (settings === null) return true;
|
||||
if (typeof settings.useSystemTheme === 'undefined') return true;
|
||||
return settings.useSystemTheme;
|
||||
}
|
||||
|
||||
getIsMarkdown() {
|
||||
if (typeof this.isMarkdown === 'boolean') return this.isMarkdown;
|
||||
getIsMarkdown() {
|
||||
if (typeof this.isMarkdown === 'boolean') return this.isMarkdown;
|
||||
|
||||
const settings = getSettings();
|
||||
if (settings === null) return true;
|
||||
if (typeof settings.isMarkdown === 'undefined') return true;
|
||||
return settings.isMarkdown;
|
||||
}
|
||||
const settings = getSettings();
|
||||
if (settings === null) return true;
|
||||
if (typeof settings.isMarkdown === 'undefined') return true;
|
||||
return settings.isMarkdown;
|
||||
}
|
||||
|
||||
getHideMembershipEvents() {
|
||||
if (typeof this.hideMembershipEvents === 'boolean') return this.hideMembershipEvents;
|
||||
getHideMembershipEvents() {
|
||||
if (typeof this.hideMembershipEvents === 'boolean') return this.hideMembershipEvents;
|
||||
|
||||
const settings = getSettings();
|
||||
if (settings === null) return false;
|
||||
if (typeof settings.hideMembershipEvents === 'undefined') return false;
|
||||
return settings.hideMembershipEvents;
|
||||
}
|
||||
const settings = getSettings();
|
||||
if (settings === null) return false;
|
||||
if (typeof settings.hideMembershipEvents === 'undefined') return false;
|
||||
return settings.hideMembershipEvents;
|
||||
}
|
||||
|
||||
getHideNickAvatarEvents() {
|
||||
if (typeof this.hideNickAvatarEvents === 'boolean') return this.hideNickAvatarEvents;
|
||||
getHideNickAvatarEvents() {
|
||||
if (typeof this.hideNickAvatarEvents === 'boolean') return this.hideNickAvatarEvents;
|
||||
|
||||
const settings = getSettings();
|
||||
if (settings === null) return true;
|
||||
if (typeof settings.hideNickAvatarEvents === 'undefined') return true;
|
||||
return settings.hideNickAvatarEvents;
|
||||
}
|
||||
const settings = getSettings();
|
||||
if (settings === null) return true;
|
||||
if (typeof settings.hideNickAvatarEvents === 'undefined') return true;
|
||||
return settings.hideNickAvatarEvents;
|
||||
}
|
||||
|
||||
getIsPeopleDrawer() {
|
||||
if (typeof this.isPeopleDrawer === 'boolean') return this.isPeopleDrawer;
|
||||
getIsPeopleDrawer() {
|
||||
if (typeof this.isPeopleDrawer === 'boolean') return this.isPeopleDrawer;
|
||||
|
||||
const settings = getSettings();
|
||||
if (settings === null) return true;
|
||||
if (typeof settings.isPeopleDrawer === 'undefined') return true;
|
||||
return settings.isPeopleDrawer;
|
||||
}
|
||||
const settings = getSettings();
|
||||
if (settings === null) return true;
|
||||
if (typeof settings.isPeopleDrawer === 'undefined') return true;
|
||||
return settings.isPeopleDrawer;
|
||||
}
|
||||
|
||||
get showNotifications() {
|
||||
if (window.Notification?.permission !== 'granted') return false;
|
||||
return this._showNotifications;
|
||||
}
|
||||
get showNotifications() {
|
||||
if (window.Notification?.permission !== 'granted') return false;
|
||||
return this._showNotifications;
|
||||
}
|
||||
|
||||
getShowNotifications() {
|
||||
if (typeof this._showNotifications === 'boolean') return this._showNotifications;
|
||||
getShowNotifications() {
|
||||
if (typeof this._showNotifications === 'boolean') return this._showNotifications;
|
||||
|
||||
const settings = getSettings();
|
||||
if (settings === null) return true;
|
||||
if (typeof settings.showNotifications === 'undefined') return true;
|
||||
return settings.showNotifications;
|
||||
}
|
||||
const settings = getSettings();
|
||||
if (settings === null) return true;
|
||||
if (typeof settings.showNotifications === 'undefined') return true;
|
||||
return settings.showNotifications;
|
||||
}
|
||||
|
||||
getIsNotificationSounds() {
|
||||
if (typeof this.isNotificationSounds === 'boolean') return this.isNotificationSounds;
|
||||
getIsNotificationSounds() {
|
||||
if (typeof this.isNotificationSounds === 'boolean') return this.isNotificationSounds;
|
||||
|
||||
const settings = getSettings();
|
||||
if (settings === null) return true;
|
||||
if (typeof settings.isNotificationSounds === 'undefined') return true;
|
||||
return settings.isNotificationSounds;
|
||||
}
|
||||
const settings = getSettings();
|
||||
if (settings === null) return true;
|
||||
if (typeof settings.isNotificationSounds === 'undefined') return true;
|
||||
return settings.isNotificationSounds;
|
||||
}
|
||||
|
||||
setter(action) {
|
||||
const actions = {
|
||||
[cons.actions.settings.TOGGLE_SYSTEM_THEME]: () => {
|
||||
this.toggleUseSystemTheme();
|
||||
},
|
||||
[cons.actions.settings.TOGGLE_MARKDOWN]: () => {
|
||||
this.isMarkdown = !this.isMarkdown;
|
||||
setSettings('isMarkdown', this.isMarkdown);
|
||||
this.emit(cons.events.settings.MARKDOWN_TOGGLED, this.isMarkdown);
|
||||
},
|
||||
[cons.actions.settings.TOGGLE_PEOPLE_DRAWER]: () => {
|
||||
this.isPeopleDrawer = !this.isPeopleDrawer;
|
||||
setSettings('isPeopleDrawer', this.isPeopleDrawer);
|
||||
this.emit(cons.events.settings.PEOPLE_DRAWER_TOGGLED, this.isPeopleDrawer);
|
||||
},
|
||||
[cons.actions.settings.TOGGLE_MEMBERSHIP_EVENT]: () => {
|
||||
this.hideMembershipEvents = !this.hideMembershipEvents;
|
||||
setSettings('hideMembershipEvents', this.hideMembershipEvents);
|
||||
this.emit(cons.events.settings.MEMBERSHIP_EVENTS_TOGGLED, this.hideMembershipEvents);
|
||||
},
|
||||
[cons.actions.settings.TOGGLE_NICKAVATAR_EVENT]: () => {
|
||||
this.hideNickAvatarEvents = !this.hideNickAvatarEvents;
|
||||
setSettings('hideNickAvatarEvents', this.hideNickAvatarEvents);
|
||||
this.emit(cons.events.settings.NICKAVATAR_EVENTS_TOGGLED, this.hideNickAvatarEvents);
|
||||
},
|
||||
[cons.actions.settings.TOGGLE_NOTIFICATIONS]: async () => {
|
||||
if (window.Notification?.permission !== 'granted') {
|
||||
this._showNotifications = false;
|
||||
} else {
|
||||
this._showNotifications = !this._showNotifications;
|
||||
}
|
||||
setSettings('showNotifications', this._showNotifications);
|
||||
this.emit(cons.events.settings.NOTIFICATIONS_TOGGLED, this._showNotifications);
|
||||
},
|
||||
[cons.actions.settings.TOGGLE_NOTIFICATION_SOUNDS]: () => {
|
||||
this.isNotificationSounds = !this.isNotificationSounds;
|
||||
setSettings('isNotificationSounds', this.isNotificationSounds);
|
||||
this.emit(cons.events.settings.NOTIFICATION_SOUNDS_TOGGLED, this.isNotificationSounds);
|
||||
},
|
||||
};
|
||||
setter(action) {
|
||||
const actions = {
|
||||
[cons.actions.settings.TOGGLE_SYSTEM_THEME]: () => {
|
||||
this.toggleUseSystemTheme();
|
||||
},
|
||||
[cons.actions.settings.TOGGLE_MARKDOWN]: () => {
|
||||
this.isMarkdown = !this.isMarkdown;
|
||||
setSettings('isMarkdown', this.isMarkdown);
|
||||
this.emit(cons.events.settings.MARKDOWN_TOGGLED, this.isMarkdown);
|
||||
},
|
||||
[cons.actions.settings.TOGGLE_PEOPLE_DRAWER]: () => {
|
||||
this.isPeopleDrawer = !this.isPeopleDrawer;
|
||||
setSettings('isPeopleDrawer', this.isPeopleDrawer);
|
||||
this.emit(cons.events.settings.PEOPLE_DRAWER_TOGGLED, this.isPeopleDrawer);
|
||||
},
|
||||
[cons.actions.settings.TOGGLE_MEMBERSHIP_EVENT]: () => {
|
||||
this.hideMembershipEvents = !this.hideMembershipEvents;
|
||||
setSettings('hideMembershipEvents', this.hideMembershipEvents);
|
||||
this.emit(cons.events.settings.MEMBERSHIP_EVENTS_TOGGLED, this.hideMembershipEvents);
|
||||
},
|
||||
[cons.actions.settings.TOGGLE_NICKAVATAR_EVENT]: () => {
|
||||
this.hideNickAvatarEvents = !this.hideNickAvatarEvents;
|
||||
setSettings('hideNickAvatarEvents', this.hideNickAvatarEvents);
|
||||
this.emit(cons.events.settings.NICKAVATAR_EVENTS_TOGGLED, this.hideNickAvatarEvents);
|
||||
},
|
||||
[cons.actions.settings.TOGGLE_NOTIFICATIONS]: async () => {
|
||||
if (window.Notification?.permission !== 'granted') {
|
||||
this._showNotifications = false;
|
||||
} else {
|
||||
this._showNotifications = !this._showNotifications;
|
||||
}
|
||||
setSettings('showNotifications', this._showNotifications);
|
||||
this.emit(cons.events.settings.NOTIFICATIONS_TOGGLED, this._showNotifications);
|
||||
},
|
||||
[cons.actions.settings.TOGGLE_NOTIFICATION_SOUNDS]: () => {
|
||||
this.isNotificationSounds = !this.isNotificationSounds;
|
||||
setSettings('isNotificationSounds', this.isNotificationSounds);
|
||||
this.emit(cons.events.settings.NOTIFICATION_SOUNDS_TOGGLED, this.isNotificationSounds);
|
||||
},
|
||||
};
|
||||
|
||||
actions[action.type]?.();
|
||||
}
|
||||
actions[action.type]?.();
|
||||
}
|
||||
}
|
||||
|
||||
const settings = new Settings();
|
||||
|
|
|
|||
|
|
@ -236,3 +236,56 @@ export const butterTheme = createTheme(color, {
|
|||
OnContainer: '#F2EED3',
|
||||
},
|
||||
});
|
||||
|
||||
export const exteraDarkTheme = createTheme(color, {
|
||||
...darkThemeData,
|
||||
Background: {
|
||||
Container: '#23163c',
|
||||
ContainerHover: '#392d43',
|
||||
ContainerActive: '#332b46',
|
||||
ContainerLine: '#353145',
|
||||
OnContainer: '#e0e1ff',
|
||||
},
|
||||
|
||||
Surface: {
|
||||
Container: '#22203c',
|
||||
ContainerHover: '#363045',
|
||||
ContainerActive: '#332b46',
|
||||
ContainerLine: '#353145',
|
||||
OnContainer: '#e0e1ff',
|
||||
},
|
||||
|
||||
SurfaceVariant: {
|
||||
Container: '#2f2d53',
|
||||
ContainerHover: '#423b54',
|
||||
ContainerActive: '#413659',
|
||||
ContainerLine: '#403b54',
|
||||
OnContainer: '#f0f0ff',
|
||||
},
|
||||
|
||||
Primary: {
|
||||
Main: '#eee0ff',
|
||||
MainHover: '#d5c8e5',
|
||||
MainActive: '#ccbeda',
|
||||
MainLine: '#c0b3cc',
|
||||
OnMain: '#2b2037',
|
||||
Container: '#432a50',
|
||||
ContainerHover: '#463b54',
|
||||
ContainerActive: '#4a4168',
|
||||
ContainerLine: '#514677',
|
||||
OnContainer: '#e0d4f2',
|
||||
},
|
||||
|
||||
Secondary: {
|
||||
Main: '#eee0ff',
|
||||
MainHover: '#d5c8e5',
|
||||
MainActive: '#ccbeda',
|
||||
MainLine: '#c0b3cc',
|
||||
OnMain: '#2b2037',
|
||||
Container: '#432a50',
|
||||
ContainerHover: '#463b54',
|
||||
ContainerActive: '#4a4168',
|
||||
ContainerLine: '#514677',
|
||||
OnContainer: '#e0d4f2',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
698
src/index.scss
698
src/index.scss
|
|
@ -1,419 +1,399 @@
|
|||
@use './app/partials/screen';
|
||||
|
||||
@font-face {
|
||||
font-family: Twemoji;
|
||||
src: url('../public/font/Twemoji.Mozilla.v.7.0.woff2'),
|
||||
url('../public/font/Twemoji.Mozilla.v0.7.0.ttf');
|
||||
font-display: swap;
|
||||
font-family: Twemoji;
|
||||
src: url('../public/font/Twemoji.Mozilla.v.7.0.woff2'),
|
||||
url('../public/font/Twemoji.Mozilla.v0.7.0.ttf');
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
:root {
|
||||
/* background color | --bg-[background type]: value */
|
||||
--bg-surface: #ffffff;
|
||||
--bg-surface-transparent: #ffffff00;
|
||||
--bg-surface-low: #f6f6f6;
|
||||
--bg-surface-low-transparent: #f6f6f600;
|
||||
--bg-surface-extra-low: #f6f6f6;
|
||||
--bg-surface-extra-low-transparent: #f6f6f600;
|
||||
--bg-surface-hover: rgba(0, 0, 0, 3%);
|
||||
--bg-surface-active: rgba(0, 0, 0, 5%);
|
||||
--bg-surface-border: rgba(0, 0, 0, 6%);
|
||||
/* background color | --bg-[background type]: value */
|
||||
--bg-surface: #ffffff;
|
||||
--bg-surface-transparent: #ffffff00;
|
||||
--bg-surface-low: #f6f6f6;
|
||||
--bg-surface-low-transparent: #f6f6f600;
|
||||
--bg-surface-extra-low: #f6f6f6;
|
||||
--bg-surface-extra-low-transparent: #f6f6f600;
|
||||
--bg-surface-hover: rgba(0, 0, 0, 3%);
|
||||
--bg-surface-active: rgba(0, 0, 0, 5%);
|
||||
--bg-surface-border: rgba(0, 0, 0, 6%);
|
||||
|
||||
--bg-primary: rgb(83, 110, 234);
|
||||
--bg-primary-hover: rgba(83, 110, 234, 80%);
|
||||
--bg-primary-active: rgba(83, 110, 234, 70%);
|
||||
--bg-primary-border: rgba(83, 110, 234, 38%);
|
||||
--bg-primary: rgb(83, 110, 234);
|
||||
--bg-primary-hover: rgba(83, 110, 234, 80%);
|
||||
--bg-primary-active: rgba(83, 110, 234, 70%);
|
||||
--bg-primary-border: rgba(83, 110, 234, 38%);
|
||||
|
||||
--bg-positive: rgb(69, 184, 59);
|
||||
--bg-positive-hover: rgba(69, 184, 59, 8%);
|
||||
--bg-positive-active: rgba(69, 184, 59, 15%);
|
||||
--bg-positive-border: rgba(69, 184, 59, 40%);
|
||||
--bg-positive: rgb(69, 184, 59);
|
||||
--bg-positive-hover: rgba(69, 184, 59, 8%);
|
||||
--bg-positive-active: rgba(69, 184, 59, 15%);
|
||||
--bg-positive-border: rgba(69, 184, 59, 40%);
|
||||
|
||||
--bg-caution: rgb(255, 179, 0);
|
||||
--bg-caution-hover: rgba(255, 179, 0, 8%);
|
||||
--bg-caution-active: rgba(255, 179, 0, 15%);
|
||||
--bg-caution-border: rgba(255, 179, 0, 40%);
|
||||
--bg-caution: rgb(255, 179, 0);
|
||||
--bg-caution-hover: rgba(255, 179, 0, 8%);
|
||||
--bg-caution-active: rgba(255, 179, 0, 15%);
|
||||
--bg-caution-border: rgba(255, 179, 0, 40%);
|
||||
|
||||
--bg-danger: rgb(240, 71, 71);
|
||||
--bg-danger-hover: rgba(240, 71, 71, 5%);
|
||||
--bg-danger-active: rgba(240, 71, 71, 10%);
|
||||
--bg-danger-border: rgba(240, 71, 71, 20%);
|
||||
--bg-danger: rgb(240, 71, 71);
|
||||
--bg-danger-hover: rgba(240, 71, 71, 5%);
|
||||
--bg-danger-active: rgba(240, 71, 71, 10%);
|
||||
--bg-danger-border: rgba(240, 71, 71, 20%);
|
||||
|
||||
--bg-tooltip: #353535;
|
||||
--bg-badge: #989898;
|
||||
--bg-ping: hsla(137deg, 100%, 68%, 40%);
|
||||
--bg-ping-hover: hsla(137deg, 100%, 68%, 50%);
|
||||
--bg-divider: hsla(0, 0%, 0%, 0.1);
|
||||
--bg-tooltip: #353535;
|
||||
--bg-badge: #989898;
|
||||
--bg-ping: hsla(137deg, 100%, 68%, 40%);
|
||||
--bg-ping-hover: hsla(137deg, 100%, 68%, 50%);
|
||||
--bg-divider: hsla(0, 0%, 0%, 0.1);
|
||||
|
||||
/* text color | --tc-[background type]-[priority]: value */
|
||||
--tc-surface-high: #000000;
|
||||
--tc-surface-normal: rgba(0, 0, 0, 78%);
|
||||
--tc-surface-normal-low: rgba(0, 0, 0, 60%);
|
||||
--tc-surface-low: rgba(0, 0, 0, 48%);
|
||||
/* text color | --tc-[background type]-[priority]: value */
|
||||
--tc-surface-high: #000000;
|
||||
--tc-surface-normal: rgba(0, 0, 0, 78%);
|
||||
--tc-surface-normal-low: rgba(0, 0, 0, 60%);
|
||||
--tc-surface-low: rgba(0, 0, 0, 48%);
|
||||
|
||||
--tc-primary-high: #ffffff;
|
||||
--tc-primary-normal: rgba(255, 255, 255, 68%);
|
||||
--tc-primary-low: rgba(255, 255, 255, 40%);
|
||||
--tc-primary-high: #ffffff;
|
||||
--tc-primary-normal: rgba(255, 255, 255, 68%);
|
||||
--tc-primary-low: rgba(255, 255, 255, 40%);
|
||||
|
||||
--tc-positive-high: var(--bg-positive);
|
||||
--tc-positive-normal: rgb(69, 184, 59, 80%);
|
||||
--tc-positive-low: rgb(69, 184, 59, 60%);
|
||||
--tc-positive-high: var(--bg-positive);
|
||||
--tc-positive-normal: rgb(69, 184, 59, 80%);
|
||||
--tc-positive-low: rgb(69, 184, 59, 60%);
|
||||
|
||||
--tc-caution-high: var(--bg-caution);
|
||||
--tc-caution-normal: rgb(255, 179, 0, 80%);
|
||||
--tc-caution-low: rgb(255, 179, 0, 60%);
|
||||
--tc-caution-high: var(--bg-caution);
|
||||
--tc-caution-normal: rgb(255, 179, 0, 80%);
|
||||
--tc-caution-low: rgb(255, 179, 0, 60%);
|
||||
|
||||
--tc-danger-high: var(--bg-danger);
|
||||
--tc-danger-normal: rgba(240, 71, 71, 88%);
|
||||
--tc-danger-low: rgba(240, 71, 71, 60%);
|
||||
--tc-danger-high: var(--bg-danger);
|
||||
--tc-danger-normal: rgba(240, 71, 71, 88%);
|
||||
--tc-danger-low: rgba(240, 71, 71, 60%);
|
||||
|
||||
--tc-code: #e62498;
|
||||
--tc-link: hsl(213deg 100% 45%);
|
||||
--tc-tooltip: white;
|
||||
--tc-badge: white;
|
||||
--tc-code: #e62498;
|
||||
--tc-link: hsl(213deg 100% 45%);
|
||||
--tc-tooltip: white;
|
||||
--tc-badge: white;
|
||||
|
||||
/* system icons | --ic-[background type]-[priority]: value */
|
||||
--ic-surface-high: #272727;
|
||||
--ic-surface-normal: #626262;
|
||||
--ic-surface-low: #7c7c7c;
|
||||
--ic-primary-high: #ffffff;
|
||||
--ic-primary-normal: #ffffff;
|
||||
--ic-positive-high: rgba(69, 184, 59);
|
||||
--ic-positive-normal: rgba(69, 184, 59, 80%);
|
||||
--ic-caution-high: rgba(255, 179, 0);
|
||||
--ic-caution-normal: rgba(255, 179, 0, 80%);
|
||||
--ic-danger-high: rgba(240, 71, 71);
|
||||
--ic-danger-normal: rgba(240, 71, 71, 0.7);
|
||||
/* system icons | --ic-[background type]-[priority]: value */
|
||||
--ic-surface-high: #272727;
|
||||
--ic-surface-normal: #626262;
|
||||
--ic-surface-low: #7c7c7c;
|
||||
--ic-primary-high: #ffffff;
|
||||
--ic-primary-normal: #ffffff;
|
||||
--ic-positive-high: rgba(69, 184, 59);
|
||||
--ic-positive-normal: rgba(69, 184, 59, 80%);
|
||||
--ic-caution-high: rgba(255, 179, 0);
|
||||
--ic-caution-normal: rgba(255, 179, 0, 80%);
|
||||
--ic-danger-high: rgba(240, 71, 71);
|
||||
--ic-danger-normal: rgba(240, 71, 71, 0.7);
|
||||
|
||||
/* user mxid colors */
|
||||
--mx-uc-1: hsl(208, 100%, 45%);
|
||||
--mx-uc-2: hsl(302, 100%, 30%);
|
||||
--mx-uc-3: hsl(163, 100%, 30%);
|
||||
--mx-uc-4: hsl(343, 100%, 45%);
|
||||
--mx-uc-5: hsl(24, 100%, 45%);
|
||||
--mx-uc-6: hsl(181, 100%, 30%);
|
||||
--mx-uc-7: hsl(242, 100%, 45%);
|
||||
--mx-uc-8: hsl(94, 100%, 35%);
|
||||
/* user mxid colors */
|
||||
--mx-uc-1: hsl(208, 100%, 45%);
|
||||
--mx-uc-2: hsl(302, 100%, 30%);
|
||||
--mx-uc-3: hsl(163, 100%, 30%);
|
||||
--mx-uc-4: hsl(343, 100%, 45%);
|
||||
--mx-uc-5: hsl(24, 100%, 45%);
|
||||
--mx-uc-6: hsl(181, 100%, 30%);
|
||||
--mx-uc-7: hsl(242, 100%, 45%);
|
||||
--mx-uc-8: hsl(94, 100%, 35%);
|
||||
|
||||
/* system icon size | -ic-[size]: value */
|
||||
--ic-large: 38px;
|
||||
--ic-normal: 24px;
|
||||
--ic-small: 20px;
|
||||
--ic-extra-small: 18px;
|
||||
/* system icon size | -ic-[size]: value */
|
||||
--ic-large: 38px;
|
||||
--ic-normal: 24px;
|
||||
--ic-small: 20px;
|
||||
--ic-extra-small: 18px;
|
||||
|
||||
/* avatar size */
|
||||
--av-large: 80px;
|
||||
--av-normal: 42px;
|
||||
--av-small: 36px;
|
||||
--av-extra-small: 24px;
|
||||
/* avatar size */
|
||||
--av-large: 80px;
|
||||
--av-normal: 42px;
|
||||
--av-small: 36px;
|
||||
--av-extra-small: 24px;
|
||||
|
||||
/* shadow and overlay */
|
||||
--bg-overlay: rgba(0, 0, 0, 20%);
|
||||
--bg-overlay-low: rgba(0, 0, 0, 50%);
|
||||
/* shadow and overlay */
|
||||
--bg-overlay: rgba(0, 0, 0, 20%);
|
||||
--bg-overlay-low: rgba(0, 0, 0, 50%);
|
||||
|
||||
--bs-popup: 0 0 16px rgba(0, 0, 0, 10%);
|
||||
--bs-popup: 0 0 16px rgba(0, 0, 0, 10%);
|
||||
|
||||
--bs-surface-border: inset 0 0 0 1px var(--bg-surface-border);
|
||||
--bs-surface-outline: 0 0 0 2px var(--bg-surface-border);
|
||||
--bs-surface-border: inset 0 0 0 1px var(--bg-surface-border);
|
||||
--bs-surface-outline: 0 0 0 2px var(--bg-surface-border);
|
||||
|
||||
--bs-primary-border: inset 0 0 0 1px var(--bg-primary-border);
|
||||
--bs-primary-outline: 0 0 0 2px var(--bg-primary-border);
|
||||
--bs-primary-border: inset 0 0 0 1px var(--bg-primary-border);
|
||||
--bs-primary-outline: 0 0 0 2px var(--bg-primary-border);
|
||||
|
||||
--bs-positive-border: inset 0 0 0 1px var(--bg-positive-border);
|
||||
--bs-positive-outline: 0 0 0 2px var(--bg-positive-border);
|
||||
--bs-positive-border: inset 0 0 0 1px var(--bg-positive-border);
|
||||
--bs-positive-outline: 0 0 0 2px var(--bg-positive-border);
|
||||
|
||||
--bs-caution-border: inset 0 0 0 1px var(--bg-caution-border);
|
||||
--bs-caution-outline: 0 0 0 2px var(--bg-caution-border);
|
||||
--bs-caution-border: inset 0 0 0 1px var(--bg-caution-border);
|
||||
--bs-caution-outline: 0 0 0 2px var(--bg-caution-border);
|
||||
|
||||
--bs-danger-border: inset 0 0 0 1px var(--bg-danger-border);
|
||||
--bs-danger-outline: 0 0 0 2px var(--bg-danger-border);
|
||||
--bs-danger-border: inset 0 0 0 1px var(--bg-danger-border);
|
||||
--bs-danger-outline: 0 0 0 2px var(--bg-danger-border);
|
||||
|
||||
/* border */
|
||||
--bo-radius: 8px;
|
||||
/* border */
|
||||
--bo-radius: 8px;
|
||||
|
||||
/* font styles: font-size, letter-spacing, line-hight */
|
||||
--fs-h1: 36px;
|
||||
--ls-h1: -1.5px;
|
||||
--lh-h1: 38px;
|
||||
/* font styles: font-size, letter-spacing, line-hight */
|
||||
--fs-h1: 36px;
|
||||
--ls-h1: -1.5px;
|
||||
--lh-h1: 38px;
|
||||
|
||||
--fs-h2: 24px;
|
||||
--ls-h2: -0.5px;
|
||||
--lh-h2: 30px;
|
||||
--fs-h2: 24px;
|
||||
--ls-h2: -0.5px;
|
||||
--lh-h2: 30px;
|
||||
|
||||
--fs-s1: 18px;
|
||||
--ls-s1: -0.2px;
|
||||
--lh-s1: 24px;
|
||||
--fs-s1: 18px;
|
||||
--ls-s1: -0.2px;
|
||||
--lh-s1: 24px;
|
||||
|
||||
--fs-b1: 16px;
|
||||
--ls-b1: 0.1px;
|
||||
--lh-b1: 24px;
|
||||
--fs-b1: 16px;
|
||||
--ls-b1: 0.1px;
|
||||
--lh-b1: 24px;
|
||||
|
||||
--fs-b2: 14px;
|
||||
--ls-b2: 0.2px;
|
||||
--lh-b2: 20px;
|
||||
--fs-b2: 14px;
|
||||
--ls-b2: 0.2px;
|
||||
--lh-b2: 20px;
|
||||
|
||||
--fs-b3: 12px;
|
||||
--ls-b3: 0px;
|
||||
--lh-b3: 16px;
|
||||
--fs-b3: 12px;
|
||||
--ls-b3: 0px;
|
||||
--lh-b3: 16px;
|
||||
|
||||
/* font-weight */
|
||||
--fw-light: 300;
|
||||
--fw-normal: 420;
|
||||
--fw-medium: 500;
|
||||
--fw-bold: 700;
|
||||
/* font-weight */
|
||||
--fw-light: 300;
|
||||
--fw-normal: 420;
|
||||
--fw-medium: 500;
|
||||
--fw-bold: 700;
|
||||
|
||||
/* spacing | --sp-[space]: value */
|
||||
--sp-none: 0px;
|
||||
--sp-ultra-tight: 4px;
|
||||
--sp-extra-tight: 8px;
|
||||
--sp-tight: 12px;
|
||||
--sp-normal: 16px;
|
||||
--sp-loose: 20px;
|
||||
--sp-extra-loose: 32px;
|
||||
/* spacing | --sp-[space]: value */
|
||||
--sp-none: 0px;
|
||||
--sp-ultra-tight: 4px;
|
||||
--sp-extra-tight: 8px;
|
||||
--sp-tight: 12px;
|
||||
--sp-normal: 16px;
|
||||
--sp-loose: 20px;
|
||||
--sp-extra-loose: 32px;
|
||||
|
||||
/* other */
|
||||
--border-width: 1px;
|
||||
--header-height: 54px;
|
||||
--navigation-sidebar-width: calc(64px + var(--border-width));
|
||||
--navigation-drawer-width: calc(280px + var(--border-width));
|
||||
--navigation-width: calc(var(--navigation-sidebar-width) + var(--navigation-drawer-width));
|
||||
--people-drawer-width: calc(268px - var(--border-width));
|
||||
/* other */
|
||||
--border-width: 1px;
|
||||
--header-height: 54px;
|
||||
--navigation-sidebar-width: calc(64px + var(--border-width));
|
||||
--navigation-drawer-width: calc(280px + var(--border-width));
|
||||
--navigation-width: calc(var(--navigation-sidebar-width) + var(--navigation-drawer-width));
|
||||
--people-drawer-width: calc(268px - var(--border-width));
|
||||
|
||||
--popup-window-drawer-width: 280px;
|
||||
--popup-window-drawer-width: 280px;
|
||||
|
||||
@include screen.smallerThan(tabletBreakpoint) {
|
||||
--navigation-drawer-width: calc(240px + var(--border-width));
|
||||
--people-drawer-width: calc(256px - var(--border-width));
|
||||
--popup-window-drawer-width: 240px;
|
||||
}
|
||||
@include screen.smallerThan(tabletBreakpoint) {
|
||||
--navigation-drawer-width: calc(240px + var(--border-width));
|
||||
--people-drawer-width: calc(256px - var(--border-width));
|
||||
--popup-window-drawer-width: 240px;
|
||||
}
|
||||
|
||||
/* transition curves */
|
||||
--fluid-push: cubic-bezier(0, 0.8, 0.67, 0.97);
|
||||
--fluid-slide-down: cubic-bezier(0.02, 0.82, 0.4, 0.96);
|
||||
--fluid-slide-up: cubic-bezier(0.13, 0.56, 0.25, 0.99);
|
||||
/* transition curves */
|
||||
--fluid-push: cubic-bezier(0, 0.8, 0.67, 0.97);
|
||||
--fluid-slide-down: cubic-bezier(0.02, 0.82, 0.4, 0.96);
|
||||
--fluid-slide-up: cubic-bezier(0.13, 0.56, 0.25, 0.99);
|
||||
|
||||
--font-emoji: 'Twemoji_DISABLED';
|
||||
--font-primary: 'InterVariable', var(--font-emoji), sans-serif;
|
||||
--font-secondary: 'InterVariable', var(--font-emoji), sans-serif;
|
||||
--font-emoji: 'Twemoji_DISABLED';
|
||||
--font-primary: 'InterVariable',
|
||||
var(--font-emoji),
|
||||
sans-serif;
|
||||
--font-secondary: 'InterVariable',
|
||||
var(--font-emoji),
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.silver-theme {
|
||||
/* background color | --bg-[background type]: value */
|
||||
--bg-surface: hsl(0, 0%, 95%);
|
||||
--bg-surface-transparent: hsla(0, 0%, 95%, 0);
|
||||
--bg-surface-low: hsl(0, 0%, 91%);
|
||||
--bg-surface-low-transparent: hsla(0, 0%, 91%, 0);
|
||||
--bg-surface-extra-low: hsl(0, 0%, 91%);
|
||||
--bg-surface-extra-low-transparent: hsla(0, 0%, 91%, 0);
|
||||
/* background color | --bg-[background type]: value */
|
||||
--bg-surface: hsl(0, 0%, 95%);
|
||||
--bg-surface-transparent: hsla(0, 0%, 95%, 0);
|
||||
--bg-surface-low: hsl(0, 0%, 91%);
|
||||
--bg-surface-low-transparent: hsla(0, 0%, 91%, 0);
|
||||
--bg-surface-extra-low: hsl(0, 0%, 91%);
|
||||
--bg-surface-extra-low-transparent: hsla(0, 0%, 91%, 0);
|
||||
}
|
||||
|
||||
.dark-theme,
|
||||
.extera-dark-theme,
|
||||
.butter-theme {
|
||||
/* background color | --bg-[background type]: value */
|
||||
--bg-surface: #1f2326;
|
||||
--bg-surface-transparent: #1f232600;
|
||||
--bg-surface-low: #15171a;
|
||||
--bg-surface-low-transparent: #15171a00;
|
||||
--bg-surface-extra-low: #15171a;
|
||||
--bg-surface-extra-low-transparent: #15171a00;
|
||||
--bg-surface-hover: #1f2326;
|
||||
--bg-surface-active: #2a2e33;
|
||||
--bg-surface-border: rgba(0, 0, 0, 20%);
|
||||
/* background color | --bg-[background type]: value */
|
||||
--bg-surface: #1f2326;
|
||||
--bg-surface-transparent: #1f232600;
|
||||
--bg-surface-low: #15171a;
|
||||
--bg-surface-low-transparent: #15171a00;
|
||||
--bg-surface-extra-low: #15171a;
|
||||
--bg-surface-extra-low-transparent: #15171a00;
|
||||
--bg-surface-hover: #1f2326;
|
||||
--bg-surface-active: #2a2e33;
|
||||
--bg-surface-border: rgba(0, 0, 0, 20%);
|
||||
|
||||
--bg-primary: rgb(42, 98, 166);
|
||||
--bg-primary-hover: rgba(42, 98, 166, 80%);
|
||||
--bg-primary-active: rgba(42, 98, 166, 70%);
|
||||
--bg-primary-border: rgba(42, 98, 166, 38%);
|
||||
--bg-primary: rgb(42, 98, 166);
|
||||
--bg-primary-hover: rgba(42, 98, 166, 80%);
|
||||
--bg-primary-active: rgba(42, 98, 166, 70%);
|
||||
--bg-primary-border: rgba(42, 98, 166, 38%);
|
||||
|
||||
--bg-tooltip: #000;
|
||||
--bg-badge: hsl(0, 0%, 75%);
|
||||
--bg-ping: hsla(137deg, 100%, 38%, 40%);
|
||||
--bg-ping-hover: hsla(137deg, 100%, 38%, 50%);
|
||||
--bg-divider: hsla(0, 0%, 100%, 0.1);
|
||||
--bg-tooltip: #000;
|
||||
--bg-badge: hsl(0, 0%, 75%);
|
||||
--bg-ping: hsla(137deg, 100%, 38%, 40%);
|
||||
--bg-ping-hover: hsla(137deg, 100%, 38%, 50%);
|
||||
--bg-divider: hsla(0, 0%, 100%, 0.1);
|
||||
|
||||
/* text color | --tc-[background type]-[priority]: value */
|
||||
--tc-surface-high: rgba(255, 255, 255, 98%);
|
||||
--tc-surface-normal: rgba(255, 255, 255, 94%);
|
||||
--tc-surface-normal-low: rgba(255, 255, 255, 60%);
|
||||
--tc-surface-low: rgba(255, 255, 255, 58%);
|
||||
/* text color | --tc-[background type]-[priority]: value */
|
||||
--tc-surface-high: rgba(255, 255, 255, 98%);
|
||||
--tc-surface-normal: rgba(255, 255, 255, 94%);
|
||||
--tc-surface-normal-low: rgba(255, 255, 255, 60%);
|
||||
--tc-surface-low: rgba(255, 255, 255, 58%);
|
||||
|
||||
--tc-primary-high: #ffffff;
|
||||
--tc-primary-normal: rgba(255, 255, 255, 0.68);
|
||||
--tc-primary-low: rgba(255, 255, 255, 0.4);
|
||||
--tc-primary-high: #ffffff;
|
||||
--tc-primary-normal: rgba(255, 255, 255, 0.68);
|
||||
--tc-primary-low: rgba(255, 255, 255, 0.4);
|
||||
|
||||
--tc-code: #e565b1;
|
||||
--tc-link: hsl(213deg 100% 80%);
|
||||
--tc-badge: black;
|
||||
--tc-code: #e565b1;
|
||||
--tc-link: hsl(213deg 100% 80%);
|
||||
--tc-badge: black;
|
||||
|
||||
/* system icons | --ic-[background type]-[priority]: value */
|
||||
--ic-surface-high: rgb(255, 255, 255);
|
||||
--ic-surface-normal: rgba(255, 255, 255, 84%);
|
||||
--ic-surface-low: rgba(255, 255, 255, 64%);
|
||||
--ic-primary-normal: #ffffff;
|
||||
/* system icons | --ic-[background type]-[priority]: value */
|
||||
--ic-surface-high: rgb(255, 255, 255);
|
||||
--ic-surface-normal: rgba(255, 255, 255, 84%);
|
||||
--ic-surface-low: rgba(255, 255, 255, 64%);
|
||||
--ic-primary-normal: #ffffff;
|
||||
|
||||
--mx-uc-1: hsl(208, 100%, 75%);
|
||||
--mx-uc-2: hsl(301, 100%, 80%);
|
||||
--mx-uc-3: hsl(163, 100%, 70%);
|
||||
--mx-uc-4: hsl(343, 100%, 75%);
|
||||
--mx-uc-5: hsl(24, 100%, 70%);
|
||||
--mx-uc-6: hsl(181, 100%, 60%);
|
||||
--mx-uc-7: hsl(243, 100%, 80%);
|
||||
--mx-uc-8: hsl(94, 100%, 80%);
|
||||
|
||||
/* shadow and overlay */
|
||||
--bg-overlay: rgba(0, 0, 0, 60%);
|
||||
--bg-overlay-low: rgba(0, 0, 0, 80%);
|
||||
|
||||
--bs-popup: 0 0 16px rgba(0, 0, 0, 25%);
|
||||
|
||||
--bs-surface-border: inset 0 0 0 1px var(--bg-surface-border);
|
||||
--bs-surface-outline: 0 0 0 2px var(--bg-surface-border);
|
||||
|
||||
--bs-primary-border: inset 0 0 0 1px var(--bg-primary-border);
|
||||
--bs-primary-outline: 0 0 0 2px var(--bg-primary-border);
|
||||
|
||||
/* font styles: font-size, letter-spacing, line-hight */
|
||||
--fs-h1: 35.6px;
|
||||
|
||||
--fs-h2: 23.6px;
|
||||
|
||||
--fs-s1: 17.6px;
|
||||
|
||||
--fs-b1: 14.6px;
|
||||
--ls-b1: 0.14px;
|
||||
|
||||
--fs-b2: 13.2px;
|
||||
|
||||
--fs-b3: 11.2px;
|
||||
|
||||
/* override normal font weight for dark mode */
|
||||
--fw-normal: 350;
|
||||
--fw-medium: 450;
|
||||
--fw-bold: 550;
|
||||
|
||||
--font-secondary: 'InterVariable', var(--font-emoji), sans-serif;
|
||||
--mx-uc-1: hsl(208, 100%, 75%);
|
||||
--mx-uc-2: hsl(301, 100%, 80%);
|
||||
--mx-uc-3: hsl(163, 100%, 70%);
|
||||
--mx-uc-4: hsl(343, 100%, 75%);
|
||||
--mx-uc-5: hsl(24, 100%, 70%);
|
||||
--mx-uc-6: hsl(181, 100%, 60%);
|
||||
--mx-uc-7: hsl(243, 100%, 80%);
|
||||
--mx-uc-8: hsl(94, 100%, 80%);
|
||||
}
|
||||
|
||||
.butter-theme {
|
||||
/* background color | --bg-[background type]: value */
|
||||
--bg-surface: hsl(64, 6%, 14%);
|
||||
--bg-surface-transparent: hsla(64, 6%, 14%, 0);
|
||||
--bg-surface-low: hsl(64, 6%, 10%);
|
||||
--bg-surface-low-transparent: hsla(64, 6%, 10%, 0);
|
||||
--bg-surface-extra-low: hsl(64, 6%, 8%);
|
||||
--bg-surface-extra-low-transparent: hsla(64, 6%, 8%, 0);
|
||||
/* background color | --bg-[background type]: value */
|
||||
--bg-surface: hsl(64, 6%, 14%);
|
||||
--bg-surface-transparent: hsla(64, 6%, 14%, 0);
|
||||
--bg-surface-low: hsl(64, 6%, 10%);
|
||||
--bg-surface-low-transparent: hsla(64, 6%, 10%, 0);
|
||||
--bg-surface-extra-low: hsl(64, 6%, 8%);
|
||||
--bg-surface-extra-low-transparent: hsla(64, 6%, 8%, 0);
|
||||
|
||||
--bg-badge: #c4c1ab;
|
||||
--bg-badge: #c4c1ab;
|
||||
|
||||
/* text color | --tc-[background type]-[priority]: value */
|
||||
--tc-surface-high: rgb(255, 251, 222, 94%);
|
||||
--tc-surface-normal: rgba(255, 251, 222, 94%);
|
||||
--tc-surface-normal-low: rgba(255, 251, 222, 60%);
|
||||
--tc-surface-low: rgba(255, 251, 222, 58%);
|
||||
/* text color | --tc-[background type]-[priority]: value */
|
||||
--tc-surface-high: rgb(255, 251, 222, 94%);
|
||||
--tc-surface-normal: rgba(255, 251, 222, 94%);
|
||||
--tc-surface-normal-low: rgba(255, 251, 222, 60%);
|
||||
--tc-surface-low: rgba(255, 251, 222, 58%);
|
||||
|
||||
/* system icons | --ic-[background type]-[priority]: value */
|
||||
--ic-surface-high: rgb(255, 251, 222);
|
||||
--ic-surface-normal: rgba(255, 251, 222, 84%);
|
||||
--ic-surface-low: rgba(255, 251, 222, 64%);
|
||||
/* system icons | --ic-[background type]-[priority]: value */
|
||||
--ic-surface-high: rgb(255, 251, 222);
|
||||
--ic-surface-normal: rgba(255, 251, 222, 84%);
|
||||
--ic-surface-low: rgba(255, 251, 222, 64%);
|
||||
}
|
||||
|
||||
.font-primary {
|
||||
font-family: var(--font-primary);
|
||||
font-family: var(--font-primary);
|
||||
|
||||
/* override font styles for primary font */
|
||||
--fs-h1: 36px;
|
||||
--ls-h1: -1.5px;
|
||||
--lh-h1: 38px;
|
||||
/* override font styles for primary font */
|
||||
--fs-h1: 36px;
|
||||
--ls-h1: -1.5px;
|
||||
--lh-h1: 38px;
|
||||
|
||||
--fs-h2: 24px;
|
||||
--ls-h2: -0.5px;
|
||||
--lh-h2: 30px;
|
||||
--fs-h2: 24px;
|
||||
--ls-h2: -0.5px;
|
||||
--lh-h2: 30px;
|
||||
|
||||
--fs-s1: 18px;
|
||||
--ls-s1: -0.2px;
|
||||
--lh-s1: 24px;
|
||||
--fs-s1: 18px;
|
||||
--ls-s1: -0.2px;
|
||||
--lh-s1: 24px;
|
||||
|
||||
--fs-b1: 16px;
|
||||
--ls-b1: 0.1px;
|
||||
--lh-b1: 24px;
|
||||
--fs-b1: 16px;
|
||||
--ls-b1: 0.1px;
|
||||
--lh-b1: 24px;
|
||||
|
||||
--fs-b2: 14px;
|
||||
--ls-b2: 0.2px;
|
||||
--lh-b2: 20px;
|
||||
--fs-b2: 14px;
|
||||
--ls-b2: 0.2px;
|
||||
--lh-b2: 20px;
|
||||
|
||||
--fs-b3: 12px;
|
||||
--ls-b3: 0px;
|
||||
--lh-b3: 16px;
|
||||
--fs-b3: 12px;
|
||||
--ls-b3: 0px;
|
||||
--lh-b3: 16px;
|
||||
|
||||
--fw-light: 300;
|
||||
--fw-normal: 400;
|
||||
--fw-medium: 500;
|
||||
--fw-bold: 600;
|
||||
--fw-light: 300;
|
||||
--fw-normal: 400;
|
||||
--fw-medium: 500;
|
||||
--fw-bold: 600;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
font-family: var(--font-secondary);
|
||||
font-size: 16px;
|
||||
font-weight: var(--fw-normal);
|
||||
background-color: var(--bg-surface-low);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
font-family: var(--font-secondary);
|
||||
font-size: 16px;
|
||||
font-weight: var(--fw-normal);
|
||||
background-color: var(--bg-surface-low);
|
||||
|
||||
/*Why font-variant-ligatures => https://github.com/rsms/inter/issues/222 */
|
||||
font-variant-ligatures: no-contextual;
|
||||
/*Why font-variant-ligatures => https://github.com/rsms/inter/issues/222 */
|
||||
font-variant-ligatures: no-contextual;
|
||||
}
|
||||
|
||||
#root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--tc-link);
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
color: var(--tc-link);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
b {
|
||||
font-weight: var(--fw-medium);
|
||||
font-weight: var(--fw-medium);
|
||||
}
|
||||
|
||||
label {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button,
|
||||
textarea {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: inherit;
|
||||
letter-spacing: inherit;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: inherit;
|
||||
letter-spacing: inherit;
|
||||
border: none;
|
||||
}
|
||||
|
||||
button {
|
||||
max-width: 100%;
|
||||
text-transform: none;
|
||||
text-align: inherit;
|
||||
overflow: visible;
|
||||
-webkit-appearance: button;
|
||||
max-width: 100%;
|
||||
text-transform: none;
|
||||
text-align: inherit;
|
||||
overflow: visible;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
textarea,
|
||||
input,
|
||||
input[type],
|
||||
|
|
@ -422,55 +402,65 @@ input[type='username'],
|
|||
input[type='password'],
|
||||
input[type='email'],
|
||||
input[type='checkbox'] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
input[type='checkbox'] {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: calc(var(--bo-radius) / 2);
|
||||
box-shadow: var(--bs-primary-border);
|
||||
background-color: var(--bg-surface);
|
||||
cursor: pointer;
|
||||
@extend .flex--center;
|
||||
|
||||
&:checked {
|
||||
background-color: var(--bg-primary);
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 6px;
|
||||
border: 6px solid white;
|
||||
border-width: 0 0 3px 3px;
|
||||
transform: rotateZ(-45deg) translate(1px, -1px);
|
||||
input[type='checkbox'] {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: calc(var(--bo-radius) / 2);
|
||||
box-shadow: var(--bs-primary-border);
|
||||
background-color: var(--bg-surface);
|
||||
cursor: pointer;
|
||||
@extend .flex--center;
|
||||
|
||||
&:checked {
|
||||
background-color: var(--bg-primary);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 6px;
|
||||
border: 6px solid white;
|
||||
border-width: 0 0 3px 3px;
|
||||
transform: rotateZ(-45deg) translate(1px, -1px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
color: inherit;
|
||||
word-spacing: inherit;
|
||||
color: inherit;
|
||||
word-spacing: inherit;
|
||||
}
|
||||
|
||||
.noselect {
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-khtml-user-select: none; /* Konqueror HTML */
|
||||
-moz-user-select: none; /* Old versions of Firefox */
|
||||
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||
user-select: none; /* Non-prefixed version, currently
|
||||
-webkit-touch-callout: none;
|
||||
/* iOS Safari */
|
||||
-webkit-user-select: none;
|
||||
/* Safari */
|
||||
-khtml-user-select: none;
|
||||
/* Konqueror HTML */
|
||||
-moz-user-select: none;
|
||||
/* Old versions of Firefox */
|
||||
-ms-user-select: none;
|
||||
/* Internet Explorer/Edge */
|
||||
user-select: none;
|
||||
/* Non-prefixed version, currently
|
||||
supported by Chrome, Edge, Opera and Firefox */
|
||||
}
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.flex--center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue