Skip to content

Instantly share code, notes, and snippets.

@askaidau
Last active March 16, 2017 04:09
Show Gist options
  • Save askaidau/6efa3591289a89ae817f to your computer and use it in GitHub Desktop.
Save askaidau/6efa3591289a89ae817f to your computer and use it in GitHub Desktop.
/* basic reset */
html,body,p,ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6 {
margin:0;padding:0;
}
html {
-webkit-text-size-adjust: none;
}
ul,ol {
list-style:none
}
a {
text-decoration:none;
outline:0;
}
a img {
border:0;
}
/* font */
body{
/* Traditional Chinese */
font-family:"Arial Unicode MS","微軟正黑體","Microsoft JhengHei",arial,sans-serif;
/* Modern system fonts */
font-family: -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
}
/* clear fix */
.clear:before, .clear:after {
content:"\0020";
display:block;
height:0;
overflow:hidden;
}
.clear:after {
clear: both;
}
/* box-sizing fix */
/* see: http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/* no-select */
.no-select{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* hide gray hover highlight on touch device */
body, .or-specific-element {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
/* pure css sticky elements */
.sticky-header{
position:-webkit-sticky;
position:sticky;
}
/* forms - http://www.sitepoint.com/html5-forms-css/ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
outline: 0;
box-shadow: none;
}
input::-webkit-input-placeholder { color: #ccc; }
input::-moz-placeholder { color: #ccc; }
input:-ms-input-placeholder { color: #ccc; }
input::placeholder { color: #ccc; }
input:focus,
textarea:focus,
select:focus {
background-color: #eef;
}
textarea {
resize: none;
}
/* wrap text in pre - http://stackoverflow.com/questions/248011/how-do-i-wrap-text-in-a-pre-tag */
pre {
white-space: pre-wrap; /* CSS 3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
/* prevent certain things from interacting with the cursor/pointer */
.disabled-el {
pointer-events: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment