Button and Select style tweaks

public/css/dark-override.css

@@ -52,9 +52,41 @@ small {
 	color: #fff;
 }
 
-input, select, textarea {
+input, input[type], select, textarea {
-	color: #ccc;
+	border-color: #eee;
+	color: #eee;
+	background: #666;
+	padding:.8em;
+}
+
+button {
 	background: #444;
+	background: linear-gradient(#666, #555, #444, #555, #666);
+	border-radius: 0.5em;
+	margin: 0;
+	text-transform: none;
+	border-color: #ddd;
+	color: #ddd;
+}
+
+button:hover {
+	background: #222;
+	background: linear-gradient(#444, #333, #222, #333, #444);
+	border-color: #ddd;
+	color: #ddd;
+}
+
+button:active {
+	background: #333;
+	background: linear-gradient(#333, #333);
+}
+
+.media:hover button {
+	background: linear-gradient(#666, #555, #444, #555, #666);
+}
+
+.media:hover button:hover {
+	background: linear-gradient(#444, #555, #666, #555, #444);
 }
 
 .message, .static-message {

public/css/dark.min.css

@@ -1 +1 @@
-a{color:#1978e2;text-shadow:var(--link-shadow)}a:hover{color:#9e34fd}body,legend,nav ul li a{background:#333;color:#eee}nav a:hover,nav li.selected a{border-color:#fff}header button{background:transparent}table{-webkit-box-shadow:none;box-shadow:none}td,th{border-color:#111}thead td,thead th{background:#333;color:#eee}tbody>tr:nth-child(2n){background:#555;color:#eee}tbody>tr:nth-child(odd){background:#333}footer,hr,legend{border-color:#ddd}small{color:#fff}input,select,textarea{color:#ccc;background:#444}.message,.static-message{text-shadow:var(--white-link-shadow)}.message.success,.static-message.success{background:#1f8454;border-color:#70dda9}.message.error,.static-message.error{border-color:#f3e6e6;background:#924949}.message.info,.static-message.info{border-color:#ffc;background:#bfbe3a}.invisible tbody>tr:nth-child(2n),.invisible tbody>tr:nth-child(odd),.invisible td,.invisible th,.invisible tr{background:transparent}#main-nav{border-bottom:.1rem solid #ddd}.tabs,.vertical-tabs{background:#333}.tabs>label,.vertical-tabs .tab label{background:#222;border:0;color:#eee}.vertical-tabs .tab label{width:100%}.tabs>label:hover,.vertical-tabs .tab>label:hover{background:#888}.tabs>label:active,.vertical-tabs .tab>label:active{background:#999}.tabs>[type=radio]:checked+label,.tabs>[type=radio]:checked+label+.content,.vertical-tabs [type=radio]:checked+label,.vertical-tabs [type=radio]:checked~.content{border:0;background:#666;color:#eee}.vertical-tabs{background:#222;border:1px solid #444}.vertical-tabs .tab{background:#666;border-bottom:1px solid #444}.streaming-logo{-webkit-filter:drop-shadow(0 0 2px #fff);filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="2" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(255,255,255,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');filter:drop-shadow(0 0 2px #fff)}
+a{color:#1978e2;text-shadow:var(--link-shadow)}a:hover{color:#9e34fd}body,legend,nav ul li a{background:#333;color:#eee}nav a:hover,nav li.selected a{border-color:#fff}header button{background:transparent}table{-webkit-box-shadow:none;box-shadow:none}td,th{border-color:#111}thead td,thead th{background:#333;color:#eee}tbody>tr:nth-child(2n){background:#555;color:#eee}tbody>tr:nth-child(odd){background:#333}footer,hr,legend{border-color:#ddd}small{color:#fff}input,input[type],select,textarea{border-color:#eee;color:#eee;background:#666;padding:.8em}button{background:#444;background:-webkit-gradient(linear,left top,left bottom,from(#666),color-stop(#555),color-stop(#444),color-stop(#555),to(#666));background:linear-gradient(#666,#555,#444,#555,#666);border-radius:.5em;margin:0;text-transform:none}button,button:hover{border-color:#ddd;color:#ddd}button:hover{background:#222;background:-webkit-gradient(linear,left top,left bottom,from(#444),color-stop(#333),color-stop(#222),color-stop(#333),to(#444));background:linear-gradient(#444,#333,#222,#333,#444)}button:active{background:#333;background:-webkit-gradient(linear,left top,left bottom,from(#333),to(#333));background:linear-gradient(#333,#333)}.media:hover button{background:-webkit-gradient(linear,left top,left bottom,from(#666),color-stop(#555),color-stop(#444),color-stop(#555),to(#666));background:linear-gradient(#666,#555,#444,#555,#666)}.media:hover button:hover{background:-webkit-gradient(linear,left top,left bottom,from(#444),color-stop(#555),color-stop(#666),color-stop(#555),to(#444));background:linear-gradient(#444,#555,#666,#555,#444)}.message,.static-message{text-shadow:var(--white-link-shadow)}.message.success,.static-message.success{background:#1f8454;border-color:#70dda9}.message.error,.static-message.error{border-color:#f3e6e6;background:#924949}.message.info,.static-message.info{border-color:#ffc;background:#bfbe3a}.invisible tbody>tr:nth-child(2n),.invisible tbody>tr:nth-child(odd),.invisible td,.invisible th,.invisible tr{background:transparent}#main-nav{border-bottom:.1rem solid #ddd}.tabs,.vertical-tabs{background:#333}.tabs>label,.vertical-tabs .tab label{background:#222;border:0;color:#eee}.vertical-tabs .tab label{width:100%}.tabs>label:hover,.vertical-tabs .tab>label:hover{background:#888}.tabs>label:active,.vertical-tabs .tab>label:active{background:#999}.tabs>[type=radio]:checked+label,.tabs>[type=radio]:checked+label+.content,.vertical-tabs [type=radio]:checked+label,.vertical-tabs [type=radio]:checked~.content{border:0;background:#666;color:#eee}.vertical-tabs{background:#222;border:1px solid #444}.vertical-tabs .tab{background:#666;border-bottom:1px solid #444}.streaming-logo{-webkit-filter:drop-shadow(0 0 2px #fff);filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="2" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(255,255,255,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');filter:drop-shadow(0 0 2px #fff)}

public/css/general.css

@@ -22,9 +22,33 @@ body {
 }
 
 button {
-	background: rgba(255, 255, 255, 0.65);
+	background: #fff;
+	background: linear-gradient(#ddd, #eee, #fff, #eee, #ddd);
 	border-radius: 0.5em;
 	margin: 0;
+	text-transform: none;
+	border-color: #555;
+	color: #555;
+}
+
+button:hover {
+	background: #bbb;
+	background: linear-gradient(#cfcfcf, #dfdfdf, #efefef, #dfdfdf, #cfcfcf);
+	border-color: #555;
+	color: #555;
+}
+
+button:active {
+	background: #ddd;
+	background: linear-gradient(#ddd, #ddd);
+}
+
+.media:hover button {
+	background: linear-gradient(#bbb, #ccc, #ddd, #ccc, #bbb);
+}
+
+.media:hover button:hover {
+	background: linear-gradient(#afafaf, #bfbfbf, #cfcfcf, #bfbfbf, #afafaf);
 }
 
 table {
@@ -183,16 +207,19 @@ td .media-wrap-flex {
 .danger {
 	background-color: #ff4136;
 	border-color: #924949;
-	color: #fff;
+	color: #924949;
+	/* color: #fff; */
 }
 
 .danger:hover, .danger:active {
 	background-color: #924949;
 	border-color: #ff4136;
-	color: #fff;
+	color: #ff4136;
+	/* color: #fff; */
 }
 
 .user-btn {
+	background: transparent;
 	border-color: var(--edit-link-color);
 	color: var(--edit-link-color);
 	text-shadow: var(--link-shadow);
@@ -201,8 +228,14 @@ td .media-wrap-flex {
 }
 
 .user-btn:hover, .user-btn:active {
+	background: transparent;
 	border-color: var(--edit-link-hover-color);
-	background-color: var(--edit-link-hover-color);
+	color: var(--edit-link-hover-color);
+}
+
+.user-btn:active {
+	background: var(--edit-link-hover-color);
+	color: #fff;
 }
 
 .full-width {
@@ -534,21 +567,12 @@ picture.cover {
 	border-color: hsla(0, 0%, 100%, .65);
 	position: absolute;
 	top: 138px;
-	top: calc(50% - 21.5px);
+	top: calc(50% - 21.2px);
 	left: 44px;
-	left: calc(50% - 66.5px);
+	left: calc(50% - 57.8px);
 	z-index: 50;
 }
 
-.anime .media > button.plus-one:hover {
-	color: hsla(0, 0%, 100%, .65);
-	background: #888;
-}
-
-.anime .media > button.plus-one:active {
-	background: #444;
-}
-
 /* -----------------------------------------------------------------------------
 	Manga-list-specific styles
 ------------------------------------------------------------------------------*/
@@ -566,9 +590,9 @@ picture.cover {
 	position: absolute;
 	top: 86px;
 	/* top: calc(50% - 58.5px); */
-	top: calc(50% - 22.4px);
+	top: calc(50% - 21.2px);
 	left: 43.5px;
-	left: calc(50% - 66.5px);
+	left: calc(50% - 57.8px);
 	z-index: 40;
 }
 
@@ -576,15 +600,6 @@ picture.cover {
 	border-color: hsla(0, 0%, 100%, .65);
 }
 
-.manga .media > .edit-buttons:hover button {
-	color: hsla(0, 0%, 100%, .65);
-	background: #888;
-}
-
-.manga .media > .edit-buttons button:active {
-	background: #444;
-}
-
 /* -----------------------------------------------------------------------------
 	Search page styles
 ------------------------------------------------------------------------------*/

public/css/marx.css

@@ -96,8 +96,8 @@ textarea {
 }
 
 *,::before,::after {
-	border-style:solid;
+	/* border-style:solid;
-	border-width:0;
+	border-width:0; */
 	box-sizing:inherit;
 }
 
@@ -124,7 +124,7 @@ audio,canvas,iframe,img,svg,video {
 	vertical-align:middle;
 }
 
-input,select,textarea {
+input,/*select*/,textarea {
 	border:.1rem solid #ccc;
 	color:inherit;
 	font-family:inherit;
@@ -296,7 +296,7 @@ img {
 	vertical-align:baseline;
 }
 
-input[type=text],input[type=password],input[type=email],input[type=url],input[type=date],input[type=month],input[type=time],input[type=datetime],input[type=datetime-local],input[type=week],input[type=number],input[type=search],input[type=tel],input[type=color],select {
+input[type=text],input[type=password],input[type=email],input[type=url],input[type=date],input[type=month],input[type=time],input[type=datetime],input[type=datetime-local],input[type=week],input[type=number],input[type=search],input[type=tel],input[type=color]/*,select */ {
 	border:.1rem solid #ccc;
 	border-radius:0;
 	display:inline-block;
@@ -320,7 +320,7 @@ input[type=color] {
 	padding:.8rem 1.6rem;
 }
 
-input[type=text]:focus,input[type=password]:focus,input[type=email]:focus,input[type=url]:focus,input[type=date]:focus,input[type=month]:focus,input[type=time]:focus,input[type=datetime]:focus,input[type=datetime-local]:focus,input[type=week]:focus,input[type=number]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=color]:focus,select:focus,textarea:focus {
+input[type=text]:focus,input[type=password]:focus,input[type=email]:focus,input[type=url]:focus,input[type=date]:focus,input[type=month]:focus,input[type=time]:focus,input[type=datetime]:focus,input[type=datetime-local]:focus,input[type=week]:focus,input[type=number]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=color]:focus,/* select:focus */,textarea:focus {
 	border-color:#b3d4fc;
 }
 
@@ -336,7 +336,7 @@ input[type=file]:focus,input[type=radio]:focus,input[type=checkbox]:focus {
 	outline:.1rem solid thin #444;
 }
 
-input[type=text][disabled],input[type=password][disabled],input[type=email][disabled],input[type=url][disabled],input[type=date][disabled],input[type=month][disabled],input[type=time][disabled],input[type=datetime][disabled],input[type=datetime-local][disabled],input[type=week][disabled],input[type=number][disabled],input[type=search][disabled],input[type=tel][disabled],input[type=color][disabled],select[disabled],textarea[disabled] {
+input[type=text][disabled],input[type=password][disabled],input[type=email][disabled],input[type=url][disabled],input[type=date][disabled],input[type=month][disabled],input[type=time][disabled],input[type=datetime][disabled],input[type=datetime-local][disabled],input[type=week][disabled],input[type=number][disabled],input[type=search][disabled],input[type=tel][disabled],input[type=color][disabled],/*select[disabled]*/,textarea[disabled] {
 	background-color:#efefef;
 	color:#777;
 	cursor:not-allowed;
@@ -348,13 +348,13 @@ input:not([type])[disabled] {
 	cursor:not-allowed;
 }
 
-input[readonly],select[readonly],textarea[readonly] {
+input[readonly],/*select[readonly]*/,textarea[readonly] {
 	background-color:#efefef;
 	border-color:#ccc;
 	color:#777;
 }
 
-input:focus:invalid,textarea:focus:invalid,select:focus:invalid {
+input:focus:invalid,textarea:focus:invalid/*,select:focus:invalid*/ {
 	border-color:#e9322d;
 	color:#b94a48;
 }
@@ -363,10 +363,10 @@ input[type=file]:focus:invalid:focus,input[type=radio]:focus:invalid:focus,input
 	outline-color:#ff4136;
 }
 
-select {
+/* select {
 	background-color:#fff;
 	border:.1rem solid #ccc;
-}
+}*/
 
 select[multiple] {
 	height:auto;