Custom CSS: Twilight Night Style
Screenshots:
Put in Custom CSS:
@import "https://fonts.googleapis.com/css?family=Anton";
body {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif !important;
}
p, h1, h2, h3 {
-webkit-hyphens: manual !important;
-moz-hyphens: manual !important;
-ms-hyphens: manual !important;
hyphens: manual !important;
text-shadow: 0 1px black;
}
h4 {
font-family: 'Anton', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 2em;
letter-spacing: .2em;
text-transform: uppercase;
line-height: 2em;
text-shadow: 1px 2px black;
}
* *{
color: #94aacd !important;
background-color: transparent;
background-color: #222e41 !important;
border-color: #485974 !important;
box-shadow: none;
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
/* Opera/IE 8+ */
}
abbr {
border: none;
text-transform: uppercase;
font-size: 0.9em;
letter-spacing: 0.01em;
}
#head {
color: #dee5e1 !important;
background-color: transparent;
background-color: rgba(34, 46, 65, 0.4) !important;
border-color: #485974 !important;
box-shadow: none;
}
[role="button"], a, area, button, input, label, select, summary, textarea {
touch-action: manipulation;
}
button, input, optgroup, select, textarea {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
font-style: inherit;
font-variant-ligatures: inherit;
font-variant-caps: inherit;
font-variant-numeric: inherit;
font-variant-east-asian: inherit;
font-weight: inherit;
font-stretch: inherit;
font-size: inherit;
line-height: inherit;
font-family: inherit;
color: inherit;
box-shadow: 1 0 1px rgba(0, 1, 0, 0.2), inset 1 0 1px transparent ;
background: linear-gradient(to right, transparent, rgba(62, 79, 103, 0.3), transparent) ;
}
* {
box-sizing: border-box;
}
.btn-primary {
position: absolute;
left: 50%;
top: 1em;
}
.btn-primary {
cursor: pointer;
outline: none !important;
-webkit-transform: translate3d(-50%, -50%, 0) !important;
transform: translate3d(-50%, -50%, 0) !important;
-webkit-backface-visibility: hidden !important;
backface-visibility: hidden !important;
position: relative !important;
padding: 0;
background-color: transparent !important;
border: none !important;
font: 1.3rem 'Anton', sans-serif;
text-transform: uppercase !important;
letter-spacing: 0.1em;
color: inherit !important;
}
.btn-primary span {
-webkit-transform: translate3d(0, 0, 0) !important;
transform: translate3d(0, 0, 0) !important;
-webkit-backface-visibility: hidden !important;
backface-visibility: hidden !important;
position: relative !important;
display: block;
width: 100%;
height: 100%;
padding: 20px 50px;
z-index: 3;
}
.btn-primary:before, .btn-primary span:before {
content: '';
position: absolute;
left: 50%;
top: 1em;
-webkit-transform: translate(-50%, -50%) skewX(-20deg) !important;
transform: translate(-50%, -50%) skewX(-20deg) !important;
width: 100%;
height: 40px;
border: 1px solid rgba(148, 170, 205, 0.4) !important;
z-index: 2;
}
.btn-primary span:before {
display: block;
-webkit-transform: translate(-50%, -50%) skew(-20deg);
transform: translate(-50%, -50%) skew(-20deg);
-webkit-transform-origin: center center;
transform-origin: center center;
z-indeX: -1;
}
.btn-primary:after {
transition: all 100ms ease-out;
content: '';
position: absolute;
left: 0;
top: 0;
-webkit-transform: skewX(-20deg) scaleX(0);
transform: skewX(-20deg) scaleX(0);
width: 100%;
height: 100%;
background-color: rgba(148, 170, 205, 0.6) !important;
border: 1px solid transparent !important;
z-index: 1;
}
.btn-primary:hover span:before {
-webkit-animation: fill .5s ease-out;
animation: fill .5s ease-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.btn-primary:hover:after {
-webkit-animation: swoosh .7s ease-in;
animation: swoosh .7s ease-in;
}
.btn-primary:active:before {
background-color: rgba(148, 170, 205, 0.6) !important;
}
@-webkit-keyframes swoosh {
0% {
-webkit-transform-origin: left center !important;
transform-origin: left center !important;
}
20% {
-webkit-transform: skewX(-20deg) scaleX(1) !important;
transform: skewX(-20deg) scaleX(1) !important;
-webkit-transform-origin: left center !important;
transform-origin: left center !important;
}
21% {
-webkit-transform-origin: right center !important;
transform-origin: right center !important;
}
50% {
-webkit-transform: skewX(-20deg) scaleX(0) !important;
transform: skewX(-20deg) scaleX(0) !important;
-webkit-transform-origin: right center !important;
transform-origin: right center !important;
}
}
@keyframes swoosh {
0% {
-webkit-transform-origin: left center !important;
transform-origin: left center !important;
}
20% {
-webkit-transform: skewX(-20deg) scaleX(1);
transform: skewX(-20deg) scaleX(1);
-webkit-transform-origin: left center;
transform-origin: left center;
}
21% {
-webkit-transform-origin: right center;
transform-origin: right center;
}
50% {
-webkit-transform: skewX(-20deg) scaleX(0);
transform: skewX(-20deg) scaleX(0);
-webkit-transform-origin: right center;
transform-origin: right center !important;
}
}
@-webkit-keyframes fill {
0% {
background-color: rgba(72, 89, 116, 0.5) !important;
}
20% {
opacity: .2;
border-width: 15px;
border-color: rgba(72, 89, 116, 0.5) !important;
}
100% {
opacity: .2;
border-width: 1px solid rgba(148, 170, 205, 0.5) !important;
background-color: rgba(72, 89, 116, 0.7) !important;
}
}
@keyframes fill {
0% {
background-color: rgba(72, 89, 116, 0.5) !important;
}
20% {
opacity: .2;
border-width: 10px;
border-color: rgba(72, 89, 116, 0.5) !important;
}
100% {
opacity: .5;
border-width: 1px solid rgba(148, 170, 205, 0.5) !important;
background-color: rgba(148, 170, 205, 0.5) !important;
}
}
.btn:not(:disabled):not(.disabled) {
cursor: pointer;
}
.btn:focus, .btn.focus {
outline: 0;
box-shadow: 0 0 0 2px rgba(148, 170, 205, 0.5) !important;
}
.btn:hover, .btn:focus {
text-decoration: underline;
text-shadow: 0 1px black;
}
input:focus, button:focus, select:focus, textarea:focus {
border-color: none !important;
outline: 0 !important;
text-shadow: 0 1px black;
}
.button:focus {
outline: none !important;
text-shadow: 0 1px black;
}
.btn-primary:focus, .btn-primary.focus {
box-shadow: none !important;
text-shadow: 0 1px black;
}
.btn:focus, .btn.focus {
outline: 0;
box-shadow: none !important;
text-shadow: 0 1px black;
}
.web-setting-name {
width: 180px;
padding: 0 10px;
vertical-align: top;
font-weight: normal;
line-height: 28px;
text-transform: uppercase;
display: inline-block;
text-shadow: 1px 1px black;
}
Work in progress.
Enjoy.
