tcgui-mirror/static/gui_styles.css

/*!
Pure v1.0.1
Copyright 2013 Yahoo!
Licensed under the BSD License.
https://github.com/pure-css/pure/blob/master/LICENSE.md
*/
/*!
normalize.css v^3.0 | MIT License | git.io/normalize
Copyright (c) Nicolas Gallagher and Jonathan Neal
*/
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
    font-family: 'Roboto', sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: #f4f4f9;
    color: #333;
}

a {
    background-color: transparent;
    transition: color 0.3s ease;
}

a:active, a:hover {
    outline: 0;
    color: #0078e7;
}

button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}

button {
    overflow: visible;
    padding: 10px 20px;
    background-color: #0078e7;
    color: white;
    border: none;
    border-radius: 5px;
    box-shadow: 0 5px #005bb5;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

button:hover {
    background-color: #005bb5;
    transform: translateY(-2px);
}

button:active {
    background-color: #004494;
    box-shadow: 0 2px #005bb5;
    transform: translateY(0);
}

button:focus {
    outline: none;
}

.pure-form input[type=text], .pure-form input[type=email], .pure-form select, .pure-form textarea {
    padding: 10px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: inset 0 1px 3px #ddd;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.pure-form input[type=text]:focus, .pure-form input[type=email]:focus, .pure-form select:focus, .pure-form textarea:focus {
    outline: none;
    border-color: #0078e7;
    box-shadow: inset 0 1px 3px rgba(0, 120, 231, 0.5);
}

.pure-form .pure-group fieldset {
    margin-bottom: 10px;
}

.pure-form .pure-group input, .pure-form .pure-group textarea {
    display: block;
    padding: 10px;
    margin: 0 0 -1px;
    border-radius: 0;
    position: relative;
    top: -1px;
}

.pure-form .pure-group input:focus, .pure-form .pure-group textarea:focus {
    z-index: 3;
}

.pure-form .pure-group input:first-child, .pure-form .pure-group textarea:first-child {
    top: 1px;
    border-radius: 5px 5px 0 0;
    margin: 0;
}

.pure-form .pure-group input:first-child:last-child, .pure-form .pure-group textarea:first-child:last-child {
    top: 1px;
    border-radius: 5px;
    margin: 0;
}

.pure-form .pure-group input:last-child, .pure-form .pure-group textarea:last-child {
    top: -2px;
    border-radius: 0 0 5px 5px;
    margin: 0;
}

.pure-form .pure-group button {
    margin: .35em 0;
}

.pure-form .pure-input-1 {
    width: 100%;
}

.pure-form .pure-input-3-4 {
    width: 75%;
}

.pure-form .pure-input-2-3 {
    width: 66%;
}

.pure-form .pure-input-1-2 {
    width: 50%;
}

.pure-form .pure-input-1-3 {
    width: 33%;
}

.pure-form .pure-input-1-4 {
    width: 25%;
}

.pure-menu {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.pure-menu-fixed {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 3;
    background: #0078e7;
    color: white;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.pure-menu-heading {
    text-transform: uppercase;
    color: #fff;
}

.pure-menu-link {
    color: #fff;
    transition: color 0.3s ease;
}

.pure-menu-link:hover {
    color: #d1ecff;
}

.pure-button {
    display: inline-block;
    zoom: 1;
    line-height: normal;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 100%;
    padding: .5em 1em;
    color: #444;
    color: rgba(0, 0, 0, .8);
    border: 1px solid #999;
    border: none transparent;
    background-color: #e6e6e6;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.pure-button-hover, .pure-button:focus, .pure-button:hover {
    background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(40%, rgba(0, 0, 0, .05)), to(rgba(0, 0, 0, .1)));
    background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .1));
    background-image: linear-gradient(transparent, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .1));
    transform: translateY(-2px);
}

.pure-button:focus {
    outline: 0;
}

.pure-button-active, .pure-button:active {
    -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, .15) inset, 0 0 6px rgba(0, 0, 0, .2) inset;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15) inset, 0 0 6px rgba(0, 0, 0, .2) inset;
    border-color: #000;
    transform: translateY(0);
}

.pure-button-primary, .pure-button-selected, a.pure-button-primary, a.pure-button-selected {
    background-color: #0078e7;
    color: #fff;
    box-shadow: 0 4px #005bb5;
}

.pure-form input[type=color]:focus, .pure-form input[type=date]:focus, .pure-form input[type=datetime-local]:focus, .pure-form input[type=datetime]:focus, .pure-form input[type=email]:focus, .pure-form input[type=month]:focus, .pure-form input[type=number]:focus, .pure-form input[type=password]:focus, .pure-form input[type=search]:focus, .pure-form input[type=tel]:focus, .pure-form input[type=text]:focus, .pure-form input[type=time]:focus, .pure-form input[type=url]:focus, .pure-form input[type=week]:focus, .pure-form select:focus, .pure-form textarea:focus {
    outline: 0;
    border-color: #03dac6;
    box-shadow: inset 0 1px 3px rgba(3, 218, 198, 0.5);
}


.pure-form input[readonly], .pure-form select[readonly], .pure-form textarea[readonly] {
    background-color: #eee;
    color: #777;
    border-color: #ccc;
}

.pure-form input:focus:invalid, .pure-form select:focus:invalid, .pure-form textarea:focus:invalid {
    color: #b94a48;
    border-color: #e9322d;
}

.pure-form input[type=checkbox]:focus:invalid:focus, .pure-form input[type=file]:focus:invalid:focus, .pure-form input[type=radio]:focus:invalid:focus {
    outline-color: #e9322d;
}

.pure-form input[disabled], .pure-form select[disabled], .pure-form textarea[disabled] {
    cursor: not-allowed;
    background-color: #eaeded;
    color: #cad2d3;
}