廃止 UI影と丸めオプション

locales/cs-CZ.yml

@@ -172,8 +172,6 @@ common:
     deck-column-width-normal: "Normální"
     deck-column-width-wider: "Poněkud široké"
     deck-column-width-wide: "Široké"
-    use-shadow: "Používat v rozhraní stíny"
-    rounded-corners: "Zakulatit rohy v rozhraní"
     circle-icons: "Používat kulaté ikony"
     contrasted-acct: "Přidat uživatelskému účtu kontrast"
     wallpaper: "Obrázek na pozadí"

locales/en-US.yml

@@ -217,8 +217,6 @@ common:
     deck-column-width-normal: "Regular"
     deck-column-width-wider: "Slightly wide"
     deck-column-width-wide: "Wide"
-    use-shadow: "Use shadows in the UI"
-    rounded-corners: "Round the corners of the UI"
     circle-icons: "Use circular icons"
     contrasted-acct: "Add contrast to user account"
     wallpaper: "Background image"

locales/es-ES.yml

@@ -121,8 +121,6 @@ common:
     deck-column-width-normal: "Normal"
     deck-column-width-wider: "Un poco ancho"
     deck-column-width-wide: "Ancho"
-    use-shadow: "Usar sombras en la Interfaz de Usuario"
-    rounded-corners: "Esquinas redondeadas en la Interfaz de Usuario"
     circle-icons: "Usar iconos circulares"
     contrasted-acct: "Añadir contraste al nombre de usuario"
     wallpaper: "Fondo de pantalla"

locales/ja-JP.yml

@@ -228,8 +228,6 @@ common:
     deck-column-width-normal: "普通"
     deck-column-width-wider: "やや広"
     deck-column-width-wide: "広"
-    use-shadow: "UIに影を使用"
-    rounded-corners: "UIの角を丸める"
     circle-icons: "円形のアイコンを使用"
     contrasted-acct: "ユーザー名にコントラストを付ける"
     wallpaper: "壁紙"

locales/ko-KR.yml

@@ -172,8 +172,6 @@ common:
     deck-column-width-normal: "보통"
     deck-column-width-wider: "조금 넓음"
     deck-column-width-wide: "넓음"
-    use-shadow: "UI에 그림자 효과 적용"
-    rounded-corners: "UI의 모서리를 둥글게 설정"
     circle-icons: "원형 아이콘 사용"
     contrasted-acct: "사용자명에 대비 추가"
     wallpaper: "배경"

locales/zh-CN.yml

@@ -172,8 +172,6 @@ common:
     deck-column-width-normal: "普通"
     deck-column-width-wider: "很宽"
     deck-column-width-wide: "宽"
-    use-shadow: "在UI中使用阴影效果"
-    rounded-corners: "UI界面圆角效果"
     circle-icons: "使用圆形图标"
     contrasted-acct: "增加用户名的对比度"
     wallpaper: "壁纸"

src/client/app/common/views/components/page/page.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="iroscrza" :class="{ shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners, center: page.alignCenter, serif: page.font === 'serif' }">
+<div class="iroscrza" :class="{ center: page.alignCenter, serif: page.font === 'serif' }">
 	<header v-if="showTitle">
 		<div class="title">{{ page.title }}</div>
 	</header>
@@ -137,20 +137,16 @@ export default Vue.extend({
 .iroscrza
 	overflow hidden
 	background var(--face)
-	
+	border-radius 6px
+	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+
 	&.serif
 		> div
 			font-family serif
 
 	&.center
 		text-align center
 
-	&.round
-		border-radius 6px
-
-	&.shadow
-		box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
-
 	> header
 		> .title
 			z-index 1

src/client/app/common/views/components/settings/settings.vue

@@ -32,8 +32,6 @@
 				<ui-radio v-model="navbar" value="right">{{ $t('@._settings.navbar-position-right') }}</ui-radio>
 			</section>
 			<section>
-				<ui-switch v-model="useShadow" v-if="isAdvanced">{{ $t('@._settings.use-shadow') }}</ui-switch>
-				<ui-switch v-model="roundedCorners" v-if="isAdvanced">{{ $t('@._settings.rounded-corners') }}</ui-switch>
 				<ui-switch v-model="circleIcons">{{ $t('@._settings.circle-icons') }}</ui-switch>
 				<ui-switch v-model="reduceMotion">{{ $t('@._settings.reduce-motion') }}</ui-switch>
 				<ui-switch v-model="contrastedAcct" v-if="isAdvanced">{{ $t('@._settings.contrasted-acct') }}</ui-switch>
@@ -474,16 +472,6 @@ export default Vue.extend({
 			set(value) { this.$store.dispatch('settings/set', { key: 'disableViaMobile', value }); }
 		},
 
-		useShadow: {
-			get() { return this.$store.state.device.useShadow; },
-			set(value) { this.$store.commit('device/set', { key: 'useShadow', value }); }
-		},
-
-		roundedCorners: {
-			get() { return this.$store.state.device.roundedCorners; },
-			set(value) { this.$store.commit('device/set', { key: 'roundedCorners', value }); }
-		},
-
 		lineWidth: {
 			get() { return this.$store.state.device.lineWidth; },
 			set(value) { this.$store.commit('device/set', { key: 'lineWidth', value }); }

src/client/app/common/views/components/ui/card.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="ui-card" :class="{ shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }">
+<div class="ui-card">
 	<header>
 		<slot name="title"></slot>
 	</header>
@@ -25,12 +25,8 @@ export default Vue.extend({
 	max-width 850px
 	color var(--faceText)
 	background var(--face)
-
-	&.round
-		border-radius 6px
-
-	&.shadow
-		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)
+	border-radius 6px
+	box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
 
 	> header
 		padding 16px

src/client/app/common/views/deck/deck.column.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs" :class="{ naked, narrow, active, isStacked, draghover, dragging, dropready, isMobile: $root.isMobile, shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }"
+<div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs" :class="{ naked, narrow, active, isStacked, draghover, dragging, dropready, isMobile: $root.isMobile }"
 		@dragover.prevent.stop="onDragover"
 		@dragleave="onDragleave"
 		@drop.prevent.stop="onDrop"
@@ -323,12 +323,8 @@ export default Vue.extend({
 	height 100%
 	background var(--face)
 	overflow hidden
-
-	&.round
-		border-radius 6px
-
-	&.shadow
-		box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+	border-radius 6px
+	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
 
 	&.draghover
 		box-shadow 0 0 0 2px var(--primaryAlpha08)

src/client/app/common/views/pages/page-editor/page-editor.vue

@@ -1,6 +1,6 @@
 <template>
 <div>
-	<div class="gwbmwxkm" :class="{ shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }">
+	<div class="gwbmwxkm">
 		<header>
 			<div class="title"><fa :icon="faStickyNote"/> {{ readonly ? $t('read-page') : pageId ? $t('edit-page') : $t('new-page') }}</div>
 			<div class="buttons">
@@ -429,12 +429,8 @@ export default Vue.extend({
 	overflow hidden
 	background var(--face)
 	margin-bottom 16px
-
-	&.round
-		border-radius 6px
-
-	&.shadow
-		box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+	border-radius 6px
+	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
 
 	> header
 		background var(--faceHeader)

src/client/app/desktop/views/components/calendar.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="mk-calendar" :data-melt="design == 4 || design == 5" :class="{ shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }">
+<div class="mk-calendar" :data-melt="design == 4 || design == 5">
 	<template v-if="design == 0 || design == 1">
 		<button @click="prev" :title="$t('prev')"><fa icon="chevron-circle-left"/></button>
 		<p class="title">{{ $t('title', { year, month }) }}</p>
@@ -134,12 +134,8 @@ export default Vue.extend({
 	color var(--calendarDay)
 	background var(--face)
 	overflow hidden
-
-	&.round
-		border-radius 6px
-
-	&.shadow
-		box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+	border-radius 6px
+	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
 
 	&[data-melt]
 		background transparent !important

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

@@ -1,5 +1,5 @@
 <template>
-<div class="mk-note-detail" :title="title" tabindex="-1" :class="{ shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }">
+<div class="mk-note-detail" :title="title" tabindex="-1">
 	<button
 		class="read-more"
 		v-if="appearNote.reply && appearNote.reply.replyId && conversation.length == 0"
@@ -162,15 +162,8 @@ export default Vue.extend({
 	overflow hidden
 	text-align left
 	background var(--face)
-
-	&.round
-		border-radius 6px
-
-		> .read-more
-			border-radius 6px 6px 0 0
-
-	&.shadow
-		box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+	border-radius 6px
+	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
 
 	> .read-more
 		display block
@@ -185,6 +178,7 @@ export default Vue.extend({
 		outline none
 		border none
 		border-bottom solid 1px var(--faceDivider)
+		border-radius 6px 6px 0 0
 
 		&:hover
 			box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)

src/client/app/desktop/views/components/notes.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="mk-notes" :class="{ shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }">
+<div class="mk-notes">
 	<slot name="header"></slot>
 
 	<div class="newer-indicator" :style="{ top: $store.state.uiHeaderHeight + 'px' }" v-show="queue.length > 0"></div>
@@ -230,12 +230,8 @@ export default Vue.extend({
 .mk-notes
 	background var(--face)
 	overflow hidden
-
-	&.round
-		border-radius 6px
-
-	&.shadow
-		box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+	border-radius 6px
+	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
 
 	.transition
 		.mk-notes-enter

src/client/app/desktop/views/components/ui-container.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="kedshtep" :class="{ naked, inNakedDeckColumn, shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }">
+<div class="kedshtep" :class="{ naked, inNakedDeckColumn }">
 	<header v-if="showHeader" :class="{ bodyTogglable }" @click="toggleContent(!showBody)">
 		<div class="title"><slot name="header"></slot></div>
 		<slot name="func"></slot>
@@ -61,12 +61,8 @@ export default Vue.extend({
 
 	&:not(.inNakedDeckColumn)
 		background var(--face)
-
-		&.round
-			border-radius 6px
-
-		&.shadow
-			box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+		border-radius 6px
+		box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
 
 		& + .kedshtep
 			margin-top 16px

src/client/app/desktop/views/components/ui.header.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="header" :style="style">
+<div class="header" :style="{'box-shadow': '0 0px 8px rgba(0, 0, 0, 0.2)'}">
 	<p class="warn" v-if="env != 'production'">{{ $t('@.do-not-use-in-production') }} <a href="/assets/flush.html?force">Flush</a></p>
 	<div class="main" ref="main">
 		<div class="backdrop"></div>
@@ -58,14 +58,6 @@ export default Vue.extend({
 		};
 	},
 
-	computed: {
-		style(): any {
-			return {
-				'box-shadow': this.$store.state.device.useShadow ? '0 0px 8px rgba(0, 0, 0, 0.2)' : 'none'
-			};
-		}
-	},
-
 	mounted() {
 		this.$store.commit('setUiHeaderHeight', this.$el.offsetHeight);
 	},

src/client/app/desktop/views/components/ui.sidebar.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="header" :class="navbar" :data-shadow="$store.state.device.useShadow">
+<div class="header" :class="navbar">
 	<div class="body">
 		<div class="post">
 			<button @click="post" :title="$t('title')"><fa icon="pencil-alt"/></button>
@@ -62,7 +62,7 @@
 	</div>
 
 	<transition :name="`slide-${navbar}`">
-		<div class="notifications" v-if="showNotifications" ref="notifications" :class="navbar" :data-shadow="$store.state.device.useShadow">
+		<div class="notifications" v-if="showNotifications" ref="notifications" :class="navbar">
 			<mk-notifications/>
 		</div>
 	</transition>
@@ -223,15 +223,11 @@ export default Vue.extend({
 
 	&.left
 		left 0
-
-		&[data-shadow]
-			box-shadow 4px 0 4px rgba(0, 0, 0, 0.1)
+		box-shadow 4px 0 4px rgba(0, 0, 0, 0.1)
 
 	&.right
 		right 0
-
-		&[data-shadow]
-			box-shadow -4px 0 4px rgba(0, 0, 0, 0.1)
+		box-shadow -4px 0 4px rgba(0, 0, 0, 0.1)
 
 	> .body
 		position fixed
@@ -303,15 +299,11 @@ export default Vue.extend({
 
 		&.left
 			left $width
-
-			&[data-shadow]
-				box-shadow 4px 0 4px rgba(0, 0, 0, 0.1)
+			box-shadow 4px 0 4px rgba(0, 0, 0, 0.1)
 
 		&.right
 			right $width
-
-			&[data-shadow]
-				box-shadow -4px 0 4px rgba(0, 0, 0, 0.1)
+			box-shadow -4px 0 4px rgba(0, 0, 0, 0.1)
 
 	.nav
 		> *

src/client/app/desktop/views/home/timeline.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="pwbzawku">
-	<mk-post-form class="form" :class="{ shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }" v-if="$store.state.settings.showPostFormOnTopOfTl"/>
+	<mk-post-form class="form" v-if="$store.state.settings.showPostFormOnTopOfTl"/>
 	<div class="main">
 		<component :is="src == 'list' ? 'mk-user-list-timeline' : 'x-core'" ref="tl" v-bind="options">
 			<header class="zahtxcqi">
@@ -195,12 +195,8 @@ export default Vue.extend({
 .pwbzawku
 	> .form
 		margin-bottom 16px
-
-		&.round
-			border-radius 6px
-
-		&.shadow
-			box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+		border-radius 6px
+		box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
 
 	.zahtxcqi
 		display flex