Merge pull request #2781 from syuilo/theme

Theme
This commit is contained in:
syuilo 2018-09-29 00:48:56 +09:00 committed by GitHub
commit 8b68c5da37
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
191 changed files with 2147 additions and 3369 deletions

View file

@ -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: "投稿の公開範囲"

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -68,7 +68,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
.mk-signin
color #555

View file

@ -151,7 +151,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
.mk-signup
min-width 302px

View file

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

View file

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

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

View file

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

View file

@ -1,9 +1,7 @@
<template>
<div class="ui-button" :class="[styl]">
<button :type="type" @click="$emit('click')">
<button class="dmtdnykelhudezerjlfpbhgovrgnqqgr" :class="[styl, { inline, primary }]" :type="type" @click="$emit('click')">
<slot></slot>
</button>
</div>
</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'
root(isDark, fill)
> button
.dmtdnykelhudezerjlfpbhgovrgnqqgr
display block
width 100%
min-height 40px
margin 0
padding 0
font-weight bold
font-weight normal
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
&: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
&.fill
color var(--text)
background var(--buttonBg)
&:hover
background lighten($theme-color, 5%)
background var(--buttonHoverBg)
&:active
background darken($theme-color, 5%)
else
color $theme-color
background var(--buttonActiveBg)
&.primary
color var(--primaryForeground)
background var(--primary)
&:hover
background var(--primaryLighten5)
&:active
background var(--primaryDarken5)
&:not(.fill)
color var(--primary)
background none
&:hover
color darken($theme-color, 5%)
color var(--primaryDarken5)
&:active
background rgba($theme-color, 0.3)
.ui-button[data-darkmode]
&.fill
root(true, true)
&:not(.fill)
root(true, false)
.ui-button:not([data-darkmode])
&.fill
root(false, true)
&:not(.fill)
root(false, false)
background var(--primaryAlpha03)
</style>

View file

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

View file

@ -19,7 +19,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
.ui-form
> fieldset

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -5,7 +5,6 @@
:data-found="announcements && announcements.length != 0"
:data-melt="props.design == 1"
:data-mobile="platform == 'mobile'"
:data-darkmode="$store.state.device.darkmode"
>
<div class="icon">
<svg height="32" version="1.1" viewBox="0 0 32 32" width="32">
@ -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>

View file

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

View file

@ -1,6 +1,7 @@
<template>
<div class="mkw-donation" :data-mobile="platform == 'mobile'">
<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('{')) }}
@ -8,6 +9,7 @@
{{ '%i18n:@text%'.substr('%i18n:@text%'.indexOf('}') + 1) }}
</p>
</article>
</mk-widget-container>
</div>
</template>
@ -30,18 +32,14 @@ export default define({
</script>
<style lang="stylus" scoped>
root(isDark)
background isDark ? #282c37 : #fff
border solid 1px isDark ? #c3831c : #ead8bb
border-radius 6px
> article
.dolfvtibguprpxxhfndqaosjitixjohx
padding 20px
background var(--donationBg)
color var(--donationFg)
> h1
margin 0 0 5px 0
font-size 1em
color isDark ? #b2bac1 : #888
> [data-fa]
margin-right 0.25em
@ -51,25 +49,5 @@ root(isDark)
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)
</style>

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -1,150 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="512"
height="512"
viewBox="0 0 135.46667 135.46667"
version="1.1"
id="svg8"
inkscape:version="0.92.1 r15371"
sodipodi:docname="header-icon.light.svg"
inkscape:export-filename="C:\Users\syuilo\projects\misskey\assets\favicon\32.png"
inkscape:export-xdpi="6"
inkscape:export-ydpi="6">
<defs
id="defs2">
<inkscape:path-effect
effect="simplify"
id="path-effect5115"
is_visible="true"
steps="1"
threshold="0.000408163"
smooth_angles="360"
helper_size="0"
simplify_individual_paths="false"
simplify_just_coalesce="false"
simplifyindividualpaths="false"
simplifyJustCoalesce="false" />
<inkscape:path-effect
effect="simplify"
id="path-effect5111"
is_visible="true"
steps="1"
threshold="0.000408163"
smooth_angles="360"
helper_size="0"
simplify_individual_paths="false"
simplify_just_coalesce="false"
simplifyindividualpaths="false"
simplifyJustCoalesce="false" />
<inkscape:path-effect
effect="simplify"
id="path-effect5104"
is_visible="true"
steps="1"
threshold="0.000408163"
smooth_angles="360"
helper_size="0"
simplify_individual_paths="false"
simplify_just_coalesce="false"
simplifyindividualpaths="false"
simplifyJustCoalesce="false" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.4142136"
inkscape:cx="114.309"
inkscape:cy="251.50613"
inkscape:document-units="px"
inkscape:current-layer="g4502"
showgrid="true"
units="px"
inkscape:snap-bbox="true"
inkscape:bbox-nodes="true"
inkscape:snap-bbox-edge-midpoints="false"
inkscape:snap-smooth-nodes="true"
inkscape:snap-center="true"
inkscape:snap-page="true"
inkscape:window-width="1920"
inkscape:window-height="1027"
inkscape:window-x="-8"
inkscape:window-y="1072"
inkscape:window-maximized="1"
inkscape:snap-object-midpoints="true"
inkscape:snap-midpoints="true"
inkscape:object-paths="true"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
objecttolerance="1"
guidetolerance="1"
inkscape:snap-nodes="false"
inkscape:snap-others="false">
<inkscape:grid
type="xygrid"
id="grid4504"
spacingx="4.2333334"
spacingy="4.2333334"
empcolor="#ff3fff"
empopacity="0.25098039"
empspacing="4" />
</sodipodi:namedview>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="レイヤー 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-30.809093,-111.78601)">
<g
id="g4502"
transform="matrix(1.096096,0,0,1.096096,-2.960633,-44.023579)">
<g
style="fill:#000000;fill-opacity:1"
transform="translate(-1.3333333e-6,-1.3439941e-6)"
id="g5125">
<g
transform="matrix(0.91391326,0,0,0.91391326,7.9719907,17.595761)"
id="text4489"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:141.03404236px;line-height:476.69509888px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.28950602px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
aria-label="Mi">
<path
sodipodi:nodetypes="zccssscssccscczzzccsccsscscsccz"
inkscape:connector-curvature="0"
id="path5210"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill:#000000;fill-opacity:1;stroke-width:0.28950602px"
d="m 75.196381,231.17126 c -5.855419,0.0202 -10.885068,-3.50766 -13.2572,-7.61584 -1.266603,-1.79454 -3.772419,-2.43291 -3.807919,0 v 11.2332 c 0,4.51309 -1.645397,8.41504 -4.936191,11.70583 -3.196772,3.19677 -7.098714,4.79516 -11.705826,4.79516 -4.513089,0 -8.415031,-1.59839 -11.705825,-4.79516 -3.196772,-3.29079 -4.795158,-7.19274 -4.795158,-11.70583 v -61.7729 c 0,-3.47884 0.987238,-6.6286 2.961715,-9.44928 2.068499,-2.91471 4.701135,-4.9362 7.897906,-6.06447 1.786431,-0.65816 3.666885,-0.98724 5.641362,-0.98724 5.077225,0 9.308247,1.97448 12.693064,5.92343 1.786431,1.97448 2.820681,3.00873 3.102749,3.10275 0,0 13.408119,16.21319 13.78421,16.49526 0.376091,0.28206 1.480789,2.43848 4.127113,2.43848 2.646324,0 3.89218,-2.15642 4.26827,-2.43848 0.376091,-0.28207 13.784088,-16.49526 13.784088,-16.49526 0.09402,0.094 1.081261,-0.94022 2.961715,-3.10275 3.478837,-3.94895 7.756866,-5.92343 12.834096,-5.92343 1.88045,0 3.76091,0.32908 5.64136,0.98724 3.19677,1.12827 5.7824,3.14976 7.75688,6.06447 2.06849,2.82068 3.10274,5.97044 3.10274,9.44928 v 61.7729 c 0,4.51309 -1.6454,8.41504 -4.93619,11.70583 -3.19677,3.19677 -7.09871,4.79516 -11.70582,4.79516 -4.51309,0 -8.41504,-1.59839 -11.705828,-4.79516 -3.196772,-3.29079 -4.795158,-7.19274 -4.795158,-11.70583 v -11.2332 c -0.277898,-3.06563 -2.987588,-1.13379 -3.948953,0 -2.538613,4.70114 -7.401781,7.59567 -13.2572,7.61584 z" />
<path
inkscape:connector-curvature="0"
id="path5212"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill:#000000;fill-opacity:1;stroke-width:0.28950602px"
d="m 145.83461,185.00361 q -5.92343,0 -10.15445,-4.08999 -4.08999,-4.23102 -4.08999,-10.15445 0,-5.92343 4.08999,-10.01342 4.23102,-4.23102 10.15445,-4.23102 5.92343,0 10.15445,4.23102 4.23102,4.08999 4.23102,10.01342 0,5.92343 -4.23102,10.15445 -4.23102,4.08999 -10.15445,4.08999 z m 0.14103,2.82068 q 5.92343,0 10.01342,4.23102 4.23102,4.23102 4.23102,10.15445 v 34.83541 q 0,5.92343 -4.23102,10.15445 -4.08999,4.08999 -10.01342,4.08999 -5.92343,0 -10.15445,-4.08999 -4.23102,-4.23102 -4.23102,-10.15445 v -34.83541 q 0,-5.92343 4.23102,-10.15445 4.23102,-4.23102 10.15445,-4.23102 z" />
</g>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 7 KiB

View file

@ -124,24 +124,24 @@
id="g4502"
transform="matrix(1.096096,0,0,1.096096,-2.960633,-44.023579)">
<g
style="fill:#ffffff;fill-opacity:1"
style="fill-opacity:1"
transform="translate(-1.3333333e-6,-1.3439941e-6)"
id="g5125">
<g
transform="matrix(0.91391326,0,0,0.91391326,7.9719907,17.595761)"
id="text4489"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:141.03404236px;line-height:476.69509888px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.28950602px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:141.03404236px;line-height:476.69509888px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.28950602px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
aria-label="Mi">
<path
sodipodi:nodetypes="zccssscssccscczzzccsccsscscsccz"
inkscape:connector-curvature="0"
id="path5210"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill:#ffffff;fill-opacity:1;stroke-width:0.28950602px"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill-opacity:1;stroke-width:0.28950602px"
d="m 75.196381,231.17126 c -5.855419,0.0202 -10.885068,-3.50766 -13.2572,-7.61584 -1.266603,-1.79454 -3.772419,-2.43291 -3.807919,0 v 11.2332 c 0,4.51309 -1.645397,8.41504 -4.936191,11.70583 -3.196772,3.19677 -7.098714,4.79516 -11.705826,4.79516 -4.513089,0 -8.415031,-1.59839 -11.705825,-4.79516 -3.196772,-3.29079 -4.795158,-7.19274 -4.795158,-11.70583 v -61.7729 c 0,-3.47884 0.987238,-6.6286 2.961715,-9.44928 2.068499,-2.91471 4.701135,-4.9362 7.897906,-6.06447 1.786431,-0.65816 3.666885,-0.98724 5.641362,-0.98724 5.077225,0 9.308247,1.97448 12.693064,5.92343 1.786431,1.97448 2.820681,3.00873 3.102749,3.10275 0,0 13.408119,16.21319 13.78421,16.49526 0.376091,0.28206 1.480789,2.43848 4.127113,2.43848 2.646324,0 3.89218,-2.15642 4.26827,-2.43848 0.376091,-0.28207 13.784088,-16.49526 13.784088,-16.49526 0.09402,0.094 1.081261,-0.94022 2.961715,-3.10275 3.478837,-3.94895 7.756866,-5.92343 12.834096,-5.92343 1.88045,0 3.76091,0.32908 5.64136,0.98724 3.19677,1.12827 5.7824,3.14976 7.75688,6.06447 2.06849,2.82068 3.10274,5.97044 3.10274,9.44928 v 61.7729 c 0,4.51309 -1.6454,8.41504 -4.93619,11.70583 -3.19677,3.19677 -7.09871,4.79516 -11.70582,4.79516 -4.51309,0 -8.41504,-1.59839 -11.705828,-4.79516 -3.196772,-3.29079 -4.795158,-7.19274 -4.795158,-11.70583 v -11.2332 c -0.277898,-3.06563 -2.987588,-1.13379 -3.948953,0 -2.538613,4.70114 -7.401781,7.59567 -13.2572,7.61584 z" />
<path
inkscape:connector-curvature="0"
id="path5212"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill:#ffffff;fill-opacity:1;stroke-width:0.28950602px"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill-opacity:1;stroke-width:0.28950602px"
d="m 145.83461,185.00361 q -5.92343,0 -10.15445,-4.08999 -4.08999,-4.23102 -4.08999,-10.15445 0,-5.92343 4.08999,-10.01342 4.23102,-4.23102 10.15445,-4.23102 5.92343,0 10.15445,4.23102 4.23102,4.08999 4.23102,10.01342 0,5.92343 -4.23102,10.15445 -4.23102,4.08999 -10.15445,4.08999 z m 0.14103,2.82068 q 5.92343,0 10.01342,4.23102 4.23102,4.23102 4.23102,10.15445 v 34.83541 q 0,5.92343 -4.23102,10.15445 -4.08999,4.08999 -10.01342,4.08999 -5.92343,0 -10.15445,-4.08999 -4.23102,-4.23102 -4.23102,-10.15445 v -34.83541 q 0,-5.92343 4.23102,-10.15445 4.23102,-4.23102 10.15445,-4.23102 z" />
</g>
</g>

Before

Width:  |  Height:  |  Size: 7 KiB

After

Width:  |  Height:  |  Size: 7 KiB

View file

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

View file

@ -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-thumb
background rgba(0, 0, 0, 0.2)
&:hover
background rgba(0, 0, 0, 0.4)
&:active
background $theme-color
&[data-darkmode]
background #191B22
&, *
&::-webkit-scrollbar-track
background-color #282C37
background var(--scrollbarTrack)
&::-webkit-scrollbar-thumb
background-color #454954
background var(--scrollbarHandle)
&:hover
background-color #535660
background var(--scrollbarHandleHover)
&:active
background-color $theme-color
background var(--primary)

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -4,8 +4,8 @@
<template v-if="!quote">
<footer>
<a class="quote" v-if="!quote" @click="onQuote">%i18n:@quote%</a>
<button class="ui cancel" @click="cancel">%i18n:@cancel%</button>
<button class="ui primary ok" @click="ok" :disabled="wait">{{ wait ? '%i18n:@reposting%' : '%i18n:@renote%' }}</button>
<ui-button class="button cancel" inline @click="cancel">%i18n:@cancel%</ui-button>
<ui-button class="button ok" inline primary @click="ok" :disabled="wait">{{ wait ? '%i18n:@reposting%' : '%i18n:@renote%' }}</ui-button>
</footer>
</template>
<template v-if="quote">
@ -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>

View file

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

View file

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

View file

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

View file

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

View file

@ -215,7 +215,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
.mk-timeline-core
> .mk-friends-maker

View file

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

View file

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

View file

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