natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🎨

This commit is contained in:
syuilo 2020-07-05 03:11:39 +09:00
parent ea13efe495
commit b715ea4621
7 changed files with 24 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/client/app.vue
View File

@ -932,6 +932,7 @@ export default Vue.extend({
&.wallpaper { &.wallpaper {
background: var(--wallpaperOverlay); background: var(--wallpaperOverlay);
backdrop-filter: blur(4px);
} }
> main { > main {

4
src/client/components/ui/container.vue
View File

@ -109,8 +109,10 @@ export default Vue.extend({
> header { > header {
position: relative; position: relative;
box-shadow: 0 1px 0 0 var(--divider); box-shadow: 0 1px 0 0 var(--panelHeaderDivider);
z-index: 1; z-index: 1;
background: var(--panelHeaderBg);
color: var(--panelHeaderFg);
> .title { > .title {
margin: 0; margin: 0;

8
src/client/style.scss
View File

@ -279,6 +279,8 @@ hr {
position: relative; position: relative;
background: var(--panel); background: var(--panel);
border-radius: var(--radius); border-radius: var(--radius);
box-shadow: 0 0 0 1px var(--panelBorder);
overflow: hidden;
} }
._widget ._list_ ._panel { ._widget ._list_ ._panel {
@ -324,8 +326,10 @@ hr {
margin: 0; margin: 0;
padding: 22px 32px; padding: 22px 32px;
font-size: 1.1em; font-size: 1.1em;
border-bottom: solid 1px var(--divider); border-bottom: solid 1px var(--panelHeaderDivider);
font-weight: bold; font-weight: bold;
background: var(--panelHeaderBg);
color: var(--panelHeaderFg);
@media (max-width: 500px) { @media (max-width: 500px) {
padding: 16px; padding: 16px;
@ -381,7 +385,7 @@ hr {
} }
._fullinfo { ._fullinfo {
padding: 32px; padding: 64px 32px;
text-align: center; text-align: center;
> img { > img {

6
src/client/themes/_dark.json5
View File

@ -16,8 +16,13 @@
fg: '#c7d1d8', fg: '#c7d1d8',
fgHighlighted: ':lighten<3<@fg', fgHighlighted: ':lighten<3<@fg',
html: '@bg', html: '@bg',
divider: 'rgba(255, 255, 255, 0.1)',
indicator: '@accent', indicator: '@accent',
panel: '#000', panel: '#000',
panelHeaderBg: ':lighten<3<@panel',
panelHeaderFg: '@fg',
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
panelBorder: 'rgba(0, 0, 0, 0)',
shadow: 'rgba(0, 0, 0, 0.1)', shadow: 'rgba(0, 0, 0, 0.1)',
header: 'rgba(20, 20, 20, 0.75)', header: 'rgba(20, 20, 20, 0.75)',
navBg: '@panel', navBg: '@panel',
@ -31,7 +36,6 @@
mentionMe: '@mention', mentionMe: '@mention',
renote: '#229e82', renote: '#229e82',
modalBg: 'rgba(0, 0, 0, 0.5)', modalBg: 'rgba(0, 0, 0, 0.5)',
divider: 'rgba(255, 255, 255, 0.1)',
scrollbarHandle: 'rgba(255, 255, 255, 0.2)', scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)', scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
dateLabelFg: '@fg', dateLabelFg: '@fg',

6
src/client/themes/_light.json5
View File

@ -16,8 +16,13 @@
fg: '#5c6a73', fg: '#5c6a73',
fgHighlighted: ':darken<3<@fg', fgHighlighted: ':darken<3<@fg',
html: '@bg', html: '@bg',
divider: 'rgba(0, 0, 0, 0.1)',
indicator: '@accent', indicator: '@accent',
panel: '#fff', panel: '#fff',
panelHeaderBg: ':lighten<3<@panel',
panelHeaderFg: '@fg',
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
panelBorder: 'rgba(0, 0, 0, 0)',
shadow: 'rgba(0, 0, 0, 0.1)', shadow: 'rgba(0, 0, 0, 0.1)',
header: 'rgba(255, 255, 255, 0.75)', header: 'rgba(255, 255, 255, 0.75)',
navBg: '@panel', navBg: '@panel',
@ -31,7 +36,6 @@
mentionMe: '@mention', mentionMe: '@mention',
renote: '#229e82', renote: '#229e82',
modalBg: 'rgba(0, 0, 0, 0.3)', modalBg: 'rgba(0, 0, 0, 0.3)',
divider: 'rgba(0, 0, 0, 0.1)',
scrollbarHandle: 'rgba(0, 0, 0, 0.2)', scrollbarHandle: 'rgba(0, 0, 0, 0.2)',
scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)', scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)',
dateLabelFg: '@fg', dateLabelFg: '@fg',

3
src/client/themes/black.json5
View File

@ -9,6 +9,9 @@
props: { props: {
divider: '#2d2d2d', divider: '#2d2d2d',
panelHeaderBg: '@panel',
panelHeaderDivider: '@divider',
panelBorder: '@divider',
messageBg: '#1d1d1d', messageBg: '#1d1d1d',
}, },
} }

1
src/client/themes/white.json5
View File

@ -8,6 +8,7 @@
base: 'light', base: 'light',
props: { props: {
panelHeaderDivider: '@divider',
messageBg: '#dedede', messageBg: '#dedede',
}, },
} }