syuilo
GitHub
commit
8b68c5da37
@ -285,6 +285,28 @@ common/views/components/media-banner.vue:
|
||||
sensitive: "閲覧注意"
|
||||
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:
|
||||
hide: "隠す"
|
||||
show: "もっと見る"
|
||||
@ -762,6 +784,7 @@ desktop/views/components/settings.vue:
|
||||
2fa: "二段階認証"
|
||||
other: "その他"
|
||||
license: "ライセンス"
|
||||
theme: "テーマ"
|
||||
|
||||
behaviour: "動作"
|
||||
fetch-on-scroll: "スクロールで自動読み込み"
|
||||
@ -784,7 +807,6 @@ desktop/views/components/settings.vue:
|
||||
rounded-corners: "UIの角を丸める"
|
||||
circle-icons: "円形のアイコンを使用"
|
||||
contrasted-acct: "ユーザー名にコントラストを付ける"
|
||||
gradient-window-header: "ウィンドウのタイトルバーにグラデーションを使用"
|
||||
post-form-on-timeline: "タイムライン上部に投稿フォームを表示する"
|
||||
suggest-recent-hashtags: "最近のハッシュタグを投稿フォームに表示する"
|
||||
show-clock-on-header: "右上に時計を表示する"
|
||||
@ -793,7 +815,6 @@ desktop/views/components/settings.vue:
|
||||
show-renoted-my-notes: "自分の投稿のRenoteをタイムラインに表示する"
|
||||
show-local-renotes: "ローカルの投稿のRenoteをタイムラインに表示する"
|
||||
show-maps: "マップの自動展開"
|
||||
show-maps-desc: "位置情報が添付された投稿のマップを自動的に展開します。"
|
||||
|
||||
sound: "サウンド"
|
||||
enable-sounds: "サウンドを有効にする"
|
||||
@ -1419,6 +1440,7 @@ mobile/views/pages/settings.vue:
|
||||
notification-position: "通知の表示"
|
||||
notification-position-bottom: "下"
|
||||
notification-position-top: "上"
|
||||
theme: "テーマ"
|
||||
behavior: "動作"
|
||||
fetch-on-scroll: "スクロールで自動読み込み"
|
||||
note-visibility: "投稿の公開範囲"
|
||||
|
||||
@ -75,6 +75,7 @@
|
||||
"@types/single-line-log": "1.1.0",
|
||||
"@types/speakeasy": "2.0.2",
|
||||
"@types/systeminformation": "3.23.0",
|
||||
"@types/tinycolor2": "1.4.1",
|
||||
"@types/tmp": "0.0.33",
|
||||
"@types/uuid": "3.4.4",
|
||||
"@types/webpack": "4.4.12",
|
||||
@ -194,6 +195,7 @@
|
||||
"systeminformation": "3.45.6",
|
||||
"syuilo-password-strength": "0.0.1",
|
||||
"textarea-caret": "3.1.0",
|
||||
"tinycolor2": "1.4.1",
|
||||
"tmp": "0.0.33",
|
||||
"ts-loader": "4.4.1",
|
||||
"ts-node": "7.0.1",
|
||||
@ -206,12 +208,14 @@
|
||||
"v-animate-css": "0.0.2",
|
||||
"vue": "2.5.17",
|
||||
"vue-chartjs": "3.4.0",
|
||||
"vue-color": "2.6.0",
|
||||
"vue-cropperjs": "2.2.2",
|
||||
"vue-js-modal": "1.3.26",
|
||||
"vue-json-tree-view": "2.1.4",
|
||||
"vue-loader": "15.4.2",
|
||||
"vue-router": "3.0.1",
|
||||
"vue-style-loader": "4.1.2",
|
||||
"vue-svg-inline-loader": "1.1.3",
|
||||
"vue-template-compiler": "2.5.17",
|
||||
"vuedraggable": "2.16.0",
|
||||
"vuewordcloud": "18.7.11",
|
||||
|
||||
@ -27,7 +27,7 @@ body
|
||||
z-index 65536
|
||||
|
||||
.bar
|
||||
background $theme-color
|
||||
background var(--primary)
|
||||
|
||||
position fixed
|
||||
z-index 65537
|
||||
@ -44,7 +44,7 @@ body
|
||||
right 0px
|
||||
width 100px
|
||||
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
|
||||
|
||||
transform rotate(3deg) translate(0px, -4px)
|
||||
@ -64,8 +64,8 @@ body
|
||||
box-sizing border-box
|
||||
|
||||
border solid 2px transparent
|
||||
border-top-color $theme-color
|
||||
border-left-color $theme-color
|
||||
border-top-color var(--primary)
|
||||
border-left-color var(--primary)
|
||||
border-radius 50%
|
||||
|
||||
animation progress-spinner 400ms linear infinite
|
||||
|
||||
@ -5,6 +5,9 @@
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
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({
|
||||
computed: {
|
||||
|
||||
@ -20,6 +20,16 @@
|
||||
|
||||
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
|
||||
let settings = null;
|
||||
const vuex = localStorage.getItem('vuex');
|
||||
@ -84,13 +94,6 @@
|
||||
app = isMobile ? 'mobile' : 'desktop';
|
||||
}
|
||||
|
||||
// Dark/Light
|
||||
if (settings) {
|
||||
if (settings.device.darkmode) {
|
||||
document.documentElement.setAttribute('data-darkmode', 'true');
|
||||
}
|
||||
}
|
||||
|
||||
// Script version
|
||||
const ver = localStorage.getItem('v') || VERSION;
|
||||
|
||||
|
||||
@ -259,15 +259,13 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.mk-autocomplete
|
||||
position fixed
|
||||
z-index 65535
|
||||
max-width 100%
|
||||
margin-top calc(1em + 8px)
|
||||
overflow hidden
|
||||
background isDark ? #313543 : #fff
|
||||
background var(--faceHeader)
|
||||
border solid 1px rgba(#000, 0.1)
|
||||
border-radius 4px
|
||||
transition top 0.1s ease, left 0.1s ease
|
||||
@ -299,16 +297,16 @@ root(isDark)
|
||||
text-overflow ellipsis
|
||||
|
||||
&:hover
|
||||
background isDark ? rgba(#fff, 0.1) : rgba(#000, 0.1)
|
||||
background var(--autocompleteItemHoverBg)
|
||||
|
||||
&[data-selected='true']
|
||||
background $theme-color
|
||||
background var(--primary)
|
||||
|
||||
&, *
|
||||
color #fff !important
|
||||
|
||||
&:active
|
||||
background darken($theme-color, 10%)
|
||||
background var(--primaryDarken10)
|
||||
|
||||
&, *
|
||||
color #fff !important
|
||||
@ -325,15 +323,15 @@ root(isDark)
|
||||
|
||||
.name
|
||||
margin 0 8px 0 0
|
||||
color isDark ? rgba(#fff, 0.8) : rgba(#000, 0.8)
|
||||
color var(--autocompleteItemText)
|
||||
|
||||
.username
|
||||
color isDark ? rgba(#fff, 0.3) : rgba(#000, 0.3)
|
||||
color var(--autocompleteItemTextSub)
|
||||
|
||||
> .hashtags > li
|
||||
|
||||
.name
|
||||
color isDark ? rgba(#fff, 0.8) : rgba(#000, 0.8)
|
||||
color var(--autocompleteItemText)
|
||||
|
||||
> .emojis > li
|
||||
|
||||
@ -343,15 +341,9 @@ root(isDark)
|
||||
width 24px
|
||||
|
||||
.name
|
||||
color isDark ? rgba(#fff, 0.8) : rgba(#000, 0.8)
|
||||
color var(--autocompleteItemText)
|
||||
|
||||
.alias
|
||||
margin 0 0 0 8px
|
||||
color isDark ? rgba(#fff, 0.3) : rgba(#000, 0.3)
|
||||
|
||||
.mk-autocomplete[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-autocomplete:not([data-darkmode])
|
||||
root(false)
|
||||
color var(--autocompleteItemTextSub)
|
||||
</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: {
|
||||
onClick(e) {
|
||||
this.$emit('click', e);
|
||||
@ -67,8 +72,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
|
||||
root(isDark)
|
||||
.mk-avatar
|
||||
display inline-block
|
||||
vertical-align bottom
|
||||
|
||||
@ -79,7 +83,7 @@ root(isDark)
|
||||
&.cat::before,
|
||||
&.cat::after
|
||||
background #df548f
|
||||
border solid 4px isDark ? #e0eefd : #202224
|
||||
border solid 4px currentColor
|
||||
box-sizing border-box
|
||||
content ''
|
||||
display inline-block
|
||||
@ -105,9 +109,4 @@ root(isDark)
|
||||
transition border-radius 1s ease
|
||||
z-index 1
|
||||
|
||||
.mk-avatar[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-avatar:not([data-darkmode])
|
||||
root(false)
|
||||
</style>
|
||||
|
||||
@ -39,7 +39,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.mk-connect-failed
|
||||
width 100%
|
||||
@ -70,17 +70,17 @@ export default Vue.extend({
|
||||
display block
|
||||
margin 1em auto 0 auto
|
||||
padding 8px 10px
|
||||
color $theme-color-foreground
|
||||
background $theme-color
|
||||
color var(--primaryForeground)
|
||||
background var(--primary)
|
||||
|
||||
&:focus
|
||||
outline solid 3px rgba($theme-color, 0.3)
|
||||
outline solid 3px var(--primaryAlpha03)
|
||||
|
||||
&:hover
|
||||
background lighten($theme-color, 10%)
|
||||
background var(--primaryLighten10)
|
||||
|
||||
&:active
|
||||
background darken($theme-color, 10%)
|
||||
background var(--primaryDarken10)
|
||||
|
||||
> .thanks
|
||||
display block
|
||||
|
||||
@ -22,23 +22,17 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.nrvgflfuaxwgkxoynpnumyookecqrrvh
|
||||
display inline-block
|
||||
padding 4px 8px
|
||||
font-size 0.7em
|
||||
color isDark ? #393f4f : #fff
|
||||
background isDark ? #687390 : #b1b9c1
|
||||
color var(--cwButtonFg)
|
||||
background var(--cwButtonBg)
|
||||
border-radius 2px
|
||||
cursor pointer
|
||||
user-select none
|
||||
|
||||
&:hover
|
||||
background isDark ? #707b97 : #bbc4ce
|
||||
|
||||
.nrvgflfuaxwgkxoynpnumyookecqrrvh[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.nrvgflfuaxwgkxoynpnumyookecqrrvh:not([data-darkmode])
|
||||
root(false)
|
||||
background var(--cwButtonHoverBg)
|
||||
|
||||
</style>
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
</template>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.a
|
||||
display block
|
||||
@ -18,8 +18,8 @@
|
||||
display block
|
||||
//fill #151513
|
||||
//color #fff
|
||||
fill $theme-color
|
||||
color $theme-color-foreground
|
||||
fill var(--primary)
|
||||
color var(--primaryForeground)
|
||||
|
||||
.octo-arm
|
||||
transform-origin 130px 106px
|
||||
|
||||
@ -304,9 +304,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.xqnhankfuuilcwvhgsopeqncafzsquya
|
||||
text-align center
|
||||
|
||||
> .go-index
|
||||
@ -319,7 +317,7 @@ root(isDark)
|
||||
|
||||
> header
|
||||
padding 8px
|
||||
border-bottom dashed 1px isDark ? #4c5761 : #c4cdd4
|
||||
border-bottom dashed 1px var(--reversiGameHeaderLine)
|
||||
|
||||
a
|
||||
color inherit
|
||||
@ -386,30 +384,30 @@ root(isDark)
|
||||
user-select none
|
||||
|
||||
&.empty
|
||||
border solid 2px isDark ? #51595f : #eee
|
||||
border solid 2px var(--reversiGameEmptyCell)
|
||||
|
||||
&.empty.can
|
||||
background isDark ? #51595f : #eee
|
||||
background var(--reversiGameEmptyCell)
|
||||
|
||||
&.empty.myTurn
|
||||
border-color isDark ? #6a767f : #ddd
|
||||
border-color var(--reversiGameEmptyCellMyTurn)
|
||||
|
||||
&.can
|
||||
background isDark ? #51595f : #eee
|
||||
background var(--reversiGameEmptyCellCanPut)
|
||||
cursor pointer
|
||||
|
||||
&:hover
|
||||
border-color darken($theme-color, 10%)
|
||||
background $theme-color
|
||||
border-color var(--primaryDarken10)
|
||||
background var(--primary)
|
||||
|
||||
&:active
|
||||
background darken($theme-color, 10%)
|
||||
background var(--primaryDarken10)
|
||||
|
||||
&.prev
|
||||
box-shadow 0 0 0 4px rgba($theme-color, 0.7)
|
||||
box-shadow 0 0 0 4px var(--primaryAlpha07)
|
||||
|
||||
&.isEnded
|
||||
border-color isDark ? #6a767f : #ddd
|
||||
border-color var(--reversiGameEmptyCellMyTurn)
|
||||
|
||||
&.none
|
||||
border-color transparent !important
|
||||
@ -458,10 +456,4 @@ root(isDark)
|
||||
margin 0 8px
|
||||
min-width 70px
|
||||
|
||||
.xqnhankfuuilcwvhgsopeqncafzsquya[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.xqnhankfuuilcwvhgsopeqncafzsquya:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -138,9 +138,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.phgnkghfpyvkrvwiajkiuoxyrdaqpzcx
|
||||
> h1
|
||||
margin 0
|
||||
padding 24px
|
||||
@ -148,7 +146,7 @@ root(isDark)
|
||||
text-align center
|
||||
font-weight normal
|
||||
color #fff
|
||||
background linear-gradient(to bottom, isDark ? #45730e : #8bca3e, isDark ? #464300 : #d6cf31)
|
||||
background linear-gradient(to bottom, var(--reversiBannerGradientStart), var(--reversiBannerGradientEnd))
|
||||
|
||||
& + p
|
||||
margin 0
|
||||
@ -156,7 +154,7 @@ root(isDark)
|
||||
margin-bottom 12px
|
||||
text-align center
|
||||
font-size 14px
|
||||
border-bottom solid 1px isDark ? #535f65 : #d3d9dc
|
||||
border-bottom solid 1px var(--faceDivider)
|
||||
|
||||
> .play
|
||||
margin 0 auto
|
||||
@ -171,14 +169,14 @@ root(isDark)
|
||||
padding 16px
|
||||
font-size 14px
|
||||
text-align left
|
||||
background isDark ? #282c37 : #f5f5f5
|
||||
background var(--reversiDescBg)
|
||||
border-radius 8px
|
||||
|
||||
> section
|
||||
margin 0 auto
|
||||
padding 0 16px 16px 16px
|
||||
max-width 500px
|
||||
border-top solid 1px isDark ? #535f65 : #d3d9dc
|
||||
border-top solid 1px var(--faceDivider)
|
||||
|
||||
> h2
|
||||
margin 0
|
||||
@ -189,9 +187,9 @@ root(isDark)
|
||||
.invitation
|
||||
margin 8px 0
|
||||
padding 8px
|
||||
color isDark ? #fff : #677f84
|
||||
background isDark ? #282c37 : #fff
|
||||
box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15)
|
||||
color var(--text)
|
||||
background var(--face)
|
||||
box-shadow 0 2px 16px var(--reversiListItemShadow)
|
||||
border-radius 6px
|
||||
cursor pointer
|
||||
|
||||
@ -200,13 +198,13 @@ root(isDark)
|
||||
user-select none
|
||||
|
||||
&:focus
|
||||
border-color $theme-color
|
||||
border-color var(--primary)
|
||||
|
||||
&:hover
|
||||
background isDark ? #313543 : #f5f5f5
|
||||
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
|
||||
|
||||
&:active
|
||||
background isDark ? #1e222b : #eee
|
||||
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
|
||||
|
||||
> .avatar
|
||||
width 32px
|
||||
@ -221,9 +219,9 @@ root(isDark)
|
||||
display block
|
||||
margin 8px 0
|
||||
padding 8px
|
||||
color isDark ? #fff : #677f84
|
||||
background isDark ? #282c37 : #fff
|
||||
box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15)
|
||||
color var(--text)
|
||||
background var(--face)
|
||||
box-shadow 0 2px 16px var(--reversiListItemShadow)
|
||||
border-radius 6px
|
||||
cursor pointer
|
||||
|
||||
@ -232,10 +230,10 @@ root(isDark)
|
||||
user-select none
|
||||
|
||||
&:hover
|
||||
background isDark ? #313543 : #f5f5f5
|
||||
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
|
||||
|
||||
&:active
|
||||
background isDark ? #1e222b : #eee
|
||||
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
|
||||
|
||||
> .avatar
|
||||
width 32px
|
||||
@ -246,10 +244,4 @@ root(isDark)
|
||||
margin 0 8px
|
||||
line-height 32px
|
||||
|
||||
.phgnkghfpyvkrvwiajkiuoxyrdaqpzcx[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.phgnkghfpyvkrvwiajkiuoxyrdaqpzcx:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -47,9 +47,9 @@
|
||||
</header>
|
||||
|
||||
<div>
|
||||
<mk-switch v-model="game.settings.isLlotheo" @change="updateSettings" text="%i18n:@is-llotheo%"/>
|
||||
<mk-switch v-model="game.settings.loopedBoard" @change="updateSettings" text="%i18n:@looped-map%"/>
|
||||
<mk-switch v-model="game.settings.canPutEverywhere" @change="updateSettings" text="%i18n:@can-put-everywhere%"/>
|
||||
<ui-switch v-model="game.settings.isLlotheo" @change="updateSettings">%i18n:@is-llotheo%</ui-switch>
|
||||
<ui-switch v-model="game.settings.loopedBoard" @change="updateSettings">%i18n:@looped-map%</ui-switch>
|
||||
<ui-switch v-model="game.settings.canPutEverywhere" @change="updateSettings">%i18n:@can-put-everywhere%</ui-switch>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -60,7 +60,7 @@
|
||||
|
||||
<div>
|
||||
<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">
|
||||
<header>
|
||||
@ -252,11 +252,9 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.urbixznjwwuukfsckrwzwsqzsxornqij
|
||||
text-align center
|
||||
background isDark ? #191b22 : #f9f9f9
|
||||
background var(--bg)
|
||||
|
||||
> header
|
||||
padding 8px
|
||||
@ -273,10 +271,10 @@ root(isDark)
|
||||
> select
|
||||
width 100%
|
||||
padding 12px 14px
|
||||
background isDark ? #282C37 : #fff
|
||||
border 1px solid isDark ? #6a707d : #dcdfe6
|
||||
background var(--face)
|
||||
border 1px solid var(--reversiMapSelectBorder)
|
||||
border-radius 4px
|
||||
color isDark ? #fff : #606266
|
||||
color var(--text)
|
||||
cursor pointer
|
||||
transition border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)
|
||||
-webkit-appearance none
|
||||
@ -284,17 +282,18 @@ root(isDark)
|
||||
appearance none
|
||||
|
||||
&:hover
|
||||
border-color isDark ? #a7aebd : #c0c4cc
|
||||
border-color var(--reversiMapSelectHoverBorder)
|
||||
|
||||
&:focus
|
||||
&:active
|
||||
border-color $theme-color
|
||||
border-color var(--primary)
|
||||
|
||||
> div
|
||||
> .random
|
||||
padding 32px 0
|
||||
font-size 64px
|
||||
color isDark ? #4e5961 : #d8d8d8
|
||||
color var(--text)
|
||||
opacity 0.7
|
||||
|
||||
> .board
|
||||
display grid
|
||||
@ -302,11 +301,11 @@ root(isDark)
|
||||
width 300px
|
||||
height 300px
|
||||
margin 0 auto
|
||||
color isDark ? #fff : #444
|
||||
color var(--text)
|
||||
|
||||
> div
|
||||
background transparent
|
||||
border solid 2px isDark ? #6a767f : #ddd
|
||||
border solid 2px var(--faceDivider)
|
||||
border-radius 6px
|
||||
overflow hidden
|
||||
cursor pointer
|
||||
@ -331,32 +330,26 @@ root(isDark)
|
||||
.card
|
||||
max-width 400px
|
||||
border-radius 4px
|
||||
background isDark ? #282C37 : #fff
|
||||
color isDark ? #fff : #303133
|
||||
box-shadow 0 2px 12px 0 rgba(#000, isDark ? 0.7 : 0.1)
|
||||
background var(--face)
|
||||
color var(--text)
|
||||
box-shadow 0 2px 12px 0 var(--reversiRoomFormShadow)
|
||||
|
||||
> header
|
||||
padding 18px 20px
|
||||
border-bottom 1px solid isDark ? #1c2023 : #ebeef5
|
||||
border-bottom 1px solid var(--faceDivider)
|
||||
|
||||
> div
|
||||
padding 20px
|
||||
color isDark ? #fff : #606266
|
||||
color var(--text)
|
||||
|
||||
> footer
|
||||
position sticky
|
||||
bottom 0
|
||||
padding 16px
|
||||
background rgba(isDark ? #191b22 : #fff, 0.9)
|
||||
border-top solid 1px isDark ? #606266 : #c4cdd4
|
||||
background var(--reversiRoomFooterBg)
|
||||
border-top solid 1px var(--faceDivider)
|
||||
|
||||
> .status
|
||||
margin 0 0 16px 0
|
||||
|
||||
.urbixznjwwuukfsckrwzwsqzsxornqij[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.urbixznjwwuukfsckrwzwsqzsxornqij:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -156,11 +156,9 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
color isDark ? #fff : #677f84
|
||||
background isDark ? #191b22 : #fff
|
||||
.vchtoekanapleubgzioubdtmlkribzfd
|
||||
color var(--text)
|
||||
background var(--bg)
|
||||
|
||||
> .matching
|
||||
> h1
|
||||
@ -177,10 +175,4 @@ root(isDark)
|
||||
text-align center
|
||||
border-top dashed 1px #c4cdd4
|
||||
|
||||
.vchtoekanapleubgzioubdtmlkribzfd[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.vchtoekanapleubgzioubdtmlkribzfd:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -26,7 +26,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.mk-google
|
||||
display flex
|
||||
margin 8px 0
|
||||
|
||||
@ -37,31 +37,25 @@ root(isDark)
|
||||
height 40px
|
||||
font-family sans-serif
|
||||
font-size 16px
|
||||
color isDark ? #dee4e8 : #55595c
|
||||
background isDark ? #191b22 : #fff
|
||||
border solid 1px isDark ? #495156 : #dadada
|
||||
color var(--googleSearchFg)
|
||||
background var(--googleSearchBg)
|
||||
border solid 1px var(--googleSearchBorder)
|
||||
border-radius 4px 0 0 4px
|
||||
|
||||
&:hover
|
||||
border-color isDark ? #777c86 : #b0b0b0
|
||||
border-color var(--googleSearchHoverBorder)
|
||||
|
||||
> button
|
||||
flex-shrink 0
|
||||
padding 0 16px
|
||||
border solid 1px isDark ? #495156 : #dadada
|
||||
border solid 1px var(--googleSearchBorder)
|
||||
border-left none
|
||||
border-radius 0 4px 4px 0
|
||||
|
||||
&:hover
|
||||
background-color isDark ? #2e3440 : #eee
|
||||
background-color var(--googleSearchHoverButton)
|
||||
|
||||
&:active
|
||||
box-shadow 0 2px 4px rgba(#000, 0.15) inset
|
||||
|
||||
.mk-google[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-google:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import Vue from 'vue';
|
||||
|
||||
import theme from './theme.vue';
|
||||
import instance from './instance.vue';
|
||||
import cwButton from './cw-button.vue';
|
||||
import tagCloud from './tag-cloud.vue';
|
||||
@ -30,7 +31,6 @@ import messagingRoom from './messaging-room.vue';
|
||||
import urlPreview from './url-preview.vue';
|
||||
import twitterSetting from './twitter-setting.vue';
|
||||
import fileTypeIcon from './file-type-icon.vue';
|
||||
import Switch from './switch.vue';
|
||||
import Reversi from './games/reversi/reversi.vue';
|
||||
import welcomeTimeline from './welcome-timeline.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 formRadio from './ui/form/radio.vue';
|
||||
|
||||
Vue.component('mk-theme', theme);
|
||||
Vue.component('mk-instance', instance);
|
||||
Vue.component('mk-cw-button', cwButton);
|
||||
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-twitter-setting', twitterSetting);
|
||||
Vue.component('mk-file-type-icon', fileTypeIcon);
|
||||
Vue.component('mk-switch', Switch);
|
||||
Vue.component('mk-reversi', Reversi);
|
||||
Vue.component('mk-welcome-timeline', welcomeTimeline);
|
||||
Vue.component('ui-input', uiInput);
|
||||
|
||||
@ -26,9 +26,9 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
color isDark ? #fff : #5b646f
|
||||
background isDark ? #21242f : #fff
|
||||
.nhasjydimbopojusarffqjyktglcuxjy
|
||||
color var(--text)
|
||||
background var(--face)
|
||||
text-align center
|
||||
|
||||
> .banner
|
||||
@ -48,10 +48,4 @@ root(isDark)
|
||||
display block
|
||||
padding-bottom 16px
|
||||
|
||||
.nhasjydimbopojusarffqjyktglcuxjy[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.nhasjydimbopojusarffqjyktglcuxjy:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -43,7 +43,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.mk-media-banner
|
||||
width 100%
|
||||
border-radius 4px
|
||||
margin-top 4px
|
||||
@ -71,7 +71,7 @@ root(isDark)
|
||||
font-size 1.6em
|
||||
|
||||
> .download
|
||||
background isDark ? #21242d : #f7f7f7
|
||||
background var(--noteAttachedFile)
|
||||
|
||||
> .sensitive
|
||||
background #111
|
||||
@ -82,9 +82,4 @@ root(isDark)
|
||||
display block
|
||||
width 100%
|
||||
|
||||
.mk-media-banner[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-media-banner:not([data-darkmode])
|
||||
root(false)
|
||||
</style>
|
||||
|
||||
@ -117,10 +117,8 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
$bg-color = isDark ? #2c303c : #fff
|
||||
.onchrpzrvnoruiaenfcqvccjfuupzzwv
|
||||
$bg-color = var(--popupBg)
|
||||
$border-color = rgba(27, 31, 35, 0.15)
|
||||
|
||||
position initial
|
||||
@ -132,7 +130,7 @@ root(isDark)
|
||||
z-index 10000
|
||||
width 100%
|
||||
height 100%
|
||||
background rgba(#000, isDark ? 0.5 : 0.1)
|
||||
background var(--modalBackdrop)
|
||||
opacity 0
|
||||
|
||||
> .popover
|
||||
@ -179,26 +177,20 @@ root(isDark)
|
||||
display block
|
||||
padding 8px 16px
|
||||
width 100%
|
||||
color isDark ? #d6dce2 : #111
|
||||
color var(--popupFg)
|
||||
|
||||
&:hover
|
||||
color $theme-color-foreground
|
||||
background $theme-color
|
||||
color var(--primaryForeground)
|
||||
background var(--primary)
|
||||
text-decoration none
|
||||
|
||||
&:active
|
||||
color $theme-color-foreground
|
||||
background darken($theme-color, 10%)
|
||||
color var(--primaryForeground)
|
||||
background var(--primaryDarken10)
|
||||
|
||||
> div
|
||||
margin 8px 0
|
||||
height 1px
|
||||
background isDark ? #1c2023 : #eee
|
||||
|
||||
.onchrpzrvnoruiaenfcqvccjfuupzzwv[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.onchrpzrvnoruiaenfcqvccjfuupzzwv:not([data-darkmode])
|
||||
root(false)
|
||||
background var(--faceDivider)
|
||||
|
||||
</style>
|
||||
|
||||
@ -195,9 +195,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.mk-messaging-form
|
||||
> textarea
|
||||
cursor auto
|
||||
display block
|
||||
@ -209,10 +207,10 @@ root(isDark)
|
||||
padding 8px
|
||||
resize none
|
||||
font-size 1em
|
||||
color isDark ? #fff : #000
|
||||
color var(--inputText)
|
||||
outline none
|
||||
border none
|
||||
border-top solid 1px isDark ? #4b5056 : #eee
|
||||
border-top solid 1px var(--faceDivider)
|
||||
border-radius 0
|
||||
box-shadow none
|
||||
background transparent
|
||||
@ -234,10 +232,10 @@ root(isDark)
|
||||
transition color 0.1s ease
|
||||
|
||||
&:hover
|
||||
color $theme-color
|
||||
color var(--primary)
|
||||
|
||||
&:active
|
||||
color darken($theme-color, 10%)
|
||||
color var(--primaryDarken10)
|
||||
transition color 0s ease
|
||||
|
||||
.files
|
||||
@ -293,19 +291,13 @@ root(isDark)
|
||||
transition color 0.1s ease
|
||||
|
||||
&:hover
|
||||
color $theme-color
|
||||
color var(--primary)
|
||||
|
||||
&:active
|
||||
color darken($theme-color, 10%)
|
||||
color var(--primaryDarken10)
|
||||
transition color 0s ease
|
||||
|
||||
input[type=file]
|
||||
display none
|
||||
|
||||
.mk-messaging-form[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-messaging-form:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -59,10 +59,8 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
$me-balloon-color = $theme-color
|
||||
.message
|
||||
$me-balloon-color = var(--primary)
|
||||
|
||||
padding 10px 12px 10px 12px
|
||||
background-color transparent
|
||||
@ -179,7 +177,7 @@ root(isDark)
|
||||
display block
|
||||
margin 2px 0 0 0
|
||||
font-size 10px
|
||||
color isDark ? rgba(#fff, 0.4) : rgba(#000, 0.4)
|
||||
color var(--messagingRoomMessageInfo)
|
||||
|
||||
> [data-fa]
|
||||
margin-left 4px
|
||||
@ -192,7 +190,7 @@ root(isDark)
|
||||
padding-left 66px
|
||||
|
||||
> .balloon
|
||||
$color = isDark ? #2d3338 : #eee
|
||||
$color = var(--messagingRoomMessageBg)
|
||||
float left
|
||||
background $color
|
||||
|
||||
@ -208,8 +206,7 @@ root(isDark)
|
||||
|
||||
> .content
|
||||
> .text
|
||||
if isDark
|
||||
color #fff
|
||||
color var(--messagingRoomMessageFg)
|
||||
|
||||
> footer
|
||||
text-align left
|
||||
@ -250,18 +247,9 @@ root(isDark)
|
||||
|
||||
> .read
|
||||
user-select none
|
||||
margin 0 4px 0 0
|
||||
color isDark ? rgba(#fff, 0.5) : rgba(#000, 0.5)
|
||||
font-size 11px
|
||||
|
||||
&[data-is-deleted]
|
||||
> .balloon
|
||||
opacity 0.5
|
||||
|
||||
.message[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.message:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -262,14 +262,12 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.mk-messaging-room
|
||||
display flex
|
||||
flex 1
|
||||
flex-direction column
|
||||
height 100%
|
||||
background isDark ? #191b22 : #fff
|
||||
background var(--messagingRoomBg)
|
||||
|
||||
> .body
|
||||
width 100%
|
||||
@ -277,24 +275,15 @@ root(isDark)
|
||||
margin 0 auto
|
||||
flex 1
|
||||
|
||||
> .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
|
||||
|
||||
> .init,
|
||||
> .empty
|
||||
width 100%
|
||||
margin 0
|
||||
padding 16px 8px 8px 8px
|
||||
text-align center
|
||||
font-size 0.8em
|
||||
color rgba(isDark ? #fff : #000, 0.4)
|
||||
color var(--messagingRoomInfo)
|
||||
opacity 0.5
|
||||
|
||||
[data-fa]
|
||||
margin-right 4px
|
||||
@ -305,7 +294,8 @@ root(isDark)
|
||||
padding 16px
|
||||
text-align center
|
||||
font-size 0.8em
|
||||
color rgba(isDark ? #fff : #000, 0.4)
|
||||
color var(--messagingRoomInfo)
|
||||
opacity 0.5
|
||||
|
||||
[data-fa]
|
||||
margin-right 4px
|
||||
@ -349,7 +339,7 @@ root(isDark)
|
||||
left 0
|
||||
right 0
|
||||
margin 0 auto
|
||||
background rgba(isDark ? #fff : #000, 0.1)
|
||||
background var(--messagingRoomDateDividerLine)
|
||||
|
||||
> span
|
||||
display inline-block
|
||||
@ -357,8 +347,8 @@ root(isDark)
|
||||
padding 0 16px
|
||||
//font-weight bold
|
||||
line-height 32px
|
||||
color rgba(isDark ? #fff : #000, 0.3)
|
||||
background isDark ? #191b22 : #fff
|
||||
color var(--messagingRoomDateDividerText)
|
||||
background var(--messagingRoomBg)
|
||||
|
||||
> footer
|
||||
position -webkit-sticky
|
||||
@ -369,7 +359,7 @@ root(isDark)
|
||||
max-width 600px
|
||||
margin 0 auto
|
||||
padding 0
|
||||
background rgba(isDark ? #282c37 : #fff, 0.95)
|
||||
//background rgba(var(--face), 0.95)
|
||||
background-clip content-box
|
||||
|
||||
> .new-message
|
||||
@ -386,15 +376,15 @@ root(isDark)
|
||||
cursor pointer
|
||||
line-height 32px
|
||||
font-size 12px
|
||||
color $theme-color-foreground
|
||||
background $theme-color
|
||||
color var(--primaryForeground)
|
||||
background var(--primary)
|
||||
border-radius 16px
|
||||
|
||||
&:hover
|
||||
background lighten($theme-color, 10%)
|
||||
background var(--primaryLighten10)
|
||||
|
||||
&:active
|
||||
background darken($theme-color, 10%)
|
||||
background var(--primaryDarken10)
|
||||
|
||||
> [data-fa]
|
||||
position absolute
|
||||
@ -410,10 +400,4 @@ root(isDark)
|
||||
transition opacity 0.5s
|
||||
opacity 0
|
||||
|
||||
.mk-messaging-room[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-messaging-room:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -167,9 +167,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.mk-messaging
|
||||
|
||||
&[data-compact]
|
||||
font-size 0.8em
|
||||
@ -204,12 +202,10 @@ root(isDark)
|
||||
left 0
|
||||
z-index 1
|
||||
width 100%
|
||||
background #fff
|
||||
box-shadow 0 0px 2px rgba(#000, 0.2)
|
||||
|
||||
> .form
|
||||
padding 8px
|
||||
background isDark ? #282c37 : #f7f7f7
|
||||
background rgba(0, 0, 0, 0.02)
|
||||
|
||||
> label
|
||||
display block
|
||||
@ -229,32 +225,22 @@ root(isDark)
|
||||
bottom 0
|
||||
left 0
|
||||
width 1em
|
||||
line-height 56px
|
||||
line-height 48px
|
||||
margin auto
|
||||
color #555
|
||||
|
||||
> input
|
||||
margin 0
|
||||
padding 0 0 0 32px
|
||||
padding 0 0 0 42px
|
||||
width 100%
|
||||
font-size 1em
|
||||
line-height 38px
|
||||
color #000
|
||||
line-height 48px
|
||||
color var(--faceText)
|
||||
outline none
|
||||
background isDark ? #191b22 : #fff
|
||||
border solid 1px isDark ? #495156 : #eee
|
||||
background transparent
|
||||
border none
|
||||
border-radius 5px
|
||||
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
|
||||
display block
|
||||
@ -287,7 +273,7 @@ root(isDark)
|
||||
&:hover
|
||||
&:focus
|
||||
color #fff
|
||||
background $theme-color
|
||||
background var(--primary)
|
||||
|
||||
.name
|
||||
color #fff
|
||||
@ -297,7 +283,7 @@ root(isDark)
|
||||
|
||||
&:active
|
||||
color #fff
|
||||
background darken($theme-color, 10%)
|
||||
background var(--primaryDarken10)
|
||||
|
||||
.name
|
||||
color #fff
|
||||
@ -329,21 +315,21 @@ root(isDark)
|
||||
> a
|
||||
display block
|
||||
text-decoration none
|
||||
background isDark ? #282c37 : #fff
|
||||
border-bottom solid 1px isDark ? #1c2023 : #eee
|
||||
background var(--face)
|
||||
border-bottom solid 1px var(--faceDivider)
|
||||
|
||||
*
|
||||
pointer-events none
|
||||
user-select none
|
||||
|
||||
&:hover
|
||||
background isDark ? #1e2129 : #fafafa
|
||||
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
|
||||
|
||||
> .avatar
|
||||
.avatar
|
||||
filter saturate(200%)
|
||||
|
||||
&:active
|
||||
background isDark ? #14161b : #eee
|
||||
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
|
||||
|
||||
&[data-is-read]
|
||||
&[data-is-me]
|
||||
@ -383,17 +369,17 @@ root(isDark)
|
||||
overflow hidden
|
||||
text-overflow ellipsis
|
||||
font-size 1em
|
||||
color isDark ? #fff : rgba(#000, 0.9)
|
||||
color var(--noteHeaderName)
|
||||
font-weight bold
|
||||
transition all 0.1s ease
|
||||
|
||||
> .username
|
||||
margin 0 8px
|
||||
color isDark ? #606984 : rgba(#000, 0.5)
|
||||
color var(--noteHeaderAcct)
|
||||
|
||||
> .mk-time
|
||||
margin 0 0 0 auto
|
||||
color isDark ? #606984 : rgba(#000, 0.5)
|
||||
color var(--noteHeaderInfo)
|
||||
font-size 80%
|
||||
|
||||
> .avatar
|
||||
@ -413,10 +399,10 @@ root(isDark)
|
||||
overflow hidden
|
||||
overflow-wrap break-word
|
||||
font-size 1.1em
|
||||
color isDark ? #fff : rgba(#000, 0.8)
|
||||
color var(--faceText)
|
||||
|
||||
.me
|
||||
color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.4)
|
||||
opacity 0.7
|
||||
|
||||
> .image
|
||||
display block
|
||||
@ -461,10 +447,4 @@ root(isDark)
|
||||
> .avatar
|
||||
margin 0 12px 0 0
|
||||
|
||||
.mk-messaging[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-messaging:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -42,9 +42,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.bvonvjxbwzaiskogyhbwgyxvcgserpmu
|
||||
display flex
|
||||
align-items baseline
|
||||
white-space nowrap
|
||||
@ -61,7 +59,7 @@ root(isDark)
|
||||
margin 0 .5em 0 0
|
||||
padding 0
|
||||
overflow hidden
|
||||
color isDark ? #fff : #627079
|
||||
color var(--noteHeaderName)
|
||||
font-size 1em
|
||||
font-weight bold
|
||||
text-decoration none
|
||||
@ -82,19 +80,19 @@ root(isDark)
|
||||
margin 0 .5em 0 0
|
||||
padding 1px 6px
|
||||
font-size 80%
|
||||
color isDark ? #758188 : #aaa
|
||||
border solid 1px isDark ? #57616f : #ddd
|
||||
color var(--noteHeaderBadgeFg)
|
||||
background var(--noteHeaderBadgeBg)
|
||||
border-radius 3px
|
||||
|
||||
&.is-admin
|
||||
border-color isDark ? #d42c41 : #f56a7b
|
||||
color isDark ? #d42c41 : #f56a7b
|
||||
background var(--noteHeaderAdminBg)
|
||||
color var(--noteHeaderAdminFg)
|
||||
|
||||
> .username
|
||||
margin 0 .5em 0 0
|
||||
overflow hidden
|
||||
text-overflow ellipsis
|
||||
color isDark ? #606984 : #ccc
|
||||
color var(--noteHeaderAcct)
|
||||
flex-shrink 2147483647
|
||||
|
||||
> .info
|
||||
@ -102,7 +100,7 @@ root(isDark)
|
||||
font-size 0.9em
|
||||
|
||||
> *
|
||||
color isDark ? #606984 : #c0c0c0
|
||||
color var(--noteHeaderInfo)
|
||||
|
||||
> .mobile
|
||||
margin-right 8px
|
||||
@ -110,15 +108,9 @@ root(isDark)
|
||||
> .app
|
||||
margin-right 8px
|
||||
padding-right 8px
|
||||
border-right solid 1px isDark ? #1c2023 : #eaeaea
|
||||
border-right solid 1px var(--faceDivider)
|
||||
|
||||
> .visibility
|
||||
margin-left 8px
|
||||
|
||||
.bvonvjxbwzaiskogyhbwgyxvcgserpmu[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.bvonvjxbwzaiskogyhbwgyxvcgserpmu:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -68,9 +68,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.mk-poll-editor
|
||||
padding 8px
|
||||
|
||||
> .caution
|
||||
@ -103,49 +101,43 @@ root(isDark)
|
||||
padding 6px 8px
|
||||
width 300px
|
||||
font-size 14px
|
||||
color isDark ? #fff : #000
|
||||
background isDark ? #191b22 : #fff
|
||||
border solid 1px rgba($theme-color, 0.1)
|
||||
color var(--inputText)
|
||||
background var(--pollEditorInputBg)
|
||||
border solid 1px var(--primaryAlpha01)
|
||||
border-radius 4px
|
||||
|
||||
&:hover
|
||||
border-color rgba($theme-color, 0.2)
|
||||
border-color var(--primaryAlpha02)
|
||||
|
||||
&:focus
|
||||
border-color rgba($theme-color, 0.5)
|
||||
border-color var(--primaryAlpha05)
|
||||
|
||||
> button
|
||||
padding 4px 8px
|
||||
color rgba($theme-color, 0.4)
|
||||
color var(--primaryAlpha04)
|
||||
|
||||
&:hover
|
||||
color rgba($theme-color, 0.6)
|
||||
color var(--primaryAlpha06)
|
||||
|
||||
&:active
|
||||
color darken($theme-color, 30%)
|
||||
color var(--primaryDarken30)
|
||||
|
||||
> .add
|
||||
margin 8px 0 0 0
|
||||
vertical-align top
|
||||
color $theme-color
|
||||
color var(--primary)
|
||||
|
||||
> .destroy
|
||||
position absolute
|
||||
top 0
|
||||
right 0
|
||||
padding 4px 8px
|
||||
color rgba($theme-color, 0.4)
|
||||
color var(--primaryAlpha04)
|
||||
|
||||
&:hover
|
||||
color rgba($theme-color, 0.6)
|
||||
color var(--primaryAlpha06)
|
||||
|
||||
&:active
|
||||
color darken($theme-color, 30%)
|
||||
|
||||
.mk-poll-editor[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-poll-editor:not([data-darkmode])
|
||||
root(false)
|
||||
color var(--primaryDarken30)
|
||||
|
||||
</style>
|
||||
|
||||
@ -67,10 +67,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
|
||||
.mk-poll
|
||||
> ul
|
||||
display block
|
||||
margin 0
|
||||
@ -82,8 +79,8 @@ root(isDark)
|
||||
margin 4px 0
|
||||
padding 4px 8px
|
||||
width 100%
|
||||
color isDark ? #fff : #000
|
||||
border solid 1px isDark ? #5e636f : #eee
|
||||
color var(--pollChoiceText)
|
||||
border solid 1px var(--pollChoiceBorder)
|
||||
border-radius 4px
|
||||
overflow hidden
|
||||
cursor pointer
|
||||
@ -99,7 +96,7 @@ root(isDark)
|
||||
top 0
|
||||
left 0
|
||||
height 100%
|
||||
background $theme-color
|
||||
background var(--primary)
|
||||
transition width 1s ease
|
||||
|
||||
> span
|
||||
@ -110,7 +107,7 @@ root(isDark)
|
||||
margin-left 4px
|
||||
|
||||
> p
|
||||
color isDark ? #a3aebf : #000
|
||||
color var(--text)
|
||||
|
||||
a
|
||||
color inherit
|
||||
@ -125,10 +122,4 @@ root(isDark)
|
||||
&:active
|
||||
background transparent
|
||||
|
||||
.mk-poll[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-poll:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -210,11 +210,9 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
$border-color = rgba(27, 31, 35, 0.15)
|
||||
|
||||
root(isDark)
|
||||
.mk-reaction-picker
|
||||
position initial
|
||||
|
||||
> .backdrop
|
||||
@ -224,11 +222,11 @@ root(isDark)
|
||||
z-index 10000
|
||||
width 100%
|
||||
height 100%
|
||||
background isDark ? rgba(#000, 0.4) : rgba(#000, 0.1)
|
||||
background var(--modalBackdrop)
|
||||
opacity 0
|
||||
|
||||
> .popover
|
||||
$bgcolor = isDark ? #2c303c : #fff
|
||||
$bgcolor = var(--popupBg)
|
||||
position absolute
|
||||
z-index 10001
|
||||
background $bgcolor
|
||||
@ -281,8 +279,8 @@ root(isDark)
|
||||
margin 0
|
||||
padding 8px 10px
|
||||
font-size 14px
|
||||
color isDark ? #d6dce2 : #586069
|
||||
border-bottom solid 1px isDark ? #1c2023 : #e1e4e8
|
||||
color var(--popupFg)
|
||||
border-bottom solid 1px var(--faceDivider)
|
||||
|
||||
> div
|
||||
padding 4px
|
||||
@ -301,7 +299,7 @@ root(isDark)
|
||||
right 0
|
||||
bottom 0
|
||||
left 0
|
||||
border 2px solid rgba($theme-color, 0.3)
|
||||
border 2px solid var(--primaryAlpha03)
|
||||
border-radius 4px
|
||||
|
||||
> button
|
||||
@ -312,16 +310,10 @@ root(isDark)
|
||||
border-radius 2px
|
||||
|
||||
&:hover
|
||||
background isDark ? #252731 : #eee
|
||||
background var(--reactionPickerButtonHoverBg)
|
||||
|
||||
&:active
|
||||
background $theme-color
|
||||
background var(--primary)
|
||||
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>
|
||||
|
||||
@ -39,10 +39,9 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
$borderColor = isDark ? #5e6673 : #eee
|
||||
border-top dashed 1px $borderColor
|
||||
border-bottom dashed 1px $borderColor
|
||||
.mk-reactions-viewer
|
||||
border-top dashed 1px var(--reactionViewerBorder)
|
||||
border-bottom dashed 1px var(--reactionViewerBorder)
|
||||
margin 4px 0
|
||||
|
||||
&:empty
|
||||
@ -60,12 +59,6 @@ root(isDark)
|
||||
> span
|
||||
margin-left 4px
|
||||
font-size 1.2em
|
||||
color isDark ? #d1d5dc : #444
|
||||
|
||||
.mk-reactions-viewer[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-reactions-viewer:not([data-darkmode])
|
||||
root(false)
|
||||
color var(--text)
|
||||
|
||||
</style>
|
||||
|
||||
@ -68,7 +68,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.mk-signin
|
||||
color #555
|
||||
|
||||
@ -151,7 +151,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.mk-signup
|
||||
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>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.jtivnzhfwquxpsfidertopbmwmchmnmo
|
||||
height 100%
|
||||
width 100%
|
||||
|
||||
@ -81,10 +81,4 @@ root(isDark)
|
||||
height 100%
|
||||
width 100%
|
||||
|
||||
.jtivnzhfwquxpsfidertopbmwmchmnmo[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.jtivnzhfwquxpsfidertopbmwmchmnmo:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</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>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.csqvmxybqbycalfhkxvyfrgbrdalkaoc
|
||||
> .fetching
|
||||
> .empty
|
||||
margin 0
|
||||
padding 16px
|
||||
text-align center
|
||||
color #aaa
|
||||
color var(--text)
|
||||
opacity 0.7
|
||||
|
||||
> [data-fa]
|
||||
margin-right 4px
|
||||
@ -70,13 +71,13 @@ root(isDark)
|
||||
padding 14px 16px
|
||||
|
||||
&:not(:last-child)
|
||||
border-bottom solid 1px isDark ? #393f4f : #eee
|
||||
border-bottom solid 1px var(--faceDivider)
|
||||
|
||||
> .tag
|
||||
flex 1
|
||||
overflow hidden
|
||||
font-size 14px
|
||||
color isDark ? #9baec8 : #65727b
|
||||
color var(--text)
|
||||
|
||||
> a
|
||||
display block
|
||||
@ -94,10 +95,4 @@ root(isDark)
|
||||
> .chart
|
||||
height 30px
|
||||
|
||||
.csqvmxybqbycalfhkxvyfrgbrdalkaoc[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.csqvmxybqbycalfhkxvyfrgbrdalkaoc:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
<template>
|
||||
<div class="ui-button" :class="[styl]">
|
||||
<button :type="type" @click="$emit('click')">
|
||||
<slot></slot>
|
||||
</button>
|
||||
</div>
|
||||
<button class="dmtdnykelhudezerjlfpbhgovrgnqqgr" :class="[styl, { inline, primary }]" :type="type" @click="$emit('click')">
|
||||
<slot></slot>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@ -13,70 +11,90 @@ export default Vue.extend({
|
||||
type: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
primary: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
inline: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
styl: 'fill'
|
||||
};
|
||||
},
|
||||
inject: {
|
||||
isCardChild: { default: false }
|
||||
},
|
||||
created() {
|
||||
if (this.isCardChild) {
|
||||
this.styl = 'line';
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
.dmtdnykelhudezerjlfpbhgovrgnqqgr
|
||||
display block
|
||||
width 100%
|
||||
min-height 40px
|
||||
margin 0
|
||||
padding 0
|
||||
font-weight normal
|
||||
font-size 16px
|
||||
border none
|
||||
border-radius 6px
|
||||
outline none
|
||||
box-shadow none
|
||||
|
||||
root(isDark, fill)
|
||||
> button
|
||||
display block
|
||||
width 100%
|
||||
margin 0
|
||||
padding 0
|
||||
&:focus
|
||||
&:after
|
||||
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
|
||||
font-size 16px
|
||||
line-height 44px
|
||||
border none
|
||||
border-radius 6px
|
||||
outline none
|
||||
box-shadow none
|
||||
|
||||
if fill
|
||||
color $theme-color-foreground
|
||||
background $theme-color
|
||||
&.fill
|
||||
color var(--text)
|
||||
background var(--buttonBg)
|
||||
|
||||
&:hover
|
||||
background var(--buttonHoverBg)
|
||||
|
||||
&:active
|
||||
background var(--buttonActiveBg)
|
||||
|
||||
&.primary
|
||||
color var(--primaryForeground)
|
||||
background var(--primary)
|
||||
|
||||
&:hover
|
||||
background lighten($theme-color, 5%)
|
||||
background var(--primaryLighten5)
|
||||
|
||||
&:active
|
||||
background darken($theme-color, 5%)
|
||||
else
|
||||
color $theme-color
|
||||
background none
|
||||
background var(--primaryDarken5)
|
||||
|
||||
&:hover
|
||||
color darken($theme-color, 5%)
|
||||
|
||||
&:active
|
||||
background rgba($theme-color, 0.3)
|
||||
|
||||
.ui-button[data-darkmode]
|
||||
&.fill
|
||||
root(true, true)
|
||||
&:not(.fill)
|
||||
root(true, false)
|
||||
color var(--primary)
|
||||
background none
|
||||
|
||||
.ui-button:not([data-darkmode])
|
||||
&.fill
|
||||
root(false, true)
|
||||
&:not(.fill)
|
||||
root(false, false)
|
||||
&:hover
|
||||
color var(--primaryDarken5)
|
||||
|
||||
&:active
|
||||
background var(--primaryAlpha03)
|
||||
|
||||
</style>
|
||||
|
||||
@ -20,26 +20,24 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.ui-card
|
||||
margin 16px
|
||||
color isDark ? #fff : #000
|
||||
background isDark ? #282C37 : #fff
|
||||
color var(--faceText)
|
||||
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)
|
||||
|
||||
> header
|
||||
padding 16px
|
||||
font-weight bold
|
||||
font-size 20px
|
||||
color isDark ? #fff : #444
|
||||
color var(--faceText)
|
||||
|
||||
@media (min-width 500px)
|
||||
padding 24px 32px
|
||||
|
||||
> section
|
||||
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)
|
||||
padding 32px
|
||||
@ -50,12 +48,5 @@ root(isDark)
|
||||
> header
|
||||
margin-bottom 16px
|
||||
font-weight bold
|
||||
color isDark ? #fff : #444
|
||||
|
||||
.ui-card[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.ui-card:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
color var(--faceText)
|
||||
</style>
|
||||
|
||||
@ -19,7 +19,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.ui-form
|
||||
> fieldset
|
||||
|
||||
@ -25,9 +25,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.nvemkhtwcnnpkdrwfcbzuwhfulejhmzg
|
||||
display inline-block
|
||||
|
||||
& + .nvemkhtwcnnpkdrwfcbzuwhfulejhmzg
|
||||
@ -38,11 +36,11 @@ root(isDark)
|
||||
margin 0
|
||||
padding 12px 20px
|
||||
font-size 14px
|
||||
border 1px solid isDark ? #6d727d : #dcdfe6
|
||||
border 1px solid var(--formButtonBorder)
|
||||
border-radius 4px
|
||||
outline none
|
||||
box-shadow none
|
||||
color isDark ? #fff : #606266
|
||||
color var(--text)
|
||||
transition 0.1s
|
||||
|
||||
*
|
||||
@ -50,40 +48,34 @@ root(isDark)
|
||||
|
||||
&:hover
|
||||
&:focus
|
||||
color $theme-color
|
||||
background rgba($theme-color, isDark ? 0.2 : 0.12)
|
||||
border-color rgba($theme-color, isDark ? 0.5 : 0.3)
|
||||
color var(--primary)
|
||||
background var(--formButtonHoverBg)
|
||||
border-color var(--formButtonHoverBorder)
|
||||
|
||||
&:active
|
||||
color darken($theme-color, 20%)
|
||||
background rgba($theme-color, 0.12)
|
||||
border-color $theme-color
|
||||
color var(--primaryDarken20)
|
||||
background var(--formButtonActiveBg)
|
||||
border-color var(--primary)
|
||||
transition all 0s
|
||||
|
||||
&.primary
|
||||
> button
|
||||
border 1px solid $theme-color
|
||||
background $theme-color
|
||||
color $theme-color-foreground
|
||||
border 1px solid var(--primary)
|
||||
background var(--primary)
|
||||
color var(--primaryForeground)
|
||||
|
||||
&:hover
|
||||
&:focus
|
||||
background lighten($theme-color, 20%)
|
||||
border-color lighten($theme-color, 20%)
|
||||
background var(--primaryLighten20)
|
||||
border-color var(--primaryLighten20)
|
||||
|
||||
&:active
|
||||
background darken($theme-color, 20%)
|
||||
border-color darken($theme-color, 20%)
|
||||
background var(--primaryDarken20)
|
||||
border-color var(--primaryDarken20)
|
||||
transition all 0s
|
||||
|
||||
&.round
|
||||
> button
|
||||
border-radius 64px
|
||||
|
||||
.nvemkhtwcnnpkdrwfcbzuwhfulejhmzg[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.nvemkhtwcnnpkdrwfcbzuwhfulejhmzg:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -49,9 +49,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.uywduthvrdnlpsvsjkqigicixgyfctto
|
||||
display inline-flex
|
||||
margin 0 16px 0 0
|
||||
cursor pointer
|
||||
@ -62,7 +60,7 @@ root(isDark)
|
||||
|
||||
&:hover
|
||||
> .button
|
||||
border solid 2px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
|
||||
border solid 2px var(--inputLabel)
|
||||
|
||||
&.disabled
|
||||
opacity 0.6
|
||||
@ -70,15 +68,15 @@ root(isDark)
|
||||
|
||||
&.checked
|
||||
> .button
|
||||
border-color $theme-color
|
||||
border-color var(--primary)
|
||||
|
||||
&:after
|
||||
background-color $theme-color
|
||||
background-color var(--primary)
|
||||
transform scale(1)
|
||||
opacity 1
|
||||
|
||||
> .label
|
||||
color $theme-color
|
||||
color var(--primary)
|
||||
|
||||
> input
|
||||
position absolute
|
||||
@ -93,7 +91,7 @@ root(isDark)
|
||||
width 20px
|
||||
height 20px
|
||||
background none
|
||||
border solid 2px isDark ? rgba(#fff, 0.6) : rgba(#000, 0.4)
|
||||
border solid 2px var(--radioBorder)
|
||||
border-radius 100%
|
||||
transition inherit
|
||||
|
||||
@ -117,10 +115,4 @@ root(isDark)
|
||||
line-height 20px
|
||||
cursor pointer
|
||||
|
||||
.uywduthvrdnlpsvsjkqigicixgyfctto[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.uywduthvrdnlpsvsjkqigicixgyfctto:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -155,9 +155,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark, fill)
|
||||
root(fill)
|
||||
margin 32px 0
|
||||
|
||||
> .icon
|
||||
@ -167,7 +165,7 @@ root(isDark, fill)
|
||||
width 24px
|
||||
text-align center
|
||||
line-height 32px
|
||||
color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
|
||||
color var(--inputLabel)
|
||||
|
||||
&:not(:empty) + .input
|
||||
margin-left 28px
|
||||
@ -183,7 +181,7 @@ root(isDark, fill)
|
||||
left 0
|
||||
right 0
|
||||
height 1px
|
||||
background isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
|
||||
background var(--inputBorder)
|
||||
|
||||
&:after
|
||||
content ''
|
||||
@ -193,7 +191,7 @@ root(isDark, fill)
|
||||
left 0
|
||||
right 0
|
||||
height 2px
|
||||
background $theme-color
|
||||
background var(--primary)
|
||||
opacity 0
|
||||
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)
|
||||
@ -242,7 +240,7 @@ root(isDark, fill)
|
||||
transition-duration 0.3s
|
||||
font-size 16px
|
||||
line-height 32px
|
||||
color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
|
||||
color var(--inputLabel)
|
||||
pointer-events none
|
||||
//will-change transform
|
||||
transform-origin top left
|
||||
@ -257,7 +255,7 @@ root(isDark, fill)
|
||||
font-weight fill ? bold : normal
|
||||
font-size 16px
|
||||
line-height 32px
|
||||
color isDark ? #fff : #000
|
||||
color var(--inputText)
|
||||
background transparent
|
||||
border none
|
||||
border-radius 0
|
||||
@ -280,7 +278,7 @@ root(isDark, fill)
|
||||
top 0
|
||||
font-size 16px
|
||||
line-height fill ? 44px : 32px
|
||||
color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
|
||||
color var(--inputLabel)
|
||||
pointer-events none
|
||||
|
||||
&:empty
|
||||
@ -325,7 +323,7 @@ root(isDark, fill)
|
||||
transform scaleX(1)
|
||||
|
||||
> .label
|
||||
color $theme-color
|
||||
color var(--primary)
|
||||
|
||||
&.focused
|
||||
&.filled
|
||||
@ -335,16 +333,10 @@ root(isDark, fill)
|
||||
left 0 !important
|
||||
transform scale(0.75)
|
||||
|
||||
.ui-input[data-darkmode]
|
||||
.ui-input
|
||||
&.fill
|
||||
root(true, true)
|
||||
root(true)
|
||||
&:not(.fill)
|
||||
root(true, false)
|
||||
|
||||
.ui-input:not([data-darkmode])
|
||||
&.fill
|
||||
root(false, true)
|
||||
&:not(.fill)
|
||||
root(false, false)
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -51,9 +51,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.ui-radio
|
||||
display inline-block
|
||||
margin 0 32px 0 0
|
||||
cursor pointer
|
||||
@ -68,10 +66,10 @@ root(isDark)
|
||||
|
||||
&.checked
|
||||
> .button
|
||||
border-color $theme-color
|
||||
border-color var(--primary)
|
||||
|
||||
&:after
|
||||
background-color $theme-color
|
||||
background-color var(--primary)
|
||||
transform scale(1)
|
||||
opacity 1
|
||||
|
||||
@ -87,7 +85,7 @@ root(isDark)
|
||||
width 20px
|
||||
height 20px
|
||||
background none
|
||||
border solid 2px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
|
||||
border solid 2px var(--inputLabel)
|
||||
border-radius 100%
|
||||
transition inherit
|
||||
|
||||
@ -111,10 +109,4 @@ root(isDark)
|
||||
line-height 20px
|
||||
cursor pointer
|
||||
|
||||
.ui-radio[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.ui-radio:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -70,9 +70,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark, fill)
|
||||
root(fill)
|
||||
margin 32px 0
|
||||
|
||||
> .icon
|
||||
@ -103,7 +101,7 @@ root(isDark, fill)
|
||||
left 0
|
||||
right 0
|
||||
height 1px
|
||||
background isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
|
||||
background var(--inputBorder)
|
||||
|
||||
&:after
|
||||
content ''
|
||||
@ -113,7 +111,7 @@ root(isDark, fill)
|
||||
left 0
|
||||
right 0
|
||||
height 2px
|
||||
background $theme-color
|
||||
background var(--primary)
|
||||
opacity 0
|
||||
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)
|
||||
@ -143,7 +141,7 @@ root(isDark, fill)
|
||||
font-weight fill ? bold : normal
|
||||
font-size 16px
|
||||
height 32px
|
||||
color isDark ? #fff : #000
|
||||
color var(--inputText)
|
||||
background transparent
|
||||
border none
|
||||
border-radius 0
|
||||
@ -190,7 +188,7 @@ root(isDark, fill)
|
||||
transform scaleX(1)
|
||||
|
||||
> .label
|
||||
color $theme-color
|
||||
color var(--primary)
|
||||
|
||||
&.focused
|
||||
&.filled
|
||||
@ -200,16 +198,10 @@ root(isDark, fill)
|
||||
left 0 !important
|
||||
transform scale(0.75)
|
||||
|
||||
.ui-select[data-darkmode]
|
||||
.ui-select
|
||||
&.fill
|
||||
root(true, true)
|
||||
root(true)
|
||||
&:not(.fill)
|
||||
root(true, false)
|
||||
|
||||
.ui-select:not([data-darkmode])
|
||||
&.fill
|
||||
root(false, true)
|
||||
&:not(.fill)
|
||||
root(false, false)
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
<span class="label">
|
||||
<span :aria-hidden="!checked"><slot></slot></span>
|
||||
<p :aria-hidden="!checked">
|
||||
<slot name="text"></slot>
|
||||
<slot name="desc"></slot>
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
@ -56,9 +56,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.ui-switch
|
||||
display flex
|
||||
margin 32px 0
|
||||
cursor pointer
|
||||
@ -79,11 +77,11 @@ root(isDark)
|
||||
|
||||
&.checked
|
||||
> .button
|
||||
background-color rgba($theme-color, 0.4)
|
||||
border-color rgba($theme-color, 0.4)
|
||||
background-color var(--primaryAlpha04)
|
||||
border-color var(--primaryAlpha04)
|
||||
|
||||
> *
|
||||
background-color $theme-color
|
||||
background-color var(--primary)
|
||||
transform translateX(14px)
|
||||
|
||||
> input
|
||||
@ -99,7 +97,7 @@ root(isDark)
|
||||
margin 3px 0 0 0
|
||||
width 34px
|
||||
height 14px
|
||||
background isDark ? rgba(#fff, 0.15) : rgba(#000, 0.25)
|
||||
background var(--switchTrack)
|
||||
outline none
|
||||
border-radius 14px
|
||||
transition inherit
|
||||
@ -125,18 +123,11 @@ root(isDark)
|
||||
> span
|
||||
display block
|
||||
line-height 20px
|
||||
color isDark ? #c4ccd2 : rgba(#000, 0.75)
|
||||
color currentColor
|
||||
transition inherit
|
||||
|
||||
> p
|
||||
margin 0
|
||||
//font-size 90%
|
||||
color isDark ? #78858e : #9daab3
|
||||
|
||||
.ui-switch[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.ui-switch:not([data-darkmode])
|
||||
root(false)
|
||||
opacity 0.7
|
||||
|
||||
</style>
|
||||
|
||||
@ -63,9 +63,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark, fill)
|
||||
root(fill)
|
||||
margin 42px 0 32px 0
|
||||
|
||||
> .input
|
||||
@ -84,7 +82,7 @@ root(isDark, fill)
|
||||
left 0
|
||||
right 0
|
||||
background none
|
||||
border solid 1px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
|
||||
border solid 1px var(--inputBorder)
|
||||
border-radius 3px
|
||||
pointer-events none
|
||||
|
||||
@ -97,7 +95,7 @@ root(isDark, fill)
|
||||
left 0
|
||||
right 0
|
||||
background none
|
||||
border solid 2px $theme-color
|
||||
border solid 2px var(--primary)
|
||||
border-radius 3px
|
||||
opacity 0
|
||||
transition opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)
|
||||
@ -112,7 +110,7 @@ root(isDark, fill)
|
||||
transition-duration 0.3s
|
||||
font-size 16px
|
||||
line-height 32px
|
||||
color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
|
||||
color var(--inputLabel)
|
||||
pointer-events none
|
||||
//will-change transform
|
||||
transform-origin top left
|
||||
@ -126,7 +124,7 @@ root(isDark, fill)
|
||||
font inherit
|
||||
font-weight fill ? bold : normal
|
||||
font-size 16px
|
||||
color isDark ? #fff : #000
|
||||
color var(--inputText)
|
||||
background transparent
|
||||
border none
|
||||
border-radius 0
|
||||
@ -149,7 +147,7 @@ root(isDark, fill)
|
||||
opacity 1
|
||||
|
||||
> .label
|
||||
color $theme-color
|
||||
color var(--primary)
|
||||
|
||||
&.focused
|
||||
&.filled
|
||||
@ -159,16 +157,10 @@ root(isDark, fill)
|
||||
left 0 !important
|
||||
transform scale(0.75)
|
||||
|
||||
.ui-textarea[data-darkmode]
|
||||
&.fill
|
||||
root(true, true)
|
||||
&:not(.fill)
|
||||
root(true, false)
|
||||
.ui-textarea.fill
|
||||
root(true)
|
||||
|
||||
.ui-textarea:not([data-darkmode])
|
||||
&.fill
|
||||
root(false, true)
|
||||
&:not(.fill)
|
||||
root(false, false)
|
||||
.ui-textarea:not(.fill)
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -81,7 +81,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.mk-uploader
|
||||
overflow auto
|
||||
@ -100,7 +100,7 @@ export default Vue.extend({
|
||||
margin 8px 0 0 0
|
||||
padding 0
|
||||
height 36px
|
||||
box-shadow 0 -1px 0 rgba($theme-color, 0.1)
|
||||
box-shadow 0 -1px 0 var(--primaryAlpha01)
|
||||
border-top solid 8px transparent
|
||||
|
||||
&:first-child
|
||||
@ -127,7 +127,7 @@ export default Vue.extend({
|
||||
padding 0
|
||||
max-width 256px
|
||||
font-size 0.8em
|
||||
color rgba($theme-color, 0.7)
|
||||
color var(--primaryAlpha07)
|
||||
white-space nowrap
|
||||
text-overflow ellipsis
|
||||
overflow hidden
|
||||
@ -145,17 +145,17 @@ export default Vue.extend({
|
||||
font-size 0.8em
|
||||
|
||||
> .initing
|
||||
color rgba($theme-color, 0.5)
|
||||
color var(--primaryAlpha05)
|
||||
|
||||
> .kb
|
||||
color rgba($theme-color, 0.5)
|
||||
color var(--primaryAlpha05)
|
||||
|
||||
> .percentage
|
||||
display inline-block
|
||||
width 48px
|
||||
text-align right
|
||||
|
||||
color rgba($theme-color, 0.7)
|
||||
color var(--primaryAlpha07)
|
||||
|
||||
&:after
|
||||
content '%'
|
||||
@ -174,10 +174,10 @@ export default Vue.extend({
|
||||
overflow hidden
|
||||
|
||||
&::-webkit-progress-value
|
||||
background $theme-color
|
||||
background var(--primary)
|
||||
|
||||
&::-webkit-progress-bar
|
||||
background rgba($theme-color, 0.1)
|
||||
background var(--primaryAlpha01)
|
||||
|
||||
> .progress
|
||||
display block
|
||||
@ -191,13 +191,13 @@ export default Vue.extend({
|
||||
border-radius 4px
|
||||
background linear-gradient(
|
||||
45deg,
|
||||
lighten($theme-color, 30%) 25%,
|
||||
$theme-color 25%,
|
||||
$theme-color 50%,
|
||||
lighten($theme-color, 30%) 50%,
|
||||
lighten($theme-color, 30%) 75%,
|
||||
$theme-color 75%,
|
||||
$theme-color
|
||||
var(--primaryLighten30) 25%,
|
||||
var(--primary) 25%,
|
||||
var(--primary) 50%,
|
||||
var(--primaryLighten30) 50%,
|
||||
var(--primaryLighten30) 75%,
|
||||
var(--primary) 75%,
|
||||
var(--primary)
|
||||
)
|
||||
background-size 32px 32px
|
||||
animation bg 1.5s linear infinite
|
||||
|
||||
@ -200,17 +200,17 @@ export default Vue.extend({
|
||||
top 0
|
||||
width 100%
|
||||
|
||||
root(isDark)
|
||||
.mk-url-preview
|
||||
> a
|
||||
display block
|
||||
font-size 14px
|
||||
border solid 1px isDark ? #191b1f : #eee
|
||||
border solid 1px var(--urlPreviewBorder)
|
||||
border-radius 4px
|
||||
overflow hidden
|
||||
|
||||
&:hover
|
||||
text-decoration none
|
||||
border-color isDark ? #4f5561 : #ddd
|
||||
border-color var(--urlPreviewBorderHover)
|
||||
|
||||
> article > header > h1
|
||||
text-decoration underline
|
||||
@ -235,11 +235,11 @@ root(isDark)
|
||||
> h1
|
||||
margin 0
|
||||
font-size 1em
|
||||
color isDark ? #d6dae0 : #555
|
||||
color var(--urlPreviewTitle)
|
||||
|
||||
> p
|
||||
margin 0
|
||||
color isDark ? #a4aab3 : #777
|
||||
color var(--urlPreviewText)
|
||||
font-size 0.8em
|
||||
|
||||
> footer
|
||||
@ -256,7 +256,7 @@ root(isDark)
|
||||
> p
|
||||
display inline-block
|
||||
margin 0
|
||||
color isDark ? #b0b4bf : #666
|
||||
color var(--urlPreviewInfo)
|
||||
font-size 0.8em
|
||||
line-height 16px
|
||||
vertical-align top
|
||||
@ -322,10 +322,4 @@ root(isDark)
|
||||
width 12px
|
||||
height 12px
|
||||
|
||||
.mk-url-preview[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-url-preview:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -127,11 +127,9 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
$border-color = rgba(27, 31, 35, 0.15)
|
||||
|
||||
root(isDark)
|
||||
.mk-visibility-chooser
|
||||
position initial
|
||||
|
||||
> .backdrop
|
||||
@ -141,11 +139,11 @@ root(isDark)
|
||||
z-index 10000
|
||||
width 100%
|
||||
height 100%
|
||||
background isDark ? rgba(#000, 0.4) : rgba(#000, 0.1)
|
||||
background var(--modalBackdrop)
|
||||
opacity 0
|
||||
|
||||
> .popover
|
||||
$bgcolor = isDark ? #2c303c : #fff
|
||||
$bgcolor = var(--popupBg)
|
||||
position absolute
|
||||
z-index 10001
|
||||
width 240px
|
||||
@ -189,18 +187,18 @@ root(isDark)
|
||||
display flex
|
||||
padding 8px 14px
|
||||
font-size 12px
|
||||
color isDark ? #fff : #666
|
||||
color var(--popupFg)
|
||||
cursor pointer
|
||||
|
||||
&:hover
|
||||
background isDark ? #252731 : #eee
|
||||
background var(--faceClearButtonHover)
|
||||
|
||||
&:active
|
||||
background isDark ? #21242b : #ddd
|
||||
background var(--faceClearButtonActive)
|
||||
|
||||
&.active
|
||||
color $theme-color-foreground
|
||||
background $theme-color
|
||||
color var(--primaryForeground)
|
||||
background var(--primary)
|
||||
|
||||
> *
|
||||
user-select none
|
||||
@ -222,11 +220,4 @@ root(isDark)
|
||||
|
||||
> span:last-child:not(:first-child)
|
||||
opacity 0.6
|
||||
|
||||
.mk-visibility-chooser[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-visibility-chooser:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -90,8 +90,8 @@ export default Vue.extend({
|
||||
opacity 0
|
||||
transform translateY(-30px)
|
||||
|
||||
root(isDark)
|
||||
background isDark ? #282C37 : #fff
|
||||
.mk-welcome-timeline
|
||||
background var(--face)
|
||||
|
||||
> div
|
||||
> *
|
||||
@ -101,8 +101,8 @@ root(isDark)
|
||||
padding 16px
|
||||
overflow-wrap break-word
|
||||
font-size .9em
|
||||
color isDark ? #fff : #4C4C4C
|
||||
border-bottom 1px solid isDark ? rgba(#000, 0.1) : rgba(#000, 0.05)
|
||||
color var(--noteText)
|
||||
border-bottom 1px solid var(--faceDivider)
|
||||
|
||||
&:after
|
||||
content ""
|
||||
@ -137,26 +137,20 @@ root(isDark)
|
||||
overflow hidden
|
||||
font-weight bold
|
||||
text-overflow ellipsis
|
||||
color isDark ? #fff : #627079
|
||||
color var(--noteHeaderName)
|
||||
|
||||
> .username
|
||||
margin 0 .5em 0 0
|
||||
color isDark ? #606984 : #ccc
|
||||
color var(--noteHeaderAcct)
|
||||
|
||||
> .info
|
||||
margin-left auto
|
||||
font-size 0.9em
|
||||
|
||||
> .created-at
|
||||
color isDark ? #606984 : #c0c0c0
|
||||
color var(--noteHeaderInfo)
|
||||
|
||||
> .text
|
||||
text-align left
|
||||
|
||||
.mk-welcome-timeline[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-welcome-timeline:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<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>
|
||||
|
||||
<main>
|
||||
@ -107,16 +107,14 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.syxhndwprovvuqhmyvveewmbqayniwkv
|
||||
padding 32px
|
||||
max-width 500px
|
||||
margin 0 auto
|
||||
text-align center
|
||||
color isDark ? #9baec8 : #868c8c
|
||||
color var(--text)
|
||||
|
||||
$bg = isDark ? #282C37 : #fff
|
||||
$bg = var(--face)
|
||||
|
||||
@media (max-width 400px)
|
||||
padding 16px
|
||||
@ -124,7 +122,6 @@ root(isDark)
|
||||
> .signed-in-as
|
||||
margin-bottom 16px
|
||||
font-size 14px
|
||||
color isDark ? #9baec8 : #9daab3
|
||||
|
||||
> main
|
||||
margin-bottom 16px
|
||||
@ -173,29 +170,29 @@ root(isDark)
|
||||
min-width 150px
|
||||
font-size 14px
|
||||
font-weight bold
|
||||
color $theme-color
|
||||
color var(--primary)
|
||||
background transparent
|
||||
outline none
|
||||
border solid 1px $theme-color
|
||||
border solid 1px var(--primary)
|
||||
border-radius 36px
|
||||
|
||||
&:hover
|
||||
background rgba($theme-color, 0.1)
|
||||
background var(--primaryAlpha01)
|
||||
|
||||
&:active
|
||||
background rgba($theme-color, 0.2)
|
||||
background var(--primaryAlpha02)
|
||||
|
||||
&.active
|
||||
color $theme-color-foreground
|
||||
background $theme-color
|
||||
color var(--primaryForeground)
|
||||
background var(--primary)
|
||||
|
||||
&:hover
|
||||
background lighten($theme-color, 10%)
|
||||
border-color lighten($theme-color, 10%)
|
||||
background var(--primaryLighten10)
|
||||
border-color var(--primaryLighten10)
|
||||
|
||||
&:active
|
||||
background darken($theme-color, 10%)
|
||||
border-color darken($theme-color, 10%)
|
||||
background var(--primaryDarken10)
|
||||
border-color var(--primaryDarken10)
|
||||
|
||||
&.wait
|
||||
cursor wait !important
|
||||
@ -204,10 +201,4 @@ root(isDark)
|
||||
*
|
||||
pointer-events none
|
||||
|
||||
.syxhndwprovvuqhmyvveewmbqayniwkv[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.syxhndwprovvuqhmyvveewmbqayniwkv:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -26,16 +26,8 @@ export default define({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.mkw-analog-clock
|
||||
.mkw-analog-clock--body
|
||||
padding 8px
|
||||
|
||||
.mkw-analog-clock[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mkw-analog-clock:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
:data-found="announcements && announcements.length != 0"
|
||||
:data-melt="props.design == 1"
|
||||
:data-mobile="platform == 'mobile'"
|
||||
:data-darkmode="$store.state.device.darkmode"
|
||||
>
|
||||
<div class="icon">
|
||||
<svg height="32" version="1.1" viewBox="0 0 32 32" width="32">
|
||||
@ -71,9 +70,9 @@ export default define({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.anltbovirfeutcigvwgmgxipejaeozxi-body
|
||||
padding 10px
|
||||
background isDark ? #253a50 : #f3f9ff
|
||||
background var(--announcementsBg)
|
||||
|
||||
&[data-melt]
|
||||
background transparent
|
||||
@ -130,14 +129,14 @@ root(isDark)
|
||||
margin 0
|
||||
font-size 0.95em
|
||||
font-weight normal
|
||||
color isDark ? #539eff : #4078c0
|
||||
color var(--announcementsTitle)
|
||||
|
||||
> p
|
||||
display block
|
||||
z-index 1
|
||||
margin 0
|
||||
font-size 0.7em
|
||||
color isDark ? #fff : #57616f
|
||||
color var(--announcementsText)
|
||||
|
||||
&.fetching
|
||||
text-align center
|
||||
@ -150,10 +149,4 @@ root(isDark)
|
||||
> p
|
||||
color #fff
|
||||
|
||||
.anltbovirfeutcigvwgmgxipejaeozxi-body[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.anltbovirfeutcigvwgmgxipejaeozxi-body:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -116,15 +116,13 @@ export default define({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.mkw-calendar
|
||||
&[data-special='on-new-years-day']
|
||||
border-color #ef95a0
|
||||
|
||||
.mkw-calendar--body
|
||||
padding 16px 0
|
||||
color isDark ? #c5ced6 : #777
|
||||
color var(--calendarDay)
|
||||
|
||||
&:after
|
||||
content ""
|
||||
@ -169,7 +167,8 @@ root(isDark)
|
||||
margin 0 0 2px 0
|
||||
font-size 12px
|
||||
line-height 18px
|
||||
color isDark ? #7a8692 : #888
|
||||
color var(--text)
|
||||
opacity 0.8
|
||||
|
||||
> b
|
||||
margin-left 2px
|
||||
@ -177,12 +176,12 @@ root(isDark)
|
||||
> .meter
|
||||
width 100%
|
||||
overflow hidden
|
||||
background isDark ? #1c1f25 : #eee
|
||||
background var(--materBg)
|
||||
border-radius 8px
|
||||
|
||||
> .val
|
||||
height 4px
|
||||
background $theme-color
|
||||
background var(--primary)
|
||||
transition width .3s cubic-bezier(0.23, 1, 0.32, 1)
|
||||
|
||||
&:nth-child(1)
|
||||
@ -197,10 +196,4 @@ root(isDark)
|
||||
> .meter > .val
|
||||
background #41ddde
|
||||
|
||||
.mkw-calendar[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mkw-calendar:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,13 +1,15 @@
|
||||
<template>
|
||||
<div class="mkw-donation" :data-mobile="platform == 'mobile'">
|
||||
<article>
|
||||
<h1>%fa:heart%%i18n:@title%</h1>
|
||||
<p v-if="meta">
|
||||
{{ '%i18n:@text%'.substr(0, '%i18n:@text%'.indexOf('{')) }}
|
||||
<a :href="meta.maintainer.url">{{ meta.maintainer.name }}</a>
|
||||
{{ '%i18n:@text%'.substr('%i18n:@text%'.indexOf('}') + 1) }}
|
||||
</p>
|
||||
</article>
|
||||
<div>
|
||||
<mk-widget-container :show-header="false">
|
||||
<article class="dolfvtibguprpxxhfndqaosjitixjohx">
|
||||
<h1>%fa:heart%%i18n:@title%</h1>
|
||||
<p v-if="meta">
|
||||
{{ '%i18n:@text%'.substr(0, '%i18n:@text%'.indexOf('{')) }}
|
||||
<a :href="meta.maintainer.url">{{ meta.maintainer.name }}</a>
|
||||
{{ '%i18n:@text%'.substr('%i18n:@text%'.indexOf('}') + 1) }}
|
||||
</p>
|
||||
</article>
|
||||
</mk-widget-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -30,46 +32,22 @@ export default define({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
background isDark ? #282c37 : #fff
|
||||
border solid 1px isDark ? #c3831c : #ead8bb
|
||||
border-radius 6px
|
||||
.dolfvtibguprpxxhfndqaosjitixjohx
|
||||
padding 20px
|
||||
background var(--donationBg)
|
||||
color var(--donationFg)
|
||||
|
||||
> article
|
||||
padding 20px
|
||||
> h1
|
||||
margin 0 0 5px 0
|
||||
font-size 1em
|
||||
|
||||
> h1
|
||||
margin 0 0 5px 0
|
||||
font-size 1em
|
||||
color isDark ? #b2bac1 : #888
|
||||
> [data-fa]
|
||||
margin-right 0.25em
|
||||
|
||||
> [data-fa]
|
||||
margin-right 0.25em
|
||||
|
||||
> p
|
||||
display block
|
||||
z-index 1
|
||||
margin 0
|
||||
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)
|
||||
> p
|
||||
display block
|
||||
z-index 1
|
||||
margin 0
|
||||
font-size 0.8em
|
||||
|
||||
</style>
|
||||
|
||||
@ -57,9 +57,7 @@ export default define({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.mkw-memo
|
||||
.mkw-memo--body
|
||||
padding-bottom 28px + 16px
|
||||
|
||||
@ -69,10 +67,10 @@ root(isDark)
|
||||
max-width 100%
|
||||
min-width 100%
|
||||
padding 16px
|
||||
color isDark ? #fff : #222
|
||||
background isDark ? #282c37 : #fff
|
||||
color var(--inputText)
|
||||
background var(--face)
|
||||
border none
|
||||
border-bottom solid 1px isDark ? #1c2023 : #eee
|
||||
border-bottom solid 1px var(--faceDivider)
|
||||
border-radius 0
|
||||
|
||||
> button
|
||||
@ -83,8 +81,8 @@ root(isDark)
|
||||
margin 0
|
||||
padding 0 10px
|
||||
height 28px
|
||||
color $theme-color-foreground
|
||||
background $theme-color !important
|
||||
color var(--primaryForeground)
|
||||
background var(--primary) !important
|
||||
outline none
|
||||
border none
|
||||
border-radius 4px
|
||||
@ -92,20 +90,14 @@ root(isDark)
|
||||
cursor pointer
|
||||
|
||||
&:hover
|
||||
background lighten($theme-color, 10%) !important
|
||||
background var(--primaryLighten10) !important
|
||||
|
||||
&:active
|
||||
background darken($theme-color, 10%) !important
|
||||
background var(--primaryDarken10) !important
|
||||
transition background 0s ease
|
||||
|
||||
&:disabled
|
||||
opacity 0.7
|
||||
cursor default
|
||||
|
||||
.mkw-memo[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mkw-memo:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -16,23 +16,17 @@ export default define({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.mkw-nav
|
||||
.mkw-nav--body
|
||||
padding 16px
|
||||
font-size 12px
|
||||
color isDark ? #9aa4b3 : #aaa
|
||||
background isDark ? #282c37 : #fff
|
||||
color var(--text)
|
||||
background var(--face)
|
||||
|
||||
a
|
||||
color isDark ? #9aa4b3 : #999
|
||||
color var(--text)
|
||||
|
||||
i
|
||||
color isDark ? #9aa4b3 : #ccc
|
||||
|
||||
.mkw-nav[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mkw-nav:not([data-darkmode])
|
||||
root(false)
|
||||
color var(--text)
|
||||
|
||||
</style>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<template slot="header">%fa:chart-line%%i18n:@title%</template>
|
||||
<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">
|
||||
<defs>
|
||||
<linearGradient :id="localGradientId" x1="0" x2="0" y1="1" y2="0">
|
||||
@ -173,7 +173,7 @@ export default define({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.qpdmibaztplkylerhdbllwcokyrfxeyj
|
||||
&.dual
|
||||
> svg
|
||||
width 50%
|
||||
@ -192,7 +192,7 @@ root(isDark)
|
||||
|
||||
> text
|
||||
font-size 5px
|
||||
fill isDark ? rgba(#fff, 0.55) : rgba(#000, 0.55)
|
||||
fill var(--chartCaption)
|
||||
|
||||
> tspan
|
||||
opacity 0.5
|
||||
@ -202,10 +202,4 @@ root(isDark)
|
||||
display block
|
||||
clear both
|
||||
|
||||
.qpdmibaztplkylerhdbllwcokyrfxeyj[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.qpdmibaztplkylerhdbllwcokyrfxeyj:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -65,7 +65,7 @@ export default define({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.mkw-rss
|
||||
.mkw-rss--body
|
||||
.feed
|
||||
padding 12px 16px
|
||||
@ -74,8 +74,8 @@ root(isDark)
|
||||
> a
|
||||
display block
|
||||
padding 4px 0
|
||||
color isDark ? #9aa4b3 : #666
|
||||
border-bottom dashed 1px isDark ? #1c2023 : #eee
|
||||
color var(--text)
|
||||
border-bottom dashed 1px var(--faceDivider)
|
||||
|
||||
&:last-child
|
||||
border-bottom none
|
||||
@ -90,7 +90,7 @@ root(isDark)
|
||||
margin-right 4px
|
||||
|
||||
&[data-mobile]
|
||||
background isDark ? #21242f : #f3f3f3
|
||||
background var(--face)
|
||||
|
||||
.feed
|
||||
padding 0
|
||||
@ -100,12 +100,6 @@ root(isDark)
|
||||
border-bottom none
|
||||
|
||||
&:nth-child(even)
|
||||
background isDark ? rgba(#000, 0.05) : rgba(#fff, 0.7)
|
||||
|
||||
.mkw-rss[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mkw-rss:not([data-darkmode])
|
||||
root(false)
|
||||
background rgba(#000, 0.05)
|
||||
|
||||
</style>
|
||||
|
||||
@ -129,7 +129,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.cpu-memory
|
||||
> svg
|
||||
display block
|
||||
padding 10px
|
||||
@ -144,7 +144,7 @@ root(isDark)
|
||||
|
||||
> text
|
||||
font-size 5px
|
||||
fill isDark ? rgba(#fff, 0.55) : rgba(#000, 0.55)
|
||||
fill var(--chartCaption)
|
||||
|
||||
> tspan
|
||||
opacity 0.5
|
||||
@ -154,10 +154,4 @@ root(isDark)
|
||||
display block
|
||||
clear both
|
||||
|
||||
.cpu-memory[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.cpu-memory:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -38,7 +38,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.cpu
|
||||
> .pie
|
||||
padding 10px
|
||||
height 100px
|
||||
@ -52,7 +52,7 @@ root(isDark)
|
||||
> p
|
||||
margin 0
|
||||
font-size 12px
|
||||
color isDark ? #a8b4bd : #505050
|
||||
color var(--chartCaption)
|
||||
|
||||
&:first-child
|
||||
font-weight bold
|
||||
@ -65,10 +65,4 @@ root(isDark)
|
||||
display block
|
||||
clear both
|
||||
|
||||
.cpu[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.cpu:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -46,7 +46,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.disk
|
||||
> .pie
|
||||
padding 10px
|
||||
height 100px
|
||||
@ -60,7 +60,7 @@ root(isDark)
|
||||
> p
|
||||
margin 0
|
||||
font-size 12px
|
||||
color isDark ? #a8b4bd : #505050
|
||||
color var(--chartCaption)
|
||||
|
||||
&:first-child
|
||||
font-weight bold
|
||||
@ -73,10 +73,4 @@ root(isDark)
|
||||
display block
|
||||
clear both
|
||||
|
||||
.disk[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.disk:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -46,7 +46,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.memory
|
||||
> .pie
|
||||
padding 10px
|
||||
height 100px
|
||||
@ -60,7 +60,7 @@ root(isDark)
|
||||
> p
|
||||
margin 0
|
||||
font-size 12px
|
||||
color isDark ? #a8b4bd : #505050
|
||||
color var(--chartCaption)
|
||||
|
||||
&:first-child
|
||||
font-weight bold
|
||||
@ -73,10 +73,4 @@ root(isDark)
|
||||
display block
|
||||
clear both
|
||||
|
||||
.memory[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.memory:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -45,7 +45,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
svg
|
||||
display block
|
||||
height 100%
|
||||
|
||||
@ -56,12 +56,6 @@ root(isDark)
|
||||
|
||||
> text
|
||||
font-size 0.15px
|
||||
fill isDark ? rgba(#fff, 0.6) : rgba(#000, 0.6)
|
||||
|
||||
svg[data-darkmode]
|
||||
root(true)
|
||||
|
||||
svg:not([data-darkmode])
|
||||
root(false)
|
||||
fill var(--chartCaption)
|
||||
|
||||
</style>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.0 KiB After Width: | Height: | Size: 7.0 KiB |
@ -29,7 +29,6 @@ import MkUser from './views/pages/user/user.vue';
|
||||
import MkFavorites from './views/pages/favorites.vue';
|
||||
import MkSelectDrive from './views/pages/selectdrive.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 MkMessagingRoom from './views/pages/messaging-room.vue';
|
||||
import MkNote from './views/pages/note.vue';
|
||||
@ -63,7 +62,6 @@ init(async (launch) => {
|
||||
{ path: '/i/messaging/:user', component: MkMessagingRoom },
|
||||
{ path: '/i/drive', component: MkDrive },
|
||||
{ path: '/i/drive/folder/:folder', component: MkDrive },
|
||||
{ path: '/i/lists/:list', component: MkUserList },
|
||||
{ path: '/selectdrive', component: MkSelectDrive },
|
||||
{ path: '/search', component: MkSearch },
|
||||
{ path: '/tags/:tag', component: MkTag },
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
@import "../app"
|
||||
@import "../reset"
|
||||
|
||||
@import "./ui"
|
||||
|
||||
*::input-placeholder
|
||||
color #D8CBC5
|
||||
|
||||
@ -11,34 +9,21 @@
|
||||
|
||||
html
|
||||
height 100%
|
||||
background #f7f7f7
|
||||
background var(--bg)
|
||||
|
||||
&, *
|
||||
&::-webkit-scrollbar
|
||||
width 6px
|
||||
height 6px
|
||||
|
||||
&::-webkit-scrollbar-track
|
||||
background var(--scrollbarTrack)
|
||||
|
||||
&::-webkit-scrollbar-thumb
|
||||
background rgba(0, 0, 0, 0.2)
|
||||
background var(--scrollbarHandle)
|
||||
|
||||
&:hover
|
||||
background rgba(0, 0, 0, 0.4)
|
||||
background var(--scrollbarHandleHover)
|
||||
|
||||
&:active
|
||||
background $theme-color
|
||||
|
||||
&[data-darkmode]
|
||||
background #191B22
|
||||
|
||||
&, *
|
||||
&::-webkit-scrollbar-track
|
||||
background-color #282C37
|
||||
|
||||
&::-webkit-scrollbar-thumb
|
||||
background-color #454954
|
||||
|
||||
&:hover
|
||||
background-color #535660
|
||||
|
||||
&: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>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
color isDark ? #c5ced6 : #777
|
||||
background isDark ? #282C37 : #fff
|
||||
.mk-calendar
|
||||
color var(--calendarDay)
|
||||
background var(--face)
|
||||
box-shadow var(--shadow)
|
||||
border-radius var(--round)
|
||||
overflow hidden
|
||||
@ -149,12 +147,10 @@ root(isDark)
|
||||
line-height 42px
|
||||
font-size 0.9em
|
||||
font-weight bold
|
||||
color isDark ? #c5ced6 : #888
|
||||
color var(--faceHeaderText)
|
||||
background var(--faceHeader)
|
||||
box-shadow 0 1px rgba(#000, 0.07)
|
||||
|
||||
if isDark
|
||||
background #313543
|
||||
|
||||
> [data-fa]
|
||||
margin-right 4px
|
||||
|
||||
@ -166,13 +162,13 @@ root(isDark)
|
||||
width 42px
|
||||
font-size 0.9em
|
||||
line-height 42px
|
||||
color isDark ? #9baec8 : #ccc
|
||||
color var(--faceTextButton)
|
||||
|
||||
&:hover
|
||||
color isDark ? #b2c1d5 : #aaa
|
||||
color var(--faceTextButtonHover)
|
||||
|
||||
&:active
|
||||
color isDark ? #b2c1d5 : #999
|
||||
color var(--faceTextButtonActive)
|
||||
|
||||
&:first-of-type
|
||||
left 0
|
||||
@ -195,65 +191,56 @@ root(isDark)
|
||||
font-size 14px
|
||||
|
||||
&.weekday
|
||||
color isDark ? #43d5dc : #19a2a9
|
||||
color var(--calendarWeek)
|
||||
|
||||
&[data-is-donichi]
|
||||
color isDark ? #ff6679 : #ef95a0
|
||||
color var(--calendarSaturdayOrSunday)
|
||||
|
||||
&[data-today]
|
||||
box-shadow 0 0 0 1px isDark ? #43d5dc : #19a2a9 inset
|
||||
box-shadow 0 0 0 1px var(--calendarWeek) inset
|
||||
border-radius 6px
|
||||
|
||||
&[data-is-donichi]
|
||||
box-shadow 0 0 0 1px isDark ? #ff6679 : #ef95a0 inset
|
||||
box-shadow 0 0 0 1px var(--calendarSaturdayOrSunday) inset
|
||||
|
||||
&.day
|
||||
cursor pointer
|
||||
color isDark ? #c5ced6 : #777
|
||||
color var(--calendarDay)
|
||||
|
||||
> div
|
||||
border-radius 6px
|
||||
|
||||
&:hover > div
|
||||
background rgba(#000, isDark ? 0.1 : 0.025)
|
||||
background var(--faceClearButtonHover)
|
||||
|
||||
&:active > div
|
||||
background rgba(#000, isDark ? 0.2 : 0.05)
|
||||
background var(--faceClearButtonActive)
|
||||
|
||||
&[data-is-donichi]
|
||||
color isDark ? #ff6679 : #ef95a0
|
||||
color var(--calendarSaturdayOrSunday)
|
||||
|
||||
&[data-is-out-of-range]
|
||||
cursor default
|
||||
color rgba(isDark ? #c5ced6 : #777, 0.5)
|
||||
|
||||
&[data-is-donichi]
|
||||
color rgba(isDark ? #ff6679 : #ef95a0, 0.5)
|
||||
opacity 0.5
|
||||
|
||||
&[data-selected]
|
||||
font-weight bold
|
||||
|
||||
> div
|
||||
background rgba(#000, isDark ? 0.1 : 0.025)
|
||||
background var(--faceClearButtonHover)
|
||||
|
||||
&:active > div
|
||||
background rgba(#000, isDark ? 0.2 : 0.05)
|
||||
background var(--faceClearButtonActive)
|
||||
|
||||
&[data-today]
|
||||
> div
|
||||
color $theme-color-foreground
|
||||
background $theme-color
|
||||
color var(--primaryForeground)
|
||||
background var(--primary)
|
||||
|
||||
&:hover > div
|
||||
background lighten($theme-color, 10%)
|
||||
background var(--primaryLighten10)
|
||||
|
||||
&:active > div
|
||||
background darken($theme-color, 10%)
|
||||
|
||||
.mk-calendar[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-calendar:not([data-darkmode])
|
||||
root(false)
|
||||
background var(--primaryDarken10)
|
||||
|
||||
</style>
|
||||
|
||||
@ -649,7 +649,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.gkgckalzgidaygcxnugepioremxvxvpt
|
||||
padding 32px
|
||||
@ -675,7 +675,7 @@ export default Vue.extend({
|
||||
|
||||
*
|
||||
&:not(.active)
|
||||
color $theme-color
|
||||
color var(--primary)
|
||||
cursor pointer
|
||||
|
||||
> div
|
||||
|
||||
@ -59,7 +59,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" module>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.title
|
||||
> [data-fa]
|
||||
@ -74,7 +74,7 @@ export default Vue.extend({
|
||||
|
||||
.footer
|
||||
height 72px
|
||||
background lighten($theme-color, 95%)
|
||||
background var(--primaryLighten95)
|
||||
|
||||
.upload
|
||||
display inline-block
|
||||
@ -87,7 +87,7 @@ export default Vue.extend({
|
||||
width 40px
|
||||
height 40px
|
||||
font-size 1em
|
||||
color rgba($theme-color, 0.5)
|
||||
color var(--primaryAlpha05)
|
||||
background transparent
|
||||
outline none
|
||||
border solid 1px transparent
|
||||
@ -95,13 +95,13 @@ export default Vue.extend({
|
||||
|
||||
&:hover
|
||||
background transparent
|
||||
border-color rgba($theme-color, 0.3)
|
||||
border-color var(--primaryAlpha03)
|
||||
|
||||
&:active
|
||||
color rgba($theme-color, 0.6)
|
||||
color var(--primaryAlpha06)
|
||||
background transparent
|
||||
border-color rgba($theme-color, 0.5)
|
||||
box-shadow 0 2px 4px rgba(darken($theme-color, 50%), 0.15) inset
|
||||
border-color var(--primaryAlpha05)
|
||||
//box-shadow 0 2px 4px rgba(var(--primaryDarken50), 0.15) inset
|
||||
|
||||
&:focus
|
||||
&:after
|
||||
@ -112,7 +112,7 @@ export default Vue.extend({
|
||||
right -5px
|
||||
bottom -5px
|
||||
left -5px
|
||||
border 2px solid rgba($theme-color, 0.3)
|
||||
border 2px solid var(--primaryAlpha03)
|
||||
border-radius 8px
|
||||
|
||||
.ok
|
||||
@ -138,7 +138,7 @@ export default Vue.extend({
|
||||
right -5px
|
||||
bottom -5px
|
||||
left -5px
|
||||
border 2px solid rgba($theme-color, 0.3)
|
||||
border 2px solid var(--primaryAlpha03)
|
||||
border-radius 8px
|
||||
|
||||
&:disabled
|
||||
@ -147,20 +147,20 @@ export default Vue.extend({
|
||||
|
||||
.ok
|
||||
right 16px
|
||||
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%)
|
||||
color var(--primaryForeground)
|
||||
background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
|
||||
border solid 1px var(--primaryLighten15)
|
||||
|
||||
&:not(:disabled)
|
||||
font-weight bold
|
||||
|
||||
&:hover:not(:disabled)
|
||||
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
|
||||
border-color $theme-color
|
||||
background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
|
||||
border-color var(--primary)
|
||||
|
||||
&:active:not(:disabled)
|
||||
background $theme-color
|
||||
border-color $theme-color
|
||||
background var(--primary)
|
||||
border-color var(--primary)
|
||||
|
||||
.cancel
|
||||
right 148px
|
||||
|
||||
@ -37,7 +37,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" module>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.title
|
||||
> [data-fa]
|
||||
@ -48,7 +48,7 @@ export default Vue.extend({
|
||||
|
||||
.footer
|
||||
height 72px
|
||||
background lighten($theme-color, 95%)
|
||||
background var(--primaryLighten95)
|
||||
|
||||
.ok
|
||||
.cancel
|
||||
@ -73,7 +73,7 @@ export default Vue.extend({
|
||||
right -5px
|
||||
bottom -5px
|
||||
left -5px
|
||||
border 2px solid rgba($theme-color, 0.3)
|
||||
border 2px solid var(--primaryAlpha03)
|
||||
border-radius 8px
|
||||
|
||||
&:disabled
|
||||
@ -82,20 +82,20 @@ export default Vue.extend({
|
||||
|
||||
.ok
|
||||
right 16px
|
||||
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%)
|
||||
color var(--primaryForeground)
|
||||
background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
|
||||
border solid 1px var(--primaryLighten15)
|
||||
|
||||
&:not(:disabled)
|
||||
font-weight bold
|
||||
|
||||
&:hover:not(:disabled)
|
||||
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
|
||||
border-color $theme-color
|
||||
background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
|
||||
border-color var(--primary)
|
||||
|
||||
&:active:not(:disabled)
|
||||
background $theme-color
|
||||
border-color $theme-color
|
||||
background var(--primary)
|
||||
border-color var(--primary)
|
||||
|
||||
.cancel
|
||||
right 148px
|
||||
|
||||
@ -31,9 +31,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.menu
|
||||
$width = 240px
|
||||
$item-height = 38px
|
||||
$padding = 10px
|
||||
@ -48,7 +46,7 @@ root(isDark)
|
||||
&.divider
|
||||
margin-top $padding
|
||||
padding-top $padding
|
||||
border-top solid 1px isDark ? #1c2023 : #eee
|
||||
border-top solid 1px var(--faceDivider)
|
||||
|
||||
&.nest
|
||||
> p
|
||||
@ -69,7 +67,7 @@ root(isDark)
|
||||
|
||||
&:active
|
||||
> p, a
|
||||
background $theme-color
|
||||
background var(--primary)
|
||||
|
||||
> p, a
|
||||
display block
|
||||
@ -77,7 +75,7 @@ root(isDark)
|
||||
margin 0
|
||||
padding 0 32px 0 38px
|
||||
line-height $item-height
|
||||
color isDark ? #c8cece : #868C8C
|
||||
color var(--text)
|
||||
text-decoration none
|
||||
cursor pointer
|
||||
|
||||
@ -90,14 +88,14 @@ root(isDark)
|
||||
&:hover
|
||||
> p, a
|
||||
text-decoration none
|
||||
background $theme-color
|
||||
color $theme-color-foreground
|
||||
background var(--primary)
|
||||
color var(--primaryForeground)
|
||||
|
||||
&:active
|
||||
> p, a
|
||||
text-decoration none
|
||||
background darken($theme-color, 10%)
|
||||
color $theme-color-foreground
|
||||
background var(--primaryDarken10)
|
||||
color var(--primaryForeground)
|
||||
|
||||
li > ul
|
||||
visibility hidden
|
||||
@ -106,17 +104,11 @@ root(isDark)
|
||||
left $width
|
||||
margin-top -($padding)
|
||||
width $width
|
||||
background isDark ? #282c37 :#fff
|
||||
background var(--popupBg)
|
||||
border-radius 0 4px 4px 4px
|
||||
box-shadow 2px 2px 8px rgba(#000, 0.2)
|
||||
transition visibility 0s linear 0.2s
|
||||
|
||||
.menu[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.menu:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
<style lang="stylus" module>
|
||||
|
||||
@ -71,7 +71,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.context-menu
|
||||
$width = 240px
|
||||
$item-height = 38px
|
||||
$padding = 10px
|
||||
@ -82,15 +82,9 @@ root(isDark)
|
||||
z-index 4096
|
||||
width $width
|
||||
font-size 0.8em
|
||||
background isDark ? #282c37 : #fff
|
||||
background var(--popupBg)
|
||||
border-radius 0 4px 4px 4px
|
||||
box-shadow 2px 2px 8px rgba(#000, 0.2)
|
||||
opacity 0
|
||||
|
||||
.context-menu[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.context-menu:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -61,7 +61,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" module>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.header
|
||||
> [data-fa]
|
||||
@ -73,7 +73,7 @@ export default Vue.extend({
|
||||
|
||||
.actions
|
||||
height 72px
|
||||
background lighten($theme-color, 95%)
|
||||
background var(--primaryLighten95)
|
||||
|
||||
.ok
|
||||
.cancel
|
||||
@ -98,7 +98,7 @@ export default Vue.extend({
|
||||
right -5px
|
||||
bottom -5px
|
||||
left -5px
|
||||
border 2px solid rgba($theme-color, 0.3)
|
||||
border 2px solid var(--primaryAlpha03)
|
||||
border-radius 8px
|
||||
|
||||
&:disabled
|
||||
@ -111,20 +111,20 @@ export default Vue.extend({
|
||||
|
||||
.ok
|
||||
right 16px
|
||||
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%)
|
||||
color var(--primaryForeground)
|
||||
background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
|
||||
border solid 1px var(--primaryLighten15)
|
||||
|
||||
&:not(:disabled)
|
||||
font-weight bold
|
||||
|
||||
&:hover:not(:disabled)
|
||||
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
|
||||
border-color $theme-color
|
||||
background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
|
||||
border-color var(--primary)
|
||||
|
||||
&:active:not(:disabled)
|
||||
background $theme-color
|
||||
border-color $theme-color
|
||||
background var(--primary)
|
||||
border-color var(--primary)
|
||||
|
||||
.cancel
|
||||
.skip
|
||||
@ -155,11 +155,11 @@ export default Vue.extend({
|
||||
}
|
||||
|
||||
.cropper-view-box {
|
||||
outline-color: $theme-color;
|
||||
outline-color: var(--primary);
|
||||
}
|
||||
|
||||
.cropper-line, .cropper-point {
|
||||
background-color: $theme-color;
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
.cropper-bg {
|
||||
|
||||
@ -91,7 +91,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.mk-dialog
|
||||
> .bg
|
||||
@ -144,20 +144,20 @@ export default Vue.extend({
|
||||
margin 0 0.375em
|
||||
|
||||
&:hover
|
||||
color $theme-color
|
||||
color var(--primary)
|
||||
|
||||
&:active
|
||||
color darken($theme-color, 10%)
|
||||
color var(--primaryDarken10)
|
||||
transition color 0s ease
|
||||
|
||||
</style>
|
||||
|
||||
<style lang="stylus" module>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.header
|
||||
margin 1em 0
|
||||
color $theme-color
|
||||
color var(--primary)
|
||||
// color #43A4EC
|
||||
font-weight bold
|
||||
|
||||
|
||||
@ -200,9 +200,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.gvfdktuvdgwhmztnuekzkswkjygptfcv
|
||||
padding 8px 0 0 0
|
||||
height 180px
|
||||
border-radius 4px
|
||||
@ -237,13 +235,13 @@ root(isDark)
|
||||
background #ce2212
|
||||
|
||||
&[data-is-selected]
|
||||
background $theme-color
|
||||
background var(--primary)
|
||||
|
||||
&:hover
|
||||
background lighten($theme-color, 10%)
|
||||
background var(--primaryLighten10)
|
||||
|
||||
&:active
|
||||
background darken($theme-color, 10%)
|
||||
background var(--primaryDarken10)
|
||||
|
||||
> .label
|
||||
&:before
|
||||
@ -251,7 +249,7 @@ root(isDark)
|
||||
display none
|
||||
|
||||
> .name
|
||||
color $theme-color-foreground
|
||||
color var(--primaryForeground)
|
||||
|
||||
&[data-is-contextmenu-showing]
|
||||
&:after
|
||||
@ -262,7 +260,7 @@ root(isDark)
|
||||
right -4px
|
||||
bottom -4px
|
||||
left -4px
|
||||
border 2px dashed rgba($theme-color, 0.3)
|
||||
border 2px dashed var(--primaryAlpha03)
|
||||
border-radius 4px
|
||||
|
||||
> .label
|
||||
@ -337,16 +335,10 @@ root(isDark)
|
||||
font-size 0.8em
|
||||
text-align center
|
||||
word-break break-all
|
||||
color isDark ? #fff : #444
|
||||
color var(--text)
|
||||
overflow hidden
|
||||
|
||||
> .ext
|
||||
opacity 0.5
|
||||
|
||||
.gvfdktuvdgwhmztnuekzkswkjygptfcv[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.gvfdktuvdgwhmztnuekzkswkjygptfcv:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -214,12 +214,10 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.ynntpczxvnusfwdyxsfuhvcmuypqopdd
|
||||
padding 8px
|
||||
height 64px
|
||||
background isDark ? rgba($theme-color, 0.2) : lighten($theme-color, 95%)
|
||||
background var(--desktopDriveFolderBg)
|
||||
border-radius 4px
|
||||
|
||||
&, *
|
||||
@ -229,10 +227,10 @@ root(isDark)
|
||||
pointer-events none
|
||||
|
||||
&:hover
|
||||
background isDark ? rgba(lighten($theme-color, 10%), 0.2) : lighten($theme-color, 90%)
|
||||
background var(--desktopDriveFolderHoverBg)
|
||||
|
||||
&:active
|
||||
background isDark ? rgba(darken($theme-color, 10%), 0.2) : lighten($theme-color, 85%)
|
||||
background var(--desktopDriveFolderActiveBg)
|
||||
|
||||
&[data-is-contextmenu-showing]
|
||||
&[data-draghover]
|
||||
@ -244,26 +242,20 @@ root(isDark)
|
||||
right -4px
|
||||
bottom -4px
|
||||
left -4px
|
||||
border 2px dashed rgba($theme-color, 0.3)
|
||||
border 2px dashed var(--primaryAlpha03)
|
||||
border-radius 4px
|
||||
|
||||
&[data-draghover]
|
||||
background isDark ? rgba(darken($theme-color, 10%), 0.2) : lighten($theme-color, 90%)
|
||||
background var(--desktopDriveFolderActiveBg)
|
||||
|
||||
> .name
|
||||
margin 0
|
||||
font-size 0.9em
|
||||
color isDark ? #fff : darken($theme-color, 30%)
|
||||
color var(--desktopDriveFolderFg)
|
||||
|
||||
> [data-fa]
|
||||
margin-right 4px
|
||||
margin-left 2px
|
||||
text-align left
|
||||
|
||||
.ynntpczxvnusfwdyxsfuhvcmuypqopdd[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.ynntpczxvnusfwdyxsfuhvcmuypqopdd:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -585,18 +585,15 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
|
||||
.mk-drive
|
||||
> nav
|
||||
display block
|
||||
z-index 2
|
||||
width 100%
|
||||
overflow auto
|
||||
font-size 0.9em
|
||||
color isDark ? #d2d9dc : #555
|
||||
background isDark ? #282c37 : #fff
|
||||
color var(--text)
|
||||
background var(--face)
|
||||
box-shadow 0 1px 0 rgba(#000, 0.05)
|
||||
|
||||
&, *
|
||||
@ -674,7 +671,7 @@ root(isDark)
|
||||
padding 8px
|
||||
height calc(100% - 38px)
|
||||
overflow auto
|
||||
background isDark ? #191b22 : #fff
|
||||
background var(--desktopDriveBg)
|
||||
|
||||
&, *
|
||||
user-select none
|
||||
@ -697,8 +694,8 @@ root(isDark)
|
||||
z-index 128
|
||||
top 0
|
||||
left 0
|
||||
border solid 1px $theme-color
|
||||
background rgba($theme-color, 0.5)
|
||||
border solid 1px var(--primary)
|
||||
background var(--primaryAlpha05)
|
||||
pointer-events none
|
||||
|
||||
> .contents
|
||||
@ -769,7 +766,7 @@ root(isDark)
|
||||
top 38px
|
||||
width 100%
|
||||
height calc(100% - 38px)
|
||||
border dashed 2px rgba($theme-color, 0.5)
|
||||
border dashed 2px var(--primaryAlpha05)
|
||||
pointer-events none
|
||||
|
||||
> .mk-uploader
|
||||
@ -780,10 +777,4 @@ root(isDark)
|
||||
> input
|
||||
display none
|
||||
|
||||
.mk-drive[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-drive:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -101,9 +101,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.mk-follow-button
|
||||
display block
|
||||
cursor pointer
|
||||
padding 0
|
||||
@ -126,37 +124,34 @@ root(isDark)
|
||||
right -5px
|
||||
bottom -5px
|
||||
left -5px
|
||||
border 2px solid rgba($theme-color, 0.3)
|
||||
border 2px solid var(--primaryAlpha03)
|
||||
border-radius 8px
|
||||
|
||||
&:not(.active)
|
||||
color isDark ? #fff : #888
|
||||
background isDark ? linear-gradient(to bottom, #313543 0%, #282c37 100%) : linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
|
||||
border solid 1px isDark ? #1c2023 : #e2e2e2
|
||||
color var(--primary)
|
||||
border solid 1px var(--primary)
|
||||
|
||||
&:hover
|
||||
background isDark ? linear-gradient(to bottom, #2c2f3c 0%, #22262f 100%) : linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
|
||||
border-color isDark ? #151a1d : #dcdcdc
|
||||
background var(--primaryAlpha03)
|
||||
|
||||
&:active
|
||||
background isDark ? #22262f : #ececec
|
||||
border-color isDark ? #151a1d : #dcdcdc
|
||||
background var(--primaryAlpha05)
|
||||
|
||||
&.active
|
||||
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%)
|
||||
color var(--primaryForeground)
|
||||
background var(--primary)
|
||||
border solid 1px var(--primary)
|
||||
|
||||
&: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
|
||||
background var(--primaryLighten5)
|
||||
border-color var(--primaryLighten5)
|
||||
|
||||
&:active:not(:disabled)
|
||||
background $theme-color
|
||||
border-color $theme-color
|
||||
background var(--primaryDarken5)
|
||||
border-color var(--primaryDarken5)
|
||||
|
||||
&.wait
|
||||
cursor wait !important
|
||||
@ -167,10 +162,4 @@ root(isDark)
|
||||
height 38px
|
||||
line-height 38px
|
||||
|
||||
.mk-follow-button[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-follow-button:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -247,9 +247,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.mk-home
|
||||
display block
|
||||
|
||||
&[data-customize]
|
||||
@ -279,8 +277,8 @@ root(isDark)
|
||||
left 0
|
||||
width 100%
|
||||
height 48px
|
||||
color isDark ? #fff : #000
|
||||
background isDark ? #313543 : #f7f7f7
|
||||
color var(--text)
|
||||
background var(--desktopHeaderBg)
|
||||
box-shadow 0 1px 1px rgba(#000, 0.075)
|
||||
|
||||
> a
|
||||
@ -292,15 +290,15 @@ root(isDark)
|
||||
padding 0 16px
|
||||
line-height 48px
|
||||
text-decoration none
|
||||
color $theme-color-foreground
|
||||
background $theme-color
|
||||
color var(--primaryForeground)
|
||||
background var(--primary)
|
||||
transition background 0.1s ease
|
||||
|
||||
&:hover
|
||||
background lighten($theme-color, 10%)
|
||||
background var(--primaryLighten10)
|
||||
|
||||
&:active
|
||||
background darken($theme-color, 10%)
|
||||
background var(--primaryDarken10)
|
||||
transition background 0s ease
|
||||
|
||||
> [data-fa]
|
||||
@ -320,7 +318,7 @@ root(isDark)
|
||||
line-height 48px
|
||||
|
||||
&.trash
|
||||
border-left solid 1px isDark ? #1c2023 : #ddd
|
||||
border-left solid 1px var(--faceDivider)
|
||||
|
||||
> div
|
||||
width 100%
|
||||
@ -395,10 +393,4 @@ root(isDark)
|
||||
max-width 700px
|
||||
margin 0 auto
|
||||
|
||||
.mk-home[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-home:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -76,7 +76,7 @@ export default Vue.extend({
|
||||
|
||||
|
||||
<style lang="stylus" module>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.header
|
||||
> [data-fa]
|
||||
@ -96,25 +96,25 @@ export default Vue.extend({
|
||||
color #333
|
||||
background #fff
|
||||
outline none
|
||||
border solid 1px rgba($theme-color, 0.1)
|
||||
border solid 1px var(--primaryAlpha01)
|
||||
border-radius 4px
|
||||
transition border-color .3s ease
|
||||
|
||||
&:hover
|
||||
border-color rgba($theme-color, 0.2)
|
||||
border-color var(--primaryAlpha02)
|
||||
transition border-color .1s ease
|
||||
|
||||
&:focus
|
||||
color $theme-color
|
||||
border-color rgba($theme-color, 0.5)
|
||||
color var(--primary)
|
||||
border-color var(--primaryAlpha05)
|
||||
transition border-color 0s ease
|
||||
|
||||
&::-webkit-input-placeholder
|
||||
color rgba($theme-color, 0.3)
|
||||
color var(--primaryAlpha03)
|
||||
|
||||
.actions
|
||||
height 72px
|
||||
background lighten($theme-color, 95%)
|
||||
background var(--primaryLighten95)
|
||||
|
||||
.ok
|
||||
.cancel
|
||||
@ -139,7 +139,7 @@ export default Vue.extend({
|
||||
right -5px
|
||||
bottom -5px
|
||||
left -5px
|
||||
border 2px solid rgba($theme-color, 0.3)
|
||||
border 2px solid var(--primaryAlpha03)
|
||||
border-radius 8px
|
||||
|
||||
&:disabled
|
||||
@ -148,20 +148,20 @@ export default Vue.extend({
|
||||
|
||||
.ok
|
||||
right 16px
|
||||
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%)
|
||||
color var(--primaryForeground)
|
||||
background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
|
||||
border solid 1px var(--primaryLighten15)
|
||||
|
||||
&:not(:disabled)
|
||||
font-weight bold
|
||||
|
||||
&:hover:not(:disabled)
|
||||
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
|
||||
border-color $theme-color
|
||||
background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
|
||||
border-color var(--primary)
|
||||
|
||||
&:active:not(:disabled)
|
||||
background $theme-color
|
||||
border-color $theme-color
|
||||
background var(--primary)
|
||||
border-color var(--primary)
|
||||
|
||||
.cancel
|
||||
right 148px
|
||||
|
||||
@ -225,12 +225,10 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.mk-note-detail
|
||||
overflow hidden
|
||||
text-align left
|
||||
background isDark ? #282C37 : #fff
|
||||
background var(--face)
|
||||
box-shadow var(--shadow)
|
||||
border-radius var(--round)
|
||||
|
||||
@ -243,28 +241,28 @@ root(isDark)
|
||||
text-align center
|
||||
color #999
|
||||
cursor pointer
|
||||
background isDark ? #21242d : #fafafa
|
||||
background var(--subNoteBg)
|
||||
outline none
|
||||
border none
|
||||
border-bottom solid 1px isDark ? #1c2023 : #eef0f2
|
||||
border-radius 6px 6px 0 0
|
||||
border-bottom solid 1px var(--faceDivider)
|
||||
border-radius var(--round) var(--round) 0 0
|
||||
|
||||
&:hover
|
||||
background isDark ? #2e3440 : #f6f6f6
|
||||
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
|
||||
|
||||
&:active
|
||||
background isDark ? #21242b : #f0f0f0
|
||||
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
|
||||
|
||||
&:disabled
|
||||
color isDark ? #21242b : #ccc
|
||||
cursor wait
|
||||
|
||||
> .conversation
|
||||
> *
|
||||
border-bottom 1px solid isDark ? #1c2023 : #eef0f2
|
||||
border-bottom 1px solid var(--faceDivider)
|
||||
|
||||
> .renote
|
||||
color #9dbb00
|
||||
background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
|
||||
color var(--renoteText)
|
||||
background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
|
||||
|
||||
> p
|
||||
margin 0
|
||||
@ -287,7 +285,7 @@ root(isDark)
|
||||
padding-top 8px
|
||||
|
||||
> .reply-to
|
||||
border-bottom 1px solid isDark ? #1c2023 : #eef0f2
|
||||
border-bottom 1px solid var(--faceDivider)
|
||||
|
||||
> article
|
||||
padding 28px 32px 18px 32px
|
||||
@ -299,7 +297,7 @@ root(isDark)
|
||||
|
||||
&:hover
|
||||
> footer > button
|
||||
color isDark ? #707b97 : #888
|
||||
color var(--noteActionsHighlighted)
|
||||
|
||||
> .avatar
|
||||
width 60px
|
||||
@ -316,7 +314,7 @@ root(isDark)
|
||||
display inline-block
|
||||
margin 0
|
||||
line-height 24px
|
||||
color isDark ? #fff : #627079
|
||||
color var(--noteHeaderName)
|
||||
font-size 18px
|
||||
font-weight 700
|
||||
text-align left
|
||||
@ -329,14 +327,14 @@ root(isDark)
|
||||
display block
|
||||
text-align left
|
||||
margin 0
|
||||
color isDark ? #606984 : #ccc
|
||||
color var(--noteHeaderAcct)
|
||||
|
||||
> .time
|
||||
position absolute
|
||||
top 0
|
||||
right 32px
|
||||
font-size 1em
|
||||
color isDark ? #606984 : #c0c0c0
|
||||
color var(--noteHeaderInfo)
|
||||
|
||||
> .body
|
||||
padding 8px 0
|
||||
@ -347,7 +345,7 @@ root(isDark)
|
||||
margin 0
|
||||
padding 0
|
||||
overflow-wrap break-word
|
||||
color isDark ? #fff : #717171
|
||||
color var(--noteText)
|
||||
|
||||
> .text
|
||||
margin-right 8px
|
||||
@ -360,14 +358,14 @@ root(isDark)
|
||||
padding 0
|
||||
overflow-wrap break-word
|
||||
font-size 1.5em
|
||||
color isDark ? #fff : #717171
|
||||
color var(--noteText)
|
||||
|
||||
> .renote
|
||||
margin 8px 0
|
||||
|
||||
> *
|
||||
padding 16px
|
||||
border dashed 1px #c0dac6
|
||||
border dashed 1px var(--quoteBorder)
|
||||
border-radius 8px
|
||||
|
||||
> .location
|
||||
@ -394,20 +392,20 @@ root(isDark)
|
||||
background transparent
|
||||
border none
|
||||
font-size 1em
|
||||
color isDark ? #606984 : #ccc
|
||||
color var(--noteActions)
|
||||
cursor pointer
|
||||
|
||||
&:hover
|
||||
color isDark ? #a1a8bf : #444
|
||||
color var(--noteActionsHover)
|
||||
|
||||
&.replyButton:hover
|
||||
color #0af
|
||||
color var(--noteActionsReplyHover)
|
||||
|
||||
&.renoteButton:hover
|
||||
color #8d0
|
||||
color var(--noteActionsRenoteHover)
|
||||
|
||||
&.reactionButton:hover
|
||||
color #fa0
|
||||
color var(--noteActionsReactionHover)
|
||||
|
||||
> .count
|
||||
display inline
|
||||
@ -415,16 +413,10 @@ root(isDark)
|
||||
color #999
|
||||
|
||||
&.reacted, &.reacted:hover
|
||||
color #fa0
|
||||
color var(--noteActionsReactionHover)
|
||||
|
||||
> .replies
|
||||
> *
|
||||
border-top 1px solid isDark ? #1c2023 : #eef0f2
|
||||
|
||||
.mk-note-detail[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-note-detail:not([data-darkmode])
|
||||
root(false)
|
||||
border-top 1px solid var(--faceDivider)
|
||||
|
||||
</style>
|
||||
|
||||
@ -47,7 +47,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.qiziqtywpuaucsgarwajitwaakggnisj
|
||||
display flex
|
||||
font-size 0.9em
|
||||
|
||||
@ -71,7 +71,7 @@ root(isDark)
|
||||
margin 0
|
||||
padding 0
|
||||
overflow-wrap break-word
|
||||
color isDark ? #fff : #717171
|
||||
color var(--noteText)
|
||||
|
||||
> .text
|
||||
margin-right 8px
|
||||
@ -81,12 +81,6 @@ root(isDark)
|
||||
cursor default
|
||||
margin 0
|
||||
padding 0
|
||||
color isDark ? #959ba7 : #717171
|
||||
|
||||
.qiziqtywpuaucsgarwajitwaakggnisj[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.qiziqtywpuaucsgarwajitwaakggnisj:not([data-darkmode])
|
||||
root(false)
|
||||
color var(--subNoteText)
|
||||
|
||||
</style>
|
||||
|
||||
@ -42,12 +42,12 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.tkfdzaxtkdeianobciwadajxzbddorql
|
||||
display flex
|
||||
margin 0
|
||||
padding 16px 32px
|
||||
font-size 0.9em
|
||||
background isDark ? #21242d : #fcfcfc
|
||||
background var(--subNoteBg)
|
||||
|
||||
> .avatar
|
||||
flex-shrink 0
|
||||
@ -72,7 +72,7 @@ root(isDark)
|
||||
margin 0
|
||||
padding 0
|
||||
overflow-wrap break-word
|
||||
color isDark ? #fff : #717171
|
||||
color var(--noteText)
|
||||
|
||||
> .text
|
||||
margin-right 8px
|
||||
@ -82,16 +82,10 @@ root(isDark)
|
||||
cursor default
|
||||
margin 0
|
||||
padding 0
|
||||
color isDark ? #959ba7 : #717171
|
||||
color var(--subNoteText)
|
||||
|
||||
pre
|
||||
max-height 120px
|
||||
font-size 80%
|
||||
|
||||
.tkfdzaxtkdeianobciwadajxzbddorql[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.tkfdzaxtkdeianobciwadajxzbddorql:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -317,13 +317,11 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.note
|
||||
margin 0
|
||||
padding 0
|
||||
background isDark ? #282C37 : #fff
|
||||
border-bottom solid 1px isDark ? #1c2023 : #eaeaea
|
||||
background var(--face)
|
||||
border-bottom solid 1px var(--faceDivider)
|
||||
|
||||
&[data-round]
|
||||
&:first-child
|
||||
@ -348,7 +346,7 @@ root(isDark)
|
||||
right 2px
|
||||
bottom 2px
|
||||
left 2px
|
||||
border 2px solid rgba($theme-color, 0.3)
|
||||
border 2px solid var(--primaryAlpha03)
|
||||
border-radius 4px
|
||||
|
||||
> .renote
|
||||
@ -357,8 +355,8 @@ root(isDark)
|
||||
padding 16px 32px 8px 32px
|
||||
line-height 28px
|
||||
white-space pre
|
||||
color #9dbb00
|
||||
background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
|
||||
color var(--renoteText)
|
||||
background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
|
||||
|
||||
.avatar
|
||||
display inline-block
|
||||
@ -398,7 +396,7 @@ root(isDark)
|
||||
|
||||
&:hover
|
||||
> .main > footer > button
|
||||
color isDark ? #707b97 : #888
|
||||
color var(--noteActionsHighlighted)
|
||||
|
||||
> .avatar
|
||||
flex-shrink 0
|
||||
@ -426,7 +424,7 @@ root(isDark)
|
||||
margin 0
|
||||
padding 0
|
||||
overflow-wrap break-word
|
||||
color isDark ? #fff : #717171
|
||||
color var(--noteText)
|
||||
|
||||
> .text
|
||||
margin-right 8px
|
||||
@ -439,7 +437,7 @@ root(isDark)
|
||||
margin 0
|
||||
padding 0
|
||||
overflow-wrap break-word
|
||||
color isDark ? #fff : #717171
|
||||
color var(--noteText)
|
||||
|
||||
>>> .title
|
||||
display block
|
||||
@ -447,7 +445,7 @@ root(isDark)
|
||||
padding 4px
|
||||
font-size 90%
|
||||
text-align center
|
||||
background isDark ? #2f3944 : #eef1f3
|
||||
background var(--mfmTitleBg)
|
||||
border-radius 4px
|
||||
|
||||
>>> .code
|
||||
@ -456,17 +454,17 @@ root(isDark)
|
||||
>>> .quote
|
||||
margin 8px
|
||||
padding 6px 12px
|
||||
color isDark ? #6f808e : #aaa
|
||||
border-left solid 3px isDark ? #637182 : #eee
|
||||
color var(--mfmQuote)
|
||||
border-left solid 3px var(--mfmQuoteLine)
|
||||
|
||||
> .reply
|
||||
margin-right 8px
|
||||
color isDark ? #99abbf : #717171
|
||||
color var(--text)
|
||||
|
||||
> .rp
|
||||
margin-left 4px
|
||||
font-style oblique
|
||||
color #a0bf46
|
||||
color var(--renoteText)
|
||||
|
||||
> .location
|
||||
margin 4px 0
|
||||
@ -491,7 +489,7 @@ root(isDark)
|
||||
|
||||
> *
|
||||
padding 16px
|
||||
border dashed 1px isDark ? #4e945e : #c0dac6
|
||||
border dashed 1px var(--quoteBorder)
|
||||
border-radius 8px
|
||||
|
||||
> footer
|
||||
@ -500,22 +498,22 @@ root(isDark)
|
||||
padding 0 8px
|
||||
line-height 32px
|
||||
font-size 1em
|
||||
color isDark ? #606984 : #ddd
|
||||
color var(--noteActions)
|
||||
background transparent
|
||||
border none
|
||||
cursor pointer
|
||||
|
||||
&:hover
|
||||
color isDark ? #a1a8bf : #444
|
||||
color var(--noteActionsHover)
|
||||
|
||||
&.replyButton:hover
|
||||
color #0af
|
||||
color var(--noteActionsReplyHover)
|
||||
|
||||
&.renoteButton:hover
|
||||
color #8d0
|
||||
color var(--noteActionsRenoteHover)
|
||||
|
||||
&.reactionButton:hover
|
||||
color #fa0
|
||||
color var(--noteActionsReactionHover)
|
||||
|
||||
> .count
|
||||
display inline
|
||||
@ -523,18 +521,12 @@ root(isDark)
|
||||
color #999
|
||||
|
||||
&.reacted, &.reacted:hover
|
||||
color #fa0
|
||||
color var(--noteActionsReactionHover)
|
||||
|
||||
> .detail
|
||||
padding-top 4px
|
||||
background rgba(#000, 0.0125)
|
||||
|
||||
.note[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.note:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
<style lang="stylus" module>
|
||||
@ -557,7 +549,7 @@ root(isDark)
|
||||
padding 0 4px
|
||||
margin-left 4px
|
||||
font-size 80%
|
||||
color $theme-color-foreground
|
||||
background $theme-color
|
||||
color var(--primaryForeground)
|
||||
background var(--primary)
|
||||
border-radius 4px
|
||||
</style>
|
||||
|
||||
@ -216,9 +216,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.mk-notes
|
||||
.transition
|
||||
.mk-notes-enter
|
||||
.mk-notes-leave-to
|
||||
@ -235,9 +233,9 @@ root(isDark)
|
||||
line-height 32px
|
||||
font-size 14px
|
||||
text-align center
|
||||
color isDark ? #666b79 : #aaa
|
||||
background isDark ? #242731 : #fdfdfd
|
||||
border-bottom solid 1px isDark ? #1c2023 : #eaeaea
|
||||
color var(--dateDividerFg)
|
||||
background var(--dateDividerBg)
|
||||
border-bottom solid 1px var(--faceDivider)
|
||||
|
||||
span
|
||||
margin 0 16px
|
||||
@ -250,7 +248,7 @@ root(isDark)
|
||||
position sticky
|
||||
z-index 100
|
||||
height 3px
|
||||
background $theme-color
|
||||
background var(--primary)
|
||||
|
||||
> footer
|
||||
> button
|
||||
@ -260,21 +258,15 @@ root(isDark)
|
||||
width 100%
|
||||
text-align center
|
||||
color #ccc
|
||||
background isDark ? #282C37 : #fff
|
||||
border-top solid 1px isDark ? #1c2023 : #eaeaea
|
||||
background var(--face)
|
||||
border-top solid 1px var(--faceDivider)
|
||||
border-bottom-left-radius 6px
|
||||
border-bottom-right-radius 6px
|
||||
|
||||
&:hover
|
||||
background isDark ? #2e3440 : #f5f5f5
|
||||
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
|
||||
|
||||
&:active
|
||||
background isDark ? #21242b : #eee
|
||||
|
||||
.mk-notes[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-notes:not([data-darkmode])
|
||||
root(false)
|
||||
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
|
||||
|
||||
</style>
|
||||
|
||||
@ -191,7 +191,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.mk-notifications
|
||||
.transition
|
||||
.mk-notifications-enter
|
||||
.mk-notifications-leave-to
|
||||
@ -208,7 +208,7 @@ root(isDark)
|
||||
padding 16px
|
||||
overflow-wrap break-word
|
||||
font-size 13px
|
||||
border-bottom solid 1px isDark ? #1c2023 : rgba(#000, 0.05)
|
||||
border-bottom solid 1px var(--faceDivider)
|
||||
|
||||
&:last-child
|
||||
border-bottom none
|
||||
@ -219,7 +219,7 @@ root(isDark)
|
||||
top 16px
|
||||
right 12px
|
||||
vertical-align top
|
||||
color isDark ? #606984 : rgba(#000, 0.6)
|
||||
color var(--noteHeaderInfo)
|
||||
font-size small
|
||||
|
||||
&:after
|
||||
@ -249,10 +249,10 @@ root(isDark)
|
||||
margin-right 4px
|
||||
|
||||
.note-preview
|
||||
color isDark ? #c2cad4 : rgba(#000, 0.7)
|
||||
color var(--noteText)
|
||||
|
||||
.note-ref
|
||||
color isDark ? #c2cad4 : rgba(#000, 0.7)
|
||||
color var(--noteText)
|
||||
|
||||
[data-fa]
|
||||
font-size 1em
|
||||
@ -283,9 +283,9 @@ root(isDark)
|
||||
line-height 32px
|
||||
text-align center
|
||||
font-size 0.8em
|
||||
color isDark ? #666b79 : #aaa
|
||||
background isDark ? #242731 : #fdfdfd
|
||||
border-bottom solid 1px isDark ? #1c2023 : rgba(#000, 0.05)
|
||||
color var(--dateDividerFg)
|
||||
background var(--dateDividerBg)
|
||||
border-bottom solid 1px var(--faceDivider)
|
||||
|
||||
span
|
||||
margin 0 16px
|
||||
@ -327,10 +327,4 @@ root(isDark)
|
||||
> [data-fa]
|
||||
margin-right 4px
|
||||
|
||||
.mk-notifications[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-notifications:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -77,7 +77,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.mk-post-form-window
|
||||
.mk-post-form-window--header
|
||||
.icon
|
||||
margin-right 8px
|
||||
@ -94,15 +94,6 @@ root(isDark)
|
||||
|
||||
.mk-post-form-window--body
|
||||
.notePreview
|
||||
if isDark
|
||||
margin 16px 22px 0 22px
|
||||
else
|
||||
margin 16px 22px
|
||||
|
||||
.mk-post-form-window[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-post-form-window:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -446,12 +446,10 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.mk-post-form
|
||||
display block
|
||||
padding 16px
|
||||
background isDark ? #282C37 : lighten($theme-color, 95%)
|
||||
background var(--desktopPostFormBg)
|
||||
|
||||
&:after
|
||||
content ""
|
||||
@ -465,26 +463,26 @@ root(isDark)
|
||||
width 100%
|
||||
padding 12px
|
||||
font-size 16px
|
||||
color isDark ? #fff : #333
|
||||
background isDark ? #191d23 : #fff
|
||||
color var(--desktopPostFormTextareaFg)
|
||||
background var(--desktopPostFormTextareaBg)
|
||||
outline none
|
||||
border solid 1px rgba($theme-color, 0.1)
|
||||
border solid 1px var(--primaryAlpha01)
|
||||
border-radius 4px
|
||||
transition border-color .2s ease
|
||||
|
||||
&:hover
|
||||
border-color rgba($theme-color, 0.2)
|
||||
border-color var(--primaryAlpha02)
|
||||
transition border-color .1s ease
|
||||
|
||||
&:focus
|
||||
border-color rgba($theme-color, 0.5)
|
||||
border-color var(--primaryAlpha05)
|
||||
transition border-color 0s ease
|
||||
|
||||
&:disabled
|
||||
opacity 0.5
|
||||
|
||||
&::-webkit-input-placeholder
|
||||
color rgba($theme-color, 0.3)
|
||||
color var(--primaryAlpha03)
|
||||
|
||||
> input
|
||||
margin-bottom 8px
|
||||
@ -498,17 +496,17 @@ root(isDark)
|
||||
&:hover
|
||||
& + *
|
||||
& + * + *
|
||||
border-color rgba($theme-color, 0.2)
|
||||
border-color var(--primaryAlpha02)
|
||||
transition border-color .1s ease
|
||||
|
||||
&:focus
|
||||
& + *
|
||||
& + * + *
|
||||
border-color rgba($theme-color, 0.5)
|
||||
border-color var(--primaryAlpha05)
|
||||
transition border-color 0s ease
|
||||
|
||||
&.with
|
||||
border-bottom solid 1px rgba($theme-color, 0.1) !important
|
||||
border-bottom solid 1px var(--primaryAlpha01) !important
|
||||
border-radius 4px 4px 0 0
|
||||
|
||||
> .visibleUsers
|
||||
@ -517,7 +515,7 @@ root(isDark)
|
||||
|
||||
> span
|
||||
margin-right 16px
|
||||
color isDark ? #fff : #666
|
||||
color var(--primary)
|
||||
|
||||
> .hashtags
|
||||
margin 0 0 8px 0
|
||||
@ -526,7 +524,7 @@ root(isDark)
|
||||
font-size 14px
|
||||
|
||||
> b
|
||||
color isDark ? #9baec8 : darken($theme-color, 20%)
|
||||
color var(--primary)
|
||||
|
||||
> *
|
||||
margin-right 8px
|
||||
@ -535,14 +533,14 @@ root(isDark)
|
||||
> .files
|
||||
margin 0
|
||||
padding 0
|
||||
background isDark ? #181b23 : lighten($theme-color, 98%)
|
||||
border solid 1px rgba($theme-color, 0.1)
|
||||
background var(--desktopPostFormTextareaBg)
|
||||
border solid 1px var(--primaryAlpha01)
|
||||
border-top none
|
||||
border-radius 0 0 4px 4px
|
||||
transition border-color .3s ease
|
||||
|
||||
&.with
|
||||
border-bottom solid 1px rgba($theme-color, 0.1) !important
|
||||
border-bottom solid 1px var(--primaryAlpha01) !important
|
||||
border-radius 0
|
||||
|
||||
> .remain
|
||||
@ -552,7 +550,7 @@ root(isDark)
|
||||
right 8px
|
||||
margin 0
|
||||
padding 0
|
||||
color rgba($theme-color, 0.4)
|
||||
color var(--primaryAlpha04)
|
||||
|
||||
> div
|
||||
padding 4px
|
||||
@ -586,8 +584,8 @@ root(isDark)
|
||||
cursor pointer
|
||||
|
||||
> .mk-poll-editor
|
||||
background isDark ? #181b23 : lighten($theme-color, 98%)
|
||||
border solid 1px rgba($theme-color, 0.1)
|
||||
background var(--desktopPostFormTextareaBg)
|
||||
border solid 1px var(--primaryAlpha01)
|
||||
border-top none
|
||||
border-radius 0 0 4px 4px
|
||||
transition border-color .3s ease
|
||||
@ -595,7 +593,7 @@ root(isDark)
|
||||
> .mk-uploader
|
||||
margin 8px 0 0 0
|
||||
padding 8px
|
||||
border solid 1px rgba($theme-color, 0.2)
|
||||
border solid 1px var(--primaryAlpha02)
|
||||
border-radius 4px
|
||||
|
||||
input[type='file']
|
||||
@ -612,22 +610,20 @@ root(isDark)
|
||||
width 110px
|
||||
height 40px
|
||||
font-size 1em
|
||||
color $theme-color-foreground
|
||||
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
|
||||
color var(--primaryForeground)
|
||||
background var(--primary)
|
||||
outline none
|
||||
border solid 1px lighten($theme-color, 15%)
|
||||
border none
|
||||
border-radius 4px
|
||||
|
||||
&: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
|
||||
background var(--primaryLighten5)
|
||||
|
||||
&:active:not(:disabled)
|
||||
background $theme-color
|
||||
border-color $theme-color
|
||||
background var(--primaryDarken5)
|
||||
|
||||
&:focus
|
||||
&:after
|
||||
@ -638,7 +634,7 @@ root(isDark)
|
||||
right -5px
|
||||
bottom -5px
|
||||
left -5px
|
||||
border 2px solid rgba($theme-color, 0.3)
|
||||
border 2px solid var(--primaryAlpha03)
|
||||
border-radius 8px
|
||||
|
||||
&:disabled
|
||||
@ -648,13 +644,13 @@ root(isDark)
|
||||
&.wait
|
||||
background linear-gradient(
|
||||
45deg,
|
||||
darken($theme-color, 10%) 25%,
|
||||
$theme-color 25%,
|
||||
$theme-color 50%,
|
||||
darken($theme-color, 10%) 50%,
|
||||
darken($theme-color, 10%) 75%,
|
||||
$theme-color 75%,
|
||||
$theme-color
|
||||
var(--primaryDarken10) 25%,
|
||||
var(--primary) 25%,
|
||||
var(--primary) 50%,
|
||||
var(--primaryDarken10) 50%,
|
||||
var(--primaryDarken10) 75%,
|
||||
var(--primary) 75%,
|
||||
var(--primary)
|
||||
)
|
||||
background-size 32px 32px
|
||||
animation stripe-bg 1.5s linear infinite
|
||||
@ -673,7 +669,7 @@ root(isDark)
|
||||
right 138px
|
||||
margin 0
|
||||
line-height 40px
|
||||
color rgba($theme-color, 0.5)
|
||||
color var(--primaryAlpha05)
|
||||
|
||||
&.over
|
||||
color #ec3828
|
||||
@ -691,7 +687,7 @@ root(isDark)
|
||||
width 40px
|
||||
height 40px
|
||||
font-size 1em
|
||||
color isDark ? $theme-color : rgba($theme-color, 0.5)
|
||||
color var(--desktopPostFormTransparentButtonFg)
|
||||
background transparent
|
||||
outline none
|
||||
border solid 1px transparent
|
||||
@ -699,12 +695,12 @@ root(isDark)
|
||||
|
||||
&:hover
|
||||
background transparent
|
||||
border-color isDark ? rgba($theme-color, 0.5) : rgba($theme-color, 0.3)
|
||||
border-color var(--primaryAlpha03)
|
||||
|
||||
&:active
|
||||
color rgba($theme-color, 0.6)
|
||||
background isDark ? transparent : linear-gradient(to bottom, lighten($theme-color, 80%) 0%, lighten($theme-color, 90%) 100%)
|
||||
border-color rgba($theme-color, 0.5)
|
||||
color var(--primaryAlpha06)
|
||||
background linear-gradient(to bottom, var(--desktopPostFormTransparentButtonActiveGradientStart) 0%, var(--desktopPostFormTransparentButtonActiveGradientEnd) 100%)
|
||||
border-color var(--primaryAlpha05)
|
||||
box-shadow 0 2px 4px rgba(#000, 0.15) inset
|
||||
|
||||
&:focus
|
||||
@ -716,7 +712,7 @@ root(isDark)
|
||||
right -5px
|
||||
bottom -5px
|
||||
left -5px
|
||||
border 2px solid rgba($theme-color, 0.3)
|
||||
border 2px solid var(--primaryAlpha03)
|
||||
border-radius 8px
|
||||
|
||||
> .dropzone
|
||||
@ -725,13 +721,7 @@ root(isDark)
|
||||
top 0
|
||||
width 100%
|
||||
height 100%
|
||||
border dashed 2px rgba($theme-color, 0.5)
|
||||
border dashed 2px var(--primaryAlpha05)
|
||||
pointer-events none
|
||||
|
||||
.mk-post-form[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-post-form:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -37,7 +37,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" module>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.body
|
||||
padding 18px 24px 24px 24px
|
||||
@ -53,7 +53,7 @@ export default Vue.extend({
|
||||
margin 0 0 4px 0
|
||||
text-align center
|
||||
line-height 16px
|
||||
color rgba($theme-color, 0.7)
|
||||
color var(--primaryAlpha07)
|
||||
|
||||
&:after
|
||||
content '%'
|
||||
@ -69,21 +69,21 @@ export default Vue.extend({
|
||||
overflow hidden
|
||||
|
||||
&::-webkit-progress-value
|
||||
background $theme-color
|
||||
background var(--primary)
|
||||
|
||||
&::-webkit-progress-bar
|
||||
background rgba($theme-color, 0.1)
|
||||
background var(--primaryAlpha01)
|
||||
|
||||
.waiting
|
||||
background linear-gradient(
|
||||
45deg,
|
||||
lighten($theme-color, 30%) 25%,
|
||||
$theme-color 25%,
|
||||
$theme-color 50%,
|
||||
lighten($theme-color, 30%) 50%,
|
||||
lighten($theme-color, 30%) 75%,
|
||||
$theme-color 75%,
|
||||
$theme-color
|
||||
var(--primaryLighten30) 25%,
|
||||
var(--primary) 25%,
|
||||
var(--primary) 50%,
|
||||
var(--primaryLighten30) 50%,
|
||||
var(--primaryLighten30) 75%,
|
||||
var(--primary) 75%,
|
||||
var(--primary)
|
||||
)
|
||||
background-size 32px 32px
|
||||
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">
|
||||
<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">
|
||||
<router-link :key="req.id" :to="req.follower | userPage">{{ req.follower | userName }}</router-link>
|
||||
<span>
|
||||
@ -47,8 +47,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
|
||||
root(isDark)
|
||||
.slpqaxdoxhvglersgjukmvizkqbmbokc
|
||||
padding 16px
|
||||
|
||||
> button
|
||||
@ -57,16 +56,10 @@ root(isDark)
|
||||
> div
|
||||
display flex
|
||||
padding 16px
|
||||
border solid 1px isDark ? #1c2023 : #eee
|
||||
border solid 1px var(--faceDivider)
|
||||
border-radius 4px
|
||||
|
||||
> span
|
||||
margin 0 0 0 auto
|
||||
|
||||
.slpqaxdoxhvglersgjukmvizkqbmbokc[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.slpqaxdoxhvglersgjukmvizkqbmbokc:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -4,8 +4,8 @@
|
||||
<template v-if="!quote">
|
||||
<footer>
|
||||
<a class="quote" v-if="!quote" @click="onQuote">%i18n:@quote%</a>
|
||||
<button class="ui cancel" @click="cancel">%i18n:@cancel%</button>
|
||||
<button class="ui primary ok" @click="ok" :disabled="wait">{{ wait ? '%i18n:@reposting%' : '%i18n:@renote%' }}</button>
|
||||
<ui-button class="button cancel" inline @click="cancel">%i18n:@cancel%</ui-button>
|
||||
<ui-button class="button ok" inline primary @click="ok" :disabled="wait">{{ wait ? '%i18n:@reposting%' : '%i18n:@renote%' }}</ui-button>
|
||||
</footer>
|
||||
</template>
|
||||
<template v-if="quote">
|
||||
@ -57,16 +57,13 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
|
||||
.mk-renote-form
|
||||
> .preview
|
||||
margin 16px 22px
|
||||
|
||||
> footer
|
||||
height 72px
|
||||
background isDark ? #313543 : lighten($theme-color, 95%)
|
||||
background var(--desktopRenoteFormFooter)
|
||||
|
||||
> .quote
|
||||
position absolute
|
||||
@ -74,7 +71,7 @@ root(isDark)
|
||||
left 28px
|
||||
line-height 40px
|
||||
|
||||
button
|
||||
> .button
|
||||
display block
|
||||
position absolute
|
||||
bottom 16px
|
||||
@ -87,10 +84,4 @@ root(isDark)
|
||||
&.ok
|
||||
right 16px
|
||||
|
||||
.mk-renote-form[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-renote-form:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -6,31 +6,28 @@
|
||||
<button class="ui" @click="updateAvatar">%i18n:@choice-avatar%</button>
|
||||
</label>
|
||||
<label class="ui from group">
|
||||
<p>%i18n:@name%</p>
|
||||
<input v-model="name" type="text" class="ui"/>
|
||||
<ui-input v-model="name" type="text">%i18n:@name%</ui-input>
|
||||
</label>
|
||||
<label class="ui from group">
|
||||
<p>%i18n:@location%</p>
|
||||
<input v-model="location" type="text" class="ui"/>
|
||||
<ui-input v-model="location" type="text">%i18n:@location%</ui-input>
|
||||
</label>
|
||||
<label class="ui from group">
|
||||
<p>%i18n:@description%</p>
|
||||
<textarea v-model="description" class="ui"></textarea>
|
||||
<ui-textarea v-model="description">%i18n:@description%</ui-textarea>
|
||||
</label>
|
||||
<label class="ui from group">
|
||||
<p>%i18n:@birthday%</p>
|
||||
<input type="date" v-model="birthday"/>
|
||||
</label>
|
||||
<button class="ui primary" @click="save">%i18n:@save%</button>
|
||||
<ui-button primary @click="save">%i18n:@save%</ui-button>
|
||||
<section>
|
||||
<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>
|
||||
<h2>%i18n:@other%</h2>
|
||||
<mk-switch v-model="$store.state.i.isBot" @change="onChangeIsBot" text="%i18n:@is-bot%"/>
|
||||
<mk-switch v-model="$store.state.i.isCat" @change="onChangeIsCat" text="%i18n:@is-cat%"/>
|
||||
<mk-switch v-model="alwaysMarkNsfw" text="%i18n:common.always-mark-nsfw%"/>
|
||||
<ui-switch v-model="$store.state.i.isBot" @change="onChangeIsBot">%i18n:@is-bot%</ui-switch>
|
||||
<ui-switch v-model="$store.state.i.isCat" @change="onChangeIsCat">%i18n:@is-cat%</ui-switch>
|
||||
<ui-switch v-model="alwaysMarkNsfw">%i18n:common.always-mark-nsfw%</ui-switch>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -47,8 +47,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
|
||||
root(isDark)
|
||||
.vfcitkilproprqtbnpoertpsziierwzi
|
||||
> .timeline
|
||||
padding-bottom 16px
|
||||
border-bottom solid 1px rgba(#000, 0.1)
|
||||
@ -56,10 +55,4 @@ root(isDark)
|
||||
> .add
|
||||
margin-top 16px
|
||||
|
||||
.vfcitkilproprqtbnpoertpsziierwzi[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.vfcitkilproprqtbnpoertpsziierwzi:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -19,18 +19,25 @@
|
||||
<x-profile/>
|
||||
</section>
|
||||
|
||||
<section class="web" v-show="page == 'web'">
|
||||
<h1>%i18n:@theme%</h1>
|
||||
<mk-theme/>
|
||||
</section>
|
||||
|
||||
<section class="web" v-show="page == 'web'">
|
||||
<h1>%i18n:@behaviour%</h1>
|
||||
<mk-switch v-model="fetchOnScroll" text="%i18n:@fetch-on-scroll%">
|
||||
<span>%i18n:@fetch-on-scroll-desc%</span>
|
||||
</mk-switch>
|
||||
<mk-switch v-model="autoPopout" text="%i18n:@auto-popout%">
|
||||
<span>%i18n:@auto-popout-desc%</span>
|
||||
</mk-switch>
|
||||
<ui-switch v-model="fetchOnScroll">
|
||||
%i18n:@fetch-on-scroll%
|
||||
<span slot="desc">%i18n:@fetch-on-scroll-desc%</span>
|
||||
</ui-switch>
|
||||
<ui-switch v-model="autoPopout">
|
||||
%i18n:@auto-popout%
|
||||
<span slot="desc">%i18n:@auto-popout-desc%</span>
|
||||
</ui-switch>
|
||||
|
||||
<section>
|
||||
<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>
|
||||
<header>%i18n:@default-note-visibility%</header>
|
||||
<ui-select v-model="defaultNoteVisibility">
|
||||
@ -45,9 +52,10 @@
|
||||
|
||||
<details>
|
||||
<summary>%i18n:@advanced%</summary>
|
||||
<mk-switch v-model="apiViaStream" text="%i18n:@api-via-stream%">
|
||||
<span>%i18n:@api-via-stream-desc%</span>
|
||||
</mk-switch>
|
||||
<ui-switch v-model="apiViaStream">
|
||||
%i18n:@api-via-stream%
|
||||
<span slot="desc">%i18n:@api-via-stream-desc%</span>
|
||||
</ui-switch>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
@ -59,37 +67,35 @@
|
||||
<div class="div">
|
||||
<button class="ui" @click="updateWallpaper">%i18n:@choose-wallpaper%</button>
|
||||
<button class="ui" @click="deleteWallpaper">%i18n:@delete-wallpaper%</button>
|
||||
<mk-switch v-model="darkmode" text="%i18n:@dark-mode%"/>
|
||||
<mk-switch v-model="useShadow" text="%i18n:@use-shadow%"/>
|
||||
<mk-switch v-model="roundedCorners" text="%i18n:@rounded-corners%"/>
|
||||
<mk-switch v-model="circleIcons" text="%i18n:@circle-icons%"/>
|
||||
<mk-switch v-model="reduceMotion" text="%i18n:common.reduce-motion%"/>
|
||||
<mk-switch v-model="contrastedAcct" text="%i18n:@contrasted-acct%"/>
|
||||
<mk-switch v-model="showFullAcct" text="%i18n:common.show-full-acct%"/>
|
||||
<mk-switch v-model="gradientWindowHeader" text="%i18n:@gradient-window-header%"/>
|
||||
<mk-switch v-model="iLikeSushi" text="%i18n:common.i-like-sushi%"/>
|
||||
<ui-switch v-model="darkmode">%i18n:@dark-mode%</ui-switch>
|
||||
<ui-switch v-model="useShadow">%i18n:@use-shadow%</ui-switch>
|
||||
<ui-switch v-model="roundedCorners">%i18n:@rounded-corners%</ui-switch>
|
||||
<ui-switch v-model="circleIcons">%i18n:@circle-icons%</ui-switch>
|
||||
<ui-switch v-model="reduceMotion">%i18n:common.reduce-motion%</ui-switch>
|
||||
<ui-switch v-model="contrastedAcct">%i18n:@contrasted-acct%</ui-switch>
|
||||
<ui-switch v-model="showFullAcct">%i18n:common.show-full-acct%</ui-switch>
|
||||
<ui-switch v-model="iLikeSushi">%i18n:common.i-like-sushi%</ui-switch>
|
||||
</div>
|
||||
<mk-switch v-model="showPostFormOnTopOfTl" text="%i18n:@post-form-on-timeline%"/>
|
||||
<mk-switch v-model="suggestRecentHashtags" text="%i18n:@suggest-recent-hashtags%"/>
|
||||
<mk-switch v-model="showClockOnHeader" text="%i18n:@show-clock-on-header%"/>
|
||||
<mk-switch v-model="alwaysShowNsfw" text="%i18n:common.always-show-nsfw%"/>
|
||||
<mk-switch v-model="showReplyTarget" text="%i18n:@show-reply-target%"/>
|
||||
<mk-switch v-model="showMyRenotes" text="%i18n:@show-my-renotes%"/>
|
||||
<mk-switch v-model="showRenotedMyNotes" text="%i18n:@show-renoted-my-notes%"/>
|
||||
<mk-switch v-model="showLocalRenotes" text="%i18n:@show-local-renotes%"/>
|
||||
<mk-switch v-model="showMaps" text="%i18n:@show-maps%">
|
||||
<span>%i18n:@show-maps-desc%</span>
|
||||
</mk-switch>
|
||||
<mk-switch v-model="disableAnimatedMfm" text="%i18n:common.disable-animated-mfm%"/>
|
||||
<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%"/>
|
||||
<ui-switch v-model="showPostFormOnTopOfTl">%i18n:@post-form-on-timeline%</ui-switch>
|
||||
<ui-switch v-model="suggestRecentHashtags">%i18n:@suggest-recent-hashtags%</ui-switch>
|
||||
<ui-switch v-model="showClockOnHeader">%i18n:@show-clock-on-header%</ui-switch>
|
||||
<ui-switch v-model="alwaysShowNsfw">%i18n:common.always-show-nsfw%</ui-switch>
|
||||
<ui-switch v-model="showReplyTarget">%i18n:@show-reply-target%</ui-switch>
|
||||
<ui-switch v-model="showMyRenotes">%i18n:@show-my-renotes%</ui-switch>
|
||||
<ui-switch v-model="showRenotedMyNotes">%i18n:@show-renoted-my-notes%</ui-switch>
|
||||
<ui-switch v-model="showLocalRenotes">%i18n:@show-local-renotes%</ui-switch>
|
||||
<ui-switch v-model="showMaps">%i18n:@show-maps%</ui-switch>
|
||||
<ui-switch v-model="disableAnimatedMfm">%i18n:common.disable-animated-mfm%</ui-switch>
|
||||
<ui-switch v-model="games_reversi_showBoardLabels">%i18n:common.show-reversi-board-labels%</ui-switch>
|
||||
<ui-switch v-model="games_reversi_useContrastStones">%i18n:common.use-contrast-reversi-stones%</ui-switch>
|
||||
</section>
|
||||
|
||||
<section class="web" v-show="page == 'web'">
|
||||
<h1>%i18n:@sound%</h1>
|
||||
<mk-switch v-model="enableSounds" text="%i18n:@enable-sounds%">
|
||||
<span>%i18n:@enable-sounds-desc%</span>
|
||||
</mk-switch>
|
||||
<ui-switch v-model="enableSounds">
|
||||
%i18n:@enable-sounds%
|
||||
<span slot="desc">%i18n:@enable-sounds-desc%</span>
|
||||
</ui-switch>
|
||||
<label>%i18n:@volume%</label>
|
||||
<input type="range"
|
||||
v-model="soundVolume"
|
||||
@ -102,7 +108,7 @@
|
||||
|
||||
<section class="web" v-show="page == 'web'">
|
||||
<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 class="web" v-show="page == 'web'">
|
||||
@ -131,9 +137,10 @@
|
||||
|
||||
<section class="notification" v-show="page == 'notification'">
|
||||
<h1>%i18n:@notification%</h1>
|
||||
<mk-switch v-model="$store.state.i.settings.autoWatch" @change="onChangeAutoWatch" text="%i18n:@auto-watch%">
|
||||
<span>%i18n:@auto-watch-desc%</span>
|
||||
</mk-switch>
|
||||
<ui-switch v-model="$store.state.i.settings.autoWatch" @change="onChangeAutoWatch">
|
||||
%i18n:@auto-watch%
|
||||
<span slot="desc">%i18n:@auto-watch-desc%</span>
|
||||
</ui-switch>
|
||||
</section>
|
||||
|
||||
<section class="drive" v-show="page == 'drive'">
|
||||
@ -201,20 +208,23 @@
|
||||
</button>
|
||||
<details>
|
||||
<summary>%i18n:@update-settings%</summary>
|
||||
<mk-switch v-model="preventUpdate" text="%i18n:@prevent-update%">
|
||||
<span>%i18n:@prevent-update-desc%</span>
|
||||
</mk-switch>
|
||||
<ui-switch v-model="preventUpdate">
|
||||
%i18n:@prevent-update%
|
||||
<span slot="desc">%i18n:@prevent-update-desc%</span>
|
||||
</ui-switch>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<section class="other" v-show="page == 'other'">
|
||||
<h1>%i18n:@advanced-settings%</h1>
|
||||
<mk-switch v-model="debug" text="%i18n:@debug-mode%">
|
||||
<span>%i18n:@debug-mode-desc%</span>
|
||||
</mk-switch>
|
||||
<mk-switch v-model="enableExperimentalFeatures" text="%i18n:@experimental%">
|
||||
<span>%i18n:@experimental-desc%</span>
|
||||
</mk-switch>
|
||||
<ui-switch v-model="debug">
|
||||
%i18n:@debug-mode%
|
||||
<span slot="desc">%i18n:@debug-mode-desc%</span>
|
||||
</ui-switch>
|
||||
<ui-switch v-model="enableExperimentalFeatures">
|
||||
%i18n:@experimental%
|
||||
<span slot="desc">%i18n:@experimental-desc%</span>
|
||||
</ui-switch>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
@ -421,12 +431,7 @@ export default Vue.extend({
|
||||
disableViaMobile: {
|
||||
get() { return this.$store.state.settings.disableViaMobile; },
|
||||
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() {
|
||||
(this as any).os.getMeta().then(meta => {
|
||||
@ -492,9 +497,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.mk-settings
|
||||
display flex
|
||||
width 100%
|
||||
height 100%
|
||||
@ -505,13 +508,13 @@ root(isDark)
|
||||
height 100%
|
||||
padding 16px 0 0 0
|
||||
overflow auto
|
||||
border-right solid 1px isDark ? #1c2023 : #ddd
|
||||
border-right solid 1px var(--faceDivider)
|
||||
|
||||
> p
|
||||
display block
|
||||
padding 10px 16px
|
||||
margin 0
|
||||
color isDark ? #9aa2a7 : #666
|
||||
color var(--desktopSettingsNavItem)
|
||||
cursor pointer
|
||||
user-select none
|
||||
transition margin-left 0.2s ease
|
||||
@ -520,11 +523,11 @@ root(isDark)
|
||||
margin-right 4px
|
||||
|
||||
&:hover
|
||||
color isDark ? #fff : #555
|
||||
color var(--desktopSettingsNavItemHover)
|
||||
|
||||
&.active
|
||||
margin-left 8px
|
||||
color $theme-color !important
|
||||
color var(--primary) !important
|
||||
|
||||
> .pages
|
||||
width 100%
|
||||
@ -534,14 +537,13 @@ root(isDark)
|
||||
|
||||
> section
|
||||
margin 32px
|
||||
color isDark ? #c4ccd2 : #4a535a
|
||||
color var(--text)
|
||||
|
||||
> h1
|
||||
margin 0 0 1em 0
|
||||
padding 0 0 8px 0
|
||||
font-size 1em
|
||||
color isDark ? #e3e7ea : #555
|
||||
border-bottom solid 1px isDark ? #1c2023 : #eee
|
||||
border-bottom solid 1px var(--faceDivider)
|
||||
|
||||
&, >>> *
|
||||
.ui.button.block
|
||||
@ -554,18 +556,12 @@ root(isDark)
|
||||
margin 0 0 1em 0
|
||||
padding 0 0 8px 0
|
||||
font-size 1em
|
||||
color isDark ? #e3e7ea : #555
|
||||
border-bottom solid 1px isDark ? #1c2023 : #eee
|
||||
color var(--text)
|
||||
border-bottom solid 1px var(--faceDivider)
|
||||
|
||||
> .web
|
||||
> .div
|
||||
border-bottom solid 1px isDark ? #1c2023 : #eee
|
||||
border-bottom solid 1px var(--faceDivider)
|
||||
margin 16px 0
|
||||
|
||||
.mk-settings[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-settings:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -38,7 +38,7 @@ export default Vue.extend({
|
||||
> .rp
|
||||
margin-left 4px
|
||||
font-style oblique
|
||||
color #a0bf46
|
||||
color var(--renoteText)
|
||||
|
||||
mk-poll
|
||||
font-size 80%
|
||||
|
||||
@ -215,7 +215,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
|
||||
.mk-timeline-core
|
||||
> .mk-friends-maker
|
||||
|
||||
@ -175,10 +175,8 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
background isDark ? #282C37 : #fff
|
||||
.mk-timeline
|
||||
background var(--face)
|
||||
box-shadow var(--shadow)
|
||||
border-radius var(--round)
|
||||
overflow hidden
|
||||
@ -186,8 +184,8 @@ root(isDark)
|
||||
> header
|
||||
padding 0 8px
|
||||
z-index 10
|
||||
background isDark ? #313543 : #fff
|
||||
box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08)
|
||||
background var(--faceHeader)
|
||||
box-shadow 0 1px var(--desktopTimelineHeaderShadow)
|
||||
|
||||
> .buttons
|
||||
position absolute
|
||||
@ -200,23 +198,20 @@ root(isDark)
|
||||
padding 0 8px
|
||||
font-size 0.9em
|
||||
line-height 42px
|
||||
color isDark ? #9baec8 : #ccc
|
||||
color var(--faceTextButton)
|
||||
|
||||
> .badge
|
||||
position absolute
|
||||
top -4px
|
||||
right 4px
|
||||
font-size 10px
|
||||
color $theme-color
|
||||
color var(--primary)
|
||||
|
||||
&:hover
|
||||
color isDark ? #b2c1d5 : #aaa
|
||||
|
||||
&:active
|
||||
color isDark ? #b2c1d5 : #999
|
||||
color var(--faceTextButtonHover)
|
||||
|
||||
&[data-active]
|
||||
color $theme-color
|
||||
color var(--primary)
|
||||
cursor default
|
||||
|
||||
&:before
|
||||
@ -227,7 +222,7 @@ root(isDark)
|
||||
left 0
|
||||
width 100%
|
||||
height 2px
|
||||
background $theme-color
|
||||
background var(--primary)
|
||||
|
||||
> span
|
||||
display inline-block
|
||||
@ -237,7 +232,7 @@ root(isDark)
|
||||
user-select none
|
||||
|
||||
&[data-active]
|
||||
color $theme-color
|
||||
color var(--primary)
|
||||
cursor default
|
||||
font-weight bold
|
||||
|
||||
@ -249,19 +244,13 @@ root(isDark)
|
||||
left -8px
|
||||
width calc(100% + 16px)
|
||||
height 2px
|
||||
background $theme-color
|
||||
background var(--primary)
|
||||
|
||||
&:not([data-active])
|
||||
color isDark ? #9aa2a7 : #6f7477
|
||||
color var(--desktopTimelineSrc)
|
||||
cursor pointer
|
||||
|
||||
&:hover
|
||||
color isDark ? #d9dcde : #525a5f
|
||||
|
||||
.mk-timeline[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-timeline:not([data-darkmode])
|
||||
root(false)
|
||||
color var(--desktopTimelineSrcHover)
|
||||
|
||||
</style>
|
||||
|
||||
@ -36,7 +36,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.mk-ui-notification
|
||||
display block
|
||||
position fixed
|
||||
z-index 10000
|
||||
@ -46,10 +46,10 @@ root(isDark)
|
||||
margin 0 auto
|
||||
padding 128px 0 0 0
|
||||
width 500px
|
||||
color rgba(isDark ? #fff : #000, 0.6)
|
||||
background rgba(isDark ? #282C37 : #fff, 0.9)
|
||||
color var(--desktopNotificationFg)
|
||||
background var(--desktopNotificationBg)
|
||||
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)
|
||||
opacity 0
|
||||
|
||||
@ -58,10 +58,4 @@ root(isDark)
|
||||
line-height 64px
|
||||
text-align center
|
||||
|
||||
.mk-ui-notification[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-ui-notification:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
@ -127,14 +127,12 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.account
|
||||
> .header
|
||||
display block
|
||||
margin 0
|
||||
padding 0
|
||||
color #9eaba8
|
||||
color var(--desktopHeaderFg)
|
||||
border none
|
||||
background transparent
|
||||
cursor pointer
|
||||
@ -144,14 +142,11 @@ root(isDark)
|
||||
|
||||
&:hover
|
||||
&[data-active='true']
|
||||
color isDark ? #fff : darken(#9eaba8, 20%)
|
||||
color var(--desktopHeaderHoverFg)
|
||||
|
||||
> .avatar
|
||||
filter saturate(150%)
|
||||
|
||||
&:active
|
||||
color isDark ? #fff : darken(#9eaba8, 30%)
|
||||
|
||||
> .username
|
||||
display block
|
||||
float left
|
||||
@ -177,7 +172,7 @@ root(isDark)
|
||||
transition filter 100ms ease
|
||||
|
||||
> .menu
|
||||
$bgcolor = isDark ? #282c37 : #fff
|
||||
$bgcolor = var(--face)
|
||||
display block
|
||||
position absolute
|
||||
top 56px
|
||||
@ -220,7 +215,7 @@ root(isDark)
|
||||
|
||||
& + ul
|
||||
padding-top 10px
|
||||
border-top solid 1px isDark ? #1c2023 : #eee
|
||||
border-top solid 1px var(--faceDivider)
|
||||
|
||||
> li
|
||||
display block
|
||||
@ -234,7 +229,7 @@ root(isDark)
|
||||
padding 0 28px
|
||||
margin 0
|
||||
line-height 40px
|
||||
color isDark ? #c8cece : #868C8C
|
||||
color var(--text)
|
||||
cursor pointer
|
||||
|
||||
*
|
||||
@ -249,8 +244,8 @@ root(isDark)
|
||||
padding 2px 8px
|
||||
font-size 90%
|
||||
font-style normal
|
||||
background $theme-color
|
||||
color $theme-color-foreground
|
||||
background var(--primary)
|
||||
color var(--primaryForeground)
|
||||
border-radius 8px
|
||||
|
||||
> [data-fa]:first-child
|
||||
@ -269,11 +264,11 @@ root(isDark)
|
||||
|
||||
&:hover, &:active
|
||||
text-decoration none
|
||||
background $theme-color
|
||||
color $theme-color-foreground
|
||||
background var(--primary)
|
||||
color var(--primaryForeground)
|
||||
|
||||
&:active
|
||||
background darken($theme-color, 10%)
|
||||
background var(--primaryDarken10)
|
||||
|
||||
&.signout
|
||||
$color = #e64137
|
||||
@ -290,10 +285,4 @@ root(isDark)
|
||||
transform-origin: center -16px;
|
||||
}
|
||||
|
||||
.account[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.account:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user