boxers
Version:
Boxers a css grid library
11 lines • 6.55 kB
CSS
/*
Name: boxers
Version: 2.0.7
License: MPL-2.0
Author: Arc IO
Email: arcdevio@gmail.com
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
:root{font-size:15px;--disabled:#a9a9a9;--background:#f5f5f5;--warn:255,130,0;--success:0,130,0;--error:130,0,0;--light:255,255,255;--muted:130,130,130;--dark:30,30,30;--primary:0,130,255;--secondary:255,130,130;--hover:0.8;--hover-smoke:0.6;--smoke:0.1;--shadow:rgba(0,0,0,0.1);--action:rgba(0,0,0,0.3);--background:#fff;--animation-speed:300ms;--animation-type:ease-in-out;--animation:var(--animation-speed) var(--animation-type);--animation-background-speed:300ms;--animation-background-type:ease-in-out;--animation-background:var(--animation-background-speed) var(--animation-background-type);--o-loader-icon-color:rgb(var(--dark));--o-loader-background:rgba(var(--light),var(--hover-smoke));--o-panel-menu-icon:rgb(var(--light));--o-panel-bar-icon:rgb(var(--light));--o-panel-shadow:var(--shadow);--o-panel-transition:var(--animation);--o-panel-menu-background:rgb(var(--light));--o-panel-tray-background:rgb(var(--light));--o-panel-bar-color:rgb(var(--light));--o-panel-bar-background:rgb(var(--dark));--o-panel-icon-hover:var(--shadow);--o-panel-item-hover:var(--shadow);--o-panel-icon-active:var(--action);--o-panel-item-active:var(--action);--o-toast-warn:rgb(var(--warn));--o-toast-error:rgb(var(--error));--o-toast-color:rgb(var(--light));--o-toast-shadow:var(--shadow);--o-toast-widget:rgb(var(--primary));--o-toast-success:rgb(var(--success));--o-toast-transition:var(--animation);--o-modal-color:rgb(var(--dark));--o-modal-widget:rgb(var(--light));--o-modal-shadow:var(--shadow);--o-modal-transition:var(--animation);--o-modal-background:var(--background)}*{margin:0;padding:0;outline:none;color:inherit;font-size:1rem;box-sizing:border-box;font-family:sans-serif}body{overflow-x:hidden;color:rgba(var(--dark),1);background-color:var(--background);transition:opacity var(--animation-background)}main{margin:auto;max-width:1200px}h1{font-size:2.9rem}h1,h2{font-weight:300;letter-spacing:1px;text-transform:capitalize}h2{font-size:1.9rem}h3{font-weight:100;font-size:1.3rem;letter-spacing:1px;text-transform:capitalize}ol,ul{list-style-position:inside}ul{list-style-type:none}li{margin:1px;padding:6px}a{text-decoration:none}object{pointer-events:none}form{position:relative}textarea{max-width:100%;max-height:100%;resize:vertical;transition:height 0s ease,width 0s ease}select{cursor:pointer}input,select,textarea{border:none;display:block;font-size:1rem;background:none;min-height:30px;padding:0 .3rem;margin:1.9rem .3rem .3rem;font-family:inherit;border-top-left-radius:3px;border-top-right-radius:3px;transition:all var(--animation);border-bottom:1px solid rgba(var(--muted),1)}input:disabled,input:hover:disabled,select:disabled,select:hover:disabled,textarea:disabled,textarea:hover:disabled{cursor:unset;border-bottom-color:var(--disabled)}input:hover,select:hover,textarea:hover{border-bottom-color:rgba(var(--dark),1)}input:focus,select:focus,textarea:focus{border-bottom-color:rgba(var(--primary),1)}input:focus:invalid,select:focus:invalid,textarea:focus:invalid{border-bottom-color:rgb(var(--warn))}label{display:block;font-size:.9rem;margin-top:.6rem;margin-left:.6rem;color:rgba(var(--muted),1);transition:color var(--animation-background)}input+label,select+label,textarea+label{height:0;cursor:text;margin-top:0;margin-left:0;pointer-events:none;transform:translate(.6rem,-3.6rem)}input:disabled+label,input:hover:disabled+label,select:disabled+label,select:hover:disabled+label,textarea:disabled+label,textarea:hover:disabled+label{color:var(--disabled)}input:hover+label,select:hover+label,textarea:hover+label{color:rgb(var(--dark))}input:focus+label,select:focus+label,textarea:focus+label{color:rgb(var(--primary))}input:focus:invalid+label,select:focus:invalid+label,textarea:focus:invalid+label{color:rgb(var(--warn))}table{width:100%;max-width:100%;border-collapse:collapse}tbody{overflow-y:auto}thead{border-top:1px solid rgba(var(--muted),1);border-bottom:1px solid rgba(var(--muted),1)}th{flex:1;padding:12px;font-size:1.1rem;font-weight:bolder;word-wrap:break-word}td{flex:1;padding:6px}td,tr{display:flex;align-items:center;justify-content:center}tr{flex-direction:row}tr:nth-child(2n){border-top:1px solid rgba(var(--muted),1);border-bottom:1px solid rgba(var(--muted),1)}td:nth-child(2n){border-left:1px solid rgba(var(--muted),1);border-right:1px solid rgba(var(--muted),1)}tr:first-child{border-top:none}tr:last-child{border-bottom:none}td:first-child{border-left:none}td:last-child{border-right:none}.icon{cursor:pointer}.icon.small{width:1.6rem;height:1.6rem;margin:.1rem}.card{margin:1rem;padding:1.5rem;text-align:left;border-radius:2px;background:rgba(var(--light),1)}.button:active,.button:disabled,.button:focus,.button:invalid,.button:valid{border:none}.button{border:none;height:auto;cursor:pointer;font-size:1rem;border-radius:3px;margin:1rem .3rem;letter-spacing:1px;display:inline-block;text-decoration:none;padding:.6rem 1.9rem;text-transform:uppercase;background-color:transparent;transition:all var(--animation)}.button.right{clear:both;float:right}.button.smoke{color:rgba(var(--dark),1);background-color:var(--shadow)}.button.solid{color:rgba(var(--light),1);background-color:rgba(var(--dark),1)}.button.solid.primary{color:rgba(var(--light),1);background-color:rgba(var(--primary),1)}.button.smoke.primary{color:rgba(var(--primary),1);background-color:rgba(var(--primary),var(--smoke))}.button.solid.secondary{color:rgba(var(--light),1);background-color:rgba(var(--secondary),1)}.button.smoke.secondary{color:rgba(var(--secondary),1);background-color:rgba(var(--secondary),var(--smoke))}.button.solid.warn{color:rgba(var(--light),1);background-color:rgb(var(--warn),1)}.button.smoke.warn{color:rgba(var(--warn),1);background-color:rgba(var(--warn),var(--smoke))}.button.solid.success{color:rgba(var(--light),1);background-color:rgba(var(--success),1)}.button.smoke.success{color:rgba(var(--success),1);background-color:rgba(var(--success),var(--smoke))}.button.solid.error{color:rgba(var(--light),1);background-color:rgba(var(--error),1)}.button.smoke.error{color:rgba(var(--error),1);background-color:rgba(var(--error),var(--smoke))}.button:hover{opacity:var(--hover)}.button:active{filter:brightness(60%)}.button:disabled,.button:disabled:hover{cursor:not-allowed;filter:grayscale(80%)}