Initial commit 🍀

src/web/app/desktop/style.styl

@@ -0,0 +1,114 @@
+@import "../base"
+@import "../../../../node_modules/cropperjs/dist/cropper.css"
+
+*::input-placeholder
+	color #D8CBC5
+
+*
+	&:focus
+		outline none
+
+	&::scrollbar
+		width 5px
+		background transparent
+
+		&:horizontal
+			height 5px
+
+	&::scrollbar-button
+		width 0
+		height 0
+		background rgba(0, 0, 0, 0.2)
+
+	&::scrollbar-piece
+		background transparent
+
+		&:start
+			background transparent
+
+	&::scrollbar-thumb
+		background rgba(0, 0, 0, 0.2)
+
+		&:hover
+			background rgba(0, 0, 0, 0.4)
+
+		&:active
+			background $theme-color
+
+	&::scrollbar-corner
+		background rgba(0, 0, 0, 0.2)
+
+html
+	background #fdfdfd
+
+	// ↓ workaround of https://github.com/riot/riot/issues/2134
+	&[data-page='entrance']
+		#wait
+			right auto
+			left 15px
+
+html[theme='dark']
+	background #100f0f
+
+button
+	font-family sans-serif
+
+	*
+		pointer-events none
+
+	&.style-normal
+	&.style-primary
+		display block
+		cursor pointer
+		padding 0 16px
+		margin 0
+		min-width 100px
+		height 40px
+		font-size 1em
+		outline none
+		border-radius 4px
+
+		&: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
+
+	&.style-normal
+		color #888
+		background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
+		border solid 1px #e2e2e2
+
+		&:hover
+			background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
+			border-color #dcdcdc
+
+		&:active
+			background #ececec
+			border-color #dcdcdc
+
+	&.style-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