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

wip

This commit is contained in:
syuilo 2018-09-28 20:39:32 +09:00
parent 8317a219a5
commit 0c63ec8157
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69
10 changed files with 66 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
src/client/app/common/views/components/ui/button.vue
View File

@ -1,9 +1,7 @@
<template> <template>
<div class="ui-button" :class="[styl]"> <button class="dmtdnykelhudezerjlfpbhgovrgnqqgr" :class="[styl, { inline, primary }]" :type="type" @click="$emit('click')">
<button :type="type" @click="$emit('click')"> <slot></slot>
<slot></slot> </button>
</button>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -13,6 +11,16 @@ export default Vue.extend({
type: { type: {
type: String, type: String,
required: false required: false
},
primary: {
type: Boolean,
required: false,
default: false
},
inline: {
type: Boolean,
required: false,
default: false
} }
}, },
data() { data() {
@ -32,21 +40,36 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(fill) .dmtdnykelhudezerjlfpbhgovrgnqqgr
> button display block
display block width 100%
width 100% margin 0
margin 0 padding 0
padding 0 font-weight normal
font-weight bold font-size 16px
font-size 16px border none
line-height 44px border-radius 6px
border none outline none
border-radius 6px box-shadow none
outline none
box-shadow none
if fill &.inline
display inline-block
width auto
&.primary
font-weight bold
&.fill
color var(--text)
background var(--buttonBg)
&:hover
background var(--buttonHoverBg)
&:active
background var(--buttonActiveBg)
&.primary
color var(--primaryForeground) color var(--primaryForeground)
background var(--primary) background var(--primary)
@ -55,20 +78,15 @@ root(fill)
&:active &:active
background var(--primaryDarken5) background var(--primaryDarken5)
else
color var(--primary)
background none
&:hover
color var(--primaryDarken5)
&:active
background var(--primaryAlpha03)
.ui-button
&.fill
root(true)
&:not(.fill) &:not(.fill)
root(false) color var(--primary)
background none
&:hover
color var(--primaryDarken5)
&:active
background var(--primaryAlpha03)
</style> </style>

1
src/client/app/common/views/widgets/broadcast.vue
View File

@ -5,7 +5,6 @@
:data-found="announcements && announcements.length != 0" :data-found="announcements && announcements.length != 0"
:data-melt="props.design == 1" :data-melt="props.design == 1"
:data-mobile="platform == 'mobile'" :data-mobile="platform == 'mobile'"
:data-darkmode="$store.state.device.darkmode"
> >
<div class="icon"> <div class="icon">
<svg height="32" version="1.1" viewBox="0 0 32 32" width="32"> <svg height="32" version="1.1" viewBox="0 0 32 32" width="32">

2
src/client/app/desktop/style.styl
View File

@ -1,8 +1,6 @@
@import "../app" @import "../app"
@import "../reset" @import "../reset"
@import "./ui"
*::input-placeholder *::input-placeholder
color #D8CBC5 color #D8CBC5

179
src/client/app/desktop/ui.styl
View File

@ -1,179 +0,0 @@
button
font-family sans-serif
*
pointer-events none
button.ui
.button.ui
display inline-block
cursor pointer
padding 0 14px
margin 0
min-width 100px
line-height 38px
font-size 14px
color #888
text-decoration none
background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
border solid 1px #e2e2e2
border-radius 4px
outline none
&.block
display block
&:focus
&:after
content ""
pointer-events none
position absolute
top -5px
right -5px
bottom -5px
left -5px
border 2px solid var(--primaryAlpha03)
border-radius 8px
&:disabled
opacity 0.7
cursor default
&:hover
background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
border-color #dcdcdc
&:active
background #ececec
border-color #dcdcdc
&.primary
color var(--primaryForeground)
//background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
border solid 1px var(--primaryLighten15)
&:not(:disabled)
font-weight bold
&:hover:not(:disabled)
//background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
border-color var(--primary)
&:active:not(:disabled)
background var(--primary)
border-color var(--primary)
input:not([type]).ui
input[type='text'].ui
input[type='password'].ui
input[type='email'].ui
input[type='date'].ui
input[type='number'].ui
textarea.ui
display block
padding 10px
width 100%
height 40px
font-family sans-serif
font-size 16px
color #55595c
border solid 1px #dadada
border-radius 4px
&:hover
border-color #b0b0b0
&:focus
border-color var(--primary)
textarea.ui
min-width 100%
max-width 100%
min-height 64px
.ui.info
display block
margin 1em 0
padding 0 1em
font-size 90%
color rgba(#000, 0.87)
background #f8f8f9
border solid 1px rgba(34, 36, 38, 0.22)
border-radius 4px
> p
opacity 0.8
> [data-fa]:first-child
margin-right 0.25em
&.warn
color #573a08
background #FFFAF3
border-color #C9BA9B
.ui.from.group
display block
margin 16px 0
> p:first-child
margin 0 0 6px 0
font-size 90%
font-weight bold
color rgba(#373a3c, 0.9)
html[data-darkmode]
button.ui
.button.ui
color #fff
background linear-gradient(to bottom, #313543 0%, #282c37 100%)
border-color #1c2023
&:hover
background linear-gradient(to bottom, #2c2f3c 0%, #22262f 100%)
border-color #151a1d
&:active
background #22262f
border-color #151a1d
&.primary
color var(--primaryForeground)
//background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
border solid 1px var(--primaryLighten15)
&:hover:not(:disabled)
//background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
border-color var(--primary)
&:active:not(:disabled)
background var(--primary)
border-color var(--primary)
input:not([type]).ui
input[type='text'].ui
input[type='password'].ui
input[type='email'].ui
input[type='date'].ui
input[type='number'].ui
textarea.ui
display block
padding 10px
width 100%
height 40px
font-family sans-serif
font-size 16px
color #dee4e8
background #191b22
border solid 1px #495156
border-radius 4px
&:hover
border-color #b0b0b0
&:focus
border-color var(--primary)
.ui.from.group
> p:first-child
color #c0c7cc

10
src/client/app/desktop/views/components/post-form.vue
View File

@ -599,21 +599,19 @@ export default Vue.extend({
height 40px height 40px
font-size 1em font-size 1em
color var(--primaryForeground) color var(--primaryForeground)
background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%) background var(--primary)
outline none outline none
border solid 1px var(--primaryLighten15) border none
border-radius 4px border-radius 4px
&:not(:disabled) &:not(:disabled)
font-weight bold font-weight bold
&:hover:not(:disabled) &:hover:not(:disabled)
background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%) background var(--primaryLighten5)
border-color var(--primary)
&:active:not(:disabled) &:active:not(:disabled)
background var(--primary) background var(--primaryDarken5)
border-color var(--primary)
&:focus &:focus
&:after &:after

6
src/client/app/desktop/views/components/renote-form.vue
View File

@ -4,8 +4,8 @@
<template v-if="!quote"> <template v-if="!quote">
<footer> <footer>
<a class="quote" v-if="!quote" @click="onQuote">%i18n:@quote%</a> <a class="quote" v-if="!quote" @click="onQuote">%i18n:@quote%</a>
<button class="ui cancel" @click="cancel">%i18n:@cancel%</button> <ui-button class="button cancel" inline @click="cancel">%i18n:@cancel%</ui-button>
<button class="ui primary ok" @click="ok" :disabled="wait">{{ wait ? '%i18n:@reposting%' : '%i18n:@renote%' }}</button> <ui-button class="button ok" inline primary @click="ok" :disabled="wait">{{ wait ? '%i18n:@reposting%' : '%i18n:@renote%' }}</ui-button>
</footer> </footer>
</template> </template>
<template v-if="quote"> <template v-if="quote">
@ -71,7 +71,7 @@ export default Vue.extend({
left 28px left 28px
line-height 40px line-height 40px
button > .button
display block display block
position absolute position absolute
bottom 16px bottom 16px

1
src/client/app/desktop/views/widgets/profile.vue
View File

@ -4,7 +4,6 @@
<div class="egwyvoaaryotefqhqtmiyawwefemjfsd-body" <div class="egwyvoaaryotefqhqtmiyawwefemjfsd-body"
:data-compact="props.design == 1 || props.design == 2" :data-compact="props.design == 1 || props.design == 2"
:data-melt="props.design == 2" :data-melt="props.design == 2"
:data-darkmode="$store.state.device.darkmode"
> >
<div class="banner" <div class="banner"
:style="$store.state.i.bannerUrl ? `background-image: url(${$store.state.i.bannerUrl})` : ''" :style="$store.state.i.bannerUrl ? `background-image: url(${$store.state.i.bannerUrl})` : ''"

6
src/client/app/init.css
View File

@ -32,7 +32,7 @@ body > noscript {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #fff; background: var(--bg);
cursor: wait; cursor: wait;
} }
#ini > svg { #ini > svg {
@ -47,10 +47,6 @@ body > noscript {
animation: ini 0.6s infinite linear; animation: ini 0.6s infinite linear;
} }
html[data-darkmode] #ini {
background: #191b22;
}
@keyframes ini { @keyframes ini {
from { from {
transform: rotate(0deg); transform: rotate(0deg);

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

@ -67,6 +67,10 @@
"inputLabel": "rgba(255, 255, 255, 0.7)", "inputLabel": "rgba(255, 255, 255, 0.7)",
"inputText": "#fff", "inputText": "#fff",
"buttonBg": "rgba(255, 255, 255, 0.05)",
"buttonHoverBg": "rgba(255, 255, 255, 0.1)",
"buttonActiveBg": "rgba(255, 255, 255, 0.15)",
"autocompleteItemHoverBg": "rgba(255, 255, 255, 0.1)", "autocompleteItemHoverBg": "rgba(255, 255, 255, 0.1)",
"autocompleteItemText": "rgba(255, 255, 255, 0.8)", "autocompleteItemText": "rgba(255, 255, 255, 0.8)",
"autocompleteItemTextSub": "rgba(255, 255, 255, 0.3)", "autocompleteItemTextSub": "rgba(255, 255, 255, 0.3)",

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

@ -67,6 +67,10 @@
"inputLabel": "rgba(0, 0, 0, 0.54)", "inputLabel": "rgba(0, 0, 0, 0.54)",
"inputText": "#000", "inputText": "#000",
"buttonBg": "rgba(0, 0, 0, 0.05)",
"buttonHoverBg": "rgba(0, 0, 0, 0.1)",
"buttonActiveBg": "rgba(0, 0, 0, 0.15)",
"autocompleteItemHoverBg": "rgba(0, 0, 0, 0.1)", "autocompleteItemHoverBg": "rgba(0, 0, 0, 0.1)",
"autocompleteItemText": "rgba(0, 0, 0, 0.8)", "autocompleteItemText": "rgba(0, 0, 0, 0.8)",
"autocompleteItemTextSub": "rgba(0, 0, 0, 0.3)", "autocompleteItemTextSub": "rgba(0, 0, 0, 0.3)",