graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-12-04 21:43:08 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #2781 from syuilo/theme

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

26
locales/ja-JP.yml
View file

@ -285,6 +285,28 @@ common/views/components/media-banner.vue:
sensitive: "閲覧注意" sensitive: "閲覧注意"
click-to-show: "クリックして表示" click-to-show: "クリックして表示"
common/views/components/theme.vue:
light-theme: "非ダークモード時に使用するテーマ"
dark-theme: "ダークモード時に使用するテーマ"
install-a-theme: "テーマのインストール"
theme-code: "テーマコード"
install: "インストール"
create-a-theme: "テーマの作成"
save-created-theme: "テーマを保存"
primary-color: "プライマリ カラー"
secondary-color: "セカンダリ カラー"
text-color: "文字色"
base-theme: "ベーステーマ"
base-theme-light: "Light"
base-theme-dark: "Dark"
theme-name: "テーマ名"
preview-created-theme: "プレビュー"
invalid-theme: "テーマが正しくありません。"
already-installed: "既にそのテーマはインストールされています。"
saved: "保存しました"
installed-themes: "インストールされたテーマ"
select-theme: "テーマを選択してください"
common/views/components/cw-button.vue: common/views/components/cw-button.vue:
hide: "隠す" hide: "隠す"
show: "もっと見る" show: "もっと見る"
@ -762,6 +784,7 @@ desktop/views/components/settings.vue:
2fa: "二段階認証" 2fa: "二段階認証"
other: "その他" other: "その他"
license: "ライセンス" license: "ライセンス"
theme: "テーマ"
behaviour: "動作" behaviour: "動作"
fetch-on-scroll: "スクロールで自動読み込み" fetch-on-scroll: "スクロールで自動読み込み"
@ -784,7 +807,6 @@ desktop/views/components/settings.vue:
rounded-corners: "UIの角を丸める" rounded-corners: "UIの角を丸める"
circle-icons: "円形のアイコンを使用" circle-icons: "円形のアイコンを使用"
contrasted-acct: "ユーザー名にコントラストを付ける" contrasted-acct: "ユーザー名にコントラストを付ける"
gradient-window-header: "ウィンドウのタイトルバーにグラデーションを使用"
post-form-on-timeline: "タイムライン上部に投稿フォームを表示する" post-form-on-timeline: "タイムライン上部に投稿フォームを表示する"
suggest-recent-hashtags: "最近のハッシュタグを投稿フォームに表示する" suggest-recent-hashtags: "最近のハッシュタグを投稿フォームに表示する"
show-clock-on-header: "右上に時計を表示する" show-clock-on-header: "右上に時計を表示する"
@ -793,7 +815,6 @@ desktop/views/components/settings.vue:
show-renoted-my-notes: "自分の投稿のRenoteをタイムラインに表示する" show-renoted-my-notes: "自分の投稿のRenoteをタイムラインに表示する"
show-local-renotes: "ローカルの投稿のRenoteをタイムラインに表示する" show-local-renotes: "ローカルの投稿のRenoteをタイムラインに表示する"
show-maps: "マップの自動展開" show-maps: "マップの自動展開"
show-maps-desc: "位置情報が添付された投稿のマップを自動的に展開します。"
sound: "サウンド" sound: "サウンド"
enable-sounds: "サウンドを有効にする" enable-sounds: "サウンドを有効にする"
@ -1419,6 +1440,7 @@ mobile/views/pages/settings.vue:
notification-position: "通知の表示" notification-position: "通知の表示"
notification-position-bottom: "下" notification-position-bottom: "下"
notification-position-top: "上" notification-position-top: "上"
theme: "テーマ"
behavior: "動作" behavior: "動作"
fetch-on-scroll: "スクロールで自動読み込み" fetch-on-scroll: "スクロールで自動読み込み"
note-visibility: "投稿の公開範囲" note-visibility: "投稿の公開範囲"

4
package.json
View file

@ -75,6 +75,7 @@
"@types/single-line-log": "1.1.0", "@types/single-line-log": "1.1.0",
"@types/speakeasy": "2.0.2", "@types/speakeasy": "2.0.2",
"@types/systeminformation": "3.23.0", "@types/systeminformation": "3.23.0",
"@types/tinycolor2": "1.4.1",
"@types/tmp": "0.0.33", "@types/tmp": "0.0.33",
"@types/uuid": "3.4.4", "@types/uuid": "3.4.4",
"@types/webpack": "4.4.12", "@types/webpack": "4.4.12",
@ -194,6 +195,7 @@
"systeminformation": "3.45.6", "systeminformation": "3.45.6",
"syuilo-password-strength": "0.0.1", "syuilo-password-strength": "0.0.1",
"textarea-caret": "3.1.0", "textarea-caret": "3.1.0",
"tinycolor2": "1.4.1",
"tmp": "0.0.33", "tmp": "0.0.33",
"ts-loader": "4.4.1", "ts-loader": "4.4.1",
"ts-node": "7.0.1", "ts-node": "7.0.1",
@ -206,12 +208,14 @@
"v-animate-css": "0.0.2", "v-animate-css": "0.0.2",
"vue": "2.5.17", "vue": "2.5.17",
"vue-chartjs": "3.4.0", "vue-chartjs": "3.4.0",
"vue-color": "2.6.0",
"vue-cropperjs": "2.2.2", "vue-cropperjs": "2.2.2",
"vue-js-modal": "1.3.26", "vue-js-modal": "1.3.26",
"vue-json-tree-view": "2.1.4", "vue-json-tree-view": "2.1.4",
"vue-loader": "15.4.2", "vue-loader": "15.4.2",
"vue-router": "3.0.1", "vue-router": "3.0.1",
"vue-style-loader": "4.1.2", "vue-style-loader": "4.1.2",
"vue-svg-inline-loader": "1.1.3",
"vue-template-compiler": "2.5.17", "vue-template-compiler": "2.5.17",
"vuedraggable": "2.16.0", "vuedraggable": "2.16.0",
"vuewordcloud": "18.7.11", "vuewordcloud": "18.7.11",

8
src/client/app/app.styl
View file

@ -27,7 +27,7 @@ body
z-index 65536 z-index 65536
.bar .bar
background $theme-color background var(--primary)
position fixed position fixed
z-index 65537 z-index 65537
@ -44,7 +44,7 @@ body
right 0px right 0px
width 100px width 100px
height 100% height 100%
box-shadow 0 0 10px $theme-color, 0 0 5px $theme-color box-shadow 0 0 10px var(--primary), 0 0 5px var(--primary)
opacity 1 opacity 1
transform rotate(3deg) translate(0px, -4px) transform rotate(3deg) translate(0px, -4px)
@ -64,8 +64,8 @@ body
box-sizing border-box box-sizing border-box
border solid 2px transparent border solid 2px transparent
border-top-color $theme-color border-top-color var(--primary)
border-left-color $theme-color border-left-color var(--primary)
border-radius 50% border-radius 50%
animation progress-spinner 400ms linear infinite animation progress-spinner 400ms linear infinite

3
src/client/app/app.vue
View file

@ -5,6 +5,9 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import { url, lang } from './config'; import { url, lang } from './config';
import applyTheme from './common/scripts/theme';
const darkTheme = require('../theme/dark');
const halloweenTheme = require('../theme/halloween');
export default Vue.extend({ export default Vue.extend({
computed: { computed: {

17
src/client/app/boot.js
View file

@ -20,6 +20,16 @@
const langs = LANGS; const langs = LANGS;
//#region Apply theme
const theme = localStorage.getItem('theme');
if (theme) {
Object.entries(JSON.parse(theme)).forEach(([k, v]) => {
if (k == 'meta') return;
document.documentElement.style.setProperty(`--${k}`, v.toString());
});
}
//#endregion
//#region Load settings //#region Load settings
let settings = null; let settings = null;
const vuex = localStorage.getItem('vuex'); const vuex = localStorage.getItem('vuex');
@ -84,13 +94,6 @@
app = isMobile ? 'mobile' : 'desktop'; app = isMobile ? 'mobile' : 'desktop';
} }
// Dark/Light
if (settings) {
if (settings.device.darkmode) {
document.documentElement.setAttribute('data-darkmode', 'true');
}
}
// Script version // Script version
const ver = localStorage.getItem('v') || VERSION; const ver = localStorage.getItem('v') || VERSION;

28
src/client/app/common/views/components/autocomplete.vue
View file

@ -259,15 +259,13 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .mk-autocomplete
root(isDark)
position fixed position fixed
z-index 65535 z-index 65535
max-width 100% max-width 100%
margin-top calc(1em + 8px) margin-top calc(1em + 8px)
overflow hidden overflow hidden
background isDark ? #313543 : #fff background var(--faceHeader)
border solid 1px rgba(#000, 0.1) border solid 1px rgba(#000, 0.1)
border-radius 4px border-radius 4px
transition top 0.1s ease, left 0.1s ease transition top 0.1s ease, left 0.1s ease
@ -299,16 +297,16 @@ root(isDark)
text-overflow ellipsis text-overflow ellipsis
&:hover &:hover
background isDark ? rgba(#fff, 0.1) : rgba(#000, 0.1) background var(--autocompleteItemHoverBg)
&[data-selected='true'] &[data-selected='true']
background $theme-color background var(--primary)
&, * &, *
color #fff !important color #fff !important
&:active &:active
background darken($theme-color, 10%) background var(--primaryDarken10)
&, * &, *
color #fff !important color #fff !important
@ -325,15 +323,15 @@ root(isDark)
.name .name
margin 0 8px 0 0 margin 0 8px 0 0
color isDark ? rgba(#fff, 0.8) : rgba(#000, 0.8) color var(--autocompleteItemText)
.username .username
color isDark ? rgba(#fff, 0.3) : rgba(#000, 0.3) color var(--autocompleteItemTextSub)
> .hashtags > li > .hashtags > li
.name .name
color isDark ? rgba(#fff, 0.8) : rgba(#000, 0.8) color var(--autocompleteItemText)
> .emojis > li > .emojis > li
@ -343,15 +341,9 @@ root(isDark)
width 24px width 24px
.name .name
color isDark ? rgba(#fff, 0.8) : rgba(#000, 0.8) color var(--autocompleteItemText)
.alias .alias
margin 0 0 0 8px margin 0 0 0 8px
color isDark ? rgba(#fff, 0.3) : rgba(#000, 0.3) color var(--autocompleteItemTextSub)
.mk-autocomplete[data-darkmode]
root(true)
.mk-autocomplete:not([data-darkmode])
root(false)
</style> </style>

15
src/client/app/common/views/components/avatar.vue
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: { methods: {
onClick(e) { onClick(e) {
this.$emit('click', e); this.$emit('click', e);
@ -67,8 +72,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-avatar
root(isDark)
display inline-block display inline-block
vertical-align bottom vertical-align bottom
@ -79,7 +83,7 @@ root(isDark)
&.cat::before, &.cat::before,
&.cat::after &.cat::after
background #df548f background #df548f
border solid 4px isDark ? #e0eefd : #202224 border solid 4px currentColor
box-sizing border-box box-sizing border-box
content '' content ''
display inline-block display inline-block
@ -105,9 +109,4 @@ root(isDark)
transition border-radius 1s ease transition border-radius 1s ease
z-index 1 z-index 1
.mk-avatar[data-darkmode]
root(true)
.mk-avatar:not([data-darkmode])
root(false)
</style> </style>

12
src/client/app/common/views/components/connect-failed.vue
View file

@ -39,7 +39,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
.mk-connect-failed .mk-connect-failed
width 100% width 100%
@ -70,17 +70,17 @@ export default Vue.extend({
display block display block
margin 1em auto 0 auto margin 1em auto 0 auto
padding 8px 10px padding 8px 10px
color $theme-color-foreground color var(--primaryForeground)
background $theme-color background var(--primary)
&:focus &:focus
outline solid 3px rgba($theme-color, 0.3) outline solid 3px var(--primaryAlpha03)
&:hover &:hover
background lighten($theme-color, 10%) background var(--primaryLighten10)
&:active &:active
background darken($theme-color, 10%) background var(--primaryDarken10)
> .thanks > .thanks
display block display block

14
src/client/app/common/views/components/cw-button.vue
View file

@ -22,23 +22,17 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) .nrvgflfuaxwgkxoynpnumyookecqrrvh
display inline-block display inline-block
padding 4px 8px padding 4px 8px
font-size 0.7em font-size 0.7em
color isDark ? #393f4f : #fff color var(--cwButtonFg)
background isDark ? #687390 : #b1b9c1 background var(--cwButtonBg)
border-radius 2px border-radius 2px
cursor pointer cursor pointer
user-select none user-select none
&:hover &:hover
background isDark ? #707b97 : #bbc4ce background var(--cwButtonHoverBg)
.nrvgflfuaxwgkxoynpnumyookecqrrvh[data-darkmode]
root(true)
.nrvgflfuaxwgkxoynpnumyookecqrrvh:not([data-darkmode])
root(false)
</style> </style>

6
src/client/app/common/views/components/forkit.vue
View file

@ -9,7 +9,7 @@
</template> </template>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
.a .a
display block display block
@ -18,8 +18,8 @@
display block display block
//fill #151513 //fill #151513
//color #fff //color #fff
fill $theme-color fill var(--primary)
color $theme-color-foreground color var(--primaryForeground)
.octo-arm .octo-arm
transform-origin 130px 106px transform-origin 130px 106px

30
src/client/app/common/views/components/games/reversi/reversi.game.vue
View file

@ -304,9 +304,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .xqnhankfuuilcwvhgsopeqncafzsquya
root(isDark)
text-align center text-align center
> .go-index > .go-index
@ -319,7 +317,7 @@ root(isDark)
> header > header
padding 8px padding 8px
border-bottom dashed 1px isDark ? #4c5761 : #c4cdd4 border-bottom dashed 1px var(--reversiGameHeaderLine)
a a
color inherit color inherit
@ -386,30 +384,30 @@ root(isDark)
user-select none user-select none
&.empty &.empty
border solid 2px isDark ? #51595f : #eee border solid 2px var(--reversiGameEmptyCell)
&.empty.can &.empty.can
background isDark ? #51595f : #eee background var(--reversiGameEmptyCell)
&.empty.myTurn &.empty.myTurn
border-color isDark ? #6a767f : #ddd border-color var(--reversiGameEmptyCellMyTurn)
&.can &.can
background isDark ? #51595f : #eee background var(--reversiGameEmptyCellCanPut)
cursor pointer cursor pointer
&:hover &:hover
border-color darken($theme-color, 10%) border-color var(--primaryDarken10)
background $theme-color background var(--primary)
&:active &:active
background darken($theme-color, 10%) background var(--primaryDarken10)
&.prev &.prev
box-shadow 0 0 0 4px rgba($theme-color, 0.7) box-shadow 0 0 0 4px var(--primaryAlpha07)
&.isEnded &.isEnded
border-color isDark ? #6a767f : #ddd border-color var(--reversiGameEmptyCellMyTurn)
&.none &.none
border-color transparent !important border-color transparent !important
@ -458,10 +456,4 @@ root(isDark)
margin 0 8px margin 0 8px
min-width 70px min-width 70px
.xqnhankfuuilcwvhgsopeqncafzsquya[data-darkmode]
root(true)
.xqnhankfuuilcwvhgsopeqncafzsquya:not([data-darkmode])
root(false)
</style> </style>

40
src/client/app/common/views/components/games/reversi/reversi.index.vue
View file

@ -138,9 +138,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .phgnkghfpyvkrvwiajkiuoxyrdaqpzcx
root(isDark)
> h1 > h1
margin 0 margin 0
padding 24px padding 24px
@ -148,7 +146,7 @@ root(isDark)
text-align center text-align center
font-weight normal font-weight normal
color #fff color #fff
background linear-gradient(to bottom, isDark ? #45730e : #8bca3e, isDark ? #464300 : #d6cf31) background linear-gradient(to bottom, var(--reversiBannerGradientStart), var(--reversiBannerGradientEnd))
& + p & + p
margin 0 margin 0
@ -156,7 +154,7 @@ root(isDark)
margin-bottom 12px margin-bottom 12px
text-align center text-align center
font-size 14px font-size 14px
border-bottom solid 1px isDark ? #535f65 : #d3d9dc border-bottom solid 1px var(--faceDivider)
> .play > .play
margin 0 auto margin 0 auto
@ -171,14 +169,14 @@ root(isDark)
padding 16px padding 16px
font-size 14px font-size 14px
text-align left text-align left
background isDark ? #282c37 : #f5f5f5 background var(--reversiDescBg)
border-radius 8px border-radius 8px
> section > section
margin 0 auto margin 0 auto
padding 0 16px 16px 16px padding 0 16px 16px 16px
max-width 500px max-width 500px
border-top solid 1px isDark ? #535f65 : #d3d9dc border-top solid 1px var(--faceDivider)
> h2 > h2
margin 0 margin 0
@ -189,9 +187,9 @@ root(isDark)
.invitation .invitation
margin 8px 0 margin 8px 0
padding 8px padding 8px
color isDark ? #fff : #677f84 color var(--text)
background isDark ? #282c37 : #fff background var(--face)
box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15) box-shadow 0 2px 16px var(--reversiListItemShadow)
border-radius 6px border-radius 6px
cursor pointer cursor pointer
@ -200,13 +198,13 @@ root(isDark)
user-select none user-select none
&:focus &:focus
border-color $theme-color border-color var(--primary)
&:hover &:hover
background isDark ? #313543 : #f5f5f5 box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
&:active &:active
background isDark ? #1e222b : #eee box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
> .avatar > .avatar
width 32px width 32px
@ -221,9 +219,9 @@ root(isDark)
display block display block
margin 8px 0 margin 8px 0
padding 8px padding 8px
color isDark ? #fff : #677f84 color var(--text)
background isDark ? #282c37 : #fff background var(--face)
box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15) box-shadow 0 2px 16px var(--reversiListItemShadow)
border-radius 6px border-radius 6px
cursor pointer cursor pointer
@ -232,10 +230,10 @@ root(isDark)
user-select none user-select none
&:hover &:hover
background isDark ? #313543 : #f5f5f5 box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
&:active &:active
background isDark ? #1e222b : #eee box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
> .avatar > .avatar
width 32px width 32px
@ -246,10 +244,4 @@ root(isDark)
margin 0 8px margin 0 8px
line-height 32px line-height 32px
.phgnkghfpyvkrvwiajkiuoxyrdaqpzcx[data-darkmode]
root(true)
.phgnkghfpyvkrvwiajkiuoxyrdaqpzcx:not([data-darkmode])
root(false)
</style> </style>

51
src/client/app/common/views/components/games/reversi/reversi.room.vue
View file

@ -47,9 +47,9 @@
</header> </header>
<div> <div>
<mk-switch v-model="game.settings.isLlotheo" @change="updateSettings" text="%i18n:@is-llotheo%"/> <ui-switch v-model="game.settings.isLlotheo" @change="updateSettings">%i18n:@is-llotheo%</ui-switch>
<mk-switch v-model="game.settings.loopedBoard" @change="updateSettings" text="%i18n:@looped-map%"/> <ui-switch v-model="game.settings.loopedBoard" @change="updateSettings">%i18n:@looped-map%</ui-switch>
<mk-switch v-model="game.settings.canPutEverywhere" @change="updateSettings" text="%i18n:@can-put-everywhere%"/> <ui-switch v-model="game.settings.canPutEverywhere" @change="updateSettings">%i18n:@can-put-everywhere%</ui-switch>
</div> </div>
</div> </div>
@ -60,7 +60,7 @@
<div> <div>
<template v-for="item in form"> <template v-for="item in form">
<mk-switch v-if="item.type == 'switch'" v-model="item.value" :key="item.id" :text="item.label" @change="onChangeForm(item)">{{ item.desc || '' }}</mk-switch> <ui-switch v-if="item.type == 'switch'" v-model="item.value" :key="item.id" :text="item.label" @change="onChangeForm(item)">{{ item.desc || '' }}</ui-switch>
<div class="card" v-if="item.type == 'radio'" :key="item.id"> <div class="card" v-if="item.type == 'radio'" :key="item.id">
<header> <header>
@ -252,11 +252,9 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .urbixznjwwuukfsckrwzwsqzsxornqij
root(isDark)
text-align center text-align center
background isDark ? #191b22 : #f9f9f9 background var(--bg)
> header > header
padding 8px padding 8px
@ -273,10 +271,10 @@ root(isDark)
> select > select
width 100% width 100%
padding 12px 14px padding 12px 14px
background isDark ? #282C37 : #fff background var(--face)
border 1px solid isDark ? #6a707d : #dcdfe6 border 1px solid var(--reversiMapSelectBorder)
border-radius 4px border-radius 4px
color isDark ? #fff : #606266 color var(--text)
cursor pointer cursor pointer
transition border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) transition border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)
-webkit-appearance none -webkit-appearance none
@ -284,17 +282,18 @@ root(isDark)
appearance none appearance none
&:hover &:hover
border-color isDark ? #a7aebd : #c0c4cc border-color var(--reversiMapSelectHoverBorder)
&:focus &:focus
&:active &:active
border-color $theme-color border-color var(--primary)
> div > div
> .random > .random
padding 32px 0 padding 32px 0
font-size 64px font-size 64px
color isDark ? #4e5961 : #d8d8d8 color var(--text)
opacity 0.7
> .board > .board
display grid display grid
@ -302,11 +301,11 @@ root(isDark)
width 300px width 300px
height 300px height 300px
margin 0 auto margin 0 auto
color isDark ? #fff : #444 color var(--text)
> div > div
background transparent background transparent
border solid 2px isDark ? #6a767f : #ddd border solid 2px var(--faceDivider)
border-radius 6px border-radius 6px
overflow hidden overflow hidden
cursor pointer cursor pointer
@ -331,32 +330,26 @@ root(isDark)
.card .card
max-width 400px max-width 400px
border-radius 4px border-radius 4px
background isDark ? #282C37 : #fff background var(--face)
color isDark ? #fff : #303133 color var(--text)
box-shadow 0 2px 12px 0 rgba(#000, isDark ? 0.7 : 0.1) box-shadow 0 2px 12px 0 var(--reversiRoomFormShadow)
> header > header
padding 18px 20px padding 18px 20px
border-bottom 1px solid isDark ? #1c2023 : #ebeef5 border-bottom 1px solid var(--faceDivider)
> div > div
padding 20px padding 20px
color isDark ? #fff : #606266 color var(--text)
> footer > footer
position sticky position sticky
bottom 0 bottom 0
padding 16px padding 16px
background rgba(isDark ? #191b22 : #fff, 0.9) background var(--reversiRoomFooterBg)
border-top solid 1px isDark ? #606266 : #c4cdd4 border-top solid 1px var(--faceDivider)
> .status > .status
margin 0 0 16px 0 margin 0 0 16px 0
.urbixznjwwuukfsckrwzwsqzsxornqij[data-darkmode]
root(true)
.urbixznjwwuukfsckrwzwsqzsxornqij:not([data-darkmode])
root(false)
</style> </style>

14
src/client/app/common/views/components/games/reversi/reversi.vue
View file

@ -156,11 +156,9 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .vchtoekanapleubgzioubdtmlkribzfd
color var(--text)
root(isDark) background var(--bg)
color isDark ? #fff : #677f84
background isDark ? #191b22 : #fff
> .matching > .matching
> h1 > h1
@ -177,10 +175,4 @@ root(isDark)
text-align center text-align center
border-top dashed 1px #c4cdd4 border-top dashed 1px #c4cdd4
.vchtoekanapleubgzioubdtmlkribzfd[data-darkmode]
root(true)
.vchtoekanapleubgzioubdtmlkribzfd:not([data-darkmode])
root(false)
</style> </style>

20
src/client/app/common/views/components/google.vue
View file

@ -26,7 +26,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) .mk-google
display flex display flex
margin 8px 0 margin 8px 0
@ -37,31 +37,25 @@ root(isDark)
height 40px height 40px
font-family sans-serif font-family sans-serif
font-size 16px font-size 16px
color isDark ? #dee4e8 : #55595c color var(--googleSearchFg)
background isDark ? #191b22 : #fff background var(--googleSearchBg)
border solid 1px isDark ? #495156 : #dadada border solid 1px var(--googleSearchBorder)
border-radius 4px 0 0 4px border-radius 4px 0 0 4px
&:hover &:hover
border-color isDark ? #777c86 : #b0b0b0 border-color var(--googleSearchHoverBorder)
> button > button
flex-shrink 0 flex-shrink 0
padding 0 16px padding 0 16px
border solid 1px isDark ? #495156 : #dadada border solid 1px var(--googleSearchBorder)
border-left none border-left none
border-radius 0 4px 4px 0 border-radius 0 4px 4px 0
&:hover &:hover
background-color isDark ? #2e3440 : #eee background-color var(--googleSearchHoverButton)
&:active &:active
box-shadow 0 2px 4px rgba(#000, 0.15) inset box-shadow 0 2px 4px rgba(#000, 0.15) inset
.mk-google[data-darkmode]
root(true)
.mk-google:not([data-darkmode])
root(false)
</style> </style>

4
src/client/app/common/views/components/index.ts
View file

@ -1,5 +1,6 @@
import Vue from 'vue'; import Vue from 'vue';
import theme from './theme.vue';
import instance from './instance.vue'; import instance from './instance.vue';
import cwButton from './cw-button.vue'; import cwButton from './cw-button.vue';
import tagCloud from './tag-cloud.vue'; import tagCloud from './tag-cloud.vue';
@ -30,7 +31,6 @@ import messagingRoom from './messaging-room.vue';
import urlPreview from './url-preview.vue'; import urlPreview from './url-preview.vue';
import twitterSetting from './twitter-setting.vue'; import twitterSetting from './twitter-setting.vue';
import fileTypeIcon from './file-type-icon.vue'; import fileTypeIcon from './file-type-icon.vue';
import Switch from './switch.vue';
import Reversi from './games/reversi/reversi.vue'; import Reversi from './games/reversi/reversi.vue';
import welcomeTimeline from './welcome-timeline.vue'; import welcomeTimeline from './welcome-timeline.vue';
import uiInput from './ui/input.vue'; import uiInput from './ui/input.vue';
@ -44,6 +44,7 @@ import uiSelect from './ui/select.vue';
import formButton from './ui/form/button.vue'; import formButton from './ui/form/button.vue';
import formRadio from './ui/form/radio.vue'; import formRadio from './ui/form/radio.vue';
Vue.component('mk-theme', theme);
Vue.component('mk-instance', instance); Vue.component('mk-instance', instance);
Vue.component('mk-cw-button', cwButton); Vue.component('mk-cw-button', cwButton);
Vue.component('mk-tag-cloud', tagCloud); Vue.component('mk-tag-cloud', tagCloud);
@ -74,7 +75,6 @@ Vue.component('mk-messaging-room', messagingRoom);
Vue.component('mk-url-preview', urlPreview); Vue.component('mk-url-preview', urlPreview);
Vue.component('mk-twitter-setting', twitterSetting); Vue.component('mk-twitter-setting', twitterSetting);
Vue.component('mk-file-type-icon', fileTypeIcon); Vue.component('mk-file-type-icon', fileTypeIcon);
Vue.component('mk-switch', Switch);
Vue.component('mk-reversi', Reversi); Vue.component('mk-reversi', Reversi);
Vue.component('mk-welcome-timeline', welcomeTimeline); Vue.component('mk-welcome-timeline', welcomeTimeline);
Vue.component('ui-input', uiInput); Vue.component('ui-input', uiInput);

12
src/client/app/common/views/components/instance.vue
View file

@ -26,9 +26,9 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) .nhasjydimbopojusarffqjyktglcuxjy
color isDark ? #fff : #5b646f color var(--text)
background isDark ? #21242f : #fff background var(--face)
text-align center text-align center
> .banner > .banner
@ -48,10 +48,4 @@ root(isDark)
display block display block
padding-bottom 16px padding-bottom 16px
.nhasjydimbopojusarffqjyktglcuxjy[data-darkmode]
root(true)
.nhasjydimbopojusarffqjyktglcuxjy:not([data-darkmode])
root(false)
</style> </style>

9
src/client/app/common/views/components/media-banner.vue
View file

@ -43,7 +43,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) .mk-media-banner
width 100% width 100%
border-radius 4px border-radius 4px
margin-top 4px margin-top 4px
@ -71,7 +71,7 @@ root(isDark)
font-size 1.6em font-size 1.6em
> .download > .download
background isDark ? #21242d : #f7f7f7 background var(--noteAttachedFile)
> .sensitive > .sensitive
background #111 background #111
@ -82,9 +82,4 @@ root(isDark)
display block display block
width 100% width 100%
.mk-media-banner[data-darkmode]
root(true)
.mk-media-banner:not([data-darkmode])
root(false)
</style> </style>

26
src/client/app/common/views/components/menu.vue
View file

@ -117,10 +117,8 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .onchrpzrvnoruiaenfcqvccjfuupzzwv
$bg-color = var(--popupBg)
root(isDark)
$bg-color = isDark ? #2c303c : #fff
$border-color = rgba(27, 31, 35, 0.15) $border-color = rgba(27, 31, 35, 0.15)
position initial position initial
@ -132,7 +130,7 @@ root(isDark)
z-index 10000 z-index 10000
width 100% width 100%
height 100% height 100%
background rgba(#000, isDark ? 0.5 : 0.1) background var(--modalBackdrop)
opacity 0 opacity 0
> .popover > .popover
@ -179,26 +177,20 @@ root(isDark)
display block display block
padding 8px 16px padding 8px 16px
width 100% width 100%
color isDark ? #d6dce2 : #111 color var(--popupFg)
&:hover &:hover
color $theme-color-foreground color var(--primaryForeground)
background $theme-color background var(--primary)
text-decoration none text-decoration none
&:active &:active
color $theme-color-foreground color var(--primaryForeground)
background darken($theme-color, 10%) background var(--primaryDarken10)
> div > div
margin 8px 0 margin 8px 0
height 1px height 1px
background isDark ? #1c2023 : #eee background var(--faceDivider)
.onchrpzrvnoruiaenfcqvccjfuupzzwv[data-darkmode]
root(true)
.onchrpzrvnoruiaenfcqvccjfuupzzwv:not([data-darkmode])
root(false)
</style> </style>

22
src/client/app/common/views/components/messaging-room.form.vue
View file

@ -195,9 +195,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .mk-messaging-form
root(isDark)
> textarea > textarea
cursor auto cursor auto
display block display block
@ -209,10 +207,10 @@ root(isDark)
padding 8px padding 8px
resize none resize none
font-size 1em font-size 1em
color isDark ? #fff : #000 color var(--inputText)
outline none outline none
border none border none
border-top solid 1px isDark ? #4b5056 : #eee border-top solid 1px var(--faceDivider)
border-radius 0 border-radius 0
box-shadow none box-shadow none
background transparent background transparent
@ -234,10 +232,10 @@ root(isDark)
transition color 0.1s ease transition color 0.1s ease
&:hover &:hover
color $theme-color color var(--primary)
&:active &:active
color darken($theme-color, 10%) color var(--primaryDarken10)
transition color 0s ease transition color 0s ease
.files .files
@ -293,19 +291,13 @@ root(isDark)
transition color 0.1s ease transition color 0.1s ease
&:hover &:hover
color $theme-color color var(--primary)
&:active &:active
color darken($theme-color, 10%) color var(--primaryDarken10)
transition color 0s ease transition color 0s ease
input[type=file] input[type=file]
display none display none
.mk-messaging-form[data-darkmode]
root(true)
.mk-messaging-form:not([data-darkmode])
root(false)
</style> </style>

22
src/client/app/common/views/components/messaging-room.message.vue
View file

@ -59,10 +59,8 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .message
$me-balloon-color = var(--primary)
root(isDark)
$me-balloon-color = $theme-color
padding 10px 12px 10px 12px padding 10px 12px 10px 12px
background-color transparent background-color transparent
@ -179,7 +177,7 @@ root(isDark)
display block display block
margin 2px 0 0 0 margin 2px 0 0 0
font-size 10px font-size 10px
color isDark ? rgba(#fff, 0.4) : rgba(#000, 0.4) color var(--messagingRoomMessageInfo)
> [data-fa] > [data-fa]
margin-left 4px margin-left 4px
@ -192,7 +190,7 @@ root(isDark)
padding-left 66px padding-left 66px
> .balloon > .balloon
$color = isDark ? #2d3338 : #eee $color = var(--messagingRoomMessageBg)
float left float left
background $color background $color
@ -208,8 +206,7 @@ root(isDark)
> .content > .content
> .text > .text
if isDark color var(--messagingRoomMessageFg)
color #fff
> footer > footer
text-align left text-align left
@ -250,18 +247,9 @@ root(isDark)
> .read > .read
user-select none user-select none
margin 0 4px 0 0
color isDark ? rgba(#fff, 0.5) : rgba(#000, 0.5)
font-size 11px
&[data-is-deleted] &[data-is-deleted]
> .balloon > .balloon
opacity 0.5 opacity 0.5
.message[data-darkmode]
root(true)
.message:not([data-darkmode])
root(false)
</style> </style>

46
src/client/app/common/views/components/messaging-room.vue
View file

@ -262,14 +262,12 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .mk-messaging-room
root(isDark)
display flex display flex
flex 1 flex 1
flex-direction column flex-direction column
height 100% height 100%
background isDark ? #191b22 : #fff background var(--messagingRoomBg)
> .body > .body
width 100% width 100%
@ -277,24 +275,15 @@ root(isDark)
margin 0 auto margin 0 auto
flex 1 flex 1
> .init > .init,
width 100%
margin 0
padding 16px 8px 8px 8px
text-align center
font-size 0.8em
color rgba(isDark ? #fff : #000, 0.4)
[data-fa]
margin-right 4px
> .empty > .empty
width 100% width 100%
margin 0 margin 0
padding 16px 8px 8px 8px padding 16px 8px 8px 8px
text-align center text-align center
font-size 0.8em font-size 0.8em
color rgba(isDark ? #fff : #000, 0.4) color var(--messagingRoomInfo)
opacity 0.5
[data-fa] [data-fa]
margin-right 4px margin-right 4px
@ -305,7 +294,8 @@ root(isDark)
padding 16px padding 16px
text-align center text-align center
font-size 0.8em font-size 0.8em
color rgba(isDark ? #fff : #000, 0.4) color var(--messagingRoomInfo)
opacity 0.5
[data-fa] [data-fa]
margin-right 4px margin-right 4px
@ -349,7 +339,7 @@ root(isDark)
left 0 left 0
right 0 right 0
margin 0 auto margin 0 auto
background rgba(isDark ? #fff : #000, 0.1) background var(--messagingRoomDateDividerLine)
> span > span
display inline-block display inline-block
@ -357,8 +347,8 @@ root(isDark)
padding 0 16px padding 0 16px
//font-weight bold //font-weight bold
line-height 32px line-height 32px
color rgba(isDark ? #fff : #000, 0.3) color var(--messagingRoomDateDividerText)
background isDark ? #191b22 : #fff background var(--messagingRoomBg)
> footer > footer
position -webkit-sticky position -webkit-sticky
@ -369,7 +359,7 @@ root(isDark)
max-width 600px max-width 600px
margin 0 auto margin 0 auto
padding 0 padding 0
background rgba(isDark ? #282c37 : #fff, 0.95) //background rgba(var(--face), 0.95)
background-clip content-box background-clip content-box
> .new-message > .new-message
@ -386,15 +376,15 @@ root(isDark)
cursor pointer cursor pointer
line-height 32px line-height 32px
font-size 12px font-size 12px
color $theme-color-foreground color var(--primaryForeground)
background $theme-color background var(--primary)
border-radius 16px border-radius 16px
&:hover &:hover
background lighten($theme-color, 10%) background var(--primaryLighten10)
&:active &:active
background darken($theme-color, 10%) background var(--primaryDarken10)
> [data-fa] > [data-fa]
position absolute position absolute
@ -410,10 +400,4 @@ root(isDark)
transition opacity 0.5s transition opacity 0.5s
opacity 0 opacity 0
.mk-messaging-room[data-darkmode]
root(true)
.mk-messaging-room:not([data-darkmode])
root(false)
</style> </style>

60
src/client/app/common/views/components/messaging.vue
View file

@ -167,9 +167,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .mk-messaging
root(isDark)
&[data-compact] &[data-compact]
font-size 0.8em font-size 0.8em
@ -204,12 +202,10 @@ root(isDark)
left 0 left 0
z-index 1 z-index 1
width 100% width 100%
background #fff
box-shadow 0 0px 2px rgba(#000, 0.2) box-shadow 0 0px 2px rgba(#000, 0.2)
> .form > .form
padding 8px background rgba(0, 0, 0, 0.02)
background isDark ? #282c37 : #f7f7f7
> label > label
display block display block
@ -229,32 +225,22 @@ root(isDark)
bottom 0 bottom 0
left 0 left 0
width 1em width 1em
line-height 56px line-height 48px
margin auto margin auto
color #555 color #555
> input > input
margin 0 margin 0
padding 0 0 0 32px padding 0 0 0 42px
width 100% width 100%
font-size 1em font-size 1em
line-height 38px line-height 48px
color #000 color var(--faceText)
outline none outline none
background isDark ? #191b22 : #fff background transparent
border solid 1px isDark ? #495156 : #eee border none
border-radius 5px border-radius 5px
box-shadow none box-shadow none
transition color 0.5s ease, border 0.5s ease
&:hover
border solid 1px isDark ? #b0b0b0 : #ddd
transition border 0.2s ease
&:focus
color darken($theme-color, 20%)
border solid 1px $theme-color
transition color 0, border 0
> .result > .result
display block display block
@ -287,7 +273,7 @@ root(isDark)
&:hover &:hover
&:focus &:focus
color #fff color #fff
background $theme-color background var(--primary)
.name .name
color #fff color #fff
@ -297,7 +283,7 @@ root(isDark)
&:active &:active
color #fff color #fff
background darken($theme-color, 10%) background var(--primaryDarken10)
.name .name
color #fff color #fff
@ -329,21 +315,21 @@ root(isDark)
> a > a
display block display block
text-decoration none text-decoration none
background isDark ? #282c37 : #fff background var(--face)
border-bottom solid 1px isDark ? #1c2023 : #eee border-bottom solid 1px var(--faceDivider)
* *
pointer-events none pointer-events none
user-select none user-select none
&:hover &:hover
background isDark ? #1e2129 : #fafafa box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
> .avatar .avatar
filter saturate(200%) filter saturate(200%)
&:active &:active
background isDark ? #14161b : #eee box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
&[data-is-read] &[data-is-read]
&[data-is-me] &[data-is-me]
@ -383,17 +369,17 @@ root(isDark)
overflow hidden overflow hidden
text-overflow ellipsis text-overflow ellipsis
font-size 1em font-size 1em
color isDark ? #fff : rgba(#000, 0.9) color var(--noteHeaderName)
font-weight bold font-weight bold
transition all 0.1s ease transition all 0.1s ease
> .username > .username
margin 0 8px margin 0 8px
color isDark ? #606984 : rgba(#000, 0.5) color var(--noteHeaderAcct)
> .mk-time > .mk-time
margin 0 0 0 auto margin 0 0 0 auto
color isDark ? #606984 : rgba(#000, 0.5) color var(--noteHeaderInfo)
font-size 80% font-size 80%
> .avatar > .avatar
@ -413,10 +399,10 @@ root(isDark)
overflow hidden overflow hidden
overflow-wrap break-word overflow-wrap break-word
font-size 1.1em font-size 1.1em
color isDark ? #fff : rgba(#000, 0.8) color var(--faceText)
.me .me
color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.4) opacity 0.7
> .image > .image
display block display block
@ -461,10 +447,4 @@ root(isDark)
> .avatar > .avatar
margin 0 12px 0 0 margin 0 12px 0 0
.mk-messaging[data-darkmode]
root(true)
.mk-messaging:not([data-darkmode])
root(false)
</style> </style>

26
src/client/app/common/views/components/note-header.vue
View file

@ -42,9 +42,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .bvonvjxbwzaiskogyhbwgyxvcgserpmu
root(isDark)
display flex display flex
align-items baseline align-items baseline
white-space nowrap white-space nowrap
@ -61,7 +59,7 @@ root(isDark)
margin 0 .5em 0 0 margin 0 .5em 0 0
padding 0 padding 0
overflow hidden overflow hidden
color isDark ? #fff : #627079 color var(--noteHeaderName)
font-size 1em font-size 1em
font-weight bold font-weight bold
text-decoration none text-decoration none
@ -82,19 +80,19 @@ root(isDark)
margin 0 .5em 0 0 margin 0 .5em 0 0
padding 1px 6px padding 1px 6px
font-size 80% font-size 80%
color isDark ? #758188 : #aaa color var(--noteHeaderBadgeFg)
border solid 1px isDark ? #57616f : #ddd background var(--noteHeaderBadgeBg)
border-radius 3px border-radius 3px
&.is-admin &.is-admin
border-color isDark ? #d42c41 : #f56a7b background var(--noteHeaderAdminBg)
color isDark ? #d42c41 : #f56a7b color var(--noteHeaderAdminFg)
> .username > .username
margin 0 .5em 0 0 margin 0 .5em 0 0
overflow hidden overflow hidden
text-overflow ellipsis text-overflow ellipsis
color isDark ? #606984 : #ccc color var(--noteHeaderAcct)
flex-shrink 2147483647 flex-shrink 2147483647
> .info > .info
@ -102,7 +100,7 @@ root(isDark)
font-size 0.9em font-size 0.9em
> * > *
color isDark ? #606984 : #c0c0c0 color var(--noteHeaderInfo)
> .mobile > .mobile
margin-right 8px margin-right 8px
@ -110,15 +108,9 @@ root(isDark)
> .app > .app
margin-right 8px margin-right 8px
padding-right 8px padding-right 8px
border-right solid 1px isDark ? #1c2023 : #eaeaea border-right solid 1px var(--faceDivider)
> .visibility > .visibility
margin-left 8px margin-left 8px
.bvonvjxbwzaiskogyhbwgyxvcgserpmu[data-darkmode]
root(true)
.bvonvjxbwzaiskogyhbwgyxvcgserpmu:not([data-darkmode])
root(false)
</style> </style>

34
src/client/app/common/views/components/poll-editor.vue
View file

@ -68,9 +68,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .mk-poll-editor
root(isDark)
padding 8px padding 8px
> .caution > .caution
@ -103,49 +101,43 @@ root(isDark)
padding 6px 8px padding 6px 8px
width 300px width 300px
font-size 14px font-size 14px
color isDark ? #fff : #000 color var(--inputText)
background isDark ? #191b22 : #fff background var(--pollEditorInputBg)
border solid 1px rgba($theme-color, 0.1) border solid 1px var(--primaryAlpha01)
border-radius 4px border-radius 4px
&:hover &:hover
border-color rgba($theme-color, 0.2) border-color var(--primaryAlpha02)
&:focus &:focus
border-color rgba($theme-color, 0.5) border-color var(--primaryAlpha05)
> button > button
padding 4px 8px padding 4px 8px
color rgba($theme-color, 0.4) color var(--primaryAlpha04)
&:hover &:hover
color rgba($theme-color, 0.6) color var(--primaryAlpha06)
&:active &:active
color darken($theme-color, 30%) color var(--primaryDarken30)
> .add > .add
margin 8px 0 0 0 margin 8px 0 0 0
vertical-align top vertical-align top
color $theme-color color var(--primary)
> .destroy > .destroy
position absolute position absolute
top 0 top 0
right 0 right 0
padding 4px 8px padding 4px 8px
color rgba($theme-color, 0.4) color var(--primaryAlpha04)
&:hover &:hover
color rgba($theme-color, 0.6) color var(--primaryAlpha06)
&:active &:active
color darken($theme-color, 30%) color var(--primaryDarken30)
.mk-poll-editor[data-darkmode]
root(true)
.mk-poll-editor:not([data-darkmode])
root(false)
</style> </style>

19
src/client/app/common/views/components/poll.vue
View file

@ -67,10 +67,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .mk-poll
root(isDark)
> ul > ul
display block display block
margin 0 margin 0
@ -82,8 +79,8 @@ root(isDark)
margin 4px 0 margin 4px 0
padding 4px 8px padding 4px 8px
width 100% width 100%
color isDark ? #fff : #000 color var(--pollChoiceText)
border solid 1px isDark ? #5e636f : #eee border solid 1px var(--pollChoiceBorder)
border-radius 4px border-radius 4px
overflow hidden overflow hidden
cursor pointer cursor pointer
@ -99,7 +96,7 @@ root(isDark)
top 0 top 0
left 0 left 0
height 100% height 100%
background $theme-color background var(--primary)
transition width 1s ease transition width 1s ease
> span > span
@ -110,7 +107,7 @@ root(isDark)
margin-left 4px margin-left 4px
> p > p
color isDark ? #a3aebf : #000 color var(--text)
a a
color inherit color inherit
@ -125,10 +122,4 @@ root(isDark)
&:active &:active
background transparent background transparent
.mk-poll[data-darkmode]
root(true)
.mk-poll:not([data-darkmode])
root(false)
</style> </style>

24
src/client/app/common/views/components/reaction-picker.vue
View file

@ -210,11 +210,9 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
$border-color = rgba(27, 31, 35, 0.15) $border-color = rgba(27, 31, 35, 0.15)
root(isDark) .mk-reaction-picker
position initial position initial
> .backdrop > .backdrop
@ -224,11 +222,11 @@ root(isDark)
z-index 10000 z-index 10000
width 100% width 100%
height 100% height 100%
background isDark ? rgba(#000, 0.4) : rgba(#000, 0.1) background var(--modalBackdrop)
opacity 0 opacity 0
> .popover > .popover
$bgcolor = isDark ? #2c303c : #fff $bgcolor = var(--popupBg)
position absolute position absolute
z-index 10001 z-index 10001
background $bgcolor background $bgcolor
@ -281,8 +279,8 @@ root(isDark)
margin 0 margin 0
padding 8px 10px padding 8px 10px
font-size 14px font-size 14px
color isDark ? #d6dce2 : #586069 color var(--popupFg)
border-bottom solid 1px isDark ? #1c2023 : #e1e4e8 border-bottom solid 1px var(--faceDivider)
> div > div
padding 4px padding 4px
@ -301,7 +299,7 @@ root(isDark)
right 0 right 0
bottom 0 bottom 0
left 0 left 0
border 2px solid rgba($theme-color, 0.3) border 2px solid var(--primaryAlpha03)
border-radius 4px border-radius 4px
> button > button
@ -312,16 +310,10 @@ root(isDark)
border-radius 2px border-radius 2px
&:hover &:hover
background isDark ? #252731 : #eee background var(--reactionPickerButtonHoverBg)
&:active &:active
background $theme-color background var(--primary)
box-shadow inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15) box-shadow inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15)
.mk-reaction-picker[data-darkmode]
root(true)
.mk-reaction-picker:not([data-darkmode])
root(false)
</style> </style>

15
src/client/app/common/views/components/reactions-viewer.vue
View file

@ -39,10 +39,9 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) .mk-reactions-viewer
$borderColor = isDark ? #5e6673 : #eee border-top dashed 1px var(--reactionViewerBorder)
border-top dashed 1px $borderColor border-bottom dashed 1px var(--reactionViewerBorder)
border-bottom dashed 1px $borderColor
margin 4px 0 margin 4px 0
&:empty &:empty
@ -60,12 +59,6 @@ root(isDark)
> span > span
margin-left 4px margin-left 4px
font-size 1.2em font-size 1.2em
color isDark ? #d1d5dc : #444 color var(--text)
.mk-reactions-viewer[data-darkmode]
root(true)
.mk-reactions-viewer:not([data-darkmode])
root(false)
</style> </style>

2
src/client/app/common/views/components/signin.vue
View file

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

2
src/client/app/common/views/components/signup.vue
View file

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

199
src/client/app/common/views/components/switch.vue
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>

8
src/client/app/common/views/components/tag-cloud.vue
View file

@ -63,7 +63,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) .jtivnzhfwquxpsfidertopbmwmchmnmo
height 100% height 100%
width 100% width 100%
@ -81,10 +81,4 @@ root(isDark)
height 100% height 100%
width 100% width 100%
.jtivnzhfwquxpsfidertopbmwmchmnmo[data-darkmode]
root(true)
.jtivnzhfwquxpsfidertopbmwmchmnmo:not([data-darkmode])
root(false)
</style> </style>

179
src/client/app/common/views/components/theme.vue Normal file
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>

15
src/client/app/common/views/components/trends.vue
View file

@ -49,13 +49,14 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) .csqvmxybqbycalfhkxvyfrgbrdalkaoc
> .fetching > .fetching
> .empty > .empty
margin 0 margin 0
padding 16px padding 16px
text-align center text-align center
color #aaa color var(--text)
opacity 0.7
> [data-fa] > [data-fa]
margin-right 4px margin-right 4px
@ -70,13 +71,13 @@ root(isDark)
padding 14px 16px padding 14px 16px
&:not(:last-child) &:not(:last-child)
border-bottom solid 1px isDark ? #393f4f : #eee border-bottom solid 1px var(--faceDivider)
> .tag > .tag
flex 1 flex 1
overflow hidden overflow hidden
font-size 14px font-size 14px
color isDark ? #9baec8 : #65727b color var(--text)
> a > a
display block display block
@ -94,10 +95,4 @@ root(isDark)
> .chart > .chart
height 30px height 30px
.csqvmxybqbycalfhkxvyfrgbrdalkaoc[data-darkmode]
root(true)
.csqvmxybqbycalfhkxvyfrgbrdalkaoc:not([data-darkmode])
root(false)
</style> </style>

94
src/client/app/common/views/components/ui/button.vue
View file

@ -1,9 +1,7 @@
<template> <template>
<div class="ui-button" :class="[styl]"> <button class="dmtdnykelhudezerjlfpbhgovrgnqqgr" :class="[styl, { inline, primary }]" :type="type" @click="$emit('click')">
<button :type="type" @click="$emit('click')">
<slot></slot> <slot></slot>
</button> </button>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -13,70 +11,90 @@ export default Vue.extend({
type: { type: {
type: String, type: String,
required: false required: false
},
primary: {
type: Boolean,
required: false,
default: false
},
inline: {
type: Boolean,
required: false,
default: false
} }
}, },
data() { data() {
return { return {
styl: 'fill' styl: 'fill'
}; };
},
inject: {
isCardChild: { default: false }
},
created() {
if (this.isCardChild) {
this.styl = 'line';
}
} }
}); });
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .dmtdnykelhudezerjlfpbhgovrgnqqgr
root(isDark, fill)
> button
display block display block
width 100% width 100%
min-height 40px
margin 0 margin 0
padding 0 padding 0
font-weight bold font-weight normal
font-size 16px font-size 16px
line-height 44px
border none border none
border-radius 6px border-radius 6px
outline none outline none
box-shadow none box-shadow none
if fill &:focus
color $theme-color-foreground &:after
background $theme-color content ""
pointer-events none
position absolute
top -5px
right -5px
bottom -5px
left -5px
border 2px solid var(--primaryAlpha03)
border-radius 10px
&:not(.inline) + .dmtdnykelhudezerjlfpbhgovrgnqqgr
margin-top 16px
&.inline
display inline-block
width auto
&.primary
font-weight bold
&.fill
color var(--text)
background var(--buttonBg)
&:hover &:hover
background lighten($theme-color, 5%) background var(--buttonHoverBg)
&:active &:active
background darken($theme-color, 5%) background var(--buttonActiveBg)
else
color $theme-color &.primary
color var(--primaryForeground)
background var(--primary)
&:hover
background var(--primaryLighten5)
&:active
background var(--primaryDarken5)
&:not(.fill)
color var(--primary)
background none background none
&:hover &:hover
color darken($theme-color, 5%) color var(--primaryDarken5)
&:active &:active
background rgba($theme-color, 0.3) background var(--primaryAlpha03)
.ui-button[data-darkmode]
&.fill
root(true, true)
&:not(.fill)
root(true, false)
.ui-button:not([data-darkmode])
&.fill
root(false, true)
&:not(.fill)
root(false, false)
</style> </style>

21
src/client/app/common/views/components/ui/card.vue
View file

@ -20,26 +20,24 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .ui-card
root(isDark)
margin 16px margin 16px
color isDark ? #fff : #000 color var(--faceText)
background isDark ? #282C37 : #fff background var(--face)
box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12) box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
> header > header
padding 16px padding 16px
font-weight bold font-weight bold
font-size 20px font-size 20px
color isDark ? #fff : #444 color var(--faceText)
@media (min-width 500px) @media (min-width 500px)
padding 24px 32px padding 24px 32px
> section > section
padding 20px 16px padding 20px 16px
border-top solid 1px isDark ? rgba(#000, 0.3) : rgba(#000, 0.1) border-top solid 1px var(--faceDivider)
@media (min-width 500px) @media (min-width 500px)
padding 32px padding 32px
@ -50,12 +48,5 @@ root(isDark)
> header > header
margin-bottom 16px margin-bottom 16px
font-weight bold font-weight bold
color isDark ? #fff : #444 color var(--faceText)
.ui-card[data-darkmode]
root(true)
.ui-card:not([data-darkmode])
root(false)
</style> </style>

2
src/client/app/common/views/components/ui/form.vue
View file

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

40
src/client/app/common/views/components/ui/form/button.vue
View file

@ -25,9 +25,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .nvemkhtwcnnpkdrwfcbzuwhfulejhmzg
root(isDark)
display inline-block display inline-block
& + .nvemkhtwcnnpkdrwfcbzuwhfulejhmzg & + .nvemkhtwcnnpkdrwfcbzuwhfulejhmzg
@ -38,11 +36,11 @@ root(isDark)
margin 0 margin 0
padding 12px 20px padding 12px 20px
font-size 14px font-size 14px
border 1px solid isDark ? #6d727d : #dcdfe6 border 1px solid var(--formButtonBorder)
border-radius 4px border-radius 4px
outline none outline none
box-shadow none box-shadow none
color isDark ? #fff : #606266 color var(--text)
transition 0.1s transition 0.1s
* *
@ -50,40 +48,34 @@ root(isDark)
&:hover &:hover
&:focus &:focus
color $theme-color color var(--primary)
background rgba($theme-color, isDark ? 0.2 : 0.12) background var(--formButtonHoverBg)
border-color rgba($theme-color, isDark ? 0.5 : 0.3) border-color var(--formButtonHoverBorder)
&:active &:active
color darken($theme-color, 20%) color var(--primaryDarken20)
background rgba($theme-color, 0.12) background var(--formButtonActiveBg)
border-color $theme-color border-color var(--primary)
transition all 0s transition all 0s
&.primary &.primary
> button > button
border 1px solid $theme-color border 1px solid var(--primary)
background $theme-color background var(--primary)
color $theme-color-foreground color var(--primaryForeground)
&:hover &:hover
&:focus &:focus
background lighten($theme-color, 20%) background var(--primaryLighten20)
border-color lighten($theme-color, 20%) border-color var(--primaryLighten20)
&:active &:active
background darken($theme-color, 20%) background var(--primaryDarken20)
border-color darken($theme-color, 20%) border-color var(--primaryDarken20)
transition all 0s transition all 0s
&.round &.round
> button > button
border-radius 64px border-radius 64px
.nvemkhtwcnnpkdrwfcbzuwhfulejhmzg[data-darkmode]
root(true)
.nvemkhtwcnnpkdrwfcbzuwhfulejhmzg:not([data-darkmode])
root(false)
</style> </style>

20
src/client/app/common/views/components/ui/form/radio.vue
View file

@ -49,9 +49,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .uywduthvrdnlpsvsjkqigicixgyfctto
root(isDark)
display inline-flex display inline-flex
margin 0 16px 0 0 margin 0 16px 0 0
cursor pointer cursor pointer
@ -62,7 +60,7 @@ root(isDark)
&:hover &:hover
> .button > .button
border solid 2px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54) border solid 2px var(--inputLabel)
&.disabled &.disabled
opacity 0.6 opacity 0.6
@ -70,15 +68,15 @@ root(isDark)
&.checked &.checked
> .button > .button
border-color $theme-color border-color var(--primary)
&:after &:after
background-color $theme-color background-color var(--primary)
transform scale(1) transform scale(1)
opacity 1 opacity 1
> .label > .label
color $theme-color color var(--primary)
> input > input
position absolute position absolute
@ -93,7 +91,7 @@ root(isDark)
width 20px width 20px
height 20px height 20px
background none background none
border solid 2px isDark ? rgba(#fff, 0.6) : rgba(#000, 0.4) border solid 2px var(--radioBorder)
border-radius 100% border-radius 100%
transition inherit transition inherit
@ -117,10 +115,4 @@ root(isDark)
line-height 20px line-height 20px
cursor pointer cursor pointer
.uywduthvrdnlpsvsjkqigicixgyfctto[data-darkmode]
root(true)
.uywduthvrdnlpsvsjkqigicixgyfctto:not([data-darkmode])
root(false)
</style> </style>

30
src/client/app/common/views/components/ui/input.vue
View file

@ -155,9 +155,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' root(fill)
root(isDark, fill)
margin 32px 0 margin 32px 0
> .icon > .icon
@ -167,7 +165,7 @@ root(isDark, fill)
width 24px width 24px
text-align center text-align center
line-height 32px line-height 32px
color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54) color var(--inputLabel)
&:not(:empty) + .input &:not(:empty) + .input
margin-left 28px margin-left 28px
@ -183,7 +181,7 @@ root(isDark, fill)
left 0 left 0
right 0 right 0
height 1px height 1px
background isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42) background var(--inputBorder)
&:after &:after
content '' content ''
@ -193,7 +191,7 @@ root(isDark, fill)
left 0 left 0
right 0 right 0
height 2px height 2px
background $theme-color background var(--primary)
opacity 0 opacity 0
transform scaleX(0.12) transform scaleX(0.12)
transition border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) transition border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)
@ -242,7 +240,7 @@ root(isDark, fill)
transition-duration 0.3s transition-duration 0.3s
font-size 16px font-size 16px
line-height 32px line-height 32px
color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54) color var(--inputLabel)
pointer-events none pointer-events none
//will-change transform //will-change transform
transform-origin top left transform-origin top left
@ -257,7 +255,7 @@ root(isDark, fill)
font-weight fill ? bold : normal font-weight fill ? bold : normal
font-size 16px font-size 16px
line-height 32px line-height 32px
color isDark ? #fff : #000 color var(--inputText)
background transparent background transparent
border none border none
border-radius 0 border-radius 0
@ -280,7 +278,7 @@ root(isDark, fill)
top 0 top 0
font-size 16px font-size 16px
line-height fill ? 44px : 32px line-height fill ? 44px : 32px
color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54) color var(--inputLabel)
pointer-events none pointer-events none
&:empty &:empty
@ -325,7 +323,7 @@ root(isDark, fill)
transform scaleX(1) transform scaleX(1)
> .label > .label
color $theme-color color var(--primary)
&.focused &.focused
&.filled &.filled
@ -335,16 +333,10 @@ root(isDark, fill)
left 0 !important left 0 !important
transform scale(0.75) transform scale(0.75)
.ui-input[data-darkmode] .ui-input
&.fill &.fill
root(true, true) root(true)
&:not(.fill) &:not(.fill)
root(true, false) root(false)
.ui-input:not([data-darkmode])
&.fill
root(false, true)
&:not(.fill)
root(false, false)
</style> </style>

16
src/client/app/common/views/components/ui/radio.vue
View file

@ -51,9 +51,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .ui-radio
root(isDark)
display inline-block display inline-block
margin 0 32px 0 0 margin 0 32px 0 0
cursor pointer cursor pointer
@ -68,10 +66,10 @@ root(isDark)
&.checked &.checked
> .button > .button
border-color $theme-color border-color var(--primary)
&:after &:after
background-color $theme-color background-color var(--primary)
transform scale(1) transform scale(1)
opacity 1 opacity 1
@ -87,7 +85,7 @@ root(isDark)
width 20px width 20px
height 20px height 20px
background none background none
border solid 2px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54) border solid 2px var(--inputLabel)
border-radius 100% border-radius 100%
transition inherit transition inherit
@ -111,10 +109,4 @@ root(isDark)
line-height 20px line-height 20px
cursor pointer cursor pointer
.ui-radio[data-darkmode]
root(true)
.ui-radio:not([data-darkmode])
root(false)
</style> </style>

24
src/client/app/common/views/components/ui/select.vue
View file

@ -70,9 +70,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' root(fill)
root(isDark, fill)
margin 32px 0 margin 32px 0
> .icon > .icon
@ -103,7 +101,7 @@ root(isDark, fill)
left 0 left 0
right 0 right 0
height 1px height 1px
background isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42) background var(--inputBorder)
&:after &:after
content '' content ''
@ -113,7 +111,7 @@ root(isDark, fill)
left 0 left 0
right 0 right 0
height 2px height 2px
background $theme-color background var(--primary)
opacity 0 opacity 0
transform scaleX(0.12) transform scaleX(0.12)
transition border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) transition border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)
@ -143,7 +141,7 @@ root(isDark, fill)
font-weight fill ? bold : normal font-weight fill ? bold : normal
font-size 16px font-size 16px
height 32px height 32px
color isDark ? #fff : #000 color var(--inputText)
background transparent background transparent
border none border none
border-radius 0 border-radius 0
@ -190,7 +188,7 @@ root(isDark, fill)
transform scaleX(1) transform scaleX(1)
> .label > .label
color $theme-color color var(--primary)
&.focused &.focused
&.filled &.filled
@ -200,16 +198,10 @@ root(isDark, fill)
left 0 !important left 0 !important
transform scale(0.75) transform scale(0.75)
.ui-select[data-darkmode] .ui-select
&.fill &.fill
root(true, true) root(true)
&:not(.fill) &:not(.fill)
root(true, false) root(false)
.ui-select:not([data-darkmode])
&.fill
root(false, true)
&:not(.fill)
root(false, false)
</style> </style>

25
src/client/app/common/views/components/ui/switch.vue
View file

@ -19,7 +19,7 @@
<span class="label"> <span class="label">
<span :aria-hidden="!checked"><slot></slot></span> <span :aria-hidden="!checked"><slot></slot></span>
<p :aria-hidden="!checked"> <p :aria-hidden="!checked">
<slot name="text"></slot> <slot name="desc"></slot>
</p> </p>
</span> </span>
</div> </div>
@ -56,9 +56,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .ui-switch
root(isDark)
display flex display flex
margin 32px 0 margin 32px 0
cursor pointer cursor pointer
@ -79,11 +77,11 @@ root(isDark)
&.checked &.checked
> .button > .button
background-color rgba($theme-color, 0.4) background-color var(--primaryAlpha04)
border-color rgba($theme-color, 0.4) border-color var(--primaryAlpha04)
> * > *
background-color $theme-color background-color var(--primary)
transform translateX(14px) transform translateX(14px)
> input > input
@ -99,7 +97,7 @@ root(isDark)
margin 3px 0 0 0 margin 3px 0 0 0
width 34px width 34px
height 14px height 14px
background isDark ? rgba(#fff, 0.15) : rgba(#000, 0.25) background var(--switchTrack)
outline none outline none
border-radius 14px border-radius 14px
transition inherit transition inherit
@ -125,18 +123,11 @@ root(isDark)
> span > span
display block display block
line-height 20px line-height 20px
color isDark ? #c4ccd2 : rgba(#000, 0.75) color currentColor
transition inherit transition inherit
> p > p
margin 0 margin 0
//font-size 90% opacity 0.7
color isDark ? #78858e : #9daab3
.ui-switch[data-darkmode]
root(true)
.ui-switch:not([data-darkmode])
root(false)
</style> </style>

28
src/client/app/common/views/components/ui/textarea.vue
View file

@ -63,9 +63,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' root(fill)
root(isDark, fill)
margin 42px 0 32px 0 margin 42px 0 32px 0
> .input > .input
@ -84,7 +82,7 @@ root(isDark, fill)
left 0 left 0
right 0 right 0
background none background none
border solid 1px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42) border solid 1px var(--inputBorder)
border-radius 3px border-radius 3px
pointer-events none pointer-events none
@ -97,7 +95,7 @@ root(isDark, fill)
left 0 left 0
right 0 right 0
background none background none
border solid 2px $theme-color border solid 2px var(--primary)
border-radius 3px border-radius 3px
opacity 0 opacity 0
transition opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) transition opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)
@ -112,7 +110,7 @@ root(isDark, fill)
transition-duration 0.3s transition-duration 0.3s
font-size 16px font-size 16px
line-height 32px line-height 32px
color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54) color var(--inputLabel)
pointer-events none pointer-events none
//will-change transform //will-change transform
transform-origin top left transform-origin top left
@ -126,7 +124,7 @@ root(isDark, fill)
font inherit font inherit
font-weight fill ? bold : normal font-weight fill ? bold : normal
font-size 16px font-size 16px
color isDark ? #fff : #000 color var(--inputText)
background transparent background transparent
border none border none
border-radius 0 border-radius 0
@ -149,7 +147,7 @@ root(isDark, fill)
opacity 1 opacity 1
> .label > .label
color $theme-color color var(--primary)
&.focused &.focused
&.filled &.filled
@ -159,16 +157,10 @@ root(isDark, fill)
left 0 !important left 0 !important
transform scale(0.75) transform scale(0.75)
.ui-textarea[data-darkmode] .ui-textarea.fill
&.fill root(true)
root(true, true)
&:not(.fill)
root(true, false)
.ui-textarea:not([data-darkmode]) .ui-textarea:not(.fill)
&.fill root(false)
root(false, true)
&:not(.fill)
root(false, false)
</style> </style>

30
src/client/app/common/views/components/uploader.vue
View file

@ -81,7 +81,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
.mk-uploader .mk-uploader
overflow auto overflow auto
@ -100,7 +100,7 @@ export default Vue.extend({
margin 8px 0 0 0 margin 8px 0 0 0
padding 0 padding 0
height 36px height 36px
box-shadow 0 -1px 0 rgba($theme-color, 0.1) box-shadow 0 -1px 0 var(--primaryAlpha01)
border-top solid 8px transparent border-top solid 8px transparent
&:first-child &:first-child
@ -127,7 +127,7 @@ export default Vue.extend({
padding 0 padding 0
max-width 256px max-width 256px
font-size 0.8em font-size 0.8em
color rgba($theme-color, 0.7) color var(--primaryAlpha07)
white-space nowrap white-space nowrap
text-overflow ellipsis text-overflow ellipsis
overflow hidden overflow hidden
@ -145,17 +145,17 @@ export default Vue.extend({
font-size 0.8em font-size 0.8em
> .initing > .initing
color rgba($theme-color, 0.5) color var(--primaryAlpha05)
> .kb > .kb
color rgba($theme-color, 0.5) color var(--primaryAlpha05)
> .percentage > .percentage
display inline-block display inline-block
width 48px width 48px
text-align right text-align right
color rgba($theme-color, 0.7) color var(--primaryAlpha07)
&:after &:after
content '%' content '%'
@ -174,10 +174,10 @@ export default Vue.extend({
overflow hidden overflow hidden
&::-webkit-progress-value &::-webkit-progress-value
background $theme-color background var(--primary)
&::-webkit-progress-bar &::-webkit-progress-bar
background rgba($theme-color, 0.1) background var(--primaryAlpha01)
> .progress > .progress
display block display block
@ -191,13 +191,13 @@ export default Vue.extend({
border-radius 4px border-radius 4px
background linear-gradient( background linear-gradient(
45deg, 45deg,
lighten($theme-color, 30%) 25%, var(--primaryLighten30) 25%,
$theme-color 25%, var(--primary) 25%,
$theme-color 50%, var(--primary) 50%,
lighten($theme-color, 30%) 50%, var(--primaryLighten30) 50%,
lighten($theme-color, 30%) 75%, var(--primaryLighten30) 75%,
$theme-color 75%, var(--primary) 75%,
$theme-color var(--primary)
) )
background-size 32px 32px background-size 32px 32px
animation bg 1.5s linear infinite animation bg 1.5s linear infinite

18
src/client/app/common/views/components/url-preview.vue
View file

@ -200,17 +200,17 @@ export default Vue.extend({
top 0 top 0
width 100% width 100%
root(isDark) .mk-url-preview
> a > a
display block display block
font-size 14px font-size 14px
border solid 1px isDark ? #191b1f : #eee border solid 1px var(--urlPreviewBorder)
border-radius 4px border-radius 4px
overflow hidden overflow hidden
&:hover &:hover
text-decoration none text-decoration none
border-color isDark ? #4f5561 : #ddd border-color var(--urlPreviewBorderHover)
> article > header > h1 > article > header > h1
text-decoration underline text-decoration underline
@ -235,11 +235,11 @@ root(isDark)
> h1 > h1
margin 0 margin 0
font-size 1em font-size 1em
color isDark ? #d6dae0 : #555 color var(--urlPreviewTitle)
> p > p
margin 0 margin 0
color isDark ? #a4aab3 : #777 color var(--urlPreviewText)
font-size 0.8em font-size 0.8em
> footer > footer
@ -256,7 +256,7 @@ root(isDark)
> p > p
display inline-block display inline-block
margin 0 margin 0
color isDark ? #b0b4bf : #666 color var(--urlPreviewInfo)
font-size 0.8em font-size 0.8em
line-height 16px line-height 16px
vertical-align top vertical-align top
@ -322,10 +322,4 @@ root(isDark)
width 12px width 12px
height 12px height 12px
.mk-url-preview[data-darkmode]
root(true)
.mk-url-preview:not([data-darkmode])
root(false)
</style> </style>

25
src/client/app/common/views/components/visibility-chooser.vue
View file

@ -127,11 +127,9 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
$border-color = rgba(27, 31, 35, 0.15) $border-color = rgba(27, 31, 35, 0.15)
root(isDark) .mk-visibility-chooser
position initial position initial
> .backdrop > .backdrop
@ -141,11 +139,11 @@ root(isDark)
z-index 10000 z-index 10000
width 100% width 100%
height 100% height 100%
background isDark ? rgba(#000, 0.4) : rgba(#000, 0.1) background var(--modalBackdrop)
opacity 0 opacity 0
> .popover > .popover
$bgcolor = isDark ? #2c303c : #fff $bgcolor = var(--popupBg)
position absolute position absolute
z-index 10001 z-index 10001
width 240px width 240px
@ -189,18 +187,18 @@ root(isDark)
display flex display flex
padding 8px 14px padding 8px 14px
font-size 12px font-size 12px
color isDark ? #fff : #666 color var(--popupFg)
cursor pointer cursor pointer
&:hover &:hover
background isDark ? #252731 : #eee background var(--faceClearButtonHover)
&:active &:active
background isDark ? #21242b : #ddd background var(--faceClearButtonActive)
&.active &.active
color $theme-color-foreground color var(--primaryForeground)
background $theme-color background var(--primary)
> * > *
user-select none user-select none
@ -222,11 +220,4 @@ root(isDark)
> span:last-child:not(:first-child) > span:last-child:not(:first-child)
opacity 0.6 opacity 0.6
.mk-visibility-chooser[data-darkmode]
root(true)
.mk-visibility-chooser:not([data-darkmode])
root(false)
</style> </style>

20
src/client/app/common/views/components/welcome-timeline.vue
View file

@ -90,8 +90,8 @@ export default Vue.extend({
opacity 0 opacity 0
transform translateY(-30px) transform translateY(-30px)
root(isDark) .mk-welcome-timeline
background isDark ? #282C37 : #fff background var(--face)
> div > div
> * > *
@ -101,8 +101,8 @@ root(isDark)
padding 16px padding 16px
overflow-wrap break-word overflow-wrap break-word
font-size .9em font-size .9em
color isDark ? #fff : #4C4C4C color var(--noteText)
border-bottom 1px solid isDark ? rgba(#000, 0.1) : rgba(#000, 0.05) border-bottom 1px solid var(--faceDivider)
&:after &:after
content "" content ""
@ -137,26 +137,20 @@ root(isDark)
overflow hidden overflow hidden
font-weight bold font-weight bold
text-overflow ellipsis text-overflow ellipsis
color isDark ? #fff : #627079 color var(--noteHeaderName)
> .username > .username
margin 0 .5em 0 0 margin 0 .5em 0 0
color isDark ? #606984 : #ccc color var(--noteHeaderAcct)
> .info > .info
margin-left auto margin-left auto
font-size 0.9em font-size 0.9em
> .created-at > .created-at
color isDark ? #606984 : #c0c0c0 color var(--noteHeaderInfo)
> .text > .text
text-align left text-align left
.mk-welcome-timeline[data-darkmode]
root(true)
.mk-welcome-timeline:not([data-darkmode])
root(false)
</style> </style>

37
src/client/app/common/views/pages/follow.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="syxhndwprovvuqhmyvveewmbqayniwkv" v-if="!fetching" :data-darkmode="$store.state.device.darkmode"> <div class="syxhndwprovvuqhmyvveewmbqayniwkv" v-if="!fetching">
<div class="signed-in-as" v-html="'%i18n:@signed-in-as%'.replace('{}', `<b>${myName}`)"></div> <div class="signed-in-as" v-html="'%i18n:@signed-in-as%'.replace('{}', `<b>${myName}`)"></div>
<main> <main>
@ -107,16 +107,14 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .syxhndwprovvuqhmyvveewmbqayniwkv
root(isDark)
padding 32px padding 32px
max-width 500px max-width 500px
margin 0 auto margin 0 auto
text-align center text-align center
color isDark ? #9baec8 : #868c8c color var(--text)
$bg = isDark ? #282C37 : #fff $bg = var(--face)
@media (max-width 400px) @media (max-width 400px)
padding 16px padding 16px
@ -124,7 +122,6 @@ root(isDark)
> .signed-in-as > .signed-in-as
margin-bottom 16px margin-bottom 16px
font-size 14px font-size 14px
color isDark ? #9baec8 : #9daab3
> main > main
margin-bottom 16px margin-bottom 16px
@ -173,29 +170,29 @@ root(isDark)
min-width 150px min-width 150px
font-size 14px font-size 14px
font-weight bold font-weight bold
color $theme-color color var(--primary)
background transparent background transparent
outline none outline none
border solid 1px $theme-color border solid 1px var(--primary)
border-radius 36px border-radius 36px
&:hover &:hover
background rgba($theme-color, 0.1) background var(--primaryAlpha01)
&:active &:active
background rgba($theme-color, 0.2) background var(--primaryAlpha02)
&.active &.active
color $theme-color-foreground color var(--primaryForeground)
background $theme-color background var(--primary)
&:hover &:hover
background lighten($theme-color, 10%) background var(--primaryLighten10)
border-color lighten($theme-color, 10%) border-color var(--primaryLighten10)
&:active &:active
background darken($theme-color, 10%) background var(--primaryDarken10)
border-color darken($theme-color, 10%) border-color var(--primaryDarken10)
&.wait &.wait
cursor wait !important cursor wait !important
@ -204,10 +201,4 @@ root(isDark)
* *
pointer-events none pointer-events none
.syxhndwprovvuqhmyvveewmbqayniwkv[data-darkmode]
root(true)
.syxhndwprovvuqhmyvveewmbqayniwkv:not([data-darkmode])
root(false)
</style> </style>

10
src/client/app/common/views/widgets/analog-clock.vue
View file

@ -26,16 +26,8 @@ export default define({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .mkw-analog-clock
root(isDark)
.mkw-analog-clock--body .mkw-analog-clock--body
padding 8px padding 8px
.mkw-analog-clock[data-darkmode]
root(true)
.mkw-analog-clock:not([data-darkmode])
root(false)
</style> </style>

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

@ -5,7 +5,6 @@
:data-found="announcements && announcements.length != 0" :data-found="announcements && announcements.length != 0"
:data-melt="props.design == 1" :data-melt="props.design == 1"
:data-mobile="platform == 'mobile'" :data-mobile="platform == 'mobile'"
:data-darkmode="$store.state.device.darkmode"
> >
<div class="icon"> <div class="icon">
<svg height="32" version="1.1" viewBox="0 0 32 32" width="32"> <svg height="32" version="1.1" viewBox="0 0 32 32" width="32">
@ -71,9 +70,9 @@ export default define({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) .anltbovirfeutcigvwgmgxipejaeozxi-body
padding 10px padding 10px
background isDark ? #253a50 : #f3f9ff background var(--announcementsBg)
&[data-melt] &[data-melt]
background transparent background transparent
@ -130,14 +129,14 @@ root(isDark)
margin 0 margin 0
font-size 0.95em font-size 0.95em
font-weight normal font-weight normal
color isDark ? #539eff : #4078c0 color var(--announcementsTitle)
> p > p
display block display block
z-index 1 z-index 1
margin 0 margin 0
font-size 0.7em font-size 0.7em
color isDark ? #fff : #57616f color var(--announcementsText)
&.fetching &.fetching
text-align center text-align center
@ -150,10 +149,4 @@ root(isDark)
> p > p
color #fff color #fff
.anltbovirfeutcigvwgmgxipejaeozxi-body[data-darkmode]
root(true)
.anltbovirfeutcigvwgmgxipejaeozxi-body:not([data-darkmode])
root(false)
</style> </style>

19
src/client/app/common/views/widgets/calendar.vue
View file

@ -116,15 +116,13 @@ export default define({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .mkw-calendar
root(isDark)
&[data-special='on-new-years-day'] &[data-special='on-new-years-day']
border-color #ef95a0 border-color #ef95a0
.mkw-calendar--body .mkw-calendar--body
padding 16px 0 padding 16px 0
color isDark ? #c5ced6 : #777 color var(--calendarDay)
&:after &:after
content "" content ""
@ -169,7 +167,8 @@ root(isDark)
margin 0 0 2px 0 margin 0 0 2px 0
font-size 12px font-size 12px
line-height 18px line-height 18px
color isDark ? #7a8692 : #888 color var(--text)
opacity 0.8
> b > b
margin-left 2px margin-left 2px
@ -177,12 +176,12 @@ root(isDark)
> .meter > .meter
width 100% width 100%
overflow hidden overflow hidden
background isDark ? #1c1f25 : #eee background var(--materBg)
border-radius 8px border-radius 8px
> .val > .val
height 4px height 4px
background $theme-color background var(--primary)
transition width .3s cubic-bezier(0.23, 1, 0.32, 1) transition width .3s cubic-bezier(0.23, 1, 0.32, 1)
&:nth-child(1) &:nth-child(1)
@ -197,10 +196,4 @@ root(isDark)
> .meter > .val > .meter > .val
background #41ddde background #41ddde
.mkw-calendar[data-darkmode]
root(true)
.mkw-calendar:not([data-darkmode])
root(false)
</style> </style>

36
src/client/app/common/views/widgets/donation.vue
View file

@ -1,6 +1,7 @@
<template> <template>
<div class="mkw-donation" :data-mobile="platform == 'mobile'"> <div>
<article> <mk-widget-container :show-header="false">
<article class="dolfvtibguprpxxhfndqaosjitixjohx">
<h1>%fa:heart%%i18n:@title%</h1> <h1>%fa:heart%%i18n:@title%</h1>
<p v-if="meta"> <p v-if="meta">
{{ '%i18n:@text%'.substr(0, '%i18n:@text%'.indexOf('{')) }} {{ '%i18n:@text%'.substr(0, '%i18n:@text%'.indexOf('{')) }}
@ -8,6 +9,7 @@
{{ '%i18n:@text%'.substr('%i18n:@text%'.indexOf('}') + 1) }} {{ '%i18n:@text%'.substr('%i18n:@text%'.indexOf('}') + 1) }}
</p> </p>
</article> </article>
</mk-widget-container>
</div> </div>
</template> </template>
@ -30,18 +32,14 @@ export default define({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) .dolfvtibguprpxxhfndqaosjitixjohx
background isDark ? #282c37 : #fff
border solid 1px isDark ? #c3831c : #ead8bb
border-radius 6px
> article
padding 20px padding 20px
background var(--donationBg)
color var(--donationFg)
> h1 > h1
margin 0 0 5px 0 margin 0 0 5px 0
font-size 1em font-size 1em
color isDark ? #b2bac1 : #888
> [data-fa] > [data-fa]
margin-right 0.25em margin-right 0.25em
@ -51,25 +49,5 @@ root(isDark)
z-index 1 z-index 1
margin 0 margin 0
font-size 0.8em font-size 0.8em
color isDark ? #a1a6ab : #999
&[data-mobile]
border none
background #ead8bb
border-radius 8px
box-shadow 0 0 0 1px rgba(#000, 0.2)
> article
> h1
color #7b8871
> p
color #777d71
.mkw-donation[data-darkmode]
root(true)
.mkw-donation:not([data-darkmode])
root(false)
</style> </style>

24
src/client/app/common/views/widgets/memo.vue
View file

@ -57,9 +57,7 @@ export default define({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .mkw-memo
root(isDark)
.mkw-memo--body .mkw-memo--body
padding-bottom 28px + 16px padding-bottom 28px + 16px
@ -69,10 +67,10 @@ root(isDark)
max-width 100% max-width 100%
min-width 100% min-width 100%
padding 16px padding 16px
color isDark ? #fff : #222 color var(--inputText)
background isDark ? #282c37 : #fff background var(--face)
border none border none
border-bottom solid 1px isDark ? #1c2023 : #eee border-bottom solid 1px var(--faceDivider)
border-radius 0 border-radius 0
> button > button
@ -83,8 +81,8 @@ root(isDark)
margin 0 margin 0
padding 0 10px padding 0 10px
height 28px height 28px
color $theme-color-foreground color var(--primaryForeground)
background $theme-color !important background var(--primary) !important
outline none outline none
border none border none
border-radius 4px border-radius 4px
@ -92,20 +90,14 @@ root(isDark)
cursor pointer cursor pointer
&:hover &:hover
background lighten($theme-color, 10%) !important background var(--primaryLighten10) !important
&:active &:active
background darken($theme-color, 10%) !important background var(--primaryDarken10) !important
transition background 0s ease transition background 0s ease
&:disabled &:disabled
opacity 0.7 opacity 0.7
cursor default cursor default
.mkw-memo[data-darkmode]
root(true)
.mkw-memo:not([data-darkmode])
root(false)
</style> </style>

16
src/client/app/common/views/widgets/nav.vue
View file

@ -16,23 +16,17 @@ export default define({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) .mkw-nav
.mkw-nav--body .mkw-nav--body
padding 16px padding 16px
font-size 12px font-size 12px
color isDark ? #9aa4b3 : #aaa color var(--text)
background isDark ? #282c37 : #fff background var(--face)
a a
color isDark ? #9aa4b3 : #999 color var(--text)
i i
color isDark ? #9aa4b3 : #ccc color var(--text)
.mkw-nav[data-darkmode]
root(true)
.mkw-nav:not([data-darkmode])
root(false)
</style> </style>

12
src/client/app/common/views/widgets/posts-monitor.vue
View file

@ -4,7 +4,7 @@
<template slot="header">%fa:chart-line%%i18n:@title%</template> <template slot="header">%fa:chart-line%%i18n:@title%</template>
<button slot="func" @click="toggle" title="%i18n:@toggle%">%fa:sort%</button> <button slot="func" @click="toggle" title="%i18n:@toggle%">%fa:sort%</button>
<div class="qpdmibaztplkylerhdbllwcokyrfxeyj" :class="{ dual: props.view == 0 }" :data-darkmode="$store.state.device.darkmode"> <div class="qpdmibaztplkylerhdbllwcokyrfxeyj" :class="{ dual: props.view == 0 }">
<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" v-show="props.view != 2"> <svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" v-show="props.view != 2">
<defs> <defs>
<linearGradient :id="localGradientId" x1="0" x2="0" y1="1" y2="0"> <linearGradient :id="localGradientId" x1="0" x2="0" y1="1" y2="0">
@ -173,7 +173,7 @@ export default define({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) .qpdmibaztplkylerhdbllwcokyrfxeyj
&.dual &.dual
> svg > svg
width 50% width 50%
@ -192,7 +192,7 @@ root(isDark)
> text > text
font-size 5px font-size 5px
fill isDark ? rgba(#fff, 0.55) : rgba(#000, 0.55) fill var(--chartCaption)
> tspan > tspan
opacity 0.5 opacity 0.5
@ -202,10 +202,4 @@ root(isDark)
display block display block
clear both clear both
.qpdmibaztplkylerhdbllwcokyrfxeyj[data-darkmode]
root(true)
.qpdmibaztplkylerhdbllwcokyrfxeyj:not([data-darkmode])
root(false)
</style> </style>

16
src/client/app/common/views/widgets/rss.vue
View file

@ -65,7 +65,7 @@ export default define({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) .mkw-rss
.mkw-rss--body .mkw-rss--body
.feed .feed
padding 12px 16px padding 12px 16px
@ -74,8 +74,8 @@ root(isDark)
> a > a
display block display block
padding 4px 0 padding 4px 0
color isDark ? #9aa4b3 : #666 color var(--text)
border-bottom dashed 1px isDark ? #1c2023 : #eee border-bottom dashed 1px var(--faceDivider)
&:last-child &:last-child
border-bottom none border-bottom none
@ -90,7 +90,7 @@ root(isDark)
margin-right 4px margin-right 4px
&[data-mobile] &[data-mobile]
background isDark ? #21242f : #f3f3f3 background var(--face)
.feed .feed
padding 0 padding 0
@ -100,12 +100,6 @@ root(isDark)
border-bottom none border-bottom none
&:nth-child(even) &:nth-child(even)
background isDark ? rgba(#000, 0.05) : rgba(#fff, 0.7) background rgba(#000, 0.05)
.mkw-rss[data-darkmode]
root(true)
.mkw-rss:not([data-darkmode])
root(false)
</style> </style>

10
src/client/app/common/views/widgets/server.cpu-memory.vue
View file

@ -129,7 +129,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) .cpu-memory
> svg > svg
display block display block
padding 10px padding 10px
@ -144,7 +144,7 @@ root(isDark)
> text > text
font-size 5px font-size 5px
fill isDark ? rgba(#fff, 0.55) : rgba(#000, 0.55) fill var(--chartCaption)
> tspan > tspan
opacity 0.5 opacity 0.5
@ -154,10 +154,4 @@ root(isDark)
display block display block
clear both clear both
.cpu-memory[data-darkmode]
root(true)
.cpu-memory:not([data-darkmode])
root(false)
</style> </style>

10
src/client/app/common/views/widgets/server.cpu.vue
View file

@ -38,7 +38,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) .cpu
> .pie > .pie
padding 10px padding 10px
height 100px height 100px
@ -52,7 +52,7 @@ root(isDark)
> p > p
margin 0 margin 0
font-size 12px font-size 12px
color isDark ? #a8b4bd : #505050 color var(--chartCaption)
&:first-child &:first-child
font-weight bold font-weight bold
@ -65,10 +65,4 @@ root(isDark)
display block display block
clear both clear both
.cpu[data-darkmode]
root(true)
.cpu:not([data-darkmode])
root(false)
</style> </style>

10
src/client/app/common/views/widgets/server.disk.vue
View file

@ -46,7 +46,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) .disk
> .pie > .pie
padding 10px padding 10px
height 100px height 100px
@ -60,7 +60,7 @@ root(isDark)
> p > p
margin 0 margin 0
font-size 12px font-size 12px
color isDark ? #a8b4bd : #505050 color var(--chartCaption)
&:first-child &:first-child
font-weight bold font-weight bold
@ -73,10 +73,4 @@ root(isDark)
display block display block
clear both clear both
.disk[data-darkmode]
root(true)
.disk:not([data-darkmode])
root(false)
</style> </style>

10
src/client/app/common/views/widgets/server.memory.vue
View file

@ -46,7 +46,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) .memory
> .pie > .pie
padding 10px padding 10px
height 100px height 100px
@ -60,7 +60,7 @@ root(isDark)
> p > p
margin 0 margin 0
font-size 12px font-size 12px
color isDark ? #a8b4bd : #505050 color var(--chartCaption)
&:first-child &:first-child
font-weight bold font-weight bold
@ -73,10 +73,4 @@ root(isDark)
display block display block
clear both clear both
.memory[data-darkmode]
root(true)
.memory:not([data-darkmode])
root(false)
</style> </style>

10
src/client/app/common/views/widgets/server.pie.vue
View file

@ -45,7 +45,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) svg
display block display block
height 100% height 100%
@ -56,12 +56,6 @@ root(isDark)
> text > text
font-size 0.15px font-size 0.15px
fill isDark ? rgba(#fff, 0.6) : rgba(#000, 0.6) fill var(--chartCaption)
svg[data-darkmode]
root(true)
svg:not([data-darkmode])
root(false)
</style> </style>

150
src/client/app/desktop/assets/header-icon.light.svg
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>
Side by side

Before

Width:  |  Height:  |  Size: 7 KiB

8
src/client/app/desktop/assets/header-icon.dark.svg → src/client/app/desktop/assets/header-icon.svg
View file

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

Before

Width:  |  Height:  |  Size: 7 KiB

After

Width:  |  Height:  |  Size: 7 KiB

2
src/client/app/desktop/script.ts
View file

@ -29,7 +29,6 @@ import MkUser from './views/pages/user/user.vue';
import MkFavorites from './views/pages/favorites.vue'; import MkFavorites from './views/pages/favorites.vue';
import MkSelectDrive from './views/pages/selectdrive.vue'; import MkSelectDrive from './views/pages/selectdrive.vue';
import MkDrive from './views/pages/drive.vue'; import MkDrive from './views/pages/drive.vue';
import MkUserList from './views/pages/user-list.vue';
import MkHomeCustomize from './views/pages/home-customize.vue'; import MkHomeCustomize from './views/pages/home-customize.vue';
import MkMessagingRoom from './views/pages/messaging-room.vue'; import MkMessagingRoom from './views/pages/messaging-room.vue';
import MkNote from './views/pages/note.vue'; import MkNote from './views/pages/note.vue';
@ -63,7 +62,6 @@ init(async (launch) => {
{ path: '/i/messaging/:user', component: MkMessagingRoom }, { path: '/i/messaging/:user', component: MkMessagingRoom },
{ path: '/i/drive', component: MkDrive }, { path: '/i/drive', component: MkDrive },
{ path: '/i/drive/folder/:folder', component: MkDrive }, { path: '/i/drive/folder/:folder', component: MkDrive },
{ path: '/i/lists/:list', component: MkUserList },
{ path: '/selectdrive', component: MkSelectDrive }, { path: '/selectdrive', component: MkSelectDrive },
{ path: '/search', component: MkSearch }, { path: '/search', component: MkSearch },
{ path: '/tags/:tag', component: MkTag }, { path: '/tags/:tag', component: MkTag },

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

@ -1,8 +1,6 @@
@import "../app" @import "../app"
@import "../reset" @import "../reset"
@import "./ui"
*::input-placeholder *::input-placeholder
color #D8CBC5 color #D8CBC5
@ -11,34 +9,21 @@
html html
height 100% height 100%
background #f7f7f7 background var(--bg)
&, * &, *
&::-webkit-scrollbar &::-webkit-scrollbar
width 6px width 6px
height 6px height 6px
&::-webkit-scrollbar-thumb
background rgba(0, 0, 0, 0.2)
&:hover
background rgba(0, 0, 0, 0.4)
&:active
background $theme-color
&[data-darkmode]
background #191B22
&, *
&::-webkit-scrollbar-track &::-webkit-scrollbar-track
background-color #282C37 background var(--scrollbarTrack)
&::-webkit-scrollbar-thumb &::-webkit-scrollbar-thumb
background-color #454954 background var(--scrollbarHandle)
&:hover &:hover
background-color #535660 background var(--scrollbarHandleHover)
&:active &:active
background-color $theme-color background var(--primary)

181
src/client/app/desktop/ui.styl
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

59
src/client/app/desktop/views/components/calendar.vue
View file

@ -128,11 +128,9 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .mk-calendar
color var(--calendarDay)
root(isDark) background var(--face)
color isDark ? #c5ced6 : #777
background isDark ? #282C37 : #fff
box-shadow var(--shadow) box-shadow var(--shadow)
border-radius var(--round) border-radius var(--round)
overflow hidden overflow hidden
@ -149,12 +147,10 @@ root(isDark)
line-height 42px line-height 42px
font-size 0.9em font-size 0.9em
font-weight bold font-weight bold
color isDark ? #c5ced6 : #888 color var(--faceHeaderText)
background var(--faceHeader)
box-shadow 0 1px rgba(#000, 0.07) box-shadow 0 1px rgba(#000, 0.07)
if isDark
background #313543
> [data-fa] > [data-fa]
margin-right 4px margin-right 4px
@ -166,13 +162,13 @@ root(isDark)
width 42px width 42px
font-size 0.9em font-size 0.9em
line-height 42px line-height 42px
color isDark ? #9baec8 : #ccc color var(--faceTextButton)
&:hover &:hover
color isDark ? #b2c1d5 : #aaa color var(--faceTextButtonHover)
&:active &:active
color isDark ? #b2c1d5 : #999 color var(--faceTextButtonActive)
&:first-of-type &:first-of-type
left 0 left 0
@ -195,65 +191,56 @@ root(isDark)
font-size 14px font-size 14px
&.weekday &.weekday
color isDark ? #43d5dc : #19a2a9 color var(--calendarWeek)
&[data-is-donichi] &[data-is-donichi]
color isDark ? #ff6679 : #ef95a0 color var(--calendarSaturdayOrSunday)
&[data-today] &[data-today]
box-shadow 0 0 0 1px isDark ? #43d5dc : #19a2a9 inset box-shadow 0 0 0 1px var(--calendarWeek) inset
border-radius 6px border-radius 6px
&[data-is-donichi] &[data-is-donichi]
box-shadow 0 0 0 1px isDark ? #ff6679 : #ef95a0 inset box-shadow 0 0 0 1px var(--calendarSaturdayOrSunday) inset
&.day &.day
cursor pointer cursor pointer
color isDark ? #c5ced6 : #777 color var(--calendarDay)
> div > div
border-radius 6px border-radius 6px
&:hover > div &:hover > div
background rgba(#000, isDark ? 0.1 : 0.025) background var(--faceClearButtonHover)
&:active > div &:active > div
background rgba(#000, isDark ? 0.2 : 0.05) background var(--faceClearButtonActive)
&[data-is-donichi] &[data-is-donichi]
color isDark ? #ff6679 : #ef95a0 color var(--calendarSaturdayOrSunday)
&[data-is-out-of-range] &[data-is-out-of-range]
cursor default cursor default
color rgba(isDark ? #c5ced6 : #777, 0.5) opacity 0.5
&[data-is-donichi]
color rgba(isDark ? #ff6679 : #ef95a0, 0.5)
&[data-selected] &[data-selected]
font-weight bold font-weight bold
> div > div
background rgba(#000, isDark ? 0.1 : 0.025) background var(--faceClearButtonHover)
&:active > div &:active > div
background rgba(#000, isDark ? 0.2 : 0.05) background var(--faceClearButtonActive)
&[data-today] &[data-today]
> div > div
color $theme-color-foreground color var(--primaryForeground)
background $theme-color background var(--primary)
&:hover > div &:hover > div
background lighten($theme-color, 10%) background var(--primaryLighten10)
&:active > div &:active > div
background darken($theme-color, 10%) background var(--primaryDarken10)
.mk-calendar[data-darkmode]
root(true)
.mk-calendar:not([data-darkmode])
root(false)
</style> </style>

4
src/client/app/desktop/views/components/charts.vue
View file

@ -649,7 +649,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
.gkgckalzgidaygcxnugepioremxvxvpt .gkgckalzgidaygcxnugepioremxvxvpt
padding 32px padding 32px
@ -675,7 +675,7 @@ export default Vue.extend({
* *
&:not(.active) &:not(.active)
color $theme-color color var(--primary)
cursor pointer cursor pointer
> div > div

32
src/client/app/desktop/views/components/choose-file-from-drive-window.vue
View file

@ -59,7 +59,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" module> <style lang="stylus" module>
@import '~const.styl'
.title .title
> [data-fa] > [data-fa]
@ -74,7 +74,7 @@ export default Vue.extend({
.footer .footer
height 72px height 72px
background lighten($theme-color, 95%) background var(--primaryLighten95)
.upload .upload
display inline-block display inline-block
@ -87,7 +87,7 @@ export default Vue.extend({
width 40px width 40px
height 40px height 40px
font-size 1em font-size 1em
color rgba($theme-color, 0.5) color var(--primaryAlpha05)
background transparent background transparent
outline none outline none
border solid 1px transparent border solid 1px transparent
@ -95,13 +95,13 @@ export default Vue.extend({
&:hover &:hover
background transparent background transparent
border-color rgba($theme-color, 0.3) border-color var(--primaryAlpha03)
&:active &:active
color rgba($theme-color, 0.6) color var(--primaryAlpha06)
background transparent background transparent
border-color rgba($theme-color, 0.5) border-color var(--primaryAlpha05)
box-shadow 0 2px 4px rgba(darken($theme-color, 50%), 0.15) inset //box-shadow 0 2px 4px rgba(var(--primaryDarken50), 0.15) inset
&:focus &:focus
&:after &:after
@ -112,7 +112,7 @@ export default Vue.extend({
right -5px right -5px
bottom -5px bottom -5px
left -5px left -5px
border 2px solid rgba($theme-color, 0.3) border 2px solid var(--primaryAlpha03)
border-radius 8px border-radius 8px
.ok .ok
@ -138,7 +138,7 @@ export default Vue.extend({
right -5px right -5px
bottom -5px bottom -5px
left -5px left -5px
border 2px solid rgba($theme-color, 0.3) border 2px solid var(--primaryAlpha03)
border-radius 8px border-radius 8px
&:disabled &:disabled
@ -147,20 +147,20 @@ export default Vue.extend({
.ok .ok
right 16px right 16px
color $theme-color-foreground color var(--primaryForeground)
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%) background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
border solid 1px lighten($theme-color, 15%) border solid 1px var(--primaryLighten15)
&:not(:disabled) &:not(:disabled)
font-weight bold font-weight bold
&:hover:not(:disabled) &:hover:not(:disabled)
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%) background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
border-color $theme-color border-color var(--primary)
&:active:not(:disabled) &:active:not(:disabled)
background $theme-color background var(--primary)
border-color $theme-color border-color var(--primary)
.cancel .cancel
right 148px right 148px

20
src/client/app/desktop/views/components/choose-folder-from-drive-window.vue
View file

@ -37,7 +37,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" module> <style lang="stylus" module>
@import '~const.styl'
.title .title
> [data-fa] > [data-fa]
@ -48,7 +48,7 @@ export default Vue.extend({
.footer .footer
height 72px height 72px
background lighten($theme-color, 95%) background var(--primaryLighten95)
.ok .ok
.cancel .cancel
@ -73,7 +73,7 @@ export default Vue.extend({
right -5px right -5px
bottom -5px bottom -5px
left -5px left -5px
border 2px solid rgba($theme-color, 0.3) border 2px solid var(--primaryAlpha03)
border-radius 8px border-radius 8px
&:disabled &:disabled
@ -82,20 +82,20 @@ export default Vue.extend({
.ok .ok
right 16px right 16px
color $theme-color-foreground color var(--primaryForeground)
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%) background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
border solid 1px lighten($theme-color, 15%) border solid 1px var(--primaryLighten15)
&:not(:disabled) &:not(:disabled)
font-weight bold font-weight bold
&:hover:not(:disabled) &:hover:not(:disabled)
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%) background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
border-color $theme-color border-color var(--primary)
&:active:not(:disabled) &:active:not(:disabled)
background $theme-color background var(--primary)
border-color $theme-color border-color var(--primary)
.cancel .cancel
right 148px right 148px

26
src/client/app/desktop/views/components/context-menu.menu.vue
View file

@ -31,9 +31,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .menu
root(isDark)
$width = 240px $width = 240px
$item-height = 38px $item-height = 38px
$padding = 10px $padding = 10px
@ -48,7 +46,7 @@ root(isDark)
&.divider &.divider
margin-top $padding margin-top $padding
padding-top $padding padding-top $padding
border-top solid 1px isDark ? #1c2023 : #eee border-top solid 1px var(--faceDivider)
&.nest &.nest
> p > p
@ -69,7 +67,7 @@ root(isDark)
&:active &:active
> p, a > p, a
background $theme-color background var(--primary)
> p, a > p, a
display block display block
@ -77,7 +75,7 @@ root(isDark)
margin 0 margin 0
padding 0 32px 0 38px padding 0 32px 0 38px
line-height $item-height line-height $item-height
color isDark ? #c8cece : #868C8C color var(--text)
text-decoration none text-decoration none
cursor pointer cursor pointer
@ -90,14 +88,14 @@ root(isDark)
&:hover &:hover
> p, a > p, a
text-decoration none text-decoration none
background $theme-color background var(--primary)
color $theme-color-foreground color var(--primaryForeground)
&:active &:active
> p, a > p, a
text-decoration none text-decoration none
background darken($theme-color, 10%) background var(--primaryDarken10)
color $theme-color-foreground color var(--primaryForeground)
li > ul li > ul
visibility hidden visibility hidden
@ -106,17 +104,11 @@ root(isDark)
left $width left $width
margin-top -($padding) margin-top -($padding)
width $width width $width
background isDark ? #282c37 :#fff background var(--popupBg)
border-radius 0 4px 4px 4px border-radius 0 4px 4px 4px
box-shadow 2px 2px 8px rgba(#000, 0.2) box-shadow 2px 2px 8px rgba(#000, 0.2)
transition visibility 0s linear 0.2s transition visibility 0s linear 0.2s
.menu[data-darkmode]
root(true)
.menu:not([data-darkmode])
root(false)
</style> </style>
<style lang="stylus" module> <style lang="stylus" module>

10
src/client/app/desktop/views/components/context-menu.vue
View file

@ -71,7 +71,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) .context-menu
$width = 240px $width = 240px
$item-height = 38px $item-height = 38px
$padding = 10px $padding = 10px
@ -82,15 +82,9 @@ root(isDark)
z-index 4096 z-index 4096
width $width width $width
font-size 0.8em font-size 0.8em
background isDark ? #282c37 : #fff background var(--popupBg)
border-radius 0 4px 4px 4px border-radius 0 4px 4px 4px
box-shadow 2px 2px 8px rgba(#000, 0.2) box-shadow 2px 2px 8px rgba(#000, 0.2)
opacity 0 opacity 0
.context-menu[data-darkmode]
root(true)
.context-menu:not([data-darkmode])
root(false)
</style> </style>

24
src/client/app/desktop/views/components/crop-window.vue
View file

@ -61,7 +61,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" module> <style lang="stylus" module>
@import '~const.styl'
.header .header
> [data-fa] > [data-fa]
@ -73,7 +73,7 @@ export default Vue.extend({
.actions .actions
height 72px height 72px
background lighten($theme-color, 95%) background var(--primaryLighten95)
.ok .ok
.cancel .cancel
@ -98,7 +98,7 @@ export default Vue.extend({
right -5px right -5px
bottom -5px bottom -5px
left -5px left -5px
border 2px solid rgba($theme-color, 0.3) border 2px solid var(--primaryAlpha03)
border-radius 8px border-radius 8px
&:disabled &:disabled
@ -111,20 +111,20 @@ export default Vue.extend({
.ok .ok
right 16px right 16px
color $theme-color-foreground color var(--primaryForeground)
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%) background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
border solid 1px lighten($theme-color, 15%) border solid 1px var(--primaryLighten15)
&:not(:disabled) &:not(:disabled)
font-weight bold font-weight bold
&:hover:not(:disabled) &:hover:not(:disabled)
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%) background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
border-color $theme-color border-color var(--primary)
&:active:not(:disabled) &:active:not(:disabled)
background $theme-color background var(--primary)
border-color $theme-color border-color var(--primary)
.cancel .cancel
.skip .skip
@ -155,11 +155,11 @@ export default Vue.extend({
} }
.cropper-view-box { .cropper-view-box {
outline-color: $theme-color; outline-color: var(--primary);
} }
.cropper-line, .cropper-point { .cropper-line, .cropper-point {
background-color: $theme-color; background-color: var(--primary);
} }
.cropper-bg { .cropper-bg {

10
src/client/app/desktop/views/components/dialog.vue
View file

@ -91,7 +91,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl'
.mk-dialog .mk-dialog
> .bg > .bg
@ -144,20 +144,20 @@ export default Vue.extend({
margin 0 0.375em margin 0 0.375em
&:hover &:hover
color $theme-color color var(--primary)
&:active &:active
color darken($theme-color, 10%) color var(--primaryDarken10)
transition color 0s ease transition color 0s ease
</style> </style>
<style lang="stylus" module> <style lang="stylus" module>
@import '~const.styl'
.header .header
margin 1em 0 margin 1em 0
color $theme-color color var(--primary)
// color #43A4EC // color #43A4EC
font-weight bold font-weight bold

22
src/client/app/desktop/views/components/drive.file.vue
View file

@ -200,9 +200,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .gvfdktuvdgwhmztnuekzkswkjygptfcv
root(isDark)
padding 8px 0 0 0 padding 8px 0 0 0
height 180px height 180px
border-radius 4px border-radius 4px
@ -237,13 +235,13 @@ root(isDark)
background #ce2212 background #ce2212
&[data-is-selected] &[data-is-selected]
background $theme-color background var(--primary)
&:hover &:hover
background lighten($theme-color, 10%) background var(--primaryLighten10)
&:active &:active
background darken($theme-color, 10%) background var(--primaryDarken10)
> .label > .label
&:before &:before
@ -251,7 +249,7 @@ root(isDark)
display none display none
> .name > .name
color $theme-color-foreground color var(--primaryForeground)
&[data-is-contextmenu-showing] &[data-is-contextmenu-showing]
&:after &:after
@ -262,7 +260,7 @@ root(isDark)
right -4px right -4px
bottom -4px bottom -4px
left -4px left -4px
border 2px dashed rgba($theme-color, 0.3) border 2px dashed var(--primaryAlpha03)
border-radius 4px border-radius 4px
> .label > .label
@ -337,16 +335,10 @@ root(isDark)
font-size 0.8em font-size 0.8em
text-align center text-align center
word-break break-all word-break break-all
color isDark ? #fff : #444 color var(--text)
overflow hidden overflow hidden
> .ext > .ext
opacity 0.5 opacity 0.5
.gvfdktuvdgwhmztnuekzkswkjygptfcv[data-darkmode]
root(true)
.gvfdktuvdgwhmztnuekzkswkjygptfcv:not([data-darkmode])
root(false)
</style> </style>

22
src/client/app/desktop/views/components/drive.folder.vue
View file

@ -214,12 +214,10 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .ynntpczxvnusfwdyxsfuhvcmuypqopdd
root(isDark)
padding 8px padding 8px
height 64px height 64px
background isDark ? rgba($theme-color, 0.2) : lighten($theme-color, 95%) background var(--desktopDriveFolderBg)
border-radius 4px border-radius 4px
&, * &, *
@ -229,10 +227,10 @@ root(isDark)
pointer-events none pointer-events none
&:hover &:hover
background isDark ? rgba(lighten($theme-color, 10%), 0.2) : lighten($theme-color, 90%) background var(--desktopDriveFolderHoverBg)
&:active &:active
background isDark ? rgba(darken($theme-color, 10%), 0.2) : lighten($theme-color, 85%) background var(--desktopDriveFolderActiveBg)
&[data-is-contextmenu-showing] &[data-is-contextmenu-showing]
&[data-draghover] &[data-draghover]
@ -244,26 +242,20 @@ root(isDark)
right -4px right -4px
bottom -4px bottom -4px
left -4px left -4px
border 2px dashed rgba($theme-color, 0.3) border 2px dashed var(--primaryAlpha03)
border-radius 4px border-radius 4px
&[data-draghover] &[data-draghover]
background isDark ? rgba(darken($theme-color, 10%), 0.2) : lighten($theme-color, 90%) background var(--desktopDriveFolderActiveBg)
> .name > .name
margin 0 margin 0
font-size 0.9em font-size 0.9em
color isDark ? #fff : darken($theme-color, 30%) color var(--desktopDriveFolderFg)
> [data-fa] > [data-fa]
margin-right 4px margin-right 4px
margin-left 2px margin-left 2px
text-align left text-align left
.ynntpczxvnusfwdyxsfuhvcmuypqopdd[data-darkmode]
root(true)
.ynntpczxvnusfwdyxsfuhvcmuypqopdd:not([data-darkmode])
root(false)
</style> </style>

23
src/client/app/desktop/views/components/drive.vue
View file

@ -585,18 +585,15 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .mk-drive
root(isDark)
> nav > nav
display block display block
z-index 2 z-index 2
width 100% width 100%
overflow auto overflow auto
font-size 0.9em font-size 0.9em
color isDark ? #d2d9dc : #555 color var(--text)
background isDark ? #282c37 : #fff background var(--face)
box-shadow 0 1px 0 rgba(#000, 0.05) box-shadow 0 1px 0 rgba(#000, 0.05)
&, * &, *
@ -674,7 +671,7 @@ root(isDark)
padding 8px padding 8px
height calc(100% - 38px) height calc(100% - 38px)
overflow auto overflow auto
background isDark ? #191b22 : #fff background var(--desktopDriveBg)
&, * &, *
user-select none user-select none
@ -697,8 +694,8 @@ root(isDark)
z-index 128 z-index 128
top 0 top 0
left 0 left 0
border solid 1px $theme-color border solid 1px var(--primary)
background rgba($theme-color, 0.5) background var(--primaryAlpha05)
pointer-events none pointer-events none
> .contents > .contents
@ -769,7 +766,7 @@ root(isDark)
top 38px top 38px
width 100% width 100%
height calc(100% - 38px) height calc(100% - 38px)
border dashed 2px rgba($theme-color, 0.5) border dashed 2px var(--primaryAlpha05)
pointer-events none pointer-events none
> .mk-uploader > .mk-uploader
@ -780,10 +777,4 @@ root(isDark)
> input > input
display none display none
.mk-drive[data-darkmode]
root(true)
.mk-drive:not([data-darkmode])
root(false)
</style> </style>

37
src/client/app/desktop/views/components/follow-button.vue
View file

@ -101,9 +101,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .mk-follow-button
root(isDark)
display block display block
cursor pointer cursor pointer
padding 0 padding 0
@ -126,37 +124,34 @@ root(isDark)
right -5px right -5px
bottom -5px bottom -5px
left -5px left -5px
border 2px solid rgba($theme-color, 0.3) border 2px solid var(--primaryAlpha03)
border-radius 8px border-radius 8px
&:not(.active) &:not(.active)
color isDark ? #fff : #888 color var(--primary)
background isDark ? linear-gradient(to bottom, #313543 0%, #282c37 100%) : linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%) border solid 1px var(--primary)
border solid 1px isDark ? #1c2023 : #e2e2e2
&:hover &:hover
background isDark ? linear-gradient(to bottom, #2c2f3c 0%, #22262f 100%) : linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%) background var(--primaryAlpha03)
border-color isDark ? #151a1d : #dcdcdc
&:active &:active
background isDark ? #22262f : #ececec background var(--primaryAlpha05)
border-color isDark ? #151a1d : #dcdcdc
&.active &.active
color $theme-color-foreground color var(--primaryForeground)
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%) background var(--primary)
border solid 1px lighten($theme-color, 15%) border solid 1px var(--primary)
&:not(:disabled) &:not(:disabled)
font-weight bold font-weight bold
&:hover:not(:disabled) &:hover:not(:disabled)
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%) background var(--primaryLighten5)
border-color $theme-color border-color var(--primaryLighten5)
&:active:not(:disabled) &:active:not(:disabled)
background $theme-color background var(--primaryDarken5)
border-color $theme-color border-color var(--primaryDarken5)
&.wait &.wait
cursor wait !important cursor wait !important
@ -167,10 +162,4 @@ root(isDark)
height 38px height 38px
line-height 38px line-height 38px
.mk-follow-button[data-darkmode]
root(true)
.mk-follow-button:not([data-darkmode])
root(false)
</style> </style>

24
src/client/app/desktop/views/components/home.vue
View file

@ -247,9 +247,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .mk-home
root(isDark)
display block display block
&[data-customize] &[data-customize]
@ -279,8 +277,8 @@ root(isDark)
left 0 left 0
width 100% width 100%
height 48px height 48px
color isDark ? #fff : #000 color var(--text)
background isDark ? #313543 : #f7f7f7 background var(--desktopHeaderBg)
box-shadow 0 1px 1px rgba(#000, 0.075) box-shadow 0 1px 1px rgba(#000, 0.075)
> a > a
@ -292,15 +290,15 @@ root(isDark)
padding 0 16px padding 0 16px
line-height 48px line-height 48px
text-decoration none text-decoration none
color $theme-color-foreground color var(--primaryForeground)
background $theme-color background var(--primary)
transition background 0.1s ease transition background 0.1s ease
&:hover &:hover
background lighten($theme-color, 10%) background var(--primaryLighten10)
&:active &:active
background darken($theme-color, 10%) background var(--primaryDarken10)
transition background 0s ease transition background 0s ease
> [data-fa] > [data-fa]
@ -320,7 +318,7 @@ root(isDark)
line-height 48px line-height 48px
&.trash &.trash
border-left solid 1px isDark ? #1c2023 : #ddd border-left solid 1px var(--faceDivider)
> div > div
width 100% width 100%
@ -395,10 +393,4 @@ root(isDark)
max-width 700px max-width 700px
margin 0 auto margin 0 auto
.mk-home[data-darkmode]
root(true)
.mk-home:not([data-darkmode])
root(false)
</style> </style>

30
src/client/app/desktop/views/components/input-dialog.vue
View file

@ -76,7 +76,7 @@ export default Vue.extend({
<style lang="stylus" module> <style lang="stylus" module>
@import '~const.styl'
.header .header
> [data-fa] > [data-fa]
@ -96,25 +96,25 @@ export default Vue.extend({
color #333 color #333
background #fff background #fff
outline none outline none
border solid 1px rgba($theme-color, 0.1) border solid 1px var(--primaryAlpha01)
border-radius 4px border-radius 4px
transition border-color .3s ease transition border-color .3s ease
&:hover &:hover
border-color rgba($theme-color, 0.2) border-color var(--primaryAlpha02)
transition border-color .1s ease transition border-color .1s ease
&:focus &:focus
color $theme-color color var(--primary)
border-color rgba($theme-color, 0.5) border-color var(--primaryAlpha05)
transition border-color 0s ease transition border-color 0s ease
&::-webkit-input-placeholder &::-webkit-input-placeholder
color rgba($theme-color, 0.3) color var(--primaryAlpha03)
.actions .actions
height 72px height 72px
background lighten($theme-color, 95%) background var(--primaryLighten95)
.ok .ok
.cancel .cancel
@ -139,7 +139,7 @@ export default Vue.extend({
right -5px right -5px
bottom -5px bottom -5px
left -5px left -5px
border 2px solid rgba($theme-color, 0.3) border 2px solid var(--primaryAlpha03)
border-radius 8px border-radius 8px
&:disabled &:disabled
@ -148,20 +148,20 @@ export default Vue.extend({
.ok .ok
right 16px right 16px
color $theme-color-foreground color var(--primaryForeground)
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%) background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
border solid 1px lighten($theme-color, 15%) border solid 1px var(--primaryLighten15)
&:not(:disabled) &:not(:disabled)
font-weight bold font-weight bold
&:hover:not(:disabled) &:hover:not(:disabled)
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%) background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
border-color $theme-color border-color var(--primary)
&:active:not(:disabled) &:active:not(:disabled)
background $theme-color background var(--primary)
border-color $theme-color border-color var(--primary)
.cancel .cancel
right 148px right 148px

60
src/client/app/desktop/views/components/note-detail.vue
View file

@ -225,12 +225,10 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .mk-note-detail
root(isDark)
overflow hidden overflow hidden
text-align left text-align left
background isDark ? #282C37 : #fff background var(--face)
box-shadow var(--shadow) box-shadow var(--shadow)
border-radius var(--round) border-radius var(--round)
@ -243,28 +241,28 @@ root(isDark)
text-align center text-align center
color #999 color #999
cursor pointer cursor pointer
background isDark ? #21242d : #fafafa background var(--subNoteBg)
outline none outline none
border none border none
border-bottom solid 1px isDark ? #1c2023 : #eef0f2 border-bottom solid 1px var(--faceDivider)
border-radius 6px 6px 0 0 border-radius var(--round) var(--round) 0 0
&:hover &:hover
background isDark ? #2e3440 : #f6f6f6 box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
&:active &:active
background isDark ? #21242b : #f0f0f0 box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
&:disabled &:disabled
color isDark ? #21242b : #ccc cursor wait
> .conversation > .conversation
> * > *
border-bottom 1px solid isDark ? #1c2023 : #eef0f2 border-bottom 1px solid var(--faceDivider)
> .renote > .renote
color #9dbb00 color var(--renoteText)
background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%) background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
> p > p
margin 0 margin 0
@ -287,7 +285,7 @@ root(isDark)
padding-top 8px padding-top 8px
> .reply-to > .reply-to
border-bottom 1px solid isDark ? #1c2023 : #eef0f2 border-bottom 1px solid var(--faceDivider)
> article > article
padding 28px 32px 18px 32px padding 28px 32px 18px 32px
@ -299,7 +297,7 @@ root(isDark)
&:hover &:hover
> footer > button > footer > button
color isDark ? #707b97 : #888 color var(--noteActionsHighlighted)
> .avatar > .avatar
width 60px width 60px
@ -316,7 +314,7 @@ root(isDark)
display inline-block display inline-block
margin 0 margin 0
line-height 24px line-height 24px
color isDark ? #fff : #627079 color var(--noteHeaderName)
font-size 18px font-size 18px
font-weight 700 font-weight 700
text-align left text-align left
@ -329,14 +327,14 @@ root(isDark)
display block display block
text-align left text-align left
margin 0 margin 0
color isDark ? #606984 : #ccc color var(--noteHeaderAcct)
> .time > .time
position absolute position absolute
top 0 top 0
right 32px right 32px
font-size 1em font-size 1em
color isDark ? #606984 : #c0c0c0 color var(--noteHeaderInfo)
> .body > .body
padding 8px 0 padding 8px 0
@ -347,7 +345,7 @@ root(isDark)
margin 0 margin 0
padding 0 padding 0
overflow-wrap break-word overflow-wrap break-word
color isDark ? #fff : #717171 color var(--noteText)
> .text > .text
margin-right 8px margin-right 8px
@ -360,14 +358,14 @@ root(isDark)
padding 0 padding 0
overflow-wrap break-word overflow-wrap break-word
font-size 1.5em font-size 1.5em
color isDark ? #fff : #717171 color var(--noteText)
> .renote > .renote
margin 8px 0 margin 8px 0
> * > *
padding 16px padding 16px
border dashed 1px #c0dac6 border dashed 1px var(--quoteBorder)
border-radius 8px border-radius 8px
> .location > .location
@ -394,20 +392,20 @@ root(isDark)
background transparent background transparent
border none border none
font-size 1em font-size 1em
color isDark ? #606984 : #ccc color var(--noteActions)
cursor pointer cursor pointer
&:hover &:hover
color isDark ? #a1a8bf : #444 color var(--noteActionsHover)
&.replyButton:hover &.replyButton:hover
color #0af color var(--noteActionsReplyHover)
&.renoteButton:hover &.renoteButton:hover
color #8d0 color var(--noteActionsRenoteHover)
&.reactionButton:hover &.reactionButton:hover
color #fa0 color var(--noteActionsReactionHover)
> .count > .count
display inline display inline
@ -415,16 +413,10 @@ root(isDark)
color #999 color #999
&.reacted, &.reacted:hover &.reacted, &.reacted:hover
color #fa0 color var(--noteActionsReactionHover)
> .replies > .replies
> * > *
border-top 1px solid isDark ? #1c2023 : #eef0f2 border-top 1px solid var(--faceDivider)
.mk-note-detail[data-darkmode]
root(true)
.mk-note-detail:not([data-darkmode])
root(false)
</style> </style>

12
src/client/app/desktop/views/components/note-preview.vue
View file

@ -47,7 +47,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) .qiziqtywpuaucsgarwajitwaakggnisj
display flex display flex
font-size 0.9em font-size 0.9em
@ -71,7 +71,7 @@ root(isDark)
margin 0 margin 0
padding 0 padding 0
overflow-wrap break-word overflow-wrap break-word
color isDark ? #fff : #717171 color var(--noteText)
> .text > .text
margin-right 8px margin-right 8px
@ -81,12 +81,6 @@ root(isDark)
cursor default cursor default
margin 0 margin 0
padding 0 padding 0
color isDark ? #959ba7 : #717171 color var(--subNoteText)
.qiziqtywpuaucsgarwajitwaakggnisj[data-darkmode]
root(true)
.qiziqtywpuaucsgarwajitwaakggnisj:not([data-darkmode])
root(false)
</style> </style>

14
src/client/app/desktop/views/components/notes.note.sub.vue
View file

@ -42,12 +42,12 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) .tkfdzaxtkdeianobciwadajxzbddorql
display flex display flex
margin 0 margin 0
padding 16px 32px padding 16px 32px
font-size 0.9em font-size 0.9em
background isDark ? #21242d : #fcfcfc background var(--subNoteBg)
> .avatar > .avatar
flex-shrink 0 flex-shrink 0
@ -72,7 +72,7 @@ root(isDark)
margin 0 margin 0
padding 0 padding 0
overflow-wrap break-word overflow-wrap break-word
color isDark ? #fff : #717171 color var(--noteText)
> .text > .text
margin-right 8px margin-right 8px
@ -82,16 +82,10 @@ root(isDark)
cursor default cursor default
margin 0 margin 0
padding 0 padding 0
color isDark ? #959ba7 : #717171 color var(--subNoteText)
pre pre
max-height 120px max-height 120px
font-size 80% font-size 80%
.tkfdzaxtkdeianobciwadajxzbddorql[data-darkmode]
root(true)
.tkfdzaxtkdeianobciwadajxzbddorql:not([data-darkmode])
root(false)
</style> </style>

54
src/client/app/desktop/views/components/notes.note.vue
View file

@ -317,13 +317,11 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .note
root(isDark)
margin 0 margin 0
padding 0 padding 0
background isDark ? #282C37 : #fff background var(--face)
border-bottom solid 1px isDark ? #1c2023 : #eaeaea border-bottom solid 1px var(--faceDivider)
&[data-round] &[data-round]
&:first-child &:first-child
@ -348,7 +346,7 @@ root(isDark)
right 2px right 2px
bottom 2px bottom 2px
left 2px left 2px
border 2px solid rgba($theme-color, 0.3) border 2px solid var(--primaryAlpha03)
border-radius 4px border-radius 4px
> .renote > .renote
@ -357,8 +355,8 @@ root(isDark)
padding 16px 32px 8px 32px padding 16px 32px 8px 32px
line-height 28px line-height 28px
white-space pre white-space pre
color #9dbb00 color var(--renoteText)
background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%) background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
.avatar .avatar
display inline-block display inline-block
@ -398,7 +396,7 @@ root(isDark)
&:hover &:hover
> .main > footer > button > .main > footer > button
color isDark ? #707b97 : #888 color var(--noteActionsHighlighted)
> .avatar > .avatar
flex-shrink 0 flex-shrink 0
@ -426,7 +424,7 @@ root(isDark)
margin 0 margin 0
padding 0 padding 0
overflow-wrap break-word overflow-wrap break-word
color isDark ? #fff : #717171 color var(--noteText)
> .text > .text
margin-right 8px margin-right 8px
@ -439,7 +437,7 @@ root(isDark)
margin 0 margin 0
padding 0 padding 0
overflow-wrap break-word overflow-wrap break-word
color isDark ? #fff : #717171 color var(--noteText)
>>> .title >>> .title
display block display block
@ -447,7 +445,7 @@ root(isDark)
padding 4px padding 4px
font-size 90% font-size 90%
text-align center text-align center
background isDark ? #2f3944 : #eef1f3 background var(--mfmTitleBg)
border-radius 4px border-radius 4px
>>> .code >>> .code
@ -456,17 +454,17 @@ root(isDark)
>>> .quote >>> .quote
margin 8px margin 8px
padding 6px 12px padding 6px 12px
color isDark ? #6f808e : #aaa color var(--mfmQuote)
border-left solid 3px isDark ? #637182 : #eee border-left solid 3px var(--mfmQuoteLine)
> .reply > .reply
margin-right 8px margin-right 8px
color isDark ? #99abbf : #717171 color var(--text)
> .rp > .rp
margin-left 4px margin-left 4px
font-style oblique font-style oblique
color #a0bf46 color var(--renoteText)
> .location > .location
margin 4px 0 margin 4px 0
@ -491,7 +489,7 @@ root(isDark)
> * > *
padding 16px padding 16px
border dashed 1px isDark ? #4e945e : #c0dac6 border dashed 1px var(--quoteBorder)
border-radius 8px border-radius 8px
> footer > footer
@ -500,22 +498,22 @@ root(isDark)
padding 0 8px padding 0 8px
line-height 32px line-height 32px
font-size 1em font-size 1em
color isDark ? #606984 : #ddd color var(--noteActions)
background transparent background transparent
border none border none
cursor pointer cursor pointer
&:hover &:hover
color isDark ? #a1a8bf : #444 color var(--noteActionsHover)
&.replyButton:hover &.replyButton:hover
color #0af color var(--noteActionsReplyHover)
&.renoteButton:hover &.renoteButton:hover
color #8d0 color var(--noteActionsRenoteHover)
&.reactionButton:hover &.reactionButton:hover
color #fa0 color var(--noteActionsReactionHover)
> .count > .count
display inline display inline
@ -523,18 +521,12 @@ root(isDark)
color #999 color #999
&.reacted, &.reacted:hover &.reacted, &.reacted:hover
color #fa0 color var(--noteActionsReactionHover)
> .detail > .detail
padding-top 4px padding-top 4px
background rgba(#000, 0.0125) background rgba(#000, 0.0125)
.note[data-darkmode]
root(true)
.note:not([data-darkmode])
root(false)
</style> </style>
<style lang="stylus" module> <style lang="stylus" module>
@ -557,7 +549,7 @@ root(isDark)
padding 0 4px padding 0 4px
margin-left 4px margin-left 4px
font-size 80% font-size 80%
color $theme-color-foreground color var(--primaryForeground)
background $theme-color background var(--primary)
border-radius 4px border-radius 4px
</style> </style>

26
src/client/app/desktop/views/components/notes.vue
View file

@ -216,9 +216,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .mk-notes
root(isDark)
.transition .transition
.mk-notes-enter .mk-notes-enter
.mk-notes-leave-to .mk-notes-leave-to
@ -235,9 +233,9 @@ root(isDark)
line-height 32px line-height 32px
font-size 14px font-size 14px
text-align center text-align center
color isDark ? #666b79 : #aaa color var(--dateDividerFg)
background isDark ? #242731 : #fdfdfd background var(--dateDividerBg)
border-bottom solid 1px isDark ? #1c2023 : #eaeaea border-bottom solid 1px var(--faceDivider)
span span
margin 0 16px margin 0 16px
@ -250,7 +248,7 @@ root(isDark)
position sticky position sticky
z-index 100 z-index 100
height 3px height 3px
background $theme-color background var(--primary)
> footer > footer
> button > button
@ -260,21 +258,15 @@ root(isDark)
width 100% width 100%
text-align center text-align center
color #ccc color #ccc
background isDark ? #282C37 : #fff background var(--face)
border-top solid 1px isDark ? #1c2023 : #eaeaea border-top solid 1px var(--faceDivider)
border-bottom-left-radius 6px border-bottom-left-radius 6px
border-bottom-right-radius 6px border-bottom-right-radius 6px
&:hover &:hover
background isDark ? #2e3440 : #f5f5f5 box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
&:active &:active
background isDark ? #21242b : #eee box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
.mk-notes[data-darkmode]
root(true)
.mk-notes:not([data-darkmode])
root(false)
</style> </style>

22
src/client/app/desktop/views/components/notifications.vue
View file

@ -191,7 +191,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) .mk-notifications
.transition .transition
.mk-notifications-enter .mk-notifications-enter
.mk-notifications-leave-to .mk-notifications-leave-to
@ -208,7 +208,7 @@ root(isDark)
padding 16px padding 16px
overflow-wrap break-word overflow-wrap break-word
font-size 13px font-size 13px
border-bottom solid 1px isDark ? #1c2023 : rgba(#000, 0.05) border-bottom solid 1px var(--faceDivider)
&:last-child &:last-child
border-bottom none border-bottom none
@ -219,7 +219,7 @@ root(isDark)
top 16px top 16px
right 12px right 12px
vertical-align top vertical-align top
color isDark ? #606984 : rgba(#000, 0.6) color var(--noteHeaderInfo)
font-size small font-size small
&:after &:after
@ -249,10 +249,10 @@ root(isDark)
margin-right 4px margin-right 4px
.note-preview .note-preview
color isDark ? #c2cad4 : rgba(#000, 0.7) color var(--noteText)
.note-ref .note-ref
color isDark ? #c2cad4 : rgba(#000, 0.7) color var(--noteText)
[data-fa] [data-fa]
font-size 1em font-size 1em
@ -283,9 +283,9 @@ root(isDark)
line-height 32px line-height 32px
text-align center text-align center
font-size 0.8em font-size 0.8em
color isDark ? #666b79 : #aaa color var(--dateDividerFg)
background isDark ? #242731 : #fdfdfd background var(--dateDividerBg)
border-bottom solid 1px isDark ? #1c2023 : rgba(#000, 0.05) border-bottom solid 1px var(--faceDivider)
span span
margin 0 16px margin 0 16px
@ -327,10 +327,4 @@ root(isDark)
> [data-fa] > [data-fa]
margin-right 4px margin-right 4px
.mk-notifications[data-darkmode]
root(true)
.mk-notifications:not([data-darkmode])
root(false)
</style> </style>

11
src/client/app/desktop/views/components/post-form-window.vue
View file

@ -77,7 +77,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) .mk-post-form-window
.mk-post-form-window--header .mk-post-form-window--header
.icon .icon
margin-right 8px margin-right 8px
@ -94,15 +94,6 @@ root(isDark)
.mk-post-form-window--body .mk-post-form-window--body
.notePreview .notePreview
if isDark
margin 16px 22px 0 22px
else
margin 16px 22px margin 16px 22px
.mk-post-form-window[data-darkmode]
root(true)
.mk-post-form-window:not([data-darkmode])
root(false)
</style> </style>

92
src/client/app/desktop/views/components/post-form.vue
View file

@ -446,12 +446,10 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .mk-post-form
root(isDark)
display block display block
padding 16px padding 16px
background isDark ? #282C37 : lighten($theme-color, 95%) background var(--desktopPostFormBg)
&:after &:after
content "" content ""
@ -465,26 +463,26 @@ root(isDark)
width 100% width 100%
padding 12px padding 12px
font-size 16px font-size 16px
color isDark ? #fff : #333 color var(--desktopPostFormTextareaFg)
background isDark ? #191d23 : #fff background var(--desktopPostFormTextareaBg)
outline none outline none
border solid 1px rgba($theme-color, 0.1) border solid 1px var(--primaryAlpha01)
border-radius 4px border-radius 4px
transition border-color .2s ease transition border-color .2s ease
&:hover &:hover
border-color rgba($theme-color, 0.2) border-color var(--primaryAlpha02)
transition border-color .1s ease transition border-color .1s ease
&:focus &:focus
border-color rgba($theme-color, 0.5) border-color var(--primaryAlpha05)
transition border-color 0s ease transition border-color 0s ease
&:disabled &:disabled
opacity 0.5 opacity 0.5
&::-webkit-input-placeholder &::-webkit-input-placeholder
color rgba($theme-color, 0.3) color var(--primaryAlpha03)
> input > input
margin-bottom 8px margin-bottom 8px
@ -498,17 +496,17 @@ root(isDark)
&:hover &:hover
& + * & + *
& + * + * & + * + *
border-color rgba($theme-color, 0.2) border-color var(--primaryAlpha02)
transition border-color .1s ease transition border-color .1s ease
&:focus &:focus
& + * & + *
& + * + * & + * + *
border-color rgba($theme-color, 0.5) border-color var(--primaryAlpha05)
transition border-color 0s ease transition border-color 0s ease
&.with &.with
border-bottom solid 1px rgba($theme-color, 0.1) !important border-bottom solid 1px var(--primaryAlpha01) !important
border-radius 4px 4px 0 0 border-radius 4px 4px 0 0
> .visibleUsers > .visibleUsers
@ -517,7 +515,7 @@ root(isDark)
> span > span
margin-right 16px margin-right 16px
color isDark ? #fff : #666 color var(--primary)
> .hashtags > .hashtags
margin 0 0 8px 0 margin 0 0 8px 0
@ -526,7 +524,7 @@ root(isDark)
font-size 14px font-size 14px
> b > b
color isDark ? #9baec8 : darken($theme-color, 20%) color var(--primary)
> * > *
margin-right 8px margin-right 8px
@ -535,14 +533,14 @@ root(isDark)
> .files > .files
margin 0 margin 0
padding 0 padding 0
background isDark ? #181b23 : lighten($theme-color, 98%) background var(--desktopPostFormTextareaBg)
border solid 1px rgba($theme-color, 0.1) border solid 1px var(--primaryAlpha01)
border-top none border-top none
border-radius 0 0 4px 4px border-radius 0 0 4px 4px
transition border-color .3s ease transition border-color .3s ease
&.with &.with
border-bottom solid 1px rgba($theme-color, 0.1) !important border-bottom solid 1px var(--primaryAlpha01) !important
border-radius 0 border-radius 0
> .remain > .remain
@ -552,7 +550,7 @@ root(isDark)
right 8px right 8px
margin 0 margin 0
padding 0 padding 0
color rgba($theme-color, 0.4) color var(--primaryAlpha04)
> div > div
padding 4px padding 4px
@ -586,8 +584,8 @@ root(isDark)
cursor pointer cursor pointer
> .mk-poll-editor > .mk-poll-editor
background isDark ? #181b23 : lighten($theme-color, 98%) background var(--desktopPostFormTextareaBg)
border solid 1px rgba($theme-color, 0.1) border solid 1px var(--primaryAlpha01)
border-top none border-top none
border-radius 0 0 4px 4px border-radius 0 0 4px 4px
transition border-color .3s ease transition border-color .3s ease
@ -595,7 +593,7 @@ root(isDark)
> .mk-uploader > .mk-uploader
margin 8px 0 0 0 margin 8px 0 0 0
padding 8px padding 8px
border solid 1px rgba($theme-color, 0.2) border solid 1px var(--primaryAlpha02)
border-radius 4px border-radius 4px
input[type='file'] input[type='file']
@ -612,22 +610,20 @@ root(isDark)
width 110px width 110px
height 40px height 40px
font-size 1em font-size 1em
color $theme-color-foreground color var(--primaryForeground)
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%) background var(--primary)
outline none outline none
border solid 1px lighten($theme-color, 15%) border none
border-radius 4px border-radius 4px
&:not(:disabled) &:not(:disabled)
font-weight bold font-weight bold
&:hover:not(:disabled) &:hover:not(:disabled)
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%) background var(--primaryLighten5)
border-color $theme-color
&:active:not(:disabled) &:active:not(:disabled)
background $theme-color background var(--primaryDarken5)
border-color $theme-color
&:focus &:focus
&:after &:after
@ -638,7 +634,7 @@ root(isDark)
right -5px right -5px
bottom -5px bottom -5px
left -5px left -5px
border 2px solid rgba($theme-color, 0.3) border 2px solid var(--primaryAlpha03)
border-radius 8px border-radius 8px
&:disabled &:disabled
@ -648,13 +644,13 @@ root(isDark)
&.wait &.wait
background linear-gradient( background linear-gradient(
45deg, 45deg,
darken($theme-color, 10%) 25%, var(--primaryDarken10) 25%,
$theme-color 25%, var(--primary) 25%,
$theme-color 50%, var(--primary) 50%,
darken($theme-color, 10%) 50%, var(--primaryDarken10) 50%,
darken($theme-color, 10%) 75%, var(--primaryDarken10) 75%,
$theme-color 75%, var(--primary) 75%,
$theme-color var(--primary)
) )
background-size 32px 32px background-size 32px 32px
animation stripe-bg 1.5s linear infinite animation stripe-bg 1.5s linear infinite
@ -673,7 +669,7 @@ root(isDark)
right 138px right 138px
margin 0 margin 0
line-height 40px line-height 40px
color rgba($theme-color, 0.5) color var(--primaryAlpha05)
&.over &.over
color #ec3828 color #ec3828
@ -691,7 +687,7 @@ root(isDark)
width 40px width 40px
height 40px height 40px
font-size 1em font-size 1em
color isDark ? $theme-color : rgba($theme-color, 0.5) color var(--desktopPostFormTransparentButtonFg)
background transparent background transparent
outline none outline none
border solid 1px transparent border solid 1px transparent
@ -699,12 +695,12 @@ root(isDark)
&:hover &:hover
background transparent background transparent
border-color isDark ? rgba($theme-color, 0.5) : rgba($theme-color, 0.3) border-color var(--primaryAlpha03)
&:active &:active
color rgba($theme-color, 0.6) color var(--primaryAlpha06)
background isDark ? transparent : linear-gradient(to bottom, lighten($theme-color, 80%) 0%, lighten($theme-color, 90%) 100%) background linear-gradient(to bottom, var(--desktopPostFormTransparentButtonActiveGradientStart) 0%, var(--desktopPostFormTransparentButtonActiveGradientEnd) 100%)
border-color rgba($theme-color, 0.5) border-color var(--primaryAlpha05)
box-shadow 0 2px 4px rgba(#000, 0.15) inset box-shadow 0 2px 4px rgba(#000, 0.15) inset
&:focus &:focus
@ -716,7 +712,7 @@ root(isDark)
right -5px right -5px
bottom -5px bottom -5px
left -5px left -5px
border 2px solid rgba($theme-color, 0.3) border 2px solid var(--primaryAlpha03)
border-radius 8px border-radius 8px
> .dropzone > .dropzone
@ -725,13 +721,7 @@ root(isDark)
top 0 top 0
width 100% width 100%
height 100% height 100%
border dashed 2px rgba($theme-color, 0.5) border dashed 2px var(--primaryAlpha05)
pointer-events none pointer-events none
.mk-post-form[data-darkmode]
root(true)
.mk-post-form:not([data-darkmode])
root(false)
</style> </style>

22
src/client/app/desktop/views/components/progress-dialog.vue
View file

@ -37,7 +37,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" module> <style lang="stylus" module>
@import '~const.styl'
.body .body
padding 18px 24px 24px 24px padding 18px 24px 24px 24px
@ -53,7 +53,7 @@ export default Vue.extend({
margin 0 0 4px 0 margin 0 0 4px 0
text-align center text-align center
line-height 16px line-height 16px
color rgba($theme-color, 0.7) color var(--primaryAlpha07)
&:after &:after
content '%' content '%'
@ -69,21 +69,21 @@ export default Vue.extend({
overflow hidden overflow hidden
&::-webkit-progress-value &::-webkit-progress-value
background $theme-color background var(--primary)
&::-webkit-progress-bar &::-webkit-progress-bar
background rgba($theme-color, 0.1) background var(--primaryAlpha01)
.waiting .waiting
background linear-gradient( background linear-gradient(
45deg, 45deg,
lighten($theme-color, 30%) 25%, var(--primaryLighten30) 25%,
$theme-color 25%, var(--primary) 25%,
$theme-color 50%, var(--primary) 50%,
lighten($theme-color, 30%) 50%, var(--primaryLighten30) 50%,
lighten($theme-color, 30%) 75%, var(--primaryLighten30) 75%,
$theme-color 75%, var(--primary) 75%,
$theme-color var(--primary)
) )
background-size 32px 32px background-size 32px 32px
animation progress-dialog-tag-progress-waiting 1.5s linear infinite animation progress-dialog-tag-progress-waiting 1.5s linear infinite

13
src/client/app/desktop/views/components/received-follow-requests-window.vue
View file

@ -2,7 +2,7 @@
<mk-window ref="window" is-modal width="450px" height="500px" @closed="destroyDom"> <mk-window ref="window" is-modal width="450px" height="500px" @closed="destroyDom">
<span slot="header">%fa:envelope R% %i18n:@title%</span> <span slot="header">%fa:envelope R% %i18n:@title%</span>
<div class="slpqaxdoxhvglersgjukmvizkqbmbokc" :data-darkmode="$store.state.device.darkmode"> <div class="slpqaxdoxhvglersgjukmvizkqbmbokc">
<div v-for="req in requests"> <div v-for="req in requests">
<router-link :key="req.id" :to="req.follower | userPage">{{ req.follower | userName }}</router-link> <router-link :key="req.id" :to="req.follower | userPage">{{ req.follower | userName }}</router-link>
<span> <span>
@ -47,8 +47,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.slpqaxdoxhvglersgjukmvizkqbmbokc
root(isDark)
padding 16px padding 16px
> button > button
@ -57,16 +56,10 @@ root(isDark)
> div > div
display flex display flex
padding 16px padding 16px
border solid 1px isDark ? #1c2023 : #eee border solid 1px var(--faceDivider)
border-radius 4px border-radius 4px
> span > span
margin 0 0 0 auto margin 0 0 0 auto
.slpqaxdoxhvglersgjukmvizkqbmbokc[data-darkmode]
root(true)
.slpqaxdoxhvglersgjukmvizkqbmbokc:not([data-darkmode])
root(false)
</style> </style>

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

@ -4,8 +4,8 @@
<template v-if="!quote"> <template v-if="!quote">
<footer> <footer>
<a class="quote" v-if="!quote" @click="onQuote">%i18n:@quote%</a> <a class="quote" v-if="!quote" @click="onQuote">%i18n:@quote%</a>
<button class="ui cancel" @click="cancel">%i18n:@cancel%</button> <ui-button class="button cancel" inline @click="cancel">%i18n:@cancel%</ui-button>
<button class="ui primary ok" @click="ok" :disabled="wait">{{ wait ? '%i18n:@reposting%' : '%i18n:@renote%' }}</button> <ui-button class="button ok" inline primary @click="ok" :disabled="wait">{{ wait ? '%i18n:@reposting%' : '%i18n:@renote%' }}</ui-button>
</footer> </footer>
</template> </template>
<template v-if="quote"> <template v-if="quote">
@ -57,16 +57,13 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .mk-renote-form
root(isDark)
> .preview > .preview
margin 16px 22px margin 16px 22px
> footer > footer
height 72px height 72px
background isDark ? #313543 : lighten($theme-color, 95%) background var(--desktopRenoteFormFooter)
> .quote > .quote
position absolute position absolute
@ -74,7 +71,7 @@ root(isDark)
left 28px left 28px
line-height 40px line-height 40px
button > .button
display block display block
position absolute position absolute
bottom 16px bottom 16px
@ -87,10 +84,4 @@ root(isDark)
&.ok &.ok
right 16px right 16px
.mk-renote-form[data-darkmode]
root(true)
.mk-renote-form:not([data-darkmode])
root(false)
</style> </style>

19
src/client/app/desktop/views/components/settings.profile.vue
View file

@ -6,31 +6,28 @@
<button class="ui" @click="updateAvatar">%i18n:@choice-avatar%</button> <button class="ui" @click="updateAvatar">%i18n:@choice-avatar%</button>
</label> </label>
<label class="ui from group"> <label class="ui from group">
<p>%i18n:@name%</p> <ui-input v-model="name" type="text">%i18n:@name%</ui-input>
<input v-model="name" type="text" class="ui"/>
</label> </label>
<label class="ui from group"> <label class="ui from group">
<p>%i18n:@location%</p> <ui-input v-model="location" type="text">%i18n:@location%</ui-input>
<input v-model="location" type="text" class="ui"/>
</label> </label>
<label class="ui from group"> <label class="ui from group">
<p>%i18n:@description%</p> <ui-textarea v-model="description">%i18n:@description%</ui-textarea>
<textarea v-model="description" class="ui"></textarea>
</label> </label>
<label class="ui from group"> <label class="ui from group">
<p>%i18n:@birthday%</p> <p>%i18n:@birthday%</p>
<input type="date" v-model="birthday"/> <input type="date" v-model="birthday"/>
</label> </label>
<button class="ui primary" @click="save">%i18n:@save%</button> <ui-button primary @click="save">%i18n:@save%</ui-button>
<section> <section>
<h2>%i18n:@locked-account%</h2> <h2>%i18n:@locked-account%</h2>
<mk-switch v-model="$store.state.i.isLocked" @change="onChangeIsLocked" text="%i18n:@is-locked%"/> <ui-switch v-model="$store.state.i.isLocked" @change="onChangeIsLocked">%i18n:@is-locked%</ui-switch>
</section> </section>
<section> <section>
<h2>%i18n:@other%</h2> <h2>%i18n:@other%</h2>
<mk-switch v-model="$store.state.i.isBot" @change="onChangeIsBot" text="%i18n:@is-bot%"/> <ui-switch v-model="$store.state.i.isBot" @change="onChangeIsBot">%i18n:@is-bot%</ui-switch>
<mk-switch v-model="$store.state.i.isCat" @change="onChangeIsCat" text="%i18n:@is-cat%"/> <ui-switch v-model="$store.state.i.isCat" @change="onChangeIsCat">%i18n:@is-cat%</ui-switch>
<mk-switch v-model="alwaysMarkNsfw" text="%i18n:common.always-mark-nsfw%"/> <ui-switch v-model="alwaysMarkNsfw">%i18n:common.always-mark-nsfw%</ui-switch>
</section> </section>
</div> </div>
</template> </template>

9
src/client/app/desktop/views/components/settings.tags.vue
View file

@ -47,8 +47,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.vfcitkilproprqtbnpoertpsziierwzi
root(isDark)
> .timeline > .timeline
padding-bottom 16px padding-bottom 16px
border-bottom solid 1px rgba(#000, 0.1) border-bottom solid 1px rgba(#000, 0.1)
@ -56,10 +55,4 @@ root(isDark)
> .add > .add
margin-top 16px margin-top 16px
.vfcitkilproprqtbnpoertpsziierwzi[data-darkmode]
root(true)
.vfcitkilproprqtbnpoertpsziierwzi:not([data-darkmode])
root(false)
</style> </style>

144
src/client/app/desktop/views/components/settings.vue
View file

@ -19,18 +19,25 @@
<x-profile/> <x-profile/>
</section> </section>
<section class="web" v-show="page == 'web'">
<h1>%i18n:@theme%</h1>
<mk-theme/>
</section>
<section class="web" v-show="page == 'web'"> <section class="web" v-show="page == 'web'">
<h1>%i18n:@behaviour%</h1> <h1>%i18n:@behaviour%</h1>
<mk-switch v-model="fetchOnScroll" text="%i18n:@fetch-on-scroll%"> <ui-switch v-model="fetchOnScroll">
<span>%i18n:@fetch-on-scroll-desc%</span> %i18n:@fetch-on-scroll%
</mk-switch> <span slot="desc">%i18n:@fetch-on-scroll-desc%</span>
<mk-switch v-model="autoPopout" text="%i18n:@auto-popout%"> </ui-switch>
<span>%i18n:@auto-popout-desc%</span> <ui-switch v-model="autoPopout">
</mk-switch> %i18n:@auto-popout%
<span slot="desc">%i18n:@auto-popout-desc%</span>
</ui-switch>
<section> <section>
<header>%i18n:@note-visibility%</header> <header>%i18n:@note-visibility%</header>
<mk-switch v-model="rememberNoteVisibility" text="%i18n:@remember-note-visibility%"/> <ui-switch v-model="rememberNoteVisibility">%i18n:@remember-note-visibility%</ui-switch>
<section> <section>
<header>%i18n:@default-note-visibility%</header> <header>%i18n:@default-note-visibility%</header>
<ui-select v-model="defaultNoteVisibility"> <ui-select v-model="defaultNoteVisibility">
@ -45,9 +52,10 @@
<details> <details>
<summary>%i18n:@advanced%</summary> <summary>%i18n:@advanced%</summary>
<mk-switch v-model="apiViaStream" text="%i18n:@api-via-stream%"> <ui-switch v-model="apiViaStream">
<span>%i18n:@api-via-stream-desc%</span> %i18n:@api-via-stream%
</mk-switch> <span slot="desc">%i18n:@api-via-stream-desc%</span>
</ui-switch>
</details> </details>
</section> </section>
@ -59,37 +67,35 @@
<div class="div"> <div class="div">
<button class="ui" @click="updateWallpaper">%i18n:@choose-wallpaper%</button> <button class="ui" @click="updateWallpaper">%i18n:@choose-wallpaper%</button>
<button class="ui" @click="deleteWallpaper">%i18n:@delete-wallpaper%</button> <button class="ui" @click="deleteWallpaper">%i18n:@delete-wallpaper%</button>
<mk-switch v-model="darkmode" text="%i18n:@dark-mode%"/> <ui-switch v-model="darkmode">%i18n:@dark-mode%</ui-switch>
<mk-switch v-model="useShadow" text="%i18n:@use-shadow%"/> <ui-switch v-model="useShadow">%i18n:@use-shadow%</ui-switch>
<mk-switch v-model="roundedCorners" text="%i18n:@rounded-corners%"/> <ui-switch v-model="roundedCorners">%i18n:@rounded-corners%</ui-switch>
<mk-switch v-model="circleIcons" text="%i18n:@circle-icons%"/> <ui-switch v-model="circleIcons">%i18n:@circle-icons%</ui-switch>
<mk-switch v-model="reduceMotion" text="%i18n:common.reduce-motion%"/> <ui-switch v-model="reduceMotion">%i18n:common.reduce-motion%</ui-switch>
<mk-switch v-model="contrastedAcct" text="%i18n:@contrasted-acct%"/> <ui-switch v-model="contrastedAcct">%i18n:@contrasted-acct%</ui-switch>
<mk-switch v-model="showFullAcct" text="%i18n:common.show-full-acct%"/> <ui-switch v-model="showFullAcct">%i18n:common.show-full-acct%</ui-switch>
<mk-switch v-model="gradientWindowHeader" text="%i18n:@gradient-window-header%"/> <ui-switch v-model="iLikeSushi">%i18n:common.i-like-sushi%</ui-switch>
<mk-switch v-model="iLikeSushi" text="%i18n:common.i-like-sushi%"/>
</div> </div>
<mk-switch v-model="showPostFormOnTopOfTl" text="%i18n:@post-form-on-timeline%"/> <ui-switch v-model="showPostFormOnTopOfTl">%i18n:@post-form-on-timeline%</ui-switch>
<mk-switch v-model="suggestRecentHashtags" text="%i18n:@suggest-recent-hashtags%"/> <ui-switch v-model="suggestRecentHashtags">%i18n:@suggest-recent-hashtags%</ui-switch>
<mk-switch v-model="showClockOnHeader" text="%i18n:@show-clock-on-header%"/> <ui-switch v-model="showClockOnHeader">%i18n:@show-clock-on-header%</ui-switch>
<mk-switch v-model="alwaysShowNsfw" text="%i18n:common.always-show-nsfw%"/> <ui-switch v-model="alwaysShowNsfw">%i18n:common.always-show-nsfw%</ui-switch>
<mk-switch v-model="showReplyTarget" text="%i18n:@show-reply-target%"/> <ui-switch v-model="showReplyTarget">%i18n:@show-reply-target%</ui-switch>
<mk-switch v-model="showMyRenotes" text="%i18n:@show-my-renotes%"/> <ui-switch v-model="showMyRenotes">%i18n:@show-my-renotes%</ui-switch>
<mk-switch v-model="showRenotedMyNotes" text="%i18n:@show-renoted-my-notes%"/> <ui-switch v-model="showRenotedMyNotes">%i18n:@show-renoted-my-notes%</ui-switch>
<mk-switch v-model="showLocalRenotes" text="%i18n:@show-local-renotes%"/> <ui-switch v-model="showLocalRenotes">%i18n:@show-local-renotes%</ui-switch>
<mk-switch v-model="showMaps" text="%i18n:@show-maps%"> <ui-switch v-model="showMaps">%i18n:@show-maps%</ui-switch>
<span>%i18n:@show-maps-desc%</span> <ui-switch v-model="disableAnimatedMfm">%i18n:common.disable-animated-mfm%</ui-switch>
</mk-switch> <ui-switch v-model="games_reversi_showBoardLabels">%i18n:common.show-reversi-board-labels%</ui-switch>
<mk-switch v-model="disableAnimatedMfm" text="%i18n:common.disable-animated-mfm%"/> <ui-switch v-model="games_reversi_useContrastStones">%i18n:common.use-contrast-reversi-stones%</ui-switch>
<mk-switch v-model="games_reversi_showBoardLabels" text="%i18n:common.show-reversi-board-labels%"/>
<mk-switch v-model="games_reversi_useContrastStones" text="%i18n:common.use-contrast-reversi-stones%"/>
</section> </section>
<section class="web" v-show="page == 'web'"> <section class="web" v-show="page == 'web'">
<h1>%i18n:@sound%</h1> <h1>%i18n:@sound%</h1>
<mk-switch v-model="enableSounds" text="%i18n:@enable-sounds%"> <ui-switch v-model="enableSounds">
<span>%i18n:@enable-sounds-desc%</span> %i18n:@enable-sounds%
</mk-switch> <span slot="desc">%i18n:@enable-sounds-desc%</span>
</ui-switch>
<label>%i18n:@volume%</label> <label>%i18n:@volume%</label>
<input type="range" <input type="range"
v-model="soundVolume" v-model="soundVolume"
@ -102,7 +108,7 @@
<section class="web" v-show="page == 'web'"> <section class="web" v-show="page == 'web'">
<h1>%i18n:@mobile%</h1> <h1>%i18n:@mobile%</h1>
<mk-switch v-model="disableViaMobile" text="%i18n:@disable-via-mobile%"/> <ui-switch v-model="disableViaMobile">%i18n:@disable-via-mobile%</ui-switch>
</section> </section>
<section class="web" v-show="page == 'web'"> <section class="web" v-show="page == 'web'">
@ -131,9 +137,10 @@
<section class="notification" v-show="page == 'notification'"> <section class="notification" v-show="page == 'notification'">
<h1>%i18n:@notification%</h1> <h1>%i18n:@notification%</h1>
<mk-switch v-model="$store.state.i.settings.autoWatch" @change="onChangeAutoWatch" text="%i18n:@auto-watch%"> <ui-switch v-model="$store.state.i.settings.autoWatch" @change="onChangeAutoWatch">
<span>%i18n:@auto-watch-desc%</span> %i18n:@auto-watch%
</mk-switch> <span slot="desc">%i18n:@auto-watch-desc%</span>
</ui-switch>
</section> </section>
<section class="drive" v-show="page == 'drive'"> <section class="drive" v-show="page == 'drive'">
@ -201,20 +208,23 @@
</button> </button>
<details> <details>
<summary>%i18n:@update-settings%</summary> <summary>%i18n:@update-settings%</summary>
<mk-switch v-model="preventUpdate" text="%i18n:@prevent-update%"> <ui-switch v-model="preventUpdate">
<span>%i18n:@prevent-update-desc%</span> %i18n:@prevent-update%
</mk-switch> <span slot="desc">%i18n:@prevent-update-desc%</span>
</ui-switch>
</details> </details>
</section> </section>
<section class="other" v-show="page == 'other'"> <section class="other" v-show="page == 'other'">
<h1>%i18n:@advanced-settings%</h1> <h1>%i18n:@advanced-settings%</h1>
<mk-switch v-model="debug" text="%i18n:@debug-mode%"> <ui-switch v-model="debug">
<span>%i18n:@debug-mode-desc%</span> %i18n:@debug-mode%
</mk-switch> <span slot="desc">%i18n:@debug-mode-desc%</span>
<mk-switch v-model="enableExperimentalFeatures" text="%i18n:@experimental%"> </ui-switch>
<span>%i18n:@experimental-desc%</span> <ui-switch v-model="enableExperimentalFeatures">
</mk-switch> %i18n:@experimental%
<span slot="desc">%i18n:@experimental-desc%</span>
</ui-switch>
</section> </section>
</div> </div>
</div> </div>
@ -421,12 +431,7 @@ export default Vue.extend({
disableViaMobile: { disableViaMobile: {
get() { return this.$store.state.settings.disableViaMobile; }, get() { return this.$store.state.settings.disableViaMobile; },
set(value) { this.$store.dispatch('settings/set', { key: 'disableViaMobile', value }); } set(value) { this.$store.dispatch('settings/set', { key: 'disableViaMobile', value }); }
}, }
gradientWindowHeader: {
get() { return this.$store.state.settings.gradientWindowHeader; },
set(value) { this.$store.dispatch('settings/set', { key: 'gradientWindowHeader', value }); }
},
}, },
created() { created() {
(this as any).os.getMeta().then(meta => { (this as any).os.getMeta().then(meta => {
@ -492,9 +497,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .mk-settings
root(isDark)
display flex display flex
width 100% width 100%
height 100% height 100%
@ -505,13 +508,13 @@ root(isDark)
height 100% height 100%
padding 16px 0 0 0 padding 16px 0 0 0
overflow auto overflow auto
border-right solid 1px isDark ? #1c2023 : #ddd border-right solid 1px var(--faceDivider)
> p > p
display block display block
padding 10px 16px padding 10px 16px
margin 0 margin 0
color isDark ? #9aa2a7 : #666 color var(--desktopSettingsNavItem)
cursor pointer cursor pointer
user-select none user-select none
transition margin-left 0.2s ease transition margin-left 0.2s ease
@ -520,11 +523,11 @@ root(isDark)
margin-right 4px margin-right 4px
&:hover &:hover
color isDark ? #fff : #555 color var(--desktopSettingsNavItemHover)
&.active &.active
margin-left 8px margin-left 8px
color $theme-color !important color var(--primary) !important
> .pages > .pages
width 100% width 100%
@ -534,14 +537,13 @@ root(isDark)
> section > section
margin 32px margin 32px
color isDark ? #c4ccd2 : #4a535a color var(--text)
> h1 > h1
margin 0 0 1em 0 margin 0 0 1em 0
padding 0 0 8px 0 padding 0 0 8px 0
font-size 1em font-size 1em
color isDark ? #e3e7ea : #555 border-bottom solid 1px var(--faceDivider)
border-bottom solid 1px isDark ? #1c2023 : #eee
&, >>> * &, >>> *
.ui.button.block .ui.button.block
@ -554,18 +556,12 @@ root(isDark)
margin 0 0 1em 0 margin 0 0 1em 0
padding 0 0 8px 0 padding 0 0 8px 0
font-size 1em font-size 1em
color isDark ? #e3e7ea : #555 color var(--text)
border-bottom solid 1px isDark ? #1c2023 : #eee border-bottom solid 1px var(--faceDivider)
> .web > .web
> .div > .div
border-bottom solid 1px isDark ? #1c2023 : #eee border-bottom solid 1px var(--faceDivider)
margin 16px 0 margin 16px 0
.mk-settings[data-darkmode]
root(true)
.mk-settings:not([data-darkmode])
root(false)
</style> </style>

2
src/client/app/desktop/views/components/sub-note-content.vue
View file

@ -38,7 +38,7 @@ export default Vue.extend({
> .rp > .rp
margin-left 4px margin-left 4px
font-style oblique font-style oblique
color #a0bf46 color var(--renoteText)
mk-poll mk-poll
font-size 80% font-size 80%

2
src/client/app/desktop/views/components/timeline.core.vue
View file

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

37
src/client/app/desktop/views/components/timeline.vue
View file

@ -175,10 +175,8 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .mk-timeline
background var(--face)
root(isDark)
background isDark ? #282C37 : #fff
box-shadow var(--shadow) box-shadow var(--shadow)
border-radius var(--round) border-radius var(--round)
overflow hidden overflow hidden
@ -186,8 +184,8 @@ root(isDark)
> header > header
padding 0 8px padding 0 8px
z-index 10 z-index 10
background isDark ? #313543 : #fff background var(--faceHeader)
box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08) box-shadow 0 1px var(--desktopTimelineHeaderShadow)
> .buttons > .buttons
position absolute position absolute
@ -200,23 +198,20 @@ root(isDark)
padding 0 8px padding 0 8px
font-size 0.9em font-size 0.9em
line-height 42px line-height 42px
color isDark ? #9baec8 : #ccc color var(--faceTextButton)
> .badge > .badge
position absolute position absolute
top -4px top -4px
right 4px right 4px
font-size 10px font-size 10px
color $theme-color color var(--primary)
&:hover &:hover
color isDark ? #b2c1d5 : #aaa color var(--faceTextButtonHover)
&:active
color isDark ? #b2c1d5 : #999
&[data-active] &[data-active]
color $theme-color color var(--primary)
cursor default cursor default
&:before &:before
@ -227,7 +222,7 @@ root(isDark)
left 0 left 0
width 100% width 100%
height 2px height 2px
background $theme-color background var(--primary)
> span > span
display inline-block display inline-block
@ -237,7 +232,7 @@ root(isDark)
user-select none user-select none
&[data-active] &[data-active]
color $theme-color color var(--primary)
cursor default cursor default
font-weight bold font-weight bold
@ -249,19 +244,13 @@ root(isDark)
left -8px left -8px
width calc(100% + 16px) width calc(100% + 16px)
height 2px height 2px
background $theme-color background var(--primary)
&:not([data-active]) &:not([data-active])
color isDark ? #9aa2a7 : #6f7477 color var(--desktopTimelineSrc)
cursor pointer cursor pointer
&:hover &:hover
color isDark ? #d9dcde : #525a5f color var(--desktopTimelineSrcHover)
.mk-timeline[data-darkmode]
root(true)
.mk-timeline:not([data-darkmode])
root(false)
</style> </style>

14
src/client/app/desktop/views/components/ui-notification.vue
View file

@ -36,7 +36,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) .mk-ui-notification
display block display block
position fixed position fixed
z-index 10000 z-index 10000
@ -46,10 +46,10 @@ root(isDark)
margin 0 auto margin 0 auto
padding 128px 0 0 0 padding 128px 0 0 0
width 500px width 500px
color rgba(isDark ? #fff : #000, 0.6) color var(--desktopNotificationFg)
background rgba(isDark ? #282C37 : #fff, 0.9) background var(--desktopNotificationBg)
border-radius 0 0 8px 8px border-radius 0 0 8px 8px
box-shadow 0 2px 4px rgba(#000, isDark ? 0.4 : 0.2) box-shadow 0 2px 4px var(--desktopNotificationShadow)
transform translateY(-64px) transform translateY(-64px)
opacity 0 opacity 0
@ -58,10 +58,4 @@ root(isDark)
line-height 64px line-height 64px
text-align center text-align center
.mk-ui-notification[data-darkmode]
root(true)
.mk-ui-notification:not([data-darkmode])
root(false)
</style> </style>

33
src/client/app/desktop/views/components/ui.header.account.vue
View file

@ -127,14 +127,12 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' .account
root(isDark)
> .header > .header
display block display block
margin 0 margin 0
padding 0 padding 0
color #9eaba8 color var(--desktopHeaderFg)
border none border none
background transparent background transparent
cursor pointer cursor pointer
@ -144,14 +142,11 @@ root(isDark)
&:hover &:hover
&[data-active='true'] &[data-active='true']
color isDark ? #fff : darken(#9eaba8, 20%) color var(--desktopHeaderHoverFg)
> .avatar > .avatar
filter saturate(150%) filter saturate(150%)
&:active
color isDark ? #fff : darken(#9eaba8, 30%)
> .username > .username
display block display block
float left float left
@ -177,7 +172,7 @@ root(isDark)
transition filter 100ms ease transition filter 100ms ease
> .menu > .menu
$bgcolor = isDark ? #282c37 : #fff $bgcolor = var(--face)
display block display block
position absolute position absolute
top 56px top 56px
@ -220,7 +215,7 @@ root(isDark)
& + ul & + ul
padding-top 10px padding-top 10px
border-top solid 1px isDark ? #1c2023 : #eee border-top solid 1px var(--faceDivider)
> li > li
display block display block
@ -234,7 +229,7 @@ root(isDark)
padding 0 28px padding 0 28px
margin 0 margin 0
line-height 40px line-height 40px
color isDark ? #c8cece : #868C8C color var(--text)
cursor pointer cursor pointer
* *
@ -249,8 +244,8 @@ root(isDark)
padding 2px 8px padding 2px 8px
font-size 90% font-size 90%
font-style normal font-style normal
background $theme-color background var(--primary)
color $theme-color-foreground color var(--primaryForeground)
border-radius 8px border-radius 8px
> [data-fa]:first-child > [data-fa]:first-child
@ -269,11 +264,11 @@ root(isDark)
&:hover, &:active &:hover, &:active
text-decoration none text-decoration none
background $theme-color background var(--primary)
color $theme-color-foreground color var(--primaryForeground)
&:active &:active
background darken($theme-color, 10%) background var(--primaryDarken10)
&.signout &.signout
$color = #e64137 $color = #e64137
@ -290,10 +285,4 @@ root(isDark)
transform-origin: center -16px; transform-origin: center -16px;
} }
.account[data-darkmode]
root(true)
.account:not([data-darkmode])
root(false)
</style> </style>

Some files were not shown because too many files have changed in this diff Show more