godlike.css/godlike.less

CSS for layout standardization and usability of web applications

@charset "UTF-8";

// Fix adaptive in mobile browsers
@-ms-viewport {
    width: device-width;
    initial-scale: 1;
}

@-moz-viewport {
    width: device-width;
    initial-scale: 1;
}

@-webkit-viewport {
    width: device-width;
    initial-scale: 1;
}

// Fix default box-sizing
*, :before, :after {
    box-sizing: border-box;
}

// Fix document height
html {
    height: 100%;
}

// Fix height and scrollbars
body {
    position: relative;
    min-height: 100%;
    overflow: auto;
    overflow-x: hidden;

    // Remove default margins
    margin: 0;
    padding: 0;

    // Fix hyphenation
    word-wrap: break-word;

    // Fix text decoration
    text-decoration-skip: objects;

    // Fix rendering fonts
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    // Fix text zoom on Mobile Devices
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;

    // Fix tap color
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    // Fix horisontal scroll
    -webkit-overflow-scrolling: touch;

    // Remove 300ms delay on Mobile Devices
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

// Fix default display
span {
    display: inline-block;
}

// Remove default styles
a, input, button, textarea, optgroup, select, fieldset, figure, legend, address {
    font: inherit;
    color: inherit;
    line-height: inherit;
    text-transform: inherit;
    text-shadow: inherit;
    border: none;
    background: none;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
}

// Add default animation
a, button, [type='button'], [type='submit'] {
    transition: color .25s, background .25s, opacity .25s;

    // Children of buttons should not accept events
    > * {
        pointer-events: none;
    }
}

// Remove default text-decoration, fix cursor
a {
    cursor: pointer;
    text-decoration: none;

    // Remove gaps in links underline in iOS 8+ and Safari 8+
    -webkit-text-decoration-skip: none;
}

// Fix button bugs
button {
    overflow: visible;
    -webkit-font-smoothing: inherit;
    letter-spacing: inherit;
}

// Remove default margins, add hyphenation, add correct highlight
p {
    margin: 0;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow: hidden;
}

// Fix font-weight
b, strong {
    font-weight: 700;
}

// Fix the correct display
audio, canvas {
    display: inline-block;
}

// Fix the correct display graphical elements
img, svg, embed, object, iframe, video, audio, canvas {
    vertical-align: middle;
    max-width: 100%;
    height: auto;
    border: 0;
}

// Fix align graphical elements
img, embed, object, iframe, video {
    display: block;
    margin: auto;
}

// Fix Firefox transform scale image bug
img {
    image-rendering: optimizeQuality;
}

// Change the fill color to match the text color in all browsers
svg {
    color: inherit;

    // Hide the overflow in IE
    &:not(:root) {
        overflow: hidden;
    }
}

// Fix default alignment
progress {
    vertical-align: baseline;
    border: none;
}

// Add valid default styles
h1, h2, h3, h4, h5, h6 {
    text-rendering: optimizeLegibility;
    font: inherit;
    color: inherit;
    margin: 0;
}

// Remove default margins
ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

// Fix default alignment
input, select, button, button > * {
    display: inline-block;
    vertical-align: middle;
}

// Remove user-select and add cursor pointer on button
button, label, select, summary, [type='button'], [type='submit'], [type='reset'], [type='checkbox'], [type='radio'], [type='range'] {
    user-select: none;
    cursor: pointer;
}

// Fix appearance in Chrome and Safari
select, [type='button'], [type='submit'], [type='search'], [type="radio"], [type='range'], ::-webkit-search-cancel-button, ::-webkit-search-decoration, ::-webkit-outer-spin-button, ::-webkit-inner-spin-button, ::-webkit-slider-thumb {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

// Hide autofill Safari icons in input field
::-webkit-contacts-auto-fill-button, ::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
}

// Fix default autocomplete background color in Chrome and Safari
:-webkit-autofill {
    box-shadow: inset 0 0 0 1000px #fff;
}

// Remove summary arrow
::marker {
    display: none;
}

// Fix appearance in Mobile Safari
[type="radio"] {
    -webkit-appearance: radio;
}

// Fix appearance in Firefox
[type='number'] {
    -moz-appearance: textfield;
}

// Remove clean cross in IE 10
::-ms-clear, ::-ms-reveal {
    display: none;
}

// Add valid default width
input, textarea {
    width: 100%;
}

// Add text input with ellipsis
input {
    text-overflow: ellipsis;
}

// Add scrollbars, remove resize
textarea {
    overflow: auto;
    resize: none;
}

// Remove outline on the forms and links
:active, :hover, :focus {
    outline: 0;
    outline-offset: 0;
}

// Remove click on the disabled state
:disabled {
    pointer-events: none;
    cursor: not-allowed;

    // Fix disabled text color
    -webkit-text-fill-color: initial;
}

// Remove border and padding in Firefox
::-moz-focus-outer, ::-moz-focus-inner {
    border: 0;
    padding: 0;
}

// Fix placeholder color in Firefox 19+ and Firefox 18-
::placeholder {
    opacity: 1;
    color: inherit;
}
::-moz-placeholder { // for Firefox 19+
    opacity: 1;
    color: inherit;
}

// Remove default spacing
table {
    border-spacing: 0;
    border-collapse: collapse;
}

// Remove default padding
td, th {
    padding: 0;
    text-align: center;
}

// Right display elements in article
//article {
//
//    // Add margins
//    p:not(:empty) {
//        margin-top: .7em;
//        margin-bottom: .7em;
//    }
//
//    // Fix display
//    span {
//        display: inline;
//    }
//
//    // Add margins
//    ul, ol {
//        margin-top: .7em;
//        margin-bottom: .7em;
//        ul, ol {
//            margin: 0;
//            padding-left: 1.2em;
//        }
//        > li {
//            &:before {
//                margin-right: .7em;
//            }
//            p {
//                display: inline;
//            }
//        }
//    }
//
//    // Fix marker style
//    ul {
//        > li {
//            &:before {
//                content: '•';
//                font-family: "Tahoma";
//            }
//        }
//    }
//
//    // Fix counter style
//    ol {
//        counter-reset: count;
//        > li {
//            &:before {
//                content: counter(count) '.';
//                counter-increment: count;
//            }
//        }
//    }
//}