timw4mail
/
HummingBirdAnimeClient
1
1
Fork 1
Code Issues 5 Pull Requests Projects 1 Releases Wiki Activity

Button and Select style tweaks

This commit is contained in:
Timothy Warren 2019-05-08 11:14:11 -04:00
parent 6c81ddbfd4
commit d1a0147ae2
5 changed files with 87 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/css/app.min.css vendored
View File

File diff suppressed because one or more lines are too long

36
public/css/dark-override.css
View File

@ -52,9 +52,41 @@ small {
color: #fff;
}
input, select, textarea {
color: #ccc;
input, input[type], select, textarea {
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 {

2
public/css/dark.min.css vendored
View File

@ -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)}

67
public/css/general.css
View File

@ -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
------------------------------------------------------------------------------*/

20
public/css/marx.css
View File

@ -96,8 +96,8 @@ textarea {
}
*,::before,::after {
border-style:solid;
border-width:0;
/* border-style:solid;
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;