mirror of
https://github.com/paricafe/misskey.git
synced 2024-11-24 23:26:44 -06:00
wip
This commit is contained in:
parent
8317a219a5
commit
0c63ec8157
10 changed files with 66 additions and 229 deletions
|
@ -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>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -1,8 +1,6 @@
|
|||
@import "../app"
|
||||
@import "../reset"
|
||||
|
||||
@import "./ui"
|
||||
|
||||
*::input-placeholder
|
||||
color #D8CBC5
|
||||
|
||||
|
|
|
@ -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
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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})` : ''"
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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)",
|
||||
|
|
|
@ -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)",
|
||||
|
|
Loading…
Reference in a new issue