graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-27 03:23:08 +02:00
Code Issues Projects Releases Packages Wiki Activity

wip

Browse source
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>
<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>

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

@ -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">

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

@ -1,8 +1,6 @@
@import "../app"
@import "../reset"
@import "./ui"
*::input-placeholder
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
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

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

@ -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

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

@ -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})` : ''"

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

@ -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);

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

@ -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)",

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

@ -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)",