├── .gitignore ├── LICENSE.md ├── README.md ├── lib ├── _combined-search.scss ├── _nightmode.scss └── stylesheet.scss ├── snoo.png ├── sprite.png └── stylesheet.css /.gitignore: -------------------------------------------------------------------------------- 1 | # sass 2 | .sass-cache 3 | *.css.map 4 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | This is free and unencumbered software released into the public domain. 2 | 3 | Anyone is free to copy, modify, publish, use, compile, sell, or 4 | distribute this software, either in source code form or as a compiled 5 | binary, for any purpose, commercial or non-commercial, and by any 6 | means. 7 | 8 | In jurisdictions that recognize copyright laws, the author or authors 9 | of this software dedicate any and all copyright interest in the 10 | software to the public domain. We make this dedication for the benefit 11 | of the public at large and to the detriment of our heirs and 12 | successors. We intend this dedication to be an overt act of 13 | relinquishment in perpetuity of all present and future rights to this 14 | software under copyright law. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 19 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR 20 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, 21 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | 24 | For more information, please refer to 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # How to add Click to your subreddit 2 | 3 | 1. [Open this CSS file](https://raw.githubusercontent.com/githue/click-reddit/master/stylesheet.css) and copy the contents into your subreddit stylesheet. 4 | * [Right click to download this image](https://raw.githubusercontent.com/githue/click-reddit/master/sprite.png) and upload it to your stylesheet. 5 | * [Download this Snoo logo](https://raw.githubusercontent.com/githue/click-reddit/master/snoo.png) or make your own, and upload it to your *subreddit settings*. 6 | * For RES nightmode, add this to your sidebar text: `[](#/RES_SR_Config/NightModeCompatible)` 7 | * See if there's any [customizations](https://www.reddit.com/r/click/wiki) you need to make via addons. 8 | 9 | ## Contributing 10 | 11 | To contribute changes to the main project you will need the CSS preprocessor SASS. 12 | 13 | Make your changes in /lib and then run this command from the root directory: 14 | 15 | `sass lib/stylesheet.scss stylesheet.css -t compact`. 16 | -------------------------------------------------------------------------------- /lib/_combined-search.scss: -------------------------------------------------------------------------------- 1 | #previoussearch label { 2 | display: inline-block; 3 | } 4 | 5 | .search-summary { 6 | display: none; 7 | } 8 | 9 | .combined-search-page { 10 | 11 | .searchpane { 12 | margin: 10px 0 20px 0; 13 | padding: 0; 14 | } 15 | 16 | #search { 17 | padding: 0; 18 | white-space: normal; 19 | 20 | input[type="text"] { 21 | max-width: none; 22 | margin-right: -35px; 23 | padding-right: 35px; 24 | border-color: #4f86b5; 25 | } 26 | 27 | .search-submit-button { 28 | margin: 0; 29 | width: 35px; 30 | height: 2.5em; 31 | padding: 0; 32 | border: none; 33 | border-radius: 0 3px 3px 0; 34 | } 35 | } 36 | 37 | .search-result-group { 38 | max-width: none; 39 | padding: 0; 40 | } 41 | 42 | .search-result-group .search-result-group-header { 43 | margin: 0; 44 | } 45 | 46 | .search-result { 47 | margin: 0; 48 | position: relative; 49 | transition: background-color 1s ease 1s; 50 | 51 | &:not(.search-result-subreddit) > div { 52 | padding: 10px 0; 53 | border-bottom: 1px solid hsl(0,0%,93%); 54 | } 55 | 56 | &:hover { 57 | background-color: rgb(250,250,250); 58 | } 59 | 60 | &.has-thumbnail .thumbnail { 61 | margin: 10px 10px 0 0; 62 | } 63 | 64 | &.has-thumbnail .thumbnail.self { 65 | visibility: hidden; 66 | display: block; 67 | } 68 | 69 | .search-result-header .search-title { 70 | font-size: 14px; 71 | } 72 | 73 | .search-result-meta { 74 | font-size: 11px; 75 | } 76 | 77 | .search-result-icon-score { 78 | display: none; 79 | } 80 | 81 | .search-subreddit-link { 82 | font-weight: bold; 83 | } 84 | } 85 | 86 | .search-result-subreddit { 87 | padding: 5px 0; 88 | 89 | .search-subscribe-button .add, 90 | .search-subscribe-button .remove { 91 | width: auto; 92 | } 93 | } 94 | 95 | .search-result-link { 96 | 97 | &:not(.has-thumbnail) { 98 | margin-left: 80px; 99 | display: block; 100 | } 101 | 102 | // create pseudo thumbnail 103 | &:not(.has-thumbnail):before { 104 | content: " "; 105 | display: block; 106 | margin: 0 10px 0 0; 107 | } 108 | 109 | .search-expando.collapsed { 110 | height: 0px; 111 | max-height: none; 112 | width: 24px; 113 | position: absolute; 114 | margin-left: -35px; 115 | top: 30px; 116 | overflow: visible; 117 | } 118 | 119 | .search-expando.collapsed:before { 120 | width: 24px; 121 | height: 24px; 122 | font: 16px/1 "times"; 123 | color: rgb(51, 102, 153); 124 | border: 1px solid rgb(51, 102, 153); 125 | border-radius: 5px; 126 | background: rgb(255,255,255); 127 | top: -24px; 128 | content: "Aa"; 129 | display: block; 130 | text-align: center; 131 | cursor: default; 132 | } 133 | 134 | .search-expando.collapsed:hover { 135 | width: 90%; 136 | height: auto; 137 | z-index: 1; 138 | } 139 | 140 | .search-result-body { 141 | padding: 10px; 142 | background-color: white; 143 | box-shadow: $shadow-8dp; 144 | } 145 | 146 | .search-expando.collapsed .search-result-body { 147 | visibility: hidden; 148 | opacity: 0; 149 | transition: opacity .1s; 150 | } 151 | 152 | .search-expando.collapsed:hover .search-result-body { 153 | visibility: visible; 154 | opacity: 1; 155 | } 156 | 157 | .search-result-body .md { 158 | overflow: auto; 159 | height: auto; 160 | max-height: 300px; 161 | max-width: none; 162 | background: inherit; 163 | padding: 10px; 164 | } 165 | } 166 | 167 | .search-expando-button { 168 | display: none; 169 | } 170 | // facets 171 | .searchfacets { 172 | 173 | .list { 174 | line-height: 0; 175 | } 176 | 177 | &:not(.res-search-pane) { 178 | position: fixed; 179 | top: 40%; 180 | left: 0px; 181 | margin: 0; 182 | padding: 0; 183 | border: 1px solid rgb(95, 153, 207); 184 | background-color: rgb(255,255,255); 185 | z-index: 2; 186 | overflow: hidden; 187 | width: 19px; 188 | height: 125px; 189 | min-width: 0; 190 | transition: width .2s, padding .2s; 191 | box-shadow: none; 192 | box-sizing: content-box; 193 | 194 | &:hover { 195 | width: 600px; 196 | height: auto; 197 | max-width: none; 198 | min-width: 0; 199 | padding: 10px 20px 10px 40px; 200 | box-shadow: $shadow-8dp; 201 | } 202 | 203 | &:before { 204 | content: "Filter by sub"; 205 | font: normal normal 12px/20px sans-serif; 206 | text-align: center; 207 | text-transform: uppercase; 208 | letter-spacing: 1px; 209 | color: rgb(50,100,150); 210 | display: block; 211 | width: 125px; 212 | height: 20px; 213 | background: linear-gradient(to bottom, rgb(255, 255, 255), rgb(220, 220, 220)); 214 | left: -53px; 215 | top: 52px; 216 | position: absolute; 217 | cursor: default; 218 | @include transform(rotate(270deg)); 219 | } 220 | 221 | h4.title, 222 | .list { 223 | width: 600px; 224 | } 225 | } 226 | } 227 | } 228 | 229 | .searchfacets:not(.res-search-pane) .title { 230 | margin: 0; 231 | } 232 | -------------------------------------------------------------------------------- /lib/_nightmode.scss: -------------------------------------------------------------------------------- 1 | $nm_dark1: #151515; 2 | $nm_dark2: #212121; 3 | $nm_dark3: #303030; 4 | $nm_dark4: #424242; 5 | $nm_primaryText: hsl(0,0%,87%); 6 | $nm_linkVisited: hsl(300,20%,60%); 7 | $nm_divider: hsla(0,0%,100%,.12); 8 | $nm_cardBackground: $nm_dark2; 9 | 10 | %nm_sheet { 11 | color: $nm_primaryText; 12 | border-color: $nm_divider; 13 | background-color: $nm_cardBackground; 14 | } 15 | 16 | body.res-nightmode { 17 | color: $nm_primaryText; 18 | background-color: $nm_dark1; 19 | 20 | #header { 21 | background-color: $nm_dark4; 22 | } 23 | 24 | #sr-header-area { 25 | background: none; 26 | 27 | &:hover { 28 | background-color: black; 29 | } 30 | } 31 | 32 | .pagename { 33 | opacity: .88; 34 | } 35 | 36 | .livePreview { 37 | background-color: hsl(0,0%,15%) !important; 38 | } 39 | 40 | .link { 41 | 42 | .rank { 43 | color: hsl(0,0%,50%); 44 | background-color: $nm_dark1; 45 | } 46 | 47 | div.madeVisible { 48 | color: $nm_primaryText; 49 | background-color: $nm_dark2; 50 | } 51 | } 52 | 53 | .thing .title { 54 | color: $nm_primaryText; 55 | } 56 | 57 | .thing .title:visited, 58 | .thing.visited .title, 59 | .combined-search-page .search-result a:visited, 60 | .combined-search-page .search-result a:visited > mark { 61 | color: hsl(0,0%,65%); /* see also styleTweaks.js */ 62 | } 63 | 64 | .tagline, 65 | .search-result-meta { 66 | color: hsl(0,0%,75%); 67 | } 68 | 69 | .tagline a, 70 | .search-result-meta a { 71 | color: inherit; 72 | } 73 | 74 | .entry .buttons li a:hover { 75 | color: hsl(0,0%,75%); 76 | } 77 | 78 | &.listing-page .link .entry { 79 | border-bottom-color: $nm_divider; 80 | } 81 | 82 | .entry.RES-keyNav-activeElement .tagline, 83 | .thing.morechildren .entry.RES-keyNav-activeElement { 84 | color: inherit !important; 85 | background-color: hsla(0,0%,100%,.12) !important; 86 | } 87 | 88 | .RES-keyNav-activeElement > .tagline, 89 | .RES-keyNav-activeElement .md-container > .md, 90 | .RES-keyNav-activeElement .md-container > .md p { 91 | color: inherit !important; 92 | } 93 | 94 | &> div.content, 95 | .side .linkinfo, 96 | .sidecontentbox, 97 | .login-form-side, 98 | .sidebox .spacer, 99 | .side form.usertext { 100 | @extend %nm_sheet; 101 | } 102 | 103 | .sidebox { 104 | background: none; 105 | } 106 | 107 | .md a:visited { 108 | color: $nm_linkVisited; 109 | } 110 | 111 | .side { 112 | color: $nm_primaryText; 113 | 114 | .titlebox, 115 | .content, 116 | .leavemoderator, 117 | .leavecontributor-button { 118 | background-color: transparent; 119 | } 120 | 121 | .titlebox { 122 | 123 | form.flairtoggle { 124 | background-color: transparent; 125 | } 126 | } 127 | 128 | .shortlink input { 129 | border-color: hsla(0,0%,100%,.1); 130 | } 131 | 132 | .md { 133 | 134 | &>blockquote { 135 | color: white; 136 | 137 | a, 138 | a:visited { 139 | color: inherit; 140 | } 141 | 142 | ul, ol { 143 | background-color: transparent; 144 | } 145 | 146 | li, 147 | p { 148 | color: white; 149 | } 150 | } 151 | 152 | ul { 153 | color: $nm_primaryText; 154 | background-color: $nm_cardBackground; 155 | } 156 | 157 | hr { 158 | background: hsla(0,0%,100%,.12); 159 | } 160 | 161 | h5 + ul { 162 | 163 | &>li { 164 | 165 | &:hover, 166 | &>ul > li:hover > a { 167 | background-color: hsla(0,0%,100%,.12); 168 | } 169 | 170 | &>sup, 171 | &>p sup { 172 | background-position: 0px -22px; 173 | } 174 | } 175 | } 176 | 177 | } 178 | 179 | #search { 180 | 181 | input[type=text] { 182 | border-bottom-color: $nm_divider; 183 | } 184 | 185 | input[type=submit] { 186 | background-position: 9px 9px; 187 | } 188 | 189 | #searchexpando { 190 | background-color: $nm_dark1; 191 | } 192 | } 193 | } 194 | 195 | .panestack-title, 196 | .nav-buttons { 197 | border-top-color: $nm_divider; 198 | } 199 | 200 | .flair, 201 | .linkflairlabel { 202 | background-color: transparent; 203 | } 204 | 205 | .linkflairlabel { 206 | color: hsl(200, 30%, 55%); 207 | } 208 | 209 | .RESDropdownList { 210 | color: $nm_primaryText; 211 | background-color: $nm_dark3; 212 | 213 | li, 214 | a, 215 | li:hover a, 216 | a:hover { 217 | background: none; 218 | } 219 | 220 | li:hover { 221 | background: hsla(0,0%,100%,.12); 222 | } 223 | } 224 | 225 | .sidebox:not(.create) .morelink a { 226 | color: white; 227 | background: hsla(0,0%,0%,.8); 228 | 229 | &:hover { 230 | background: hsla(0,0%,0%,1); 231 | } 232 | } 233 | 234 | .commentarea { 235 | 236 | .menuarea { 237 | 238 | &>div:hover, 239 | &>div a:hover { 240 | color: $nm_primaryText; 241 | } 242 | } 243 | } 244 | 245 | #REScommentNavToggle { 246 | 247 | &>.commentNavSortType { 248 | color: hsl(0,0%,50%); 249 | 250 | &:hover { 251 | color: $nm_primaryText; 252 | } 253 | } 254 | } 255 | 256 | &.combined-search-page { 257 | 258 | .search-result { 259 | 260 | header a, 261 | a > mark { 262 | color: $nm_primaryText; 263 | } 264 | } 265 | 266 | .search-result:hover { 267 | background-color: hsl(0, 0%, 16%); 268 | } 269 | 270 | .search-result:not(.search-result-subreddit) > div { 271 | border-bottom-color: $nm_divider; 272 | } 273 | 274 | .search-result-link { 275 | 276 | .search-expando.collapsed:before { 277 | color: hsl(0,0%,50%); 278 | border-color: hsl(0,0%,50%); 279 | } 280 | 281 | .search-result-body { 282 | background-color: $nm_dark3; 283 | } 284 | } 285 | } 286 | 287 | #progressIndicator { 288 | color: $nm_primaryText; 289 | border-color: $nm_divider; 290 | background-color: $nm_dark4; 291 | } 292 | 293 | .entry.RES-keyNav-activeElement, 294 | .entry.RES-keyNav-activeElement .md-container { 295 | background-color: transparent !important; 296 | } 297 | 298 | .entry.RES-keyNav-activeElement .tagline, 299 | .thing.morechildren .entry.RES-keyNav-activeElement { 300 | color: $nm_primaryText; 301 | } 302 | 303 | .side .subscribe-button a.remove, 304 | .subButtons .RESshortcut.remove, 305 | .subButtons .RESDashboardToggle.remove { 306 | color: $nm_primaryText; 307 | } 308 | 309 | .usertext button:not(.save), 310 | #url-field button { 311 | color: $nm_primaryText; 312 | 313 | &:hover { 314 | background-color: hsla(0,0%,100%,.12); 315 | } 316 | } 317 | 318 | .subButtons { 319 | 320 | .RESshortcut:not(.remove), 321 | .RESDashboardToggle:not(.remove) { 322 | color: $nm_primaryText; 323 | background-color: $nm_dark3; 324 | } 325 | } 326 | } 327 | -------------------------------------------------------------------------------- /lib/stylesheet.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Theme: /r/click 3 | * Author:/u/postpics 4 | * Instruction: add your customizations at the bottom. You may remove built-in 5 | * addons, but remember to remove them again when you upgrade. 6 | */ 7 | 8 | $shadow-2dp: 0 0px 3px rgba(0, 0, 0, 0.12), 0 2px 3px rgba(0, 0, 0, 0.24); 9 | $shadow-8dp: 0 0px 8px rgba(0, 0, 0, 0.12), 0 8px 8px 1px rgba(0, 0, 0, 0.18); 10 | 11 | $linkDefault: #0079d3; 12 | $linkVisited: #8114b8; 13 | $sticky: hsl(140, 70%, 35%); 14 | 15 | @mixin transform($args) { 16 | -webkit-transform: $args; 17 | -moz-transform: $args; 18 | -ms-transform: $args; 19 | transform: $args; 20 | } 21 | 22 | @mixin flexbox { 23 | display: -webkit-box; 24 | display: -webkit-flex; 25 | display: -moz-flex; 26 | display: -ms-flexbox; 27 | display: flex; 28 | } 29 | 30 | // Placeholders 31 | %flexbox { @include flexbox; } 32 | 33 | %sheet { 34 | background: white; 35 | border: 1px solid hsl(0,0%,88%); 36 | border-radius: 2px; 37 | } 38 | 39 | %button-base { 40 | display: inline-block; 41 | margin: 0; 42 | padding: 0 8px; 43 | border-radius: 2px; 44 | text-transform: uppercase; 45 | text-align: center; 46 | font: 1.3rem/32px tahoma, arial, sans-serif; 47 | border: none; 48 | background: none; 49 | transition: all .25s; 50 | 51 | &:hover { 52 | text-decoration: none; 53 | } 54 | } 55 | 56 | %button-flat { 57 | color: hsla(0,0%,100%,.8); 58 | 59 | &:hover { 60 | background: hsla(200,100%,0%,.12); 61 | } 62 | } 63 | 64 | %button-raised { 65 | color: white !important; 66 | background: hsl(200,20%,50%); 67 | transition: box-shadow .25s; 68 | 69 | &:hover { 70 | box-shadow: $shadow-2dp; 71 | } 72 | } 73 | 74 | html { 75 | font: normal 10px/1 verdana, arial, sans-serif; 76 | } 77 | 78 | body { 79 | background: hsl(0,0%,93%); 80 | 81 | &>div.content, 82 | &.modtools-page > div.content { 83 | margin: 20px 330px 0 10px; 84 | padding: 0px 10px 40px 10px; 85 | } 86 | 87 | &.res #header-bottom-right .separator { 88 | margin: 0; 89 | visibility: hidden; 90 | } 91 | 92 | // RES < 4.6 93 | &:not(.res-v4) #header-bottom-right #RESSettingsButton { 94 | margin: 0; 95 | vertical-align: middle; 96 | } 97 | 98 | &>.content .spacer { 99 | margin: 0; 100 | } 101 | 102 | &.mod-toolbox { 103 | overflow: visible; 104 | } 105 | 106 | &.res-commentBoxes { 107 | 108 | &>.content { 109 | padding-right: 10px !important; 110 | } 111 | 112 | .comment { 113 | overflow: visible; 114 | } 115 | } 116 | } 117 | 118 | #header { 119 | border-bottom: none; 120 | background-color: hsl(250,5%,30%); 121 | background-repeat: no-repeat; 122 | background-position: 50% 0%; 123 | box-shadow: $shadow-2dp; 124 | } 125 | 126 | #srLeftContainer, #RESShortcutsViewport, #RESShortcutsEditContainer { 127 | max-height: none; 128 | } 129 | 130 | #RESShortcutsEditContainer { 131 | opacity: 0; 132 | transition: all .1s .1s; 133 | z-index: 1; 134 | } 135 | 136 | #RESShortcutsEditContainer, #RESShortcutsSort, #RESShortcutsRight, #RESShortcutsLeft, #RESShortcutsAdd, #RESShortcutsTrash { 137 | color: hsla(0,0%,100%,.8) !important; 138 | background: none !important; 139 | } 140 | 141 | #sr-more-link { 142 | background: none; 143 | } 144 | 145 | #sr-header-area { 146 | font-family: arial, sans-serif; 147 | color: hsla(0,0%,100%,.3); 148 | border-bottom: none; 149 | background: none; 150 | box-sizing: border-box; 151 | line-height: 22px; 152 | height: 22px; 153 | transition-property: background, height, margin, z-index; 154 | transition-duration: .2s; 155 | transition-delay: .2s; 156 | position: relative; 157 | z-index: 2; 158 | 159 | &:hover { 160 | background: hsla(0,0%,0%,.8); 161 | height: 30px; 162 | margin-bottom: -8px; 163 | z-index: 4; 164 | 165 | #sr-more-link { 166 | background: hsl(0,0%,10%); 167 | } 168 | 169 | a, 170 | #RESShortcutsEditContainer { 171 | opacity: 1; 172 | color: hsla(0,0%,100%,.8); 173 | } 174 | } 175 | } 176 | 177 | body.res #sr-header-area a.RESShortcutsCurrentSub, 178 | #sr-header-area .selected a { 179 | color: white !important; 180 | font-weight: normal; 181 | } 182 | 183 | .sr-bar .separator { 184 | color: hsla(0,0%,100%,.3); 185 | } 186 | 187 | .dropdown.srdrop { 188 | 189 | .selected { 190 | color: hsla(0,0%,100%,.6); 191 | background: none; 192 | padding-right: 5px; 193 | 194 | &:after { 195 | content: ""; 196 | display: inline-block; 197 | height: 0px; 198 | width: 1px; 199 | border: 5px solid transparent; 200 | border-top-color: hsla(0,0%,100%,.6); 201 | position: relative; 202 | left: 5px; 203 | top: 3px; 204 | } 205 | } 206 | } 207 | 208 | #sr-header-area { 209 | 210 | a, .separator { 211 | color: hsla(0,0%,100%,.6); 212 | } 213 | 214 | .drop-choices.srdrop { 215 | border: none; 216 | box-shadow: $shadow-8dp; 217 | 218 | a { 219 | color: black; 220 | } 221 | } 222 | } 223 | 224 | #header-bottom-left { 225 | padding: 0px 0 0 0; 226 | position: relative; 227 | } 228 | 229 | #header { 230 | 231 | .tabmenu { 232 | position: absolute; 233 | bottom: 0; 234 | width: 100%; 235 | box-sizing: border-box; 236 | display: block !important; 237 | font-size: 1.2rem; 238 | font-family: arial, sans-serif; 239 | text-transform: uppercase; 240 | margin: 0; 241 | padding: 40px 0 0px 10px; 242 | z-index: 1; 243 | 244 | li { 245 | display: inline-block; 246 | margin: 0; 247 | padding: 0; 248 | position: relative; 249 | } 250 | 251 | a { 252 | display: block; 253 | font-weight: bold; 254 | color: hsla(0,0%,100%,.8); 255 | border: none; 256 | border-bottom: 2px solid transparent; 257 | background: none; 258 | line-height: 30px; 259 | padding: 0 10px; 260 | text-shadow: 1px 1px 1px hsla(0,0%,0%,.4); 261 | position: relative; 262 | z-index: 1; 263 | 264 | &:hover { 265 | color: hsla(0,0%,100%,1); 266 | } 267 | } 268 | 269 | .selected a, 270 | a:active { 271 | color: white; 272 | border-bottom-color: white; 273 | } 274 | } 275 | } 276 | 277 | #header-img-a { 278 | display: inline-block; 279 | margin: 0 0 52px 20px; 280 | position: relative; 281 | z-index: 2; 282 | } 283 | 284 | #header-img { 285 | margin: 0; 286 | display: block; 287 | 288 | &.default-header { 289 | position: relative; 290 | margin: 0 0 52px 20px; 291 | width: 32px; 292 | z-index: 2; 293 | } 294 | } 295 | 296 | .pagename { 297 | display: inline-block; 298 | margin: 0px 10px 52px 10px; 299 | color: hsla(0,0%,100%,1); 300 | font: normal 24px/1 tahoma, arial, sans-serif; 301 | position: relative; 302 | z-index: 2; 303 | 304 | a { 305 | letter-spacing: 1px; 306 | font-size: 36px; 307 | color: hsla(0,0%,100%,1); 308 | position: relative; 309 | text-shadow: $shadow-2dp; 310 | transition: text-shadow .3s; 311 | 312 | &:hover { 313 | text-decoration: none; 314 | } 315 | } 316 | } 317 | 318 | #header-bottom-right { 319 | color: hsla(0,0%,100%,.8); 320 | padding: 0 10px 0 10px !important; 321 | line-height: 22px; 322 | background: hsla(0,0%,20%,.9); 323 | z-index: 3; 324 | top: 0 !important; 325 | bottom: auto !important; 326 | border-radius: 3px 0 0 3px; 327 | 328 | &:hover { 329 | background: hsl(0,0%,20%); 330 | } 331 | 332 | a { 333 | color: hsla(0,0%,100%,.8); 334 | 335 | &:hover { 336 | text-decoration: underline; 337 | } 338 | } 339 | 340 | .user { 341 | color: hsla(0,0%,100%,.6); 342 | } 343 | 344 | // RES > 4.5 345 | .gearIcon::after { 346 | color: hsl(0,0%,90%); 347 | text-shadow: none; 348 | } 349 | 350 | .userkarma, 351 | .userkarma a { 352 | font-weight: normal; 353 | color: hsl(0,0%,60%); 354 | } 355 | 356 | .message-count { 357 | color: black; 358 | display: inline; 359 | } 360 | } 361 | 362 | #userbarToggle { 363 | min-height: 0 !important; 364 | border: none !important; 365 | padding: 0 5px !important; 366 | background: none !important; 367 | text-align: left !important; 368 | left: 0 !important; 369 | bottom: auto !important; 370 | width: auto !important; 371 | height: 22px !important; 372 | } 373 | 374 | .pref-lang { 375 | font-weight: normal; 376 | } 377 | 378 | body.res .RESDropdownList { 379 | width: 200px; 380 | border-radius: 0; 381 | border: none; 382 | color: black; 383 | background-color: hsl(0, 0%, 100%); 384 | box-shadow: $shadow-8dp; 385 | 386 | li { 387 | font-weight: normal; 388 | font-size: 1.2rem; 389 | line-height: 1.5; 390 | height: auto; 391 | padding: 6px 10px; 392 | width: auto; 393 | border: none; 394 | } 395 | 396 | li, 397 | li:hover, 398 | a, 399 | a:visited { 400 | color: inherit; 401 | } 402 | 403 | li:hover, 404 | li a:hover { 405 | color: inherit; 406 | background-color: hsla(0, 0%, 0%, .12); 407 | } 408 | 409 | .RESMenuItemButton { 410 | position: static; 411 | margin-left: -100%; 412 | float: right; 413 | 414 | &:hover { 415 | color: inherit; 416 | background-color: hsla(0, 0%, 0%, .12); 417 | } 418 | } 419 | } 420 | 421 | .subreddit-rule-form .c-form-group { 422 | 423 | .label, 424 | .text-counter { 425 | color: inherit; 426 | } 427 | } 428 | 429 | // RES < 4.6 430 | body.res-v430:not(.res-v4) #RESSearchMenuItem { 431 | margin: 0px; 432 | border: none; 433 | width: 13px; 434 | height: 16px; 435 | background: url(%%sprite%%) no-repeat -21px 3px; 436 | } 437 | 438 | body.res-v430:not(.res-v4) .RESDropdownList .toggleButton { 439 | margin: 0; 440 | line-height: 1; 441 | } 442 | 443 | .side { 444 | width: 310px; 445 | margin: 20px 10px 0 0; 446 | padding: 0; 447 | background: transparent !important; 448 | 449 | // the spacer divs can be a nuisance, so make them do nothing 450 | &>.spacer { 451 | display: inline; 452 | } 453 | 454 | .linkinfo { 455 | padding: 10px; 456 | line-height: 1.5; 457 | font-family: verdana, sans-serif; 458 | 459 | .shortlink, 460 | .shortlink input, 461 | .score .number, 462 | .score .word { 463 | font-size: inherit; 464 | } 465 | } 466 | 467 | .shortlink input { 468 | color: blue; 469 | border-color: hsl(0,0%,90%); 470 | } 471 | 472 | #search { 473 | position: relative; 474 | margin: 0 0 25px; 475 | 476 | input[type=text] { 477 | width: 310px; 478 | margin-bottom: 1px; 479 | padding: 8px 8px 8px 0px; 480 | border-width: 0 0 1px; 481 | border-color: hsl(0,0%,80%); 482 | background: transparent; 483 | transition: all .2s; 484 | 485 | &:hover, 486 | &:focus { 487 | box-shadow: 0 1px 0px 0 #F44336; 488 | border-color: #F44336; 489 | outline: none; 490 | } 491 | } 492 | 493 | input[type=submit] { 494 | width: 30px; 495 | height: 30px; 496 | margin-left: -30px; 497 | opacity: .5; 498 | background: url(%%sprite%%) no-repeat -13px 9px; 499 | 500 | &:hover { 501 | background: url(%%sprite%%) no-repeat -13px 9px; 502 | } 503 | } 504 | 505 | #searchexpando { 506 | margin: 0px 0 0 0; 507 | padding: 20px 10px 0 10px; 508 | border: transparent; 509 | border-top: none; 510 | border-radius: 0; 511 | background: hsl(30,10%,92%); 512 | box-shadow: $shadow-8dp; 513 | position: absolute; 514 | width: 310px; 515 | box-sizing: border-box; 516 | } 517 | 518 | #search_showmore:after { 519 | display: inline-block; 520 | margin: 1rem 0; 521 | } 522 | 523 | // Improve search expando UI. 524 | #moresearchinfo { 525 | padding: 20px 0 20px 0; 526 | border-width: 0; 527 | position: relative; 528 | 529 | &+p { 530 | margin: 10px 0 0 0; 531 | 532 | a { 533 | line-height: 0; 534 | font-size: 0; 535 | 536 | &:after { 537 | text-indent: 0; 538 | height: auto; 539 | line-height: 1; 540 | content: "More options..."; 541 | font-size: 12px; 542 | } 543 | } 544 | } 545 | 546 | p:first-of-type { 547 | font-weight: bold; 548 | line-height: 1; 549 | } 550 | 551 | #search_hidemore { 552 | display: block; 553 | color: transparent; 554 | float: none; 555 | text-align: center; 556 | margin: 0 -10px 0px -10px; 557 | padding: 0; 558 | position: absolute; 559 | top: auto; right: 0; bottom: 0; left: 0; 560 | font-size: 0; 561 | line-height: 0; 562 | border-bottom: 5px solid #F44336; 563 | 564 | &:after { 565 | content: ""; 566 | display: inline-block; 567 | border: 8px solid transparent; 568 | border-bottom-color: #F44336; 569 | } 570 | } 571 | } 572 | 573 | dt { 574 | font-weight: normal; 575 | margin-left: 0; 576 | } 577 | dd { 578 | margin: 0 0 5px; 579 | color: rgb(150,150,150); 580 | } 581 | } 582 | 583 | .morelink .nub, 584 | .morelink:hover .nub{ 585 | display: none; 586 | } 587 | } 588 | 589 | // Create our own spacing between sideboxes 590 | #login_login-main, 591 | #moderation_tools, 592 | #ad_main, 593 | .sidebox.create, 594 | .sidecontentbox, 595 | .account-activity-box, 596 | .linkinfo, 597 | .titlebox { 598 | margin: 10px 0 10px 0; 599 | clear: both; 600 | } 601 | 602 | // Override subreddit style checkbox 603 | body:not(.res-console-open) #RESNotifications, 604 | body:not(.res-console-open) #RESShortcutsAddFormContainer, 605 | body:not(.res-console-open) .RESDropdownList, 606 | body:not(.res-console-open):not(.modal-open) .side #search { 607 | z-index: 2147483647 !important; 608 | } 609 | 610 | // Submit buttons 611 | .sidebox { 612 | 613 | &.submit { 614 | display: inline-block; 615 | box-sizing: border-box; 616 | position: absolute; 617 | top: 77px; 618 | z-index: 100; 619 | width: 136px; 620 | 621 | .mod-override .morelink { 622 | 623 | a:after { 624 | margin: 0; 625 | left: 0; 626 | top: -8px; 627 | } 628 | 629 | &:hover a:after { 630 | opacity: 1; 631 | } 632 | } 633 | } 634 | 635 | &.submit-text { 636 | right: 10px; 637 | width: 166px; 638 | } 639 | 640 | &:not(.create) .morelink { 641 | font: normal 1.2rem/1 tahoma, arial, sans-serif; 642 | text-transform: uppercase; 643 | font-size: 1.2rem; 644 | border: none; 645 | background: none; 646 | height: auto; 647 | letter-spacing: 0; 648 | text-shadow: 1px 1px 0px hsla(0,0%,100%,.2); 649 | 650 | a { 651 | display: block; 652 | height: auto; 653 | line-height: 32px; 654 | white-space: nowrap; 655 | padding: 0px 1px; 656 | width: auto; 657 | background: hsla(0,0%,100%,.9); 658 | color: hsla(0,0%,0%,1); 659 | border-radius: 2px; 660 | box-shadow: $shadow-2dp; 661 | transition: all .3s; 662 | 663 | &:active { 664 | background: hsl(0,0%,50%); 665 | } 666 | } 667 | 668 | &:hover { 669 | background: none; 670 | 671 | a { 672 | background: hsla(0,0%,100%,1); 673 | box-shadow: $shadow-8dp; 674 | } 675 | } 676 | } 677 | 678 | &.submit.disabled { 679 | width: 310px; 680 | 681 | .morelink { 682 | display: inline-block; 683 | width: 149px; 684 | margin-right: 1px; 685 | text-transform: none; 686 | 687 | a { 688 | padding-left: 5px; 689 | padding-right: 5px; 690 | color: hsl(0,0%,40%); 691 | background: hsl(0,0%,80%); 692 | } 693 | } 694 | 695 | .spacer { 696 | display: inline-block; 697 | width: 150px; 698 | vertical-align: top; 699 | font-family: arial, sans-serif; 700 | background: none; 701 | box-shadow: none; 702 | border: none; 703 | 704 | .subtitle { 705 | color: white; 706 | font-weight: bold; 707 | font-size: 1rem; 708 | } 709 | } 710 | } 711 | } 712 | h1.redditname { 713 | display: none; 714 | } 715 | h1.redditname + div { 716 | text-align: right; 717 | } 718 | // Adjust positioning when submit buttons are gone 719 | 720 | .side form.usertext { 721 | margin: 10px 0px 0 0; 722 | padding: 0px 10px 0px 10px; 723 | 724 | .md { 725 | line-height: 1.5; 726 | } 727 | } 728 | 729 | // Buttons 730 | .side .md a[title="click"], 731 | .usertext button, 732 | #url-field button, 733 | .usertext-buttons button.save { 734 | @extend %button-base; 735 | } 736 | 737 | .content .RESBigEditorPop, 738 | .usertext button.cancel, 739 | #url-field button { 740 | margin: 0 0 0 8px; 741 | } 742 | 743 | // Flat buttons 744 | .side .md > blockquote a[title="click"], 745 | .side .md > blockquote a[title="click"]:visited, 746 | .usertext button, 747 | #url-field button { 748 | @extend %button-flat; 749 | } 750 | 751 | .usertext button, 752 | #url-field button { 753 | color: hsl(200,70%,0%); 754 | } 755 | 756 | // Raised buttons 757 | .side .md > p a[title="click"], 758 | .usertext-buttons button.save { 759 | @extend %button-raised; 760 | } 761 | 762 | .side .subscribe-button a:hover, 763 | .side .subButtons .RESshortcut:hover, 764 | .side .subButtons .RESDashboardToggle:hover { 765 | box-shadow: $shadow-2dp; 766 | } 767 | 768 | // The ordering of this section is important. 769 | // subscribe button and its neighbors 770 | .subscribe-button { 771 | margin: 5px 5px 5px 0; 772 | } 773 | 774 | .side .subscribe-button a.active, 775 | .subButtons .RESshortcut, 776 | .subButtons .RESDashboardToggle { 777 | @extend %button-base; 778 | display: block; 779 | white-space: nowrap; 780 | } 781 | 782 | .side .subscribe-button a.add.active { 783 | color: white; 784 | background: #F44336; 785 | } 786 | 787 | .subButtons { 788 | 789 | .subscribe-button a.active { 790 | padding: 0; 791 | } 792 | 793 | .RESshortcut, 794 | .RESDashboardToggle { 795 | padding: 0; 796 | color: hsl(0,0%,20%); 797 | background: white; 798 | border-radius: 2px; 799 | } 800 | } 801 | 802 | // selected 803 | .side .subscribe-button a.remove, 804 | .subButtons .RESshortcut.remove, 805 | .subButtons .RESDashboardToggle.remove { 806 | color: hsl(0,0%,20%); 807 | border-color: transparent; 808 | background: inherit; 809 | } 810 | 811 | .side .subscribe-button a.remove:hover, 812 | .subButtons .RESshortcut.remove:hover, 813 | .subButtons .RESDashboardToggle.remove:hover { 814 | box-shadow: none; 815 | } 816 | 817 | .titlebox { 818 | margin-left: 0; 819 | margin-right: 0; 820 | background: transparent; 821 | color: hsla(0,0%,50%,1); 822 | 823 | .subscribers, 824 | .users-online { 825 | display: inline-block; 826 | font-size: 1.1rem; 827 | font-family: arial, sans-serif; 828 | vertical-align: baseline; 829 | margin-top: 0; 830 | margin-bottom: 0; 831 | } 832 | 833 | .subscribers { 834 | margin-right: 1rem; 835 | } 836 | 837 | .users-online { 838 | 839 | &:before { 840 | content: none; 841 | } 842 | 843 | .number:after { 844 | content: " here now"; 845 | } 846 | .word { 847 | display: none; 848 | } 849 | } 850 | 851 | .bottom { 852 | color: hsl(0,0%,60%); 853 | border: none; 854 | padding: 10px 0 0 0; 855 | 856 | a { 857 | color: inherit; 858 | } 859 | } 860 | } 861 | 862 | .subButtons { 863 | @extend %flexbox; 864 | border-width: 10px 0 10px 0; 865 | border-style: solid; 866 | border-color: transparent; 867 | 868 | span { 869 | width: 100%; 870 | margin: 0; 871 | box-sizing: border-box; 872 | 873 | &:first-child { 874 | margin-right: 8px; 875 | } 876 | 877 | &:last-child { 878 | margin-left: 8px; 879 | } 880 | } 881 | 882 | &+.subscribers, 883 | &+.subscribers + .users-online { 884 | font-size: 1.2rem; 885 | } 886 | } 887 | 888 | .titlebox form.toggle, 889 | .leavemoderator { 890 | font-size: 1.1rem; 891 | color: hsl(0,0%,40%); 892 | background: none; 893 | padding: 10px 0 0 0; 894 | clear: left; 895 | } 896 | .link .usertext-body .md { 897 | border: none; 898 | background: none; 899 | border-radius: 0; 900 | padding: 0 0 10px; 901 | } 902 | .usertext-body > .md { 903 | padding-right: 0; 904 | } 905 | 906 | ul.tabmenu.formtab { 907 | margin: 0 0 5px; 908 | padding: 0; 909 | font-size: 1.3rem; 910 | text-transform: uppercase; 911 | text-align: center; 912 | 913 | li { 914 | display: inline-block; 915 | 916 | &.selected a { 917 | font-size: inherit; 918 | background: none; 919 | color: inherit; 920 | border-bottom: 2px solid; 921 | } 922 | } 923 | 924 | a { 925 | display: block; 926 | padding: 5px 15px; 927 | border: none; 928 | color: hsl(0,0%,50%); 929 | background: none; 930 | 931 | &:hover { 932 | color: inherit; 933 | } 934 | } 935 | } 936 | 937 | .formtabs-content { 938 | border-top: none; 939 | 940 | .roundfield { 941 | border-radius: 0; 942 | } 943 | } 944 | 945 | form .spacer+.spacer { 946 | margin: 0px 0; 947 | } 948 | 949 | // Misc 950 | .organic-listing.loading { 951 | display: none; // improves perceived load time 952 | } 953 | 954 | // HR 955 | .md hr { 956 | height: 1px; 957 | margin: 10px 0px; 958 | background: hsl(0, 0%, 88%); 959 | } 960 | 961 | .side .md { 962 | 963 | hr { 964 | margin: 10px -10px; 965 | } 966 | 967 | &>blockquote hr { 968 | width: auto; 969 | background: hsla(0,0%,100%,.12); 970 | } 971 | } 972 | .link { 973 | margin: 0 -10px; 974 | padding: 10px 10px 0 10px; 975 | 976 | .flat-list { 977 | padding: 0; 978 | margin-bottom: 8px; 979 | } 980 | 981 | .entry { 982 | overflow: visible; 983 | margin-left: 64px; 984 | } 985 | 986 | .title { 987 | font: 1.8rem/1.1 arial, sans-serif; 988 | text-rendering: optimizeLegibility; 989 | margin: 0; 990 | 991 | &+.expando-button { 992 | margin: 7px 5px 0 0; 993 | } 994 | } 995 | 996 | .midcol { 997 | font-weight: normal; 998 | margin-top: 1px; 999 | } 1000 | 1001 | .tagline { 1002 | margin: 2px 0; 1003 | 1004 | &:first-letter { 1005 | text-transform: capitalize; 1006 | } 1007 | } 1008 | 1009 | .rank { 1010 | position: absolute; 1011 | font-size: 1.2rem; 1012 | left: 0; 1013 | line-height: 2em; 1014 | padding: 0px 5px; 1015 | background: hsl(0,0%,90%); 1016 | color: hsl(0,0%,60%); 1017 | border-radius: 50%; 1018 | text-align: center; 1019 | opacity: 0; 1020 | transition: opacity .1s; 1021 | } 1022 | 1023 | .expando { 1024 | position: relative; // place over sidebar 1025 | } 1026 | 1027 | &:hover .rank { 1028 | opacity: 1; 1029 | } 1030 | } 1031 | body.listing-page .link .entry { 1032 | border-bottom: 1px solid hsl(0,0%,88%); 1033 | } 1034 | // Handle links that have thumbnails 1035 | .link .thumbnail + .entry { 1036 | margin-left: 165px; 1037 | } 1038 | body.comments-page .link:not(.self) .thumbnail:not(.default) + .entry { 1039 | margin-left: 210px; 1040 | } 1041 | .link div.madeVisible { 1042 | overflow: visible; 1043 | position: relative; 1044 | background: white; 1045 | margin-bottom: 10px; 1046 | } 1047 | .link .thumbnail + .entry div.madeVisible { 1048 | margin-left: -101px; 1049 | } 1050 | body.comments-page .link .thumbnail + .entry div.madeVisible { 1051 | margin-left: -156px; 1052 | } 1053 | 1054 | div.madeVisible a.madeVisible { 1055 | overflow: visible; 1056 | 1057 | video, 1058 | img { 1059 | display: block; 1060 | box-shadow: $shadow-8dp; 1061 | } 1062 | } 1063 | 1064 | .error { 1065 | color: hsl(0,70%,50%); 1066 | } 1067 | 1068 | #noresults { 1069 | font-size: 0; 1070 | text-align: center; 1071 | margin-right: 0; 1072 | color: transparent; 1073 | 1074 | &:after { 1075 | font-size: 2rem; 1076 | content: "Why not add something?"; 1077 | color: hsl(0,0%,50%); 1078 | display: block; 1079 | margin: 2rem 0; 1080 | } 1081 | } 1082 | 1083 | .thing.stickied.link a.title { 1084 | font-weight: normal; 1085 | color: $sticky; 1086 | } 1087 | 1088 | body > .content .link .midcol, .midcol-spacer { 1089 | width: 50px !important; 1090 | } 1091 | .tagline { 1092 | line-height: 1.4; 1093 | transition: background .1s; 1094 | } 1095 | 1096 | .tagline .stickied-tagline, 1097 | .search-result-meta .stickied-tagline, 1098 | .tagline .moderator, 1099 | .green, 1100 | .search-result-meta .moderator, 1101 | .res-nightmode .tagline .moderator, 1102 | .res-nightmode .tagline .moderator:visited { 1103 | color: $sticky; 1104 | } 1105 | 1106 | .comment .tagline { 1107 | display: block; // RES fix 1108 | } 1109 | .tagline, .search-result-meta { 1110 | color: hsl(0,0%,20%); 1111 | font-size: 1.1rem; 1112 | } 1113 | .tagline a, .search-result-meta a { 1114 | color: inherit; 1115 | } 1116 | .entry { 1117 | 1118 | .buttons { 1119 | 1120 | li, 1121 | li+li { 1122 | padding: 0; 1123 | } 1124 | 1125 | li { 1126 | 1127 | a { 1128 | font-weight: normal; 1129 | font-size: 1.1rem; 1130 | color: hsl(200,15%,55%); 1131 | text-transform: capitalize; 1132 | padding: 2px 6px; 1133 | border-radius: 3px; 1134 | 1135 | &:hover { 1136 | color: black; 1137 | text-decoration: none; 1138 | } 1139 | } 1140 | 1141 | &:first-of-type a { 1142 | padding-left: 0; 1143 | } 1144 | } 1145 | } 1146 | } 1147 | // Remove margins meant for sidebar 1148 | .panestack-title { 1149 | margin: 10px -10px; 1150 | padding: 15px 20px 10px 20px; 1151 | border-top: 1px solid hsl(0, 0%, 88%); 1152 | border-bottom: none; 1153 | text-transform: capitalize; 1154 | } 1155 | .wiki-page { 1156 | 1157 | .wikititle, 1158 | .pageactions { 1159 | display: inline-block; 1160 | margin: 0 10px 15px 0; 1161 | } 1162 | 1163 | .wiki-page-content { 1164 | margin: 0; 1165 | } 1166 | } 1167 | 1168 | .wiki-page-content .md pre { 1169 | border-color: hsl(0,0%,80%); 1170 | } 1171 | 1172 | .commentarea .menuarea, 1173 | .sheets { 1174 | margin-right: 0; 1175 | } 1176 | .gold-accent.comment-visits-box { 1177 | max-width: none !important; 1178 | display: block; 1179 | } 1180 | .rounded { 1181 | border-radius: 3px; 1182 | } 1183 | 1184 | // Headings 1185 | .md h1, 1186 | .md h2, 1187 | .md h3, 1188 | .md h4, 1189 | .md h5, 1190 | .md h6, 1191 | .side .md h1, 1192 | .side .md h2, 1193 | .side .md h3, 1194 | .side .md h4, 1195 | .side .md h5, 1196 | .side .md h6, 1197 | .wiki-page-content .md h1, 1198 | .wiki-page-content .md h2, 1199 | .wiki-page-content .md h3, 1200 | .wiki-page-content .md h4, 1201 | .wiki-page-content .md h5, 1202 | .wiki-page-content .md h6, 1203 | h2#wiki_heading_2 { 1204 | color: inherit; 1205 | font-weight: normal; 1206 | font-family: tahoma, arial, sans-serif; 1207 | line-height: 1; 1208 | margin: 1em 0 .5em; 1209 | } 1210 | .md h1, 1211 | .md h2, 1212 | .md h3, 1213 | .md h4, 1214 | .md h5, 1215 | .md h6 { 1216 | 1217 | a:visited { 1218 | color: inherit; 1219 | } 1220 | } 1221 | .md h1 { 1222 | font-size: 2rem; 1223 | } 1224 | .side .md h1, .wiki-page-content .md h1 { 1225 | font-size: 2.25rem; 1226 | margin: .5em 0 .5em; 1227 | } 1228 | .side .md h2, .wiki-page-content .md h2 { 1229 | font-size: 2rem; 1230 | } 1231 | .side .md h3, .wiki-page-content .md h3 { 1232 | font-size: 1.75rem; 1233 | font-weight: normal; 1234 | } 1235 | .side .md h4, .wiki-page-content .md h4 { 1236 | font-size: 1.6rem; 1237 | font-style: normal; 1238 | } 1239 | .side .md h5, .wiki-page-content .md h5 { 1240 | font-size: 1.4rem; 1241 | text-decoration: none; 1242 | } 1243 | .side .md h6, .wiki-page-content .md h6 { 1244 | font-size: 1.3rem; 1245 | text-decoration: none; 1246 | text-transform: none; 1247 | } 1248 | 1249 | .side .md { 1250 | 1251 | ul { 1252 | padding-left: 16px; 1253 | } 1254 | 1255 | ul, 1256 | ol { 1257 | margin-top: 10px; 1258 | margin-bottom: 10px; 1259 | } 1260 | 1261 | ul li, 1262 | ol li { 1263 | line-height: 1.6; 1264 | } 1265 | 1266 | p { 1267 | line-height: inherit; 1268 | } 1269 | } 1270 | 1271 | /* addon blockquote-cards */ 1272 | .side .md > blockquote { 1273 | margin: 15px 10px 20px 10px; 1274 | padding: 10px; 1275 | color: hsl(0,0%,100%); 1276 | border: none; 1277 | background: hsl(200,20%,50%); 1278 | border-radius: 3px; 1279 | 1280 | blockquote { 1281 | color: hsl(0,0%,100%); 1282 | } 1283 | 1284 | h2 { 1285 | margin-right:-10px; 1286 | margin-left:-10px; 1287 | margin-top: .5em; 1288 | padding: 3px 10px; 1289 | color: inherit; 1290 | text-decoration: none; 1291 | } 1292 | 1293 | a, a:visited { 1294 | color: white; 1295 | border-bottom: 1px solid hsla(0,0%,100%,.4); 1296 | 1297 | &:hover { 1298 | border-bottom-color: hsla(0,0%,100%,.8); 1299 | text-decoration: none; 1300 | } 1301 | } 1302 | } 1303 | /* .end */ 1304 | 1305 | .link .usertext .usertext-edit > .md { 1306 | padding-left: 0; 1307 | } 1308 | body:not(.submit-page) .usertext .bottom-area { 1309 | overflow: visible; 1310 | width: auto; 1311 | } 1312 | .usertext .help-toggle, 1313 | .usertext a.reddiquette { 1314 | line-height: 32px; 1315 | margin: 0 5px; 1316 | } 1317 | .usertext .help-toggle a, 1318 | .usertext a.reddiquette { 1319 | color: hsl(0,0%,60%); 1320 | } 1321 | body:not(.submit-page) .usertext-buttons { 1322 | padding-bottom: 7px; 1323 | } 1324 | .usertext-buttons .status { 1325 | font-size: 1rem; 1326 | } 1327 | 1328 | /* addon side-menu */ 1329 | .side .md > h5 + ul { 1330 | margin: 10px -10px 20px -10px; 1331 | padding: 0; 1332 | list-style: none; 1333 | font-size: 1.4rem; 1334 | cursor: default; 1335 | 1336 | &>li { 1337 | padding: 6px 10px 6px 30px; 1338 | position: relative; 1339 | transition: background .1s; 1340 | 1341 | &:hover > ul { 1342 | visibility: visible; 1343 | opacity: 1; 1344 | right: 300px; 1345 | } 1346 | 1347 | &>sup, 1348 | &>p sup { 1349 | position: absolute; 1350 | top: 11px; 1351 | left: 10px; 1352 | display: block; 1353 | overflow: hidden; 1354 | text-indent: -1000px; 1355 | width: 10px; 1356 | height: 12px; 1357 | opacity: .4; 1358 | background-position: -20px -22px; 1359 | background-image: url(%%sprite%%); 1360 | pointer-events: none; 1361 | } 1362 | 1363 | &:hover > sup, 1364 | &:hover > p sup { 1365 | left: 8px; 1366 | } 1367 | 1368 | &>p, 1369 | &>ul > li > p { 1370 | margin: 0; 1371 | } 1372 | 1373 | &>a, 1374 | &>p > a { 1375 | color: $linkDefault; 1376 | display: block; 1377 | margin: -6px -10px -6px -30px; 1378 | padding: 6px 10px 6px 30px; 1379 | white-space: nowrap; 1380 | overflow-x: hidden; 1381 | text-overflow: ellipsis; 1382 | text-decoration: none; 1383 | } 1384 | 1385 | &:hover, 1386 | &>ul > li:hover > a { 1387 | background: hsla(0,0%,0%,.12); 1388 | } 1389 | 1390 | &:hover > p > a, 1391 | &>ul > li > a:hover, 1392 | &>ul > li > p a:hover { 1393 | color: $linkDefault; 1394 | text-decoration: none; 1395 | } 1396 | 1397 | &>ul { 1398 | visibility: hidden; 1399 | opacity: 0; 1400 | position: absolute; 1401 | top: 0px; 1402 | right: 295px; 1403 | width: 300px; 1404 | max-height: 700px; 1405 | overflow-y: auto; 1406 | list-style: none; 1407 | margin: 0; 1408 | padding: 8px 0; 1409 | z-index: 101; 1410 | border-radius: 2px; 1411 | background: white; 1412 | box-shadow: $shadow-8dp; 1413 | transition-property: visibility opacity; 1414 | transition-duration: .2s; 1415 | transition-delay: .12s; 1416 | 1417 | &>li { 1418 | padding: 6px 10px; 1419 | 1420 | &>a, 1421 | &>p a { 1422 | color: $linkDefault; 1423 | display: block; 1424 | margin: -6px -10px; 1425 | padding: 6px 10px; 1426 | } 1427 | } 1428 | } 1429 | } 1430 | } 1431 | /* .end */ 1432 | 1433 | body.submit-page { 1434 | 1435 | &>.content { 1436 | border: none; 1437 | background: none; 1438 | padding: 0; 1439 | } 1440 | 1441 | .formtabs-content { 1442 | width: auto; 1443 | 1444 | .roundfield { 1445 | max-width: 520px; 1446 | width: auto; 1447 | box-sizing: border-box; 1448 | background-color: white; 1449 | } 1450 | 1451 | .submit_text > h1 { 1452 | display: none; 1453 | } 1454 | } 1455 | 1456 | &:not(.res-nightmode) .formtabs-content .submit_text { 1457 | padding: 20px 10px; 1458 | } 1459 | 1460 | form .spacer:first-of-type, 1461 | form .spacer:last-of-type { 1462 | margin: 0 auto 15px auto; 1463 | width: 520px; 1464 | } 1465 | } 1466 | 1467 | .submit_text.enabled { 1468 | display: block; 1469 | max-height: 500px; 1470 | } 1471 | 1472 | .roundfield, 1473 | .linefield { 1474 | margin: 1px auto; 1475 | padding: 5px 10px 15px; 1476 | } 1477 | 1478 | div.save-button, 1479 | form.submit > .spacer { 1480 | margin: 20px auto; 1481 | width: 520px; 1482 | } 1483 | 1484 | #suggested-reddits { 1485 | font-size: 1.2rem; 1486 | font-family: arial; 1487 | text-align: center; 1488 | overflow-y: auto; 1489 | margin: 10px -10px -10px; 1490 | padding: 1px 0; 1491 | 1492 | &>h3 { 1493 | display: none; 1494 | } 1495 | 1496 | li { 1497 | display: inline-block; 1498 | margin: 0 0 4px 0; 1499 | 1500 | a { 1501 | display: block; 1502 | padding: 2px 8px; 1503 | color: hsl(0,0%,50%); 1504 | 1505 | &:hover { 1506 | color: hsl(0,0%,30%); 1507 | outline: 1px solid hsl(0,0%,80%); 1508 | } 1509 | } 1510 | } 1511 | } 1512 | 1513 | body > div.content, 1514 | .linkinfo, 1515 | .sidecontentbox, 1516 | .login-form-side, 1517 | .sidebox .spacer, 1518 | .side form.usertext { 1519 | @extend %sheet; 1520 | } 1521 | 1522 | .sidecontentbox, 1523 | .login-form-side { 1524 | padding: 10px; 1525 | } 1526 | 1527 | .sidecontentbox .content { 1528 | border: none; 1529 | font-size: 1.2rem; 1530 | } 1531 | 1532 | .sidebox .spacer { 1533 | margin-top: 0; 1534 | padding: 10px 10px 10px 54px; 1535 | 1536 | a { 1537 | top: 10px; 1538 | left: 10px; 1539 | } 1540 | } 1541 | 1542 | // Links 1543 | .thing .title { 1544 | color: hsl(210,100%,45%); 1545 | } 1546 | 1547 | .thing .title:visited, 1548 | .thing.visited .title { 1549 | color: hsl(300,15%,45%); 1550 | } 1551 | 1552 | .thing a.title:hover, 1553 | .md a:hover { 1554 | text-decoration: underline; 1555 | } 1556 | 1557 | .md a:visited { 1558 | color: $linkVisited; 1559 | } 1560 | 1561 | body.comments-page .link a.title { 1562 | font-size: 2.2rem; 1563 | } 1564 | 1565 | // Hide redundant headings 1566 | body.submit-page > div.content > h1, 1567 | .searchpane h4, 1568 | body.submit-page .formtabs-content .spacer:last-of-type .title { 1569 | display: none; 1570 | } 1571 | 1572 | #reddit-field .title { 1573 | font-size: 0; 1574 | line-height: 0; 1575 | 1576 | &:after { 1577 | content: "subreddit"; 1578 | font-size: large; 1579 | line-height: 1; 1580 | } 1581 | } 1582 | 1583 | body.res #progressIndicator { 1584 | font-size: 1.2rem; 1585 | width: auto; 1586 | margin: 20px 0px 10px 0px; 1587 | color: black; 1588 | border-color: hsl(0,0%,85%); 1589 | background-color: hsl(0,0%,97%); 1590 | 1591 | h2 { 1592 | display: none; 1593 | } 1594 | &:hover { 1595 | background-color: transparent; 1596 | } 1597 | } 1598 | 1599 | body.res .NERPageMarker { 1600 | font-size: 1.2rem; 1601 | width: auto; 1602 | margin: 20px 0px 10px 0px; 1603 | line-height: 1.4; 1604 | color: hsl(0,0%,100%); 1605 | border-color: transparent; 1606 | background-color: hsl(250,5%,30%); 1607 | } 1608 | 1609 | // Thumbnails 1610 | .link .thumbnail { 1611 | margin-bottom: 10px; 1612 | } 1613 | .thing:not(.self) { 1614 | 1615 | .thumbnail:not(.default):not(.nsfw) { 1616 | width: 90px; 1617 | height: 60px; 1618 | margin: -5px 0 10px 0; 1619 | position: relative; 1620 | } 1621 | 1622 | .thumbnail:not(.default) img { 1623 | width: 90px; 1624 | height: auto; 1625 | display: block; 1626 | position: absolute; 1627 | top: 0; 1628 | left: 0; 1629 | } 1630 | 1631 | &:not([data-domain="reddit.com"]) .thumbnail:not(.default):hover img { 1632 | width: 140px; 1633 | top: -30px; 1634 | left: -25px; 1635 | } 1636 | } 1637 | 1638 | body.comments-page .thing:not(.self):not([data-domain="reddit.com"]) .thumbnail:not(.default) { 1639 | width: auto; 1640 | height: auto; 1641 | margin: 0 10px 0 0; 1642 | position: static; 1643 | } 1644 | 1645 | body.comments-page .thing:not(.self):not([data-domain="reddit.com"]) .thumbnail:not(.default) img { 1646 | width: auto; 1647 | position: static; 1648 | } 1649 | 1650 | .commentarea { 1651 | 1652 | .menuarea { 1653 | margin-right: 0; 1654 | color: hsl(0,0%,70%); 1655 | 1656 | &>div:hover { 1657 | color: black; 1658 | } 1659 | } 1660 | 1661 | &>.usertext { 1662 | margin: 0 -10px 20px; 1663 | padding: 10px 10px 7px 20px; 1664 | } 1665 | } 1666 | 1667 | .login-form-side { 1668 | 1669 | input[type=text], 1670 | input[type=password] { 1671 | box-sizing: border-box; 1672 | border-color: hsl(0,0%,70%); 1673 | margin: 0; 1674 | width: 142px; 1675 | } 1676 | 1677 | input[type=text] { 1678 | margin-right: 4px; 1679 | } 1680 | 1681 | .submit { 1682 | margin-right: 0; 1683 | } 1684 | } 1685 | 1686 | ul#image-preview-list { 1687 | margin-right: 0; 1688 | font-size: 1.2rem; 1689 | 1690 | li { 1691 | margin-bottom: 0; 1692 | width: 50%; 1693 | height: auto; 1694 | float: none; 1695 | display: inline-block; 1696 | } 1697 | } 1698 | 1699 | /* addon search-results */ 1700 | @import 'combined-search'; 1701 | /* .end */ 1702 | 1703 | #REScommentNavToggle { 1704 | display: inline; 1705 | padding-left: 1rem; 1706 | 1707 | &>.commentNavSortType { 1708 | font-weight: normal; 1709 | color: hsl(0,0%,40%); 1710 | border: none; 1711 | margin: 0 5px; 1712 | padding: 0; 1713 | } 1714 | 1715 | &>span:not(:first-of-type) { 1716 | display: none; 1717 | } 1718 | } 1719 | 1720 | body.moderator #REScommentNavToggle { 1721 | display: block; 1722 | padding: 1em 0 0; 1723 | } 1724 | 1725 | .infobar { 1726 | margin: 10px 0; 1727 | padding: 10px; 1728 | border-color: hsl(50, 70%, 70%); 1729 | background: hsl(50, 90%, 90%); 1730 | } 1731 | 1732 | .RESDialogSmall { 1733 | z-index: 100 !important; 1734 | } 1735 | .link.last-clicked { 1736 | border: none; 1737 | } 1738 | .nav-buttons { 1739 | margin: 10px -10px 0 -10px; 1740 | padding: 20px 10px 10px 10px; 1741 | border-top: 1px solid hsl(0,0%,90%); 1742 | } 1743 | .nextprev a, 1744 | .next-suggestions a { 1745 | display: inline-block; 1746 | } 1747 | 1748 | body.with-listing-chooser { 1749 | 1750 | #header .pagename { 1751 | position: relative; 1752 | bottom: auto; 1753 | } 1754 | 1755 | .listing-chooser { 1756 | z-index: 100; 1757 | border-radius: 0 10px 0 0; 1758 | } 1759 | 1760 | #header .tabmenu { 1761 | margin-left: 0; 1762 | } 1763 | } 1764 | .icon-menu a { 1765 | background-color: transparent !important; 1766 | } 1767 | .side .drop-choices { 1768 | z-index: 101; 1769 | } 1770 | .domain { 1771 | font-family: verdana, sans-serif; 1772 | color: transparent; 1773 | vertical-align: middle; 1774 | } 1775 | .domain a { 1776 | color: hsl(0,0%,60%); 1777 | } 1778 | .domain a:hover { 1779 | color: hsl(0,0%,20%); 1780 | text-decoration: none; 1781 | } 1782 | // RES pinHeader 1783 | body.res>#sr-header-area { 1784 | background: hsla(0,0%,0%,.8); 1785 | } 1786 | 1787 | body.pinHeader-sub div#header-bottom-right { 1788 | top: 22px !important; 1789 | opacity: .8; 1790 | } 1791 | 1792 | body.pinHeader-userbar #header-bottom-right { 1793 | height: 22px; 1794 | } 1795 | 1796 | body.pinHeader-subanduser #header-bottom-right { 1797 | height: 22px; 1798 | top: 22px; 1799 | } 1800 | 1801 | div.imgCaptions, 1802 | .md div.imgCaptions { 1803 | white-space: normal; 1804 | } 1805 | .entry.RES-keyNav-activeElement, 1806 | .entry.RES-keyNav-activeElement .md-container { 1807 | background-color: transparent !important; 1808 | } 1809 | .entry.RES-keyNav-activeElement .tagline, 1810 | .thing.morechildren .entry.RES-keyNav-activeElement { 1811 | color: black; 1812 | background-color: hsla(0,0%,0%,.12) !important; 1813 | border-radius: 5px; 1814 | } 1815 | .hover-bubble { 1816 | border: 1px solid hsla(0,0%,0%,.3); 1817 | box-shadow: $shadow-8dp; 1818 | 1819 | &.multi-selector { 1820 | 1821 | .title { 1822 | padding: 5px 12px; 1823 | } 1824 | 1825 | strong, 1826 | a.sr { 1827 | font-weight: normal; 1828 | text-align: left; 1829 | font-size: 1.2rem; 1830 | margin: 0; 1831 | } 1832 | 1833 | strong { 1834 | font-size: 1.8rem; 1835 | line-height: 1.4; 1836 | text-transform: capitalize; 1837 | } 1838 | 1839 | a.sr { 1840 | display: inline; 1841 | color: hsl(0,0%,60%); 1842 | } 1843 | 1844 | .throbber { 1845 | opacity: .2; 1846 | } 1847 | } 1848 | } 1849 | 1850 | .create-reddit .linefield:nth-of-type(3) .usertext::before { 1851 | content: 'h5 followed by "* text" = menu | > = card | [text](/r/a "click") = button'; 1852 | display: block; 1853 | margin: 10px -22px; 1854 | padding: 5px; 1855 | color: white; 1856 | font: 1.2rem/1.2 consolas, monospace; 1857 | background: hsl(250,5%,30%); 1858 | text-align: center; 1859 | } 1860 | 1861 | .livePreview { 1862 | margin: 7px 0; 1863 | background-color: white !important; 1864 | } 1865 | 1866 | .subreddit-rules-page { 1867 | max-width: none; 1868 | 1869 | .subreddit-rule-item { 1870 | border-top: 1px solid hsl(0,0%,88%); 1871 | 1872 | &:hover { 1873 | background: none; 1874 | } 1875 | } 1876 | 1877 | &:before { 1878 | top: auto; 1879 | } 1880 | } 1881 | 1882 | #srList { 1883 | border: none; 1884 | box-shadow: $shadow-8dp; 1885 | } 1886 | 1887 | /* addon animate-thumbs */ 1888 | .thing:not(.self) .thumbnail:not(.default) img { transition: width .1s, left .1s, top 1s .75s; } 1889 | /* .end */ 1890 | 1891 | /* addon nightmode */ 1892 | @import 'nightmode'; 1893 | /* .end */ 1894 | -------------------------------------------------------------------------------- /snoo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/githue/click-reddit/afcab088a2ae5b0bf0ce0eab1e615a30d9daf159/snoo.png -------------------------------------------------------------------------------- /sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/githue/click-reddit/afcab088a2ae5b0bf0ce0eab1e615a30d9daf159/sprite.png -------------------------------------------------------------------------------- /stylesheet.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Theme: /r/click 3 | * Author:/u/postpics 4 | * Instruction: add your customizations at the bottom. You may remove built-in 5 | * addons, but remember to remove them again when you upgrade. 6 | */ 7 | .subButtons { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; } 8 | 9 | body > div.content, .linkinfo, .sidecontentbox, .login-form-side, .sidebox .spacer, .side form.usertext { background: white; border: 1px solid #e0e0e0; border-radius: 2px; } 10 | 11 | .side .md a[title="click"], .usertext button, #url-field button, .usertext-buttons button.save, .side .subscribe-button a.active, .subButtons .RESshortcut, .subButtons .RESDashboardToggle { display: inline-block; margin: 0; padding: 0 8px; border-radius: 2px; text-transform: uppercase; text-align: center; font: 1.3rem/32px tahoma, arial, sans-serif; border: none; background: none; transition: all .25s; } 12 | .side .md a[title="click"]:hover, .usertext button:hover, #url-field button:hover, .usertext-buttons button.save:hover, .side .subscribe-button a.active:hover, .subButtons .RESshortcut:hover, .subButtons .RESDashboardToggle:hover { text-decoration: none; } 13 | 14 | .side .md > blockquote a[title="click"], .side .md > blockquote a[title="click"]:visited, .usertext button, #url-field button { color: rgba(255, 255, 255, 0.8); } 15 | .side .md > blockquote a[title="click"]:hover, .usertext button:hover, #url-field button:hover { background: rgba(0, 0, 0, 0.12); } 16 | 17 | .side .md > p a[title="click"], .usertext-buttons button.save { color: white !important; background: #668899; transition: box-shadow .25s; } 18 | .side .md > p a[title="click"]:hover, .usertext-buttons button.save:hover { box-shadow: 0 0px 3px rgba(0, 0, 0, 0.12), 0 2px 3px rgba(0, 0, 0, 0.24); } 19 | 20 | html { font: normal 10px/1 verdana, arial, sans-serif; } 21 | 22 | body { background: #ededed; } 23 | body > div.content, body.modtools-page > div.content { margin: 20px 330px 0 10px; padding: 0px 10px 40px 10px; } 24 | body.res #header-bottom-right .separator { margin: 0; visibility: hidden; } 25 | body:not(.res-v4) #header-bottom-right #RESSettingsButton { margin: 0; vertical-align: middle; } 26 | body > .content .spacer { margin: 0; } 27 | body.mod-toolbox { overflow: visible; } 28 | body.res-commentBoxes > .content { padding-right: 10px !important; } 29 | body.res-commentBoxes .comment { overflow: visible; } 30 | 31 | #header { border-bottom: none; background-color: #4a4950; background-repeat: no-repeat; background-position: 50% 0%; box-shadow: 0 0px 3px rgba(0, 0, 0, 0.12), 0 2px 3px rgba(0, 0, 0, 0.24); } 32 | 33 | #srLeftContainer, #RESShortcutsViewport, #RESShortcutsEditContainer { max-height: none; } 34 | 35 | #RESShortcutsEditContainer { opacity: 0; transition: all .1s .1s; z-index: 1; } 36 | 37 | #RESShortcutsEditContainer, #RESShortcutsSort, #RESShortcutsRight, #RESShortcutsLeft, #RESShortcutsAdd, #RESShortcutsTrash { color: rgba(255, 255, 255, 0.8) !important; background: none !important; } 38 | 39 | #sr-more-link { background: none; } 40 | 41 | #sr-header-area { font-family: arial, sans-serif; color: rgba(255, 255, 255, 0.3); border-bottom: none; background: none; box-sizing: border-box; line-height: 22px; height: 22px; transition-property: background, height, margin, z-index; transition-duration: .2s; transition-delay: .2s; position: relative; z-index: 2; } 42 | #sr-header-area:hover { background: rgba(0, 0, 0, 0.8); height: 30px; margin-bottom: -8px; z-index: 4; } 43 | #sr-header-area:hover #sr-more-link { background: #1a1a1a; } 44 | #sr-header-area:hover a, #sr-header-area:hover #RESShortcutsEditContainer { opacity: 1; color: rgba(255, 255, 255, 0.8); } 45 | 46 | body.res #sr-header-area a.RESShortcutsCurrentSub, #sr-header-area .selected a { color: white !important; font-weight: normal; } 47 | 48 | .sr-bar .separator { color: rgba(255, 255, 255, 0.3); } 49 | 50 | .dropdown.srdrop .selected { color: rgba(255, 255, 255, 0.6); background: none; padding-right: 5px; } 51 | .dropdown.srdrop .selected:after { content: ""; display: inline-block; height: 0px; width: 1px; border: 5px solid transparent; border-top-color: rgba(255, 255, 255, 0.6); position: relative; left: 5px; top: 3px; } 52 | 53 | #sr-header-area a, #sr-header-area .separator { color: rgba(255, 255, 255, 0.6); } 54 | #sr-header-area .drop-choices.srdrop { border: none; box-shadow: 0 0px 8px rgba(0, 0, 0, 0.12), 0 8px 8px 1px rgba(0, 0, 0, 0.18); } 55 | #sr-header-area .drop-choices.srdrop a { color: black; } 56 | 57 | #header-bottom-left { padding: 0px 0 0 0; position: relative; } 58 | 59 | #header .tabmenu { position: absolute; bottom: 0; width: 100%; box-sizing: border-box; display: block !important; font-size: 1.2rem; font-family: arial, sans-serif; text-transform: uppercase; margin: 0; padding: 40px 0 0px 10px; z-index: 1; } 60 | #header .tabmenu li { display: inline-block; margin: 0; padding: 0; position: relative; } 61 | #header .tabmenu a { display: block; font-weight: bold; color: rgba(255, 255, 255, 0.8); border: none; border-bottom: 2px solid transparent; background: none; line-height: 30px; padding: 0 10px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); position: relative; z-index: 1; } 62 | #header .tabmenu a:hover { color: white; } 63 | #header .tabmenu .selected a, #header .tabmenu a:active { color: white; border-bottom-color: white; } 64 | 65 | #header-img-a { display: inline-block; margin: 0 0 52px 20px; position: relative; z-index: 2; } 66 | 67 | #header-img { margin: 0; display: block; } 68 | #header-img.default-header { position: relative; margin: 0 0 52px 20px; width: 32px; z-index: 2; } 69 | 70 | .pagename { display: inline-block; margin: 0px 10px 52px 10px; color: white; font: normal 24px/1 tahoma, arial, sans-serif; position: relative; z-index: 2; } 71 | .pagename a { letter-spacing: 1px; font-size: 36px; color: white; position: relative; text-shadow: 0 0px 3px rgba(0, 0, 0, 0.12), 0 2px 3px rgba(0, 0, 0, 0.24); transition: text-shadow .3s; } 72 | .pagename a:hover { text-decoration: none; } 73 | 74 | #header-bottom-right { color: rgba(255, 255, 255, 0.8); padding: 0 10px 0 10px !important; line-height: 22px; background: rgba(51, 51, 51, 0.9); z-index: 3; top: 0 !important; bottom: auto !important; border-radius: 3px 0 0 3px; } 75 | #header-bottom-right:hover { background: #333333; } 76 | #header-bottom-right a { color: rgba(255, 255, 255, 0.8); } 77 | #header-bottom-right a:hover { text-decoration: underline; } 78 | #header-bottom-right .user { color: rgba(255, 255, 255, 0.6); } 79 | #header-bottom-right .gearIcon::after { color: #e6e6e6; text-shadow: none; } 80 | #header-bottom-right .userkarma, #header-bottom-right .userkarma a { font-weight: normal; color: #999999; } 81 | #header-bottom-right .message-count { color: black; display: inline; } 82 | 83 | #userbarToggle { min-height: 0 !important; border: none !important; padding: 0 5px !important; background: none !important; text-align: left !important; left: 0 !important; bottom: auto !important; width: auto !important; height: 22px !important; } 84 | 85 | .pref-lang { font-weight: normal; } 86 | 87 | body.res .RESDropdownList { width: 200px; border-radius: 0; border: none; color: black; background-color: white; box-shadow: 0 0px 8px rgba(0, 0, 0, 0.12), 0 8px 8px 1px rgba(0, 0, 0, 0.18); } 88 | body.res .RESDropdownList li { font-weight: normal; font-size: 1.2rem; line-height: 1.5; height: auto; padding: 6px 10px; width: auto; border: none; } 89 | body.res .RESDropdownList li, body.res .RESDropdownList li:hover, body.res .RESDropdownList a, body.res .RESDropdownList a:visited { color: inherit; } 90 | body.res .RESDropdownList li:hover, body.res .RESDropdownList li a:hover { color: inherit; background-color: rgba(0, 0, 0, 0.12); } 91 | body.res .RESDropdownList .RESMenuItemButton { position: static; margin-left: -100%; float: right; } 92 | body.res .RESDropdownList .RESMenuItemButton:hover { color: inherit; background-color: rgba(0, 0, 0, 0.12); } 93 | 94 | .subreddit-rule-form .c-form-group .label, .subreddit-rule-form .c-form-group .text-counter { color: inherit; } 95 | 96 | body.res-v430:not(.res-v4) #RESSearchMenuItem { margin: 0px; border: none; width: 13px; height: 16px; background: url(%%sprite%%) no-repeat -21px 3px; } 97 | 98 | body.res-v430:not(.res-v4) .RESDropdownList .toggleButton { margin: 0; line-height: 1; } 99 | 100 | .side { width: 310px; margin: 20px 10px 0 0; padding: 0; background: transparent !important; } 101 | .side > .spacer { display: inline; } 102 | .side .linkinfo { padding: 10px; line-height: 1.5; font-family: verdana, sans-serif; } 103 | .side .linkinfo .shortlink, .side .linkinfo .shortlink input, .side .linkinfo .score .number, .side .linkinfo .score .word { font-size: inherit; } 104 | .side .shortlink input { color: blue; border-color: #e6e6e6; } 105 | .side #search { position: relative; margin: 0 0 25px; } 106 | .side #search input[type=text] { width: 310px; margin-bottom: 1px; padding: 8px 8px 8px 0px; border-width: 0 0 1px; border-color: #cccccc; background: transparent; transition: all .2s; } 107 | .side #search input[type=text]:hover, .side #search input[type=text]:focus { box-shadow: 0 1px 0px 0 #F44336; border-color: #F44336; outline: none; } 108 | .side #search input[type=submit] { width: 30px; height: 30px; margin-left: -30px; opacity: .5; background: url(%%sprite%%) no-repeat -13px 9px; } 109 | .side #search input[type=submit]:hover { background: url(%%sprite%%) no-repeat -13px 9px; } 110 | .side #search #searchexpando { margin: 0px 0 0 0; padding: 20px 10px 0 10px; border: transparent; border-top: none; border-radius: 0; background: #edebe9; box-shadow: 0 0px 8px rgba(0, 0, 0, 0.12), 0 8px 8px 1px rgba(0, 0, 0, 0.18); position: absolute; width: 310px; box-sizing: border-box; } 111 | .side #search #search_showmore:after { display: inline-block; margin: 1rem 0; } 112 | .side #search #moresearchinfo { padding: 20px 0 20px 0; border-width: 0; position: relative; } 113 | .side #search #moresearchinfo + p { margin: 10px 0 0 0; } 114 | .side #search #moresearchinfo + p a { line-height: 0; font-size: 0; } 115 | .side #search #moresearchinfo + p a:after { text-indent: 0; height: auto; line-height: 1; content: "More options..."; font-size: 12px; } 116 | .side #search #moresearchinfo p:first-of-type { font-weight: bold; line-height: 1; } 117 | .side #search #moresearchinfo #search_hidemore { display: block; color: transparent; float: none; text-align: center; margin: 0 -10px 0px -10px; padding: 0; position: absolute; top: auto; right: 0; bottom: 0; left: 0; font-size: 0; line-height: 0; border-bottom: 5px solid #F44336; } 118 | .side #search #moresearchinfo #search_hidemore:after { content: ""; display: inline-block; border: 8px solid transparent; border-bottom-color: #F44336; } 119 | .side #search dt { font-weight: normal; margin-left: 0; } 120 | .side #search dd { margin: 0 0 5px; color: #969696; } 121 | .side .morelink .nub, .side .morelink:hover .nub { display: none; } 122 | 123 | #login_login-main, #moderation_tools, #ad_main, .sidebox.create, .sidecontentbox, .account-activity-box, .linkinfo, .titlebox { margin: 10px 0 10px 0; clear: both; } 124 | 125 | body:not(.res-console-open) #RESNotifications, body:not(.res-console-open) #RESShortcutsAddFormContainer, body:not(.res-console-open) .RESDropdownList, body:not(.res-console-open):not(.modal-open) .side #search { z-index: 2147483647 !important; } 126 | 127 | .sidebox.submit { display: inline-block; box-sizing: border-box; position: absolute; top: 77px; z-index: 100; width: 136px; } 128 | .sidebox.submit .mod-override .morelink a:after { margin: 0; left: 0; top: -8px; } 129 | .sidebox.submit .mod-override .morelink:hover a:after { opacity: 1; } 130 | .sidebox.submit-text { right: 10px; width: 166px; } 131 | .sidebox:not(.create) .morelink { font: normal 1.2rem/1 tahoma, arial, sans-serif; text-transform: uppercase; font-size: 1.2rem; border: none; background: none; height: auto; letter-spacing: 0; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.2); } 132 | .sidebox:not(.create) .morelink a { display: block; height: auto; line-height: 32px; white-space: nowrap; padding: 0px 1px; width: auto; background: rgba(255, 255, 255, 0.9); color: black; border-radius: 2px; box-shadow: 0 0px 3px rgba(0, 0, 0, 0.12), 0 2px 3px rgba(0, 0, 0, 0.24); transition: all .3s; } 133 | .sidebox:not(.create) .morelink a:active { background: gray; } 134 | .sidebox:not(.create) .morelink:hover { background: none; } 135 | .sidebox:not(.create) .morelink:hover a { background: white; box-shadow: 0 0px 8px rgba(0, 0, 0, 0.12), 0 8px 8px 1px rgba(0, 0, 0, 0.18); } 136 | .sidebox.submit.disabled { width: 310px; } 137 | .sidebox.submit.disabled .morelink { display: inline-block; width: 149px; margin-right: 1px; text-transform: none; } 138 | .sidebox.submit.disabled .morelink a { padding-left: 5px; padding-right: 5px; color: #666666; background: #cccccc; } 139 | .sidebox.submit.disabled .spacer { display: inline-block; width: 150px; vertical-align: top; font-family: arial, sans-serif; background: none; box-shadow: none; border: none; } 140 | .sidebox.submit.disabled .spacer .subtitle { color: white; font-weight: bold; font-size: 1rem; } 141 | 142 | h1.redditname { display: none; } 143 | 144 | h1.redditname + div { text-align: right; } 145 | 146 | .side form.usertext { margin: 10px 0px 0 0; padding: 0px 10px 0px 10px; } 147 | .side form.usertext .md { line-height: 1.5; } 148 | 149 | .content .RESBigEditorPop, .usertext button.cancel, #url-field button { margin: 0 0 0 8px; } 150 | 151 | .usertext button, #url-field button { color: black; } 152 | 153 | .side .subscribe-button a:hover, .side .subButtons .RESshortcut:hover, .side .subButtons .RESDashboardToggle:hover { box-shadow: 0 0px 3px rgba(0, 0, 0, 0.12), 0 2px 3px rgba(0, 0, 0, 0.24); } 154 | 155 | .subscribe-button { margin: 5px 5px 5px 0; } 156 | 157 | .side .subscribe-button a.active, .subButtons .RESshortcut, .subButtons .RESDashboardToggle { display: block; white-space: nowrap; } 158 | 159 | .side .subscribe-button a.add.active { color: white; background: #F44336; } 160 | 161 | .subButtons .subscribe-button a.active { padding: 0; } 162 | .subButtons .RESshortcut, .subButtons .RESDashboardToggle { padding: 0; color: #333333; background: white; border-radius: 2px; } 163 | 164 | .side .subscribe-button a.remove, .subButtons .RESshortcut.remove, .subButtons .RESDashboardToggle.remove { color: #333333; border-color: transparent; background: inherit; } 165 | 166 | .side .subscribe-button a.remove:hover, .subButtons .RESshortcut.remove:hover, .subButtons .RESDashboardToggle.remove:hover { box-shadow: none; } 167 | 168 | .titlebox { margin-left: 0; margin-right: 0; background: transparent; color: gray; } 169 | .titlebox .subscribers, .titlebox .users-online { display: inline-block; font-size: 1.1rem; font-family: arial, sans-serif; vertical-align: baseline; margin-top: 0; margin-bottom: 0; } 170 | .titlebox .subscribers { margin-right: 1rem; } 171 | .titlebox .users-online:before { content: none; } 172 | .titlebox .users-online .number:after { content: " here now"; } 173 | .titlebox .users-online .word { display: none; } 174 | .titlebox .bottom { color: #999999; border: none; padding: 10px 0 0 0; } 175 | .titlebox .bottom a { color: inherit; } 176 | 177 | .subButtons { border-width: 10px 0 10px 0; border-style: solid; border-color: transparent; } 178 | .subButtons span { width: 100%; margin: 0; box-sizing: border-box; } 179 | .subButtons span:first-child { margin-right: 8px; } 180 | .subButtons span:last-child { margin-left: 8px; } 181 | .subButtons + .subscribers, .subButtons + .subscribers + .users-online { font-size: 1.2rem; } 182 | 183 | .titlebox form.toggle, .leavemoderator { font-size: 1.1rem; color: #666666; background: none; padding: 10px 0 0 0; clear: left; } 184 | 185 | .link .usertext-body .md { border: none; background: none; border-radius: 0; padding: 0 0 10px; } 186 | 187 | .usertext-body > .md { padding-right: 0; } 188 | 189 | ul.tabmenu.formtab { margin: 0 0 5px; padding: 0; font-size: 1.3rem; text-transform: uppercase; text-align: center; } 190 | ul.tabmenu.formtab li { display: inline-block; } 191 | ul.tabmenu.formtab li.selected a { font-size: inherit; background: none; color: inherit; border-bottom: 2px solid; } 192 | ul.tabmenu.formtab a { display: block; padding: 5px 15px; border: none; color: gray; background: none; } 193 | ul.tabmenu.formtab a:hover { color: inherit; } 194 | 195 | .formtabs-content { border-top: none; } 196 | .formtabs-content .roundfield { border-radius: 0; } 197 | 198 | form .spacer + .spacer { margin: 0px 0; } 199 | 200 | .organic-listing.loading { display: none; } 201 | 202 | .md hr { height: 1px; margin: 10px 0px; background: #e0e0e0; } 203 | 204 | .side .md hr { margin: 10px -10px; } 205 | .side .md > blockquote hr { width: auto; background: rgba(255, 255, 255, 0.12); } 206 | 207 | .link { margin: 0 -10px; padding: 10px 10px 0 10px; } 208 | .link .flat-list { padding: 0; margin-bottom: 8px; } 209 | .link .entry { overflow: visible; margin-left: 64px; } 210 | .link .title { font: 1.8rem/1.1 arial, sans-serif; text-rendering: optimizeLegibility; margin: 0; } 211 | .link .title + .expando-button { margin: 7px 5px 0 0; } 212 | .link .midcol { font-weight: normal; margin-top: 1px; } 213 | .link .tagline { margin: 2px 0; } 214 | .link .tagline:first-letter { text-transform: capitalize; } 215 | .link .rank { position: absolute; font-size: 1.2rem; left: 0; line-height: 2em; padding: 0px 5px; background: #e6e6e6; color: #999999; border-radius: 50%; text-align: center; opacity: 0; transition: opacity .1s; } 216 | .link .expando { position: relative; } 217 | .link:hover .rank { opacity: 1; } 218 | 219 | body.listing-page .link .entry { border-bottom: 1px solid #e0e0e0; } 220 | 221 | .link .thumbnail + .entry { margin-left: 165px; } 222 | 223 | body.comments-page .link:not(.self) .thumbnail:not(.default) + .entry { margin-left: 210px; } 224 | 225 | .link div.madeVisible { overflow: visible; position: relative; background: white; margin-bottom: 10px; } 226 | 227 | .link .thumbnail + .entry div.madeVisible { margin-left: -101px; } 228 | 229 | body.comments-page .link .thumbnail + .entry div.madeVisible { margin-left: -156px; } 230 | 231 | div.madeVisible a.madeVisible { overflow: visible; } 232 | div.madeVisible a.madeVisible video, div.madeVisible a.madeVisible img { display: block; box-shadow: 0 0px 8px rgba(0, 0, 0, 0.12), 0 8px 8px 1px rgba(0, 0, 0, 0.18); } 233 | 234 | .error { color: #d92626; } 235 | 236 | #noresults { font-size: 0; text-align: center; margin-right: 0; color: transparent; } 237 | #noresults:after { font-size: 2rem; content: "Why not add something?"; color: gray; display: block; margin: 2rem 0; } 238 | 239 | .thing.stickied.link a.title { font-weight: normal; color: #1b9844; } 240 | 241 | body > .content .link .midcol, .midcol-spacer { width: 50px !important; } 242 | 243 | .tagline { line-height: 1.4; transition: background .1s; } 244 | 245 | .tagline .stickied-tagline, .search-result-meta .stickied-tagline, .tagline .moderator, .green, .search-result-meta .moderator, .res-nightmode .tagline .moderator, .res-nightmode .tagline .moderator:visited { color: #1b9844; } 246 | 247 | .comment .tagline { display: block; } 248 | 249 | .tagline, .search-result-meta { color: #333333; font-size: 1.1rem; } 250 | 251 | .tagline a, .search-result-meta a { color: inherit; } 252 | 253 | .entry .buttons li, .entry .buttons li + li { padding: 0; } 254 | .entry .buttons li a { font-weight: normal; font-size: 1.1rem; color: #7b929d; text-transform: capitalize; padding: 2px 6px; border-radius: 3px; } 255 | .entry .buttons li a:hover { color: black; text-decoration: none; } 256 | .entry .buttons li:first-of-type a { padding-left: 0; } 257 | 258 | .panestack-title { margin: 10px -10px; padding: 15px 20px 10px 20px; border-top: 1px solid #e0e0e0; border-bottom: none; text-transform: capitalize; } 259 | 260 | .wiki-page .wikititle, .wiki-page .pageactions { display: inline-block; margin: 0 10px 15px 0; } 261 | .wiki-page .wiki-page-content { margin: 0; } 262 | 263 | .wiki-page-content .md pre { border-color: #cccccc; } 264 | 265 | .commentarea .menuarea, .sheets { margin-right: 0; } 266 | 267 | .gold-accent.comment-visits-box { max-width: none !important; display: block; } 268 | 269 | .rounded { border-radius: 3px; } 270 | 271 | .md h1, .md h2, .md h3, .md h4, .md h5, .md h6, .side .md h1, .side .md h2, .side .md h3, .side .md h4, .side .md h5, .side .md h6, .wiki-page-content .md h1, .wiki-page-content .md h2, .wiki-page-content .md h3, .wiki-page-content .md h4, .wiki-page-content .md h5, .wiki-page-content .md h6, h2#wiki_heading_2 { color: inherit; font-weight: normal; font-family: tahoma, arial, sans-serif; line-height: 1; margin: 1em 0 .5em; } 272 | 273 | .md h1 a:visited, .md h2 a:visited, .md h3 a:visited, .md h4 a:visited, .md h5 a:visited, .md h6 a:visited { color: inherit; } 274 | 275 | .md h1 { font-size: 2rem; } 276 | 277 | .side .md h1, .wiki-page-content .md h1 { font-size: 2.25rem; margin: .5em 0 .5em; } 278 | 279 | .side .md h2, .wiki-page-content .md h2 { font-size: 2rem; } 280 | 281 | .side .md h3, .wiki-page-content .md h3 { font-size: 1.75rem; font-weight: normal; } 282 | 283 | .side .md h4, .wiki-page-content .md h4 { font-size: 1.6rem; font-style: normal; } 284 | 285 | .side .md h5, .wiki-page-content .md h5 { font-size: 1.4rem; text-decoration: none; } 286 | 287 | .side .md h6, .wiki-page-content .md h6 { font-size: 1.3rem; text-decoration: none; text-transform: none; } 288 | 289 | .side .md ul { padding-left: 16px; } 290 | .side .md ul, .side .md ol { margin-top: 10px; margin-bottom: 10px; } 291 | .side .md ul li, .side .md ol li { line-height: 1.6; } 292 | .side .md p { line-height: inherit; } 293 | 294 | /* addon blockquote-cards */ 295 | .side .md > blockquote { margin: 15px 10px 20px 10px; padding: 10px; color: white; border: none; background: #668899; border-radius: 3px; } 296 | .side .md > blockquote blockquote { color: white; } 297 | .side .md > blockquote h2 { margin-right: -10px; margin-left: -10px; margin-top: .5em; padding: 3px 10px; color: inherit; text-decoration: none; } 298 | .side .md > blockquote a, .side .md > blockquote a:visited { color: white; border-bottom: 1px solid rgba(255, 255, 255, 0.4); } 299 | .side .md > blockquote a:hover, .side .md > blockquote a:visited:hover { border-bottom-color: rgba(255, 255, 255, 0.8); text-decoration: none; } 300 | 301 | /* .end */ 302 | .link .usertext .usertext-edit > .md { padding-left: 0; } 303 | 304 | body:not(.submit-page) .usertext .bottom-area { overflow: visible; width: auto; } 305 | 306 | .usertext .help-toggle, .usertext a.reddiquette { line-height: 32px; margin: 0 5px; } 307 | 308 | .usertext .help-toggle a, .usertext a.reddiquette { color: #999999; } 309 | 310 | body:not(.submit-page) .usertext-buttons { padding-bottom: 7px; } 311 | 312 | .usertext-buttons .status { font-size: 1rem; } 313 | 314 | /* addon side-menu */ 315 | .side .md > h5 + ul { margin: 10px -10px 20px -10px; padding: 0; list-style: none; font-size: 1.4rem; cursor: default; } 316 | .side .md > h5 + ul > li { padding: 6px 10px 6px 30px; position: relative; transition: background .1s; } 317 | .side .md > h5 + ul > li:hover > ul { visibility: visible; opacity: 1; right: 300px; } 318 | .side .md > h5 + ul > li > sup, .side .md > h5 + ul > li > p sup { position: absolute; top: 11px; left: 10px; display: block; overflow: hidden; text-indent: -1000px; width: 10px; height: 12px; opacity: .4; background-position: -20px -22px; background-image: url(%%sprite%%); pointer-events: none; } 319 | .side .md > h5 + ul > li:hover > sup, .side .md > h5 + ul > li:hover > p sup { left: 8px; } 320 | .side .md > h5 + ul > li > p, .side .md > h5 + ul > li > ul > li > p { margin: 0; } 321 | .side .md > h5 + ul > li > a, .side .md > h5 + ul > li > p > a { color: #0079d3; display: block; margin: -6px -10px -6px -30px; padding: 6px 10px 6px 30px; white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; text-decoration: none; } 322 | .side .md > h5 + ul > li:hover, .side .md > h5 + ul > li > ul > li:hover > a { background: rgba(0, 0, 0, 0.12); } 323 | .side .md > h5 + ul > li:hover > p > a, .side .md > h5 + ul > li > ul > li > a:hover, .side .md > h5 + ul > li > ul > li > p a:hover { color: #0079d3; text-decoration: none; } 324 | .side .md > h5 + ul > li > ul { visibility: hidden; opacity: 0; position: absolute; top: 0px; right: 295px; width: 300px; max-height: 700px; overflow-y: auto; list-style: none; margin: 0; padding: 8px 0; z-index: 101; border-radius: 2px; background: white; box-shadow: 0 0px 8px rgba(0, 0, 0, 0.12), 0 8px 8px 1px rgba(0, 0, 0, 0.18); transition-property: visibility opacity; transition-duration: .2s; transition-delay: .12s; } 325 | .side .md > h5 + ul > li > ul > li { padding: 6px 10px; } 326 | .side .md > h5 + ul > li > ul > li > a, .side .md > h5 + ul > li > ul > li > p a { color: #0079d3; display: block; margin: -6px -10px; padding: 6px 10px; } 327 | 328 | /* .end */ 329 | body.submit-page > .content { border: none; background: none; padding: 0; } 330 | body.submit-page .formtabs-content { width: auto; } 331 | body.submit-page .formtabs-content .roundfield { max-width: 520px; width: auto; box-sizing: border-box; background-color: white; } 332 | body.submit-page .formtabs-content .submit_text > h1 { display: none; } 333 | body.submit-page:not(.res-nightmode) .formtabs-content .submit_text { padding: 20px 10px; } 334 | body.submit-page form .spacer:first-of-type, body.submit-page form .spacer:last-of-type { margin: 0 auto 15px auto; width: 520px; } 335 | body.submit-page #items-required { width: 520px; margin: auto; text-align: right; } 336 | 337 | .submit_text.enabled { display: block; max-height: 500px; } 338 | 339 | .roundfield, .linefield { margin: 1px auto; padding: 5px 10px 15px; } 340 | 341 | div.save-button, form.submit > .spacer { margin: 20px auto; width: 520px; } 342 | 343 | #suggested-reddits { font-size: 1.2rem; font-family: arial; text-align: center; overflow-y: auto; margin: 10px -10px -10px; padding: 1px 0; } 344 | #suggested-reddits > h3 { display: none; } 345 | #suggested-reddits li { display: inline-block; margin: 0 0 4px 0; } 346 | #suggested-reddits li a { display: block; padding: 2px 8px; color: gray; } 347 | #suggested-reddits li a:hover { color: #4d4d4d; outline: 1px solid #cccccc; } 348 | 349 | .sidecontentbox, .login-form-side { padding: 10px; } 350 | 351 | .sidecontentbox .content { border: none; font-size: 1.2rem; } 352 | 353 | .sidebox .spacer { margin-top: 0; padding: 10px 10px 10px 54px; } 354 | .sidebox .spacer a { top: 10px; left: 10px; } 355 | 356 | .thing .title { color: #0073e6; } 357 | 358 | .thing .title:visited, .thing.visited .title { color: #846284; } 359 | 360 | .thing a.title:hover, .md a:hover { text-decoration: underline; } 361 | 362 | .md a:visited { color: #8114b8; } 363 | 364 | body.comments-page .link a.title { font-size: 2.2rem; } 365 | 366 | body.submit-page > div.content > h1, .searchpane h4, body.submit-page .formtabs-content .spacer:last-of-type .title { display: none; } 367 | 368 | #reddit-field .title { font-size: 0; line-height: 0; } 369 | #reddit-field .title:after { content: "subreddit"; font-size: large; line-height: 1; } 370 | 371 | body.res #progressIndicator { font-size: 1.2rem; width: auto; margin: 20px 0px 10px 0px; color: black; border-color: #d9d9d9; background-color: #f7f7f7; } 372 | body.res #progressIndicator h2 { display: none; } 373 | body.res #progressIndicator:hover { background-color: transparent; } 374 | 375 | body.res .NERPageMarker { font-size: 1.2rem; width: auto; margin: 20px 0px 10px 0px; line-height: 1.4; color: white; border-color: transparent; background-color: #4a4950; } 376 | 377 | .link .thumbnail { margin-bottom: 10px; } 378 | 379 | .thing:not(.self) .thumbnail:not(.default):not(.nsfw) { width: 90px; height: 60px; margin: -5px 0 10px 0; position: relative; } 380 | .thing:not(.self) .thumbnail:not(.default) img { width: 90px; height: auto; display: block; position: absolute; top: 0; left: 0; } 381 | .thing:not(.self):not([data-domain="reddit.com"]) .thumbnail:not(.default):hover img { width: 140px; top: -30px; left: -25px; } 382 | 383 | body.comments-page .thing:not(.self):not([data-domain="reddit.com"]) .thumbnail:not(.default) { width: auto; height: auto; margin: 0 10px 0 0; position: static; } 384 | 385 | body.comments-page .thing:not(.self):not([data-domain="reddit.com"]) .thumbnail:not(.default) img { width: auto; position: static; } 386 | 387 | .commentarea .menuarea { margin-right: 0; color: #b3b3b3; } 388 | .commentarea .menuarea > div:hover { color: black; } 389 | .commentarea > .usertext { margin: 0 -10px 20px; padding: 10px 10px 7px 20px; } 390 | 391 | .login-form-side input[type=text], .login-form-side input[type=password] { box-sizing: border-box; border-color: #b3b3b3; margin: 0; width: 142px; } 392 | .login-form-side input[type=text] { margin-right: 4px; } 393 | .login-form-side .submit { margin-right: 0; } 394 | 395 | ul#image-preview-list { margin-right: 0; font-size: 1.2rem; } 396 | ul#image-preview-list li { margin-bottom: 0; width: 50%; height: auto; float: none; display: inline-block; } 397 | 398 | /* addon search-results */ 399 | #previoussearch label { display: inline-block; } 400 | 401 | .search-summary { display: none; } 402 | 403 | .combined-search-page .searchpane { margin: 10px 0 20px 0; padding: 0; } 404 | .combined-search-page #search { padding: 0; white-space: normal; } 405 | .combined-search-page #search input[type="text"] { max-width: none; margin-right: -35px; padding-right: 35px; border-color: #4f86b5; } 406 | .combined-search-page #search .search-submit-button { margin: 0; width: 35px; height: 2.5em; padding: 0; border: none; border-radius: 0 3px 3px 0; } 407 | .combined-search-page .search-result-group { max-width: none; padding: 0; } 408 | .combined-search-page .search-result-group .search-result-group-header { margin: 0; } 409 | .combined-search-page .search-result { margin: 0; position: relative; transition: background-color 1s ease 1s; } 410 | .combined-search-page .search-result:not(.search-result-subreddit) > div { padding: 10px 0; border-bottom: 1px solid #ededed; } 411 | .combined-search-page .search-result:hover { background-color: #fafafa; } 412 | .combined-search-page .search-result.has-thumbnail .thumbnail { margin: 10px 10px 0 0; } 413 | .combined-search-page .search-result.has-thumbnail .thumbnail.self { visibility: hidden; display: block; } 414 | .combined-search-page .search-result .search-result-header .search-title { font-size: 14px; } 415 | .combined-search-page .search-result .search-result-meta { font-size: 11px; } 416 | .combined-search-page .search-result .search-result-icon-score { display: none; } 417 | .combined-search-page .search-result .search-subreddit-link { font-weight: bold; } 418 | .combined-search-page .search-result-subreddit { padding: 5px 0; } 419 | .combined-search-page .search-result-subreddit .search-subscribe-button .add, .combined-search-page .search-result-subreddit .search-subscribe-button .remove { width: auto; } 420 | .combined-search-page .search-result-link:not(.has-thumbnail) { margin-left: 80px; display: block; } 421 | .combined-search-page .search-result-link:not(.has-thumbnail):before { content: " "; display: block; margin: 0 10px 0 0; } 422 | .combined-search-page .search-result-link .search-expando.collapsed { height: 0px; max-height: none; width: 24px; position: absolute; margin-left: -35px; top: 30px; overflow: visible; } 423 | .combined-search-page .search-result-link .search-expando.collapsed:before { width: 24px; height: 24px; font: 16px/1 "times"; color: #336699; border: 1px solid #336699; border-radius: 5px; background: white; top: -24px; content: "Aa"; display: block; text-align: center; cursor: default; } 424 | .combined-search-page .search-result-link .search-expando.collapsed:hover { width: 90%; height: auto; z-index: 1; } 425 | .combined-search-page .search-result-link .search-result-body { padding: 10px; background-color: white; box-shadow: 0 0px 8px rgba(0, 0, 0, 0.12), 0 8px 8px 1px rgba(0, 0, 0, 0.18); } 426 | .combined-search-page .search-result-link .search-expando.collapsed .search-result-body { visibility: hidden; opacity: 0; transition: opacity .1s; } 427 | .combined-search-page .search-result-link .search-expando.collapsed:hover .search-result-body { visibility: visible; opacity: 1; } 428 | .combined-search-page .search-result-link .search-result-body .md { overflow: auto; height: auto; max-height: 300px; max-width: none; background: inherit; padding: 10px; } 429 | .combined-search-page .search-expando-button { display: none; } 430 | .combined-search-page .searchfacets .list { line-height: 0; } 431 | .combined-search-page .searchfacets:not(.res-search-pane) { position: fixed; top: 40%; left: 0px; margin: 0; padding: 0; border: 1px solid #5f99cf; background-color: white; z-index: 2; overflow: hidden; width: 19px; height: 125px; min-width: 0; transition: width .2s, padding .2s; box-shadow: none; box-sizing: content-box; } 432 | .combined-search-page .searchfacets:not(.res-search-pane):hover { width: 600px; height: auto; max-width: none; min-width: 0; padding: 10px 20px 10px 40px; box-shadow: 0 0px 8px rgba(0, 0, 0, 0.12), 0 8px 8px 1px rgba(0, 0, 0, 0.18); } 433 | .combined-search-page .searchfacets:not(.res-search-pane):before { content: "Filter by sub"; font: normal normal 12px/20px sans-serif; text-align: center; text-transform: uppercase; letter-spacing: 1px; color: #326496; display: block; width: 125px; height: 20px; background: linear-gradient(to bottom, white, gainsboro); left: -53px; top: 52px; position: absolute; cursor: default; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } 434 | .combined-search-page .searchfacets:not(.res-search-pane) h4.title, .combined-search-page .searchfacets:not(.res-search-pane) .list { width: 600px; } 435 | 436 | .searchfacets:not(.res-search-pane) .title { margin: 0; } 437 | 438 | /* .end */ 439 | #REScommentNavToggle { display: inline; padding-left: 1rem; } 440 | #REScommentNavToggle > .commentNavSortType { font-weight: normal; color: #666666; border: none; margin: 0 5px; padding: 0; } 441 | #REScommentNavToggle > span:not(:first-of-type) { display: none; } 442 | 443 | body.moderator #REScommentNavToggle { display: block; padding: 1em 0 0; } 444 | 445 | .infobar { margin: 10px 0; padding: 10px; border-color: #e8d67d; background: #fcf5cf; } 446 | 447 | .RESDialogSmall { z-index: 100 !important; } 448 | 449 | .link.last-clicked { border: none; } 450 | 451 | .nav-buttons { margin: 10px -10px 0 -10px; padding: 20px 10px 10px 10px; border-top: 1px solid #e6e6e6; } 452 | 453 | .nextprev a, .next-suggestions a { display: inline-block; } 454 | 455 | body.with-listing-chooser #header .pagename { position: relative; bottom: auto; } 456 | body.with-listing-chooser .listing-chooser { z-index: 100; border-radius: 0 10px 0 0; } 457 | body.with-listing-chooser #header .tabmenu { margin-left: 0; } 458 | 459 | .icon-menu a { background-color: transparent !important; } 460 | 461 | .side .drop-choices { z-index: 101; } 462 | 463 | .domain { font-family: verdana, sans-serif; color: transparent; vertical-align: middle; } 464 | 465 | .domain a { color: #999999; } 466 | 467 | .domain a:hover { color: #333333; text-decoration: none; } 468 | 469 | body.res > #sr-header-area { background: rgba(0, 0, 0, 0.8); } 470 | 471 | body.pinHeader-sub div#header-bottom-right { top: 22px !important; opacity: .8; } 472 | 473 | body.pinHeader-userbar #header-bottom-right { height: 22px; } 474 | 475 | body.pinHeader-subanduser #header-bottom-right { height: 22px; top: 22px; } 476 | 477 | div.imgCaptions, .md div.imgCaptions { white-space: normal; } 478 | 479 | .entry.RES-keyNav-activeElement, .entry.RES-keyNav-activeElement .md-container { background-color: transparent !important; } 480 | 481 | .entry.RES-keyNav-activeElement .tagline, .thing.morechildren .entry.RES-keyNav-activeElement { color: black; background-color: rgba(0, 0, 0, 0.12) !important; border-radius: 5px; } 482 | 483 | .hover-bubble { border: 1px solid rgba(0, 0, 0, 0.3); box-shadow: 0 0px 8px rgba(0, 0, 0, 0.12), 0 8px 8px 1px rgba(0, 0, 0, 0.18); } 484 | .hover-bubble.multi-selector .title { padding: 5px 12px; } 485 | .hover-bubble.multi-selector strong, .hover-bubble.multi-selector a.sr { font-weight: normal; text-align: left; font-size: 1.2rem; margin: 0; } 486 | .hover-bubble.multi-selector strong { font-size: 1.8rem; line-height: 1.4; text-transform: capitalize; } 487 | .hover-bubble.multi-selector a.sr { display: inline; color: #999999; } 488 | .hover-bubble.multi-selector .throbber { opacity: .2; } 489 | 490 | .create-reddit .linefield:nth-of-type(3) .usertext::before { content: 'h5 followed by "* text" = menu | > = card | [text](/r/a "click") = button'; display: block; margin: 10px -22px; padding: 5px; color: white; font: 1.2rem/1.2 consolas, monospace; background: #4a4950; text-align: center; } 491 | 492 | .livePreview { margin: 7px 0; background-color: white !important; } 493 | 494 | .subreddit-rules-page { max-width: none; } 495 | .subreddit-rules-page .subreddit-rule-item { border-top: 1px solid #e0e0e0; } 496 | .subreddit-rules-page .subreddit-rule-item:hover { background: none; } 497 | .subreddit-rules-page:before { top: auto; } 498 | 499 | #srList { border: none; box-shadow: 0 0px 8px rgba(0, 0, 0, 0.12), 0 8px 8px 1px rgba(0, 0, 0, 0.18); } 500 | 501 | /* addon animate-thumbs */ 502 | .thing:not(.self) .thumbnail:not(.default) img { transition: width .1s, left .1s, top 1s .75s; } 503 | 504 | /* .end */ 505 | /* addon nightmode */ 506 | body.res-nightmode > div.content, body.res-nightmode .side .linkinfo, body.res-nightmode .sidecontentbox, body.res-nightmode .login-form-side, body.res-nightmode .sidebox .spacer, body.res-nightmode .side form.usertext { color: #dedede; border-color: rgba(255, 255, 255, 0.12); background-color: #212121; } 507 | 508 | body.res-nightmode { color: #dedede; background-color: #151515; } 509 | body.res-nightmode #header { background-color: #424242; } 510 | body.res-nightmode #sr-header-area { background: none; } 511 | body.res-nightmode #sr-header-area:hover { background-color: black; } 512 | body.res-nightmode .pagename { opacity: .88; } 513 | body.res-nightmode .livePreview { background-color: #262626 !important; } 514 | body.res-nightmode .link .rank { color: gray; background-color: #151515; } 515 | body.res-nightmode .link div.madeVisible { color: #dedede; background-color: #212121; } 516 | body.res-nightmode .thing .title { color: #dedede; } 517 | body.res-nightmode .thing .title:visited, body.res-nightmode .thing.visited .title, body.res-nightmode .combined-search-page .search-result a:visited, body.res-nightmode .combined-search-page .search-result a:visited > mark { color: #a6a6a6; /* see also styleTweaks.js */ } 518 | body.res-nightmode .tagline, body.res-nightmode .search-result-meta { color: #bfbfbf; } 519 | body.res-nightmode .tagline a, body.res-nightmode .search-result-meta a { color: inherit; } 520 | body.res-nightmode .entry .buttons li a:hover { color: #bfbfbf; } 521 | body.res-nightmode.listing-page .link .entry { border-bottom-color: rgba(255, 255, 255, 0.12); } 522 | body.res-nightmode .entry.RES-keyNav-activeElement .tagline, body.res-nightmode .thing.morechildren .entry.RES-keyNav-activeElement { color: inherit !important; background-color: rgba(255, 255, 255, 0.12) !important; } 523 | body.res-nightmode .RES-keyNav-activeElement > .tagline, body.res-nightmode .RES-keyNav-activeElement .md-container > .md, body.res-nightmode .RES-keyNav-activeElement .md-container > .md p { color: inherit !important; } 524 | body.res-nightmode .sidebox { background: none; } 525 | body.res-nightmode .md a:visited { color: #ad85ad; } 526 | body.res-nightmode .side { color: #dedede; } 527 | body.res-nightmode .side .titlebox, body.res-nightmode .side .content, body.res-nightmode .side .leavemoderator, body.res-nightmode .side .leavecontributor-button { background-color: transparent; } 528 | body.res-nightmode .side .titlebox form.flairtoggle { background-color: transparent; } 529 | body.res-nightmode .side .shortlink input { border-color: rgba(255, 255, 255, 0.1); } 530 | body.res-nightmode .side .md > blockquote { color: white; } 531 | body.res-nightmode .side .md > blockquote a, body.res-nightmode .side .md > blockquote a:visited { color: inherit; } 532 | body.res-nightmode .side .md > blockquote ul, body.res-nightmode .side .md > blockquote ol { background-color: transparent; } 533 | body.res-nightmode .side .md > blockquote li, body.res-nightmode .side .md > blockquote p { color: white; } 534 | body.res-nightmode .side .md ul { color: #dedede; background-color: #212121; } 535 | body.res-nightmode .side .md hr { background: rgba(255, 255, 255, 0.12); } 536 | body.res-nightmode .side .md h5 + ul > li:hover, body.res-nightmode .side .md h5 + ul > li > ul > li:hover > a { background-color: rgba(255, 255, 255, 0.12); } 537 | body.res-nightmode .side .md h5 + ul > li > sup, body.res-nightmode .side .md h5 + ul > li > p sup { background-position: 0px -22px; } 538 | body.res-nightmode .side #search input[type=text] { border-bottom-color: rgba(255, 255, 255, 0.12); } 539 | body.res-nightmode .side #search input[type=submit] { background-position: 9px 9px; } 540 | body.res-nightmode .side #search #searchexpando { background-color: #151515; } 541 | body.res-nightmode .panestack-title, body.res-nightmode .nav-buttons { border-top-color: rgba(255, 255, 255, 0.12); } 542 | body.res-nightmode .flair, body.res-nightmode .linkflairlabel { background-color: transparent; } 543 | body.res-nightmode .linkflairlabel { color: #6a98af; } 544 | body.res-nightmode .RESDropdownList { color: #dedede; background-color: #303030; } 545 | body.res-nightmode .RESDropdownList li, body.res-nightmode .RESDropdownList a, body.res-nightmode .RESDropdownList li:hover a, body.res-nightmode .RESDropdownList a:hover { background: none; } 546 | body.res-nightmode .RESDropdownList li:hover { background: rgba(255, 255, 255, 0.12); } 547 | body.res-nightmode .sidebox:not(.create) .morelink a { color: white; background: rgba(0, 0, 0, 0.8); } 548 | body.res-nightmode .sidebox:not(.create) .morelink a:hover { background: black; } 549 | body.res-nightmode .commentarea .menuarea > div:hover, body.res-nightmode .commentarea .menuarea > div a:hover { color: #dedede; } 550 | body.res-nightmode #REScommentNavToggle > .commentNavSortType { color: gray; } 551 | body.res-nightmode #REScommentNavToggle > .commentNavSortType:hover { color: #dedede; } 552 | body.res-nightmode.combined-search-page .search-result header a, body.res-nightmode.combined-search-page .search-result a > mark { color: #dedede; } 553 | body.res-nightmode.combined-search-page .search-result:hover { background-color: #292929; } 554 | body.res-nightmode.combined-search-page .search-result:not(.search-result-subreddit) > div { border-bottom-color: rgba(255, 255, 255, 0.12); } 555 | body.res-nightmode.combined-search-page .search-result-link .search-expando.collapsed:before { color: gray; border-color: gray; } 556 | body.res-nightmode.combined-search-page .search-result-link .search-result-body { background-color: #303030; } 557 | body.res-nightmode #progressIndicator { color: #dedede; border-color: rgba(255, 255, 255, 0.12); background-color: #424242; } 558 | body.res-nightmode .entry.RES-keyNav-activeElement, body.res-nightmode .entry.RES-keyNav-activeElement .md-container { background-color: transparent !important; } 559 | body.res-nightmode .entry.RES-keyNav-activeElement .tagline, body.res-nightmode .thing.morechildren .entry.RES-keyNav-activeElement { color: #dedede; } 560 | body.res-nightmode .side .subscribe-button a.remove, body.res-nightmode .subButtons .RESshortcut.remove, body.res-nightmode .subButtons .RESDashboardToggle.remove { color: #dedede; } 561 | body.res-nightmode .usertext button:not(.save), body.res-nightmode #url-field button { color: #dedede; } 562 | body.res-nightmode .usertext button:not(.save):hover, body.res-nightmode #url-field button:hover { background-color: rgba(255, 255, 255, 0.12); } 563 | body.res-nightmode .subButtons .RESshortcut:not(.remove), body.res-nightmode .subButtons .RESDashboardToggle:not(.remove) { color: #dedede; background-color: #303030; } 564 | 565 | /* .end */ 566 | 567 | /*# sourceMappingURL=stylesheet.css.map */ 568 | --------------------------------------------------------------------------------