From 0c63ec8157f0c54d780faf69aad63f4bcd7fd683 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 20:39:32 +0900
Subject: [PATCH] wip
---
.../app/common/views/components/ui/button.vue | 82 ++++----
.../app/common/views/widgets/broadcast.vue | 1 -
src/client/app/desktop/style.styl | 2 -
src/client/app/desktop/ui.styl | 179 ------------------
.../desktop/views/components/post-form.vue | 10 +-
.../desktop/views/components/renote-form.vue | 6 +-
.../app/desktop/views/widgets/profile.vue | 1 -
src/client/app/init.css | 6 +-
src/client/theme/dark.json | 4 +
src/client/theme/light.json | 4 +
10 files changed, 66 insertions(+), 229 deletions(-)
delete mode 100644 src/client/app/desktop/ui.styl
diff --git a/src/client/app/common/views/components/ui/button.vue b/src/client/app/common/views/components/ui/button.vue
index 4934a1bdfa..a165d100a4 100644
--- a/src/client/app/common/views/components/ui/button.vue
+++ b/src/client/app/common/views/components/ui/button.vue
@@ -1,9 +1,7 @@
<template>
-<div class="ui-button" :class="[styl]">
- <button :type="type" @click="$emit('click')">
- <slot></slot>
- </button>
-</div>
+<button class="dmtdnykelhudezerjlfpbhgovrgnqqgr" :class="[styl, { inline, primary }]" :type="type" @click="$emit('click')">
+ <slot></slot>
+</button>
</template>
<script lang="ts">
@@ -13,6 +11,16 @@ export default Vue.extend({
type: {
type: String,
required: false
+ },
+ primary: {
+ type: Boolean,
+ required: false,
+ default: false
+ },
+ inline: {
+ type: Boolean,
+ required: false,
+ default: false
}
},
data() {
@@ -32,21 +40,36 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-root(fill)
- > button
- display block
- width 100%
- margin 0
- padding 0
- font-weight bold
- font-size 16px
- line-height 44px
- border none
- border-radius 6px
- outline none
- box-shadow none
+.dmtdnykelhudezerjlfpbhgovrgnqqgr
+ display block
+ width 100%
+ margin 0
+ padding 0
+ font-weight normal
+ font-size 16px
+ border none
+ border-radius 6px
+ 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)
background var(--primary)
@@ -55,20 +78,15 @@ root(fill)
&:active
background var(--primaryDarken5)
- else
- color var(--primary)
- background none
- &:hover
- color var(--primaryDarken5)
-
- &:active
- background var(--primaryAlpha03)
-
-.ui-button
- &.fill
- root(true)
&:not(.fill)
- root(false)
+ color var(--primary)
+ background none
+
+ &:hover
+ color var(--primaryDarken5)
+
+ &:active
+ background var(--primaryAlpha03)
</style>
diff --git a/src/client/app/common/views/widgets/broadcast.vue b/src/client/app/common/views/widgets/broadcast.vue
index 65e37bfc69..620b09ff0e 100644
--- a/src/client/app/common/views/widgets/broadcast.vue
+++ b/src/client/app/common/views/widgets/broadcast.vue
@@ -5,7 +5,6 @@
:data-found="announcements && announcements.length != 0"
:data-melt="props.design == 1"
:data-mobile="platform == 'mobile'"
- :data-darkmode="$store.state.device.darkmode"
>
<div class="icon">
<svg height="32" version="1.1" viewBox="0 0 32 32" width="32">
diff --git a/src/client/app/desktop/style.styl b/src/client/app/desktop/style.styl
index 626671fd25..96481a9808 100644
--- a/src/client/app/desktop/style.styl
+++ b/src/client/app/desktop/style.styl
@@ -1,8 +1,6 @@
@import "../app"
@import "../reset"
-@import "./ui"
-
*::input-placeholder
color #D8CBC5
diff --git a/src/client/app/desktop/ui.styl b/src/client/app/desktop/ui.styl
deleted file mode 100644
index 3ab5d79c5d..0000000000
--- a/src/client/app/desktop/ui.styl
+++ /dev/null
@@ -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
diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index b2a6fed8e8..6cb73ebc43 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -599,21 +599,19 @@ export default Vue.extend({
height 40px
font-size 1em
color var(--primaryForeground)
- background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
+ background var(--primary)
outline none
- border solid 1px var(--primaryLighten15)
+ border none
border-radius 4px
&:not(:disabled)
font-weight bold
&:hover:not(:disabled)
- background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
- border-color var(--primary)
+ background var(--primaryLighten5)
&:active:not(:disabled)
- background var(--primary)
- border-color var(--primary)
+ background var(--primaryDarken5)
&:focus
&:after
diff --git a/src/client/app/desktop/views/components/renote-form.vue b/src/client/app/desktop/views/components/renote-form.vue
index 6717ced3b1..68d485bada 100644
--- a/src/client/app/desktop/views/components/renote-form.vue
+++ b/src/client/app/desktop/views/components/renote-form.vue
@@ -4,8 +4,8 @@
<template v-if="!quote">
<footer>
<a class="quote" v-if="!quote" @click="onQuote">%i18n:@quote%</a>
- <button class="ui cancel" @click="cancel">%i18n:@cancel%</button>
- <button class="ui primary ok" @click="ok" :disabled="wait">{{ wait ? '%i18n:@reposting%' : '%i18n:@renote%' }}</button>
+ <ui-button class="button cancel" inline @click="cancel">%i18n:@cancel%</ui-button>
+ <ui-button class="button ok" inline primary @click="ok" :disabled="wait">{{ wait ? '%i18n:@reposting%' : '%i18n:@renote%' }}</ui-button>
</footer>
</template>
<template v-if="quote">
@@ -71,7 +71,7 @@ export default Vue.extend({
left 28px
line-height 40px
- button
+ > .button
display block
position absolute
bottom 16px
diff --git a/src/client/app/desktop/views/widgets/profile.vue b/src/client/app/desktop/views/widgets/profile.vue
index fa35138c31..91354324ce 100644
--- a/src/client/app/desktop/views/widgets/profile.vue
+++ b/src/client/app/desktop/views/widgets/profile.vue
@@ -4,7 +4,6 @@
<div class="egwyvoaaryotefqhqtmiyawwefemjfsd-body"
:data-compact="props.design == 1 || props.design == 2"
:data-melt="props.design == 2"
- :data-darkmode="$store.state.device.darkmode"
>
<div class="banner"
:style="$store.state.i.bannerUrl ? `background-image: url(${$store.state.i.bannerUrl})` : ''"
diff --git a/src/client/app/init.css b/src/client/app/init.css
index 6ee25d64e2..92bb1d8cf4 100644
--- a/src/client/app/init.css
+++ b/src/client/app/init.css
@@ -32,7 +32,7 @@ body > noscript {
left: 0;
width: 100%;
height: 100%;
- background: #fff;
+ background: var(--bg);
cursor: wait;
}
#ini > svg {
@@ -47,10 +47,6 @@ body > noscript {
animation: ini 0.6s infinite linear;
}
-html[data-darkmode] #ini {
- background: #191b22;
-}
-
@keyframes ini {
from {
transform: rotate(0deg);
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index c43de3024e..015225ddab 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -67,6 +67,10 @@
"inputLabel": "rgba(255, 255, 255, 0.7)",
"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)",
"autocompleteItemText": "rgba(255, 255, 255, 0.8)",
"autocompleteItemTextSub": "rgba(255, 255, 255, 0.3)",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 2e4f4b8cc9..3d131f066a 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -67,6 +67,10 @@
"inputLabel": "rgba(0, 0, 0, 0.54)",
"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)",
"autocompleteItemText": "rgba(0, 0, 0, 0.8)",
"autocompleteItemTextSub": "rgba(0, 0, 0, 0.3)",