Topic: Mobile Mode Improvements

Posted under General

Here's what I added to my css to make the site usable + some quality of life changes + personal preferences

(I'll sort them later)
#

Custom CSS
/*general site tweeks*/
/* Make the custom CSS style box bigger */
#user_custom_style {min-height:400px; width:100%;}

/*make the edit-mode box match background*/
#quick-edit-form { background-color: #787420; border-radius: 6px; }

/*Make description box fit, change values for your device*/
.desc-popup { width: 325px; margin-left: -180px; }

/*Show uploader (redundant with the setting, but still)*/
#image-container::after {
  white-space: pre;
  content: "\aUploaded by: " attr(data-uploader);
}

/*Remove CoC commenting warning*/
.comments-for-post h2 { display: none; }

/*Fix the oversized posts going offscreen*/
/*If you enable disable cropped thumbnails, remove zoom:50%*/
article.post-preview { min-width: 140px; max-width: 31vw; min-height: 140px; zoom:50%;

/*this section below makes the post stats look better but fucks up the pools*/
.desc { letter-spacing:-2.5px; text-indent:-10%
}
}


/*minimize DText for matter button size, decrease overflow*/
.dtext-formatter .dtext-formatter-tabs { padding: .5rem .25rem 0; }
.dtext-formatter .dtext-formatter-tabs a { margin-right: .125rem; padding: .5rem .33rem; }
.dtext-formatter .dtext-formatter-buttons a { margin-right: .1rem; padding: .3rem .38rem; }

/*center edit-mode form and buttons*/
#quick-edit-form #post_tag_string { margin: auto; width: 6268%; }
#quick-edit-form .input > input:nth-child(2) { margin-left: 30%; }

}

/*source links no longer extend past the window size causing the view to shift suddenly*/
.source-link { max-width: 100%; overflow: hidden; }

/*edit reason's text smaller and box a bit larger so they aren't just a vertical strip of words*/
.pv-tags-locked-label,.pv-tags-locked { grid-column-start: 9; }
.pv-tags-locked { font-size: 8pt; overflow-wrap: normal; word-break: keep-all; }
.pv-description-label,.pv-description { grid-column-end: 9; grid-column-start: 8; overflow: auto; }
.pv-reason-label,.pv-reason { grid-column-end: 8; }
.pv-reason { font-size: 9pt; }
/*(I don't really grok how these grid elements function, for some reason it seems like some values would just randomly break the entire element, and some would cause some properties to act weird...:/)*/

/* (search help) away from search submit button; prevent misclicks */
.search-help { margin-bottom: 12px; margin-top: -12px; }

#mobile-search-input { height: 40px; }

/* edit submit button to the middle of the screen; easier to hit with thumbs */
.edit-submit { margin-left: auto; margin-right: auto; border-radius: 8px; }
.btn { margin-right: -8px; }

/* less relevant information on tag history pages small; less scrolling to get to bottom */
.diff-list :not(del, ins) a { font-size: 4pt; }
div#c-post-versions div#a-index .pv-tags { line-height: 0px; }
.pv-sources { font-size: 4pt; line-height: 8px; }

/* character count in DText boxes further into corner + transparent; less intrusive while typing */
.dtext-formatter-charcount { font-weight: bold; color: rgba(0, 0, 0, 0.33); margin-right: -20px; margin-bottom: -4px; }

/* "?" wiki link in tag list away from edge of screen; easier to tap */
.wiki-link { margin-left: 4px; margin-right: 6px; }

/* Move Reply/Edit and Report/Hide away from each other in forum */
.forum-post div.content-menu li:nth-child(2n):not([class]) {
    float: right; font-size:80%;
}

/* Add more space on wiki pages */
#wiki-page-body {margin-left: 5px}

/* hamburger menu and contents look a bit better */
header { background: none; }
#maintoggle { margin-bottom: -1px; }
#nav { margin-top: 13px; margin-left: -16px; margin-right: -16px; margin-bottom: -12px; }

/* center pools gallery */
#a-gallery > section:nth-child(6) { text-align: center; }

/*restore old h2 size on non-DText objects*/
h2 { font-size: 0.8em; }
.styled-dtext h2 { font-size: 1.85em; }

html body img {
  -ms-interpolation-mode: nearest-neighbor;
}

/*
2 donovan
10 me
*/
/*user highlight; add glow to specific usernames in comment headers and the like. (pseudo friends list)*/
/*replace <userid> with any user's ID. glow color defined by --uhl-glow. --glow-size between .1-.2em is recommended. more users can be marked by adding ,[href$="/<userid>"] to the :is() section.*/
:is([href$="/69420"],[href$="/2"]).with-style { 
--uhl-glow: #b80; 
--glow-size: .2em;
--uhl-stroke: var(--color-section); --glow-size-neg: calc(-1 * var(--glow-size)); --glow-dia: calc(var(--glow-size) / sqrt(2)); --glow-dia-neg: calc(-1 * var(--glow-dia)); text-shadow: -.67px -.67px 0 var(--uhl-stroke), -.94px 0 0 var(--uhl-stroke), -.67px .67px 0 var(--uhl-stroke), 0 .94px 0 var(--uhl-stroke), .67px .67px 0 var(--uhl-stroke), .94px 0 0 var(--uhl-stroke), .67px -.67px 0 var(--uhl-stroke), 0 -.94px 0 var(--uhl-stroke), var(--glow-dia-neg) var(--glow-dia-neg) .1em var(--uhl-glow), var(--glow-dia) var(--glow-dia-neg) .1em var(--uhl-glow), var(--glow-dia-neg) var(--glow-dia) .1em var(--uhl-glow),var(--glow-dia) var(--glow-dia) .1em var(--uhl-glow), 0 var(--glow-size-neg) .1em var(--uhl-glow), var(--glow-size-neg) 0 .1em var(--uhl-glow), 0 var(--glow-size) .1em var(--uhl-glow), var(--glow-size) 0 .1em var(--uhl-glow); }

:is([href$="/10"]).with-style { 
--uhl-glow: #77d; 
--glow-size: .2em;
--uhl-stroke: var(--color-section); --glow-size-neg: calc(-1 * var(--glow-size)); --glow-dia: calc(var(--glow-size) / sqrt(2)); --glow-dia-neg: calc(-1 * var(--glow-dia)); text-shadow: -.67px -.67px 0 var(--uhl-stroke), -.94px 0 0 var(--uhl-stroke), -.67px .67px 0 var(--uhl-stroke), 0 .94px 0 var(--uhl-stroke), .67px .67px 0 var(--uhl-stroke), .94px 0 0 var(--uhl-stroke), .67px -.67px 0 var(--uhl-stroke), 0 -.94px 0 var(--uhl-stroke), var(--glow-dia-neg) var(--glow-dia-neg) .1em var(--uhl-glow), var(--glow-dia) var(--glow-dia-neg) .1em var(--uhl-glow), var(--glow-dia-neg) var(--glow-dia) .1em var(--uhl-glow),var(--glow-dia) var(--glow-dia) .1em var(--uhl-glow), 0 var(--glow-size-neg) .1em var(--uhl-glow), var(--glow-size-neg) 0 .1em var(--uhl-glow), 0 var(--glow-size) .1em var(--uhl-glow), var(--glow-size) 0 .1em var(--uhl-glow); }

/*Deleted post feature :p*/
post[deleted=true] > a:after {
    background-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,1) 45%, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 60%, rgba(0,0,0,0) 100%);
    color: red;
	content: "YOU DIED";
	font-family: "Times New Roman";
}

div.avatar div[data-status="deleted"] a, article[data-flags="deleted"] a, div.profile-avatar div[data-status="deleted"] a {
    justify-content: center;
    position: relative;
    display: flex;
}

div.avatar div[data-status="deleted"] a:after, article[data-flags="deleted"] a:after, div.profile-avatar div[data-status="deleted"] a:after {
    background-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,1) 45%, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 60%, rgba(0,0,0,0) 100%);
    color: red;
    content: "YOU DIED";
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    font-family: "Times New Roman";
    letter-spacing: 3px;
    font-size: 0.9rem;
    text-shadow: 1px 1px 0px #000000, 1px 0px 0px #000000, 0px 1px 0px #000, -1px -1px 0px #000;
}

/*Identify posts under blacklist while blacklist is disabled*/
a#re-enable-all-blacklists {
  background: rgba(255, 0, 0, 0.5);
  border-radius: 4px;
  padding: 4px 8px 4px 2px;
}

Updated

  • 1