amechama/sharkey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
syuilo 2018-09-27 22:25:10 +09:00
parent b032f78769
commit ef74653a4b
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69
4 changed files with 23 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/client/app/common/scripts/theme.ts
View File

@ -43,12 +43,13 @@ function compile(theme: Theme): { [key: string]: string } {
if (code[0] == ':') { if (code[0] == ':') {
const parts = code.split('<'); const parts = code.split('<');
const func = parts.shift().substr(1); const func = parts.shift().substr(1);
const arg = parseInt(parts.shift(), 10); const arg = parseFloat(parts.shift());
const color = getColor(parts.join('<')); const color = getColor(parts.join('<'));
switch (func) { switch (func) {
case 'darken': return color.darken(arg); case 'darken': return color.darken(arg);
case 'lighten': return color.lighten(arg); case 'lighten': return color.lighten(arg);
case 'alpha': return color.setAlpha(arg);
} }
} }

27
src/client/app/desktop/views/components/settings.vue
View File

@ -486,9 +486,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-settings
root(isDark)
display flex display flex
width 100% width 100%
height 100% height 100%
@ -499,13 +497,13 @@ root(isDark)
height 100% height 100%
padding 16px 0 0 0 padding 16px 0 0 0
overflow auto overflow auto
border-right solid 1px isDark ? #1c2023 : #ddd border-right solid 1px var(--faceDivider)
> p > p
display block display block
padding 10px 16px padding 10px 16px
margin 0 margin 0
color isDark ? #9aa2a7 : #666 color var(--desktopSettingsNavItem)
cursor pointer cursor pointer
user-select none user-select none
transition margin-left 0.2s ease transition margin-left 0.2s ease
@ -514,7 +512,7 @@ root(isDark)
margin-right 4px margin-right 4px
&:hover &:hover
color isDark ? #fff : #555 color var(--desktopSettingsNavItemHover)
&.active &.active
margin-left 8px margin-left 8px
@ -528,14 +526,13 @@ root(isDark)
> section > section
margin 32px margin 32px
color isDark ? #c4ccd2 : #4a535a color var(--text)
> h1 > h1
margin 0 0 1em 0 margin 0 0 1em 0
padding 0 0 8px 0 padding 0 0 8px 0
font-size 1em font-size 1em
color isDark ? #e3e7ea : #555 border-bottom solid 1px var(--faceDivider)
border-bottom solid 1px isDark ? #1c2023 : #eee
&, >>> * &, >>> *
.ui.button.block .ui.button.block
@ -548,18 +545,12 @@ root(isDark)
margin 0 0 1em 0 margin 0 0 1em 0
padding 0 0 8px 0 padding 0 0 8px 0
font-size 1em font-size 1em
color isDark ? #e3e7ea : #555 color var(--text)
border-bottom solid 1px isDark ? #1c2023 : #eee border-bottom solid 1px var(--faceDivider)
> .web > .web
> .div > .div
border-bottom solid 1px isDark ? #1c2023 : #eee border-bottom solid 1px var(--faceDivider)
margin 16px 0 margin 16px 0
.mk-settings[data-darkmode]
root(true)
.mk-settings:not([data-darkmode])
root(false)
</style> </style>

7
src/client/theme/dark.json
View File

@ -5,12 +5,14 @@
"author": "syuilo", "author": "syuilo",
"vars": { "vars": {
"primary": "#fb4e4e", "primary": "#fb4e4e",
"secondary": "#282C37" "secondary": "#282C37",
"text": "#d0e0ea"
} }
}, },
"primary": "$primary", "primary": "$primary",
"primaryForeground": "#fff", "primaryForeground": "#fff",
"bg": ":darken<8<$secondary", "bg": ":darken<8<$secondary",
"text": "$text",
"scrollbarTrack": "#282c37", "scrollbarTrack": "#282c37",
"scrollbarHandle": "#454954", "scrollbarHandle": "#454954",
"scrollbarHandleHover": "#535660", "scrollbarHandleHover": "#535660",
@ -99,6 +101,9 @@
"desktopTimelineSrc": "@faceTextButton", "desktopTimelineSrc": "@faceTextButton",
"desktopTimelineSrcHover": "@faceTextButtonHover", "desktopTimelineSrcHover": "@faceTextButtonHover",
"desktopWindowTitle": "@faceHeaderText", "desktopWindowTitle": "@faceHeaderText",
"desktopSettingsNavItem": ":alpha<0.8<$text",
"desktopSettingsNavItemHover": ":lighten<10<$text",
"mobileSignedInAsBg": "#273c34", "mobileSignedInAsBg": "#273c34",
"mobileSignedInAsFg": "#49ab63", "mobileSignedInAsFg": "#49ab63",
"mobileSignoutBg": "#652222", "mobileSignoutBg": "#652222",

7
src/client/theme/light.json
View File

@ -5,12 +5,14 @@
"author": "syuilo", "author": "syuilo",
"vars": { "vars": {
"primary": "#fb4e4e", "primary": "#fb4e4e",
"secondary": "#fff" "secondary": "#fff",
"text": "#666"
} }
}, },
"primary": "$primary", "primary": "$primary",
"primaryForeground": "#fff", "primaryForeground": "#fff",
"bg": ":darken<8<$secondary", "bg": ":darken<8<$secondary",
"text": "$text",
"scrollbarTrack": "#fff", "scrollbarTrack": "#fff",
"scrollbarHandle": "#00000033", "scrollbarHandle": "#00000033",
"scrollbarHandleHover": "#00000066", "scrollbarHandleHover": "#00000066",
@ -99,6 +101,9 @@
"desktopTimelineSrc": "#6f7477", "desktopTimelineSrc": "#6f7477",
"desktopTimelineSrcHover": "#525a5f", "desktopTimelineSrcHover": "#525a5f",
"desktopWindowTitle": "#666", "desktopWindowTitle": "#666",
"desktopSettingsNavItem": ":alpha<0.8<$text",
"desktopSettingsNavItemHover": ":darken<10<$text",
"mobileSignedInAsBg": "#fcfff5", "mobileSignedInAsBg": "#fcfff5",
"mobileSignedInAsFg": "#2c662d", "mobileSignedInAsFg": "#2c662d",
"mobileSignoutBg": "#fff6f5", "mobileSignoutBg": "#fff6f5",