Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /*
- Buttons were spread out weirdly.
- */
- .topic-info {
- grid-auto-columns: max-content;
- grid-column-gap: 1rem;
- }
- /*
- Navigation should have a bit more focus so people are more likely to spot it
- */
- .tab-listing-order {
- font-size: 0.7rem;
- }
- .form-listing-options label,
- .form-listing-options select {
- font-size: 0.7rem;
- }
- /*
- Give topics a bit more breathing room so it is easier to differentiate them and browse through them.
- */
- .topic-listing > li {
- margin: 0 0 0.2rem 0;
- }
- .topic {
- padding: 0.4rem;
- }
- /*
- Having the vote count buttons jump around on expanding text is a bit annoying.
- */
- .topic-voting {
- margin: 0.3rem 0.3rem auto 0.3rem;
- }
- /*
- Text is the main content here so it probably shouldn't be as tiny as it is now.
- */
- .topic .topic-text-excerpt {
- font-size: 0.8rem;
- }
- /*
- Expanded text is given a background so it stands out from the rest of the page a bit drawing focus and making it easier to read.
- */
- body .topic-text-excerpt[open] {
- background-color: #eeeeee;
- }
- body.theme-light .topic-text-excerpt[open] {
- background-color: #eee8d5;
- }
- body.theme-dark .topic-text-excerpt[open] {
- background-color: #073642;
- }
- body.theme-black .topic-text-excerpt[open] {
- background-color: #151515;
- }
- /*
- To make it fit properly with a background I also made some adjustments to the margins in that area.
- */
- body .topic-text-excerpt[open] summary {
- margin: 0.4rem;
- }
- body .topic-text-excerpt[open] p {
- margin: 0 0.8rem 0.4rem 0.8rem;
- }
- body .topic-text-excerpt[open] p:first-of-type {
- margin-top: 0.4rem;
- }
- /*
- This affects comment background and might have more to do with personal taste. I do however think that formatting nested comments like this makes conversations easier to follow.
- As a note, I did it now with borders around comments which makes things more clear. It still works very well without borders but then the darker background should be adjusted slightly to be a tad darker.
- */
- .topic-comments>.comment {
- margin-right: 0rem;
- }
- .comment-replies {
- border-left: 0;
- }
- /* Default white theme */
- body .comment[data-comment-depth="0"],
- body .comment .comment .comment,
- body .comment .comment .comment .comment .comment,
- body .comment .comment .comment .comment .comment .comment .comment,
- body .comment .comment .comment .comment .comment .comment .comment .comment .comment {
- background-color: #fff;
- border: solid 1px #c8c8c8;
- }
- .comment .comment,
- .comment .comment .comment .comment,
- .comment .comment .comment .comment .comment .comment,
- .comment .comment .comment .comment .comment .comment .comment .comment,
- .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
- background-color: #f5f5f5;
- border: solid 1px #c8c8c8;;
- margin-right: 0.3rem;
- }
- /* Light theme */
- body.theme-light .comment[data-comment-depth="0"],
- body.theme-light .comment .comment .comment,
- body.theme-light .comment .comment .comment .comment .comment,
- body.theme-light .comment .comment .comment .comment .comment .comment .comment,
- body.theme-light .comment .comment .comment .comment .comment .comment .comment .comment .comment {
- background-color: #fdf6e3;
- border: solid 1px #eee8d5;
- }
- body.theme-light .comment .comment,
- body.theme-light .comment .comment .comment .comment,
- body.theme-light .comment .comment .comment .comment .comment .comment,
- body.theme-light .comment .comment .comment .comment .comment .comment .comment .comment,
- body.theme-light .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
- background-color: #eee8d5;
- border: solid 1px #eee8d5;;
- margin-right: 0.3rem;
- }
- /* Dark theme */
- body.theme-dark .comment[data-comment-depth="0"],
- body.theme-dark .comment .comment .comment,
- body.theme-dark .comment .comment .comment .comment .comment,
- body.theme-dark .comment .comment .comment .comment .comment .comment .comment,
- body.theme-dark .comment .comment .comment .comment .comment .comment .comment .comment .comment {
- background-color: #002b36;
- border: solid 1px #073642;
- }
- body.theme-dark .comment .comment,
- body.theme-dark .comment .comment .comment .comment,
- body.theme-dark .comment .comment .comment .comment .comment .comment,
- body.theme-dark .comment .comment .comment .comment .comment .comment .comment .comment,
- body.theme-dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
- background-color: #073642;
- border: solid 1px #073642;
- margin-right: 0.3rem;
- }
- /* Black theme */
- body.theme-black .comment[data-comment-depth="0"],
- body.theme-black .comment .comment .comment,
- body.theme-black .comment .comment .comment .comment .comment,
- body.theme-black .comment .comment .comment .comment .comment .comment .comment,
- body.theme-black .comment .comment .comment .comment .comment .comment .comment .comment .comment {
- background-color: #000;
- border: solid 1px #222;
- }
- body.theme-black .comment .comment,
- body.theme-black .comment .comment .comment .comment,
- body.theme-black .comment .comment .comment .comment .comment .comment,
- body.theme-black .comment .comment .comment .comment .comment .comment .comment .comment,
- body.theme-black .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
- background-color: #151515;
- border: solid 1px #222;;
- margin-right: 0.3rem;
- }
- /*
- I also removed the header background.
- Comment starts are already easy to differentiate and removing the background serves to make it a bit cleaner and helps the collapse button as it didn't really match the header.
- */
- body.theme-light .comment header,
- body.theme-dark .comment header,
- body.theme-black .comment header,
- body .comment header {
- background-color: transparent;
- }
- /*
- There was simply too much margin between paragraphs in comments breaking text up a bit.
- */
- .comment p {
- margin: 0 0 0.2rem;
- }
- /*
- Collapse buttons really didn't look like they belonged on mobile.
- Note: I was going to them differently on desktop as they have more margin there but actually liked the result there as well.
- If you don't this is also needed.
- @media (min-width: 840px) {
- button.btn.btn-comment-collapse {
- border-width: 0.05rem
- }
- }
- */
- button.btn.btn-comment-collapse {
- border-width: 0 0.05rem 0.05rem 0;
- }
- .is-comment-collapsed button.btn.btn-comment-collapse {
- border-width: 0 0.05rem 0 0;
- }
Add Comment
Please, Sign In to add comment