Added Safari support to Wyvern themes

Also improved general browser compatibility.
This commit is contained in:
Jelle Z 2018-07-04 13:16:57 +02:00
parent eab95072d7
commit 8223f3ad09
3 changed files with 38 additions and 31 deletions

View File

@ -1,13 +1,13 @@
/* Fire Wyvern theme by Jelle Z. @ https://gitlab.com/jelle619 */ /* Fire Wyvern theme by Jelle Z. @ https://gitlab.com/jelle619 */
.btn{ .btn{
background-color: rgba(255,95,20); background-color: rgb(255,95,20);
} }
.btn-large{ .btn-large{
background-color: rgba(255,95,20); background-color: rgb(255,95,20);
} }
.btn:visited{ .btn:visited{
background-color: rgba(255,95,20); background-color: rgb(255,95,20);
} }
.btn:hover { .btn:hover {
background-color: orange background-color: orange
@ -16,28 +16,29 @@
background-color: red background-color: red
} }
.btn:focus { .btn:focus {
background-color: rgba(255,95,20); background-color: rgb(255,95,20);
} }
input:not([type]):focus:not([readonly]), input[type=text]:not(.browser-default):focus:not([readonly]), input[type=password]:not(.browser-default):focus:not([readonly]), input[type=email]:not(.browser-default):focus:not([readonly]), input[type=url]:not(.browser-default):focus:not([readonly]), input[type=time]:not(.browser-default):focus:not([readonly]), input[type=date]:not(.browser-default):focus:not([readonly]), input[type=datetime]:not(.browser-default):focus:not([readonly]), input[type=datetime-local]:not(.browser-default):focus:not([readonly]), input[type=tel]:not(.browser-default):focus:not([readonly]), input[type=number]:not(.browser-default):focus:not([readonly]), input[type=search]:not(.browser-default):focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) { input:not([type]):focus:not([readonly]), input[type=text]:not(.browser-default):focus:not([readonly]), input[type=password]:not(.browser-default):focus:not([readonly]), input[type=email]:not(.browser-default):focus:not([readonly]), input[type=url]:not(.browser-default):focus:not([readonly]), input[type=time]:not(.browser-default):focus:not([readonly]), input[type=date]:not(.browser-default):focus:not([readonly]), input[type=datetime]:not(.browser-default):focus:not([readonly]), input[type=datetime-local]:not(.browser-default):focus:not([readonly]), input[type=tel]:not(.browser-default):focus:not([readonly]), input[type=number]:not(.browser-default):focus:not([readonly]), input[type=search]:not(.browser-default):focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
border-bottom: 1px solid rgba(255,95,20); border-bottom: 1px solid rgb(255,95,20);
-webkit-box-shadow: 0 1px 0 0 rgba(255,95,20); -webkit-box-shadow: 0 1px 0 0 rgb(255,95,20);
box-shadow: 0 1px 0 0 rgba(255,95,20); box-shadow: 0 1px 0 0 rgb(255,95,20);
} }
input:not([type]):focus:not([readonly])+label, input[type=text]:not(.browser-default):focus:not([readonly])+label, input[type=password]:not(.browser-default):focus:not([readonly])+label, input[type=email]:not(.browser-default):focus:not([readonly])+label, input[type=url]:not(.browser-default):focus:not([readonly])+label, input[type=time]:not(.browser-default):focus:not([readonly])+label, input[type=date]:not(.browser-default):focus:not([readonly])+label, input[type=datetime]:not(.browser-default):focus:not([readonly])+label, input[type=datetime-local]:not(.browser-default):focus:not([readonly])+label, input[type=tel]:not(.browser-default):focus:not([readonly])+label, input[type=number]:not(.browser-default):focus:not([readonly])+label, input[type=search]:not(.browser-default):focus:not([readonly])+label, textarea.materialize-textarea:focus:not([readonly])+label { input:not([type]):focus:not([readonly])+label, input[type=text]:not(.browser-default):focus:not([readonly])+label, input[type=password]:not(.browser-default):focus:not([readonly])+label, input[type=email]:not(.browser-default):focus:not([readonly])+label, input[type=url]:not(.browser-default):focus:not([readonly])+label, input[type=time]:not(.browser-default):focus:not([readonly])+label, input[type=date]:not(.browser-default):focus:not([readonly])+label, input[type=datetime]:not(.browser-default):focus:not([readonly])+label, input[type=datetime-local]:not(.browser-default):focus:not([readonly])+label, input[type=tel]:not(.browser-default):focus:not([readonly])+label, input[type=number]:not(.browser-default):focus:not([readonly])+label, input[type=search]:not(.browser-default):focus:not([readonly])+label, textarea.materialize-textarea:focus:not([readonly])+label {
color: rgba(255,95,20); color: rgb(255,95,20);
} }
[type="radio"]:checked+label:after, [type="radio"].with-gap:checked+label:after { [type="radio"]:checked+label:after, [type="radio"].with-gap:checked+label:after {
background-color: rgba(255,95,20); background-color: rgb(255,95,20);
} }
[type="radio"]:checked+label:after, [type="radio"].with-gap:checked+label:before, [type="radio"].with-gap:checked+label:after { [type="radio"]:checked+label:after, [type="radio"].with-gap:checked+label:before, [type="radio"].with-gap:checked+label:after {
border: 2px solid rgba(255,95,20); border: 2px solid rgb(255,95,20);
} }
#guild-nav { #guild-nav {
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.9) background-color: rgba(0,0,0,0.9)
} }
@ -50,11 +51,12 @@ input:not([type]):focus:not([readonly])+label, input[type=text]:not(.browser-def
} }
#members-nav { #members-nav {
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.9) background-color: rgba(0,0,0,0.9)
} }
#channeltopic { #channeltopic {
color: rgba(255,255,255) color: rgb(255,255,255)
} }
@font-face { @font-face {
@ -90,11 +92,12 @@ font-family: Helvetica Neue, Roboto, Helvetica, Arial, sans-serif;
} }
#footer { #footer {
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.9) background-color: rgba(0,0,0,0.9)
} }
#footercontainer span { #footercontainer span {
color: rgba(175,175,175) color: rgb(175,175,175)
} }
#footercontainer { #footercontainer {
@ -106,15 +109,15 @@ font-family: Helvetica Neue, Roboto, Helvetica, Arial, sans-serif;
} }
#messageboxouter textarea { #messageboxouter textarea {
color: rgba(255,255,255) color: rgb(255,255,255)
} }
nav a { nav a {
color: rgba(255,95,20) color: rgb(255,95,20)
} }
.btn:focus{ .btn:focus{
background-color: rgba(255,95,20) background-color: rgb(255,95,20)
} }
.brand-logo-text { .brand-logo-text {
@ -122,10 +125,11 @@ nav a {
} }
.brand-logo-text [class="betatag align-top"]{ .brand-logo-text [class="betatag align-top"]{
color: rgba(175,175,175) color: rgb(175,175,175)
} }
.nav-wrapper { .nav-wrapper {
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.9) background-color: rgba(0,0,0,0.9)
} }
@ -144,8 +148,8 @@ nav a {
} }
:root { :root {
--modal: rgba(20,20,20); --modal: rgb(20,20,20);
--noroleusers: rgba(100,100,100); --noroleusers: rgb(100,100,100);
--main: rgba(20,20,20); --main: rgb(20,20,20);
--chatmessage: rgba(255,255,255); --chatmessage: rgb(255,255,255);
--discrim: rgba(100,100,100) --discrim: rgb(100,100,100)

View File

@ -13,7 +13,7 @@ label {
} }
#modal_guildinfobox { #modal_guildinfobox {
background-color: rgba(220,220,220); background-color: rgb(220,220,220);
} }
input:not([type]):focus:not([readonly]), input[type=text]:not(.browser-default):focus:not([readonly]), input[type=password]:not(.browser-default):focus:not([readonly]), input[type=email]:not(.browser-default):focus:not([readonly]), input[type=url]:not(.browser-default):focus:not([readonly]), input[type=time]:not(.browser-default):focus:not([readonly]), input[type=date]:not(.browser-default):focus:not([readonly]), input[type=datetime]:not(.browser-default):focus:not([readonly]), input[type=datetime-local]:not(.browser-default):focus:not([readonly]), input[type=tel]:not(.browser-default):focus:not([readonly]), input[type=number]:not(.browser-default):focus:not([readonly]), input[type=search]:not(.browser-default):focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) { input:not([type]):focus:not([readonly]), input[type=text]:not(.browser-default):focus:not([readonly]), input[type=password]:not(.browser-default):focus:not([readonly]), input[type=email]:not(.browser-default):focus:not([readonly]), input[type=url]:not(.browser-default):focus:not([readonly]), input[type=time]:not(.browser-default):focus:not([readonly]), input[type=date]:not(.browser-default):focus:not([readonly]), input[type=datetime]:not(.browser-default):focus:not([readonly]), input[type=datetime-local]:not(.browser-default):focus:not([readonly]), input[type=tel]:not(.browser-default):focus:not([readonly]), input[type=number]:not(.browser-default):focus:not([readonly]), input[type=search]:not(.browser-default):focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
@ -89,6 +89,7 @@ input:not([type]):focus:not([readonly])+label, input[type=text]:not(.browser-def
} }
#members-nav { #members-nav {
background-color: rgb(255,255,255);
background-color: rgba(255,255,255,0.9) background-color: rgba(255,255,255,0.9)
} }
@ -129,11 +130,12 @@ font-family: Helvetica Neue, Roboto, Helvetica, Arial, sans-serif;
} }
#footer { #footer {
background-color: rgb(255,255,255);
background-color: rgba(255,255,255,0.9) background-color: rgba(255,255,255,0.9)
} }
#footercontainer span { #footercontainer span {
color: rgba(100,100,100) color: rgb(100,100,100)
} }
#footercontainer { #footercontainer {
@ -157,10 +159,11 @@ nav a {
} }
.brand-logo-text [class="betatag align-top"]{ .brand-logo-text [class="betatag align-top"]{
color: rgba(100,100,100) color: rgb(100,100,100)
} }
.nav-wrapper { .nav-wrapper {
background-color: rgb(255,255,255);
background-color: rgba(255,255,255,0.9) background-color: rgba(255,255,255,0.9)
} }
@ -168,8 +171,8 @@ nav a {
display: none display: none
} }
:root { :root {
--modal: rgba(240,240,240); --modal: rgb(240,240,240);
--noroleusers: rgba(100,100,100); --noroleusers: rgb(100,100,100);
--main: rgba(240,240,240); --main: rgb(240,240,240);
--chatmessage: rgba(10,10,10); --chatmessage: rgb(10,10,10);
--discrim: rgba(100,100,100) --discrim: rgb(100,100,100)

View File

@ -1,4 +1,4 @@
/* Metro Edge theme by Jelle Z. @ https://github.com/jelle619 */ /* Metro Edge theme by Jelle Z. @ https://gitlab.com/jelle619 */
.subheader { .subheader {
font-style: italic; font-style: italic;
@ -89,4 +89,4 @@ font-family: Helvetica Neue, Roboto, Helvetica, Arial, sans-serif;
--chatmessage: #FFFFFF; --chatmessage: #FFFFFF;
--discrim: #FFFFFF; --discrim: #FFFFFF;
--chatbox: #2A97FA; --chatbox: #2A97FA;
} }