wip

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

@@ -1,9 +1,7 @@
 <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>
 
 <script lang="ts">
@@ -13,6 +11,16 @@ export default Vue.extend({
 		type: {
 			type: String,
 			required: false
+		},
+		primary: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		inline: {
+			type: Boolean,
+			required: false,
+			default: false
 		}
 	},
 	data() {
@@ -32,21 +40,36 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(fill)
+.dmtdnykelhudezerjlfpbhgovrgnqqgr
-	> button
+	display block
-		display block
+	width 100%
-		width 100%
+	margin 0
-		margin 0
+	padding 0
-		padding 0
+	font-weight normal
-		font-weight bold
+	font-size 16px
-		font-size 16px
+	border none
-		line-height 44px
+	border-radius 6px
-		border none
+	outline none
-		border-radius 6px
+	box-shadow none
-		outline none
-		box-shadow none
 
-		if fill
+	&.inline
+		display inline-block
+		width auto
+
+	&.primary
+		font-weight bold
+
+	&.fill
+		color var(--text)
+		background var(--buttonBg)
+
+		&:hover
+			background var(--buttonHoverBg)
+
+		&:active
+			background var(--buttonActiveBg)
+
+		&.primary
 			color var(--primaryForeground)
 			background var(--primary)
 
@@ -55,20 +78,15 @@ root(fill)
 
 			&:active
 				background var(--primaryDarken5)
-		else
-			color var(--primary)
-			background none
 
-			&:hover
-				color var(--primaryDarken5)
-
-			&:active
-				background var(--primaryAlpha03)
-
-.ui-button
-	&.fill
-		root(true)
 	&:not(.fill)
-		root(false)
+		color var(--primary)
+		background none
+
+		&:hover
+			color var(--primaryDarken5)
+
+		&:active
+			background var(--primaryAlpha03)
 
 </style>

src/client/app/common/views/widgets/broadcast.vue

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

src/client/app/desktop/style.styl

@@ -1,8 +1,6 @@
 @import "../app"
 @import "../reset"
 
-@import "./ui"
-
 *::input-placeholder
 	color #D8CBC5
 

src/client/app/desktop/ui.styl

@@ -1,179 +0,0 @@
-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 var(--primaryAlpha03)
-			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 var(--primaryForeground)
-		//background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
-		border solid 1px var(--primaryLighten15)
-
-		&:not(:disabled)
-			font-weight bold
-
-		&:hover:not(:disabled)
-			//background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
-			border-color var(--primary)
-
-		&:active:not(:disabled)
-			background var(--primary)
-			border-color var(--primary)
-
-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 var(--primary)
-
-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 var(--primaryForeground)
-			//background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
-			border solid 1px var(--primaryLighten15)
-
-			&:hover:not(:disabled)
-				//background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
-				border-color var(--primary)
-
-			&:active:not(:disabled)
-				background var(--primary)
-				border-color var(--primary)
-
-	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 var(--primary)
-
-	.ui.from.group
-		> p:first-child
-			color #c0c7cc

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

@@ -599,21 +599,19 @@ export default Vue.extend({
 		height 40px
 		font-size 1em
 		color var(--primaryForeground)
-		background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
+		background var(--primary)
 		outline none
-		border solid 1px var(--primaryLighten15)
+		border none
 		border-radius 4px
 
 		&:not(:disabled)
 			font-weight bold
 
 		&:hover:not(:disabled)
-			background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
+			background var(--primaryLighten5)
-			border-color var(--primary)
 
 		&:active:not(:disabled)
-			background var(--primary)
+			background var(--primaryDarken5)
-			border-color var(--primary)
 
 		&:focus
 			&:after

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

@@ -4,8 +4,8 @@
 	<template v-if="!quote">
 		<footer>
 			<a class="quote" v-if="!quote" @click="onQuote">%i18n:@quote%</a>
-			<button class="ui cancel" @click="cancel">%i18n:@cancel%</button>
+			<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>
 	</template>
 	<template v-if="quote">
@@ -71,7 +71,7 @@ export default Vue.extend({
 			left 28px
 			line-height 40px
 
-		button
+		> .button
 			display block
 			position absolute
 			bottom 16px

src/client/app/desktop/views/widgets/profile.vue

@@ -4,7 +4,6 @@
 		<div class="egwyvoaaryotefqhqtmiyawwefemjfsd-body"
 			:data-compact="props.design == 1 || props.design == 2"
 			:data-melt="props.design == 2"
-			:data-darkmode="$store.state.device.darkmode"
 		>
 			<div class="banner"
 				:style="$store.state.i.bannerUrl ? `background-image: url(${$store.state.i.bannerUrl})` : ''"

src/client/app/init.css

@@ -32,7 +32,7 @@ body > noscript {
 	left: 0;
 	width: 100%;
 	height: 100%;
-	background: #fff;
+	background: var(--bg);
 	cursor: wait;
 }
 	#ini > svg {
@@ -47,10 +47,6 @@ body > noscript {
 		animation: ini 0.6s infinite linear;
 	}
 
-html[data-darkmode] #ini {
-	background: #191b22;
-}
-
 @keyframes ini {
 	from {
 		transform: rotate(0deg);

src/client/theme/dark.json

@@ -67,6 +67,10 @@
 	"inputLabel": "rgba(255, 255, 255, 0.7)",
 	"inputText": "#fff",
 
+	"buttonBg": "rgba(255, 255, 255, 0.05)",
+	"buttonHoverBg": "rgba(255, 255, 255, 0.1)",
+	"buttonActiveBg": "rgba(255, 255, 255, 0.15)",
+
 	"autocompleteItemHoverBg": "rgba(255, 255, 255, 0.1)",
 	"autocompleteItemText": "rgba(255, 255, 255, 0.8)",
 	"autocompleteItemTextSub": "rgba(255, 255, 255, 0.3)",

src/client/theme/light.json

@@ -67,6 +67,10 @@
 	"inputLabel": "rgba(0, 0, 0, 0.54)",
 	"inputText": "#000",
 
+	"buttonBg": "rgba(0, 0, 0, 0.05)",
+	"buttonHoverBg": "rgba(0, 0, 0, 0.1)",
+	"buttonActiveBg": "rgba(0, 0, 0, 0.15)",
+
 	"autocompleteItemHoverBg": "rgba(0, 0, 0, 0.1)",
 	"autocompleteItemText": "rgba(0, 0, 0, 0.8)",
 	"autocompleteItemTextSub": "rgba(0, 0, 0, 0.3)",