diff options
| -rw-r--r-- | src/isso.css | 224 |
1 files changed, 224 insertions, 0 deletions
diff --git a/src/isso.css b/src/isso.css new file mode 100644 index 0000000..bd880dd --- /dev/null +++ b/src/isso.css @@ -0,0 +1,224 @@ +#isso-thread { + margin-bottom: 1rem; +} + +#isso-thread * { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +#isso-thread a { + text-decoration: none; +} + +#isso-thread > h4 { + color: #555; + font-weight: bold; +} +#isso-thread .textarea { + min-height: 58px; + outline: 0; +} +#isso-thread .textarea.placeholder { + color: #AAA; +} + +.isso-comment { + max-width: 68em; + padding-top: 0.95em; + margin: 0.95em auto; +} +.isso-comment:not(:first-of-type), +.isso-follow-up .isso-comment { + border-top: 1px solid rgba(0, 0, 0, 0.1); +} +.isso-comment > div.avatar, +.isso-postbox > .avatar { + display: block; + float: left; + width: 7%; + margin: 3px 15px 0 0; +} +.isso-postbox > .avatar { + float: left; + margin: 5px 10px 0 5px; + width: 48px; + height: 48px; + overflow: hidden; +} +.isso-comment > div.avatar > svg, +.isso-postbox > .avatar > svg { + max-width: 48px; + max-height: 48px; + border: 1px solid rgba(0, 0, 0, 0.2); + border-radius: 3px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); +} +.isso-comment > div.text-wrapper { + display: block; +} +.isso-comment .isso-follow-up { + padding-left: calc(7% + 20px); +} +.isso-comment > div.text-wrapper > .isso-comment-header, .isso-comment > div.text-wrapper > .isso-comment-footer { + font-size: 0.95em; +} +.isso-comment > div.text-wrapper > .isso-comment-header { + font-size: 0.95em; +} +.isso-comment > div.text-wrapper > .isso-comment-header .spacer { + padding: 0 6px; +} +.isso-comment > div.text-wrapper > .isso-comment-header .spacer, +.isso-comment > div.text-wrapper > .isso-comment-header a.permalink, +.isso-comment > div.text-wrapper > .isso-comment-header .note, +.isso-comment > div.text-wrapper > .isso-comment-header a.parent { + color: gray !important; + font-weight: normal; + text-shadow: none !important; +} +.isso-comment > div.text-wrapper > .isso-comment-header .spacer:hover, +.isso-comment > div.text-wrapper > .isso-comment-header a.permalink:hover, +.isso-comment > div.text-wrapper > .isso-comment-header .note:hover, +.isso-comment > div.text-wrapper > .isso-comment-header a.parent:hover { + color: #606060 !important; +} +.isso-comment > div.text-wrapper > .isso-comment-header .note { + float: right; +} +.isso-comment > div.text-wrapper > .isso-comment-header .author { + font-weight: bold; + color: #555; +} +.isso-comment > div.text-wrapper > .textarea-wrapper .textarea { + margin-top: 0.2em; +} +.isso-comment > div.text-wrapper > div.text p { + font-size: 0.9rem; + margin-top: 0.2em; +} +.isso-comment > div.text-wrapper > div.text p:last-child { + margin-bottom: 0.2em; +} +.isso-comment > div.text-wrapper > div.text h1, +.isso-comment > div.text-wrapper > div.text h2, +.isso-comment > div.text-wrapper > div.text h3, +.isso-comment > div.text-wrapper > div.text h4, +.isso-comment > div.text-wrapper > div.text h5, +.isso-comment > div.text-wrapper > div.text h6 { + font-size: 130%; + font-weight: bold; +} +.isso-comment > div.text-wrapper > div.textarea-wrapper .textarea { + width: 100%; + border: 1px solid #f0f0f0; + border-radius: 2px; + box-shadow: 0 0 2px #888; +} +.isso-comment > div.text-wrapper > .isso-comment-footer { + font-size: 0.85em; + color: gray !important; + clear: left; +} +.isso-comment > div.text-wrapper > .isso-comment-footer a { + font-weight: normal; + text-decoration: none; +} +.isso-comment > div.text-wrapper > .isso-comment-footer a:hover { + color: #111111 !important; + text-shadow: #aaaaaa 0 0 1px !important; +} +.isso-comment > div.text-wrapper > .isso-comment-footer > a { + position: relative; + top: .2em; +} +.isso-comment > div.text-wrapper > .isso-comment-footer > a + a { + padding-left: 1rem; +} +.isso-comment > div.text-wrapper > .isso-comment-footer .votes { + color: gray; +} +.isso-comment > div.text-wrapper > .isso-comment-footer .upvote svg, +.isso-comment > div.text-wrapper > .isso-comment-footer .downvote svg { + position: relative; + top: .2em; +} +.isso-comment .isso-postbox { + margin-top: 0.8em; +} + +.isso-postbox { + max-width: 68em; + margin: 0 auto 1rem; +} +.isso-postbox > .form-wrapper { + display: block; + padding: 0; +} +.isso-postbox > .form-wrapper > .auth-section, +.isso-postbox > .form-wrapper > .auth-section .post-action { + display: block; +} +.isso-postbox > .form-wrapper .textarea { + margin: 0 0 .3em; + padding: .4em .8em; + border-radius: 3px; + background-color: #fff; + border: 1px solid rgba(0, 0, 0, 0.2); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); +} +#isso-thread .textarea:focus, +#isso-thread input:focus { + border-color: rgba(0, 0, 0, 0.8); +} +.isso-postbox > .form-wrapper > .auth-section .input-wrapper { + display: inline-block; + position: relative; + max-width: 25%; + margin: 0; +} +.isso-postbox > .form-wrapper > .auth-section .input-wrapper input { + padding: .3em 10px; + max-width: 100%; + border-radius: 3px; + background-color: #fff; + line-height: 1.4em; + border: 1px solid rgba(0, 0, 0, 0.2); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); +} +.isso-postbox > .form-wrapper > .auth-section .post-action { + display: inline-block; + float: right; + margin: 0; +} +.isso-postbox > .form-wrapper > .auth-section .post-action > input { + padding: calc(.3em - 1px); + border-radius: 2px; + border: 1px solid #CCC; + background-color: #DDD; + cursor: pointer; + outline: 0; + line-height: 1.4em; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); +} +.isso-postbox > .form-wrapper > .auth-section .post-action > input:hover { + background-color: #CCC; +} +.isso-postbox > .form-wrapper > .auth-section .post-action > input:active { + background-color: #BBB; +} +@media screen and (max-width:600px) { + .isso-postbox > .form-wrapper > .auth-section .input-wrapper { + display: block; + max-width: 100%; + margin: 0 0 .3em; + } + .isso-postbox > .form-wrapper > .auth-section .input-wrapper input { + width: 100%; + } + .isso-postbox > .form-wrapper > .auth-section .post-action { + display: block; + float: none; + text-align: right; + } +} |