e2net/iceshrimp
3
0
Fork 0
forked from mirrors/iceshrimp
Code Pull requests Activity

Replace or remove theme 'X' vars

Browse source
This commit is contained in:
Aylam 2023-09-09 13:20:18 +03:00 committed by Laura Hausmann
parent b647ebf03f
commit 4a3f6afef6
Signed by: zotan
GPG key ID: D044E84C5BE01605
36 changed files with 177 additions and 260 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/client/src/components/MkAutocomplete.vue
View file

@ -497,7 +497,7 @@ onBeforeUnmount(() => {
}
&:hover {
background: var(--X3);
background: var(--interactiveElementHovered);
}
&[data-selected="true"] {

8
packages/client/src/components/MkButton.vue
View file

@ -150,11 +150,11 @@ function onMousedown(evt: MouseEvent): void {
background: var(--accent);
&:not(:disabled):hover {
background: var(--X8);
background: var(--accentLightenLess);
}
&:not(:disabled):active {
background: var(--X8);
background: var(--accentLightenLess);
}
}
@ -168,11 +168,11 @@ function onMousedown(evt: MouseEvent): void {
);
&:not(:disabled):hover {
background: linear-gradient(90deg, var(--X8), var(--X8));
background: var(--accentLightenLess);
}
&:not(:disabled):active {
background: linear-gradient(90deg, var(--X8), var(--X8));
background: var(--accentLightenLess);
}
}

2
packages/client/src/components/MkChannelPreview.vue
View file

@ -89,7 +89,7 @@ const bannerStyle = computed(() => {
left: 0;
width: 100%;
height: 64px;
background: linear-gradient(0deg, var(--panel), var(--X15));
background: linear-gradient(0deg, var(--panel), var(--panelFade));
}
> .name {

2
packages/client/src/components/MkContainer.vue
View file

@ -259,7 +259,7 @@ export default defineComponent({
left: 0;
width: 100%;
height: 64px;
background: linear-gradient(0deg, var(--panel), var(--X15));
background: linear-gradient(0deg, var(--panel), var(--panelFade));
> span {
display: inline-block;

2
packages/client/src/components/MkInstanceSelectDialog.vue
View file

@ -142,7 +142,7 @@ const cancel = () => {
font-size: 14px;
&:hover {
background: var(--X7);
background: var(--interactiveElementHovered);
}
&.selected {

2
packages/client/src/components/MkNoteDetailed.vue
View file

@ -583,7 +583,7 @@ onUnmounted(() => {
// @media (pointer: coarse) {
// &:has(.button:focus-within) {
// z-index: 2;
// --X13: transparent;
// --dividerHovered: transparent;
// &::after {
// opacity: 1;
// backdrop-filter: var(--modalBgFilter);

2
packages/client/src/components/MkNoteSub.vue
View file

@ -724,7 +724,7 @@ function noteClick(e) {
}
// &::after {
// content: "";
// border-top: 1px solid var(--X13);
// border-top: 1px solid var(--dividerHovered);
// position: absolute;
// bottom: 0;
// margin-left: calc(var(--avatarSize) + 12px);

4
packages/client/src/components/MkPostForm.vue
View file

@ -1187,7 +1187,7 @@ onMounted(() => {
margin: 0.3rem;
padding: 4px 0 4px 4px;
border-radius: 999px;
background: var(--X3);
background: var(--interactiveElementHovered);
> button {
padding: 4px 8px;
@ -1260,7 +1260,7 @@ onMounted(() => {
border-radius: 6px;
&:hover {
background: var(--X5);
background: var(--postFormButtonHoverBg);
}
&.active {

2
packages/client/src/components/MkUserSelectDialog.vue
View file

@ -184,7 +184,7 @@ onMounted(() => {
font-size: 14px;
&:hover {
background: var(--X7);
background: var(--interactiveElementHovered);
}
&.selected {

2
packages/client/src/components/MkUserSelectLocalDialog.vue
View file

@ -179,7 +179,7 @@ onMounted(() => {
font-size: 14px;
&:hover {
background: var(--X7);
background: var(--interactiveElementHovered);
}
&.selected {

6
packages/client/src/pages/channel.vue
View file

@ -143,7 +143,7 @@ const headerActions = $computed(() => [
text: i18n.ts.edit,
handler: edit,
},
]
]
: []),
]);
@ -155,7 +155,7 @@ definePageMetadata(
? {
title: channel.name,
icon: "ph-television ph-bold ph-lg",
}
}
: null,
),
);
@ -201,7 +201,7 @@ definePageMetadata(
left: 0;
width: 100%;
height: 64px;
background: linear-gradient(0deg, var(--panel), var(--X15));
background: linear-gradient(0deg, var(--panel), var(--panelFade));
}
> .status {

4
packages/client/src/pages/gallery/post.vue
View file

@ -241,7 +241,7 @@ definePageMetadata(
? {
title: post.title,
avatar: post.user,
}
}
: null,
),
);
@ -299,7 +299,7 @@ definePageMetadata(
> .like {
> .button {
--accent: #eb6f92;
--X8: #eb6f92;
--accentLightenLess: #eb6f92;
--buttonBg: rgb(216 71 106 / 5%);
--buttonHoverBg: rgb(216 71 106 / 10%);
color: #eb6f92;

2
packages/client/src/pages/messaging/messaging-room.message.vue
View file

@ -261,7 +261,7 @@ function del(): void {
padding-right: 32px;
> .balloon {
$color: var(--X4);
$color: var(--messagingIsNotMe);
background: $color;
&.noText {

2
packages/client/src/pages/mfm-cheat-sheet.vue
View file

@ -547,7 +547,7 @@ definePageMetadata({
font-weight: bold;
-webkit-backdrop-filter: var(--blur, blur(10px));
backdrop-filter: var(--blur, blur(10px));
background-color: var(--X16);
background-color: var(--panelTransparent);
}
> .content {

4
packages/client/src/pages/page-editor/page-editor.container.vue
View file

@ -93,11 +93,11 @@ export default defineComponent({
position: relative;
overflow: hidden;
background: var(--panel);
border: solid 2px var(--X12);
border: solid 2px var(--divider);
border-radius: 6px;
&:hover {
border: solid 2px var(--X13);
border: solid 2px var(--dividerHovered);
}
&.warn {

4
packages/client/src/pages/page.vue
View file

@ -315,7 +315,7 @@ definePageMetadata(
title: page.title || page.name,
text: page.summary,
},
}
}
: null,
),
);
@ -401,7 +401,7 @@ definePageMetadata(
> .like {
> .button {
--accent: #eb6f92;
--X8: #eb6f92;
--accentLightenLess: #eb6f92;
--buttonBg: rgb(216 71 106 / 5%);
--buttonHoverBg: rgb(216 71 106 / 10%);
color: #eb6f92;

2
packages/client/src/pages/welcome.entrance.c.vue
View file

@ -274,7 +274,7 @@ export default defineComponent({
background: linear-gradient(
0deg,
var(--panel),
var(--X15)
var(--panelFade)
);
}
}

8
packages/client/src/style.scss
View file

@ -302,11 +302,11 @@ hr {
background: var(--accent);
&:not(:disabled):hover {
background: var(--X8);
background: var(--accentLightenLess);
}
&:not(:disabled):active {
background: var(--X9);
background: var(--accentDarkenLess);
}
}
@ -320,11 +320,11 @@ hr {
);
&:not(:disabled):hover {
background: linear-gradient(90deg, var(--X8), var(--X8));
background: var(--accentLightenLess)
}
&:not(:disabled):active {
background: linear-gradient(90deg, var(--X8), var(--X8));
background: var(--accentLightenLess)
}
}

26
packages/client/src/themes/_dark.json5
View file

@ -81,21 +81,15 @@
codeNumber: '#cfff9e',
codeBoolean: '#c59eff',
htmlThemeColor: '@bg',
X2: ':darken<2<@panel',
X3: 'rgba(255, 255, 255, 0.05)',
X4: 'rgba(255, 255, 255, 0.1)',
X5: 'rgba(255, 255, 255, 0.05)',
X6: 'rgba(255, 255, 255, 0.15)',
X7: 'rgba(255, 255, 255, 0.05)',
X8: ':lighten<5<@accent',
X9: ':darken<5<@accent',
X10: ':alpha<0.4<@accent',
X11: 'rgba(0, 0, 0, 0.3)',
X12: 'rgba(255, 255, 255, 0.1)',
X13: 'rgba(255, 255, 255, 0.15)',
X14: ':alpha<0.5<@navBg',
X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel',
X17: ':alpha<0.8<@bg',
interactiveElementHovered: 'rgba(255, 255, 255, 0.05)',
messagingIsNotMe: 'rgba(255, 255, 255, 0.1)',
postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)',
accentLightenLess: ':lighten<5<@accent',
accentDarkenLess: ':darken<5<@accent',
calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)',
dividerHovered: 'rgba(255, 255, 255, 0.15)',
navBgTransparent: ':alpha<0.5<@navBg',
panelFade: ':alpha<0<@panel',
panelTransparent: ':alpha<0.7<@panel',
},
}

26
packages/client/src/themes/_light.json5
View file

@ -81,21 +81,15 @@
codeNumber: '#0fbbbb',
codeBoolean: '#62b70c',
htmlThemeColor: '@bg',
X2: ':darken<2<@panel',
X3: 'rgba(0, 0, 0, 0.05)',
X4: 'rgba(0, 0, 0, 0.1)',
X5: 'rgba(0, 0, 0, 0.05)',
X6: 'rgba(0, 0, 0, 0.25)',
X7: 'rgba(0, 0, 0, 0.05)',
X8: ':lighten<5<@accent',
X9: ':darken<5<@accent',
X10: ':alpha<0.4<@accent',
X11: 'rgba(0, 0, 0, 0.1)',
X12: 'rgba(0, 0, 0, 0.1)',
X13: 'rgba(0, 0, 0, 0.15)',
X14: ':alpha<0.5<@navBg',
X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel',
X17: ':alpha<0.8<@bg',
interactiveElementHovered: 'rgba(0, 0, 0, 0.05)',
messagingIsNotMe: 'rgba(0, 0, 0, 0.1)',
postFormButtonHoverBg: 'rgba(0, 0, 0, 0.05)',
accentLightenLess: ':lighten<5<@accent',
accentDarkenLess: ':darken<5<@accent',
calendarInfoMeterBg: 'rgba(0, 0, 0, 0.1)',
dividerHovered: 'rgba(0, 0, 0, 0.15)',
navBgTransparent: ':alpha<0.5<@navBg',
panelFade: ':alpha<0<@panel',
panelTransparent: ':alpha<0.7<@panel',
},
}

25
packages/client/src/themes/d-astro.json5
View file

@ -59,20 +59,15 @@
wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
X2: ':darken<2<@panel',
X3: 'rgba(255, 255, 255, 0.05)',
X4: 'rgba(255, 255, 255, 0.1)',
X5: 'rgba(255, 255, 255, 0.05)',
X6: 'rgba(255, 255, 255, 0.15)',
X7: 'rgba(255, 255, 255, 0.05)',
X8: ':lighten<5<@accent',
X9: ':darken<5<@accent',
X10: ':alpha<0.4<@accent',
X11: 'rgba(0, 0, 0, 0.3)',
X12: 'rgba(255, 255, 255, 0.1)',
X13: 'rgba(255, 255, 255, 0.15)',
X14: ':alpha<0.5<@navBg',
X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel',
interactiveElementHovered: 'rgba(255, 255, 255, 0.05)',
messagingIsNotMe: 'rgba(255, 255, 255, 0.1)',
postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)',
accentLightenLess: ':lighten<5<@accent',
accentDarkenLess: ':darken<5<@accent',
calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)',
dividerHovered: 'rgba(255, 255, 255, 0.15)',
navBgTransparent: ':alpha<0.5<@navBg',
panelFade: ':alpha<0<@panel',
panelTransparent: ':alpha<0.7<@panel',
},
}

26
packages/client/src/themes/d-catppuccin-frappe.json5
View file

@ -3,24 +3,18 @@
base: 'dark',
name: 'Catppuccin frappe',
props: {
X2: ':darken<2<@panel',
X3: 'rgba(255, 255, 255, 0.05)',
X4: 'rgba(255, 255, 255, 0.1)',
X5: 'rgba(255, 255, 255, 0.05)',
X6: 'rgba(255, 255, 255, 0.15)',
X7: 'rgba(255, 255, 255, 0.05)',
X8: ':lighten<5<@accent',
X9: ':darken<5<@accent',
interactiveElementHovered: 'rgba(255, 255, 255, 0.05)',
messagingIsNotMe: 'rgba(255, 255, 255, 0.1)',
postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)',
accentLightenLess: ':lighten<5<@accent',
accentDarkenLess: ':darken<5<@accent',
bg: '#232634',
fg: '#c6d0f5',
X10: ':alpha<0.4<@accent',
X11: 'rgba(0, 0, 0, 0.3)',
X12: 'rgba(255, 255, 255, 0.1)',
X13: 'rgba(255, 255, 255, 0.15)',
X14: ':alpha<0.5<@navBg',
X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel',
X17: ':alpha<0.8<@bg',
calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)',
dividerHovered: 'rgba(255, 255, 255, 0.15)',
navBgTransparent: ':alpha<0.5<@navBg',
panelFade: ':alpha<0<@panel',
panelTransparent: ':alpha<0.7<@panel',
cwBg: '#51576d',
cwFg: '#b5bfe2',
link: '#8caaee',

26
packages/client/src/themes/d-catppuccin-mocha.json5
View file

@ -3,24 +3,18 @@
base: 'dark',
name: 'Catppuccin mocha',
props: {
X2: ':darken<2<@panel',
X3: 'rgba(255, 255, 255, 0.05)',
X4: 'rgba(255, 255, 255, 0.1)',
X5: 'rgba(255, 255, 255, 0.05)',
X6: 'rgba(255, 255, 255, 0.15)',
X7: 'rgba(255, 255, 255, 0.05)',
X8: ':lighten<5<@accent',
X9: ':darken<5<@accent',
interactiveElementHovered: 'rgba(255, 255, 255, 0.05)',
messagingIsNotMe: 'rgba(255, 255, 255, 0.1)',
postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)',
accentLightenLess: ':lighten<5<@accent',
accentDarkenLess: ':darken<5<@accent',
bg: '#11111b',
fg: '#cdd6f4',
X10: ':alpha<0.4<@accent',
X11: 'rgba(0, 0, 0, 0.3)',
X12: 'rgba(255, 255, 255, 0.1)',
X13: 'rgba(255, 255, 255, 0.15)',
X14: ':alpha<0.5<@navBg',
X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel',
X17: ':alpha<0.8<@bg',
calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)',
dividerHovered: 'rgba(255, 255, 255, 0.15)',
navBgTransparent: ':alpha<0.5<@navBg',
panelFade: ':alpha<0<@panel',
panelTransparent: ':alpha<0.7<@panel',
cwBg: '#45475a',
cwFg: '#bac2de',
link: '#89b4fa',

26
packages/client/src/themes/d-nord.json5
View file

@ -4,24 +4,18 @@
desc: 'Nord: an arctic, north-bluish color palette',
name: 'Nord Dark',
props: {
X2: ':darken<2<@panel',
X3: 'rgba(255, 255, 255, 0.05)',
X4: 'rgba(255, 255, 255, 0.1)',
X5: 'rgba(255, 255, 255, 0.05)',
X6: 'rgba(255, 255, 255, 0.15)',
X7: 'rgba(255, 255, 255, 0.05)',
X8: ':lighten<5<@accent',
X9: ':darken<5<@accent',
interactiveElementHovered: 'rgba(255, 255, 255, 0.05)',
messagingIsNotMe: 'rgba(255, 255, 255, 0.1)',
postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)',
accentLightenLess: ':lighten<5<@accent',
accentDarkenLess: ':darken<5<@accent',
bg: '#2e3440',
fg: '#eceff4',
X10: ':alpha<0.4<@accent',
X11: 'rgba(0, 0, 0, 0.3)',
X12: 'rgba(255, 255, 255, 0.1)',
X13: 'rgba(255, 255, 255, 0.15)',
X14: ':alpha<0.5<@navBg',
X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel',
X17: ':alpha<0.8<@bg',
calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)',
dividerHovered: 'rgba(255, 255, 255, 0.15)',
navBgTransparent: ':alpha<0.5<@navBg',
panelFade: ':alpha<0<@panel',
panelTransparent: ':alpha<0.7<@panel',
cwBg: '#4c566a',
cwFg: '#393f4f',
link: '#b48ead',

26
packages/client/src/themes/d-rosepine.json5
View file

@ -4,24 +4,18 @@
desc: 'Soho vibes for Misskey',
name: 'Rosé Pine',
props: {
X2: ':darken<2<@panel',
X3: 'rgba(255, 255, 255, 0.05)',
X4: 'rgba(255, 255, 255, 0.1)',
X5: 'rgba(255, 255, 255, 0.05)',
X6: 'rgba(255, 255, 255, 0.15)',
X7: 'rgba(255, 255, 255, 0.05)',
X8: ':lighten<5<@accent',
X9: ':darken<5<@accent',
interactiveElementHovered: 'rgba(255, 255, 255, 0.05)',
messagingIsNotMe: 'rgba(255, 255, 255, 0.1)',
postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)',
accentLightenLess: ':lighten<5<@accent',
accentDarkenLess: ':darken<5<@accent',
bg: '#191724',
fg: '#e0def4',
X10: ':alpha<0.4<@accent',
X11: 'rgba(0, 0, 0, 0.3)',
X12: 'rgba(255, 255, 255, 0.1)',
X13: 'rgba(255, 255, 255, 0.15)',
X14: ':alpha<0.5<@navBg',
X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel',
X17: ':alpha<0.8<@bg',
calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)',
dividerHovered: 'rgba(255, 255, 255, 0.15)',
navBgTransparent: ':alpha<0.5<@navBg',
panelFade: ':alpha<0<@panel',
panelTransparent: ':alpha<0.7<@panel',
cwBg: '#1f1d2e',
cwFg: '#f6c177',
link: '#9ccfd8',

26
packages/client/src/themes/d-rosepinemoon.json5
View file

@ -4,24 +4,18 @@
desc: 'Soho vibes for Misskey, moon edition',
name: 'Rosé Pine Moon',
props: {
X2: ':darken<2<@panel',
X3: 'rgba(255, 255, 255, 0.05)',
X4: 'rgba(255, 255, 255, 0.1)',
X5: 'rgba(255, 255, 255, 0.05)',
X6: 'rgba(255, 255, 255, 0.15)',
X7: 'rgba(255, 255, 255, 0.05)',
X8: ':lighten<5<@accent',
X9: ':darken<5<@accent',
interactiveElementHovered: 'rgba(255, 255, 255, 0.05)',
messagingIsNotMe: 'rgba(255, 255, 255, 0.1)',
postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)',
accentLightenLess: ':lighten<5<@accent',
accentDarkenLess: ':darken<5<@accent',
bg: '#232136',
fg: '#e0def4',
X10: ':alpha<0.4<@accent',
X11: 'rgba(0, 0, 0, 0.3)',
X12: 'rgba(255, 255, 255, 0.1)',
X13: 'rgba(255, 255, 255, 0.15)',
X14: ':alpha<0.5<@navBg',
X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel',
X17: ':alpha<0.8<@bg',
calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)',
dividerHovered: 'rgba(255, 255, 255, 0.15)',
navBgTransparent: ':alpha<0.5<@navBg',
panelFade: ':alpha<0<@panel',
panelTransparent: ':alpha<0.7<@panel',
cwBg: '#393552',
cwFg: '#f6c177',
link: '#3e8fb0',

26
packages/client/src/themes/d-u0.json5
View file

@ -3,24 +3,18 @@
base: 'dark',
name: 'Mi U0 Dark',
props: {
X2: ':darken<2<@panel',
X3: 'rgba(255, 255, 255, 0.05)',
X4: 'rgba(255, 255, 255, 0.1)',
X5: 'rgba(255, 255, 255, 0.05)',
X6: 'rgba(255, 255, 255, 0.15)',
X7: 'rgba(255, 255, 255, 0.05)',
X8: ':lighten<5<@accent',
X9: ':darken<5<@accent',
interactiveElementHovered: 'rgba(255, 255, 255, 0.05)',
messagingIsNotMe: 'rgba(255, 255, 255, 0.1)',
postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)',
accentLightenLess: ':lighten<5<@accent',
accentDarkenLess: ':darken<5<@accent',
bg: '#172426',
fg: '#dadada',
X10: ':alpha<0.4<@accent',
X11: 'rgba(0, 0, 0, 0.3)',
X12: 'rgba(255, 255, 255, 0.1)',
X13: 'rgba(255, 255, 255, 0.15)',
X14: ':alpha<0.5<@navBg',
X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel',
X17: ':alpha<0.8<@bg',
calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)',
dividerHovered: 'rgba(255, 255, 255, 0.15)',
navBgTransparent: ':alpha<0.5<@navBg',
panelFade: ':alpha<0<@panel',
panelTransparent: ':alpha<0.7<@panel',
cwBg: '#687390',
cwFg: '#393f4f',
link: '@accent',

26
packages/client/src/themes/l-catppuccin-latte.json5
View file

@ -3,24 +3,18 @@
base: "light",
name: "Catppuccin Latte",
props: {
X2: ":darken<2<@panel",
X3: "rgba(255, 255, 255, 0.05)",
X4: "rgba(255, 255, 255, 0.1)",
X5: "rgba(255, 255, 255, 0.05)",
X6: "rgba(255, 255, 255, 0.15)",
X7: "rgba(255, 255, 255, 0.05)",
X8: ":lighten<5<@accent",
X9: ":darken<5<@accent",
interactiveElementHovered: "rgba(255, 255, 255, 0.05)",
messagingIsNotMe: "rgba(255, 255, 255, 0.1)",
postFormButtonHoverBg: "rgba(255, 255, 255, 0.05)",
accentLightenLess: ":lighten<5<@accent",
accentDarkenLess: ":darken<5<@accent",
bg: "#dce0e8",
fg: "#4c4f69",
X10: ":alpha<0.4<@accent",
X11: "rgba(0, 0, 0, 0.3)",
X12: "rgba(255, 255, 255, 0.1)",
X13: "rgba(255, 255, 255, 0.15)",
X14: ":alpha<0.5<@navBg",
X15: ":alpha<0<@panel",
X16: ":alpha<0.7<@panel",
X17: ":alpha<0.8<@bg",
calendarInfoMeterBg: "rgba(0, 0, 0, 0.3)",
dividerHovered: "rgba(255, 255, 255, 0.15)",
navBgTransparent: ":alpha<0.5<@navBg",
panelFade: ":alpha<0<@panel",
panelTransparent: ":alpha<0.7<@panel",
cwBg: "#bcc0cc",
cwFg: "#5c5f77",
link: "#1e66f5",

26
packages/client/src/themes/l-nord.json5
View file

@ -4,24 +4,18 @@
desc: 'Nord: an arctic, north-bluish color palette',
name: 'Nord Light',
props: {
X2: ':darken<2<@panel',
X3: 'rgba(255, 255, 255, 0.05)',
X4: 'rgba(255, 255, 255, 0.1)',
X5: 'rgba(255, 255, 255, 0.05)',
X6: 'rgba(255, 255, 255, 0.15)',
X7: 'rgba(255, 255, 255, 0.05)',
X8: ':lighten<5<@accent',
X9: ':darken<5<@accent',
interactiveElementHovered: 'rgba(255, 255, 255, 0.05)',
messagingIsNotMe: 'rgba(255, 255, 255, 0.1)',
postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)',
accentLightenLess: ':lighten<5<@accent',
accentDarkenLess: ':darken<5<@accent',
bg: '#d8dee9',
fg: '#3b4252',
X10: ':alpha<0.4<@accent',
X11: 'rgba(0, 0, 0, 0.3)',
X12: 'rgba(255, 255, 255, 0.1)',
X13: 'rgba(255, 255, 255, 0.15)',
X14: ':alpha<0.5<@navBg',
X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel',
X17: ':alpha<0.8<@bg',
calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)',
dividerHovered: 'rgba(255, 255, 255, 0.15)',
navBgTransparent: ':alpha<0.5<@navBg',
panelFade: ':alpha<0<@panel',
panelTransparent: ':alpha<0.7<@panel',
cwBg: '#687390',
cwFg: '#393f4f',
link: '#44a4c1',

26
packages/client/src/themes/l-rosepinedawn.json5
View file

@ -68,22 +68,16 @@
codeNumber: '#0fbbbb',
codeBoolean: '#62b70c',
htmlThemeColor: '@bg',
X2: ':darken<2<@panel',
X3: 'rgba(0, 0, 0, 0.05)',
X4: 'rgba(0, 0, 0, 0.1)',
X5: 'rgba(0, 0, 0, 0.05)',
X6: 'rgba(0, 0, 0, 0.25)',
X7: 'rgba(0, 0, 0, 0.05)',
X8: ':lighten<5<@accent',
X9: ':darken<5<@accent',
X10: ':alpha<0.4<@accent',
X11: 'rgba(0, 0, 0, 0.1)',
X12: 'rgba(0, 0, 0, 0.1)',
X13: 'rgba(0, 0, 0, 0.15)',
X14: ':alpha<0.5<@navBg',
X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel',
X17: ':alpha<0.8<@bg',
interactiveElementHovered: 'rgba(0, 0, 0, 0.05)',
messagingIsNotMe: 'rgba(0, 0, 0, 0.1)',
postFormButtonHoverBg: 'rgba(0, 0, 0, 0.05)',
accentLightenLess: ':lighten<5<@accent',
accentDarkenLess: ':darken<5<@accent',
calendarInfoMeterBg: 'rgba(0, 0, 0, 0.1)',
dividerHovered: 'rgba(0, 0, 0, 0.15)',
navBgTransparent: ':alpha<0.5<@navBg',
panelFade: ':alpha<0<@panel',
panelTransparent: ':alpha<0.7<@panel',
},
author: '@thatonecalculator@stop.voring.me',
}

26
packages/client/src/themes/l-u0.json5
View file

@ -3,24 +3,18 @@
base: 'light',
name: 'Mi U0 Light',
props: {
X2: ':darken<2<@panel',
X3: 'rgba(255, 255, 255, 0.05)',
X4: 'rgba(255, 255, 255, 0.1)',
X5: 'rgba(255, 255, 255, 0.05)',
X6: 'rgba(255, 255, 255, 0.15)',
X7: 'rgba(255, 255, 255, 0.05)',
X8: ':lighten<5<@accent',
X9: ':darken<5<@accent',
interactiveElementHovered: 'rgba(255, 255, 255, 0.05)',
messagingIsNotMe: 'rgba(255, 255, 255, 0.1)',
postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)',
accentLightenLess: ':lighten<5<@accent',
accentDarkenLess: ':darken<5<@accent',
bg: '#e7e7eb',
fg: '#5f5f5f',
X10: ':alpha<0.4<@accent',
X11: 'rgba(0, 0, 0, 0.3)',
X12: 'rgba(255, 255, 255, 0.1)',
X13: 'rgba(255, 255, 255, 0.15)',
X14: ':alpha<0.5<@navBg',
X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel',
X17: ':alpha<0.8<@bg',
calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)',
dividerHovered: 'rgba(255, 255, 255, 0.15)',
navBgTransparent: ':alpha<0.5<@navBg',
panelFade: ':alpha<0<@panel',
panelTransparent: ':alpha<0.7<@panel',
cwBg: '#687390',
cwFg: '#393f4f',
link: '@accent',

26
packages/client/src/themes/l-vivid.json5
View file

@ -62,21 +62,15 @@
fgTransparentWeak: ':alpha<0.75<@fg',
panelHeaderDivider: '@divider',
scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)',
X2: ':darken<2<@panel',
X3: 'rgba(0, 0, 0, 0.05)',
X4: 'rgba(0, 0, 0, 0.1)',
X5: 'rgba(0, 0, 0, 0.05)',
X6: 'rgba(0, 0, 0, 0.25)',
X7: 'rgba(0, 0, 0, 0.05)',
X8: ':lighten<5<@accent',
X9: ':darken<5<@accent',
X10: ':alpha<0.4<@accent',
X11: 'rgba(0, 0, 0, 0.1)',
X12: 'rgba(0, 0, 0, 0.1)',
X13: 'rgba(0, 0, 0, 0.15)',
X14: ':alpha<0.5<@navBg',
X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel',
X17: ':alpha<0.8<@bg',
interactiveElementHovered: 'rgba(0, 0, 0, 0.05)',
messagingIsNotMe: 'rgba(0, 0, 0, 0.1)',
postFormButtonHoverBg: 'rgba(0, 0, 0, 0.05)',
accentLightenLess: ':lighten<5<@accent',
accentDarkenLess: ':darken<5<@accent',
calendarInfoMeterBg: 'rgba(0, 0, 0, 0.1)',
dividerHovered: 'rgba(0, 0, 0, 0.15)',
navBgTransparent: ':alpha<0.5<@navBg',
panelFade: ':alpha<0<@panel',
panelTransparent: ':alpha<0.7<@panel',
},
}

4
packages/client/src/ui/_common_/navbar-for-mobile.vue
View file

@ -171,7 +171,7 @@ function more() {
top: 0;
z-index: 1;
padding: 2rem 0;
background: var(--X14);
background: var(--navBgTransparent);
-webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px));
@ -213,7 +213,7 @@ function more() {
position: sticky;
bottom: 0;
padding: 20px 0;
background: var(--X14);
background: var(--navBgTransparent);
-webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px));

6
packages/client/src/ui/deck.vue
View file

@ -30,7 +30,7 @@
)
.map((c) => c.width),
) + 'px',
}
}
"
@wheel.self="onWheel"
>
@ -58,7 +58,7 @@
columns.find(
(c) => c.id === ids[0],
)!.width + 'px',
}
}
"
@parent-focus="moveFocus(ids[0], $event)"
@headerWheel="onWheel"
@ -558,7 +558,7 @@ async function deleteProfile() {
}
&:hover {
background: var(--X2);
background: var(--buttonHoverBg);
}
> .indicator {

2
packages/client/src/ui/visitor/header.vue
View file

@ -174,7 +174,7 @@ export default defineComponent({
line-height: $height;
-webkit-backdrop-filter: var(--blur, blur(32px));
backdrop-filter: var(--blur, blur(32px));
background-color: var(--X16);
background-color: var(--panelTransparent);
> .wide {
> .content {

2
packages/client/src/widgets/calendar.vue
View file

@ -214,7 +214,7 @@ defineExpose<WidgetComponentExpose>({
> .meter {
width: 100%;
overflow: hidden;
background: var(--X11);
background: var(--calendarInfoMeterBg);
border-radius: 8px;
> .val {