|
- /**
- * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
- * http://cssreset.com
- */
- html, body, div, span, applet, object, iframe,
- h1, h2, h3, h4, h5, h6, p, blockquote, pre,
- a, abbr, acronym, address, big, cite, code,
- del, dfn, em, img, ins, kbd, q, s, samp,
- small, strike, strong, sub, sup, tt, var,
- b, u, i, center,
- dl, dt, dd, ol, ul, li,
- fieldset, form, label, legend,
- table, caption, tbody, tfoot, thead, tr, th, td,
- article, aside, canvas, details, embed,
- figure, figcaption, footer, header, hgroup,
- menu, nav, output, ruby, section, summary,
- time, mark, audio, video {
- margin: 0;
- padding: 0;
- border: 0;
- font-size: 100%;
- font: inherit;
- vertical-align: baseline;
- }
-
- /* HTML5 display-role reset for older browsers */
- article, aside, details, figcaption, figure,
- footer, header, hgroup, menu, nav, section {
- display: block;
- }
-
- body {
- line-height: 1;
- }
-
- ol, ul {
- list-style: none;
- }
-
- blockquote, q {
- quotes: none;
- }
-
- blockquote:before, blockquote:after,
- q:before, q:after {
- content: '';
- content: none;
- }
-
- table {
- border-collapse: collapse;
- border-spacing: 0;
- }
-
- html, body {
- max-width: 100%;
- }
-
- body {
- font-size: 12px;
- font-family: arial, helvetica, sans-serif;
- margin: 22px 5px;
- background: #1e1e1e;
- color: #999999;
- }
-
- .bar {
- z-index: 1;
- font-size: 13px;
- width: 100%;
- height: 20px;
- position: fixed;
- display: block;
- margin-left: -5px;
- background: #333333;
- border: solid #666666;
- }
- .bar.top {
- top: 0;
- border-width: 0 0 1px 0;
- }
- .bar.top .boardlist {
- overflow: scroll;
- display: table;
- border-collapse: separate;
- border-spacing: calc(1em / 3) 2.5px;
- text-align: center;
- margin: 0 auto;
- height: 100%;
- }
- .bar.top .boardlist .sub {
- white-space: nowrap;
- display: table-cell;
- }
- .bar.bottom {
- bottom: 0;
- border-width: 1px 0 0 0;
- }
- .bar.bottom .pages {
- margin-top: -1px;
- }
- .bar.bottom .pages > * {
- display: inline-block;
- }
-
- @media (max-width: 480px) {
- body, .bar {
- margin-left: 0;
- margin-right: 0;
- } }
-
- a, a:visited, a:active, a:focus {
- color: #cccccc;
- -webkit-transition: 0.15s color;
- -khtml-transition: 0.15s color;
- -moz-transition: 0.15s color;
- -ms-transition: 0.15s color;
- -o-transition: 0.15s color;
- transition: 0.15s color;
- -webkit-transition: 0.15s text-shadow;
- -khtml-transition: 0.15s text-shadow;
- -moz-transition: 0.15s text-shadow;
- -ms-transition: 0.15s text-shadow;
- -o-transition: 0.15s text-shadow;
- transition: 0.15s text-shadow;
- text-decoration: none;
- }
- a.post_no, a:visited.post_no, a:active.post_no, a:focus.post_no {
- color: #999999;
- }
- a:hover, a:visited:hover, a:active:hover, a:focus:hover {
- text-shadow: 0px 0px 5px white;
- color: #32dd72;
- }
-
- .board_image, header, body > form[name="post"] {
- display: block;
- max-width: 100%;
- }
-
- .board_image, header {
- width: 384px;
- margin: 0 auto;
- }
-
- .board_image {
- border: 1px solid #666666;
- -webkit-border-radius: 2px;
- -khtml-border-radius: 2px;
- -moz-border-radius: 2px;
- -ms-border-radius: 2px;
- -o-border-radius: 2px;
- border-radius: 2px;
- width: auto !important;
- height: auto !important;
- margin-top: 32px;
- }
- @media (max-width: 480px) {
- .board_image {
- width: 100% !important;
- border-top: 0;
- border-right: 0;
- border-left: 0;
- margin-top: 0;
- -webkit-border-radius: 0;
- -khtml-border-radius: 0;
- -moz-border-radius: 0;
- -ms-border-radius: 0;
- -o-border-radius: 0;
- border-radius: 0;
- } }
-
- header {
- text-align: center;
- color: #32dd72;
- margin: 1em auto;
- }
- header h1 {
- font: 26px "lain", tahoma;
- font-weight: bold;
- letter-spacing: -2px;
- margin-bottom: 6px;
- }
- header .subtitle {
- font-size: 8pt;
- }
-
- .unimportant {
- font-size: 10px;
- }
-
- input, textarea {
- color: #cccccc;
- -webkit-appearance: none;
- -khtml-appearance: none;
- -moz-appearance: none;
- -ms-appearance: none;
- -o-appearance: none;
- appearance: none;
- }
- input[type="checkbox"]:after, textarea[type="checkbox"]:after {
- opacity: 1;
- display: inline-block;
- content: " ";
- box-sizing: border-box;
- width: 12px;
- height: 12px;
- background: transparent;
- border: 1px solid #666666;
- position: relative;
- top: 1px;
- right: calc(1em + 4px);
- margin-right: calc(1px - 1em);
- -webkit-border-radius: 2px;
- -khtml-border-radius: 2px;
- -moz-border-radius: 2px;
- -ms-border-radius: 2px;
- -o-border-radius: 2px;
- border-radius: 2px;
- }
- input:not([type="file"]), textarea:not([type="file"]) {
- background: #333333;
- border: 1px solid #666666;
- }
- input[type="text"], input[type="button"], input[type="password"], input[type="submit"], input#body, textarea[type="text"], textarea[type="button"], textarea[type="password"], textarea[type="submit"], textarea#body {
- padding: 2px 4px;
- }
- input[type="text"], input[type="button"], input[type="password"], input[type="submit"], textarea[type="text"], textarea[type="button"], textarea[type="password"], textarea[type="submit"] {
- height: 16px;
- }
- input[type="text"], input[type="submit"], input#body, textarea[type="text"], textarea[type="submit"], textarea#body {
- box-sizing: content-box;
- -webkit-transition: 0.15s border-color;
- -khtml-transition: 0.15s border-color;
- -moz-transition: 0.15s border-color;
- -ms-transition: 0.15s border-color;
- -o-transition: 0.15s border-color;
- transition: 0.15s border-color;
- }
- @media (max-width: 480px) {
- input[type="text"]:last-of-type, input[type="submit"]:last-of-type, input#body:last-of-type, textarea[type="text"]:last-of-type, textarea[type="submit"]:last-of-type, textarea#body:last-of-type {
- border-right: 0;
- -webkit-border-radius: 2px 0 0 2px;
- -khtml-border-radius: 2px 0 0 2px;
- -moz-border-radius: 2px 0 0 2px;
- -ms-border-radius: 2px 0 0 2px;
- -o-border-radius: 2px 0 0 2px;
- border-radius: 2px 0 0 2px;
- } }
- input[type="text"]:focus, input[type="submit"]:hover, input#body:focus, textarea[type="text"]:focus, textarea[type="submit"]:hover, textarea#body:focus {
- border-color: #888888;
- }
- input[type="submit"]:hover, textarea[type="submit"]:hover {
- color: #32dd72;
- background: #555555;
- }
- input[type="submit"], textarea[type="submit"] {
- -webkit-transition: 0.15s background;
- -khtml-transition: 0.15s background;
- -moz-transition: 0.15s background;
- -ms-transition: 0.15s background;
- -o-transition: 0.15s background;
- transition: 0.15s background;
- -webkit-transition: 0.15s color;
- -khtml-transition: 0.15s color;
- -moz-transition: 0.15s color;
- -ms-transition: 0.15s color;
- -o-transition: 0.15s color;
- transition: 0.15s color;
- width: 64px;
- padding: 2px 5px;
- margin-right: -8px;
- }
- input[type="text"], input#body, textarea[type="text"], textarea#body {
- width: calc(100% - 2px);
- }
- input[type="text"][name="subject"], input#body[name="subject"], textarea[type="text"][name="subject"], textarea#body[name="subject"] {
- width: calc(100% - 76px - 4px);
- }
- input#body, textarea#body {
- min-width: calc(100% - 2px);
- margin: 0;
- }
-
- /*[for^="delete"], [for="spoiler"] {
- &:before {
- display: inline-block;
- content: " ";
- box-sizing: border-box;
- width: $body_size;
- height: $body_size;
- background: transparent;
- border: $nav_border $nav_border_look;
- position: relative;
- top: 1px;
- right: calc(1em + 4px);
- margin-right: calc(1px - 1em);
- @include border-radius($div_radius);
- }
- }*/
- form[name="post"] {
- display: block;
- }
- @media (max-width: 480px) {
- form[name="post"] table, form[name="post"] tbody, form[name="post"] tr, form[name="post"] td {
- margin: 0;
- width: 100% !important;
- } }
- form[name="post"] table, form[name="post"] tbody {
- max-width: 100%;
- }
- form[name="post"] table {
- border-collapse: separate;
- border-spacing: 2px;
- margin: 0 auto;
- }
- form[name="post"] tbody {
- width: 100%;
- display: block;
- position: relative;
- left: -4px;
- }
- form[name="post"] [id|="upload"] td {
- display: table-row;
- }
- form[name="post"] [id|="upload"] td > * {
- display: table-cell;
- height: 20px;
- }
- form[name="post"] [id|="upload"] td > *#upload_file {
- width: 100%;
- }
- form[name="post"] [id|="upload"] td > *#spoilercontainer {
- width: 74px;
- }
- form[name="post"] th, form[name="post"] input, form[name="post"] textarea {
- -webkit-border-radius: 2px;
- -khtml-border-radius: 2px;
- -moz-border-radius: 2px;
- -ms-border-radius: 2px;
- -o-border-radius: 2px;
- border-radius: 2px;
- }
- form[name="post"] th {
- text-align: left;
- min-height: 20px;
- vertical-align: middle;
- width: 64px;
- min-width: 64px !important;
- padding: 0 5px;
- font-weight: bold;
- border: 1px solid #333333;
- background: #333333;
- }
- @media (max-width: 480px) {
- form[name="post"] th {
- -webkit-border-radius: 0 2px 2px 0;
- -khtml-border-radius: 0 2px 2px 0;
- -moz-border-radius: 0 2px 2px 0;
- -ms-border-radius: 0 2px 2px 0;
- -o-border-radius: 0 2px 2px 0;
- border-radius: 0 2px 2px 0;
- } }
-
- hr {
- border: 1px solid #333333;
- margin: 6px 0px;
- clear: left;
- }
-
- .blotter {
- color: red;
- font-weight: bold;
- text-align: center;
- }
- .blotter p {
- margin: 12px 0;
- }
-
- [id^="thread"] > .files, .op {
- margin-left: 19px;
- }
- @media (max-width: 480px) {
- [id^="thread"] > .files, .op {
- margin-left: 0;
- } }
-
- [id^="thread"] > br {
- display: none;
- }
-
- .fileinfo {
- margin: 5px 0 5px 0;
- }
-
- .post-image {
- margin: 0 10px 10px 0;
- float: left;
- -webkit-border-radius: 2px;
- -khtml-border-radius: 2px;
- -moz-border-radius: 2px;
- -ms-border-radius: 2px;
- -o-border-radius: 2px;
- border-radius: 2px;
- }
- @media (max-width: 480px) {
- .post-image {
- float: none;
- width: 100% !important;
- height: auto !important;
- margin-right: 0;
- -webkit-border-radius: 0;
- -khtml-border-radius: 0;
- -moz-border-radius: 0;
- -ms-border-radius: 0;
- -o-border-radius: 0;
- border-radius: 0;
- margin-bottom: 5px;
- } }
-
- @media (max-width: 480px) {
- .post .intro {
- clear: left;
- } }
- .post .intro [type="checkbox"] {
- display: table-cell;
- vertical-align: middle;
- box-sizing: border-box;
- width: 14px;
- margin: 0 4px 2px 0;
- }
- .post.op .intro {
- line-height: 1.5em;
- margin-top: -.25em;
- }
- @media (max-width: 480px) {
- .post.op .intro {
- display: block;
- margin-top: calc(-.5em - 1px);
- padding: 0.25em 18px;
- background-color: #333333;
- border-bottom: 1px solid #666666;
- } }
- .post.op .intro > :last-child:before {
- content: " ";
- }
- @media (max-width: 480px) {
- .post.op .body {
- margin: 0.7em 23px;
- } }
- .post .body {
- margin: 0.7em 0 0.7em 18px;
- }
-
- .postcontainer {
- border-top: 3px solid transparent;
- }
- .postcontainer .sidearrows {
- float: left;
- width: 14px;
- margin-right: 5px;
- }
- @media (max-width: 480px) {
- .postcontainer .sidearrows {
- display: none;
- } }
- .postcontainer .op .body {
- margin-bottom: 1em;
- }
- .postcontainer .reply {
- display: table;
- -webkit-border-radius: 2px;
- -khtml-border-radius: 2px;
- -moz-border-radius: 2px;
- -ms-border-radius: 2px;
- -o-border-radius: 2px;
- border-radius: 2px;
- background-color: #333333;
- border: 1px solid #666666;
- padding: 8px 19px 6px 8px;
- }
- .postcontainer .reply .files, .postcontainer .reply .body {
- margin-left: 18px;
- }
- @media (max-width: 480px) {
- .postcontainer .reply .files {
- position: relative;
- left: -7px;
- margin-right: -7px;
- } }
- @media (max-width: 480px) {
- .postcontainer .reply {
- box-sizing: border-box;
- width: 100%;
- border-left: 0;
- border-right: 0;
- -webkit-border-radius: 0;
- -khtml-border-radius: 0;
- -moz-border-radius: 0;
- -ms-border-radius: 0;
- -o-border-radius: 0;
- border-radius: 0;
- } }
-
- .name {
- font-weight: 800;
- color: #32dd72;
- }
-
- .subject {
- font-weight: 800;
- color: rgba(50, 221, 114, 0.6);
- }
-
- .spoiler {
- background: black;
- color: black;
- }
- .spoiler:hover {
- color: white;
- }
-
- .quote {
- color: #b8d962;
- }
-
- .omitted {
- opacity: 0.6;
- }
-
- div.delete {
- float: right;
- white-space: nowrap;
- position: relative;
- right: 15px;
- margin-right: -7px;
- }
- div.delete input {
- -webkit-border-radius: 2px;
- -khtml-border-radius: 2px;
- -moz-border-radius: 2px;
- -ms-border-radius: 2px;
- -o-border-radius: 2px;
- border-radius: 2px;
- }
- div.delete input:last-child {
- margin-left: 2px;
- }
- div.delete [type="text"] {
- width: 256px !important;
- }
- div.delete:last-child {
- margin-top: 2px;
- }
-
- footer {
- clear: both;
- margin-bottom: 32px;
- }
|