syuilo
GitHub
commit
8b68c5da37
|
|
@ -285,6 +285,28 @@ common/views/components/media-banner.vue:
|
||||||
sensitive: "閲覧注意"
|
sensitive: "閲覧注意"
|
||||||
click-to-show: "クリックして表示"
|
click-to-show: "クリックして表示"
|
||||||
|
|
||||||
|
common/views/components/theme.vue:
|
||||||
|
light-theme: "非ダークモード時に使用するテーマ"
|
||||||
|
dark-theme: "ダークモード時に使用するテーマ"
|
||||||
|
install-a-theme: "テーマのインストール"
|
||||||
|
theme-code: "テーマコード"
|
||||||
|
install: "インストール"
|
||||||
|
create-a-theme: "テーマの作成"
|
||||||
|
save-created-theme: "テーマを保存"
|
||||||
|
primary-color: "プライマリ カラー"
|
||||||
|
secondary-color: "セカンダリ カラー"
|
||||||
|
text-color: "文字色"
|
||||||
|
base-theme: "ベーステーマ"
|
||||||
|
base-theme-light: "Light"
|
||||||
|
base-theme-dark: "Dark"
|
||||||
|
theme-name: "テーマ名"
|
||||||
|
preview-created-theme: "プレビュー"
|
||||||
|
invalid-theme: "テーマが正しくありません。"
|
||||||
|
already-installed: "既にそのテーマはインストールされています。"
|
||||||
|
saved: "保存しました"
|
||||||
|
installed-themes: "インストールされたテーマ"
|
||||||
|
select-theme: "テーマを選択してください"
|
||||||
|
|
||||||
common/views/components/cw-button.vue:
|
common/views/components/cw-button.vue:
|
||||||
hide: "隠す"
|
hide: "隠す"
|
||||||
show: "もっと見る"
|
show: "もっと見る"
|
||||||
|
|
@ -762,6 +784,7 @@ desktop/views/components/settings.vue:
|
||||||
2fa: "二段階認証"
|
2fa: "二段階認証"
|
||||||
other: "その他"
|
other: "その他"
|
||||||
license: "ライセンス"
|
license: "ライセンス"
|
||||||
|
theme: "テーマ"
|
||||||
|
|
||||||
behaviour: "動作"
|
behaviour: "動作"
|
||||||
fetch-on-scroll: "スクロールで自動読み込み"
|
fetch-on-scroll: "スクロールで自動読み込み"
|
||||||
|
|
@ -784,7 +807,6 @@ desktop/views/components/settings.vue:
|
||||||
rounded-corners: "UIの角を丸める"
|
rounded-corners: "UIの角を丸める"
|
||||||
circle-icons: "円形のアイコンを使用"
|
circle-icons: "円形のアイコンを使用"
|
||||||
contrasted-acct: "ユーザー名にコントラストを付ける"
|
contrasted-acct: "ユーザー名にコントラストを付ける"
|
||||||
gradient-window-header: "ウィンドウのタイトルバーにグラデーションを使用"
|
|
||||||
post-form-on-timeline: "タイムライン上部に投稿フォームを表示する"
|
post-form-on-timeline: "タイムライン上部に投稿フォームを表示する"
|
||||||
suggest-recent-hashtags: "最近のハッシュタグを投稿フォームに表示する"
|
suggest-recent-hashtags: "最近のハッシュタグを投稿フォームに表示する"
|
||||||
show-clock-on-header: "右上に時計を表示する"
|
show-clock-on-header: "右上に時計を表示する"
|
||||||
|
|
@ -793,7 +815,6 @@ desktop/views/components/settings.vue:
|
||||||
show-renoted-my-notes: "自分の投稿のRenoteをタイムラインに表示する"
|
show-renoted-my-notes: "自分の投稿のRenoteをタイムラインに表示する"
|
||||||
show-local-renotes: "ローカルの投稿のRenoteをタイムラインに表示する"
|
show-local-renotes: "ローカルの投稿のRenoteをタイムラインに表示する"
|
||||||
show-maps: "マップの自動展開"
|
show-maps: "マップの自動展開"
|
||||||
show-maps-desc: "位置情報が添付された投稿のマップを自動的に展開します。"
|
|
||||||
|
|
||||||
sound: "サウンド"
|
sound: "サウンド"
|
||||||
enable-sounds: "サウンドを有効にする"
|
enable-sounds: "サウンドを有効にする"
|
||||||
|
|
@ -1419,6 +1440,7 @@ mobile/views/pages/settings.vue:
|
||||||
notification-position: "通知の表示"
|
notification-position: "通知の表示"
|
||||||
notification-position-bottom: "下"
|
notification-position-bottom: "下"
|
||||||
notification-position-top: "上"
|
notification-position-top: "上"
|
||||||
|
theme: "テーマ"
|
||||||
behavior: "動作"
|
behavior: "動作"
|
||||||
fetch-on-scroll: "スクロールで自動読み込み"
|
fetch-on-scroll: "スクロールで自動読み込み"
|
||||||
note-visibility: "投稿の公開範囲"
|
note-visibility: "投稿の公開範囲"
|
||||||
|
|
|
||||||
|
|
@ -75,6 +75,7 @@
|
||||||
"@types/single-line-log": "1.1.0",
|
"@types/single-line-log": "1.1.0",
|
||||||
"@types/speakeasy": "2.0.2",
|
"@types/speakeasy": "2.0.2",
|
||||||
"@types/systeminformation": "3.23.0",
|
"@types/systeminformation": "3.23.0",
|
||||||
|
"@types/tinycolor2": "1.4.1",
|
||||||
"@types/tmp": "0.0.33",
|
"@types/tmp": "0.0.33",
|
||||||
"@types/uuid": "3.4.4",
|
"@types/uuid": "3.4.4",
|
||||||
"@types/webpack": "4.4.12",
|
"@types/webpack": "4.4.12",
|
||||||
|
|
@ -194,6 +195,7 @@
|
||||||
"systeminformation": "3.45.6",
|
"systeminformation": "3.45.6",
|
||||||
"syuilo-password-strength": "0.0.1",
|
"syuilo-password-strength": "0.0.1",
|
||||||
"textarea-caret": "3.1.0",
|
"textarea-caret": "3.1.0",
|
||||||
|
"tinycolor2": "1.4.1",
|
||||||
"tmp": "0.0.33",
|
"tmp": "0.0.33",
|
||||||
"ts-loader": "4.4.1",
|
"ts-loader": "4.4.1",
|
||||||
"ts-node": "7.0.1",
|
"ts-node": "7.0.1",
|
||||||
|
|
@ -206,12 +208,14 @@
|
||||||
"v-animate-css": "0.0.2",
|
"v-animate-css": "0.0.2",
|
||||||
"vue": "2.5.17",
|
"vue": "2.5.17",
|
||||||
"vue-chartjs": "3.4.0",
|
"vue-chartjs": "3.4.0",
|
||||||
|
"vue-color": "2.6.0",
|
||||||
"vue-cropperjs": "2.2.2",
|
"vue-cropperjs": "2.2.2",
|
||||||
"vue-js-modal": "1.3.26",
|
"vue-js-modal": "1.3.26",
|
||||||
"vue-json-tree-view": "2.1.4",
|
"vue-json-tree-view": "2.1.4",
|
||||||
"vue-loader": "15.4.2",
|
"vue-loader": "15.4.2",
|
||||||
"vue-router": "3.0.1",
|
"vue-router": "3.0.1",
|
||||||
"vue-style-loader": "4.1.2",
|
"vue-style-loader": "4.1.2",
|
||||||
|
"vue-svg-inline-loader": "1.1.3",
|
||||||
"vue-template-compiler": "2.5.17",
|
"vue-template-compiler": "2.5.17",
|
||||||
"vuedraggable": "2.16.0",
|
"vuedraggable": "2.16.0",
|
||||||
"vuewordcloud": "18.7.11",
|
"vuewordcloud": "18.7.11",
|
||||||
|
|
|
||||||
|
|
@ -27,7 +27,7 @@ body
|
||||||
z-index 65536
|
z-index 65536
|
||||||
|
|
||||||
.bar
|
.bar
|
||||||
background $theme-color
|
background var(--primary)
|
||||||
|
|
||||||
position fixed
|
position fixed
|
||||||
z-index 65537
|
z-index 65537
|
||||||
|
|
@ -44,7 +44,7 @@ body
|
||||||
right 0px
|
right 0px
|
||||||
width 100px
|
width 100px
|
||||||
height 100%
|
height 100%
|
||||||
box-shadow 0 0 10px $theme-color, 0 0 5px $theme-color
|
box-shadow 0 0 10px var(--primary), 0 0 5px var(--primary)
|
||||||
opacity 1
|
opacity 1
|
||||||
|
|
||||||
transform rotate(3deg) translate(0px, -4px)
|
transform rotate(3deg) translate(0px, -4px)
|
||||||
|
|
@ -64,8 +64,8 @@ body
|
||||||
box-sizing border-box
|
box-sizing border-box
|
||||||
|
|
||||||
border solid 2px transparent
|
border solid 2px transparent
|
||||||
border-top-color $theme-color
|
border-top-color var(--primary)
|
||||||
border-left-color $theme-color
|
border-left-color var(--primary)
|
||||||
border-radius 50%
|
border-radius 50%
|
||||||
|
|
||||||
animation progress-spinner 400ms linear infinite
|
animation progress-spinner 400ms linear infinite
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,9 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import { url, lang } from './config';
|
import { url, lang } from './config';
|
||||||
|
import applyTheme from './common/scripts/theme';
|
||||||
|
const darkTheme = require('../theme/dark');
|
||||||
|
const halloweenTheme = require('../theme/halloween');
|
||||||
|
|
||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
computed: {
|
computed: {
|
||||||
|
|
|
||||||
|
|
@ -20,6 +20,16 @@
|
||||||
|
|
||||||
const langs = LANGS;
|
const langs = LANGS;
|
||||||
|
|
||||||
|
//#region Apply theme
|
||||||
|
const theme = localStorage.getItem('theme');
|
||||||
|
if (theme) {
|
||||||
|
Object.entries(JSON.parse(theme)).forEach(([k, v]) => {
|
||||||
|
if (k == 'meta') return;
|
||||||
|
document.documentElement.style.setProperty(`--${k}`, v.toString());
|
||||||
|
});
|
||||||
|
}
|
||||||
|
//#endregion
|
||||||
|
|
||||||
//#region Load settings
|
//#region Load settings
|
||||||
let settings = null;
|
let settings = null;
|
||||||
const vuex = localStorage.getItem('vuex');
|
const vuex = localStorage.getItem('vuex');
|
||||||
|
|
@ -84,13 +94,6 @@
|
||||||
app = isMobile ? 'mobile' : 'desktop';
|
app = isMobile ? 'mobile' : 'desktop';
|
||||||
}
|
}
|
||||||
|
|
||||||
// Dark/Light
|
|
||||||
if (settings) {
|
|
||||||
if (settings.device.darkmode) {
|
|
||||||
document.documentElement.setAttribute('data-darkmode', 'true');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Script version
|
// Script version
|
||||||
const ver = localStorage.getItem('v') || VERSION;
|
const ver = localStorage.getItem('v') || VERSION;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -259,15 +259,13 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.mk-autocomplete
|
||||||
|
|
||||||
root(isDark)
|
|
||||||
position fixed
|
position fixed
|
||||||
z-index 65535
|
z-index 65535
|
||||||
max-width 100%
|
max-width 100%
|
||||||
margin-top calc(1em + 8px)
|
margin-top calc(1em + 8px)
|
||||||
overflow hidden
|
overflow hidden
|
||||||
background isDark ? #313543 : #fff
|
background var(--faceHeader)
|
||||||
border solid 1px rgba(#000, 0.1)
|
border solid 1px rgba(#000, 0.1)
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
transition top 0.1s ease, left 0.1s ease
|
transition top 0.1s ease, left 0.1s ease
|
||||||
|
|
@ -299,16 +297,16 @@ root(isDark)
|
||||||
text-overflow ellipsis
|
text-overflow ellipsis
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background isDark ? rgba(#fff, 0.1) : rgba(#000, 0.1)
|
background var(--autocompleteItemHoverBg)
|
||||||
|
|
||||||
&[data-selected='true']
|
&[data-selected='true']
|
||||||
background $theme-color
|
background var(--primary)
|
||||||
|
|
||||||
&, *
|
&, *
|
||||||
color #fff !important
|
color #fff !important
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
background darken($theme-color, 10%)
|
background var(--primaryDarken10)
|
||||||
|
|
||||||
&, *
|
&, *
|
||||||
color #fff !important
|
color #fff !important
|
||||||
|
|
@ -325,15 +323,15 @@ root(isDark)
|
||||||
|
|
||||||
.name
|
.name
|
||||||
margin 0 8px 0 0
|
margin 0 8px 0 0
|
||||||
color isDark ? rgba(#fff, 0.8) : rgba(#000, 0.8)
|
color var(--autocompleteItemText)
|
||||||
|
|
||||||
.username
|
.username
|
||||||
color isDark ? rgba(#fff, 0.3) : rgba(#000, 0.3)
|
color var(--autocompleteItemTextSub)
|
||||||
|
|
||||||
> .hashtags > li
|
> .hashtags > li
|
||||||
|
|
||||||
.name
|
.name
|
||||||
color isDark ? rgba(#fff, 0.8) : rgba(#000, 0.8)
|
color var(--autocompleteItemText)
|
||||||
|
|
||||||
> .emojis > li
|
> .emojis > li
|
||||||
|
|
||||||
|
|
@ -343,15 +341,9 @@ root(isDark)
|
||||||
width 24px
|
width 24px
|
||||||
|
|
||||||
.name
|
.name
|
||||||
color isDark ? rgba(#fff, 0.8) : rgba(#000, 0.8)
|
color var(--autocompleteItemText)
|
||||||
|
|
||||||
.alias
|
.alias
|
||||||
margin 0 0 0 8px
|
margin 0 0 0 8px
|
||||||
color isDark ? rgba(#fff, 0.3) : rgba(#000, 0.3)
|
color var(--autocompleteItemTextSub)
|
||||||
|
|
||||||
.mk-autocomplete[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.mk-autocomplete:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -58,6 +58,11 @@ export default Vue.extend({
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
mounted() {
|
||||||
|
if (this.user.avatarColor) {
|
||||||
|
this.$el.style.color = `rgb(${this.user.avatarColor.slice(0, 3).join(',')})`;
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onClick(e) {
|
onClick(e) {
|
||||||
this.$emit('click', e);
|
this.$emit('click', e);
|
||||||
|
|
@ -67,8 +72,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
|
.mk-avatar
|
||||||
root(isDark)
|
|
||||||
display inline-block
|
display inline-block
|
||||||
vertical-align bottom
|
vertical-align bottom
|
||||||
|
|
||||||
|
|
@ -79,7 +83,7 @@ root(isDark)
|
||||||
&.cat::before,
|
&.cat::before,
|
||||||
&.cat::after
|
&.cat::after
|
||||||
background #df548f
|
background #df548f
|
||||||
border solid 4px isDark ? #e0eefd : #202224
|
border solid 4px currentColor
|
||||||
box-sizing border-box
|
box-sizing border-box
|
||||||
content ''
|
content ''
|
||||||
display inline-block
|
display inline-block
|
||||||
|
|
@ -105,9 +109,4 @@ root(isDark)
|
||||||
transition border-radius 1s ease
|
transition border-radius 1s ease
|
||||||
z-index 1
|
z-index 1
|
||||||
|
|
||||||
.mk-avatar[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.mk-avatar:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -39,7 +39,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
|
||||||
|
|
||||||
.mk-connect-failed
|
.mk-connect-failed
|
||||||
width 100%
|
width 100%
|
||||||
|
|
@ -70,17 +70,17 @@ export default Vue.extend({
|
||||||
display block
|
display block
|
||||||
margin 1em auto 0 auto
|
margin 1em auto 0 auto
|
||||||
padding 8px 10px
|
padding 8px 10px
|
||||||
color $theme-color-foreground
|
color var(--primaryForeground)
|
||||||
background $theme-color
|
background var(--primary)
|
||||||
|
|
||||||
&:focus
|
&:focus
|
||||||
outline solid 3px rgba($theme-color, 0.3)
|
outline solid 3px var(--primaryAlpha03)
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background lighten($theme-color, 10%)
|
background var(--primaryLighten10)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
background darken($theme-color, 10%)
|
background var(--primaryDarken10)
|
||||||
|
|
||||||
> .thanks
|
> .thanks
|
||||||
display block
|
display block
|
||||||
|
|
|
||||||
|
|
@ -22,23 +22,17 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
root(isDark)
|
.nrvgflfuaxwgkxoynpnumyookecqrrvh
|
||||||
display inline-block
|
display inline-block
|
||||||
padding 4px 8px
|
padding 4px 8px
|
||||||
font-size 0.7em
|
font-size 0.7em
|
||||||
color isDark ? #393f4f : #fff
|
color var(--cwButtonFg)
|
||||||
background isDark ? #687390 : #b1b9c1
|
background var(--cwButtonBg)
|
||||||
border-radius 2px
|
border-radius 2px
|
||||||
cursor pointer
|
cursor pointer
|
||||||
user-select none
|
user-select none
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background isDark ? #707b97 : #bbc4ce
|
background var(--cwButtonHoverBg)
|
||||||
|
|
||||||
.nrvgflfuaxwgkxoynpnumyookecqrrvh[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.nrvgflfuaxwgkxoynpnumyookecqrrvh:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
|
||||||
|
|
||||||
.a
|
.a
|
||||||
display block
|
display block
|
||||||
|
|
@ -18,8 +18,8 @@
|
||||||
display block
|
display block
|
||||||
//fill #151513
|
//fill #151513
|
||||||
//color #fff
|
//color #fff
|
||||||
fill $theme-color
|
fill var(--primary)
|
||||||
color $theme-color-foreground
|
color var(--primaryForeground)
|
||||||
|
|
||||||
.octo-arm
|
.octo-arm
|
||||||
transform-origin 130px 106px
|
transform-origin 130px 106px
|
||||||
|
|
|
||||||
|
|
@ -304,9 +304,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.xqnhankfuuilcwvhgsopeqncafzsquya
|
||||||
|
|
||||||
root(isDark)
|
|
||||||
text-align center
|
text-align center
|
||||||
|
|
||||||
> .go-index
|
> .go-index
|
||||||
|
|
@ -319,7 +317,7 @@ root(isDark)
|
||||||
|
|
||||||
> header
|
> header
|
||||||
padding 8px
|
padding 8px
|
||||||
border-bottom dashed 1px isDark ? #4c5761 : #c4cdd4
|
border-bottom dashed 1px var(--reversiGameHeaderLine)
|
||||||
|
|
||||||
a
|
a
|
||||||
color inherit
|
color inherit
|
||||||
|
|
@ -386,30 +384,30 @@ root(isDark)
|
||||||
user-select none
|
user-select none
|
||||||
|
|
||||||
&.empty
|
&.empty
|
||||||
border solid 2px isDark ? #51595f : #eee
|
border solid 2px var(--reversiGameEmptyCell)
|
||||||
|
|
||||||
&.empty.can
|
&.empty.can
|
||||||
background isDark ? #51595f : #eee
|
background var(--reversiGameEmptyCell)
|
||||||
|
|
||||||
&.empty.myTurn
|
&.empty.myTurn
|
||||||
border-color isDark ? #6a767f : #ddd
|
border-color var(--reversiGameEmptyCellMyTurn)
|
||||||
|
|
||||||
&.can
|
&.can
|
||||||
background isDark ? #51595f : #eee
|
background var(--reversiGameEmptyCellCanPut)
|
||||||
cursor pointer
|
cursor pointer
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
border-color darken($theme-color, 10%)
|
border-color var(--primaryDarken10)
|
||||||
background $theme-color
|
background var(--primary)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
background darken($theme-color, 10%)
|
background var(--primaryDarken10)
|
||||||
|
|
||||||
&.prev
|
&.prev
|
||||||
box-shadow 0 0 0 4px rgba($theme-color, 0.7)
|
box-shadow 0 0 0 4px var(--primaryAlpha07)
|
||||||
|
|
||||||
&.isEnded
|
&.isEnded
|
||||||
border-color isDark ? #6a767f : #ddd
|
border-color var(--reversiGameEmptyCellMyTurn)
|
||||||
|
|
||||||
&.none
|
&.none
|
||||||
border-color transparent !important
|
border-color transparent !important
|
||||||
|
|
@ -458,10 +456,4 @@ root(isDark)
|
||||||
margin 0 8px
|
margin 0 8px
|
||||||
min-width 70px
|
min-width 70px
|
||||||
|
|
||||||
.xqnhankfuuilcwvhgsopeqncafzsquya[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.xqnhankfuuilcwvhgsopeqncafzsquya:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -138,9 +138,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.phgnkghfpyvkrvwiajkiuoxyrdaqpzcx
|
||||||
|
|
||||||
root(isDark)
|
|
||||||
> h1
|
> h1
|
||||||
margin 0
|
margin 0
|
||||||
padding 24px
|
padding 24px
|
||||||
|
|
@ -148,7 +146,7 @@ root(isDark)
|
||||||
text-align center
|
text-align center
|
||||||
font-weight normal
|
font-weight normal
|
||||||
color #fff
|
color #fff
|
||||||
background linear-gradient(to bottom, isDark ? #45730e : #8bca3e, isDark ? #464300 : #d6cf31)
|
background linear-gradient(to bottom, var(--reversiBannerGradientStart), var(--reversiBannerGradientEnd))
|
||||||
|
|
||||||
& + p
|
& + p
|
||||||
margin 0
|
margin 0
|
||||||
|
|
@ -156,7 +154,7 @@ root(isDark)
|
||||||
margin-bottom 12px
|
margin-bottom 12px
|
||||||
text-align center
|
text-align center
|
||||||
font-size 14px
|
font-size 14px
|
||||||
border-bottom solid 1px isDark ? #535f65 : #d3d9dc
|
border-bottom solid 1px var(--faceDivider)
|
||||||
|
|
||||||
> .play
|
> .play
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
|
|
@ -171,14 +169,14 @@ root(isDark)
|
||||||
padding 16px
|
padding 16px
|
||||||
font-size 14px
|
font-size 14px
|
||||||
text-align left
|
text-align left
|
||||||
background isDark ? #282c37 : #f5f5f5
|
background var(--reversiDescBg)
|
||||||
border-radius 8px
|
border-radius 8px
|
||||||
|
|
||||||
> section
|
> section
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
padding 0 16px 16px 16px
|
padding 0 16px 16px 16px
|
||||||
max-width 500px
|
max-width 500px
|
||||||
border-top solid 1px isDark ? #535f65 : #d3d9dc
|
border-top solid 1px var(--faceDivider)
|
||||||
|
|
||||||
> h2
|
> h2
|
||||||
margin 0
|
margin 0
|
||||||
|
|
@ -189,9 +187,9 @@ root(isDark)
|
||||||
.invitation
|
.invitation
|
||||||
margin 8px 0
|
margin 8px 0
|
||||||
padding 8px
|
padding 8px
|
||||||
color isDark ? #fff : #677f84
|
color var(--text)
|
||||||
background isDark ? #282c37 : #fff
|
background var(--face)
|
||||||
box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15)
|
box-shadow 0 2px 16px var(--reversiListItemShadow)
|
||||||
border-radius 6px
|
border-radius 6px
|
||||||
cursor pointer
|
cursor pointer
|
||||||
|
|
||||||
|
|
@ -200,13 +198,13 @@ root(isDark)
|
||||||
user-select none
|
user-select none
|
||||||
|
|
||||||
&:focus
|
&:focus
|
||||||
border-color $theme-color
|
border-color var(--primary)
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background isDark ? #313543 : #f5f5f5
|
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
background isDark ? #1e222b : #eee
|
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
|
||||||
|
|
||||||
> .avatar
|
> .avatar
|
||||||
width 32px
|
width 32px
|
||||||
|
|
@ -221,9 +219,9 @@ root(isDark)
|
||||||
display block
|
display block
|
||||||
margin 8px 0
|
margin 8px 0
|
||||||
padding 8px
|
padding 8px
|
||||||
color isDark ? #fff : #677f84
|
color var(--text)
|
||||||
background isDark ? #282c37 : #fff
|
background var(--face)
|
||||||
box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15)
|
box-shadow 0 2px 16px var(--reversiListItemShadow)
|
||||||
border-radius 6px
|
border-radius 6px
|
||||||
cursor pointer
|
cursor pointer
|
||||||
|
|
||||||
|
|
@ -232,10 +230,10 @@ root(isDark)
|
||||||
user-select none
|
user-select none
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background isDark ? #313543 : #f5f5f5
|
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
background isDark ? #1e222b : #eee
|
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
|
||||||
|
|
||||||
> .avatar
|
> .avatar
|
||||||
width 32px
|
width 32px
|
||||||
|
|
@ -246,10 +244,4 @@ root(isDark)
|
||||||
margin 0 8px
|
margin 0 8px
|
||||||
line-height 32px
|
line-height 32px
|
||||||
|
|
||||||
.phgnkghfpyvkrvwiajkiuoxyrdaqpzcx[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.phgnkghfpyvkrvwiajkiuoxyrdaqpzcx:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -47,9 +47,9 @@
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<mk-switch v-model="game.settings.isLlotheo" @change="updateSettings" text="%i18n:@is-llotheo%"/>
|
<ui-switch v-model="game.settings.isLlotheo" @change="updateSettings">%i18n:@is-llotheo%</ui-switch>
|
||||||
<mk-switch v-model="game.settings.loopedBoard" @change="updateSettings" text="%i18n:@looped-map%"/>
|
<ui-switch v-model="game.settings.loopedBoard" @change="updateSettings">%i18n:@looped-map%</ui-switch>
|
||||||
<mk-switch v-model="game.settings.canPutEverywhere" @change="updateSettings" text="%i18n:@can-put-everywhere%"/>
|
<ui-switch v-model="game.settings.canPutEverywhere" @change="updateSettings">%i18n:@can-put-everywhere%</ui-switch>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -60,7 +60,7 @@
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<template v-for="item in form">
|
<template v-for="item in form">
|
||||||
<mk-switch v-if="item.type == 'switch'" v-model="item.value" :key="item.id" :text="item.label" @change="onChangeForm(item)">{{ item.desc || '' }}</mk-switch>
|
<ui-switch v-if="item.type == 'switch'" v-model="item.value" :key="item.id" :text="item.label" @change="onChangeForm(item)">{{ item.desc || '' }}</ui-switch>
|
||||||
|
|
||||||
<div class="card" v-if="item.type == 'radio'" :key="item.id">
|
<div class="card" v-if="item.type == 'radio'" :key="item.id">
|
||||||
<header>
|
<header>
|
||||||
|
|
@ -252,11 +252,9 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.urbixznjwwuukfsckrwzwsqzsxornqij
|
||||||
|
|
||||||
root(isDark)
|
|
||||||
text-align center
|
text-align center
|
||||||
background isDark ? #191b22 : #f9f9f9
|
background var(--bg)
|
||||||
|
|
||||||
> header
|
> header
|
||||||
padding 8px
|
padding 8px
|
||||||
|
|
@ -273,10 +271,10 @@ root(isDark)
|
||||||
> select
|
> select
|
||||||
width 100%
|
width 100%
|
||||||
padding 12px 14px
|
padding 12px 14px
|
||||||
background isDark ? #282C37 : #fff
|
background var(--face)
|
||||||
border 1px solid isDark ? #6a707d : #dcdfe6
|
border 1px solid var(--reversiMapSelectBorder)
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
color isDark ? #fff : #606266
|
color var(--text)
|
||||||
cursor pointer
|
cursor pointer
|
||||||
transition border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)
|
transition border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)
|
||||||
-webkit-appearance none
|
-webkit-appearance none
|
||||||
|
|
@ -284,17 +282,18 @@ root(isDark)
|
||||||
appearance none
|
appearance none
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
border-color isDark ? #a7aebd : #c0c4cc
|
border-color var(--reversiMapSelectHoverBorder)
|
||||||
|
|
||||||
&:focus
|
&:focus
|
||||||
&:active
|
&:active
|
||||||
border-color $theme-color
|
border-color var(--primary)
|
||||||
|
|
||||||
> div
|
> div
|
||||||
> .random
|
> .random
|
||||||
padding 32px 0
|
padding 32px 0
|
||||||
font-size 64px
|
font-size 64px
|
||||||
color isDark ? #4e5961 : #d8d8d8
|
color var(--text)
|
||||||
|
opacity 0.7
|
||||||
|
|
||||||
> .board
|
> .board
|
||||||
display grid
|
display grid
|
||||||
|
|
@ -302,11 +301,11 @@ root(isDark)
|
||||||
width 300px
|
width 300px
|
||||||
height 300px
|
height 300px
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
color isDark ? #fff : #444
|
color var(--text)
|
||||||
|
|
||||||
> div
|
> div
|
||||||
background transparent
|
background transparent
|
||||||
border solid 2px isDark ? #6a767f : #ddd
|
border solid 2px var(--faceDivider)
|
||||||
border-radius 6px
|
border-radius 6px
|
||||||
overflow hidden
|
overflow hidden
|
||||||
cursor pointer
|
cursor pointer
|
||||||
|
|
@ -331,32 +330,26 @@ root(isDark)
|
||||||
.card
|
.card
|
||||||
max-width 400px
|
max-width 400px
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
background isDark ? #282C37 : #fff
|
background var(--face)
|
||||||
color isDark ? #fff : #303133
|
color var(--text)
|
||||||
box-shadow 0 2px 12px 0 rgba(#000, isDark ? 0.7 : 0.1)
|
box-shadow 0 2px 12px 0 var(--reversiRoomFormShadow)
|
||||||
|
|
||||||
> header
|
> header
|
||||||
padding 18px 20px
|
padding 18px 20px
|
||||||
border-bottom 1px solid isDark ? #1c2023 : #ebeef5
|
border-bottom 1px solid var(--faceDivider)
|
||||||
|
|
||||||
> div
|
> div
|
||||||
padding 20px
|
padding 20px
|
||||||
color isDark ? #fff : #606266
|
color var(--text)
|
||||||
|
|
||||||
> footer
|
> footer
|
||||||
position sticky
|
position sticky
|
||||||
bottom 0
|
bottom 0
|
||||||
padding 16px
|
padding 16px
|
||||||
background rgba(isDark ? #191b22 : #fff, 0.9)
|
background var(--reversiRoomFooterBg)
|
||||||
border-top solid 1px isDark ? #606266 : #c4cdd4
|
border-top solid 1px var(--faceDivider)
|
||||||
|
|
||||||
> .status
|
> .status
|
||||||
margin 0 0 16px 0
|
margin 0 0 16px 0
|
||||||
|
|
||||||
.urbixznjwwuukfsckrwzwsqzsxornqij[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.urbixznjwwuukfsckrwzwsqzsxornqij:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -156,11 +156,9 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.vchtoekanapleubgzioubdtmlkribzfd
|
||||||
|
color var(--text)
|
||||||
root(isDark)
|
background var(--bg)
|
||||||
color isDark ? #fff : #677f84
|
|
||||||
background isDark ? #191b22 : #fff
|
|
||||||
|
|
||||||
> .matching
|
> .matching
|
||||||
> h1
|
> h1
|
||||||
|
|
@ -177,10 +175,4 @@ root(isDark)
|
||||||
text-align center
|
text-align center
|
||||||
border-top dashed 1px #c4cdd4
|
border-top dashed 1px #c4cdd4
|
||||||
|
|
||||||
.vchtoekanapleubgzioubdtmlkribzfd[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.vchtoekanapleubgzioubdtmlkribzfd:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
root(isDark)
|
.mk-google
|
||||||
display flex
|
display flex
|
||||||
margin 8px 0
|
margin 8px 0
|
||||||
|
|
||||||
|
|
@ -37,31 +37,25 @@ root(isDark)
|
||||||
height 40px
|
height 40px
|
||||||
font-family sans-serif
|
font-family sans-serif
|
||||||
font-size 16px
|
font-size 16px
|
||||||
color isDark ? #dee4e8 : #55595c
|
color var(--googleSearchFg)
|
||||||
background isDark ? #191b22 : #fff
|
background var(--googleSearchBg)
|
||||||
border solid 1px isDark ? #495156 : #dadada
|
border solid 1px var(--googleSearchBorder)
|
||||||
border-radius 4px 0 0 4px
|
border-radius 4px 0 0 4px
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
border-color isDark ? #777c86 : #b0b0b0
|
border-color var(--googleSearchHoverBorder)
|
||||||
|
|
||||||
> button
|
> button
|
||||||
flex-shrink 0
|
flex-shrink 0
|
||||||
padding 0 16px
|
padding 0 16px
|
||||||
border solid 1px isDark ? #495156 : #dadada
|
border solid 1px var(--googleSearchBorder)
|
||||||
border-left none
|
border-left none
|
||||||
border-radius 0 4px 4px 0
|
border-radius 0 4px 4px 0
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background-color isDark ? #2e3440 : #eee
|
background-color var(--googleSearchHoverButton)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
box-shadow 0 2px 4px rgba(#000, 0.15) inset
|
box-shadow 0 2px 4px rgba(#000, 0.15) inset
|
||||||
|
|
||||||
.mk-google[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.mk-google:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
import theme from './theme.vue';
|
||||||
import instance from './instance.vue';
|
import instance from './instance.vue';
|
||||||
import cwButton from './cw-button.vue';
|
import cwButton from './cw-button.vue';
|
||||||
import tagCloud from './tag-cloud.vue';
|
import tagCloud from './tag-cloud.vue';
|
||||||
|
|
@ -30,7 +31,6 @@ import messagingRoom from './messaging-room.vue';
|
||||||
import urlPreview from './url-preview.vue';
|
import urlPreview from './url-preview.vue';
|
||||||
import twitterSetting from './twitter-setting.vue';
|
import twitterSetting from './twitter-setting.vue';
|
||||||
import fileTypeIcon from './file-type-icon.vue';
|
import fileTypeIcon from './file-type-icon.vue';
|
||||||
import Switch from './switch.vue';
|
|
||||||
import Reversi from './games/reversi/reversi.vue';
|
import Reversi from './games/reversi/reversi.vue';
|
||||||
import welcomeTimeline from './welcome-timeline.vue';
|
import welcomeTimeline from './welcome-timeline.vue';
|
||||||
import uiInput from './ui/input.vue';
|
import uiInput from './ui/input.vue';
|
||||||
|
|
@ -44,6 +44,7 @@ import uiSelect from './ui/select.vue';
|
||||||
import formButton from './ui/form/button.vue';
|
import formButton from './ui/form/button.vue';
|
||||||
import formRadio from './ui/form/radio.vue';
|
import formRadio from './ui/form/radio.vue';
|
||||||
|
|
||||||
|
Vue.component('mk-theme', theme);
|
||||||
Vue.component('mk-instance', instance);
|
Vue.component('mk-instance', instance);
|
||||||
Vue.component('mk-cw-button', cwButton);
|
Vue.component('mk-cw-button', cwButton);
|
||||||
Vue.component('mk-tag-cloud', tagCloud);
|
Vue.component('mk-tag-cloud', tagCloud);
|
||||||
|
|
@ -74,7 +75,6 @@ Vue.component('mk-messaging-room', messagingRoom);
|
||||||
Vue.component('mk-url-preview', urlPreview);
|
Vue.component('mk-url-preview', urlPreview);
|
||||||
Vue.component('mk-twitter-setting', twitterSetting);
|
Vue.component('mk-twitter-setting', twitterSetting);
|
||||||
Vue.component('mk-file-type-icon', fileTypeIcon);
|
Vue.component('mk-file-type-icon', fileTypeIcon);
|
||||||
Vue.component('mk-switch', Switch);
|
|
||||||
Vue.component('mk-reversi', Reversi);
|
Vue.component('mk-reversi', Reversi);
|
||||||
Vue.component('mk-welcome-timeline', welcomeTimeline);
|
Vue.component('mk-welcome-timeline', welcomeTimeline);
|
||||||
Vue.component('ui-input', uiInput);
|
Vue.component('ui-input', uiInput);
|
||||||
|
|
|
||||||
|
|
@ -26,9 +26,9 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
root(isDark)
|
.nhasjydimbopojusarffqjyktglcuxjy
|
||||||
color isDark ? #fff : #5b646f
|
color var(--text)
|
||||||
background isDark ? #21242f : #fff
|
background var(--face)
|
||||||
text-align center
|
text-align center
|
||||||
|
|
||||||
> .banner
|
> .banner
|
||||||
|
|
@ -48,10 +48,4 @@ root(isDark)
|
||||||
display block
|
display block
|
||||||
padding-bottom 16px
|
padding-bottom 16px
|
||||||
|
|
||||||
.nhasjydimbopojusarffqjyktglcuxjy[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.nhasjydimbopojusarffqjyktglcuxjy:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -43,7 +43,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
root(isDark)
|
.mk-media-banner
|
||||||
width 100%
|
width 100%
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
margin-top 4px
|
margin-top 4px
|
||||||
|
|
@ -71,7 +71,7 @@ root(isDark)
|
||||||
font-size 1.6em
|
font-size 1.6em
|
||||||
|
|
||||||
> .download
|
> .download
|
||||||
background isDark ? #21242d : #f7f7f7
|
background var(--noteAttachedFile)
|
||||||
|
|
||||||
> .sensitive
|
> .sensitive
|
||||||
background #111
|
background #111
|
||||||
|
|
@ -82,9 +82,4 @@ root(isDark)
|
||||||
display block
|
display block
|
||||||
width 100%
|
width 100%
|
||||||
|
|
||||||
.mk-media-banner[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.mk-media-banner:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -117,10 +117,8 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.onchrpzrvnoruiaenfcqvccjfuupzzwv
|
||||||
|
$bg-color = var(--popupBg)
|
||||||
root(isDark)
|
|
||||||
$bg-color = isDark ? #2c303c : #fff
|
|
||||||
$border-color = rgba(27, 31, 35, 0.15)
|
$border-color = rgba(27, 31, 35, 0.15)
|
||||||
|
|
||||||
position initial
|
position initial
|
||||||
|
|
@ -132,7 +130,7 @@ root(isDark)
|
||||||
z-index 10000
|
z-index 10000
|
||||||
width 100%
|
width 100%
|
||||||
height 100%
|
height 100%
|
||||||
background rgba(#000, isDark ? 0.5 : 0.1)
|
background var(--modalBackdrop)
|
||||||
opacity 0
|
opacity 0
|
||||||
|
|
||||||
> .popover
|
> .popover
|
||||||
|
|
@ -179,26 +177,20 @@ root(isDark)
|
||||||
display block
|
display block
|
||||||
padding 8px 16px
|
padding 8px 16px
|
||||||
width 100%
|
width 100%
|
||||||
color isDark ? #d6dce2 : #111
|
color var(--popupFg)
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
color $theme-color-foreground
|
color var(--primaryForeground)
|
||||||
background $theme-color
|
background var(--primary)
|
||||||
text-decoration none
|
text-decoration none
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
color $theme-color-foreground
|
color var(--primaryForeground)
|
||||||
background darken($theme-color, 10%)
|
background var(--primaryDarken10)
|
||||||
|
|
||||||
> div
|
> div
|
||||||
margin 8px 0
|
margin 8px 0
|
||||||
height 1px
|
height 1px
|
||||||
background isDark ? #1c2023 : #eee
|
background var(--faceDivider)
|
||||||
|
|
||||||
.onchrpzrvnoruiaenfcqvccjfuupzzwv[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.onchrpzrvnoruiaenfcqvccjfuupzzwv:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -195,9 +195,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.mk-messaging-form
|
||||||
|
|
||||||
root(isDark)
|
|
||||||
> textarea
|
> textarea
|
||||||
cursor auto
|
cursor auto
|
||||||
display block
|
display block
|
||||||
|
|
@ -209,10 +207,10 @@ root(isDark)
|
||||||
padding 8px
|
padding 8px
|
||||||
resize none
|
resize none
|
||||||
font-size 1em
|
font-size 1em
|
||||||
color isDark ? #fff : #000
|
color var(--inputText)
|
||||||
outline none
|
outline none
|
||||||
border none
|
border none
|
||||||
border-top solid 1px isDark ? #4b5056 : #eee
|
border-top solid 1px var(--faceDivider)
|
||||||
border-radius 0
|
border-radius 0
|
||||||
box-shadow none
|
box-shadow none
|
||||||
background transparent
|
background transparent
|
||||||
|
|
@ -234,10 +232,10 @@ root(isDark)
|
||||||
transition color 0.1s ease
|
transition color 0.1s ease
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
color $theme-color
|
color var(--primary)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
color darken($theme-color, 10%)
|
color var(--primaryDarken10)
|
||||||
transition color 0s ease
|
transition color 0s ease
|
||||||
|
|
||||||
.files
|
.files
|
||||||
|
|
@ -293,19 +291,13 @@ root(isDark)
|
||||||
transition color 0.1s ease
|
transition color 0.1s ease
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
color $theme-color
|
color var(--primary)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
color darken($theme-color, 10%)
|
color var(--primaryDarken10)
|
||||||
transition color 0s ease
|
transition color 0s ease
|
||||||
|
|
||||||
input[type=file]
|
input[type=file]
|
||||||
display none
|
display none
|
||||||
|
|
||||||
.mk-messaging-form[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.mk-messaging-form:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -59,10 +59,8 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.message
|
||||||
|
$me-balloon-color = var(--primary)
|
||||||
root(isDark)
|
|
||||||
$me-balloon-color = $theme-color
|
|
||||||
|
|
||||||
padding 10px 12px 10px 12px
|
padding 10px 12px 10px 12px
|
||||||
background-color transparent
|
background-color transparent
|
||||||
|
|
@ -179,7 +177,7 @@ root(isDark)
|
||||||
display block
|
display block
|
||||||
margin 2px 0 0 0
|
margin 2px 0 0 0
|
||||||
font-size 10px
|
font-size 10px
|
||||||
color isDark ? rgba(#fff, 0.4) : rgba(#000, 0.4)
|
color var(--messagingRoomMessageInfo)
|
||||||
|
|
||||||
> [data-fa]
|
> [data-fa]
|
||||||
margin-left 4px
|
margin-left 4px
|
||||||
|
|
@ -192,7 +190,7 @@ root(isDark)
|
||||||
padding-left 66px
|
padding-left 66px
|
||||||
|
|
||||||
> .balloon
|
> .balloon
|
||||||
$color = isDark ? #2d3338 : #eee
|
$color = var(--messagingRoomMessageBg)
|
||||||
float left
|
float left
|
||||||
background $color
|
background $color
|
||||||
|
|
||||||
|
|
@ -208,8 +206,7 @@ root(isDark)
|
||||||
|
|
||||||
> .content
|
> .content
|
||||||
> .text
|
> .text
|
||||||
if isDark
|
color var(--messagingRoomMessageFg)
|
||||||
color #fff
|
|
||||||
|
|
||||||
> footer
|
> footer
|
||||||
text-align left
|
text-align left
|
||||||
|
|
@ -250,18 +247,9 @@ root(isDark)
|
||||||
|
|
||||||
> .read
|
> .read
|
||||||
user-select none
|
user-select none
|
||||||
margin 0 4px 0 0
|
|
||||||
color isDark ? rgba(#fff, 0.5) : rgba(#000, 0.5)
|
|
||||||
font-size 11px
|
|
||||||
|
|
||||||
&[data-is-deleted]
|
&[data-is-deleted]
|
||||||
> .balloon
|
> .balloon
|
||||||
opacity 0.5
|
opacity 0.5
|
||||||
|
|
||||||
.message[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.message:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -262,14 +262,12 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.mk-messaging-room
|
||||||
|
|
||||||
root(isDark)
|
|
||||||
display flex
|
display flex
|
||||||
flex 1
|
flex 1
|
||||||
flex-direction column
|
flex-direction column
|
||||||
height 100%
|
height 100%
|
||||||
background isDark ? #191b22 : #fff
|
background var(--messagingRoomBg)
|
||||||
|
|
||||||
> .body
|
> .body
|
||||||
width 100%
|
width 100%
|
||||||
|
|
@ -277,24 +275,15 @@ root(isDark)
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
flex 1
|
flex 1
|
||||||
|
|
||||||
> .init
|
> .init,
|
||||||
width 100%
|
|
||||||
margin 0
|
|
||||||
padding 16px 8px 8px 8px
|
|
||||||
text-align center
|
|
||||||
font-size 0.8em
|
|
||||||
color rgba(isDark ? #fff : #000, 0.4)
|
|
||||||
|
|
||||||
[data-fa]
|
|
||||||
margin-right 4px
|
|
||||||
|
|
||||||
> .empty
|
> .empty
|
||||||
width 100%
|
width 100%
|
||||||
margin 0
|
margin 0
|
||||||
padding 16px 8px 8px 8px
|
padding 16px 8px 8px 8px
|
||||||
text-align center
|
text-align center
|
||||||
font-size 0.8em
|
font-size 0.8em
|
||||||
color rgba(isDark ? #fff : #000, 0.4)
|
color var(--messagingRoomInfo)
|
||||||
|
opacity 0.5
|
||||||
|
|
||||||
[data-fa]
|
[data-fa]
|
||||||
margin-right 4px
|
margin-right 4px
|
||||||
|
|
@ -305,7 +294,8 @@ root(isDark)
|
||||||
padding 16px
|
padding 16px
|
||||||
text-align center
|
text-align center
|
||||||
font-size 0.8em
|
font-size 0.8em
|
||||||
color rgba(isDark ? #fff : #000, 0.4)
|
color var(--messagingRoomInfo)
|
||||||
|
opacity 0.5
|
||||||
|
|
||||||
[data-fa]
|
[data-fa]
|
||||||
margin-right 4px
|
margin-right 4px
|
||||||
|
|
@ -349,7 +339,7 @@ root(isDark)
|
||||||
left 0
|
left 0
|
||||||
right 0
|
right 0
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
background rgba(isDark ? #fff : #000, 0.1)
|
background var(--messagingRoomDateDividerLine)
|
||||||
|
|
||||||
> span
|
> span
|
||||||
display inline-block
|
display inline-block
|
||||||
|
|
@ -357,8 +347,8 @@ root(isDark)
|
||||||
padding 0 16px
|
padding 0 16px
|
||||||
//font-weight bold
|
//font-weight bold
|
||||||
line-height 32px
|
line-height 32px
|
||||||
color rgba(isDark ? #fff : #000, 0.3)
|
color var(--messagingRoomDateDividerText)
|
||||||
background isDark ? #191b22 : #fff
|
background var(--messagingRoomBg)
|
||||||
|
|
||||||
> footer
|
> footer
|
||||||
position -webkit-sticky
|
position -webkit-sticky
|
||||||
|
|
@ -369,7 +359,7 @@ root(isDark)
|
||||||
max-width 600px
|
max-width 600px
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
padding 0
|
padding 0
|
||||||
background rgba(isDark ? #282c37 : #fff, 0.95)
|
//background rgba(var(--face), 0.95)
|
||||||
background-clip content-box
|
background-clip content-box
|
||||||
|
|
||||||
> .new-message
|
> .new-message
|
||||||
|
|
@ -386,15 +376,15 @@ root(isDark)
|
||||||
cursor pointer
|
cursor pointer
|
||||||
line-height 32px
|
line-height 32px
|
||||||
font-size 12px
|
font-size 12px
|
||||||
color $theme-color-foreground
|
color var(--primaryForeground)
|
||||||
background $theme-color
|
background var(--primary)
|
||||||
border-radius 16px
|
border-radius 16px
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background lighten($theme-color, 10%)
|
background var(--primaryLighten10)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
background darken($theme-color, 10%)
|
background var(--primaryDarken10)
|
||||||
|
|
||||||
> [data-fa]
|
> [data-fa]
|
||||||
position absolute
|
position absolute
|
||||||
|
|
@ -410,10 +400,4 @@ root(isDark)
|
||||||
transition opacity 0.5s
|
transition opacity 0.5s
|
||||||
opacity 0
|
opacity 0
|
||||||
|
|
||||||
.mk-messaging-room[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.mk-messaging-room:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -167,9 +167,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.mk-messaging
|
||||||
|
|
||||||
root(isDark)
|
|
||||||
|
|
||||||
&[data-compact]
|
&[data-compact]
|
||||||
font-size 0.8em
|
font-size 0.8em
|
||||||
|
|
@ -204,12 +202,10 @@ root(isDark)
|
||||||
left 0
|
left 0
|
||||||
z-index 1
|
z-index 1
|
||||||
width 100%
|
width 100%
|
||||||
background #fff
|
|
||||||
box-shadow 0 0px 2px rgba(#000, 0.2)
|
box-shadow 0 0px 2px rgba(#000, 0.2)
|
||||||
|
|
||||||
> .form
|
> .form
|
||||||
padding 8px
|
background rgba(0, 0, 0, 0.02)
|
||||||
background isDark ? #282c37 : #f7f7f7
|
|
||||||
|
|
||||||
> label
|
> label
|
||||||
display block
|
display block
|
||||||
|
|
@ -229,32 +225,22 @@ root(isDark)
|
||||||
bottom 0
|
bottom 0
|
||||||
left 0
|
left 0
|
||||||
width 1em
|
width 1em
|
||||||
line-height 56px
|
line-height 48px
|
||||||
margin auto
|
margin auto
|
||||||
color #555
|
color #555
|
||||||
|
|
||||||
> input
|
> input
|
||||||
margin 0
|
margin 0
|
||||||
padding 0 0 0 32px
|
padding 0 0 0 42px
|
||||||
width 100%
|
width 100%
|
||||||
font-size 1em
|
font-size 1em
|
||||||
line-height 38px
|
line-height 48px
|
||||||
color #000
|
color var(--faceText)
|
||||||
outline none
|
outline none
|
||||||
background isDark ? #191b22 : #fff
|
background transparent
|
||||||
border solid 1px isDark ? #495156 : #eee
|
border none
|
||||||
border-radius 5px
|
border-radius 5px
|
||||||
box-shadow none
|
box-shadow none
|
||||||
transition color 0.5s ease, border 0.5s ease
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
border solid 1px isDark ? #b0b0b0 : #ddd
|
|
||||||
transition border 0.2s ease
|
|
||||||
|
|
||||||
&:focus
|
|
||||||
color darken($theme-color, 20%)
|
|
||||||
border solid 1px $theme-color
|
|
||||||
transition color 0, border 0
|
|
||||||
|
|
||||||
> .result
|
> .result
|
||||||
display block
|
display block
|
||||||
|
|
@ -287,7 +273,7 @@ root(isDark)
|
||||||
&:hover
|
&:hover
|
||||||
&:focus
|
&:focus
|
||||||
color #fff
|
color #fff
|
||||||
background $theme-color
|
background var(--primary)
|
||||||
|
|
||||||
.name
|
.name
|
||||||
color #fff
|
color #fff
|
||||||
|
|
@ -297,7 +283,7 @@ root(isDark)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
color #fff
|
color #fff
|
||||||
background darken($theme-color, 10%)
|
background var(--primaryDarken10)
|
||||||
|
|
||||||
.name
|
.name
|
||||||
color #fff
|
color #fff
|
||||||
|
|
@ -329,21 +315,21 @@ root(isDark)
|
||||||
> a
|
> a
|
||||||
display block
|
display block
|
||||||
text-decoration none
|
text-decoration none
|
||||||
background isDark ? #282c37 : #fff
|
background var(--face)
|
||||||
border-bottom solid 1px isDark ? #1c2023 : #eee
|
border-bottom solid 1px var(--faceDivider)
|
||||||
|
|
||||||
*
|
*
|
||||||
pointer-events none
|
pointer-events none
|
||||||
user-select none
|
user-select none
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background isDark ? #1e2129 : #fafafa
|
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
|
||||||
|
|
||||||
> .avatar
|
.avatar
|
||||||
filter saturate(200%)
|
filter saturate(200%)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
background isDark ? #14161b : #eee
|
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
|
||||||
|
|
||||||
&[data-is-read]
|
&[data-is-read]
|
||||||
&[data-is-me]
|
&[data-is-me]
|
||||||
|
|
@ -383,17 +369,17 @@ root(isDark)
|
||||||
overflow hidden
|
overflow hidden
|
||||||
text-overflow ellipsis
|
text-overflow ellipsis
|
||||||
font-size 1em
|
font-size 1em
|
||||||
color isDark ? #fff : rgba(#000, 0.9)
|
color var(--noteHeaderName)
|
||||||
font-weight bold
|
font-weight bold
|
||||||
transition all 0.1s ease
|
transition all 0.1s ease
|
||||||
|
|
||||||
> .username
|
> .username
|
||||||
margin 0 8px
|
margin 0 8px
|
||||||
color isDark ? #606984 : rgba(#000, 0.5)
|
color var(--noteHeaderAcct)
|
||||||
|
|
||||||
> .mk-time
|
> .mk-time
|
||||||
margin 0 0 0 auto
|
margin 0 0 0 auto
|
||||||
color isDark ? #606984 : rgba(#000, 0.5)
|
color var(--noteHeaderInfo)
|
||||||
font-size 80%
|
font-size 80%
|
||||||
|
|
||||||
> .avatar
|
> .avatar
|
||||||
|
|
@ -413,10 +399,10 @@ root(isDark)
|
||||||
overflow hidden
|
overflow hidden
|
||||||
overflow-wrap break-word
|
overflow-wrap break-word
|
||||||
font-size 1.1em
|
font-size 1.1em
|
||||||
color isDark ? #fff : rgba(#000, 0.8)
|
color var(--faceText)
|
||||||
|
|
||||||
.me
|
.me
|
||||||
color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.4)
|
opacity 0.7
|
||||||
|
|
||||||
> .image
|
> .image
|
||||||
display block
|
display block
|
||||||
|
|
@ -461,10 +447,4 @@ root(isDark)
|
||||||
> .avatar
|
> .avatar
|
||||||
margin 0 12px 0 0
|
margin 0 12px 0 0
|
||||||
|
|
||||||
.mk-messaging[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.mk-messaging:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -42,9 +42,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.bvonvjxbwzaiskogyhbwgyxvcgserpmu
|
||||||
|
|
||||||
root(isDark)
|
|
||||||
display flex
|
display flex
|
||||||
align-items baseline
|
align-items baseline
|
||||||
white-space nowrap
|
white-space nowrap
|
||||||
|
|
@ -61,7 +59,7 @@ root(isDark)
|
||||||
margin 0 .5em 0 0
|
margin 0 .5em 0 0
|
||||||
padding 0
|
padding 0
|
||||||
overflow hidden
|
overflow hidden
|
||||||
color isDark ? #fff : #627079
|
color var(--noteHeaderName)
|
||||||
font-size 1em
|
font-size 1em
|
||||||
font-weight bold
|
font-weight bold
|
||||||
text-decoration none
|
text-decoration none
|
||||||
|
|
@ -82,19 +80,19 @@ root(isDark)
|
||||||
margin 0 .5em 0 0
|
margin 0 .5em 0 0
|
||||||
padding 1px 6px
|
padding 1px 6px
|
||||||
font-size 80%
|
font-size 80%
|
||||||
color isDark ? #758188 : #aaa
|
color var(--noteHeaderBadgeFg)
|
||||||
border solid 1px isDark ? #57616f : #ddd
|
background var(--noteHeaderBadgeBg)
|
||||||
border-radius 3px
|
border-radius 3px
|
||||||
|
|
||||||
&.is-admin
|
&.is-admin
|
||||||
border-color isDark ? #d42c41 : #f56a7b
|
background var(--noteHeaderAdminBg)
|
||||||
color isDark ? #d42c41 : #f56a7b
|
color var(--noteHeaderAdminFg)
|
||||||
|
|
||||||
> .username
|
> .username
|
||||||
margin 0 .5em 0 0
|
margin 0 .5em 0 0
|
||||||
overflow hidden
|
overflow hidden
|
||||||
text-overflow ellipsis
|
text-overflow ellipsis
|
||||||
color isDark ? #606984 : #ccc
|
color var(--noteHeaderAcct)
|
||||||
flex-shrink 2147483647
|
flex-shrink 2147483647
|
||||||
|
|
||||||
> .info
|
> .info
|
||||||
|
|
@ -102,7 +100,7 @@ root(isDark)
|
||||||
font-size 0.9em
|
font-size 0.9em
|
||||||
|
|
||||||
> *
|
> *
|
||||||
color isDark ? #606984 : #c0c0c0
|
color var(--noteHeaderInfo)
|
||||||
|
|
||||||
> .mobile
|
> .mobile
|
||||||
margin-right 8px
|
margin-right 8px
|
||||||
|
|
@ -110,15 +108,9 @@ root(isDark)
|
||||||
> .app
|
> .app
|
||||||
margin-right 8px
|
margin-right 8px
|
||||||
padding-right 8px
|
padding-right 8px
|
||||||
border-right solid 1px isDark ? #1c2023 : #eaeaea
|
border-right solid 1px var(--faceDivider)
|
||||||
|
|
||||||
> .visibility
|
> .visibility
|
||||||
margin-left 8px
|
margin-left 8px
|
||||||
|
|
||||||
.bvonvjxbwzaiskogyhbwgyxvcgserpmu[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.bvonvjxbwzaiskogyhbwgyxvcgserpmu:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -68,9 +68,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.mk-poll-editor
|
||||||
|
|
||||||
root(isDark)
|
|
||||||
padding 8px
|
padding 8px
|
||||||
|
|
||||||
> .caution
|
> .caution
|
||||||
|
|
@ -103,49 +101,43 @@ root(isDark)
|
||||||
padding 6px 8px
|
padding 6px 8px
|
||||||
width 300px
|
width 300px
|
||||||
font-size 14px
|
font-size 14px
|
||||||
color isDark ? #fff : #000
|
color var(--inputText)
|
||||||
background isDark ? #191b22 : #fff
|
background var(--pollEditorInputBg)
|
||||||
border solid 1px rgba($theme-color, 0.1)
|
border solid 1px var(--primaryAlpha01)
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
border-color rgba($theme-color, 0.2)
|
border-color var(--primaryAlpha02)
|
||||||
|
|
||||||
&:focus
|
&:focus
|
||||||
border-color rgba($theme-color, 0.5)
|
border-color var(--primaryAlpha05)
|
||||||
|
|
||||||
> button
|
> button
|
||||||
padding 4px 8px
|
padding 4px 8px
|
||||||
color rgba($theme-color, 0.4)
|
color var(--primaryAlpha04)
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
color rgba($theme-color, 0.6)
|
color var(--primaryAlpha06)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
color darken($theme-color, 30%)
|
color var(--primaryDarken30)
|
||||||
|
|
||||||
> .add
|
> .add
|
||||||
margin 8px 0 0 0
|
margin 8px 0 0 0
|
||||||
vertical-align top
|
vertical-align top
|
||||||
color $theme-color
|
color var(--primary)
|
||||||
|
|
||||||
> .destroy
|
> .destroy
|
||||||
position absolute
|
position absolute
|
||||||
top 0
|
top 0
|
||||||
right 0
|
right 0
|
||||||
padding 4px 8px
|
padding 4px 8px
|
||||||
color rgba($theme-color, 0.4)
|
color var(--primaryAlpha04)
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
color rgba($theme-color, 0.6)
|
color var(--primaryAlpha06)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
color darken($theme-color, 30%)
|
color var(--primaryDarken30)
|
||||||
|
|
||||||
.mk-poll-editor[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.mk-poll-editor:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -67,10 +67,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.mk-poll
|
||||||
|
|
||||||
root(isDark)
|
|
||||||
|
|
||||||
> ul
|
> ul
|
||||||
display block
|
display block
|
||||||
margin 0
|
margin 0
|
||||||
|
|
@ -82,8 +79,8 @@ root(isDark)
|
||||||
margin 4px 0
|
margin 4px 0
|
||||||
padding 4px 8px
|
padding 4px 8px
|
||||||
width 100%
|
width 100%
|
||||||
color isDark ? #fff : #000
|
color var(--pollChoiceText)
|
||||||
border solid 1px isDark ? #5e636f : #eee
|
border solid 1px var(--pollChoiceBorder)
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
overflow hidden
|
overflow hidden
|
||||||
cursor pointer
|
cursor pointer
|
||||||
|
|
@ -99,7 +96,7 @@ root(isDark)
|
||||||
top 0
|
top 0
|
||||||
left 0
|
left 0
|
||||||
height 100%
|
height 100%
|
||||||
background $theme-color
|
background var(--primary)
|
||||||
transition width 1s ease
|
transition width 1s ease
|
||||||
|
|
||||||
> span
|
> span
|
||||||
|
|
@ -110,7 +107,7 @@ root(isDark)
|
||||||
margin-left 4px
|
margin-left 4px
|
||||||
|
|
||||||
> p
|
> p
|
||||||
color isDark ? #a3aebf : #000
|
color var(--text)
|
||||||
|
|
||||||
a
|
a
|
||||||
color inherit
|
color inherit
|
||||||
|
|
@ -125,10 +122,4 @@ root(isDark)
|
||||||
&:active
|
&:active
|
||||||
background transparent
|
background transparent
|
||||||
|
|
||||||
.mk-poll[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.mk-poll:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -210,11 +210,9 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
|
||||||
|
|
||||||
$border-color = rgba(27, 31, 35, 0.15)
|
$border-color = rgba(27, 31, 35, 0.15)
|
||||||
|
|
||||||
root(isDark)
|
.mk-reaction-picker
|
||||||
position initial
|
position initial
|
||||||
|
|
||||||
> .backdrop
|
> .backdrop
|
||||||
|
|
@ -224,11 +222,11 @@ root(isDark)
|
||||||
z-index 10000
|
z-index 10000
|
||||||
width 100%
|
width 100%
|
||||||
height 100%
|
height 100%
|
||||||
background isDark ? rgba(#000, 0.4) : rgba(#000, 0.1)
|
background var(--modalBackdrop)
|
||||||
opacity 0
|
opacity 0
|
||||||
|
|
||||||
> .popover
|
> .popover
|
||||||
$bgcolor = isDark ? #2c303c : #fff
|
$bgcolor = var(--popupBg)
|
||||||
position absolute
|
position absolute
|
||||||
z-index 10001
|
z-index 10001
|
||||||
background $bgcolor
|
background $bgcolor
|
||||||
|
|
@ -281,8 +279,8 @@ root(isDark)
|
||||||
margin 0
|
margin 0
|
||||||
padding 8px 10px
|
padding 8px 10px
|
||||||
font-size 14px
|
font-size 14px
|
||||||
color isDark ? #d6dce2 : #586069
|
color var(--popupFg)
|
||||||
border-bottom solid 1px isDark ? #1c2023 : #e1e4e8
|
border-bottom solid 1px var(--faceDivider)
|
||||||
|
|
||||||
> div
|
> div
|
||||||
padding 4px
|
padding 4px
|
||||||
|
|
@ -301,7 +299,7 @@ root(isDark)
|
||||||
right 0
|
right 0
|
||||||
bottom 0
|
bottom 0
|
||||||
left 0
|
left 0
|
||||||
border 2px solid rgba($theme-color, 0.3)
|
border 2px solid var(--primaryAlpha03)
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
|
|
||||||
> button
|
> button
|
||||||
|
|
@ -312,16 +310,10 @@ root(isDark)
|
||||||
border-radius 2px
|
border-radius 2px
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background isDark ? #252731 : #eee
|
background var(--reactionPickerButtonHoverBg)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
background $theme-color
|
background var(--primary)
|
||||||
box-shadow inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15)
|
box-shadow inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15)
|
||||||
|
|
||||||
.mk-reaction-picker[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.mk-reaction-picker:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -39,10 +39,9 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
root(isDark)
|
.mk-reactions-viewer
|
||||||
$borderColor = isDark ? #5e6673 : #eee
|
border-top dashed 1px var(--reactionViewerBorder)
|
||||||
border-top dashed 1px $borderColor
|
border-bottom dashed 1px var(--reactionViewerBorder)
|
||||||
border-bottom dashed 1px $borderColor
|
|
||||||
margin 4px 0
|
margin 4px 0
|
||||||
|
|
||||||
&:empty
|
&:empty
|
||||||
|
|
@ -60,12 +59,6 @@ root(isDark)
|
||||||
> span
|
> span
|
||||||
margin-left 4px
|
margin-left 4px
|
||||||
font-size 1.2em
|
font-size 1.2em
|
||||||
color isDark ? #d1d5dc : #444
|
color var(--text)
|
||||||
|
|
||||||
.mk-reactions-viewer[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.mk-reactions-viewer:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -68,7 +68,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
|
||||||
|
|
||||||
.mk-signin
|
.mk-signin
|
||||||
color #555
|
color #555
|
||||||
|
|
|
||||||
|
|
@ -151,7 +151,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
|
||||||
|
|
||||||
.mk-signup
|
.mk-signup
|
||||||
min-width 302px
|
min-width 302px
|
||||||
|
|
|
||||||
|
|
@ -1,199 +0,0 @@
|
||||||
<template>
|
|
||||||
<div
|
|
||||||
class="mk-switch"
|
|
||||||
:class="{ disabled, checked }"
|
|
||||||
role="switch"
|
|
||||||
:aria-checked="checked"
|
|
||||||
:aria-disabled="disabled"
|
|
||||||
@click="switchValue"
|
|
||||||
@mouseover="mouseenter"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
@change="handleChange"
|
|
||||||
ref="input"
|
|
||||||
:disabled="disabled"
|
|
||||||
@keydown.enter="switchValue"
|
|
||||||
>
|
|
||||||
<span class="button">
|
|
||||||
<span :style="{ transform }"></span>
|
|
||||||
</span>
|
|
||||||
<span class="label">
|
|
||||||
<span :aria-hidden="!checked">{{ text }}</span>
|
|
||||||
<p :aria-hidden="!checked">
|
|
||||||
<slot></slot>
|
|
||||||
</p>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import Vue from 'vue';
|
|
||||||
export default Vue.extend({
|
|
||||||
props: {
|
|
||||||
value: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
disabled: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
text: String
|
|
||||||
},/*
|
|
||||||
created() {
|
|
||||||
if (!~[true, false].indexOf(this.value)) {
|
|
||||||
this.$emit('input', false);
|
|
||||||
}
|
|
||||||
},*/
|
|
||||||
computed: {
|
|
||||||
checked(): boolean {
|
|
||||||
return this.value;
|
|
||||||
},
|
|
||||||
transform(): string {
|
|
||||||
return this.checked ? 'translate3d(20px, 0, 0)' : '';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
value() {
|
|
||||||
(this.$el).style.transition = 'all 0.3s';
|
|
||||||
(this.$refs.input as any).checked = this.checked;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
(this.$refs.input as any).checked = this.checked;
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
mouseenter() {
|
|
||||||
(this.$el).style.transition = 'all 0s';
|
|
||||||
},
|
|
||||||
handleChange() {
|
|
||||||
(this.$el).style.transition = 'all 0.3s';
|
|
||||||
this.$emit('input', !this.checked);
|
|
||||||
this.$emit('change', !this.checked);
|
|
||||||
this.$nextTick(() => {
|
|
||||||
// set input's checked property
|
|
||||||
// in case parent refuses to change component's value
|
|
||||||
(this.$refs.input as any).checked = this.checked;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
switchValue() {
|
|
||||||
!this.disabled && this.handleChange();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
|
||||||
@import '~const.styl'
|
|
||||||
|
|
||||||
root(isDark)
|
|
||||||
display flex
|
|
||||||
margin 12px 0
|
|
||||||
cursor pointer
|
|
||||||
transition all 0.3s
|
|
||||||
|
|
||||||
> *
|
|
||||||
user-select none
|
|
||||||
|
|
||||||
&.disabled
|
|
||||||
opacity 0.6
|
|
||||||
cursor not-allowed
|
|
||||||
|
|
||||||
&.checked
|
|
||||||
> .button
|
|
||||||
background-color $theme-color
|
|
||||||
border-color $theme-color
|
|
||||||
|
|
||||||
> .label
|
|
||||||
> span
|
|
||||||
color $theme-color
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
> .label
|
|
||||||
> span
|
|
||||||
color darken($theme-color, 10%)
|
|
||||||
|
|
||||||
> .button
|
|
||||||
background darken($theme-color, 10%)
|
|
||||||
border-color darken($theme-color, 10%)
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
> .label
|
|
||||||
> span
|
|
||||||
color isDark ? #fff : #2e3338
|
|
||||||
|
|
||||||
> .button
|
|
||||||
$color = isDark ? #15181d : #ced2da
|
|
||||||
background $color
|
|
||||||
border-color $color
|
|
||||||
|
|
||||||
> input
|
|
||||||
position absolute
|
|
||||||
width 0
|
|
||||||
height 0
|
|
||||||
opacity 0
|
|
||||||
margin 0
|
|
||||||
|
|
||||||
&:focus + .button
|
|
||||||
&:after
|
|
||||||
content ""
|
|
||||||
pointer-events none
|
|
||||||
position absolute
|
|
||||||
top -5px
|
|
||||||
right -5px
|
|
||||||
bottom -5px
|
|
||||||
left -5px
|
|
||||||
border 2px solid rgba($theme-color, 0.3)
|
|
||||||
border-radius 14px
|
|
||||||
|
|
||||||
> .button
|
|
||||||
$color = isDark ? #1c1f25 : #dcdfe6
|
|
||||||
|
|
||||||
display inline-block
|
|
||||||
margin 0
|
|
||||||
width 40px
|
|
||||||
min-width 40px
|
|
||||||
height 20px
|
|
||||||
min-height 20px
|
|
||||||
background $color
|
|
||||||
border 1px solid $color
|
|
||||||
outline none
|
|
||||||
border-radius 10px
|
|
||||||
transition inherit
|
|
||||||
|
|
||||||
> *
|
|
||||||
position absolute
|
|
||||||
top 1px
|
|
||||||
left 1px
|
|
||||||
border-radius 100%
|
|
||||||
transition transform 0.3s
|
|
||||||
width 16px
|
|
||||||
height 16px
|
|
||||||
background-color #fff
|
|
||||||
|
|
||||||
> .label
|
|
||||||
margin-left 8px
|
|
||||||
display block
|
|
||||||
font-size 15px
|
|
||||||
cursor pointer
|
|
||||||
transition inherit
|
|
||||||
|
|
||||||
> span
|
|
||||||
display block
|
|
||||||
line-height 20px
|
|
||||||
color isDark ? #c4ccd2 : #4a535a
|
|
||||||
transition inherit
|
|
||||||
|
|
||||||
> p
|
|
||||||
margin 0
|
|
||||||
//font-size 90%
|
|
||||||
color isDark ? #78858e : #9daab3
|
|
||||||
|
|
||||||
.mk-switch[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.mk-switch:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
@ -63,7 +63,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
root(isDark)
|
.jtivnzhfwquxpsfidertopbmwmchmnmo
|
||||||
height 100%
|
height 100%
|
||||||
width 100%
|
width 100%
|
||||||
|
|
||||||
|
|
@ -81,10 +81,4 @@ root(isDark)
|
||||||
height 100%
|
height 100%
|
||||||
width 100%
|
width 100%
|
||||||
|
|
||||||
.jtivnzhfwquxpsfidertopbmwmchmnmo[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.jtivnzhfwquxpsfidertopbmwmchmnmo:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
179
src/client/app/common/views/components/theme.vue
Normal file
179
src/client/app/common/views/components/theme.vue
Normal file
|
|
@ -0,0 +1,179 @@
|
||||||
|
<template>
|
||||||
|
<div class="nicnklzforebnpfgasiypmpdaaglujqm">
|
||||||
|
<label>
|
||||||
|
<span>%i18n:@light-theme%</span>
|
||||||
|
<ui-select v-model="light" placeholder="%i18n:@light-theme%">
|
||||||
|
<option v-for="x in themes" :value="x.meta.id" :key="x.meta.id">{{ x.meta.name }}</option>
|
||||||
|
</ui-select>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
<span>%i18n:@dark-theme%</span>
|
||||||
|
<ui-select v-model="dark" placeholder="%i18n:@dark-theme%">
|
||||||
|
<option v-for="x in themes" :value="x.meta.id" :key="x.meta.id">{{ x.meta.name }}</option>
|
||||||
|
</ui-select>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<details class="creator">
|
||||||
|
<summary>%i18n:@create-a-theme%</summary>
|
||||||
|
<div>
|
||||||
|
<span>%i18n:@base-theme%:</span>
|
||||||
|
<ui-radio v-model="myThemeBase" value="light">%i18n:@base-theme-light%</ui-radio>
|
||||||
|
<ui-radio v-model="myThemeBase" value="dark">%i18n:@base-theme-dark%</ui-radio>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<ui-input v-model="myThemeName">
|
||||||
|
<span>%i18n:@theme-name%</span>
|
||||||
|
</ui-input>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div style="padding-bottom:8px;">%i18n:@primary-color%:</div>
|
||||||
|
<color-picker v-model="myThemePrimary"/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div style="padding-bottom:8px;">%i18n:@secondary-color%:</div>
|
||||||
|
<color-picker v-model="myThemeSecondary"/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div style="padding-bottom:8px;">%i18n:@text-color%:</div>
|
||||||
|
<color-picker v-model="myThemeText"/>
|
||||||
|
</div>
|
||||||
|
<ui-button @click="preview()">%i18n:@preview-created-theme%</ui-button>
|
||||||
|
<ui-button primary @click="gen()">%i18n:@save-created-theme%</ui-button>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary>%i18n:@install-a-theme%</summary>
|
||||||
|
<ui-textarea v-model="installThemeCode">
|
||||||
|
<span>%i18n:@theme-code%</span>
|
||||||
|
</ui-textarea>
|
||||||
|
<ui-button @click="install()">%i18n:@install%</ui-button>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary>%i18n:@installed-themes%</summary>
|
||||||
|
<ui-select v-model="selectedInstalledTheme" placeholder="%i18n:@select-theme%">
|
||||||
|
<option v-for="x in installedThemes" :value="x.meta.id" :key="x.meta.id">{{ x.meta.name }}</option>
|
||||||
|
</ui-select>
|
||||||
|
<ui-textarea readonly :value="selectedInstalledThemeCode">
|
||||||
|
<span>%i18n:@theme-code%</span>
|
||||||
|
</ui-textarea>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import Vue from 'vue';
|
||||||
|
import { apiUrl, docsUrl } from '../../../config';
|
||||||
|
import { lightTheme, darkTheme, builtinThemes, applyTheme } from '../../../theme';
|
||||||
|
import { Chrome } from 'vue-color';
|
||||||
|
import * as uuid from 'uuid';
|
||||||
|
import * as tinycolor from 'tinycolor2';
|
||||||
|
|
||||||
|
export default Vue.extend({
|
||||||
|
components: {
|
||||||
|
ColorPicker: Chrome
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
installThemeCode: null,
|
||||||
|
selectedInstalledTheme: null,
|
||||||
|
myThemeBase: 'light',
|
||||||
|
myThemeName: '',
|
||||||
|
myThemePrimary: lightTheme.meta.vars.primary,
|
||||||
|
myThemeSecondary: lightTheme.meta.vars.secondary,
|
||||||
|
myThemeText: lightTheme.meta.vars.text
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
themes(): any {
|
||||||
|
return this.$store.state.device.themes.concat(builtinThemes);
|
||||||
|
},
|
||||||
|
|
||||||
|
installedThemes(): any {
|
||||||
|
return this.$store.state.device.themes;
|
||||||
|
},
|
||||||
|
|
||||||
|
light: {
|
||||||
|
get() { return this.$store.state.device.lightTheme; },
|
||||||
|
set(value) { this.$store.commit('device/set', { key: 'lightTheme', value }); }
|
||||||
|
},
|
||||||
|
|
||||||
|
dark: {
|
||||||
|
get() { return this.$store.state.device.darkTheme; },
|
||||||
|
set(value) { this.$store.commit('device/set', { key: 'darkTheme', value }); }
|
||||||
|
},
|
||||||
|
|
||||||
|
selectedInstalledThemeCode() {
|
||||||
|
if (this.selectedInstalledTheme == null) return null;
|
||||||
|
return JSON.stringify(this.installedThemes.find(x => x.meta.id == this.selectedInstalledTheme));
|
||||||
|
},
|
||||||
|
|
||||||
|
myTheme(): any {
|
||||||
|
return {
|
||||||
|
meta: {
|
||||||
|
name: this.myThemeName,
|
||||||
|
author: this.$store.state.i.name,
|
||||||
|
base: this.myThemeBase,
|
||||||
|
vars: {
|
||||||
|
primary: tinycolor(typeof this.myThemePrimary == 'string' ? this.myThemePrimary : this.myThemePrimary.rgba).toRgbString(),
|
||||||
|
secondary: tinycolor(typeof this.myThemeSecondary == 'string' ? this.myThemeSecondary : this.myThemeSecondary.rgba).toRgbString(),
|
||||||
|
text: tinycolor(typeof this.myThemeText == 'string' ? this.myThemeText : this.myThemeText.rgba).toRgbString()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
myThemeBase(v) {
|
||||||
|
const theme = v == 'light' ? lightTheme : darkTheme;
|
||||||
|
this.myThemePrimary = theme.meta.vars.primary;
|
||||||
|
this.myThemeSecondary = theme.meta.vars.secondary;
|
||||||
|
this.myThemeText = theme.meta.vars.text;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
install() {
|
||||||
|
const theme = JSON.parse(this.installThemeCode);
|
||||||
|
if (theme.meta == null || theme.meta.id == null) {
|
||||||
|
alert('%i18n:@invalid-theme%');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (this.$store.state.device.themes.some(t => t.meta.id == theme.meta.id)) {
|
||||||
|
alert('%i18n:@already-installed%');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const themes = this.$store.state.device.themes.concat(theme);
|
||||||
|
this.$store.commit('device/set', {
|
||||||
|
key: 'themes', value: themes
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
preview() {
|
||||||
|
applyTheme(this.myTheme, false);
|
||||||
|
},
|
||||||
|
|
||||||
|
gen() {
|
||||||
|
const theme = this.myTheme;
|
||||||
|
theme.meta.id = uuid();
|
||||||
|
const themes = this.$store.state.device.themes.concat(theme);
|
||||||
|
this.$store.commit('device/set', {
|
||||||
|
key: 'themes', value: themes
|
||||||
|
});
|
||||||
|
alert('%i18n:@saved%');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" scoped>
|
||||||
|
.nicnklzforebnpfgasiypmpdaaglujqm
|
||||||
|
> .creator
|
||||||
|
> div
|
||||||
|
padding 16px 0
|
||||||
|
border-bottom solid 1px var(--faceDivider)
|
||||||
|
</style>
|
||||||
|
|
@ -49,13 +49,14 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
root(isDark)
|
.csqvmxybqbycalfhkxvyfrgbrdalkaoc
|
||||||
> .fetching
|
> .fetching
|
||||||
> .empty
|
> .empty
|
||||||
margin 0
|
margin 0
|
||||||
padding 16px
|
padding 16px
|
||||||
text-align center
|
text-align center
|
||||||
color #aaa
|
color var(--text)
|
||||||
|
opacity 0.7
|
||||||
|
|
||||||
> [data-fa]
|
> [data-fa]
|
||||||
margin-right 4px
|
margin-right 4px
|
||||||
|
|
@ -70,13 +71,13 @@ root(isDark)
|
||||||
padding 14px 16px
|
padding 14px 16px
|
||||||
|
|
||||||
&:not(:last-child)
|
&:not(:last-child)
|
||||||
border-bottom solid 1px isDark ? #393f4f : #eee
|
border-bottom solid 1px var(--faceDivider)
|
||||||
|
|
||||||
> .tag
|
> .tag
|
||||||
flex 1
|
flex 1
|
||||||
overflow hidden
|
overflow hidden
|
||||||
font-size 14px
|
font-size 14px
|
||||||
color isDark ? #9baec8 : #65727b
|
color var(--text)
|
||||||
|
|
||||||
> a
|
> a
|
||||||
display block
|
display block
|
||||||
|
|
@ -94,10 +95,4 @@ root(isDark)
|
||||||
> .chart
|
> .chart
|
||||||
height 30px
|
height 30px
|
||||||
|
|
||||||
.csqvmxybqbycalfhkxvyfrgbrdalkaoc[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.csqvmxybqbycalfhkxvyfrgbrdalkaoc:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -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,70 +11,90 @@ 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() {
|
||||||
return {
|
return {
|
||||||
styl: 'fill'
|
styl: 'fill'
|
||||||
};
|
};
|
||||||
},
|
|
||||||
inject: {
|
|
||||||
isCardChild: { default: false }
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
if (this.isCardChild) {
|
|
||||||
this.styl = 'line';
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.dmtdnykelhudezerjlfpbhgovrgnqqgr
|
||||||
|
|
||||||
root(isDark, fill)
|
|
||||||
> button
|
|
||||||
display block
|
display block
|
||||||
width 100%
|
width 100%
|
||||||
|
min-height 40px
|
||||||
margin 0
|
margin 0
|
||||||
padding 0
|
padding 0
|
||||||
font-weight bold
|
font-weight normal
|
||||||
font-size 16px
|
font-size 16px
|
||||||
line-height 44px
|
|
||||||
border none
|
border none
|
||||||
border-radius 6px
|
border-radius 6px
|
||||||
outline none
|
outline none
|
||||||
box-shadow none
|
box-shadow none
|
||||||
|
|
||||||
if fill
|
&:focus
|
||||||
color $theme-color-foreground
|
&:after
|
||||||
background $theme-color
|
content ""
|
||||||
|
pointer-events none
|
||||||
|
position absolute
|
||||||
|
top -5px
|
||||||
|
right -5px
|
||||||
|
bottom -5px
|
||||||
|
left -5px
|
||||||
|
border 2px solid var(--primaryAlpha03)
|
||||||
|
border-radius 10px
|
||||||
|
|
||||||
|
&:not(.inline) + .dmtdnykelhudezerjlfpbhgovrgnqqgr
|
||||||
|
margin-top 16px
|
||||||
|
|
||||||
|
&.inline
|
||||||
|
display inline-block
|
||||||
|
width auto
|
||||||
|
|
||||||
|
&.primary
|
||||||
|
font-weight bold
|
||||||
|
|
||||||
|
&.fill
|
||||||
|
color var(--text)
|
||||||
|
background var(--buttonBg)
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background lighten($theme-color, 5%)
|
background var(--buttonHoverBg)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
background darken($theme-color, 5%)
|
background var(--buttonActiveBg)
|
||||||
else
|
|
||||||
color $theme-color
|
&.primary
|
||||||
|
color var(--primaryForeground)
|
||||||
|
background var(--primary)
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background var(--primaryLighten5)
|
||||||
|
|
||||||
|
&:active
|
||||||
|
background var(--primaryDarken5)
|
||||||
|
|
||||||
|
&:not(.fill)
|
||||||
|
color var(--primary)
|
||||||
background none
|
background none
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
color darken($theme-color, 5%)
|
color var(--primaryDarken5)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
background rgba($theme-color, 0.3)
|
background var(--primaryAlpha03)
|
||||||
|
|
||||||
.ui-button[data-darkmode]
|
|
||||||
&.fill
|
|
||||||
root(true, true)
|
|
||||||
&:not(.fill)
|
|
||||||
root(true, false)
|
|
||||||
|
|
||||||
.ui-button:not([data-darkmode])
|
|
||||||
&.fill
|
|
||||||
root(false, true)
|
|
||||||
&:not(.fill)
|
|
||||||
root(false, false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -20,26 +20,24 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.ui-card
|
||||||
|
|
||||||
root(isDark)
|
|
||||||
margin 16px
|
margin 16px
|
||||||
color isDark ? #fff : #000
|
color var(--faceText)
|
||||||
background isDark ? #282C37 : #fff
|
background var(--face)
|
||||||
box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
|
box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
|
||||||
|
|
||||||
> header
|
> header
|
||||||
padding 16px
|
padding 16px
|
||||||
font-weight bold
|
font-weight bold
|
||||||
font-size 20px
|
font-size 20px
|
||||||
color isDark ? #fff : #444
|
color var(--faceText)
|
||||||
|
|
||||||
@media (min-width 500px)
|
@media (min-width 500px)
|
||||||
padding 24px 32px
|
padding 24px 32px
|
||||||
|
|
||||||
> section
|
> section
|
||||||
padding 20px 16px
|
padding 20px 16px
|
||||||
border-top solid 1px isDark ? rgba(#000, 0.3) : rgba(#000, 0.1)
|
border-top solid 1px var(--faceDivider)
|
||||||
|
|
||||||
@media (min-width 500px)
|
@media (min-width 500px)
|
||||||
padding 32px
|
padding 32px
|
||||||
|
|
@ -50,12 +48,5 @@ root(isDark)
|
||||||
> header
|
> header
|
||||||
margin-bottom 16px
|
margin-bottom 16px
|
||||||
font-weight bold
|
font-weight bold
|
||||||
color isDark ? #fff : #444
|
color var(--faceText)
|
||||||
|
|
||||||
.ui-card[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.ui-card:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
|
||||||
|
|
||||||
.ui-form
|
.ui-form
|
||||||
> fieldset
|
> fieldset
|
||||||
|
|
|
||||||
|
|
@ -25,9 +25,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.nvemkhtwcnnpkdrwfcbzuwhfulejhmzg
|
||||||
|
|
||||||
root(isDark)
|
|
||||||
display inline-block
|
display inline-block
|
||||||
|
|
||||||
& + .nvemkhtwcnnpkdrwfcbzuwhfulejhmzg
|
& + .nvemkhtwcnnpkdrwfcbzuwhfulejhmzg
|
||||||
|
|
@ -38,11 +36,11 @@ root(isDark)
|
||||||
margin 0
|
margin 0
|
||||||
padding 12px 20px
|
padding 12px 20px
|
||||||
font-size 14px
|
font-size 14px
|
||||||
border 1px solid isDark ? #6d727d : #dcdfe6
|
border 1px solid var(--formButtonBorder)
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
outline none
|
outline none
|
||||||
box-shadow none
|
box-shadow none
|
||||||
color isDark ? #fff : #606266
|
color var(--text)
|
||||||
transition 0.1s
|
transition 0.1s
|
||||||
|
|
||||||
*
|
*
|
||||||
|
|
@ -50,40 +48,34 @@ root(isDark)
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
&:focus
|
&:focus
|
||||||
color $theme-color
|
color var(--primary)
|
||||||
background rgba($theme-color, isDark ? 0.2 : 0.12)
|
background var(--formButtonHoverBg)
|
||||||
border-color rgba($theme-color, isDark ? 0.5 : 0.3)
|
border-color var(--formButtonHoverBorder)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
color darken($theme-color, 20%)
|
color var(--primaryDarken20)
|
||||||
background rgba($theme-color, 0.12)
|
background var(--formButtonActiveBg)
|
||||||
border-color $theme-color
|
border-color var(--primary)
|
||||||
transition all 0s
|
transition all 0s
|
||||||
|
|
||||||
&.primary
|
&.primary
|
||||||
> button
|
> button
|
||||||
border 1px solid $theme-color
|
border 1px solid var(--primary)
|
||||||
background $theme-color
|
background var(--primary)
|
||||||
color $theme-color-foreground
|
color var(--primaryForeground)
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
&:focus
|
&:focus
|
||||||
background lighten($theme-color, 20%)
|
background var(--primaryLighten20)
|
||||||
border-color lighten($theme-color, 20%)
|
border-color var(--primaryLighten20)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
background darken($theme-color, 20%)
|
background var(--primaryDarken20)
|
||||||
border-color darken($theme-color, 20%)
|
border-color var(--primaryDarken20)
|
||||||
transition all 0s
|
transition all 0s
|
||||||
|
|
||||||
&.round
|
&.round
|
||||||
> button
|
> button
|
||||||
border-radius 64px
|
border-radius 64px
|
||||||
|
|
||||||
.nvemkhtwcnnpkdrwfcbzuwhfulejhmzg[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.nvemkhtwcnnpkdrwfcbzuwhfulejhmzg:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -49,9 +49,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.uywduthvrdnlpsvsjkqigicixgyfctto
|
||||||
|
|
||||||
root(isDark)
|
|
||||||
display inline-flex
|
display inline-flex
|
||||||
margin 0 16px 0 0
|
margin 0 16px 0 0
|
||||||
cursor pointer
|
cursor pointer
|
||||||
|
|
@ -62,7 +60,7 @@ root(isDark)
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
> .button
|
> .button
|
||||||
border solid 2px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
|
border solid 2px var(--inputLabel)
|
||||||
|
|
||||||
&.disabled
|
&.disabled
|
||||||
opacity 0.6
|
opacity 0.6
|
||||||
|
|
@ -70,15 +68,15 @@ root(isDark)
|
||||||
|
|
||||||
&.checked
|
&.checked
|
||||||
> .button
|
> .button
|
||||||
border-color $theme-color
|
border-color var(--primary)
|
||||||
|
|
||||||
&:after
|
&:after
|
||||||
background-color $theme-color
|
background-color var(--primary)
|
||||||
transform scale(1)
|
transform scale(1)
|
||||||
opacity 1
|
opacity 1
|
||||||
|
|
||||||
> .label
|
> .label
|
||||||
color $theme-color
|
color var(--primary)
|
||||||
|
|
||||||
> input
|
> input
|
||||||
position absolute
|
position absolute
|
||||||
|
|
@ -93,7 +91,7 @@ root(isDark)
|
||||||
width 20px
|
width 20px
|
||||||
height 20px
|
height 20px
|
||||||
background none
|
background none
|
||||||
border solid 2px isDark ? rgba(#fff, 0.6) : rgba(#000, 0.4)
|
border solid 2px var(--radioBorder)
|
||||||
border-radius 100%
|
border-radius 100%
|
||||||
transition inherit
|
transition inherit
|
||||||
|
|
||||||
|
|
@ -117,10 +115,4 @@ root(isDark)
|
||||||
line-height 20px
|
line-height 20px
|
||||||
cursor pointer
|
cursor pointer
|
||||||
|
|
||||||
.uywduthvrdnlpsvsjkqigicixgyfctto[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.uywduthvrdnlpsvsjkqigicixgyfctto:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -155,9 +155,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
root(fill)
|
||||||
|
|
||||||
root(isDark, fill)
|
|
||||||
margin 32px 0
|
margin 32px 0
|
||||||
|
|
||||||
> .icon
|
> .icon
|
||||||
|
|
@ -167,7 +165,7 @@ root(isDark, fill)
|
||||||
width 24px
|
width 24px
|
||||||
text-align center
|
text-align center
|
||||||
line-height 32px
|
line-height 32px
|
||||||
color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
|
color var(--inputLabel)
|
||||||
|
|
||||||
&:not(:empty) + .input
|
&:not(:empty) + .input
|
||||||
margin-left 28px
|
margin-left 28px
|
||||||
|
|
@ -183,7 +181,7 @@ root(isDark, fill)
|
||||||
left 0
|
left 0
|
||||||
right 0
|
right 0
|
||||||
height 1px
|
height 1px
|
||||||
background isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
|
background var(--inputBorder)
|
||||||
|
|
||||||
&:after
|
&:after
|
||||||
content ''
|
content ''
|
||||||
|
|
@ -193,7 +191,7 @@ root(isDark, fill)
|
||||||
left 0
|
left 0
|
||||||
right 0
|
right 0
|
||||||
height 2px
|
height 2px
|
||||||
background $theme-color
|
background var(--primary)
|
||||||
opacity 0
|
opacity 0
|
||||||
transform scaleX(0.12)
|
transform scaleX(0.12)
|
||||||
transition border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)
|
transition border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)
|
||||||
|
|
@ -242,7 +240,7 @@ root(isDark, fill)
|
||||||
transition-duration 0.3s
|
transition-duration 0.3s
|
||||||
font-size 16px
|
font-size 16px
|
||||||
line-height 32px
|
line-height 32px
|
||||||
color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
|
color var(--inputLabel)
|
||||||
pointer-events none
|
pointer-events none
|
||||||
//will-change transform
|
//will-change transform
|
||||||
transform-origin top left
|
transform-origin top left
|
||||||
|
|
@ -257,7 +255,7 @@ root(isDark, fill)
|
||||||
font-weight fill ? bold : normal
|
font-weight fill ? bold : normal
|
||||||
font-size 16px
|
font-size 16px
|
||||||
line-height 32px
|
line-height 32px
|
||||||
color isDark ? #fff : #000
|
color var(--inputText)
|
||||||
background transparent
|
background transparent
|
||||||
border none
|
border none
|
||||||
border-radius 0
|
border-radius 0
|
||||||
|
|
@ -280,7 +278,7 @@ root(isDark, fill)
|
||||||
top 0
|
top 0
|
||||||
font-size 16px
|
font-size 16px
|
||||||
line-height fill ? 44px : 32px
|
line-height fill ? 44px : 32px
|
||||||
color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
|
color var(--inputLabel)
|
||||||
pointer-events none
|
pointer-events none
|
||||||
|
|
||||||
&:empty
|
&:empty
|
||||||
|
|
@ -325,7 +323,7 @@ root(isDark, fill)
|
||||||
transform scaleX(1)
|
transform scaleX(1)
|
||||||
|
|
||||||
> .label
|
> .label
|
||||||
color $theme-color
|
color var(--primary)
|
||||||
|
|
||||||
&.focused
|
&.focused
|
||||||
&.filled
|
&.filled
|
||||||
|
|
@ -335,16 +333,10 @@ root(isDark, fill)
|
||||||
left 0 !important
|
left 0 !important
|
||||||
transform scale(0.75)
|
transform scale(0.75)
|
||||||
|
|
||||||
.ui-input[data-darkmode]
|
.ui-input
|
||||||
&.fill
|
&.fill
|
||||||
root(true, true)
|
root(true)
|
||||||
&:not(.fill)
|
&:not(.fill)
|
||||||
root(true, false)
|
root(false)
|
||||||
|
|
||||||
.ui-input:not([data-darkmode])
|
|
||||||
&.fill
|
|
||||||
root(false, true)
|
|
||||||
&:not(.fill)
|
|
||||||
root(false, false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -51,9 +51,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.ui-radio
|
||||||
|
|
||||||
root(isDark)
|
|
||||||
display inline-block
|
display inline-block
|
||||||
margin 0 32px 0 0
|
margin 0 32px 0 0
|
||||||
cursor pointer
|
cursor pointer
|
||||||
|
|
@ -68,10 +66,10 @@ root(isDark)
|
||||||
|
|
||||||
&.checked
|
&.checked
|
||||||
> .button
|
> .button
|
||||||
border-color $theme-color
|
border-color var(--primary)
|
||||||
|
|
||||||
&:after
|
&:after
|
||||||
background-color $theme-color
|
background-color var(--primary)
|
||||||
transform scale(1)
|
transform scale(1)
|
||||||
opacity 1
|
opacity 1
|
||||||
|
|
||||||
|
|
@ -87,7 +85,7 @@ root(isDark)
|
||||||
width 20px
|
width 20px
|
||||||
height 20px
|
height 20px
|
||||||
background none
|
background none
|
||||||
border solid 2px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
|
border solid 2px var(--inputLabel)
|
||||||
border-radius 100%
|
border-radius 100%
|
||||||
transition inherit
|
transition inherit
|
||||||
|
|
||||||
|
|
@ -111,10 +109,4 @@ root(isDark)
|
||||||
line-height 20px
|
line-height 20px
|
||||||
cursor pointer
|
cursor pointer
|
||||||
|
|
||||||
.ui-radio[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.ui-radio:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -70,9 +70,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
root(fill)
|
||||||
|
|
||||||
root(isDark, fill)
|
|
||||||
margin 32px 0
|
margin 32px 0
|
||||||
|
|
||||||
> .icon
|
> .icon
|
||||||
|
|
@ -103,7 +101,7 @@ root(isDark, fill)
|
||||||
left 0
|
left 0
|
||||||
right 0
|
right 0
|
||||||
height 1px
|
height 1px
|
||||||
background isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
|
background var(--inputBorder)
|
||||||
|
|
||||||
&:after
|
&:after
|
||||||
content ''
|
content ''
|
||||||
|
|
@ -113,7 +111,7 @@ root(isDark, fill)
|
||||||
left 0
|
left 0
|
||||||
right 0
|
right 0
|
||||||
height 2px
|
height 2px
|
||||||
background $theme-color
|
background var(--primary)
|
||||||
opacity 0
|
opacity 0
|
||||||
transform scaleX(0.12)
|
transform scaleX(0.12)
|
||||||
transition border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)
|
transition border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)
|
||||||
|
|
@ -143,7 +141,7 @@ root(isDark, fill)
|
||||||
font-weight fill ? bold : normal
|
font-weight fill ? bold : normal
|
||||||
font-size 16px
|
font-size 16px
|
||||||
height 32px
|
height 32px
|
||||||
color isDark ? #fff : #000
|
color var(--inputText)
|
||||||
background transparent
|
background transparent
|
||||||
border none
|
border none
|
||||||
border-radius 0
|
border-radius 0
|
||||||
|
|
@ -190,7 +188,7 @@ root(isDark, fill)
|
||||||
transform scaleX(1)
|
transform scaleX(1)
|
||||||
|
|
||||||
> .label
|
> .label
|
||||||
color $theme-color
|
color var(--primary)
|
||||||
|
|
||||||
&.focused
|
&.focused
|
||||||
&.filled
|
&.filled
|
||||||
|
|
@ -200,16 +198,10 @@ root(isDark, fill)
|
||||||
left 0 !important
|
left 0 !important
|
||||||
transform scale(0.75)
|
transform scale(0.75)
|
||||||
|
|
||||||
.ui-select[data-darkmode]
|
.ui-select
|
||||||
&.fill
|
&.fill
|
||||||
root(true, true)
|
root(true)
|
||||||
&:not(.fill)
|
&:not(.fill)
|
||||||
root(true, false)
|
root(false)
|
||||||
|
|
||||||
.ui-select:not([data-darkmode])
|
|
||||||
&.fill
|
|
||||||
root(false, true)
|
|
||||||
&:not(.fill)
|
|
||||||
root(false, false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,7 @@
|
||||||
<span class="label">
|
<span class="label">
|
||||||
<span :aria-hidden="!checked"><slot></slot></span>
|
<span :aria-hidden="!checked"><slot></slot></span>
|
||||||
<p :aria-hidden="!checked">
|
<p :aria-hidden="!checked">
|
||||||
<slot name="text"></slot>
|
<slot name="desc"></slot>
|
||||||
</p>
|
</p>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -56,9 +56,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.ui-switch
|
||||||
|
|
||||||
root(isDark)
|
|
||||||
display flex
|
display flex
|
||||||
margin 32px 0
|
margin 32px 0
|
||||||
cursor pointer
|
cursor pointer
|
||||||
|
|
@ -79,11 +77,11 @@ root(isDark)
|
||||||
|
|
||||||
&.checked
|
&.checked
|
||||||
> .button
|
> .button
|
||||||
background-color rgba($theme-color, 0.4)
|
background-color var(--primaryAlpha04)
|
||||||
border-color rgba($theme-color, 0.4)
|
border-color var(--primaryAlpha04)
|
||||||
|
|
||||||
> *
|
> *
|
||||||
background-color $theme-color
|
background-color var(--primary)
|
||||||
transform translateX(14px)
|
transform translateX(14px)
|
||||||
|
|
||||||
> input
|
> input
|
||||||
|
|
@ -99,7 +97,7 @@ root(isDark)
|
||||||
margin 3px 0 0 0
|
margin 3px 0 0 0
|
||||||
width 34px
|
width 34px
|
||||||
height 14px
|
height 14px
|
||||||
background isDark ? rgba(#fff, 0.15) : rgba(#000, 0.25)
|
background var(--switchTrack)
|
||||||
outline none
|
outline none
|
||||||
border-radius 14px
|
border-radius 14px
|
||||||
transition inherit
|
transition inherit
|
||||||
|
|
@ -125,18 +123,11 @@ root(isDark)
|
||||||
> span
|
> span
|
||||||
display block
|
display block
|
||||||
line-height 20px
|
line-height 20px
|
||||||
color isDark ? #c4ccd2 : rgba(#000, 0.75)
|
color currentColor
|
||||||
transition inherit
|
transition inherit
|
||||||
|
|
||||||
> p
|
> p
|
||||||
margin 0
|
margin 0
|
||||||
//font-size 90%
|
opacity 0.7
|
||||||
color isDark ? #78858e : #9daab3
|
|
||||||
|
|
||||||
.ui-switch[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.ui-switch:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -63,9 +63,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
root(fill)
|
||||||
|
|
||||||
root(isDark, fill)
|
|
||||||
margin 42px 0 32px 0
|
margin 42px 0 32px 0
|
||||||
|
|
||||||
> .input
|
> .input
|
||||||
|
|
@ -84,7 +82,7 @@ root(isDark, fill)
|
||||||
left 0
|
left 0
|
||||||
right 0
|
right 0
|
||||||
background none
|
background none
|
||||||
border solid 1px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
|
border solid 1px var(--inputBorder)
|
||||||
border-radius 3px
|
border-radius 3px
|
||||||
pointer-events none
|
pointer-events none
|
||||||
|
|
||||||
|
|
@ -97,7 +95,7 @@ root(isDark, fill)
|
||||||
left 0
|
left 0
|
||||||
right 0
|
right 0
|
||||||
background none
|
background none
|
||||||
border solid 2px $theme-color
|
border solid 2px var(--primary)
|
||||||
border-radius 3px
|
border-radius 3px
|
||||||
opacity 0
|
opacity 0
|
||||||
transition opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)
|
transition opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)
|
||||||
|
|
@ -112,7 +110,7 @@ root(isDark, fill)
|
||||||
transition-duration 0.3s
|
transition-duration 0.3s
|
||||||
font-size 16px
|
font-size 16px
|
||||||
line-height 32px
|
line-height 32px
|
||||||
color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
|
color var(--inputLabel)
|
||||||
pointer-events none
|
pointer-events none
|
||||||
//will-change transform
|
//will-change transform
|
||||||
transform-origin top left
|
transform-origin top left
|
||||||
|
|
@ -126,7 +124,7 @@ root(isDark, fill)
|
||||||
font inherit
|
font inherit
|
||||||
font-weight fill ? bold : normal
|
font-weight fill ? bold : normal
|
||||||
font-size 16px
|
font-size 16px
|
||||||
color isDark ? #fff : #000
|
color var(--inputText)
|
||||||
background transparent
|
background transparent
|
||||||
border none
|
border none
|
||||||
border-radius 0
|
border-radius 0
|
||||||
|
|
@ -149,7 +147,7 @@ root(isDark, fill)
|
||||||
opacity 1
|
opacity 1
|
||||||
|
|
||||||
> .label
|
> .label
|
||||||
color $theme-color
|
color var(--primary)
|
||||||
|
|
||||||
&.focused
|
&.focused
|
||||||
&.filled
|
&.filled
|
||||||
|
|
@ -159,16 +157,10 @@ root(isDark, fill)
|
||||||
left 0 !important
|
left 0 !important
|
||||||
transform scale(0.75)
|
transform scale(0.75)
|
||||||
|
|
||||||
.ui-textarea[data-darkmode]
|
.ui-textarea.fill
|
||||||
&.fill
|
root(true)
|
||||||
root(true, true)
|
|
||||||
&:not(.fill)
|
|
||||||
root(true, false)
|
|
||||||
|
|
||||||
.ui-textarea:not([data-darkmode])
|
.ui-textarea:not(.fill)
|
||||||
&.fill
|
root(false)
|
||||||
root(false, true)
|
|
||||||
&:not(.fill)
|
|
||||||
root(false, false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -81,7 +81,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
|
||||||
|
|
||||||
.mk-uploader
|
.mk-uploader
|
||||||
overflow auto
|
overflow auto
|
||||||
|
|
@ -100,7 +100,7 @@ export default Vue.extend({
|
||||||
margin 8px 0 0 0
|
margin 8px 0 0 0
|
||||||
padding 0
|
padding 0
|
||||||
height 36px
|
height 36px
|
||||||
box-shadow 0 -1px 0 rgba($theme-color, 0.1)
|
box-shadow 0 -1px 0 var(--primaryAlpha01)
|
||||||
border-top solid 8px transparent
|
border-top solid 8px transparent
|
||||||
|
|
||||||
&:first-child
|
&:first-child
|
||||||
|
|
@ -127,7 +127,7 @@ export default Vue.extend({
|
||||||
padding 0
|
padding 0
|
||||||
max-width 256px
|
max-width 256px
|
||||||
font-size 0.8em
|
font-size 0.8em
|
||||||
color rgba($theme-color, 0.7)
|
color var(--primaryAlpha07)
|
||||||
white-space nowrap
|
white-space nowrap
|
||||||
text-overflow ellipsis
|
text-overflow ellipsis
|
||||||
overflow hidden
|
overflow hidden
|
||||||
|
|
@ -145,17 +145,17 @@ export default Vue.extend({
|
||||||
font-size 0.8em
|
font-size 0.8em
|
||||||
|
|
||||||
> .initing
|
> .initing
|
||||||
color rgba($theme-color, 0.5)
|
color var(--primaryAlpha05)
|
||||||
|
|
||||||
> .kb
|
> .kb
|
||||||
color rgba($theme-color, 0.5)
|
color var(--primaryAlpha05)
|
||||||
|
|
||||||
> .percentage
|
> .percentage
|
||||||
display inline-block
|
display inline-block
|
||||||
width 48px
|
width 48px
|
||||||
text-align right
|
text-align right
|
||||||
|
|
||||||
color rgba($theme-color, 0.7)
|
color var(--primaryAlpha07)
|
||||||
|
|
||||||
&:after
|
&:after
|
||||||
content '%'
|
content '%'
|
||||||
|
|
@ -174,10 +174,10 @@ export default Vue.extend({
|
||||||
overflow hidden
|
overflow hidden
|
||||||
|
|
||||||
&::-webkit-progress-value
|
&::-webkit-progress-value
|
||||||
background $theme-color
|
background var(--primary)
|
||||||
|
|
||||||
&::-webkit-progress-bar
|
&::-webkit-progress-bar
|
||||||
background rgba($theme-color, 0.1)
|
background var(--primaryAlpha01)
|
||||||
|
|
||||||
> .progress
|
> .progress
|
||||||
display block
|
display block
|
||||||
|
|
@ -191,13 +191,13 @@ export default Vue.extend({
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
background linear-gradient(
|
background linear-gradient(
|
||||||
45deg,
|
45deg,
|
||||||
lighten($theme-color, 30%) 25%,
|
var(--primaryLighten30) 25%,
|
||||||
$theme-color 25%,
|
var(--primary) 25%,
|
||||||
$theme-color 50%,
|
var(--primary) 50%,
|
||||||
lighten($theme-color, 30%) 50%,
|
var(--primaryLighten30) 50%,
|
||||||
lighten($theme-color, 30%) 75%,
|
var(--primaryLighten30) 75%,
|
||||||
$theme-color 75%,
|
var(--primary) 75%,
|
||||||
$theme-color
|
var(--primary)
|
||||||
)
|
)
|
||||||
background-size 32px 32px
|
background-size 32px 32px
|
||||||
animation bg 1.5s linear infinite
|
animation bg 1.5s linear infinite
|
||||||
|
|
|
||||||
|
|
@ -200,17 +200,17 @@ export default Vue.extend({
|
||||||
top 0
|
top 0
|
||||||
width 100%
|
width 100%
|
||||||
|
|
||||||
root(isDark)
|
.mk-url-preview
|
||||||
> a
|
> a
|
||||||
display block
|
display block
|
||||||
font-size 14px
|
font-size 14px
|
||||||
border solid 1px isDark ? #191b1f : #eee
|
border solid 1px var(--urlPreviewBorder)
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
overflow hidden
|
overflow hidden
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
text-decoration none
|
text-decoration none
|
||||||
border-color isDark ? #4f5561 : #ddd
|
border-color var(--urlPreviewBorderHover)
|
||||||
|
|
||||||
> article > header > h1
|
> article > header > h1
|
||||||
text-decoration underline
|
text-decoration underline
|
||||||
|
|
@ -235,11 +235,11 @@ root(isDark)
|
||||||
> h1
|
> h1
|
||||||
margin 0
|
margin 0
|
||||||
font-size 1em
|
font-size 1em
|
||||||
color isDark ? #d6dae0 : #555
|
color var(--urlPreviewTitle)
|
||||||
|
|
||||||
> p
|
> p
|
||||||
margin 0
|
margin 0
|
||||||
color isDark ? #a4aab3 : #777
|
color var(--urlPreviewText)
|
||||||
font-size 0.8em
|
font-size 0.8em
|
||||||
|
|
||||||
> footer
|
> footer
|
||||||
|
|
@ -256,7 +256,7 @@ root(isDark)
|
||||||
> p
|
> p
|
||||||
display inline-block
|
display inline-block
|
||||||
margin 0
|
margin 0
|
||||||
color isDark ? #b0b4bf : #666
|
color var(--urlPreviewInfo)
|
||||||
font-size 0.8em
|
font-size 0.8em
|
||||||
line-height 16px
|
line-height 16px
|
||||||
vertical-align top
|
vertical-align top
|
||||||
|
|
@ -322,10 +322,4 @@ root(isDark)
|
||||||
width 12px
|
width 12px
|
||||||
height 12px
|
height 12px
|
||||||
|
|
||||||
.mk-url-preview[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.mk-url-preview:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -127,11 +127,9 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
|
||||||
|
|
||||||
$border-color = rgba(27, 31, 35, 0.15)
|
$border-color = rgba(27, 31, 35, 0.15)
|
||||||
|
|
||||||
root(isDark)
|
.mk-visibility-chooser
|
||||||
position initial
|
position initial
|
||||||
|
|
||||||
> .backdrop
|
> .backdrop
|
||||||
|
|
@ -141,11 +139,11 @@ root(isDark)
|
||||||
z-index 10000
|
z-index 10000
|
||||||
width 100%
|
width 100%
|
||||||
height 100%
|
height 100%
|
||||||
background isDark ? rgba(#000, 0.4) : rgba(#000, 0.1)
|
background var(--modalBackdrop)
|
||||||
opacity 0
|
opacity 0
|
||||||
|
|
||||||
> .popover
|
> .popover
|
||||||
$bgcolor = isDark ? #2c303c : #fff
|
$bgcolor = var(--popupBg)
|
||||||
position absolute
|
position absolute
|
||||||
z-index 10001
|
z-index 10001
|
||||||
width 240px
|
width 240px
|
||||||
|
|
@ -189,18 +187,18 @@ root(isDark)
|
||||||
display flex
|
display flex
|
||||||
padding 8px 14px
|
padding 8px 14px
|
||||||
font-size 12px
|
font-size 12px
|
||||||
color isDark ? #fff : #666
|
color var(--popupFg)
|
||||||
cursor pointer
|
cursor pointer
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background isDark ? #252731 : #eee
|
background var(--faceClearButtonHover)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
background isDark ? #21242b : #ddd
|
background var(--faceClearButtonActive)
|
||||||
|
|
||||||
&.active
|
&.active
|
||||||
color $theme-color-foreground
|
color var(--primaryForeground)
|
||||||
background $theme-color
|
background var(--primary)
|
||||||
|
|
||||||
> *
|
> *
|
||||||
user-select none
|
user-select none
|
||||||
|
|
@ -222,11 +220,4 @@ root(isDark)
|
||||||
|
|
||||||
> span:last-child:not(:first-child)
|
> span:last-child:not(:first-child)
|
||||||
opacity 0.6
|
opacity 0.6
|
||||||
|
|
||||||
.mk-visibility-chooser[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.mk-visibility-chooser:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -90,8 +90,8 @@ export default Vue.extend({
|
||||||
opacity 0
|
opacity 0
|
||||||
transform translateY(-30px)
|
transform translateY(-30px)
|
||||||
|
|
||||||
root(isDark)
|
.mk-welcome-timeline
|
||||||
background isDark ? #282C37 : #fff
|
background var(--face)
|
||||||
|
|
||||||
> div
|
> div
|
||||||
> *
|
> *
|
||||||
|
|
@ -101,8 +101,8 @@ root(isDark)
|
||||||
padding 16px
|
padding 16px
|
||||||
overflow-wrap break-word
|
overflow-wrap break-word
|
||||||
font-size .9em
|
font-size .9em
|
||||||
color isDark ? #fff : #4C4C4C
|
color var(--noteText)
|
||||||
border-bottom 1px solid isDark ? rgba(#000, 0.1) : rgba(#000, 0.05)
|
border-bottom 1px solid var(--faceDivider)
|
||||||
|
|
||||||
&:after
|
&:after
|
||||||
content ""
|
content ""
|
||||||
|
|
@ -137,26 +137,20 @@ root(isDark)
|
||||||
overflow hidden
|
overflow hidden
|
||||||
font-weight bold
|
font-weight bold
|
||||||
text-overflow ellipsis
|
text-overflow ellipsis
|
||||||
color isDark ? #fff : #627079
|
color var(--noteHeaderName)
|
||||||
|
|
||||||
> .username
|
> .username
|
||||||
margin 0 .5em 0 0
|
margin 0 .5em 0 0
|
||||||
color isDark ? #606984 : #ccc
|
color var(--noteHeaderAcct)
|
||||||
|
|
||||||
> .info
|
> .info
|
||||||
margin-left auto
|
margin-left auto
|
||||||
font-size 0.9em
|
font-size 0.9em
|
||||||
|
|
||||||
> .created-at
|
> .created-at
|
||||||
color isDark ? #606984 : #c0c0c0
|
color var(--noteHeaderInfo)
|
||||||
|
|
||||||
> .text
|
> .text
|
||||||
text-align left
|
text-align left
|
||||||
|
|
||||||
.mk-welcome-timeline[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.mk-welcome-timeline:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="syxhndwprovvuqhmyvveewmbqayniwkv" v-if="!fetching" :data-darkmode="$store.state.device.darkmode">
|
<div class="syxhndwprovvuqhmyvveewmbqayniwkv" v-if="!fetching">
|
||||||
<div class="signed-in-as" v-html="'%i18n:@signed-in-as%'.replace('{}', `<b>${myName}`)"></div>
|
<div class="signed-in-as" v-html="'%i18n:@signed-in-as%'.replace('{}', `<b>${myName}`)"></div>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
|
|
@ -107,16 +107,14 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.syxhndwprovvuqhmyvveewmbqayniwkv
|
||||||
|
|
||||||
root(isDark)
|
|
||||||
padding 32px
|
padding 32px
|
||||||
max-width 500px
|
max-width 500px
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
text-align center
|
text-align center
|
||||||
color isDark ? #9baec8 : #868c8c
|
color var(--text)
|
||||||
|
|
||||||
$bg = isDark ? #282C37 : #fff
|
$bg = var(--face)
|
||||||
|
|
||||||
@media (max-width 400px)
|
@media (max-width 400px)
|
||||||
padding 16px
|
padding 16px
|
||||||
|
|
@ -124,7 +122,6 @@ root(isDark)
|
||||||
> .signed-in-as
|
> .signed-in-as
|
||||||
margin-bottom 16px
|
margin-bottom 16px
|
||||||
font-size 14px
|
font-size 14px
|
||||||
color isDark ? #9baec8 : #9daab3
|
|
||||||
|
|
||||||
> main
|
> main
|
||||||
margin-bottom 16px
|
margin-bottom 16px
|
||||||
|
|
@ -173,29 +170,29 @@ root(isDark)
|
||||||
min-width 150px
|
min-width 150px
|
||||||
font-size 14px
|
font-size 14px
|
||||||
font-weight bold
|
font-weight bold
|
||||||
color $theme-color
|
color var(--primary)
|
||||||
background transparent
|
background transparent
|
||||||
outline none
|
outline none
|
||||||
border solid 1px $theme-color
|
border solid 1px var(--primary)
|
||||||
border-radius 36px
|
border-radius 36px
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background rgba($theme-color, 0.1)
|
background var(--primaryAlpha01)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
background rgba($theme-color, 0.2)
|
background var(--primaryAlpha02)
|
||||||
|
|
||||||
&.active
|
&.active
|
||||||
color $theme-color-foreground
|
color var(--primaryForeground)
|
||||||
background $theme-color
|
background var(--primary)
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background lighten($theme-color, 10%)
|
background var(--primaryLighten10)
|
||||||
border-color lighten($theme-color, 10%)
|
border-color var(--primaryLighten10)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
background darken($theme-color, 10%)
|
background var(--primaryDarken10)
|
||||||
border-color darken($theme-color, 10%)
|
border-color var(--primaryDarken10)
|
||||||
|
|
||||||
&.wait
|
&.wait
|
||||||
cursor wait !important
|
cursor wait !important
|
||||||
|
|
@ -204,10 +201,4 @@ root(isDark)
|
||||||
*
|
*
|
||||||
pointer-events none
|
pointer-events none
|
||||||
|
|
||||||
.syxhndwprovvuqhmyvveewmbqayniwkv[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.syxhndwprovvuqhmyvveewmbqayniwkv:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -26,16 +26,8 @@ export default define({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.mkw-analog-clock
|
||||||
|
|
||||||
root(isDark)
|
|
||||||
.mkw-analog-clock--body
|
.mkw-analog-clock--body
|
||||||
padding 8px
|
padding 8px
|
||||||
|
|
||||||
.mkw-analog-clock[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.mkw-analog-clock:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
|
|
@ -71,9 +70,9 @@ export default define({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
root(isDark)
|
.anltbovirfeutcigvwgmgxipejaeozxi-body
|
||||||
padding 10px
|
padding 10px
|
||||||
background isDark ? #253a50 : #f3f9ff
|
background var(--announcementsBg)
|
||||||
|
|
||||||
&[data-melt]
|
&[data-melt]
|
||||||
background transparent
|
background transparent
|
||||||
|
|
@ -130,14 +129,14 @@ root(isDark)
|
||||||
margin 0
|
margin 0
|
||||||
font-size 0.95em
|
font-size 0.95em
|
||||||
font-weight normal
|
font-weight normal
|
||||||
color isDark ? #539eff : #4078c0
|
color var(--announcementsTitle)
|
||||||
|
|
||||||
> p
|
> p
|
||||||
display block
|
display block
|
||||||
z-index 1
|
z-index 1
|
||||||
margin 0
|
margin 0
|
||||||
font-size 0.7em
|
font-size 0.7em
|
||||||
color isDark ? #fff : #57616f
|
color var(--announcementsText)
|
||||||
|
|
||||||
&.fetching
|
&.fetching
|
||||||
text-align center
|
text-align center
|
||||||
|
|
@ -150,10 +149,4 @@ root(isDark)
|
||||||
> p
|
> p
|
||||||
color #fff
|
color #fff
|
||||||
|
|
||||||
.anltbovirfeutcigvwgmgxipejaeozxi-body[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.anltbovirfeutcigvwgmgxipejaeozxi-body:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -116,15 +116,13 @@ export default define({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.mkw-calendar
|
||||||
|
|
||||||
root(isDark)
|
|
||||||
&[data-special='on-new-years-day']
|
&[data-special='on-new-years-day']
|
||||||
border-color #ef95a0
|
border-color #ef95a0
|
||||||
|
|
||||||
.mkw-calendar--body
|
.mkw-calendar--body
|
||||||
padding 16px 0
|
padding 16px 0
|
||||||
color isDark ? #c5ced6 : #777
|
color var(--calendarDay)
|
||||||
|
|
||||||
&:after
|
&:after
|
||||||
content ""
|
content ""
|
||||||
|
|
@ -169,7 +167,8 @@ root(isDark)
|
||||||
margin 0 0 2px 0
|
margin 0 0 2px 0
|
||||||
font-size 12px
|
font-size 12px
|
||||||
line-height 18px
|
line-height 18px
|
||||||
color isDark ? #7a8692 : #888
|
color var(--text)
|
||||||
|
opacity 0.8
|
||||||
|
|
||||||
> b
|
> b
|
||||||
margin-left 2px
|
margin-left 2px
|
||||||
|
|
@ -177,12 +176,12 @@ root(isDark)
|
||||||
> .meter
|
> .meter
|
||||||
width 100%
|
width 100%
|
||||||
overflow hidden
|
overflow hidden
|
||||||
background isDark ? #1c1f25 : #eee
|
background var(--materBg)
|
||||||
border-radius 8px
|
border-radius 8px
|
||||||
|
|
||||||
> .val
|
> .val
|
||||||
height 4px
|
height 4px
|
||||||
background $theme-color
|
background var(--primary)
|
||||||
transition width .3s cubic-bezier(0.23, 1, 0.32, 1)
|
transition width .3s cubic-bezier(0.23, 1, 0.32, 1)
|
||||||
|
|
||||||
&:nth-child(1)
|
&:nth-child(1)
|
||||||
|
|
@ -197,10 +196,4 @@ root(isDark)
|
||||||
> .meter > .val
|
> .meter > .val
|
||||||
background #41ddde
|
background #41ddde
|
||||||
|
|
||||||
.mkw-calendar[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.mkw-calendar:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="mkw-donation" :data-mobile="platform == 'mobile'">
|
<div>
|
||||||
<article>
|
<mk-widget-container :show-header="false">
|
||||||
|
<article class="dolfvtibguprpxxhfndqaosjitixjohx">
|
||||||
<h1>%fa:heart%%i18n:@title%</h1>
|
<h1>%fa:heart%%i18n:@title%</h1>
|
||||||
<p v-if="meta">
|
<p v-if="meta">
|
||||||
{{ '%i18n:@text%'.substr(0, '%i18n:@text%'.indexOf('{')) }}
|
{{ '%i18n:@text%'.substr(0, '%i18n:@text%'.indexOf('{')) }}
|
||||||
|
|
@ -8,6 +9,7 @@
|
||||||
{{ '%i18n:@text%'.substr('%i18n:@text%'.indexOf('}') + 1) }}
|
{{ '%i18n:@text%'.substr('%i18n:@text%'.indexOf('}') + 1) }}
|
||||||
</p>
|
</p>
|
||||||
</article>
|
</article>
|
||||||
|
</mk-widget-container>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -30,18 +32,14 @@ export default define({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
root(isDark)
|
.dolfvtibguprpxxhfndqaosjitixjohx
|
||||||
background isDark ? #282c37 : #fff
|
|
||||||
border solid 1px isDark ? #c3831c : #ead8bb
|
|
||||||
border-radius 6px
|
|
||||||
|
|
||||||
> article
|
|
||||||
padding 20px
|
padding 20px
|
||||||
|
background var(--donationBg)
|
||||||
|
color var(--donationFg)
|
||||||
|
|
||||||
> h1
|
> h1
|
||||||
margin 0 0 5px 0
|
margin 0 0 5px 0
|
||||||
font-size 1em
|
font-size 1em
|
||||||
color isDark ? #b2bac1 : #888
|
|
||||||
|
|
||||||
> [data-fa]
|
> [data-fa]
|
||||||
margin-right 0.25em
|
margin-right 0.25em
|
||||||
|
|
@ -51,25 +49,5 @@ root(isDark)
|
||||||
z-index 1
|
z-index 1
|
||||||
margin 0
|
margin 0
|
||||||
font-size 0.8em
|
font-size 0.8em
|
||||||
color isDark ? #a1a6ab : #999
|
|
||||||
|
|
||||||
&[data-mobile]
|
|
||||||
border none
|
|
||||||
background #ead8bb
|
|
||||||
border-radius 8px
|
|
||||||
box-shadow 0 0 0 1px rgba(#000, 0.2)
|
|
||||||
|
|
||||||
> article
|
|
||||||
> h1
|
|
||||||
color #7b8871
|
|
||||||
|
|
||||||
> p
|
|
||||||
color #777d71
|
|
||||||
|
|
||||||
.mkw-donation[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.mkw-donation:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -57,9 +57,7 @@ export default define({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.mkw-memo
|
||||||
|
|
||||||
root(isDark)
|
|
||||||
.mkw-memo--body
|
.mkw-memo--body
|
||||||
padding-bottom 28px + 16px
|
padding-bottom 28px + 16px
|
||||||
|
|
||||||
|
|
@ -69,10 +67,10 @@ root(isDark)
|
||||||
max-width 100%
|
max-width 100%
|
||||||
min-width 100%
|
min-width 100%
|
||||||
padding 16px
|
padding 16px
|
||||||
color isDark ? #fff : #222
|
color var(--inputText)
|
||||||
background isDark ? #282c37 : #fff
|
background var(--face)
|
||||||
border none
|
border none
|
||||||
border-bottom solid 1px isDark ? #1c2023 : #eee
|
border-bottom solid 1px var(--faceDivider)
|
||||||
border-radius 0
|
border-radius 0
|
||||||
|
|
||||||
> button
|
> button
|
||||||
|
|
@ -83,8 +81,8 @@ root(isDark)
|
||||||
margin 0
|
margin 0
|
||||||
padding 0 10px
|
padding 0 10px
|
||||||
height 28px
|
height 28px
|
||||||
color $theme-color-foreground
|
color var(--primaryForeground)
|
||||||
background $theme-color !important
|
background var(--primary) !important
|
||||||
outline none
|
outline none
|
||||||
border none
|
border none
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
|
|
@ -92,20 +90,14 @@ root(isDark)
|
||||||
cursor pointer
|
cursor pointer
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background lighten($theme-color, 10%) !important
|
background var(--primaryLighten10) !important
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
background darken($theme-color, 10%) !important
|
background var(--primaryDarken10) !important
|
||||||
transition background 0s ease
|
transition background 0s ease
|
||||||
|
|
||||||
&:disabled
|
&:disabled
|
||||||
opacity 0.7
|
opacity 0.7
|
||||||
cursor default
|
cursor default
|
||||||
|
|
||||||
.mkw-memo[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.mkw-memo:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -16,23 +16,17 @@ export default define({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
root(isDark)
|
.mkw-nav
|
||||||
.mkw-nav--body
|
.mkw-nav--body
|
||||||
padding 16px
|
padding 16px
|
||||||
font-size 12px
|
font-size 12px
|
||||||
color isDark ? #9aa4b3 : #aaa
|
color var(--text)
|
||||||
background isDark ? #282c37 : #fff
|
background var(--face)
|
||||||
|
|
||||||
a
|
a
|
||||||
color isDark ? #9aa4b3 : #999
|
color var(--text)
|
||||||
|
|
||||||
i
|
i
|
||||||
color isDark ? #9aa4b3 : #ccc
|
color var(--text)
|
||||||
|
|
||||||
.mkw-nav[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.mkw-nav:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<template slot="header">%fa:chart-line%%i18n:@title%</template>
|
<template slot="header">%fa:chart-line%%i18n:@title%</template>
|
||||||
<button slot="func" @click="toggle" title="%i18n:@toggle%">%fa:sort%</button>
|
<button slot="func" @click="toggle" title="%i18n:@toggle%">%fa:sort%</button>
|
||||||
|
|
||||||
<div class="qpdmibaztplkylerhdbllwcokyrfxeyj" :class="{ dual: props.view == 0 }" :data-darkmode="$store.state.device.darkmode">
|
<div class="qpdmibaztplkylerhdbllwcokyrfxeyj" :class="{ dual: props.view == 0 }">
|
||||||
<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" v-show="props.view != 2">
|
<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" v-show="props.view != 2">
|
||||||
<defs>
|
<defs>
|
||||||
<linearGradient :id="localGradientId" x1="0" x2="0" y1="1" y2="0">
|
<linearGradient :id="localGradientId" x1="0" x2="0" y1="1" y2="0">
|
||||||
|
|
@ -173,7 +173,7 @@ export default define({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
root(isDark)
|
.qpdmibaztplkylerhdbllwcokyrfxeyj
|
||||||
&.dual
|
&.dual
|
||||||
> svg
|
> svg
|
||||||
width 50%
|
width 50%
|
||||||
|
|
@ -192,7 +192,7 @@ root(isDark)
|
||||||
|
|
||||||
> text
|
> text
|
||||||
font-size 5px
|
font-size 5px
|
||||||
fill isDark ? rgba(#fff, 0.55) : rgba(#000, 0.55)
|
fill var(--chartCaption)
|
||||||
|
|
||||||
> tspan
|
> tspan
|
||||||
opacity 0.5
|
opacity 0.5
|
||||||
|
|
@ -202,10 +202,4 @@ root(isDark)
|
||||||
display block
|
display block
|
||||||
clear both
|
clear both
|
||||||
|
|
||||||
.qpdmibaztplkylerhdbllwcokyrfxeyj[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.qpdmibaztplkylerhdbllwcokyrfxeyj:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -65,7 +65,7 @@ export default define({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
root(isDark)
|
.mkw-rss
|
||||||
.mkw-rss--body
|
.mkw-rss--body
|
||||||
.feed
|
.feed
|
||||||
padding 12px 16px
|
padding 12px 16px
|
||||||
|
|
@ -74,8 +74,8 @@ root(isDark)
|
||||||
> a
|
> a
|
||||||
display block
|
display block
|
||||||
padding 4px 0
|
padding 4px 0
|
||||||
color isDark ? #9aa4b3 : #666
|
color var(--text)
|
||||||
border-bottom dashed 1px isDark ? #1c2023 : #eee
|
border-bottom dashed 1px var(--faceDivider)
|
||||||
|
|
||||||
&:last-child
|
&:last-child
|
||||||
border-bottom none
|
border-bottom none
|
||||||
|
|
@ -90,7 +90,7 @@ root(isDark)
|
||||||
margin-right 4px
|
margin-right 4px
|
||||||
|
|
||||||
&[data-mobile]
|
&[data-mobile]
|
||||||
background isDark ? #21242f : #f3f3f3
|
background var(--face)
|
||||||
|
|
||||||
.feed
|
.feed
|
||||||
padding 0
|
padding 0
|
||||||
|
|
@ -100,12 +100,6 @@ root(isDark)
|
||||||
border-bottom none
|
border-bottom none
|
||||||
|
|
||||||
&:nth-child(even)
|
&:nth-child(even)
|
||||||
background isDark ? rgba(#000, 0.05) : rgba(#fff, 0.7)
|
background rgba(#000, 0.05)
|
||||||
|
|
||||||
.mkw-rss[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.mkw-rss:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -129,7 +129,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
root(isDark)
|
.cpu-memory
|
||||||
> svg
|
> svg
|
||||||
display block
|
display block
|
||||||
padding 10px
|
padding 10px
|
||||||
|
|
@ -144,7 +144,7 @@ root(isDark)
|
||||||
|
|
||||||
> text
|
> text
|
||||||
font-size 5px
|
font-size 5px
|
||||||
fill isDark ? rgba(#fff, 0.55) : rgba(#000, 0.55)
|
fill var(--chartCaption)
|
||||||
|
|
||||||
> tspan
|
> tspan
|
||||||
opacity 0.5
|
opacity 0.5
|
||||||
|
|
@ -154,10 +154,4 @@ root(isDark)
|
||||||
display block
|
display block
|
||||||
clear both
|
clear both
|
||||||
|
|
||||||
.cpu-memory[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.cpu-memory:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -38,7 +38,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
root(isDark)
|
.cpu
|
||||||
> .pie
|
> .pie
|
||||||
padding 10px
|
padding 10px
|
||||||
height 100px
|
height 100px
|
||||||
|
|
@ -52,7 +52,7 @@ root(isDark)
|
||||||
> p
|
> p
|
||||||
margin 0
|
margin 0
|
||||||
font-size 12px
|
font-size 12px
|
||||||
color isDark ? #a8b4bd : #505050
|
color var(--chartCaption)
|
||||||
|
|
||||||
&:first-child
|
&:first-child
|
||||||
font-weight bold
|
font-weight bold
|
||||||
|
|
@ -65,10 +65,4 @@ root(isDark)
|
||||||
display block
|
display block
|
||||||
clear both
|
clear both
|
||||||
|
|
||||||
.cpu[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.cpu:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -46,7 +46,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
root(isDark)
|
.disk
|
||||||
> .pie
|
> .pie
|
||||||
padding 10px
|
padding 10px
|
||||||
height 100px
|
height 100px
|
||||||
|
|
@ -60,7 +60,7 @@ root(isDark)
|
||||||
> p
|
> p
|
||||||
margin 0
|
margin 0
|
||||||
font-size 12px
|
font-size 12px
|
||||||
color isDark ? #a8b4bd : #505050
|
color var(--chartCaption)
|
||||||
|
|
||||||
&:first-child
|
&:first-child
|
||||||
font-weight bold
|
font-weight bold
|
||||||
|
|
@ -73,10 +73,4 @@ root(isDark)
|
||||||
display block
|
display block
|
||||||
clear both
|
clear both
|
||||||
|
|
||||||
.disk[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.disk:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -46,7 +46,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
root(isDark)
|
.memory
|
||||||
> .pie
|
> .pie
|
||||||
padding 10px
|
padding 10px
|
||||||
height 100px
|
height 100px
|
||||||
|
|
@ -60,7 +60,7 @@ root(isDark)
|
||||||
> p
|
> p
|
||||||
margin 0
|
margin 0
|
||||||
font-size 12px
|
font-size 12px
|
||||||
color isDark ? #a8b4bd : #505050
|
color var(--chartCaption)
|
||||||
|
|
||||||
&:first-child
|
&:first-child
|
||||||
font-weight bold
|
font-weight bold
|
||||||
|
|
@ -73,10 +73,4 @@ root(isDark)
|
||||||
display block
|
display block
|
||||||
clear both
|
clear both
|
||||||
|
|
||||||
.memory[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.memory:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -45,7 +45,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
root(isDark)
|
svg
|
||||||
display block
|
display block
|
||||||
height 100%
|
height 100%
|
||||||
|
|
||||||
|
|
@ -56,12 +56,6 @@ root(isDark)
|
||||||
|
|
||||||
> text
|
> text
|
||||||
font-size 0.15px
|
font-size 0.15px
|
||||||
fill isDark ? rgba(#fff, 0.6) : rgba(#000, 0.6)
|
fill var(--chartCaption)
|
||||||
|
|
||||||
svg[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
svg:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,150 +0,0 @@
|
||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
||||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
|
||||||
|
|
||||||
<svg
|
|
||||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
|
||||||
xmlns:cc="http://creativecommons.org/ns#"
|
|
||||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
|
||||||
xmlns:svg="http://www.w3.org/2000/svg"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
|
||||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
|
||||||
width="512"
|
|
||||||
height="512"
|
|
||||||
viewBox="0 0 135.46667 135.46667"
|
|
||||||
version="1.1"
|
|
||||||
id="svg8"
|
|
||||||
inkscape:version="0.92.1 r15371"
|
|
||||||
sodipodi:docname="header-icon.light.svg"
|
|
||||||
inkscape:export-filename="C:\Users\syuilo\projects\misskey\assets\favicon\32.png"
|
|
||||||
inkscape:export-xdpi="6"
|
|
||||||
inkscape:export-ydpi="6">
|
|
||||||
<defs
|
|
||||||
id="defs2">
|
|
||||||
<inkscape:path-effect
|
|
||||||
effect="simplify"
|
|
||||||
id="path-effect5115"
|
|
||||||
is_visible="true"
|
|
||||||
steps="1"
|
|
||||||
threshold="0.000408163"
|
|
||||||
smooth_angles="360"
|
|
||||||
helper_size="0"
|
|
||||||
simplify_individual_paths="false"
|
|
||||||
simplify_just_coalesce="false"
|
|
||||||
simplifyindividualpaths="false"
|
|
||||||
simplifyJustCoalesce="false" />
|
|
||||||
<inkscape:path-effect
|
|
||||||
effect="simplify"
|
|
||||||
id="path-effect5111"
|
|
||||||
is_visible="true"
|
|
||||||
steps="1"
|
|
||||||
threshold="0.000408163"
|
|
||||||
smooth_angles="360"
|
|
||||||
helper_size="0"
|
|
||||||
simplify_individual_paths="false"
|
|
||||||
simplify_just_coalesce="false"
|
|
||||||
simplifyindividualpaths="false"
|
|
||||||
simplifyJustCoalesce="false" />
|
|
||||||
<inkscape:path-effect
|
|
||||||
effect="simplify"
|
|
||||||
id="path-effect5104"
|
|
||||||
is_visible="true"
|
|
||||||
steps="1"
|
|
||||||
threshold="0.000408163"
|
|
||||||
smooth_angles="360"
|
|
||||||
helper_size="0"
|
|
||||||
simplify_individual_paths="false"
|
|
||||||
simplify_just_coalesce="false"
|
|
||||||
simplifyindividualpaths="false"
|
|
||||||
simplifyJustCoalesce="false" />
|
|
||||||
</defs>
|
|
||||||
<sodipodi:namedview
|
|
||||||
id="base"
|
|
||||||
pagecolor="#ffffff"
|
|
||||||
bordercolor="#666666"
|
|
||||||
borderopacity="1.0"
|
|
||||||
inkscape:pageopacity="0.0"
|
|
||||||
inkscape:pageshadow="2"
|
|
||||||
inkscape:zoom="1.4142136"
|
|
||||||
inkscape:cx="114.309"
|
|
||||||
inkscape:cy="251.50613"
|
|
||||||
inkscape:document-units="px"
|
|
||||||
inkscape:current-layer="g4502"
|
|
||||||
showgrid="true"
|
|
||||||
units="px"
|
|
||||||
inkscape:snap-bbox="true"
|
|
||||||
inkscape:bbox-nodes="true"
|
|
||||||
inkscape:snap-bbox-edge-midpoints="false"
|
|
||||||
inkscape:snap-smooth-nodes="true"
|
|
||||||
inkscape:snap-center="true"
|
|
||||||
inkscape:snap-page="true"
|
|
||||||
inkscape:window-width="1920"
|
|
||||||
inkscape:window-height="1027"
|
|
||||||
inkscape:window-x="-8"
|
|
||||||
inkscape:window-y="1072"
|
|
||||||
inkscape:window-maximized="1"
|
|
||||||
inkscape:snap-object-midpoints="true"
|
|
||||||
inkscape:snap-midpoints="true"
|
|
||||||
inkscape:object-paths="true"
|
|
||||||
fit-margin-top="0"
|
|
||||||
fit-margin-left="0"
|
|
||||||
fit-margin-right="0"
|
|
||||||
fit-margin-bottom="0"
|
|
||||||
objecttolerance="1"
|
|
||||||
guidetolerance="1"
|
|
||||||
inkscape:snap-nodes="false"
|
|
||||||
inkscape:snap-others="false">
|
|
||||||
<inkscape:grid
|
|
||||||
type="xygrid"
|
|
||||||
id="grid4504"
|
|
||||||
spacingx="4.2333334"
|
|
||||||
spacingy="4.2333334"
|
|
||||||
empcolor="#ff3fff"
|
|
||||||
empopacity="0.25098039"
|
|
||||||
empspacing="4" />
|
|
||||||
</sodipodi:namedview>
|
|
||||||
<metadata
|
|
||||||
id="metadata5">
|
|
||||||
<rdf:RDF>
|
|
||||||
<cc:Work
|
|
||||||
rdf:about="">
|
|
||||||
<dc:format>image/svg+xml</dc:format>
|
|
||||||
<dc:type
|
|
||||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
|
||||||
<dc:title />
|
|
||||||
</cc:Work>
|
|
||||||
</rdf:RDF>
|
|
||||||
</metadata>
|
|
||||||
<g
|
|
||||||
inkscape:label="レイヤー 1"
|
|
||||||
inkscape:groupmode="layer"
|
|
||||||
id="layer1"
|
|
||||||
transform="translate(-30.809093,-111.78601)">
|
|
||||||
<g
|
|
||||||
id="g4502"
|
|
||||||
transform="matrix(1.096096,0,0,1.096096,-2.960633,-44.023579)">
|
|
||||||
<g
|
|
||||||
style="fill:#000000;fill-opacity:1"
|
|
||||||
transform="translate(-1.3333333e-6,-1.3439941e-6)"
|
|
||||||
id="g5125">
|
|
||||||
<g
|
|
||||||
transform="matrix(0.91391326,0,0,0.91391326,7.9719907,17.595761)"
|
|
||||||
id="text4489"
|
|
||||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:141.03404236px;line-height:476.69509888px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.28950602px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
|
||||||
aria-label="Mi">
|
|
||||||
<path
|
|
||||||
sodipodi:nodetypes="zccssscssccscczzzccsccsscscsccz"
|
|
||||||
inkscape:connector-curvature="0"
|
|
||||||
id="path5210"
|
|
||||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill:#000000;fill-opacity:1;stroke-width:0.28950602px"
|
|
||||||
d="m 75.196381,231.17126 c -5.855419,0.0202 -10.885068,-3.50766 -13.2572,-7.61584 -1.266603,-1.79454 -3.772419,-2.43291 -3.807919,0 v 11.2332 c 0,4.51309 -1.645397,8.41504 -4.936191,11.70583 -3.196772,3.19677 -7.098714,4.79516 -11.705826,4.79516 -4.513089,0 -8.415031,-1.59839 -11.705825,-4.79516 -3.196772,-3.29079 -4.795158,-7.19274 -4.795158,-11.70583 v -61.7729 c 0,-3.47884 0.987238,-6.6286 2.961715,-9.44928 2.068499,-2.91471 4.701135,-4.9362 7.897906,-6.06447 1.786431,-0.65816 3.666885,-0.98724 5.641362,-0.98724 5.077225,0 9.308247,1.97448 12.693064,5.92343 1.786431,1.97448 2.820681,3.00873 3.102749,3.10275 0,0 13.408119,16.21319 13.78421,16.49526 0.376091,0.28206 1.480789,2.43848 4.127113,2.43848 2.646324,0 3.89218,-2.15642 4.26827,-2.43848 0.376091,-0.28207 13.784088,-16.49526 13.784088,-16.49526 0.09402,0.094 1.081261,-0.94022 2.961715,-3.10275 3.478837,-3.94895 7.756866,-5.92343 12.834096,-5.92343 1.88045,0 3.76091,0.32908 5.64136,0.98724 3.19677,1.12827 5.7824,3.14976 7.75688,6.06447 2.06849,2.82068 3.10274,5.97044 3.10274,9.44928 v 61.7729 c 0,4.51309 -1.6454,8.41504 -4.93619,11.70583 -3.19677,3.19677 -7.09871,4.79516 -11.70582,4.79516 -4.51309,0 -8.41504,-1.59839 -11.705828,-4.79516 -3.196772,-3.29079 -4.795158,-7.19274 -4.795158,-11.70583 v -11.2332 c -0.277898,-3.06563 -2.987588,-1.13379 -3.948953,0 -2.538613,4.70114 -7.401781,7.59567 -13.2572,7.61584 z" />
|
|
||||||
<path
|
|
||||||
inkscape:connector-curvature="0"
|
|
||||||
id="path5212"
|
|
||||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill:#000000;fill-opacity:1;stroke-width:0.28950602px"
|
|
||||||
d="m 145.83461,185.00361 q -5.92343,0 -10.15445,-4.08999 -4.08999,-4.23102 -4.08999,-10.15445 0,-5.92343 4.08999,-10.01342 4.23102,-4.23102 10.15445,-4.23102 5.92343,0 10.15445,4.23102 4.23102,4.08999 4.23102,10.01342 0,5.92343 -4.23102,10.15445 -4.23102,4.08999 -10.15445,4.08999 z m 0.14103,2.82068 q 5.92343,0 10.01342,4.23102 4.23102,4.23102 4.23102,10.15445 v 34.83541 q 0,5.92343 -4.23102,10.15445 -4.08999,4.08999 -10.01342,4.08999 -5.92343,0 -10.15445,-4.08999 -4.23102,-4.23102 -4.23102,-10.15445 v -34.83541 q 0,-5.92343 4.23102,-10.15445 4.23102,-4.23102 10.15445,-4.23102 z" />
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 7 KiB |
|
|
@ -124,24 +124,24 @@
|
||||||
id="g4502"
|
id="g4502"
|
||||||
transform="matrix(1.096096,0,0,1.096096,-2.960633,-44.023579)">
|
transform="matrix(1.096096,0,0,1.096096,-2.960633,-44.023579)">
|
||||||
<g
|
<g
|
||||||
style="fill:#ffffff;fill-opacity:1"
|
style="fill-opacity:1"
|
||||||
transform="translate(-1.3333333e-6,-1.3439941e-6)"
|
transform="translate(-1.3333333e-6,-1.3439941e-6)"
|
||||||
id="g5125">
|
id="g5125">
|
||||||
<g
|
<g
|
||||||
transform="matrix(0.91391326,0,0,0.91391326,7.9719907,17.595761)"
|
transform="matrix(0.91391326,0,0,0.91391326,7.9719907,17.595761)"
|
||||||
id="text4489"
|
id="text4489"
|
||||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:141.03404236px;line-height:476.69509888px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.28950602px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:141.03404236px;line-height:476.69509888px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.28950602px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||||
aria-label="Mi">
|
aria-label="Mi">
|
||||||
<path
|
<path
|
||||||
sodipodi:nodetypes="zccssscssccscczzzccsccsscscsccz"
|
sodipodi:nodetypes="zccssscssccscczzzccsccsscscsccz"
|
||||||
inkscape:connector-curvature="0"
|
inkscape:connector-curvature="0"
|
||||||
id="path5210"
|
id="path5210"
|
||||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill:#ffffff;fill-opacity:1;stroke-width:0.28950602px"
|
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill-opacity:1;stroke-width:0.28950602px"
|
||||||
d="m 75.196381,231.17126 c -5.855419,0.0202 -10.885068,-3.50766 -13.2572,-7.61584 -1.266603,-1.79454 -3.772419,-2.43291 -3.807919,0 v 11.2332 c 0,4.51309 -1.645397,8.41504 -4.936191,11.70583 -3.196772,3.19677 -7.098714,4.79516 -11.705826,4.79516 -4.513089,0 -8.415031,-1.59839 -11.705825,-4.79516 -3.196772,-3.29079 -4.795158,-7.19274 -4.795158,-11.70583 v -61.7729 c 0,-3.47884 0.987238,-6.6286 2.961715,-9.44928 2.068499,-2.91471 4.701135,-4.9362 7.897906,-6.06447 1.786431,-0.65816 3.666885,-0.98724 5.641362,-0.98724 5.077225,0 9.308247,1.97448 12.693064,5.92343 1.786431,1.97448 2.820681,3.00873 3.102749,3.10275 0,0 13.408119,16.21319 13.78421,16.49526 0.376091,0.28206 1.480789,2.43848 4.127113,2.43848 2.646324,0 3.89218,-2.15642 4.26827,-2.43848 0.376091,-0.28207 13.784088,-16.49526 13.784088,-16.49526 0.09402,0.094 1.081261,-0.94022 2.961715,-3.10275 3.478837,-3.94895 7.756866,-5.92343 12.834096,-5.92343 1.88045,0 3.76091,0.32908 5.64136,0.98724 3.19677,1.12827 5.7824,3.14976 7.75688,6.06447 2.06849,2.82068 3.10274,5.97044 3.10274,9.44928 v 61.7729 c 0,4.51309 -1.6454,8.41504 -4.93619,11.70583 -3.19677,3.19677 -7.09871,4.79516 -11.70582,4.79516 -4.51309,0 -8.41504,-1.59839 -11.705828,-4.79516 -3.196772,-3.29079 -4.795158,-7.19274 -4.795158,-11.70583 v -11.2332 c -0.277898,-3.06563 -2.987588,-1.13379 -3.948953,0 -2.538613,4.70114 -7.401781,7.59567 -13.2572,7.61584 z" />
|
d="m 75.196381,231.17126 c -5.855419,0.0202 -10.885068,-3.50766 -13.2572,-7.61584 -1.266603,-1.79454 -3.772419,-2.43291 -3.807919,0 v 11.2332 c 0,4.51309 -1.645397,8.41504 -4.936191,11.70583 -3.196772,3.19677 -7.098714,4.79516 -11.705826,4.79516 -4.513089,0 -8.415031,-1.59839 -11.705825,-4.79516 -3.196772,-3.29079 -4.795158,-7.19274 -4.795158,-11.70583 v -61.7729 c 0,-3.47884 0.987238,-6.6286 2.961715,-9.44928 2.068499,-2.91471 4.701135,-4.9362 7.897906,-6.06447 1.786431,-0.65816 3.666885,-0.98724 5.641362,-0.98724 5.077225,0 9.308247,1.97448 12.693064,5.92343 1.786431,1.97448 2.820681,3.00873 3.102749,3.10275 0,0 13.408119,16.21319 13.78421,16.49526 0.376091,0.28206 1.480789,2.43848 4.127113,2.43848 2.646324,0 3.89218,-2.15642 4.26827,-2.43848 0.376091,-0.28207 13.784088,-16.49526 13.784088,-16.49526 0.09402,0.094 1.081261,-0.94022 2.961715,-3.10275 3.478837,-3.94895 7.756866,-5.92343 12.834096,-5.92343 1.88045,0 3.76091,0.32908 5.64136,0.98724 3.19677,1.12827 5.7824,3.14976 7.75688,6.06447 2.06849,2.82068 3.10274,5.97044 3.10274,9.44928 v 61.7729 c 0,4.51309 -1.6454,8.41504 -4.93619,11.70583 -3.19677,3.19677 -7.09871,4.79516 -11.70582,4.79516 -4.51309,0 -8.41504,-1.59839 -11.705828,-4.79516 -3.196772,-3.29079 -4.795158,-7.19274 -4.795158,-11.70583 v -11.2332 c -0.277898,-3.06563 -2.987588,-1.13379 -3.948953,0 -2.538613,4.70114 -7.401781,7.59567 -13.2572,7.61584 z" />
|
||||||
<path
|
<path
|
||||||
inkscape:connector-curvature="0"
|
inkscape:connector-curvature="0"
|
||||||
id="path5212"
|
id="path5212"
|
||||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill:#ffffff;fill-opacity:1;stroke-width:0.28950602px"
|
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill-opacity:1;stroke-width:0.28950602px"
|
||||||
d="m 145.83461,185.00361 q -5.92343,0 -10.15445,-4.08999 -4.08999,-4.23102 -4.08999,-10.15445 0,-5.92343 4.08999,-10.01342 4.23102,-4.23102 10.15445,-4.23102 5.92343,0 10.15445,4.23102 4.23102,4.08999 4.23102,10.01342 0,5.92343 -4.23102,10.15445 -4.23102,4.08999 -10.15445,4.08999 z m 0.14103,2.82068 q 5.92343,0 10.01342,4.23102 4.23102,4.23102 4.23102,10.15445 v 34.83541 q 0,5.92343 -4.23102,10.15445 -4.08999,4.08999 -10.01342,4.08999 -5.92343,0 -10.15445,-4.08999 -4.23102,-4.23102 -4.23102,-10.15445 v -34.83541 q 0,-5.92343 4.23102,-10.15445 4.23102,-4.23102 10.15445,-4.23102 z" />
|
d="m 145.83461,185.00361 q -5.92343,0 -10.15445,-4.08999 -4.08999,-4.23102 -4.08999,-10.15445 0,-5.92343 4.08999,-10.01342 4.23102,-4.23102 10.15445,-4.23102 5.92343,0 10.15445,4.23102 4.23102,4.08999 4.23102,10.01342 0,5.92343 -4.23102,10.15445 -4.23102,4.08999 -10.15445,4.08999 z m 0.14103,2.82068 q 5.92343,0 10.01342,4.23102 4.23102,4.23102 4.23102,10.15445 v 34.83541 q 0,5.92343 -4.23102,10.15445 -4.08999,4.08999 -10.01342,4.08999 -5.92343,0 -10.15445,-4.08999 -4.23102,-4.23102 -4.23102,-10.15445 v -34.83541 q 0,-5.92343 4.23102,-10.15445 4.23102,-4.23102 10.15445,-4.23102 z" />
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
|
Before Width: | Height: | Size: 7 KiB After Width: | Height: | Size: 7 KiB |
|
|
@ -29,7 +29,6 @@ import MkUser from './views/pages/user/user.vue';
|
||||||
import MkFavorites from './views/pages/favorites.vue';
|
import MkFavorites from './views/pages/favorites.vue';
|
||||||
import MkSelectDrive from './views/pages/selectdrive.vue';
|
import MkSelectDrive from './views/pages/selectdrive.vue';
|
||||||
import MkDrive from './views/pages/drive.vue';
|
import MkDrive from './views/pages/drive.vue';
|
||||||
import MkUserList from './views/pages/user-list.vue';
|
|
||||||
import MkHomeCustomize from './views/pages/home-customize.vue';
|
import MkHomeCustomize from './views/pages/home-customize.vue';
|
||||||
import MkMessagingRoom from './views/pages/messaging-room.vue';
|
import MkMessagingRoom from './views/pages/messaging-room.vue';
|
||||||
import MkNote from './views/pages/note.vue';
|
import MkNote from './views/pages/note.vue';
|
||||||
|
|
@ -63,7 +62,6 @@ init(async (launch) => {
|
||||||
{ path: '/i/messaging/:user', component: MkMessagingRoom },
|
{ path: '/i/messaging/:user', component: MkMessagingRoom },
|
||||||
{ path: '/i/drive', component: MkDrive },
|
{ path: '/i/drive', component: MkDrive },
|
||||||
{ path: '/i/drive/folder/:folder', component: MkDrive },
|
{ path: '/i/drive/folder/:folder', component: MkDrive },
|
||||||
{ path: '/i/lists/:list', component: MkUserList },
|
|
||||||
{ path: '/selectdrive', component: MkSelectDrive },
|
{ path: '/selectdrive', component: MkSelectDrive },
|
||||||
{ path: '/search', component: MkSearch },
|
{ path: '/search', component: MkSearch },
|
||||||
{ path: '/tags/:tag', component: MkTag },
|
{ path: '/tags/:tag', component: MkTag },
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,6 @@
|
||||||
@import "../app"
|
@import "../app"
|
||||||
@import "../reset"
|
@import "../reset"
|
||||||
|
|
||||||
@import "./ui"
|
|
||||||
|
|
||||||
*::input-placeholder
|
*::input-placeholder
|
||||||
color #D8CBC5
|
color #D8CBC5
|
||||||
|
|
||||||
|
|
@ -11,34 +9,21 @@
|
||||||
|
|
||||||
html
|
html
|
||||||
height 100%
|
height 100%
|
||||||
background #f7f7f7
|
background var(--bg)
|
||||||
|
|
||||||
&, *
|
&, *
|
||||||
&::-webkit-scrollbar
|
&::-webkit-scrollbar
|
||||||
width 6px
|
width 6px
|
||||||
height 6px
|
height 6px
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb
|
|
||||||
background rgba(0, 0, 0, 0.2)
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background rgba(0, 0, 0, 0.4)
|
|
||||||
|
|
||||||
&:active
|
|
||||||
background $theme-color
|
|
||||||
|
|
||||||
&[data-darkmode]
|
|
||||||
background #191B22
|
|
||||||
|
|
||||||
&, *
|
|
||||||
&::-webkit-scrollbar-track
|
&::-webkit-scrollbar-track
|
||||||
background-color #282C37
|
background var(--scrollbarTrack)
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb
|
&::-webkit-scrollbar-thumb
|
||||||
background-color #454954
|
background var(--scrollbarHandle)
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background-color #535660
|
background var(--scrollbarHandleHover)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
background-color $theme-color
|
background var(--primary)
|
||||||
|
|
|
||||||
|
|
@ -1,181 +0,0 @@
|
||||||
@import "../../const"
|
|
||||||
|
|
||||||
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 rgba($theme-color, 0.3)
|
|
||||||
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 $theme-color-foreground
|
|
||||||
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
|
|
||||||
border solid 1px lighten($theme-color, 15%)
|
|
||||||
|
|
||||||
&:not(:disabled)
|
|
||||||
font-weight bold
|
|
||||||
|
|
||||||
&:hover:not(:disabled)
|
|
||||||
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
|
|
||||||
border-color $theme-color
|
|
||||||
|
|
||||||
&:active:not(:disabled)
|
|
||||||
background $theme-color
|
|
||||||
border-color $theme-color
|
|
||||||
|
|
||||||
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 $theme-color
|
|
||||||
|
|
||||||
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 $theme-color-foreground
|
|
||||||
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
|
|
||||||
border solid 1px lighten($theme-color, 15%)
|
|
||||||
|
|
||||||
&:hover:not(:disabled)
|
|
||||||
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
|
|
||||||
border-color $theme-color
|
|
||||||
|
|
||||||
&:active:not(:disabled)
|
|
||||||
background $theme-color
|
|
||||||
border-color $theme-color
|
|
||||||
|
|
||||||
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 $theme-color
|
|
||||||
|
|
||||||
.ui.from.group
|
|
||||||
> p:first-child
|
|
||||||
color #c0c7cc
|
|
||||||
|
|
@ -128,11 +128,9 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.mk-calendar
|
||||||
|
color var(--calendarDay)
|
||||||
root(isDark)
|
background var(--face)
|
||||||
color isDark ? #c5ced6 : #777
|
|
||||||
background isDark ? #282C37 : #fff
|
|
||||||
box-shadow var(--shadow)
|
box-shadow var(--shadow)
|
||||||
border-radius var(--round)
|
border-radius var(--round)
|
||||||
overflow hidden
|
overflow hidden
|
||||||
|
|
@ -149,12 +147,10 @@ root(isDark)
|
||||||
line-height 42px
|
line-height 42px
|
||||||
font-size 0.9em
|
font-size 0.9em
|
||||||
font-weight bold
|
font-weight bold
|
||||||
color isDark ? #c5ced6 : #888
|
color var(--faceHeaderText)
|
||||||
|
background var(--faceHeader)
|
||||||
box-shadow 0 1px rgba(#000, 0.07)
|
box-shadow 0 1px rgba(#000, 0.07)
|
||||||
|
|
||||||
if isDark
|
|
||||||
background #313543
|
|
||||||
|
|
||||||
> [data-fa]
|
> [data-fa]
|
||||||
margin-right 4px
|
margin-right 4px
|
||||||
|
|
||||||
|
|
@ -166,13 +162,13 @@ root(isDark)
|
||||||
width 42px
|
width 42px
|
||||||
font-size 0.9em
|
font-size 0.9em
|
||||||
line-height 42px
|
line-height 42px
|
||||||
color isDark ? #9baec8 : #ccc
|
color var(--faceTextButton)
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
color isDark ? #b2c1d5 : #aaa
|
color var(--faceTextButtonHover)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
color isDark ? #b2c1d5 : #999
|
color var(--faceTextButtonActive)
|
||||||
|
|
||||||
&:first-of-type
|
&:first-of-type
|
||||||
left 0
|
left 0
|
||||||
|
|
@ -195,65 +191,56 @@ root(isDark)
|
||||||
font-size 14px
|
font-size 14px
|
||||||
|
|
||||||
&.weekday
|
&.weekday
|
||||||
color isDark ? #43d5dc : #19a2a9
|
color var(--calendarWeek)
|
||||||
|
|
||||||
&[data-is-donichi]
|
&[data-is-donichi]
|
||||||
color isDark ? #ff6679 : #ef95a0
|
color var(--calendarSaturdayOrSunday)
|
||||||
|
|
||||||
&[data-today]
|
&[data-today]
|
||||||
box-shadow 0 0 0 1px isDark ? #43d5dc : #19a2a9 inset
|
box-shadow 0 0 0 1px var(--calendarWeek) inset
|
||||||
border-radius 6px
|
border-radius 6px
|
||||||
|
|
||||||
&[data-is-donichi]
|
&[data-is-donichi]
|
||||||
box-shadow 0 0 0 1px isDark ? #ff6679 : #ef95a0 inset
|
box-shadow 0 0 0 1px var(--calendarSaturdayOrSunday) inset
|
||||||
|
|
||||||
&.day
|
&.day
|
||||||
cursor pointer
|
cursor pointer
|
||||||
color isDark ? #c5ced6 : #777
|
color var(--calendarDay)
|
||||||
|
|
||||||
> div
|
> div
|
||||||
border-radius 6px
|
border-radius 6px
|
||||||
|
|
||||||
&:hover > div
|
&:hover > div
|
||||||
background rgba(#000, isDark ? 0.1 : 0.025)
|
background var(--faceClearButtonHover)
|
||||||
|
|
||||||
&:active > div
|
&:active > div
|
||||||
background rgba(#000, isDark ? 0.2 : 0.05)
|
background var(--faceClearButtonActive)
|
||||||
|
|
||||||
&[data-is-donichi]
|
&[data-is-donichi]
|
||||||
color isDark ? #ff6679 : #ef95a0
|
color var(--calendarSaturdayOrSunday)
|
||||||
|
|
||||||
&[data-is-out-of-range]
|
&[data-is-out-of-range]
|
||||||
cursor default
|
cursor default
|
||||||
color rgba(isDark ? #c5ced6 : #777, 0.5)
|
opacity 0.5
|
||||||
|
|
||||||
&[data-is-donichi]
|
|
||||||
color rgba(isDark ? #ff6679 : #ef95a0, 0.5)
|
|
||||||
|
|
||||||
&[data-selected]
|
&[data-selected]
|
||||||
font-weight bold
|
font-weight bold
|
||||||
|
|
||||||
> div
|
> div
|
||||||
background rgba(#000, isDark ? 0.1 : 0.025)
|
background var(--faceClearButtonHover)
|
||||||
|
|
||||||
&:active > div
|
&:active > div
|
||||||
background rgba(#000, isDark ? 0.2 : 0.05)
|
background var(--faceClearButtonActive)
|
||||||
|
|
||||||
&[data-today]
|
&[data-today]
|
||||||
> div
|
> div
|
||||||
color $theme-color-foreground
|
color var(--primaryForeground)
|
||||||
background $theme-color
|
background var(--primary)
|
||||||
|
|
||||||
&:hover > div
|
&:hover > div
|
||||||
background lighten($theme-color, 10%)
|
background var(--primaryLighten10)
|
||||||
|
|
||||||
&:active > div
|
&:active > div
|
||||||
background darken($theme-color, 10%)
|
background var(--primaryDarken10)
|
||||||
|
|
||||||
.mk-calendar[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.mk-calendar:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -649,7 +649,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
|
||||||
|
|
||||||
.gkgckalzgidaygcxnugepioremxvxvpt
|
.gkgckalzgidaygcxnugepioremxvxvpt
|
||||||
padding 32px
|
padding 32px
|
||||||
|
|
@ -675,7 +675,7 @@ export default Vue.extend({
|
||||||
|
|
||||||
*
|
*
|
||||||
&:not(.active)
|
&:not(.active)
|
||||||
color $theme-color
|
color var(--primary)
|
||||||
cursor pointer
|
cursor pointer
|
||||||
|
|
||||||
> div
|
> div
|
||||||
|
|
|
||||||
|
|
@ -59,7 +59,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" module>
|
<style lang="stylus" module>
|
||||||
@import '~const.styl'
|
|
||||||
|
|
||||||
.title
|
.title
|
||||||
> [data-fa]
|
> [data-fa]
|
||||||
|
|
@ -74,7 +74,7 @@ export default Vue.extend({
|
||||||
|
|
||||||
.footer
|
.footer
|
||||||
height 72px
|
height 72px
|
||||||
background lighten($theme-color, 95%)
|
background var(--primaryLighten95)
|
||||||
|
|
||||||
.upload
|
.upload
|
||||||
display inline-block
|
display inline-block
|
||||||
|
|
@ -87,7 +87,7 @@ export default Vue.extend({
|
||||||
width 40px
|
width 40px
|
||||||
height 40px
|
height 40px
|
||||||
font-size 1em
|
font-size 1em
|
||||||
color rgba($theme-color, 0.5)
|
color var(--primaryAlpha05)
|
||||||
background transparent
|
background transparent
|
||||||
outline none
|
outline none
|
||||||
border solid 1px transparent
|
border solid 1px transparent
|
||||||
|
|
@ -95,13 +95,13 @@ export default Vue.extend({
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background transparent
|
background transparent
|
||||||
border-color rgba($theme-color, 0.3)
|
border-color var(--primaryAlpha03)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
color rgba($theme-color, 0.6)
|
color var(--primaryAlpha06)
|
||||||
background transparent
|
background transparent
|
||||||
border-color rgba($theme-color, 0.5)
|
border-color var(--primaryAlpha05)
|
||||||
box-shadow 0 2px 4px rgba(darken($theme-color, 50%), 0.15) inset
|
//box-shadow 0 2px 4px rgba(var(--primaryDarken50), 0.15) inset
|
||||||
|
|
||||||
&:focus
|
&:focus
|
||||||
&:after
|
&:after
|
||||||
|
|
@ -112,7 +112,7 @@ export default Vue.extend({
|
||||||
right -5px
|
right -5px
|
||||||
bottom -5px
|
bottom -5px
|
||||||
left -5px
|
left -5px
|
||||||
border 2px solid rgba($theme-color, 0.3)
|
border 2px solid var(--primaryAlpha03)
|
||||||
border-radius 8px
|
border-radius 8px
|
||||||
|
|
||||||
.ok
|
.ok
|
||||||
|
|
@ -138,7 +138,7 @@ export default Vue.extend({
|
||||||
right -5px
|
right -5px
|
||||||
bottom -5px
|
bottom -5px
|
||||||
left -5px
|
left -5px
|
||||||
border 2px solid rgba($theme-color, 0.3)
|
border 2px solid var(--primaryAlpha03)
|
||||||
border-radius 8px
|
border-radius 8px
|
||||||
|
|
||||||
&:disabled
|
&:disabled
|
||||||
|
|
@ -147,20 +147,20 @@ export default Vue.extend({
|
||||||
|
|
||||||
.ok
|
.ok
|
||||||
right 16px
|
right 16px
|
||||||
color $theme-color-foreground
|
color var(--primaryForeground)
|
||||||
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
|
background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
|
||||||
border solid 1px lighten($theme-color, 15%)
|
border solid 1px var(--primaryLighten15)
|
||||||
|
|
||||||
&:not(:disabled)
|
&:not(:disabled)
|
||||||
font-weight bold
|
font-weight bold
|
||||||
|
|
||||||
&:hover:not(:disabled)
|
&:hover:not(:disabled)
|
||||||
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
|
background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
|
||||||
border-color $theme-color
|
border-color var(--primary)
|
||||||
|
|
||||||
&:active:not(:disabled)
|
&:active:not(:disabled)
|
||||||
background $theme-color
|
background var(--primary)
|
||||||
border-color $theme-color
|
border-color var(--primary)
|
||||||
|
|
||||||
.cancel
|
.cancel
|
||||||
right 148px
|
right 148px
|
||||||
|
|
|
||||||
|
|
@ -37,7 +37,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" module>
|
<style lang="stylus" module>
|
||||||
@import '~const.styl'
|
|
||||||
|
|
||||||
.title
|
.title
|
||||||
> [data-fa]
|
> [data-fa]
|
||||||
|
|
@ -48,7 +48,7 @@ export default Vue.extend({
|
||||||
|
|
||||||
.footer
|
.footer
|
||||||
height 72px
|
height 72px
|
||||||
background lighten($theme-color, 95%)
|
background var(--primaryLighten95)
|
||||||
|
|
||||||
.ok
|
.ok
|
||||||
.cancel
|
.cancel
|
||||||
|
|
@ -73,7 +73,7 @@ export default Vue.extend({
|
||||||
right -5px
|
right -5px
|
||||||
bottom -5px
|
bottom -5px
|
||||||
left -5px
|
left -5px
|
||||||
border 2px solid rgba($theme-color, 0.3)
|
border 2px solid var(--primaryAlpha03)
|
||||||
border-radius 8px
|
border-radius 8px
|
||||||
|
|
||||||
&:disabled
|
&:disabled
|
||||||
|
|
@ -82,20 +82,20 @@ export default Vue.extend({
|
||||||
|
|
||||||
.ok
|
.ok
|
||||||
right 16px
|
right 16px
|
||||||
color $theme-color-foreground
|
color var(--primaryForeground)
|
||||||
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
|
background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
|
||||||
border solid 1px lighten($theme-color, 15%)
|
border solid 1px var(--primaryLighten15)
|
||||||
|
|
||||||
&:not(:disabled)
|
&:not(:disabled)
|
||||||
font-weight bold
|
font-weight bold
|
||||||
|
|
||||||
&:hover:not(:disabled)
|
&:hover:not(:disabled)
|
||||||
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
|
background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
|
||||||
border-color $theme-color
|
border-color var(--primary)
|
||||||
|
|
||||||
&:active:not(:disabled)
|
&:active:not(:disabled)
|
||||||
background $theme-color
|
background var(--primary)
|
||||||
border-color $theme-color
|
border-color var(--primary)
|
||||||
|
|
||||||
.cancel
|
.cancel
|
||||||
right 148px
|
right 148px
|
||||||
|
|
|
||||||
|
|
@ -31,9 +31,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.menu
|
||||||
|
|
||||||
root(isDark)
|
|
||||||
$width = 240px
|
$width = 240px
|
||||||
$item-height = 38px
|
$item-height = 38px
|
||||||
$padding = 10px
|
$padding = 10px
|
||||||
|
|
@ -48,7 +46,7 @@ root(isDark)
|
||||||
&.divider
|
&.divider
|
||||||
margin-top $padding
|
margin-top $padding
|
||||||
padding-top $padding
|
padding-top $padding
|
||||||
border-top solid 1px isDark ? #1c2023 : #eee
|
border-top solid 1px var(--faceDivider)
|
||||||
|
|
||||||
&.nest
|
&.nest
|
||||||
> p
|
> p
|
||||||
|
|
@ -69,7 +67,7 @@ root(isDark)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
> p, a
|
> p, a
|
||||||
background $theme-color
|
background var(--primary)
|
||||||
|
|
||||||
> p, a
|
> p, a
|
||||||
display block
|
display block
|
||||||
|
|
@ -77,7 +75,7 @@ root(isDark)
|
||||||
margin 0
|
margin 0
|
||||||
padding 0 32px 0 38px
|
padding 0 32px 0 38px
|
||||||
line-height $item-height
|
line-height $item-height
|
||||||
color isDark ? #c8cece : #868C8C
|
color var(--text)
|
||||||
text-decoration none
|
text-decoration none
|
||||||
cursor pointer
|
cursor pointer
|
||||||
|
|
||||||
|
|
@ -90,14 +88,14 @@ root(isDark)
|
||||||
&:hover
|
&:hover
|
||||||
> p, a
|
> p, a
|
||||||
text-decoration none
|
text-decoration none
|
||||||
background $theme-color
|
background var(--primary)
|
||||||
color $theme-color-foreground
|
color var(--primaryForeground)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
> p, a
|
> p, a
|
||||||
text-decoration none
|
text-decoration none
|
||||||
background darken($theme-color, 10%)
|
background var(--primaryDarken10)
|
||||||
color $theme-color-foreground
|
color var(--primaryForeground)
|
||||||
|
|
||||||
li > ul
|
li > ul
|
||||||
visibility hidden
|
visibility hidden
|
||||||
|
|
@ -106,17 +104,11 @@ root(isDark)
|
||||||
left $width
|
left $width
|
||||||
margin-top -($padding)
|
margin-top -($padding)
|
||||||
width $width
|
width $width
|
||||||
background isDark ? #282c37 :#fff
|
background var(--popupBg)
|
||||||
border-radius 0 4px 4px 4px
|
border-radius 0 4px 4px 4px
|
||||||
box-shadow 2px 2px 8px rgba(#000, 0.2)
|
box-shadow 2px 2px 8px rgba(#000, 0.2)
|
||||||
transition visibility 0s linear 0.2s
|
transition visibility 0s linear 0.2s
|
||||||
|
|
||||||
.menu[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.menu:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style lang="stylus" module>
|
<style lang="stylus" module>
|
||||||
|
|
|
||||||
|
|
@ -71,7 +71,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
root(isDark)
|
.context-menu
|
||||||
$width = 240px
|
$width = 240px
|
||||||
$item-height = 38px
|
$item-height = 38px
|
||||||
$padding = 10px
|
$padding = 10px
|
||||||
|
|
@ -82,15 +82,9 @@ root(isDark)
|
||||||
z-index 4096
|
z-index 4096
|
||||||
width $width
|
width $width
|
||||||
font-size 0.8em
|
font-size 0.8em
|
||||||
background isDark ? #282c37 : #fff
|
background var(--popupBg)
|
||||||
border-radius 0 4px 4px 4px
|
border-radius 0 4px 4px 4px
|
||||||
box-shadow 2px 2px 8px rgba(#000, 0.2)
|
box-shadow 2px 2px 8px rgba(#000, 0.2)
|
||||||
opacity 0
|
opacity 0
|
||||||
|
|
||||||
.context-menu[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.context-menu:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -61,7 +61,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" module>
|
<style lang="stylus" module>
|
||||||
@import '~const.styl'
|
|
||||||
|
|
||||||
.header
|
.header
|
||||||
> [data-fa]
|
> [data-fa]
|
||||||
|
|
@ -73,7 +73,7 @@ export default Vue.extend({
|
||||||
|
|
||||||
.actions
|
.actions
|
||||||
height 72px
|
height 72px
|
||||||
background lighten($theme-color, 95%)
|
background var(--primaryLighten95)
|
||||||
|
|
||||||
.ok
|
.ok
|
||||||
.cancel
|
.cancel
|
||||||
|
|
@ -98,7 +98,7 @@ export default Vue.extend({
|
||||||
right -5px
|
right -5px
|
||||||
bottom -5px
|
bottom -5px
|
||||||
left -5px
|
left -5px
|
||||||
border 2px solid rgba($theme-color, 0.3)
|
border 2px solid var(--primaryAlpha03)
|
||||||
border-radius 8px
|
border-radius 8px
|
||||||
|
|
||||||
&:disabled
|
&:disabled
|
||||||
|
|
@ -111,20 +111,20 @@ export default Vue.extend({
|
||||||
|
|
||||||
.ok
|
.ok
|
||||||
right 16px
|
right 16px
|
||||||
color $theme-color-foreground
|
color var(--primaryForeground)
|
||||||
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
|
background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
|
||||||
border solid 1px lighten($theme-color, 15%)
|
border solid 1px var(--primaryLighten15)
|
||||||
|
|
||||||
&:not(:disabled)
|
&:not(:disabled)
|
||||||
font-weight bold
|
font-weight bold
|
||||||
|
|
||||||
&:hover:not(:disabled)
|
&:hover:not(:disabled)
|
||||||
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
|
background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
|
||||||
border-color $theme-color
|
border-color var(--primary)
|
||||||
|
|
||||||
&:active:not(:disabled)
|
&:active:not(:disabled)
|
||||||
background $theme-color
|
background var(--primary)
|
||||||
border-color $theme-color
|
border-color var(--primary)
|
||||||
|
|
||||||
.cancel
|
.cancel
|
||||||
.skip
|
.skip
|
||||||
|
|
@ -155,11 +155,11 @@ export default Vue.extend({
|
||||||
}
|
}
|
||||||
|
|
||||||
.cropper-view-box {
|
.cropper-view-box {
|
||||||
outline-color: $theme-color;
|
outline-color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cropper-line, .cropper-point {
|
.cropper-line, .cropper-point {
|
||||||
background-color: $theme-color;
|
background-color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cropper-bg {
|
.cropper-bg {
|
||||||
|
|
|
||||||
|
|
@ -91,7 +91,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
|
||||||
|
|
||||||
.mk-dialog
|
.mk-dialog
|
||||||
> .bg
|
> .bg
|
||||||
|
|
@ -144,20 +144,20 @@ export default Vue.extend({
|
||||||
margin 0 0.375em
|
margin 0 0.375em
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
color $theme-color
|
color var(--primary)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
color darken($theme-color, 10%)
|
color var(--primaryDarken10)
|
||||||
transition color 0s ease
|
transition color 0s ease
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style lang="stylus" module>
|
<style lang="stylus" module>
|
||||||
@import '~const.styl'
|
|
||||||
|
|
||||||
.header
|
.header
|
||||||
margin 1em 0
|
margin 1em 0
|
||||||
color $theme-color
|
color var(--primary)
|
||||||
// color #43A4EC
|
// color #43A4EC
|
||||||
font-weight bold
|
font-weight bold
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -200,9 +200,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.gvfdktuvdgwhmztnuekzkswkjygptfcv
|
||||||
|
|
||||||
root(isDark)
|
|
||||||
padding 8px 0 0 0
|
padding 8px 0 0 0
|
||||||
height 180px
|
height 180px
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
|
|
@ -237,13 +235,13 @@ root(isDark)
|
||||||
background #ce2212
|
background #ce2212
|
||||||
|
|
||||||
&[data-is-selected]
|
&[data-is-selected]
|
||||||
background $theme-color
|
background var(--primary)
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background lighten($theme-color, 10%)
|
background var(--primaryLighten10)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
background darken($theme-color, 10%)
|
background var(--primaryDarken10)
|
||||||
|
|
||||||
> .label
|
> .label
|
||||||
&:before
|
&:before
|
||||||
|
|
@ -251,7 +249,7 @@ root(isDark)
|
||||||
display none
|
display none
|
||||||
|
|
||||||
> .name
|
> .name
|
||||||
color $theme-color-foreground
|
color var(--primaryForeground)
|
||||||
|
|
||||||
&[data-is-contextmenu-showing]
|
&[data-is-contextmenu-showing]
|
||||||
&:after
|
&:after
|
||||||
|
|
@ -262,7 +260,7 @@ root(isDark)
|
||||||
right -4px
|
right -4px
|
||||||
bottom -4px
|
bottom -4px
|
||||||
left -4px
|
left -4px
|
||||||
border 2px dashed rgba($theme-color, 0.3)
|
border 2px dashed var(--primaryAlpha03)
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
|
|
||||||
> .label
|
> .label
|
||||||
|
|
@ -337,16 +335,10 @@ root(isDark)
|
||||||
font-size 0.8em
|
font-size 0.8em
|
||||||
text-align center
|
text-align center
|
||||||
word-break break-all
|
word-break break-all
|
||||||
color isDark ? #fff : #444
|
color var(--text)
|
||||||
overflow hidden
|
overflow hidden
|
||||||
|
|
||||||
> .ext
|
> .ext
|
||||||
opacity 0.5
|
opacity 0.5
|
||||||
|
|
||||||
.gvfdktuvdgwhmztnuekzkswkjygptfcv[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.gvfdktuvdgwhmztnuekzkswkjygptfcv:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -214,12 +214,10 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.ynntpczxvnusfwdyxsfuhvcmuypqopdd
|
||||||
|
|
||||||
root(isDark)
|
|
||||||
padding 8px
|
padding 8px
|
||||||
height 64px
|
height 64px
|
||||||
background isDark ? rgba($theme-color, 0.2) : lighten($theme-color, 95%)
|
background var(--desktopDriveFolderBg)
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
|
|
||||||
&, *
|
&, *
|
||||||
|
|
@ -229,10 +227,10 @@ root(isDark)
|
||||||
pointer-events none
|
pointer-events none
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background isDark ? rgba(lighten($theme-color, 10%), 0.2) : lighten($theme-color, 90%)
|
background var(--desktopDriveFolderHoverBg)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
background isDark ? rgba(darken($theme-color, 10%), 0.2) : lighten($theme-color, 85%)
|
background var(--desktopDriveFolderActiveBg)
|
||||||
|
|
||||||
&[data-is-contextmenu-showing]
|
&[data-is-contextmenu-showing]
|
||||||
&[data-draghover]
|
&[data-draghover]
|
||||||
|
|
@ -244,26 +242,20 @@ root(isDark)
|
||||||
right -4px
|
right -4px
|
||||||
bottom -4px
|
bottom -4px
|
||||||
left -4px
|
left -4px
|
||||||
border 2px dashed rgba($theme-color, 0.3)
|
border 2px dashed var(--primaryAlpha03)
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
|
|
||||||
&[data-draghover]
|
&[data-draghover]
|
||||||
background isDark ? rgba(darken($theme-color, 10%), 0.2) : lighten($theme-color, 90%)
|
background var(--desktopDriveFolderActiveBg)
|
||||||
|
|
||||||
> .name
|
> .name
|
||||||
margin 0
|
margin 0
|
||||||
font-size 0.9em
|
font-size 0.9em
|
||||||
color isDark ? #fff : darken($theme-color, 30%)
|
color var(--desktopDriveFolderFg)
|
||||||
|
|
||||||
> [data-fa]
|
> [data-fa]
|
||||||
margin-right 4px
|
margin-right 4px
|
||||||
margin-left 2px
|
margin-left 2px
|
||||||
text-align left
|
text-align left
|
||||||
|
|
||||||
.ynntpczxvnusfwdyxsfuhvcmuypqopdd[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.ynntpczxvnusfwdyxsfuhvcmuypqopdd:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -585,18 +585,15 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.mk-drive
|
||||||
|
|
||||||
root(isDark)
|
|
||||||
|
|
||||||
> nav
|
> nav
|
||||||
display block
|
display block
|
||||||
z-index 2
|
z-index 2
|
||||||
width 100%
|
width 100%
|
||||||
overflow auto
|
overflow auto
|
||||||
font-size 0.9em
|
font-size 0.9em
|
||||||
color isDark ? #d2d9dc : #555
|
color var(--text)
|
||||||
background isDark ? #282c37 : #fff
|
background var(--face)
|
||||||
box-shadow 0 1px 0 rgba(#000, 0.05)
|
box-shadow 0 1px 0 rgba(#000, 0.05)
|
||||||
|
|
||||||
&, *
|
&, *
|
||||||
|
|
@ -674,7 +671,7 @@ root(isDark)
|
||||||
padding 8px
|
padding 8px
|
||||||
height calc(100% - 38px)
|
height calc(100% - 38px)
|
||||||
overflow auto
|
overflow auto
|
||||||
background isDark ? #191b22 : #fff
|
background var(--desktopDriveBg)
|
||||||
|
|
||||||
&, *
|
&, *
|
||||||
user-select none
|
user-select none
|
||||||
|
|
@ -697,8 +694,8 @@ root(isDark)
|
||||||
z-index 128
|
z-index 128
|
||||||
top 0
|
top 0
|
||||||
left 0
|
left 0
|
||||||
border solid 1px $theme-color
|
border solid 1px var(--primary)
|
||||||
background rgba($theme-color, 0.5)
|
background var(--primaryAlpha05)
|
||||||
pointer-events none
|
pointer-events none
|
||||||
|
|
||||||
> .contents
|
> .contents
|
||||||
|
|
@ -769,7 +766,7 @@ root(isDark)
|
||||||
top 38px
|
top 38px
|
||||||
width 100%
|
width 100%
|
||||||
height calc(100% - 38px)
|
height calc(100% - 38px)
|
||||||
border dashed 2px rgba($theme-color, 0.5)
|
border dashed 2px var(--primaryAlpha05)
|
||||||
pointer-events none
|
pointer-events none
|
||||||
|
|
||||||
> .mk-uploader
|
> .mk-uploader
|
||||||
|
|
@ -780,10 +777,4 @@ root(isDark)
|
||||||
> input
|
> input
|
||||||
display none
|
display none
|
||||||
|
|
||||||
.mk-drive[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.mk-drive:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -101,9 +101,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.mk-follow-button
|
||||||
|
|
||||||
root(isDark)
|
|
||||||
display block
|
display block
|
||||||
cursor pointer
|
cursor pointer
|
||||||
padding 0
|
padding 0
|
||||||
|
|
@ -126,37 +124,34 @@ root(isDark)
|
||||||
right -5px
|
right -5px
|
||||||
bottom -5px
|
bottom -5px
|
||||||
left -5px
|
left -5px
|
||||||
border 2px solid rgba($theme-color, 0.3)
|
border 2px solid var(--primaryAlpha03)
|
||||||
border-radius 8px
|
border-radius 8px
|
||||||
|
|
||||||
&:not(.active)
|
&:not(.active)
|
||||||
color isDark ? #fff : #888
|
color var(--primary)
|
||||||
background isDark ? linear-gradient(to bottom, #313543 0%, #282c37 100%) : linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
|
border solid 1px var(--primary)
|
||||||
border solid 1px isDark ? #1c2023 : #e2e2e2
|
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background isDark ? linear-gradient(to bottom, #2c2f3c 0%, #22262f 100%) : linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
|
background var(--primaryAlpha03)
|
||||||
border-color isDark ? #151a1d : #dcdcdc
|
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
background isDark ? #22262f : #ececec
|
background var(--primaryAlpha05)
|
||||||
border-color isDark ? #151a1d : #dcdcdc
|
|
||||||
|
|
||||||
&.active
|
&.active
|
||||||
color $theme-color-foreground
|
color var(--primaryForeground)
|
||||||
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
|
background var(--primary)
|
||||||
border solid 1px lighten($theme-color, 15%)
|
border solid 1px var(--primary)
|
||||||
|
|
||||||
&:not(:disabled)
|
&:not(:disabled)
|
||||||
font-weight bold
|
font-weight bold
|
||||||
|
|
||||||
&:hover:not(:disabled)
|
&:hover:not(:disabled)
|
||||||
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
|
background var(--primaryLighten5)
|
||||||
border-color $theme-color
|
border-color var(--primaryLighten5)
|
||||||
|
|
||||||
&:active:not(:disabled)
|
&:active:not(:disabled)
|
||||||
background $theme-color
|
background var(--primaryDarken5)
|
||||||
border-color $theme-color
|
border-color var(--primaryDarken5)
|
||||||
|
|
||||||
&.wait
|
&.wait
|
||||||
cursor wait !important
|
cursor wait !important
|
||||||
|
|
@ -167,10 +162,4 @@ root(isDark)
|
||||||
height 38px
|
height 38px
|
||||||
line-height 38px
|
line-height 38px
|
||||||
|
|
||||||
.mk-follow-button[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.mk-follow-button:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -247,9 +247,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.mk-home
|
||||||
|
|
||||||
root(isDark)
|
|
||||||
display block
|
display block
|
||||||
|
|
||||||
&[data-customize]
|
&[data-customize]
|
||||||
|
|
@ -279,8 +277,8 @@ root(isDark)
|
||||||
left 0
|
left 0
|
||||||
width 100%
|
width 100%
|
||||||
height 48px
|
height 48px
|
||||||
color isDark ? #fff : #000
|
color var(--text)
|
||||||
background isDark ? #313543 : #f7f7f7
|
background var(--desktopHeaderBg)
|
||||||
box-shadow 0 1px 1px rgba(#000, 0.075)
|
box-shadow 0 1px 1px rgba(#000, 0.075)
|
||||||
|
|
||||||
> a
|
> a
|
||||||
|
|
@ -292,15 +290,15 @@ root(isDark)
|
||||||
padding 0 16px
|
padding 0 16px
|
||||||
line-height 48px
|
line-height 48px
|
||||||
text-decoration none
|
text-decoration none
|
||||||
color $theme-color-foreground
|
color var(--primaryForeground)
|
||||||
background $theme-color
|
background var(--primary)
|
||||||
transition background 0.1s ease
|
transition background 0.1s ease
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background lighten($theme-color, 10%)
|
background var(--primaryLighten10)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
background darken($theme-color, 10%)
|
background var(--primaryDarken10)
|
||||||
transition background 0s ease
|
transition background 0s ease
|
||||||
|
|
||||||
> [data-fa]
|
> [data-fa]
|
||||||
|
|
@ -320,7 +318,7 @@ root(isDark)
|
||||||
line-height 48px
|
line-height 48px
|
||||||
|
|
||||||
&.trash
|
&.trash
|
||||||
border-left solid 1px isDark ? #1c2023 : #ddd
|
border-left solid 1px var(--faceDivider)
|
||||||
|
|
||||||
> div
|
> div
|
||||||
width 100%
|
width 100%
|
||||||
|
|
@ -395,10 +393,4 @@ root(isDark)
|
||||||
max-width 700px
|
max-width 700px
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
|
|
||||||
.mk-home[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.mk-home:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -76,7 +76,7 @@ export default Vue.extend({
|
||||||
|
|
||||||
|
|
||||||
<style lang="stylus" module>
|
<style lang="stylus" module>
|
||||||
@import '~const.styl'
|
|
||||||
|
|
||||||
.header
|
.header
|
||||||
> [data-fa]
|
> [data-fa]
|
||||||
|
|
@ -96,25 +96,25 @@ export default Vue.extend({
|
||||||
color #333
|
color #333
|
||||||
background #fff
|
background #fff
|
||||||
outline none
|
outline none
|
||||||
border solid 1px rgba($theme-color, 0.1)
|
border solid 1px var(--primaryAlpha01)
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
transition border-color .3s ease
|
transition border-color .3s ease
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
border-color rgba($theme-color, 0.2)
|
border-color var(--primaryAlpha02)
|
||||||
transition border-color .1s ease
|
transition border-color .1s ease
|
||||||
|
|
||||||
&:focus
|
&:focus
|
||||||
color $theme-color
|
color var(--primary)
|
||||||
border-color rgba($theme-color, 0.5)
|
border-color var(--primaryAlpha05)
|
||||||
transition border-color 0s ease
|
transition border-color 0s ease
|
||||||
|
|
||||||
&::-webkit-input-placeholder
|
&::-webkit-input-placeholder
|
||||||
color rgba($theme-color, 0.3)
|
color var(--primaryAlpha03)
|
||||||
|
|
||||||
.actions
|
.actions
|
||||||
height 72px
|
height 72px
|
||||||
background lighten($theme-color, 95%)
|
background var(--primaryLighten95)
|
||||||
|
|
||||||
.ok
|
.ok
|
||||||
.cancel
|
.cancel
|
||||||
|
|
@ -139,7 +139,7 @@ export default Vue.extend({
|
||||||
right -5px
|
right -5px
|
||||||
bottom -5px
|
bottom -5px
|
||||||
left -5px
|
left -5px
|
||||||
border 2px solid rgba($theme-color, 0.3)
|
border 2px solid var(--primaryAlpha03)
|
||||||
border-radius 8px
|
border-radius 8px
|
||||||
|
|
||||||
&:disabled
|
&:disabled
|
||||||
|
|
@ -148,20 +148,20 @@ export default Vue.extend({
|
||||||
|
|
||||||
.ok
|
.ok
|
||||||
right 16px
|
right 16px
|
||||||
color $theme-color-foreground
|
color var(--primaryForeground)
|
||||||
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
|
background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
|
||||||
border solid 1px lighten($theme-color, 15%)
|
border solid 1px var(--primaryLighten15)
|
||||||
|
|
||||||
&:not(:disabled)
|
&:not(:disabled)
|
||||||
font-weight bold
|
font-weight bold
|
||||||
|
|
||||||
&:hover:not(:disabled)
|
&:hover:not(:disabled)
|
||||||
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
|
background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
|
||||||
border-color $theme-color
|
border-color var(--primary)
|
||||||
|
|
||||||
&:active:not(:disabled)
|
&:active:not(:disabled)
|
||||||
background $theme-color
|
background var(--primary)
|
||||||
border-color $theme-color
|
border-color var(--primary)
|
||||||
|
|
||||||
.cancel
|
.cancel
|
||||||
right 148px
|
right 148px
|
||||||
|
|
|
||||||
|
|
@ -225,12 +225,10 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.mk-note-detail
|
||||||
|
|
||||||
root(isDark)
|
|
||||||
overflow hidden
|
overflow hidden
|
||||||
text-align left
|
text-align left
|
||||||
background isDark ? #282C37 : #fff
|
background var(--face)
|
||||||
box-shadow var(--shadow)
|
box-shadow var(--shadow)
|
||||||
border-radius var(--round)
|
border-radius var(--round)
|
||||||
|
|
||||||
|
|
@ -243,28 +241,28 @@ root(isDark)
|
||||||
text-align center
|
text-align center
|
||||||
color #999
|
color #999
|
||||||
cursor pointer
|
cursor pointer
|
||||||
background isDark ? #21242d : #fafafa
|
background var(--subNoteBg)
|
||||||
outline none
|
outline none
|
||||||
border none
|
border none
|
||||||
border-bottom solid 1px isDark ? #1c2023 : #eef0f2
|
border-bottom solid 1px var(--faceDivider)
|
||||||
border-radius 6px 6px 0 0
|
border-radius var(--round) var(--round) 0 0
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background isDark ? #2e3440 : #f6f6f6
|
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
background isDark ? #21242b : #f0f0f0
|
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
|
||||||
|
|
||||||
&:disabled
|
&:disabled
|
||||||
color isDark ? #21242b : #ccc
|
cursor wait
|
||||||
|
|
||||||
> .conversation
|
> .conversation
|
||||||
> *
|
> *
|
||||||
border-bottom 1px solid isDark ? #1c2023 : #eef0f2
|
border-bottom 1px solid var(--faceDivider)
|
||||||
|
|
||||||
> .renote
|
> .renote
|
||||||
color #9dbb00
|
color var(--renoteText)
|
||||||
background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
|
background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
|
||||||
|
|
||||||
> p
|
> p
|
||||||
margin 0
|
margin 0
|
||||||
|
|
@ -287,7 +285,7 @@ root(isDark)
|
||||||
padding-top 8px
|
padding-top 8px
|
||||||
|
|
||||||
> .reply-to
|
> .reply-to
|
||||||
border-bottom 1px solid isDark ? #1c2023 : #eef0f2
|
border-bottom 1px solid var(--faceDivider)
|
||||||
|
|
||||||
> article
|
> article
|
||||||
padding 28px 32px 18px 32px
|
padding 28px 32px 18px 32px
|
||||||
|
|
@ -299,7 +297,7 @@ root(isDark)
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
> footer > button
|
> footer > button
|
||||||
color isDark ? #707b97 : #888
|
color var(--noteActionsHighlighted)
|
||||||
|
|
||||||
> .avatar
|
> .avatar
|
||||||
width 60px
|
width 60px
|
||||||
|
|
@ -316,7 +314,7 @@ root(isDark)
|
||||||
display inline-block
|
display inline-block
|
||||||
margin 0
|
margin 0
|
||||||
line-height 24px
|
line-height 24px
|
||||||
color isDark ? #fff : #627079
|
color var(--noteHeaderName)
|
||||||
font-size 18px
|
font-size 18px
|
||||||
font-weight 700
|
font-weight 700
|
||||||
text-align left
|
text-align left
|
||||||
|
|
@ -329,14 +327,14 @@ root(isDark)
|
||||||
display block
|
display block
|
||||||
text-align left
|
text-align left
|
||||||
margin 0
|
margin 0
|
||||||
color isDark ? #606984 : #ccc
|
color var(--noteHeaderAcct)
|
||||||
|
|
||||||
> .time
|
> .time
|
||||||
position absolute
|
position absolute
|
||||||
top 0
|
top 0
|
||||||
right 32px
|
right 32px
|
||||||
font-size 1em
|
font-size 1em
|
||||||
color isDark ? #606984 : #c0c0c0
|
color var(--noteHeaderInfo)
|
||||||
|
|
||||||
> .body
|
> .body
|
||||||
padding 8px 0
|
padding 8px 0
|
||||||
|
|
@ -347,7 +345,7 @@ root(isDark)
|
||||||
margin 0
|
margin 0
|
||||||
padding 0
|
padding 0
|
||||||
overflow-wrap break-word
|
overflow-wrap break-word
|
||||||
color isDark ? #fff : #717171
|
color var(--noteText)
|
||||||
|
|
||||||
> .text
|
> .text
|
||||||
margin-right 8px
|
margin-right 8px
|
||||||
|
|
@ -360,14 +358,14 @@ root(isDark)
|
||||||
padding 0
|
padding 0
|
||||||
overflow-wrap break-word
|
overflow-wrap break-word
|
||||||
font-size 1.5em
|
font-size 1.5em
|
||||||
color isDark ? #fff : #717171
|
color var(--noteText)
|
||||||
|
|
||||||
> .renote
|
> .renote
|
||||||
margin 8px 0
|
margin 8px 0
|
||||||
|
|
||||||
> *
|
> *
|
||||||
padding 16px
|
padding 16px
|
||||||
border dashed 1px #c0dac6
|
border dashed 1px var(--quoteBorder)
|
||||||
border-radius 8px
|
border-radius 8px
|
||||||
|
|
||||||
> .location
|
> .location
|
||||||
|
|
@ -394,20 +392,20 @@ root(isDark)
|
||||||
background transparent
|
background transparent
|
||||||
border none
|
border none
|
||||||
font-size 1em
|
font-size 1em
|
||||||
color isDark ? #606984 : #ccc
|
color var(--noteActions)
|
||||||
cursor pointer
|
cursor pointer
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
color isDark ? #a1a8bf : #444
|
color var(--noteActionsHover)
|
||||||
|
|
||||||
&.replyButton:hover
|
&.replyButton:hover
|
||||||
color #0af
|
color var(--noteActionsReplyHover)
|
||||||
|
|
||||||
&.renoteButton:hover
|
&.renoteButton:hover
|
||||||
color #8d0
|
color var(--noteActionsRenoteHover)
|
||||||
|
|
||||||
&.reactionButton:hover
|
&.reactionButton:hover
|
||||||
color #fa0
|
color var(--noteActionsReactionHover)
|
||||||
|
|
||||||
> .count
|
> .count
|
||||||
display inline
|
display inline
|
||||||
|
|
@ -415,16 +413,10 @@ root(isDark)
|
||||||
color #999
|
color #999
|
||||||
|
|
||||||
&.reacted, &.reacted:hover
|
&.reacted, &.reacted:hover
|
||||||
color #fa0
|
color var(--noteActionsReactionHover)
|
||||||
|
|
||||||
> .replies
|
> .replies
|
||||||
> *
|
> *
|
||||||
border-top 1px solid isDark ? #1c2023 : #eef0f2
|
border-top 1px solid var(--faceDivider)
|
||||||
|
|
||||||
.mk-note-detail[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.mk-note-detail:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -47,7 +47,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
root(isDark)
|
.qiziqtywpuaucsgarwajitwaakggnisj
|
||||||
display flex
|
display flex
|
||||||
font-size 0.9em
|
font-size 0.9em
|
||||||
|
|
||||||
|
|
@ -71,7 +71,7 @@ root(isDark)
|
||||||
margin 0
|
margin 0
|
||||||
padding 0
|
padding 0
|
||||||
overflow-wrap break-word
|
overflow-wrap break-word
|
||||||
color isDark ? #fff : #717171
|
color var(--noteText)
|
||||||
|
|
||||||
> .text
|
> .text
|
||||||
margin-right 8px
|
margin-right 8px
|
||||||
|
|
@ -81,12 +81,6 @@ root(isDark)
|
||||||
cursor default
|
cursor default
|
||||||
margin 0
|
margin 0
|
||||||
padding 0
|
padding 0
|
||||||
color isDark ? #959ba7 : #717171
|
color var(--subNoteText)
|
||||||
|
|
||||||
.qiziqtywpuaucsgarwajitwaakggnisj[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.qiziqtywpuaucsgarwajitwaakggnisj:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -42,12 +42,12 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
root(isDark)
|
.tkfdzaxtkdeianobciwadajxzbddorql
|
||||||
display flex
|
display flex
|
||||||
margin 0
|
margin 0
|
||||||
padding 16px 32px
|
padding 16px 32px
|
||||||
font-size 0.9em
|
font-size 0.9em
|
||||||
background isDark ? #21242d : #fcfcfc
|
background var(--subNoteBg)
|
||||||
|
|
||||||
> .avatar
|
> .avatar
|
||||||
flex-shrink 0
|
flex-shrink 0
|
||||||
|
|
@ -72,7 +72,7 @@ root(isDark)
|
||||||
margin 0
|
margin 0
|
||||||
padding 0
|
padding 0
|
||||||
overflow-wrap break-word
|
overflow-wrap break-word
|
||||||
color isDark ? #fff : #717171
|
color var(--noteText)
|
||||||
|
|
||||||
> .text
|
> .text
|
||||||
margin-right 8px
|
margin-right 8px
|
||||||
|
|
@ -82,16 +82,10 @@ root(isDark)
|
||||||
cursor default
|
cursor default
|
||||||
margin 0
|
margin 0
|
||||||
padding 0
|
padding 0
|
||||||
color isDark ? #959ba7 : #717171
|
color var(--subNoteText)
|
||||||
|
|
||||||
pre
|
pre
|
||||||
max-height 120px
|
max-height 120px
|
||||||
font-size 80%
|
font-size 80%
|
||||||
|
|
||||||
.tkfdzaxtkdeianobciwadajxzbddorql[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.tkfdzaxtkdeianobciwadajxzbddorql:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -317,13 +317,11 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.note
|
||||||
|
|
||||||
root(isDark)
|
|
||||||
margin 0
|
margin 0
|
||||||
padding 0
|
padding 0
|
||||||
background isDark ? #282C37 : #fff
|
background var(--face)
|
||||||
border-bottom solid 1px isDark ? #1c2023 : #eaeaea
|
border-bottom solid 1px var(--faceDivider)
|
||||||
|
|
||||||
&[data-round]
|
&[data-round]
|
||||||
&:first-child
|
&:first-child
|
||||||
|
|
@ -348,7 +346,7 @@ root(isDark)
|
||||||
right 2px
|
right 2px
|
||||||
bottom 2px
|
bottom 2px
|
||||||
left 2px
|
left 2px
|
||||||
border 2px solid rgba($theme-color, 0.3)
|
border 2px solid var(--primaryAlpha03)
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
|
|
||||||
> .renote
|
> .renote
|
||||||
|
|
@ -357,8 +355,8 @@ root(isDark)
|
||||||
padding 16px 32px 8px 32px
|
padding 16px 32px 8px 32px
|
||||||
line-height 28px
|
line-height 28px
|
||||||
white-space pre
|
white-space pre
|
||||||
color #9dbb00
|
color var(--renoteText)
|
||||||
background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
|
background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
|
||||||
|
|
||||||
.avatar
|
.avatar
|
||||||
display inline-block
|
display inline-block
|
||||||
|
|
@ -398,7 +396,7 @@ root(isDark)
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
> .main > footer > button
|
> .main > footer > button
|
||||||
color isDark ? #707b97 : #888
|
color var(--noteActionsHighlighted)
|
||||||
|
|
||||||
> .avatar
|
> .avatar
|
||||||
flex-shrink 0
|
flex-shrink 0
|
||||||
|
|
@ -426,7 +424,7 @@ root(isDark)
|
||||||
margin 0
|
margin 0
|
||||||
padding 0
|
padding 0
|
||||||
overflow-wrap break-word
|
overflow-wrap break-word
|
||||||
color isDark ? #fff : #717171
|
color var(--noteText)
|
||||||
|
|
||||||
> .text
|
> .text
|
||||||
margin-right 8px
|
margin-right 8px
|
||||||
|
|
@ -439,7 +437,7 @@ root(isDark)
|
||||||
margin 0
|
margin 0
|
||||||
padding 0
|
padding 0
|
||||||
overflow-wrap break-word
|
overflow-wrap break-word
|
||||||
color isDark ? #fff : #717171
|
color var(--noteText)
|
||||||
|
|
||||||
>>> .title
|
>>> .title
|
||||||
display block
|
display block
|
||||||
|
|
@ -447,7 +445,7 @@ root(isDark)
|
||||||
padding 4px
|
padding 4px
|
||||||
font-size 90%
|
font-size 90%
|
||||||
text-align center
|
text-align center
|
||||||
background isDark ? #2f3944 : #eef1f3
|
background var(--mfmTitleBg)
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
|
|
||||||
>>> .code
|
>>> .code
|
||||||
|
|
@ -456,17 +454,17 @@ root(isDark)
|
||||||
>>> .quote
|
>>> .quote
|
||||||
margin 8px
|
margin 8px
|
||||||
padding 6px 12px
|
padding 6px 12px
|
||||||
color isDark ? #6f808e : #aaa
|
color var(--mfmQuote)
|
||||||
border-left solid 3px isDark ? #637182 : #eee
|
border-left solid 3px var(--mfmQuoteLine)
|
||||||
|
|
||||||
> .reply
|
> .reply
|
||||||
margin-right 8px
|
margin-right 8px
|
||||||
color isDark ? #99abbf : #717171
|
color var(--text)
|
||||||
|
|
||||||
> .rp
|
> .rp
|
||||||
margin-left 4px
|
margin-left 4px
|
||||||
font-style oblique
|
font-style oblique
|
||||||
color #a0bf46
|
color var(--renoteText)
|
||||||
|
|
||||||
> .location
|
> .location
|
||||||
margin 4px 0
|
margin 4px 0
|
||||||
|
|
@ -491,7 +489,7 @@ root(isDark)
|
||||||
|
|
||||||
> *
|
> *
|
||||||
padding 16px
|
padding 16px
|
||||||
border dashed 1px isDark ? #4e945e : #c0dac6
|
border dashed 1px var(--quoteBorder)
|
||||||
border-radius 8px
|
border-radius 8px
|
||||||
|
|
||||||
> footer
|
> footer
|
||||||
|
|
@ -500,22 +498,22 @@ root(isDark)
|
||||||
padding 0 8px
|
padding 0 8px
|
||||||
line-height 32px
|
line-height 32px
|
||||||
font-size 1em
|
font-size 1em
|
||||||
color isDark ? #606984 : #ddd
|
color var(--noteActions)
|
||||||
background transparent
|
background transparent
|
||||||
border none
|
border none
|
||||||
cursor pointer
|
cursor pointer
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
color isDark ? #a1a8bf : #444
|
color var(--noteActionsHover)
|
||||||
|
|
||||||
&.replyButton:hover
|
&.replyButton:hover
|
||||||
color #0af
|
color var(--noteActionsReplyHover)
|
||||||
|
|
||||||
&.renoteButton:hover
|
&.renoteButton:hover
|
||||||
color #8d0
|
color var(--noteActionsRenoteHover)
|
||||||
|
|
||||||
&.reactionButton:hover
|
&.reactionButton:hover
|
||||||
color #fa0
|
color var(--noteActionsReactionHover)
|
||||||
|
|
||||||
> .count
|
> .count
|
||||||
display inline
|
display inline
|
||||||
|
|
@ -523,18 +521,12 @@ root(isDark)
|
||||||
color #999
|
color #999
|
||||||
|
|
||||||
&.reacted, &.reacted:hover
|
&.reacted, &.reacted:hover
|
||||||
color #fa0
|
color var(--noteActionsReactionHover)
|
||||||
|
|
||||||
> .detail
|
> .detail
|
||||||
padding-top 4px
|
padding-top 4px
|
||||||
background rgba(#000, 0.0125)
|
background rgba(#000, 0.0125)
|
||||||
|
|
||||||
.note[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.note:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style lang="stylus" module>
|
<style lang="stylus" module>
|
||||||
|
|
@ -557,7 +549,7 @@ root(isDark)
|
||||||
padding 0 4px
|
padding 0 4px
|
||||||
margin-left 4px
|
margin-left 4px
|
||||||
font-size 80%
|
font-size 80%
|
||||||
color $theme-color-foreground
|
color var(--primaryForeground)
|
||||||
background $theme-color
|
background var(--primary)
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -216,9 +216,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.mk-notes
|
||||||
|
|
||||||
root(isDark)
|
|
||||||
.transition
|
.transition
|
||||||
.mk-notes-enter
|
.mk-notes-enter
|
||||||
.mk-notes-leave-to
|
.mk-notes-leave-to
|
||||||
|
|
@ -235,9 +233,9 @@ root(isDark)
|
||||||
line-height 32px
|
line-height 32px
|
||||||
font-size 14px
|
font-size 14px
|
||||||
text-align center
|
text-align center
|
||||||
color isDark ? #666b79 : #aaa
|
color var(--dateDividerFg)
|
||||||
background isDark ? #242731 : #fdfdfd
|
background var(--dateDividerBg)
|
||||||
border-bottom solid 1px isDark ? #1c2023 : #eaeaea
|
border-bottom solid 1px var(--faceDivider)
|
||||||
|
|
||||||
span
|
span
|
||||||
margin 0 16px
|
margin 0 16px
|
||||||
|
|
@ -250,7 +248,7 @@ root(isDark)
|
||||||
position sticky
|
position sticky
|
||||||
z-index 100
|
z-index 100
|
||||||
height 3px
|
height 3px
|
||||||
background $theme-color
|
background var(--primary)
|
||||||
|
|
||||||
> footer
|
> footer
|
||||||
> button
|
> button
|
||||||
|
|
@ -260,21 +258,15 @@ root(isDark)
|
||||||
width 100%
|
width 100%
|
||||||
text-align center
|
text-align center
|
||||||
color #ccc
|
color #ccc
|
||||||
background isDark ? #282C37 : #fff
|
background var(--face)
|
||||||
border-top solid 1px isDark ? #1c2023 : #eaeaea
|
border-top solid 1px var(--faceDivider)
|
||||||
border-bottom-left-radius 6px
|
border-bottom-left-radius 6px
|
||||||
border-bottom-right-radius 6px
|
border-bottom-right-radius 6px
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background isDark ? #2e3440 : #f5f5f5
|
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
background isDark ? #21242b : #eee
|
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
|
||||||
|
|
||||||
.mk-notes[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.mk-notes:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -191,7 +191,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
root(isDark)
|
.mk-notifications
|
||||||
.transition
|
.transition
|
||||||
.mk-notifications-enter
|
.mk-notifications-enter
|
||||||
.mk-notifications-leave-to
|
.mk-notifications-leave-to
|
||||||
|
|
@ -208,7 +208,7 @@ root(isDark)
|
||||||
padding 16px
|
padding 16px
|
||||||
overflow-wrap break-word
|
overflow-wrap break-word
|
||||||
font-size 13px
|
font-size 13px
|
||||||
border-bottom solid 1px isDark ? #1c2023 : rgba(#000, 0.05)
|
border-bottom solid 1px var(--faceDivider)
|
||||||
|
|
||||||
&:last-child
|
&:last-child
|
||||||
border-bottom none
|
border-bottom none
|
||||||
|
|
@ -219,7 +219,7 @@ root(isDark)
|
||||||
top 16px
|
top 16px
|
||||||
right 12px
|
right 12px
|
||||||
vertical-align top
|
vertical-align top
|
||||||
color isDark ? #606984 : rgba(#000, 0.6)
|
color var(--noteHeaderInfo)
|
||||||
font-size small
|
font-size small
|
||||||
|
|
||||||
&:after
|
&:after
|
||||||
|
|
@ -249,10 +249,10 @@ root(isDark)
|
||||||
margin-right 4px
|
margin-right 4px
|
||||||
|
|
||||||
.note-preview
|
.note-preview
|
||||||
color isDark ? #c2cad4 : rgba(#000, 0.7)
|
color var(--noteText)
|
||||||
|
|
||||||
.note-ref
|
.note-ref
|
||||||
color isDark ? #c2cad4 : rgba(#000, 0.7)
|
color var(--noteText)
|
||||||
|
|
||||||
[data-fa]
|
[data-fa]
|
||||||
font-size 1em
|
font-size 1em
|
||||||
|
|
@ -283,9 +283,9 @@ root(isDark)
|
||||||
line-height 32px
|
line-height 32px
|
||||||
text-align center
|
text-align center
|
||||||
font-size 0.8em
|
font-size 0.8em
|
||||||
color isDark ? #666b79 : #aaa
|
color var(--dateDividerFg)
|
||||||
background isDark ? #242731 : #fdfdfd
|
background var(--dateDividerBg)
|
||||||
border-bottom solid 1px isDark ? #1c2023 : rgba(#000, 0.05)
|
border-bottom solid 1px var(--faceDivider)
|
||||||
|
|
||||||
span
|
span
|
||||||
margin 0 16px
|
margin 0 16px
|
||||||
|
|
@ -327,10 +327,4 @@ root(isDark)
|
||||||
> [data-fa]
|
> [data-fa]
|
||||||
margin-right 4px
|
margin-right 4px
|
||||||
|
|
||||||
.mk-notifications[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.mk-notifications:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -77,7 +77,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
root(isDark)
|
.mk-post-form-window
|
||||||
.mk-post-form-window--header
|
.mk-post-form-window--header
|
||||||
.icon
|
.icon
|
||||||
margin-right 8px
|
margin-right 8px
|
||||||
|
|
@ -94,15 +94,6 @@ root(isDark)
|
||||||
|
|
||||||
.mk-post-form-window--body
|
.mk-post-form-window--body
|
||||||
.notePreview
|
.notePreview
|
||||||
if isDark
|
|
||||||
margin 16px 22px 0 22px
|
|
||||||
else
|
|
||||||
margin 16px 22px
|
margin 16px 22px
|
||||||
|
|
||||||
.mk-post-form-window[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.mk-post-form-window:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -446,12 +446,10 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.mk-post-form
|
||||||
|
|
||||||
root(isDark)
|
|
||||||
display block
|
display block
|
||||||
padding 16px
|
padding 16px
|
||||||
background isDark ? #282C37 : lighten($theme-color, 95%)
|
background var(--desktopPostFormBg)
|
||||||
|
|
||||||
&:after
|
&:after
|
||||||
content ""
|
content ""
|
||||||
|
|
@ -465,26 +463,26 @@ root(isDark)
|
||||||
width 100%
|
width 100%
|
||||||
padding 12px
|
padding 12px
|
||||||
font-size 16px
|
font-size 16px
|
||||||
color isDark ? #fff : #333
|
color var(--desktopPostFormTextareaFg)
|
||||||
background isDark ? #191d23 : #fff
|
background var(--desktopPostFormTextareaBg)
|
||||||
outline none
|
outline none
|
||||||
border solid 1px rgba($theme-color, 0.1)
|
border solid 1px var(--primaryAlpha01)
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
transition border-color .2s ease
|
transition border-color .2s ease
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
border-color rgba($theme-color, 0.2)
|
border-color var(--primaryAlpha02)
|
||||||
transition border-color .1s ease
|
transition border-color .1s ease
|
||||||
|
|
||||||
&:focus
|
&:focus
|
||||||
border-color rgba($theme-color, 0.5)
|
border-color var(--primaryAlpha05)
|
||||||
transition border-color 0s ease
|
transition border-color 0s ease
|
||||||
|
|
||||||
&:disabled
|
&:disabled
|
||||||
opacity 0.5
|
opacity 0.5
|
||||||
|
|
||||||
&::-webkit-input-placeholder
|
&::-webkit-input-placeholder
|
||||||
color rgba($theme-color, 0.3)
|
color var(--primaryAlpha03)
|
||||||
|
|
||||||
> input
|
> input
|
||||||
margin-bottom 8px
|
margin-bottom 8px
|
||||||
|
|
@ -498,17 +496,17 @@ root(isDark)
|
||||||
&:hover
|
&:hover
|
||||||
& + *
|
& + *
|
||||||
& + * + *
|
& + * + *
|
||||||
border-color rgba($theme-color, 0.2)
|
border-color var(--primaryAlpha02)
|
||||||
transition border-color .1s ease
|
transition border-color .1s ease
|
||||||
|
|
||||||
&:focus
|
&:focus
|
||||||
& + *
|
& + *
|
||||||
& + * + *
|
& + * + *
|
||||||
border-color rgba($theme-color, 0.5)
|
border-color var(--primaryAlpha05)
|
||||||
transition border-color 0s ease
|
transition border-color 0s ease
|
||||||
|
|
||||||
&.with
|
&.with
|
||||||
border-bottom solid 1px rgba($theme-color, 0.1) !important
|
border-bottom solid 1px var(--primaryAlpha01) !important
|
||||||
border-radius 4px 4px 0 0
|
border-radius 4px 4px 0 0
|
||||||
|
|
||||||
> .visibleUsers
|
> .visibleUsers
|
||||||
|
|
@ -517,7 +515,7 @@ root(isDark)
|
||||||
|
|
||||||
> span
|
> span
|
||||||
margin-right 16px
|
margin-right 16px
|
||||||
color isDark ? #fff : #666
|
color var(--primary)
|
||||||
|
|
||||||
> .hashtags
|
> .hashtags
|
||||||
margin 0 0 8px 0
|
margin 0 0 8px 0
|
||||||
|
|
@ -526,7 +524,7 @@ root(isDark)
|
||||||
font-size 14px
|
font-size 14px
|
||||||
|
|
||||||
> b
|
> b
|
||||||
color isDark ? #9baec8 : darken($theme-color, 20%)
|
color var(--primary)
|
||||||
|
|
||||||
> *
|
> *
|
||||||
margin-right 8px
|
margin-right 8px
|
||||||
|
|
@ -535,14 +533,14 @@ root(isDark)
|
||||||
> .files
|
> .files
|
||||||
margin 0
|
margin 0
|
||||||
padding 0
|
padding 0
|
||||||
background isDark ? #181b23 : lighten($theme-color, 98%)
|
background var(--desktopPostFormTextareaBg)
|
||||||
border solid 1px rgba($theme-color, 0.1)
|
border solid 1px var(--primaryAlpha01)
|
||||||
border-top none
|
border-top none
|
||||||
border-radius 0 0 4px 4px
|
border-radius 0 0 4px 4px
|
||||||
transition border-color .3s ease
|
transition border-color .3s ease
|
||||||
|
|
||||||
&.with
|
&.with
|
||||||
border-bottom solid 1px rgba($theme-color, 0.1) !important
|
border-bottom solid 1px var(--primaryAlpha01) !important
|
||||||
border-radius 0
|
border-radius 0
|
||||||
|
|
||||||
> .remain
|
> .remain
|
||||||
|
|
@ -552,7 +550,7 @@ root(isDark)
|
||||||
right 8px
|
right 8px
|
||||||
margin 0
|
margin 0
|
||||||
padding 0
|
padding 0
|
||||||
color rgba($theme-color, 0.4)
|
color var(--primaryAlpha04)
|
||||||
|
|
||||||
> div
|
> div
|
||||||
padding 4px
|
padding 4px
|
||||||
|
|
@ -586,8 +584,8 @@ root(isDark)
|
||||||
cursor pointer
|
cursor pointer
|
||||||
|
|
||||||
> .mk-poll-editor
|
> .mk-poll-editor
|
||||||
background isDark ? #181b23 : lighten($theme-color, 98%)
|
background var(--desktopPostFormTextareaBg)
|
||||||
border solid 1px rgba($theme-color, 0.1)
|
border solid 1px var(--primaryAlpha01)
|
||||||
border-top none
|
border-top none
|
||||||
border-radius 0 0 4px 4px
|
border-radius 0 0 4px 4px
|
||||||
transition border-color .3s ease
|
transition border-color .3s ease
|
||||||
|
|
@ -595,7 +593,7 @@ root(isDark)
|
||||||
> .mk-uploader
|
> .mk-uploader
|
||||||
margin 8px 0 0 0
|
margin 8px 0 0 0
|
||||||
padding 8px
|
padding 8px
|
||||||
border solid 1px rgba($theme-color, 0.2)
|
border solid 1px var(--primaryAlpha02)
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
|
|
||||||
input[type='file']
|
input[type='file']
|
||||||
|
|
@ -612,22 +610,20 @@ root(isDark)
|
||||||
width 110px
|
width 110px
|
||||||
height 40px
|
height 40px
|
||||||
font-size 1em
|
font-size 1em
|
||||||
color $theme-color-foreground
|
color var(--primaryForeground)
|
||||||
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
|
background var(--primary)
|
||||||
outline none
|
outline none
|
||||||
border solid 1px lighten($theme-color, 15%)
|
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, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
|
background var(--primaryLighten5)
|
||||||
border-color $theme-color
|
|
||||||
|
|
||||||
&:active:not(:disabled)
|
&:active:not(:disabled)
|
||||||
background $theme-color
|
background var(--primaryDarken5)
|
||||||
border-color $theme-color
|
|
||||||
|
|
||||||
&:focus
|
&:focus
|
||||||
&:after
|
&:after
|
||||||
|
|
@ -638,7 +634,7 @@ root(isDark)
|
||||||
right -5px
|
right -5px
|
||||||
bottom -5px
|
bottom -5px
|
||||||
left -5px
|
left -5px
|
||||||
border 2px solid rgba($theme-color, 0.3)
|
border 2px solid var(--primaryAlpha03)
|
||||||
border-radius 8px
|
border-radius 8px
|
||||||
|
|
||||||
&:disabled
|
&:disabled
|
||||||
|
|
@ -648,13 +644,13 @@ root(isDark)
|
||||||
&.wait
|
&.wait
|
||||||
background linear-gradient(
|
background linear-gradient(
|
||||||
45deg,
|
45deg,
|
||||||
darken($theme-color, 10%) 25%,
|
var(--primaryDarken10) 25%,
|
||||||
$theme-color 25%,
|
var(--primary) 25%,
|
||||||
$theme-color 50%,
|
var(--primary) 50%,
|
||||||
darken($theme-color, 10%) 50%,
|
var(--primaryDarken10) 50%,
|
||||||
darken($theme-color, 10%) 75%,
|
var(--primaryDarken10) 75%,
|
||||||
$theme-color 75%,
|
var(--primary) 75%,
|
||||||
$theme-color
|
var(--primary)
|
||||||
)
|
)
|
||||||
background-size 32px 32px
|
background-size 32px 32px
|
||||||
animation stripe-bg 1.5s linear infinite
|
animation stripe-bg 1.5s linear infinite
|
||||||
|
|
@ -673,7 +669,7 @@ root(isDark)
|
||||||
right 138px
|
right 138px
|
||||||
margin 0
|
margin 0
|
||||||
line-height 40px
|
line-height 40px
|
||||||
color rgba($theme-color, 0.5)
|
color var(--primaryAlpha05)
|
||||||
|
|
||||||
&.over
|
&.over
|
||||||
color #ec3828
|
color #ec3828
|
||||||
|
|
@ -691,7 +687,7 @@ root(isDark)
|
||||||
width 40px
|
width 40px
|
||||||
height 40px
|
height 40px
|
||||||
font-size 1em
|
font-size 1em
|
||||||
color isDark ? $theme-color : rgba($theme-color, 0.5)
|
color var(--desktopPostFormTransparentButtonFg)
|
||||||
background transparent
|
background transparent
|
||||||
outline none
|
outline none
|
||||||
border solid 1px transparent
|
border solid 1px transparent
|
||||||
|
|
@ -699,12 +695,12 @@ root(isDark)
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background transparent
|
background transparent
|
||||||
border-color isDark ? rgba($theme-color, 0.5) : rgba($theme-color, 0.3)
|
border-color var(--primaryAlpha03)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
color rgba($theme-color, 0.6)
|
color var(--primaryAlpha06)
|
||||||
background isDark ? transparent : linear-gradient(to bottom, lighten($theme-color, 80%) 0%, lighten($theme-color, 90%) 100%)
|
background linear-gradient(to bottom, var(--desktopPostFormTransparentButtonActiveGradientStart) 0%, var(--desktopPostFormTransparentButtonActiveGradientEnd) 100%)
|
||||||
border-color rgba($theme-color, 0.5)
|
border-color var(--primaryAlpha05)
|
||||||
box-shadow 0 2px 4px rgba(#000, 0.15) inset
|
box-shadow 0 2px 4px rgba(#000, 0.15) inset
|
||||||
|
|
||||||
&:focus
|
&:focus
|
||||||
|
|
@ -716,7 +712,7 @@ root(isDark)
|
||||||
right -5px
|
right -5px
|
||||||
bottom -5px
|
bottom -5px
|
||||||
left -5px
|
left -5px
|
||||||
border 2px solid rgba($theme-color, 0.3)
|
border 2px solid var(--primaryAlpha03)
|
||||||
border-radius 8px
|
border-radius 8px
|
||||||
|
|
||||||
> .dropzone
|
> .dropzone
|
||||||
|
|
@ -725,13 +721,7 @@ root(isDark)
|
||||||
top 0
|
top 0
|
||||||
width 100%
|
width 100%
|
||||||
height 100%
|
height 100%
|
||||||
border dashed 2px rgba($theme-color, 0.5)
|
border dashed 2px var(--primaryAlpha05)
|
||||||
pointer-events none
|
pointer-events none
|
||||||
|
|
||||||
.mk-post-form[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.mk-post-form:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -37,7 +37,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" module>
|
<style lang="stylus" module>
|
||||||
@import '~const.styl'
|
|
||||||
|
|
||||||
.body
|
.body
|
||||||
padding 18px 24px 24px 24px
|
padding 18px 24px 24px 24px
|
||||||
|
|
@ -53,7 +53,7 @@ export default Vue.extend({
|
||||||
margin 0 0 4px 0
|
margin 0 0 4px 0
|
||||||
text-align center
|
text-align center
|
||||||
line-height 16px
|
line-height 16px
|
||||||
color rgba($theme-color, 0.7)
|
color var(--primaryAlpha07)
|
||||||
|
|
||||||
&:after
|
&:after
|
||||||
content '%'
|
content '%'
|
||||||
|
|
@ -69,21 +69,21 @@ export default Vue.extend({
|
||||||
overflow hidden
|
overflow hidden
|
||||||
|
|
||||||
&::-webkit-progress-value
|
&::-webkit-progress-value
|
||||||
background $theme-color
|
background var(--primary)
|
||||||
|
|
||||||
&::-webkit-progress-bar
|
&::-webkit-progress-bar
|
||||||
background rgba($theme-color, 0.1)
|
background var(--primaryAlpha01)
|
||||||
|
|
||||||
.waiting
|
.waiting
|
||||||
background linear-gradient(
|
background linear-gradient(
|
||||||
45deg,
|
45deg,
|
||||||
lighten($theme-color, 30%) 25%,
|
var(--primaryLighten30) 25%,
|
||||||
$theme-color 25%,
|
var(--primary) 25%,
|
||||||
$theme-color 50%,
|
var(--primary) 50%,
|
||||||
lighten($theme-color, 30%) 50%,
|
var(--primaryLighten30) 50%,
|
||||||
lighten($theme-color, 30%) 75%,
|
var(--primaryLighten30) 75%,
|
||||||
$theme-color 75%,
|
var(--primary) 75%,
|
||||||
$theme-color
|
var(--primary)
|
||||||
)
|
)
|
||||||
background-size 32px 32px
|
background-size 32px 32px
|
||||||
animation progress-dialog-tag-progress-waiting 1.5s linear infinite
|
animation progress-dialog-tag-progress-waiting 1.5s linear infinite
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
<mk-window ref="window" is-modal width="450px" height="500px" @closed="destroyDom">
|
<mk-window ref="window" is-modal width="450px" height="500px" @closed="destroyDom">
|
||||||
<span slot="header">%fa:envelope R% %i18n:@title%</span>
|
<span slot="header">%fa:envelope R% %i18n:@title%</span>
|
||||||
|
|
||||||
<div class="slpqaxdoxhvglersgjukmvizkqbmbokc" :data-darkmode="$store.state.device.darkmode">
|
<div class="slpqaxdoxhvglersgjukmvizkqbmbokc">
|
||||||
<div v-for="req in requests">
|
<div v-for="req in requests">
|
||||||
<router-link :key="req.id" :to="req.follower | userPage">{{ req.follower | userName }}</router-link>
|
<router-link :key="req.id" :to="req.follower | userPage">{{ req.follower | userName }}</router-link>
|
||||||
<span>
|
<span>
|
||||||
|
|
@ -47,8 +47,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
|
.slpqaxdoxhvglersgjukmvizkqbmbokc
|
||||||
root(isDark)
|
|
||||||
padding 16px
|
padding 16px
|
||||||
|
|
||||||
> button
|
> button
|
||||||
|
|
@ -57,16 +56,10 @@ root(isDark)
|
||||||
> div
|
> div
|
||||||
display flex
|
display flex
|
||||||
padding 16px
|
padding 16px
|
||||||
border solid 1px isDark ? #1c2023 : #eee
|
border solid 1px var(--faceDivider)
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
|
|
||||||
> span
|
> span
|
||||||
margin 0 0 0 auto
|
margin 0 0 0 auto
|
||||||
|
|
||||||
.slpqaxdoxhvglersgjukmvizkqbmbokc[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.slpqaxdoxhvglersgjukmvizkqbmbokc:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
|
|
@ -57,16 +57,13 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.mk-renote-form
|
||||||
|
|
||||||
root(isDark)
|
|
||||||
|
|
||||||
> .preview
|
> .preview
|
||||||
margin 16px 22px
|
margin 16px 22px
|
||||||
|
|
||||||
> footer
|
> footer
|
||||||
height 72px
|
height 72px
|
||||||
background isDark ? #313543 : lighten($theme-color, 95%)
|
background var(--desktopRenoteFormFooter)
|
||||||
|
|
||||||
> .quote
|
> .quote
|
||||||
position absolute
|
position absolute
|
||||||
|
|
@ -74,7 +71,7 @@ root(isDark)
|
||||||
left 28px
|
left 28px
|
||||||
line-height 40px
|
line-height 40px
|
||||||
|
|
||||||
button
|
> .button
|
||||||
display block
|
display block
|
||||||
position absolute
|
position absolute
|
||||||
bottom 16px
|
bottom 16px
|
||||||
|
|
@ -87,10 +84,4 @@ root(isDark)
|
||||||
&.ok
|
&.ok
|
||||||
right 16px
|
right 16px
|
||||||
|
|
||||||
.mk-renote-form[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.mk-renote-form:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -6,31 +6,28 @@
|
||||||
<button class="ui" @click="updateAvatar">%i18n:@choice-avatar%</button>
|
<button class="ui" @click="updateAvatar">%i18n:@choice-avatar%</button>
|
||||||
</label>
|
</label>
|
||||||
<label class="ui from group">
|
<label class="ui from group">
|
||||||
<p>%i18n:@name%</p>
|
<ui-input v-model="name" type="text">%i18n:@name%</ui-input>
|
||||||
<input v-model="name" type="text" class="ui"/>
|
|
||||||
</label>
|
</label>
|
||||||
<label class="ui from group">
|
<label class="ui from group">
|
||||||
<p>%i18n:@location%</p>
|
<ui-input v-model="location" type="text">%i18n:@location%</ui-input>
|
||||||
<input v-model="location" type="text" class="ui"/>
|
|
||||||
</label>
|
</label>
|
||||||
<label class="ui from group">
|
<label class="ui from group">
|
||||||
<p>%i18n:@description%</p>
|
<ui-textarea v-model="description">%i18n:@description%</ui-textarea>
|
||||||
<textarea v-model="description" class="ui"></textarea>
|
|
||||||
</label>
|
</label>
|
||||||
<label class="ui from group">
|
<label class="ui from group">
|
||||||
<p>%i18n:@birthday%</p>
|
<p>%i18n:@birthday%</p>
|
||||||
<input type="date" v-model="birthday"/>
|
<input type="date" v-model="birthday"/>
|
||||||
</label>
|
</label>
|
||||||
<button class="ui primary" @click="save">%i18n:@save%</button>
|
<ui-button primary @click="save">%i18n:@save%</ui-button>
|
||||||
<section>
|
<section>
|
||||||
<h2>%i18n:@locked-account%</h2>
|
<h2>%i18n:@locked-account%</h2>
|
||||||
<mk-switch v-model="$store.state.i.isLocked" @change="onChangeIsLocked" text="%i18n:@is-locked%"/>
|
<ui-switch v-model="$store.state.i.isLocked" @change="onChangeIsLocked">%i18n:@is-locked%</ui-switch>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
<h2>%i18n:@other%</h2>
|
<h2>%i18n:@other%</h2>
|
||||||
<mk-switch v-model="$store.state.i.isBot" @change="onChangeIsBot" text="%i18n:@is-bot%"/>
|
<ui-switch v-model="$store.state.i.isBot" @change="onChangeIsBot">%i18n:@is-bot%</ui-switch>
|
||||||
<mk-switch v-model="$store.state.i.isCat" @change="onChangeIsCat" text="%i18n:@is-cat%"/>
|
<ui-switch v-model="$store.state.i.isCat" @change="onChangeIsCat">%i18n:@is-cat%</ui-switch>
|
||||||
<mk-switch v-model="alwaysMarkNsfw" text="%i18n:common.always-mark-nsfw%"/>
|
<ui-switch v-model="alwaysMarkNsfw">%i18n:common.always-mark-nsfw%</ui-switch>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -47,8 +47,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
|
.vfcitkilproprqtbnpoertpsziierwzi
|
||||||
root(isDark)
|
|
||||||
> .timeline
|
> .timeline
|
||||||
padding-bottom 16px
|
padding-bottom 16px
|
||||||
border-bottom solid 1px rgba(#000, 0.1)
|
border-bottom solid 1px rgba(#000, 0.1)
|
||||||
|
|
@ -56,10 +55,4 @@ root(isDark)
|
||||||
> .add
|
> .add
|
||||||
margin-top 16px
|
margin-top 16px
|
||||||
|
|
||||||
.vfcitkilproprqtbnpoertpsziierwzi[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.vfcitkilproprqtbnpoertpsziierwzi:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -19,18 +19,25 @@
|
||||||
<x-profile/>
|
<x-profile/>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section class="web" v-show="page == 'web'">
|
||||||
|
<h1>%i18n:@theme%</h1>
|
||||||
|
<mk-theme/>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section class="web" v-show="page == 'web'">
|
<section class="web" v-show="page == 'web'">
|
||||||
<h1>%i18n:@behaviour%</h1>
|
<h1>%i18n:@behaviour%</h1>
|
||||||
<mk-switch v-model="fetchOnScroll" text="%i18n:@fetch-on-scroll%">
|
<ui-switch v-model="fetchOnScroll">
|
||||||
<span>%i18n:@fetch-on-scroll-desc%</span>
|
%i18n:@fetch-on-scroll%
|
||||||
</mk-switch>
|
<span slot="desc">%i18n:@fetch-on-scroll-desc%</span>
|
||||||
<mk-switch v-model="autoPopout" text="%i18n:@auto-popout%">
|
</ui-switch>
|
||||||
<span>%i18n:@auto-popout-desc%</span>
|
<ui-switch v-model="autoPopout">
|
||||||
</mk-switch>
|
%i18n:@auto-popout%
|
||||||
|
<span slot="desc">%i18n:@auto-popout-desc%</span>
|
||||||
|
</ui-switch>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<header>%i18n:@note-visibility%</header>
|
<header>%i18n:@note-visibility%</header>
|
||||||
<mk-switch v-model="rememberNoteVisibility" text="%i18n:@remember-note-visibility%"/>
|
<ui-switch v-model="rememberNoteVisibility">%i18n:@remember-note-visibility%</ui-switch>
|
||||||
<section>
|
<section>
|
||||||
<header>%i18n:@default-note-visibility%</header>
|
<header>%i18n:@default-note-visibility%</header>
|
||||||
<ui-select v-model="defaultNoteVisibility">
|
<ui-select v-model="defaultNoteVisibility">
|
||||||
|
|
@ -45,9 +52,10 @@
|
||||||
|
|
||||||
<details>
|
<details>
|
||||||
<summary>%i18n:@advanced%</summary>
|
<summary>%i18n:@advanced%</summary>
|
||||||
<mk-switch v-model="apiViaStream" text="%i18n:@api-via-stream%">
|
<ui-switch v-model="apiViaStream">
|
||||||
<span>%i18n:@api-via-stream-desc%</span>
|
%i18n:@api-via-stream%
|
||||||
</mk-switch>
|
<span slot="desc">%i18n:@api-via-stream-desc%</span>
|
||||||
|
</ui-switch>
|
||||||
</details>
|
</details>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
@ -59,37 +67,35 @@
|
||||||
<div class="div">
|
<div class="div">
|
||||||
<button class="ui" @click="updateWallpaper">%i18n:@choose-wallpaper%</button>
|
<button class="ui" @click="updateWallpaper">%i18n:@choose-wallpaper%</button>
|
||||||
<button class="ui" @click="deleteWallpaper">%i18n:@delete-wallpaper%</button>
|
<button class="ui" @click="deleteWallpaper">%i18n:@delete-wallpaper%</button>
|
||||||
<mk-switch v-model="darkmode" text="%i18n:@dark-mode%"/>
|
<ui-switch v-model="darkmode">%i18n:@dark-mode%</ui-switch>
|
||||||
<mk-switch v-model="useShadow" text="%i18n:@use-shadow%"/>
|
<ui-switch v-model="useShadow">%i18n:@use-shadow%</ui-switch>
|
||||||
<mk-switch v-model="roundedCorners" text="%i18n:@rounded-corners%"/>
|
<ui-switch v-model="roundedCorners">%i18n:@rounded-corners%</ui-switch>
|
||||||
<mk-switch v-model="circleIcons" text="%i18n:@circle-icons%"/>
|
<ui-switch v-model="circleIcons">%i18n:@circle-icons%</ui-switch>
|
||||||
<mk-switch v-model="reduceMotion" text="%i18n:common.reduce-motion%"/>
|
<ui-switch v-model="reduceMotion">%i18n:common.reduce-motion%</ui-switch>
|
||||||
<mk-switch v-model="contrastedAcct" text="%i18n:@contrasted-acct%"/>
|
<ui-switch v-model="contrastedAcct">%i18n:@contrasted-acct%</ui-switch>
|
||||||
<mk-switch v-model="showFullAcct" text="%i18n:common.show-full-acct%"/>
|
<ui-switch v-model="showFullAcct">%i18n:common.show-full-acct%</ui-switch>
|
||||||
<mk-switch v-model="gradientWindowHeader" text="%i18n:@gradient-window-header%"/>
|
<ui-switch v-model="iLikeSushi">%i18n:common.i-like-sushi%</ui-switch>
|
||||||
<mk-switch v-model="iLikeSushi" text="%i18n:common.i-like-sushi%"/>
|
|
||||||
</div>
|
</div>
|
||||||
<mk-switch v-model="showPostFormOnTopOfTl" text="%i18n:@post-form-on-timeline%"/>
|
<ui-switch v-model="showPostFormOnTopOfTl">%i18n:@post-form-on-timeline%</ui-switch>
|
||||||
<mk-switch v-model="suggestRecentHashtags" text="%i18n:@suggest-recent-hashtags%"/>
|
<ui-switch v-model="suggestRecentHashtags">%i18n:@suggest-recent-hashtags%</ui-switch>
|
||||||
<mk-switch v-model="showClockOnHeader" text="%i18n:@show-clock-on-header%"/>
|
<ui-switch v-model="showClockOnHeader">%i18n:@show-clock-on-header%</ui-switch>
|
||||||
<mk-switch v-model="alwaysShowNsfw" text="%i18n:common.always-show-nsfw%"/>
|
<ui-switch v-model="alwaysShowNsfw">%i18n:common.always-show-nsfw%</ui-switch>
|
||||||
<mk-switch v-model="showReplyTarget" text="%i18n:@show-reply-target%"/>
|
<ui-switch v-model="showReplyTarget">%i18n:@show-reply-target%</ui-switch>
|
||||||
<mk-switch v-model="showMyRenotes" text="%i18n:@show-my-renotes%"/>
|
<ui-switch v-model="showMyRenotes">%i18n:@show-my-renotes%</ui-switch>
|
||||||
<mk-switch v-model="showRenotedMyNotes" text="%i18n:@show-renoted-my-notes%"/>
|
<ui-switch v-model="showRenotedMyNotes">%i18n:@show-renoted-my-notes%</ui-switch>
|
||||||
<mk-switch v-model="showLocalRenotes" text="%i18n:@show-local-renotes%"/>
|
<ui-switch v-model="showLocalRenotes">%i18n:@show-local-renotes%</ui-switch>
|
||||||
<mk-switch v-model="showMaps" text="%i18n:@show-maps%">
|
<ui-switch v-model="showMaps">%i18n:@show-maps%</ui-switch>
|
||||||
<span>%i18n:@show-maps-desc%</span>
|
<ui-switch v-model="disableAnimatedMfm">%i18n:common.disable-animated-mfm%</ui-switch>
|
||||||
</mk-switch>
|
<ui-switch v-model="games_reversi_showBoardLabels">%i18n:common.show-reversi-board-labels%</ui-switch>
|
||||||
<mk-switch v-model="disableAnimatedMfm" text="%i18n:common.disable-animated-mfm%"/>
|
<ui-switch v-model="games_reversi_useContrastStones">%i18n:common.use-contrast-reversi-stones%</ui-switch>
|
||||||
<mk-switch v-model="games_reversi_showBoardLabels" text="%i18n:common.show-reversi-board-labels%"/>
|
|
||||||
<mk-switch v-model="games_reversi_useContrastStones" text="%i18n:common.use-contrast-reversi-stones%"/>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="web" v-show="page == 'web'">
|
<section class="web" v-show="page == 'web'">
|
||||||
<h1>%i18n:@sound%</h1>
|
<h1>%i18n:@sound%</h1>
|
||||||
<mk-switch v-model="enableSounds" text="%i18n:@enable-sounds%">
|
<ui-switch v-model="enableSounds">
|
||||||
<span>%i18n:@enable-sounds-desc%</span>
|
%i18n:@enable-sounds%
|
||||||
</mk-switch>
|
<span slot="desc">%i18n:@enable-sounds-desc%</span>
|
||||||
|
</ui-switch>
|
||||||
<label>%i18n:@volume%</label>
|
<label>%i18n:@volume%</label>
|
||||||
<input type="range"
|
<input type="range"
|
||||||
v-model="soundVolume"
|
v-model="soundVolume"
|
||||||
|
|
@ -102,7 +108,7 @@
|
||||||
|
|
||||||
<section class="web" v-show="page == 'web'">
|
<section class="web" v-show="page == 'web'">
|
||||||
<h1>%i18n:@mobile%</h1>
|
<h1>%i18n:@mobile%</h1>
|
||||||
<mk-switch v-model="disableViaMobile" text="%i18n:@disable-via-mobile%"/>
|
<ui-switch v-model="disableViaMobile">%i18n:@disable-via-mobile%</ui-switch>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="web" v-show="page == 'web'">
|
<section class="web" v-show="page == 'web'">
|
||||||
|
|
@ -131,9 +137,10 @@
|
||||||
|
|
||||||
<section class="notification" v-show="page == 'notification'">
|
<section class="notification" v-show="page == 'notification'">
|
||||||
<h1>%i18n:@notification%</h1>
|
<h1>%i18n:@notification%</h1>
|
||||||
<mk-switch v-model="$store.state.i.settings.autoWatch" @change="onChangeAutoWatch" text="%i18n:@auto-watch%">
|
<ui-switch v-model="$store.state.i.settings.autoWatch" @change="onChangeAutoWatch">
|
||||||
<span>%i18n:@auto-watch-desc%</span>
|
%i18n:@auto-watch%
|
||||||
</mk-switch>
|
<span slot="desc">%i18n:@auto-watch-desc%</span>
|
||||||
|
</ui-switch>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="drive" v-show="page == 'drive'">
|
<section class="drive" v-show="page == 'drive'">
|
||||||
|
|
@ -201,20 +208,23 @@
|
||||||
</button>
|
</button>
|
||||||
<details>
|
<details>
|
||||||
<summary>%i18n:@update-settings%</summary>
|
<summary>%i18n:@update-settings%</summary>
|
||||||
<mk-switch v-model="preventUpdate" text="%i18n:@prevent-update%">
|
<ui-switch v-model="preventUpdate">
|
||||||
<span>%i18n:@prevent-update-desc%</span>
|
%i18n:@prevent-update%
|
||||||
</mk-switch>
|
<span slot="desc">%i18n:@prevent-update-desc%</span>
|
||||||
|
</ui-switch>
|
||||||
</details>
|
</details>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="other" v-show="page == 'other'">
|
<section class="other" v-show="page == 'other'">
|
||||||
<h1>%i18n:@advanced-settings%</h1>
|
<h1>%i18n:@advanced-settings%</h1>
|
||||||
<mk-switch v-model="debug" text="%i18n:@debug-mode%">
|
<ui-switch v-model="debug">
|
||||||
<span>%i18n:@debug-mode-desc%</span>
|
%i18n:@debug-mode%
|
||||||
</mk-switch>
|
<span slot="desc">%i18n:@debug-mode-desc%</span>
|
||||||
<mk-switch v-model="enableExperimentalFeatures" text="%i18n:@experimental%">
|
</ui-switch>
|
||||||
<span>%i18n:@experimental-desc%</span>
|
<ui-switch v-model="enableExperimentalFeatures">
|
||||||
</mk-switch>
|
%i18n:@experimental%
|
||||||
|
<span slot="desc">%i18n:@experimental-desc%</span>
|
||||||
|
</ui-switch>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -421,12 +431,7 @@ export default Vue.extend({
|
||||||
disableViaMobile: {
|
disableViaMobile: {
|
||||||
get() { return this.$store.state.settings.disableViaMobile; },
|
get() { return this.$store.state.settings.disableViaMobile; },
|
||||||
set(value) { this.$store.dispatch('settings/set', { key: 'disableViaMobile', value }); }
|
set(value) { this.$store.dispatch('settings/set', { key: 'disableViaMobile', value }); }
|
||||||
},
|
}
|
||||||
|
|
||||||
gradientWindowHeader: {
|
|
||||||
get() { return this.$store.state.settings.gradientWindowHeader; },
|
|
||||||
set(value) { this.$store.dispatch('settings/set', { key: 'gradientWindowHeader', value }); }
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
(this as any).os.getMeta().then(meta => {
|
(this as any).os.getMeta().then(meta => {
|
||||||
|
|
@ -492,9 +497,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.mk-settings
|
||||||
|
|
||||||
root(isDark)
|
|
||||||
display flex
|
display flex
|
||||||
width 100%
|
width 100%
|
||||||
height 100%
|
height 100%
|
||||||
|
|
@ -505,13 +508,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
|
||||||
|
|
@ -520,11 +523,11 @@ 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
|
||||||
color $theme-color !important
|
color var(--primary) !important
|
||||||
|
|
||||||
> .pages
|
> .pages
|
||||||
width 100%
|
width 100%
|
||||||
|
|
@ -534,14 +537,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
|
||||||
|
|
@ -554,18 +556,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>
|
||||||
|
|
|
||||||
|
|
@ -38,7 +38,7 @@ export default Vue.extend({
|
||||||
> .rp
|
> .rp
|
||||||
margin-left 4px
|
margin-left 4px
|
||||||
font-style oblique
|
font-style oblique
|
||||||
color #a0bf46
|
color var(--renoteText)
|
||||||
|
|
||||||
mk-poll
|
mk-poll
|
||||||
font-size 80%
|
font-size 80%
|
||||||
|
|
|
||||||
|
|
@ -215,7 +215,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
|
||||||
|
|
||||||
.mk-timeline-core
|
.mk-timeline-core
|
||||||
> .mk-friends-maker
|
> .mk-friends-maker
|
||||||
|
|
|
||||||
|
|
@ -175,10 +175,8 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.mk-timeline
|
||||||
|
background var(--face)
|
||||||
root(isDark)
|
|
||||||
background isDark ? #282C37 : #fff
|
|
||||||
box-shadow var(--shadow)
|
box-shadow var(--shadow)
|
||||||
border-radius var(--round)
|
border-radius var(--round)
|
||||||
overflow hidden
|
overflow hidden
|
||||||
|
|
@ -186,8 +184,8 @@ root(isDark)
|
||||||
> header
|
> header
|
||||||
padding 0 8px
|
padding 0 8px
|
||||||
z-index 10
|
z-index 10
|
||||||
background isDark ? #313543 : #fff
|
background var(--faceHeader)
|
||||||
box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08)
|
box-shadow 0 1px var(--desktopTimelineHeaderShadow)
|
||||||
|
|
||||||
> .buttons
|
> .buttons
|
||||||
position absolute
|
position absolute
|
||||||
|
|
@ -200,23 +198,20 @@ root(isDark)
|
||||||
padding 0 8px
|
padding 0 8px
|
||||||
font-size 0.9em
|
font-size 0.9em
|
||||||
line-height 42px
|
line-height 42px
|
||||||
color isDark ? #9baec8 : #ccc
|
color var(--faceTextButton)
|
||||||
|
|
||||||
> .badge
|
> .badge
|
||||||
position absolute
|
position absolute
|
||||||
top -4px
|
top -4px
|
||||||
right 4px
|
right 4px
|
||||||
font-size 10px
|
font-size 10px
|
||||||
color $theme-color
|
color var(--primary)
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
color isDark ? #b2c1d5 : #aaa
|
color var(--faceTextButtonHover)
|
||||||
|
|
||||||
&:active
|
|
||||||
color isDark ? #b2c1d5 : #999
|
|
||||||
|
|
||||||
&[data-active]
|
&[data-active]
|
||||||
color $theme-color
|
color var(--primary)
|
||||||
cursor default
|
cursor default
|
||||||
|
|
||||||
&:before
|
&:before
|
||||||
|
|
@ -227,7 +222,7 @@ root(isDark)
|
||||||
left 0
|
left 0
|
||||||
width 100%
|
width 100%
|
||||||
height 2px
|
height 2px
|
||||||
background $theme-color
|
background var(--primary)
|
||||||
|
|
||||||
> span
|
> span
|
||||||
display inline-block
|
display inline-block
|
||||||
|
|
@ -237,7 +232,7 @@ root(isDark)
|
||||||
user-select none
|
user-select none
|
||||||
|
|
||||||
&[data-active]
|
&[data-active]
|
||||||
color $theme-color
|
color var(--primary)
|
||||||
cursor default
|
cursor default
|
||||||
font-weight bold
|
font-weight bold
|
||||||
|
|
||||||
|
|
@ -249,19 +244,13 @@ root(isDark)
|
||||||
left -8px
|
left -8px
|
||||||
width calc(100% + 16px)
|
width calc(100% + 16px)
|
||||||
height 2px
|
height 2px
|
||||||
background $theme-color
|
background var(--primary)
|
||||||
|
|
||||||
&:not([data-active])
|
&:not([data-active])
|
||||||
color isDark ? #9aa2a7 : #6f7477
|
color var(--desktopTimelineSrc)
|
||||||
cursor pointer
|
cursor pointer
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
color isDark ? #d9dcde : #525a5f
|
color var(--desktopTimelineSrcHover)
|
||||||
|
|
||||||
.mk-timeline[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.mk-timeline:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -36,7 +36,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
root(isDark)
|
.mk-ui-notification
|
||||||
display block
|
display block
|
||||||
position fixed
|
position fixed
|
||||||
z-index 10000
|
z-index 10000
|
||||||
|
|
@ -46,10 +46,10 @@ root(isDark)
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
padding 128px 0 0 0
|
padding 128px 0 0 0
|
||||||
width 500px
|
width 500px
|
||||||
color rgba(isDark ? #fff : #000, 0.6)
|
color var(--desktopNotificationFg)
|
||||||
background rgba(isDark ? #282C37 : #fff, 0.9)
|
background var(--desktopNotificationBg)
|
||||||
border-radius 0 0 8px 8px
|
border-radius 0 0 8px 8px
|
||||||
box-shadow 0 2px 4px rgba(#000, isDark ? 0.4 : 0.2)
|
box-shadow 0 2px 4px var(--desktopNotificationShadow)
|
||||||
transform translateY(-64px)
|
transform translateY(-64px)
|
||||||
opacity 0
|
opacity 0
|
||||||
|
|
||||||
|
|
@ -58,10 +58,4 @@ root(isDark)
|
||||||
line-height 64px
|
line-height 64px
|
||||||
text-align center
|
text-align center
|
||||||
|
|
||||||
.mk-ui-notification[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.mk-ui-notification:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -127,14 +127,12 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
.account
|
||||||
|
|
||||||
root(isDark)
|
|
||||||
> .header
|
> .header
|
||||||
display block
|
display block
|
||||||
margin 0
|
margin 0
|
||||||
padding 0
|
padding 0
|
||||||
color #9eaba8
|
color var(--desktopHeaderFg)
|
||||||
border none
|
border none
|
||||||
background transparent
|
background transparent
|
||||||
cursor pointer
|
cursor pointer
|
||||||
|
|
@ -144,14 +142,11 @@ root(isDark)
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
&[data-active='true']
|
&[data-active='true']
|
||||||
color isDark ? #fff : darken(#9eaba8, 20%)
|
color var(--desktopHeaderHoverFg)
|
||||||
|
|
||||||
> .avatar
|
> .avatar
|
||||||
filter saturate(150%)
|
filter saturate(150%)
|
||||||
|
|
||||||
&:active
|
|
||||||
color isDark ? #fff : darken(#9eaba8, 30%)
|
|
||||||
|
|
||||||
> .username
|
> .username
|
||||||
display block
|
display block
|
||||||
float left
|
float left
|
||||||
|
|
@ -177,7 +172,7 @@ root(isDark)
|
||||||
transition filter 100ms ease
|
transition filter 100ms ease
|
||||||
|
|
||||||
> .menu
|
> .menu
|
||||||
$bgcolor = isDark ? #282c37 : #fff
|
$bgcolor = var(--face)
|
||||||
display block
|
display block
|
||||||
position absolute
|
position absolute
|
||||||
top 56px
|
top 56px
|
||||||
|
|
@ -220,7 +215,7 @@ root(isDark)
|
||||||
|
|
||||||
& + ul
|
& + ul
|
||||||
padding-top 10px
|
padding-top 10px
|
||||||
border-top solid 1px isDark ? #1c2023 : #eee
|
border-top solid 1px var(--faceDivider)
|
||||||
|
|
||||||
> li
|
> li
|
||||||
display block
|
display block
|
||||||
|
|
@ -234,7 +229,7 @@ root(isDark)
|
||||||
padding 0 28px
|
padding 0 28px
|
||||||
margin 0
|
margin 0
|
||||||
line-height 40px
|
line-height 40px
|
||||||
color isDark ? #c8cece : #868C8C
|
color var(--text)
|
||||||
cursor pointer
|
cursor pointer
|
||||||
|
|
||||||
*
|
*
|
||||||
|
|
@ -249,8 +244,8 @@ root(isDark)
|
||||||
padding 2px 8px
|
padding 2px 8px
|
||||||
font-size 90%
|
font-size 90%
|
||||||
font-style normal
|
font-style normal
|
||||||
background $theme-color
|
background var(--primary)
|
||||||
color $theme-color-foreground
|
color var(--primaryForeground)
|
||||||
border-radius 8px
|
border-radius 8px
|
||||||
|
|
||||||
> [data-fa]:first-child
|
> [data-fa]:first-child
|
||||||
|
|
@ -269,11 +264,11 @@ root(isDark)
|
||||||
|
|
||||||
&:hover, &:active
|
&:hover, &:active
|
||||||
text-decoration none
|
text-decoration none
|
||||||
background $theme-color
|
background var(--primary)
|
||||||
color $theme-color-foreground
|
color var(--primaryForeground)
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
background darken($theme-color, 10%)
|
background var(--primaryDarken10)
|
||||||
|
|
||||||
&.signout
|
&.signout
|
||||||
$color = #e64137
|
$color = #e64137
|
||||||
|
|
@ -290,10 +285,4 @@ root(isDark)
|
||||||
transform-origin: center -16px;
|
transform-origin: center -16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.account[data-darkmode]
|
|
||||||
root(true)
|
|
||||||
|
|
||||||
.account:not([data-darkmode])
|
|
||||||
root(false)
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue