├── .discourse-compatibility ├── .github └── workflows │ └── discourse-theme.yml ├── .gitignore ├── .npmrc ├── .prettierrc.cjs ├── .rubocop.yml ├── .streerc ├── .template-lintrc.cjs ├── Gemfile ├── Gemfile.lock ├── LICENSE ├── README.md ├── about.json ├── assets ├── Assistant-Light.ttf └── vincent-background.svg ├── common ├── common.scss └── header.html ├── eslint.config.mjs ├── package.json ├── pnpm-lock.yaml ├── settings.yml └── spec └── system └── core_features_spec.rb /.discourse-compatibility: -------------------------------------------------------------------------------- 1 | < 3.5.0.beta1-dev: ce15c96843f067f700b9314b81d2f8f83f650b8c 2 | < 3.4.0.beta1-dev: 3e29db3d38e0d2347471aed4f4693faa6c7710ed 3 | < 3.3.0.beta1-dev: 75ede9cfc7c4e402311f17fc0edc0a4866fe478c 4 | 3.1.999: 3a593b0fe53e5996d05ccb149a8719721c1de089 5 | -------------------------------------------------------------------------------- /.github/workflows/discourse-theme.yml: -------------------------------------------------------------------------------- 1 | name: Discourse Theme 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | pull_request: 8 | 9 | jobs: 10 | ci: 11 | uses: discourse/.github/.github/workflows/discourse-theme.yml@v1 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .discourse-site 3 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict = true 2 | auto-install-peers = false 3 | -------------------------------------------------------------------------------- /.prettierrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = require("@discourse/lint-configs/prettier"); 2 | -------------------------------------------------------------------------------- /.rubocop.yml: -------------------------------------------------------------------------------- 1 | inherit_gem: 2 | rubocop-discourse: stree-compat.yml 3 | -------------------------------------------------------------------------------- /.streerc: -------------------------------------------------------------------------------- 1 | --print-width=100 2 | --plugins=plugin/trailing_comma,plugin/disable_auto_ternary 3 | -------------------------------------------------------------------------------- /.template-lintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = require("@discourse/lint-configs/template-lint"); 2 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | source "https://rubygems.org" 4 | 5 | group :development do 6 | gem "rubocop-discourse" 7 | gem "syntax_tree" 8 | end 9 | -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | activesupport (7.2.1.1) 5 | base64 6 | bigdecimal 7 | concurrent-ruby (~> 1.0, >= 1.3.1) 8 | connection_pool (>= 2.2.5) 9 | drb 10 | i18n (>= 1.6, < 2) 11 | logger (>= 1.4.2) 12 | minitest (>= 5.1) 13 | securerandom (>= 0.3) 14 | tzinfo (~> 2.0, >= 2.0.5) 15 | ast (2.4.2) 16 | base64 (0.2.0) 17 | bigdecimal (3.1.8) 18 | concurrent-ruby (1.3.4) 19 | connection_pool (2.4.1) 20 | drb (2.2.1) 21 | i18n (1.14.6) 22 | concurrent-ruby (~> 1.0) 23 | json (2.7.2) 24 | language_server-protocol (3.17.0.3) 25 | logger (1.6.1) 26 | minitest (5.25.1) 27 | parallel (1.26.3) 28 | parser (3.3.5.0) 29 | ast (~> 2.4.1) 30 | racc 31 | prettier_print (1.2.1) 32 | racc (1.8.1) 33 | rack (3.1.10) 34 | rainbow (3.1.1) 35 | regexp_parser (2.9.2) 36 | rubocop (1.67.0) 37 | json (~> 2.3) 38 | language_server-protocol (>= 3.17.0) 39 | parallel (~> 1.10) 40 | parser (>= 3.3.0.2) 41 | rainbow (>= 2.2.2, < 4.0) 42 | regexp_parser (>= 2.4, < 3.0) 43 | rubocop-ast (>= 1.32.2, < 2.0) 44 | ruby-progressbar (~> 1.7) 45 | unicode-display_width (>= 2.4.0, < 3.0) 46 | rubocop-ast (1.32.3) 47 | parser (>= 3.3.1.0) 48 | rubocop-capybara (2.21.0) 49 | rubocop (~> 1.41) 50 | rubocop-discourse (3.8.2) 51 | activesupport (>= 6.1) 52 | rubocop (>= 1.59.0) 53 | rubocop-capybara (>= 2.0.0) 54 | rubocop-factory_bot (>= 2.0.0) 55 | rubocop-rails (>= 2.25.0) 56 | rubocop-rspec (>= 3.0.1) 57 | rubocop-rspec_rails (>= 2.30.0) 58 | rubocop-factory_bot (2.26.1) 59 | rubocop (~> 1.61) 60 | rubocop-rails (2.26.2) 61 | activesupport (>= 4.2.0) 62 | rack (>= 1.1) 63 | rubocop (>= 1.52.0, < 2.0) 64 | rubocop-ast (>= 1.31.1, < 2.0) 65 | rubocop-rspec (3.1.0) 66 | rubocop (~> 1.61) 67 | rubocop-rspec_rails (2.30.0) 68 | rubocop (~> 1.61) 69 | rubocop-rspec (~> 3, >= 3.0.1) 70 | ruby-progressbar (1.13.0) 71 | securerandom (0.3.1) 72 | syntax_tree (6.2.0) 73 | prettier_print (>= 1.2.0) 74 | tzinfo (2.0.6) 75 | concurrent-ruby (~> 1.0) 76 | unicode-display_width (2.6.0) 77 | 78 | PLATFORMS 79 | arm64-darwin-23 80 | ruby 81 | 82 | DEPENDENCIES 83 | rubocop-discourse 84 | syntax_tree 85 | 86 | BUNDLED WITH 87 | 2.5.21 88 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | GNU GENERAL PUBLIC LICENSE 2 | Version 2, June 1991 3 | 4 | Copyright (C) 1989, 1991 Free Software Foundation, Inc., 5 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA 6 | Everyone is permitted to copy and distribute verbatim copies 7 | of this license document, but changing it is not allowed. 8 | 9 | Preamble 10 | 11 | The licenses for most software are designed to take away your 12 | freedom to share and change it. By contrast, the GNU General Public 13 | License is intended to guarantee your freedom to share and change free 14 | software--to make sure the software is free for all its users. This 15 | General Public License applies to most of the Free Software 16 | Foundation's software and to any other program whose authors commit to 17 | using it. (Some other Free Software Foundation software is covered by 18 | the GNU Lesser General Public License instead.) You can apply it to 19 | your programs, too. 20 | 21 | When we speak of free software, we are referring to freedom, not 22 | price. Our General Public Licenses are designed to make sure that you 23 | have the freedom to distribute copies of free software (and charge for 24 | this service if you wish), that you receive source code or can get it 25 | if you want it, that you can change the software or use pieces of it 26 | in new free programs; and that you know you can do these things. 27 | 28 | To protect your rights, we need to make restrictions that forbid 29 | anyone to deny you these rights or to ask you to surrender the rights. 30 | These restrictions translate to certain responsibilities for you if you 31 | distribute copies of the software, or if you modify it. 32 | 33 | For example, if you distribute copies of such a program, whether 34 | gratis or for a fee, you must give the recipients all the rights that 35 | you have. You must make sure that they, too, receive or can get the 36 | source code. And you must show them these terms so they know their 37 | rights. 38 | 39 | We protect your rights with two steps: (1) copyright the software, and 40 | (2) offer you this license which gives you legal permission to copy, 41 | distribute and/or modify the software. 42 | 43 | Also, for each author's protection and ours, we want to make certain 44 | that everyone understands that there is no warranty for this free 45 | software. If the software is modified by someone else and passed on, we 46 | want its recipients to know that what they have is not the original, so 47 | that any problems introduced by others will not reflect on the original 48 | authors' reputations. 49 | 50 | Finally, any free program is threatened constantly by software 51 | patents. We wish to avoid the danger that redistributors of a free 52 | program will individually obtain patent licenses, in effect making the 53 | program proprietary. To prevent this, we have made it clear that any 54 | patent must be licensed for everyone's free use or not licensed at all. 55 | 56 | The precise terms and conditions for copying, distribution and 57 | modification follow. 58 | 59 | GNU GENERAL PUBLIC LICENSE 60 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 61 | 62 | 0. This License applies to any program or other work which contains 63 | a notice placed by the copyright holder saying it may be distributed 64 | under the terms of this General Public License. The "Program", below, 65 | refers to any such program or work, and a "work based on the Program" 66 | means either the Program or any derivative work under copyright law: 67 | that is to say, a work containing the Program or a portion of it, 68 | either verbatim or with modifications and/or translated into another 69 | language. (Hereinafter, translation is included without limitation in 70 | the term "modification".) Each licensee is addressed as "you". 71 | 72 | Activities other than copying, distribution and modification are not 73 | covered by this License; they are outside its scope. The act of 74 | running the Program is not restricted, and the output from the Program 75 | is covered only if its contents constitute a work based on the 76 | Program (independent of having been made by running the Program). 77 | Whether that is true depends on what the Program does. 78 | 79 | 1. You may copy and distribute verbatim copies of the Program's 80 | source code as you receive it, in any medium, provided that you 81 | conspicuously and appropriately publish on each copy an appropriate 82 | copyright notice and disclaimer of warranty; keep intact all the 83 | notices that refer to this License and to the absence of any warranty; 84 | and give any other recipients of the Program a copy of this License 85 | along with the Program. 86 | 87 | You may charge a fee for the physical act of transferring a copy, and 88 | you may at your option offer warranty protection in exchange for a fee. 89 | 90 | 2. You may modify your copy or copies of the Program or any portion 91 | of it, thus forming a work based on the Program, and copy and 92 | distribute such modifications or work under the terms of Section 1 93 | above, provided that you also meet all of these conditions: 94 | 95 | a) You must cause the modified files to carry prominent notices 96 | stating that you changed the files and the date of any change. 97 | 98 | b) You must cause any work that you distribute or publish, that in 99 | whole or in part contains or is derived from the Program or any 100 | part thereof, to be licensed as a whole at no charge to all third 101 | parties under the terms of this License. 102 | 103 | c) If the modified program normally reads commands interactively 104 | when run, you must cause it, when started running for such 105 | interactive use in the most ordinary way, to print or display an 106 | announcement including an appropriate copyright notice and a 107 | notice that there is no warranty (or else, saying that you provide 108 | a warranty) and that users may redistribute the program under 109 | these conditions, and telling the user how to view a copy of this 110 | License. (Exception: if the Program itself is interactive but 111 | does not normally print such an announcement, your work based on 112 | the Program is not required to print an announcement.) 113 | 114 | These requirements apply to the modified work as a whole. If 115 | identifiable sections of that work are not derived from the Program, 116 | and can be reasonably considered independent and separate works in 117 | themselves, then this License, and its terms, do not apply to those 118 | sections when you distribute them as separate works. But when you 119 | distribute the same sections as part of a whole which is a work based 120 | on the Program, the distribution of the whole must be on the terms of 121 | this License, whose permissions for other licensees extend to the 122 | entire whole, and thus to each and every part regardless of who wrote it. 123 | 124 | Thus, it is not the intent of this section to claim rights or contest 125 | your rights to work written entirely by you; rather, the intent is to 126 | exercise the right to control the distribution of derivative or 127 | collective works based on the Program. 128 | 129 | In addition, mere aggregation of another work not based on the Program 130 | with the Program (or with a work based on the Program) on a volume of 131 | a storage or distribution medium does not bring the other work under 132 | the scope of this License. 133 | 134 | 3. You may copy and distribute the Program (or a work based on it, 135 | under Section 2) in object code or executable form under the terms of 136 | Sections 1 and 2 above provided that you also do one of the following: 137 | 138 | a) Accompany it with the complete corresponding machine-readable 139 | source code, which must be distributed under the terms of Sections 140 | 1 and 2 above on a medium customarily used for software interchange; or, 141 | 142 | b) Accompany it with a written offer, valid for at least three 143 | years, to give any third party, for a charge no more than your 144 | cost of physically performing source distribution, a complete 145 | machine-readable copy of the corresponding source code, to be 146 | distributed under the terms of Sections 1 and 2 above on a medium 147 | customarily used for software interchange; or, 148 | 149 | c) Accompany it with the information you received as to the offer 150 | to distribute corresponding source code. (This alternative is 151 | allowed only for noncommercial distribution and only if you 152 | received the program in object code or executable form with such 153 | an offer, in accord with Subsection b above.) 154 | 155 | The source code for a work means the preferred form of the work for 156 | making modifications to it. For an executable work, complete source 157 | code means all the source code for all modules it contains, plus any 158 | associated interface definition files, plus the scripts used to 159 | control compilation and installation of the executable. However, as a 160 | special exception, the source code distributed need not include 161 | anything that is normally distributed (in either source or binary 162 | form) with the major components (compiler, kernel, and so on) of the 163 | operating system on which the executable runs, unless that component 164 | itself accompanies the executable. 165 | 166 | If distribution of executable or object code is made by offering 167 | access to copy from a designated place, then offering equivalent 168 | access to copy the source code from the same place counts as 169 | distribution of the source code, even though third parties are not 170 | compelled to copy the source along with the object code. 171 | 172 | 4. You may not copy, modify, sublicense, or distribute the Program 173 | except as expressly provided under this License. Any attempt 174 | otherwise to copy, modify, sublicense or distribute the Program is 175 | void, and will automatically terminate your rights under this License. 176 | However, parties who have received copies, or rights, from you under 177 | this License will not have their licenses terminated so long as such 178 | parties remain in full compliance. 179 | 180 | 5. You are not required to accept this License, since you have not 181 | signed it. However, nothing else grants you permission to modify or 182 | distribute the Program or its derivative works. These actions are 183 | prohibited by law if you do not accept this License. Therefore, by 184 | modifying or distributing the Program (or any work based on the 185 | Program), you indicate your acceptance of this License to do so, and 186 | all its terms and conditions for copying, distributing or modifying 187 | the Program or works based on it. 188 | 189 | 6. Each time you redistribute the Program (or any work based on the 190 | Program), the recipient automatically receives a license from the 191 | original licensor to copy, distribute or modify the Program subject to 192 | these terms and conditions. You may not impose any further 193 | restrictions on the recipients' exercise of the rights granted herein. 194 | You are not responsible for enforcing compliance by third parties to 195 | this License. 196 | 197 | 7. If, as a consequence of a court judgment or allegation of patent 198 | infringement or for any other reason (not limited to patent issues), 199 | conditions are imposed on you (whether by court order, agreement or 200 | otherwise) that contradict the conditions of this License, they do not 201 | excuse you from the conditions of this License. If you cannot 202 | distribute so as to satisfy simultaneously your obligations under this 203 | License and any other pertinent obligations, then as a consequence you 204 | may not distribute the Program at all. For example, if a patent 205 | license would not permit royalty-free redistribution of the Program by 206 | all those who receive copies directly or indirectly through you, then 207 | the only way you could satisfy both it and this License would be to 208 | refrain entirely from distribution of the Program. 209 | 210 | If any portion of this section is held invalid or unenforceable under 211 | any particular circumstance, the balance of the section is intended to 212 | apply and the section as a whole is intended to apply in other 213 | circumstances. 214 | 215 | It is not the purpose of this section to induce you to infringe any 216 | patents or other property right claims or to contest validity of any 217 | such claims; this section has the sole purpose of protecting the 218 | integrity of the free software distribution system, which is 219 | implemented by public license practices. Many people have made 220 | generous contributions to the wide range of software distributed 221 | through that system in reliance on consistent application of that 222 | system; it is up to the author/donor to decide if he or she is willing 223 | to distribute software through any other system and a licensee cannot 224 | impose that choice. 225 | 226 | This section is intended to make thoroughly clear what is believed to 227 | be a consequence of the rest of this License. 228 | 229 | 8. If the distribution and/or use of the Program is restricted in 230 | certain countries either by patents or by copyrighted interfaces, the 231 | original copyright holder who places the Program under this License 232 | may add an explicit geographical distribution limitation excluding 233 | those countries, so that distribution is permitted only in or among 234 | countries not thus excluded. In such case, this License incorporates 235 | the limitation as if written in the body of this License. 236 | 237 | 9. The Free Software Foundation may publish revised and/or new versions 238 | of the General Public License from time to time. Such new versions will 239 | be similar in spirit to the present version, but may differ in detail to 240 | address new problems or concerns. 241 | 242 | Each version is given a distinguishing version number. If the Program 243 | specifies a version number of this License which applies to it and "any 244 | later version", you have the option of following the terms and conditions 245 | either of that version or of any later version published by the Free 246 | Software Foundation. If the Program does not specify a version number of 247 | this License, you may choose any version ever published by the Free Software 248 | Foundation. 249 | 250 | 10. If you wish to incorporate parts of the Program into other free 251 | programs whose distribution conditions are different, write to the author 252 | to ask for permission. For software which is copyrighted by the Free 253 | Software Foundation, write to the Free Software Foundation; we sometimes 254 | make exceptions for this. Our decision will be guided by the two goals 255 | of preserving the free status of all derivatives of our free software and 256 | of promoting the sharing and reuse of software generally. 257 | 258 | NO WARRANTY 259 | 260 | 11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY 261 | FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN 262 | OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES 263 | PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED 264 | OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF 265 | MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS 266 | TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE 267 | PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, 268 | REPAIR OR CORRECTION. 269 | 270 | 12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 271 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR 272 | REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, 273 | INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING 274 | OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED 275 | TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY 276 | YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER 277 | PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE 278 | POSSIBILITY OF SUCH DAMAGES. 279 | 280 | END OF TERMS AND CONDITIONS 281 | 282 | How to Apply These Terms to Your New Programs 283 | 284 | If you develop a new program, and you want it to be of the greatest 285 | possible use to the public, the best way to achieve this is to make it 286 | free software which everyone can redistribute and change under these terms. 287 | 288 | To do so, attach the following notices to the program. It is safest 289 | to attach them to the start of each source file to most effectively 290 | convey the exclusion of warranty; and each file should have at least 291 | the "copyright" line and a pointer to where the full notice is found. 292 | 293 | 294 | Copyright (C) 295 | 296 | This program is free software; you can redistribute it and/or modify 297 | it under the terms of the GNU General Public License as published by 298 | the Free Software Foundation; either version 2 of the License, or 299 | (at your option) any later version. 300 | 301 | This program is distributed in the hope that it will be useful, 302 | but WITHOUT ANY WARRANTY; without even the implied warranty of 303 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 304 | GNU General Public License for more details. 305 | 306 | You should have received a copy of the GNU General Public License along 307 | with this program; if not, write to the Free Software Foundation, Inc., 308 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. 309 | 310 | Also add information on how to contact you by electronic and paper mail. 311 | 312 | If the program is interactive, make it output a short notice like this 313 | when it starts in an interactive mode: 314 | 315 | Gnomovision version 69, Copyright (C) year name of author 316 | Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'. 317 | This is free software, and you are welcome to redistribute it 318 | under certain conditions; type `show c' for details. 319 | 320 | The hypothetical commands `show w' and `show c' should show the appropriate 321 | parts of the General Public License. Of course, the commands you use may 322 | be called something other than `show w' and `show c'; they could even be 323 | mouse-clicks or menu items--whatever suits your program. 324 | 325 | You should also get your employer (if you work as a programmer) or your 326 | school, if any, to sign a "copyright disclaimer" for the program, if 327 | necessary. Here is a sample; alter the names: 328 | 329 | Yoyodyne, Inc., hereby disclaims all copyright interest in the program 330 | `Gnomovision' (which makes passes at compilers) written by James Hacker. 331 | 332 | , 1 April 1989 333 | Ty Coon, President of Vice 334 | 335 | This General Public License does not permit incorporating your program into 336 | proprietary programs. If your program is a subroutine library, you may 337 | consider it more useful to permit linking proprietary applications with the 338 | library. If this is what you want to do, use the GNU Lesser General 339 | Public License instead of this License. 340 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Discourse Vincent theme v0.77 beta 2 | 3 | More information https://meta.discourse.org/t/76662/ 4 | -------------------------------------------------------------------------------- /about.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Vincent", 3 | "about_url": "https://meta.discourse.org/t/76662", 4 | "license_url": "https://github.com/discourse/discourse-vincent-theme/blob/main/LICENSE", 5 | "assets": { 6 | "vincent-background": "assets/vincent-background.svg", 7 | "assistant-light": "assets/Assistant-Light.ttf" 8 | }, 9 | "color_schemes": { 10 | "Vincent Dark": { 11 | "primary": "cccccc", 12 | "secondary": "111111", 13 | "tertiary": "009dd8", 14 | "quaternary": "9E9E9E", 15 | "header_background": "131418", 16 | "header_primary": "cccccc", 17 | "highlight": "9E9E9E", 18 | "danger": "96000e", 19 | "success": "1ca551", 20 | "love": "f50057" 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /assets/Assistant-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/discourse/discourse-vincent-theme/9251466d1548a141348082ca75181fd6e4843131/assets/Assistant-Light.ttf -------------------------------------------------------------------------------- /assets/vincent-background.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /common/common.scss: -------------------------------------------------------------------------------- 1 | // functions -------------------------------------------------------------------------------- 2 | 3 | // Calculate brightness value 4 | @function brightness($color) { 5 | @return (red($color) + green($color) + blue($color)) / (255 * 3); 6 | } 7 | 8 | // to base color 9 | @function brightness_ratio($base, $color) { 10 | @return abs(brightness($base) - brightness($color)); 11 | } 12 | 13 | // Compare colors to higher contrast 14 | @function contrast($base, $color1: white, $color2: black) { 15 | @return if( 16 | brightness_ratio($base, $color1) > brightness_ratio($base, $color2), 17 | $color1, 18 | $color2 19 | ); 20 | } 21 | 22 | // Compare colors to lower contrast (inverting the former contrast function) 23 | @function invert-contrast($base, $color1: white, $color2: black) { 24 | @return if( 25 | brightness_ratio($base, $color1) > brightness_ratio($base, $color2), 26 | $color2, 27 | $color1 28 | ); 29 | } 30 | 31 | // reverse lightness 32 | @function reverse-lightness($color) { 33 | $result: 0; 34 | $value: lightness($color); 35 | @if $value >= 50 { 36 | $result: scale-color($color, $lightness: -$value); 37 | } @else { 38 | $result: scale-color($color, $lightness: 100% - $value); 39 | } 40 | @return $result; 41 | } 42 | 43 | // Variables --------------------------------------------------------------------------------- 44 | 45 | /* 46 | $primary 47 | $secondary 48 | $tertiary 49 | $quaternary 50 | $header_background 51 | $header_primary 52 | $highlight 53 | $danger 54 | $success 55 | $love 56 | */ 57 | 58 | $n: none; 59 | $i: !important; 60 | 61 | // Basics ------------------------------- 62 | 63 | $v-font-weight: 300 !default; 64 | $v-font-size: 1.1em !default; 65 | $v-theme-background: null; 66 | @if ($theme_background == "") { 67 | $v-theme-background: url(#{$vincent-background}) !default; 68 | } @else { 69 | $v-theme-background: url(#{$theme_background}) !default; 70 | } 71 | 72 | $v-hue: 0 !default; 73 | $v-saturation: -25 !default; 74 | $v-lightness: 0 !default; 75 | $V-page-max-width: 95vw !default; 76 | 77 | // palette colors ------------------------------- 78 | 79 | $theme-base: hsl( 80 | hue($tertiary) + $v-hue, 81 | saturation($tertiary) + $v-saturation, 82 | lightness($tertiary) + $v-lightness 83 | ) !default; 84 | $theme-trim: $quaternary !default; 85 | 86 | $main-background: rgba($header_background, 0.9) !default; 87 | $secondary-background: rgba($main-background, 0.5) !default; 88 | $tertiary-background: rgba($main-background, 0.8) !default; 89 | $text-base: reverse-lightness($secondary) !default; 90 | $trim-background: rgba($text-base, 0.1) !default; 91 | $border-color: desaturate($trim-background, 100%) !default; 92 | $highlight-color: rgba($text-base, 0.25) !default; 93 | $link-color: lighten($theme-base, 25%) !default; 94 | 95 | // settings ------------------------------- 96 | 97 | $body-background-pattern-opacity: 0.25 !default; 98 | $body-background-gradient-opacity: 0.45 !default; 99 | $body-gradient-color-first: adjust-hue($theme-base, -23deg); 100 | $body-gradient-color-second: adjust-hue($theme-base, 15); 101 | $highlight-speed: #{$highlight_duration}s !default; 102 | $button-text-case: #{$button_text_case} !default; 103 | 104 | // fonts -------------------------------------------------------------------------------------- 105 | 106 | @font-face { 107 | font-family: "Assistant"; 108 | src: url($assistant-light); 109 | font-weight: bold; 110 | } 111 | 112 | html { 113 | font-family: "Assistant", sans-serif; 114 | background: #222; 115 | font-size: 15px; 116 | } 117 | 118 | body, 119 | h1, 120 | h2, 121 | h3, 122 | h4, 123 | h5, 124 | h6 { 125 | font-weight: $v-font-weight; 126 | } 127 | 128 | .cooked { 129 | font-size: $v-font-size; 130 | line-height: 1.65; 131 | letter-spacing: 0.3px; 132 | font-variant-ligatures: no-common-ligatures; 133 | -webkit-font-smoothing: subpixel-antialiased; 134 | -moz-osx-font-smoothing: grayscale; 135 | } 136 | 137 | a { 138 | font-size: 90%; 139 | } 140 | 141 | .cooked { 142 | p, 143 | ul, 144 | ol { 145 | -webkit-text-stroke: 0.2px hsla(0, 0%, 50%, 1); 146 | color: desaturate( 147 | darken(reverse-lightness(rgba($main-background, 1)), 32%), 148 | 100% 149 | ); 150 | 151 | a { 152 | -webkit-text-stroke: 0; 153 | } 154 | } 155 | 156 | h1, 157 | h2, 158 | h3, 159 | h4, 160 | h5, 161 | h6 { 162 | color: desaturate( 163 | darken(reverse-lightness(rgba($main-background, 1)), 24%), 164 | 100% 165 | ); 166 | } 167 | } 168 | 169 | .user-navigation .nav-stacked a.active { 170 | font-weight: normal; 171 | } 172 | 173 | #banner #banner-content span { 174 | text-decoration: none; 175 | } 176 | 177 | .main-content .nav-drop .selected-nav-item { 178 | line-height: 30px; 179 | height: 30px; 180 | } 181 | 182 | .user-badge, 183 | #user-card.show-badges .more-user-badges { 184 | line-height: 19px; 185 | } 186 | 187 | i, 188 | cite, 189 | em, 190 | var, 191 | address, 192 | dfn, 193 | strong { 194 | font-size: 90%; 195 | -webkit-text-stroke: none; 196 | } 197 | 198 | #login-buttons button { 199 | font-size: 1em; 200 | } 201 | 202 | // Reset ------------------------------------------------------------------------------------ 203 | 204 | .topic-list .posters, 205 | input { 206 | box-sizing: content-box; 207 | } 208 | 209 | #topic-title .title-wrapper, 210 | #topic-footer-buttons, 211 | .embedded-posts.top, 212 | #main-outlet, 213 | .user-table { 214 | box-sizing: border-box; 215 | } 216 | 217 | body, 218 | html { 219 | margin: 0; 220 | padding: 0; 221 | } 222 | 223 | * { 224 | outline-color: darken($theme-base, 15%) $i; 225 | } 226 | 227 | // colors ------------------------------------------------------------------------------------- 228 | 229 | // color text base ----------------------------- 230 | 231 | .badge-notification, 232 | .category-list .topics .badge-notification, 233 | .category-list .category .badge-notification, 234 | .timeline-container .topic-timeline .timeline-handle, 235 | .media .media-left img, 236 | .modal-dialog .modal-content, 237 | .modal-dialog.cascading-modal .modal-header, 238 | .nav-pills > li.active > a, 239 | .layouts-nav-button > li.active > a, 240 | .nav-pills > li > a.active, 241 | .layouts-nav-button > li > a.active, 242 | .open .grippie, 243 | .badge-notification.new-posts, 244 | .badge-notification.unread-posts, 245 | .admin-controls .nav.nav-pills li.active a, 246 | #user-card .card-content, 247 | .user-nav, 248 | .badge-notification.clicks, 249 | span.helpful-flags, 250 | span.flagged-posts, 251 | span.deleted-posts, 252 | .modal.history-modal del, 253 | .nav-stacked li a, 254 | .timeline-container .topic-timeline .timeline-handle, 255 | .media .media-left img, 256 | .modal-dialog .modal-content, 257 | .modal-dialog.cascading-modal .modal-header, 258 | .nav-pills > li.active > a, 259 | .layouts-nav-button > li.active > a, 260 | .nav-pills > li > a.active, 261 | .layouts-nav-button > li > a.active, 262 | .open .grippie, 263 | .badge-notification.new-posts, 264 | .badge-notification.unread-posts, 265 | .admin-controls .nav.nav-pills li.active a, 266 | #reply-control.draft, 267 | #reply-control.saving, 268 | .topic-post.deleted .topic-meta-data span, 269 | .topic-post.deleted .topic-meta-data a { 270 | color: $text-base; 271 | } 272 | 273 | .list-cell, 274 | .table-heading, 275 | .category-list td, 276 | .category-list th, 277 | .latest-topic-list .table-heading, 278 | .settings .setting .desc, 279 | #topic-footer-buttons p, 280 | .small-action .small-action-desc.timegap, 281 | .links-section .domain, 282 | .top-sub-section .topic-info, 283 | .user-main .staff-counters, 284 | .topic-list .topic-list-item-separator .topic-list-data span, 285 | nav.post-controls .highlight-action, 286 | .gap, 287 | .period-chooser .top-date-string, 288 | .small-action .small-action-desc, 289 | .small-action .topic-avatar i { 290 | color: darken($text-base, 30%); 291 | } 292 | 293 | // backgrounds -------------------------------------------------------------------------------- 294 | 295 | // background theme base ------------------------- 296 | 297 | .media .media-left img, 298 | .modal-dialog .modal-content, 299 | .modal-dialog.cascading-modal .modal-header, 300 | .open .grippie, 301 | .badge-notification.new-posts, 302 | .badge-notification.unread-posts, 303 | #reply-control.draft, 304 | #reply-control.saving { 305 | background: mix($theme-base, $header_background, 75%); 306 | color: contrast(mix($theme-base, $header_background, 75%)); 307 | } 308 | 309 | // background main background ------------------ 310 | 311 | .user-table, 312 | .badge-card, 313 | ul.general, 314 | .boxed.white, 315 | .alert.alert-info, 316 | .body-page, 317 | .topic-list, 318 | .topic-list .topic-list-body .topic-list-item:nth-of-type(even), 319 | .category-list, 320 | .category-list .topic-list-body .topic-list-item:nth-of-type(even), 321 | .search-container, 322 | .search-advanced-options, 323 | .user-stream-item.item, 324 | tr.topic-list-item-separator + .topic-list-item + .topic-list-item, 325 | .category-boxes .category-box-inner, 326 | .category-boxes-with-topics .category-box-inner, 327 | .list-controls, 328 | .top-lists, 329 | .topic-list-bottom, 330 | .full-width > ul.nav.nav-pills, 331 | #banner, 332 | .latest-topic-list-item:nth-of-type(odd), 333 | .latest-topic-list, 334 | .top-topic-list, 335 | .offset2 .cooked, 336 | #user-card .card-content, 337 | .user-nav, 338 | .user-main .staff-counters { 339 | background: $main-background; 340 | color: darken(desaturate(reverse-lightness($main-background), 100%), 10%); 341 | } 342 | 343 | .topic-meta-data, 344 | .topic-map, 345 | .reply .topic-meta-data, 346 | .deleted section.embedded-posts .topic-meta-data { 347 | background: $tertiary-background; 348 | color: desaturate(reverse-lightness($tertiary-background), 100%); 349 | } 350 | 351 | // background secondary background -------------- 352 | 353 | .admin-controls, 354 | section.embedded-posts { 355 | background: $secondary-background; 356 | color: desaturate(reverse-lightness($secondary-background), 100%); 357 | } 358 | 359 | // background custom background ----------------- 360 | 361 | .topic-post.deleted .topic-meta-data { 362 | background: rgba($danger, 0.8); 363 | } 364 | 365 | button.ok:hover { 366 | background: $success; 367 | } 368 | 369 | // background none ------------------------------ 370 | 371 | .nav-pills > li:not(.active) > a:hover, 372 | .layouts-nav-button > li > a:hover, 373 | .topic-body .reply-to-tab, 374 | .list-controls a, 375 | .d-header-icons a.icon, 376 | .avatar-wrapper, 377 | .user-navigation .nav-stacked a, 378 | .user-content, 379 | .main-content .nav-drop .nav-dropdown-menu a:hover, 380 | .list-controls .category-dropdown-menu a:hover, 381 | .list-controls .category-dropdown-menu a:hover, 382 | .select-kit.combo-box.tag-drop .tag-drop-header, 383 | .select-kit.combo-box.category-drop .category-drop-header, 384 | li.toggle-maximize a, 385 | a.mention, 386 | a.mention-group, 387 | .user-badge, 388 | #user-card.show-badges .more-user-badges, 389 | .list-controls .category-breadcrumb li.bullet > .dropdown-header, 390 | .menu-links-header a:hover, 391 | .extra-info-wrapper .discourse-tag, 392 | .d-header-icons .icon:hover, 393 | .d-header-icons .icon:active, 394 | .widget-container, 395 | tr.topic-list-item-separator + .topic-list-item, 396 | .deleted .topic-body, 397 | .topic-map .buttons .btn { 398 | background: $n; 399 | } 400 | 401 | // borders ---------------------------------------------------------------------------------- 402 | 403 | // border border none --------------------------- 404 | 405 | .main-content.nav-menu-enabled .list-controls, 406 | div.menu-links-header a, 407 | .user-main .about.collapsed-info .details, 408 | .user-main .about .secondary, 409 | .user-badge, 410 | #user-card.show-badges .more-user-badges, 411 | .d-editor-button-bar button, 412 | .topic-list-item, 413 | .topic-title, 414 | .topic-post article.boxed, 415 | .user-stream .item, 416 | .user-stream .user-stream-item, 417 | .d-header img.avatar, 418 | .topic-status-info, 419 | .main-content .list-controls, 420 | .main-content.nav-menu-enabled .list-controls, 421 | .main-content.has-sidebars .container.list-container, 422 | img.avatar, 423 | .topic-status-info, 424 | .topic-avatar, 425 | .topic-body, 426 | .topic-map, 427 | .topic-map section, 428 | .embedded-posts .topic-body, 429 | .embedded-posts .row, 430 | .topic-map .buttons .btn, 431 | .topic-post, 432 | .select-kit.combo-box.tag-drop .tag-drop-header, 433 | .select-kit.combo-box.category-drop .category-drop-header { 434 | border: $n $i; 435 | } 436 | 437 | // border border 1px ---------------------------- 438 | 439 | .menu-panel, 440 | #share-link.visible, 441 | .admin-controls, 442 | .user-stream .item, 443 | .user-stream .user-stream-item, 444 | #user-card .card-content, 445 | #user-card.show-badges .badge-section .user-badge, 446 | #user-card.show-badges .badge-section .more-user-badges, 447 | .badge-card .badge-contents, 448 | nav.post-controls .post-admin-menu, 449 | .badges .content-list ul li { 450 | border: 1px solid; 451 | } 452 | 453 | // border border-top ------------------------------ 454 | 455 | hr, 456 | .post-links-container .post-links, 457 | .admin-contents table td, 458 | .reply > .row, 459 | .category-list tbody tr:first-of-type, 460 | .reply .topic-body, 461 | .small-action { 462 | border-top: 1px solid; 463 | } 464 | 465 | // border border-bottom --------------------------- 466 | 467 | .topic-list .topic-list-item-separator .topic-list-data, 468 | .nav-stacked li, 469 | .admin-contents table td, 470 | .table-heading, 471 | .reply .topic-body { 472 | border-bottom: 1px solid; 473 | } 474 | 475 | // border border-color ---------------------------- 476 | 477 | img.avatar, 478 | .menu-panel, 479 | #share-link.visible, 480 | .topic-list .topic-list-item-separator .topic-list-data, 481 | .admin-controls, 482 | .topic-status-info, 483 | .admin-controls .nav.nav-pills li.active a, 484 | hr, 485 | .nav-stacked li, 486 | .post-links-container .post-links, 487 | .user-stream .item, 488 | .user-stream .user-stream-item, 489 | #user-card .card-content, 490 | #user-card.show-badges .badge-section .user-badge, 491 | #user-card.show-badges .badge-section .more-user-badges, 492 | .badge-card .badge-contents, 493 | nav.post-controls .post-admin-menu, 494 | .badges .content-list ul li, 495 | .admin-contents table td, 496 | .reply, 497 | .admin-list-item, 498 | section.about table td, 499 | section.about table th, 500 | .display-row, 501 | .search-advanced-options, 502 | .user-stream-item.item, 503 | .category-boxes .category-box-inner, 504 | .category-boxes-with-topics .category-box-inner, 505 | .category-list tbody tr, 506 | .reply > .row, 507 | .category-list tbody tr:first-of-type, 508 | .reply .topic-body, 509 | .small-action, 510 | .category-list tbody tr, 511 | .latest-topic-list-item, 512 | .table-heading, 513 | .reply .topic-body, 514 | .topic-meta-data, 515 | .latest-topic-list-item, 516 | .category-list tbody tr, 517 | .popup-menu { 518 | border-color: $border-color $i; 519 | } 520 | 521 | // border custom borders --------------------------- 522 | 523 | img.avatar, 524 | .docked .d-header { 525 | border-bottom: $n; 526 | } 527 | 528 | .drop-down-visible .d-header-icons .active .icon:after, 529 | #reply-control.closed { 530 | border-top: $n; 531 | } 532 | 533 | .user-right .topic-list-item { 534 | border-right: $n; 535 | } 536 | 537 | .admin-detail { 538 | border-left: solid 1px $border-color; 539 | } 540 | 541 | .category-boxes .category-box-inner, 542 | .category-boxes-with-topics .category-box-inner { 543 | border-width: 1px; 544 | } 545 | 546 | // Margins ------------------------------------------------------------------------------------ 547 | 548 | // 0 auto ------------------------------------------ 549 | 550 | .main-content, 551 | img.avatar, 552 | td.main-link .topic-thumbnail, 553 | td.main-link .topic-title, 554 | #topic-footer-buttons, 555 | .main-content .regular, 556 | #topic-title, 557 | .alert, 558 | #topic-title .title-wrapper, 559 | #topic-footer-buttons { 560 | margin: 0 auto; 561 | } 562 | 563 | // margin zero -------------------------------------- 564 | 565 | .topic-list-item, 566 | #list-area, 567 | .topic-meta-data, 568 | .extra-info-wrapper .topic-header-extra, 569 | .show-more.has-topics .alert, 570 | #post_1 .post-actions, 571 | ol.category-breadcrumb { 572 | margin: 0; 573 | } 574 | 575 | // margin small all sides --------------------------- 576 | 577 | .topic-avatar { 578 | margin: 0.5em; 579 | } 580 | 581 | // margin large all sides --------------------------- 582 | 583 | .badges .content-list ul li, 584 | .user-main .about .details img.avatar, 585 | .user-main .about .details .primary h1, 586 | .user-stream-item.item { 587 | margin: 1em; 588 | } 589 | 590 | // margin Large on side only ------------------------ 591 | 592 | .user-main .about .secondary dd, 593 | .main-content { 594 | margin: 0 1em; 595 | } 596 | 597 | // up-down medium only ------------------------------ 598 | 599 | .top-title-buttons, 600 | .user-stream .excerpt, 601 | .alert, 602 | .topic-post article.boxed, 603 | .admin-controls { 604 | margin: 0.75em 0; 605 | } 606 | 607 | // up-down large only ------------------------------ 608 | 609 | .list-controls, 610 | .top-lists, 611 | .topic-list-bottom { 612 | margin: 1em 0; 613 | } 614 | 615 | // Top zero ----------------------------------------- 616 | 617 | .user-main .about.collapsed-info .details, 618 | #user-card .user-card-avatar, 619 | .top-lists, 620 | .user-table, 621 | .topic-map, 622 | .embedded-posts .cooked, 623 | .topic-body .regular, 624 | section.post-menu-area, 625 | .post-links-container .post-links { 626 | margin-top: 0; 627 | } 628 | 629 | // margin custom margin ----------------------------- 630 | 631 | .list-controls .btn, 632 | .list-controls .nav, 633 | section.post-menu-area { 634 | margin-bottom: 0; 635 | } 636 | 637 | .boxed.white { 638 | margin-bottom: 10em; 639 | } 640 | 641 | .desc { 642 | margin-top: 4px; 643 | } 644 | 645 | #user-card .user-card-avatar { 646 | margin-right: 0.5em; 647 | } 648 | 649 | .extra-info-wrapper .badge-wrapper.bullet { 650 | margin-top: 2px; 651 | } 652 | 653 | ul.subcat-list, 654 | .topic-users { 655 | margin-left: 1em; 656 | } 657 | 658 | #reply-control #reply-title { 659 | margin-bottom: 10px; 660 | } 661 | 662 | .topic-map .avatar { 663 | margin-right: 4px; 664 | } 665 | 666 | .user-nav { 667 | margin: 10px 0; 668 | } 669 | 670 | .signup-cta .buttons, 671 | .topic-area .presence-users { 672 | margin-bottom: 1em; 673 | } 674 | 675 | .topic-avatar, 676 | .offset2 .topic-avatar { 677 | margin-left: 0; 678 | margin-top: 0; 679 | } 680 | 681 | .post-links-container ul li { 682 | margin-bottom: 0.5em; 683 | } 684 | 685 | .categories-list .category-list { 686 | margin-left: 0; 687 | } 688 | 689 | .cooked li { 690 | margin: 0.5em 0; 691 | } 692 | 693 | // padding ------------------------------------------------------------------------------------ 694 | 695 | // padding zero ------------------------------------- 696 | 697 | .topic-users > .inline, 698 | a.mention, 699 | a.mention-group, 700 | .cooked .lightbox-wrapper, 701 | .topic-post article.boxed, 702 | .topic-avatar, 703 | .topic-body, 704 | .embedded-posts.bottom .row, 705 | .boxed .contents, 706 | .topic-post.deleted section.post-actions .post-action { 707 | padding: 0; 708 | } 709 | 710 | // Top zero ----------------------------------------- 711 | 712 | .topic-list-item, 713 | .sidebar-container .sidebar-content > div, 714 | .extra-info-wrapper .topic-header-extra { 715 | padding-top: 0; 716 | } 717 | 718 | // padding small all sides ------------------------- 719 | 720 | .topic-area .presence-users { 721 | padding: 0.5em; 722 | } 723 | 724 | // padding medium all sides ------------------------- 725 | 726 | .user-badge, 727 | #user-card.show-badges .more-user-badges, 728 | .topic-list-item, 729 | .badge-info, 730 | .top-lists, 731 | .topic-list-bottom { 732 | padding: 0.75em; 733 | } 734 | 735 | // padding large all sides --------------------------- 736 | 737 | .topic-list-item, 738 | .user-stream .item, 739 | .user-stream .user-stream-item, 740 | .user-table, 741 | .user-main .about.collapsed-info .details, 742 | #user-card .card-content, 743 | .body-page, 744 | .search-container, 745 | .search-advanced-options, 746 | #topic-title .title-wrapper { 747 | padding: 1em; 748 | } 749 | 750 | // padding x-Large on sides only ---------------------- 751 | 752 | .topic-list .topic-list-item-separator .topic-list-data span, 753 | .main-content .nav-drop .selected-nav-item, 754 | .cooked, 755 | .moderator .cooked, 756 | .post-menu-area { 757 | padding: 0 1.25em; 758 | } 759 | 760 | // custom padding ------------------------------------- 761 | 762 | .post-links-container, 763 | .reply .topic-body { 764 | padding: 0 1em; 765 | } 766 | 767 | .post-links-container ul li { 768 | padding: 0.25em; 769 | } 770 | 771 | .post-links-container .post-links { 772 | padding: 1em 0; 773 | } 774 | 775 | .topic-map .buttons .btn { 776 | padding: 3px 25px; 777 | } 778 | 779 | .sidebar-container .sidebar-content > div { 780 | padding-bottom: 0; 781 | } 782 | .content-wrapper { 783 | padding-bottom: 150px; 784 | } 785 | 786 | .user-right { 787 | padding-left: 1em; 788 | } 789 | 790 | .reply { 791 | padding-top: 1em; 792 | } 793 | 794 | .create-new-topic { 795 | padding: 5px 0px 0px 5px; 796 | } 797 | .list-controls .category-breadcrumb a.badge-category, 798 | .list-controls .category-breadcrumb .dropdown-header { 799 | padding: 5px 8px 0 0; 800 | } 801 | 802 | nav.post-controls { 803 | padding: 0; 804 | } 805 | 806 | .admin-content .admin-contents, 807 | .admin-detail { 808 | padding: 1.5em; 809 | } 810 | 811 | .boxed.white, 812 | .user-table { 813 | padding-bottom: 3em; 814 | } 815 | 816 | .user-nav, 817 | .full-width > ul.nav.nav-pills { 818 | padding-top: 10px; 819 | padding-bottom: 10px; 820 | } 821 | 822 | .reply .topic-body { 823 | padding-left: 0; 824 | } 825 | 826 | .topic-body .contents .cooked, 827 | .offset2 .cooked { 828 | padding-top: 15px; 829 | } 830 | 831 | section.post-menu-area { 832 | padding: 10px 10px 10px 67px; 833 | } 834 | 835 | .topic-body .cooked { 836 | padding: 1em 11px 0.25em 67px; 837 | } 838 | 839 | section.embedded-posts.bottom, 840 | section.embedded-posts.top { 841 | padding: 1em 0.5em 2em 0.5em; 842 | } 843 | 844 | .topic-post.deleted section.post-actions { 845 | padding: 0.5em; 846 | } 847 | 848 | #main-outlet { 849 | padding-top: 80px; 850 | } 851 | 852 | #post_1 .post-actions .post-action { 853 | padding: 0.25em 0; 854 | margin-top: 0; 855 | } 856 | 857 | .user-nav, 858 | .full-width > ul.nav.nav-pills { 859 | padding: 10px; 860 | } 861 | 862 | .embedded-posts.top { 863 | padding-bottom: 1em $i; 864 | } 865 | 866 | a.expand-hidden { 867 | padding: 1.25em; 868 | } 869 | 870 | // Display and positioning -------------------------------------------------------------------- 871 | 872 | #topic-footer-buttons, 873 | .top-title-buttons, 874 | .user-badge, 875 | #user-card.show-badges .more-user-badges, 876 | .category-list tbody .category, 877 | .nav-pills > li, 878 | .layouts-nav-button > li { 879 | display: inline-block; 880 | } 881 | 882 | .user-main .about .secondary dd { 883 | display: inline; 884 | } 885 | 886 | .nav-pills > li, 887 | .layouts-nav-button > li { 888 | float: none; 889 | } 890 | 891 | section.post-menu-area { 892 | position: relative; 893 | } 894 | 895 | .topic-avatar .avatar-flair { 896 | bottom: unset; 897 | top: 30px; 898 | right: -2px; 899 | } 900 | 901 | // height and width --------------------------------------------------------------------------- 902 | 903 | // width 100% ----------------------------------------- 904 | 905 | .main-content .regular { 906 | width: 100%; 907 | } 908 | 909 | // max-width 95vw ------------------------------------- 910 | 911 | .main-content, 912 | .alert, 913 | #share-link.visible, 914 | .wrap { 915 | max-width: $V-page-max-width; 916 | } 917 | 918 | // custom --------------------------------------------- 919 | 920 | #topic-title .title-wrapper, 921 | #topic-footer-buttons, 922 | .topic-area .presence-users { 923 | max-width: 100%; 924 | } 925 | 926 | .embedded-posts.top { 927 | width: 690px; 928 | } 929 | 930 | .wrap { 931 | width: 1110px; 932 | } 933 | 934 | #reply-control .d-editor-preview img:not(.thumbnail):not(.emoji), 935 | .cooked img:not(.thumbnail):not(.emoji) { 936 | max-width: 100% $i; 937 | height: auto; 938 | } 939 | 940 | // Animation --------------------------------------------------------------------------------- 941 | 942 | .topic-list > .topic-list-body > tr.highlighted, 943 | .topic-body.highlighted { 944 | animation: Vincent-highlight $highlight-speed ease-in-out; 945 | } 946 | 947 | @keyframes Vincent-highlight { 948 | 0% { 949 | background-color: $highlight-color; 950 | } 951 | } 952 | 953 | // body background ---------------------------------------------------------------------------- 954 | 955 | body { 956 | position: relative; 957 | background-attachment: scroll; 958 | background-color: rgba(black, 0.1); 959 | } 960 | 961 | #background, 962 | body:before { 963 | height: 100vh; 964 | position: fixed; 965 | top: 0; 966 | left: 0; 967 | backface-visibility: hidden; 968 | -webkit-backface-visibility: hidden; 969 | } 970 | 971 | body:before { 972 | display: block; 973 | content: ""; 974 | width: 100vw; 975 | z-index: -2; 976 | opacity: $body-background-gradient-opacity; 977 | background: linear-gradient( 978 | to top left, 979 | $body-gradient-color-first, 980 | $body-gradient-color-second 981 | ); 982 | } 983 | 984 | #background { 985 | background: $v-theme-background; 986 | background-position: center center; 987 | background-size: cover; 988 | z-index: -1; 989 | opacity: $body-background-pattern-opacity; 990 | min-width: 100vw; 991 | width: auto; 992 | overflow: hidden; 993 | top: 50%; 994 | left: 50%; 995 | transform: translate3d(-50%, -50%, 0); 996 | } 997 | 998 | // fix IE EDGE backgrounds 999 | 1000 | @supports (-ms-ime-align: auto) { 1001 | body:before { 1002 | z-index: 1; 1003 | } 1004 | 1005 | #background { 1006 | z-index: 2; 1007 | } 1008 | 1009 | #main { 1010 | z-index: 4; 1011 | } 1012 | 1013 | .fixed-modal { 1014 | background: rgba(64, 64, 64, 0.83); 1015 | } 1016 | 1017 | .bootbox.modal { 1018 | box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.8); 1019 | } 1020 | 1021 | .modal-backdrop { 1022 | display: none; 1023 | } 1024 | } 1025 | 1026 | @supports (-ms-accelerator: true) { 1027 | body:before { 1028 | z-index: 1; 1029 | } 1030 | 1031 | #background { 1032 | z-index: 2; 1033 | } 1034 | 1035 | #main { 1036 | z-index: 4; 1037 | } 1038 | 1039 | .fixed-modal { 1040 | background: rgba(64, 64, 64, 0.83); 1041 | } 1042 | 1043 | .bootbox.modal { 1044 | box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.8); 1045 | } 1046 | 1047 | .modal-backdrop { 1048 | display: none; 1049 | } 1050 | } 1051 | 1052 | @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { 1053 | body:before { 1054 | z-index: 1; 1055 | } 1056 | 1057 | #background { 1058 | z-index: 2; 1059 | } 1060 | 1061 | #main { 1062 | z-index: 4; 1063 | } 1064 | 1065 | .fixed-modal { 1066 | background: rgba(64, 64, 64, 0.83); 1067 | } 1068 | 1069 | .bootbox.modal { 1070 | box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.8); 1071 | } 1072 | 1073 | .modal-backdrop { 1074 | display: none; 1075 | } 1076 | } 1077 | 1078 | // Links ------------------------------------------------------------------------------------- 1079 | 1080 | a { 1081 | color: $link-color; 1082 | transition: all 0.25s ease $i; 1083 | 1084 | &:visited, 1085 | &:active, 1086 | &.hashtag, 1087 | &.hashtag:visited { 1088 | color: $link-color; 1089 | } 1090 | &:hover { 1091 | color: invert-contrast($text-base) $i; 1092 | } 1093 | &.mention { 1094 | color: adjust-hue($link-color, 10deg); 1095 | } 1096 | &.mention-group { 1097 | color: adjust-hue($link-color, -10deg); 1098 | } 1099 | } 1100 | 1101 | .user-main .staff-counters a { 1102 | color: $link-color; 1103 | } 1104 | 1105 | // Buttons ------------------------------------------------------------------------------------ 1106 | 1107 | .btn { 1108 | position: relative; 1109 | text-transform: $button-text-case; 1110 | transition: all 0.25s cubic-bezier(0.02, 0.01, 0.47, 1); 1111 | transform: translate3d(0, 0, 0); 1112 | color: invert-contrast($text-base); 1113 | background-color: transparent; 1114 | 1115 | &:hover, 1116 | &:focus { 1117 | box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 1118 | 0 4px 15px 0 rgba(0, 0, 0, 0.15); 1119 | transition: box-shadow 0.4s ease-out; 1120 | } 1121 | 1122 | &:hover, 1123 | &.btn-hover { 1124 | background-color: darken($theme-base, 15%); 1125 | color: $text-base; 1126 | } 1127 | 1128 | &.btn-social:hover, 1129 | &.btn-social.btn-hover { 1130 | background-color: $border-color; 1131 | color: $text-base; 1132 | } 1133 | 1134 | &[href] { 1135 | color: invert-contrast($text-base); 1136 | } 1137 | 1138 | &:active, 1139 | &.btn-active { 1140 | background: lighten($theme-base, 15%); 1141 | } 1142 | 1143 | &[disabled], 1144 | &.disabled { 1145 | opacity: 0.6; 1146 | } 1147 | 1148 | &.hidden { 1149 | display: none; 1150 | } 1151 | 1152 | .d-icon { 1153 | opacity: 0.9; 1154 | 1155 | &:hover { 1156 | opacity: 1; 1157 | } 1158 | } 1159 | 1160 | &.btn-primary { 1161 | color: $text-base; 1162 | background-color: $border-color; 1163 | 1164 | &:hover, 1165 | &.btn-hover { 1166 | background-color: darken($theme-base, 15%); 1167 | color: $text-base; 1168 | } 1169 | } 1170 | 1171 | &.btn-danger { 1172 | color: $text-base; 1173 | background-color: $danger; 1174 | 1175 | &:hover, 1176 | &.btn-hover { 1177 | background-color: lighten($danger, 15%); 1178 | color: $text-base; 1179 | } 1180 | } 1181 | } 1182 | 1183 | .d-editor-button-bar button { 1184 | background-color: transparent; 1185 | border: $n; 1186 | box-shadow: $n; 1187 | background: $n; 1188 | } 1189 | 1190 | // Media queries ------------------------------------------------------------------------------ 1191 | 1192 | .topic-meta-data { 1193 | padding: 0.75em; 1194 | &:after { 1195 | display: block; 1196 | content: ""; 1197 | clear: both; 1198 | } 1199 | } 1200 | 1201 | @media (max-width: 650px) { 1202 | .topic-avatar { 1203 | margin-top: 1px; 1204 | } 1205 | } 1206 | 1207 | @media (max-width: 850px) { 1208 | body { 1209 | background: $n; 1210 | } 1211 | 1212 | .topic-list .topic-list-data { 1213 | padding: 0.75em; 1214 | } 1215 | 1216 | .topic-map { 1217 | margin-bottom: 0; 1218 | } 1219 | } 1220 | 1221 | // Extras ------------------------------------------------------------------------------------- 1222 | 1223 | .pace .pace-progress { 1224 | background: darken($theme-base, 15%); 1225 | } 1226 | 1227 | .spinner { 1228 | height: 35px; 1229 | width: 35px; 1230 | border: $n; 1231 | box-shadow: inset 0 1px 1px lighten($theme-base, 15%); 1232 | margin: 60px auto 0 auto; 1233 | } 1234 | 1235 | .category-boxes .category-box-inner:hover, 1236 | .category-boxes-with-topics .category-box-inner:hover { 1237 | background: $secondary-background; 1238 | cursor: pointer; 1239 | } 1240 | 1241 | .topic-list .posters a:first-child .avatar.latest:not(.single) { 1242 | box-shadow: 0 0 2px 3px $link-color; 1243 | top: 0; 1244 | } 1245 | 1246 | .modal.history-modal .diff-ins { 1247 | background: darken($theme-base, 15%); 1248 | } 1249 | 1250 | .modal.history-modal ins { 1251 | color: lighten($theme-base, 15%); 1252 | background: darken($theme-base, 25%); 1253 | } 1254 | 1255 | .read-state { 1256 | right: 3px; 1257 | } 1258 | 1259 | .badge-category-bg { 1260 | border-radius: 100vw; 1261 | } 1262 | 1263 | .badge-wrapper.box span.badge-category-bg { 1264 | border-radius: 0; 1265 | } 1266 | 1267 | header.d-header.clearfix { 1268 | border-bottom: 1px solid #555555; 1269 | } 1270 | 1271 | .menu-panel.drop-down { 1272 | border-bottom: 1px solid #555555; 1273 | } 1274 | 1275 | .modal-inner-container { 1276 | background: $header_background; 1277 | } 1278 | 1279 | aside.onebox header a[href] { 1280 | color: darken($text-base, 30%); 1281 | } 1282 | 1283 | aside.onebox .onebox-body a[href], 1284 | aside.onebox .onebox-body a[href]:visited { 1285 | color: $link-color; 1286 | } 1287 | 1288 | aside.onebox { 1289 | border: none; 1290 | border-left: 4px solid darken($text-base, 35%); 1291 | background: $trim-background; 1292 | } 1293 | 1294 | aside.quote .title, 1295 | aside.quote blockquote, 1296 | blockquote { 1297 | border-left: 3px solid $theme-base; 1298 | background-color: $trim-background; 1299 | } 1300 | 1301 | .modal-backdrop { 1302 | background-color: #222; 1303 | } 1304 | 1305 | #banner { 1306 | max-width: 95vw; 1307 | box-sizing: border-box; 1308 | margin: 0 auto; 1309 | } 1310 | 1311 | .modal.history-modal span.edit-reason { 1312 | background-color: $border-color; 1313 | } 1314 | 1315 | .directory { 1316 | background: $main-background; 1317 | padding: 2em; 1318 | } 1319 | 1320 | .directory table tr.me td { 1321 | background: $border-color; 1322 | } 1323 | 1324 | .bootbox.modal { 1325 | .modal-footer { 1326 | a.btn-primary { 1327 | color: $text-base; 1328 | } 1329 | } 1330 | } 1331 | 1332 | .show-more.has-topics .alert { 1333 | background: lighten($main-background, 10%); 1334 | } 1335 | 1336 | .topic-area .presence-users { 1337 | background: transparent; 1338 | border-bottom: 1px solid $border-color; 1339 | width: auto; 1340 | display: inline-block; 1341 | } 1342 | 1343 | .timeline-container .topic-timeline .timeline-scrollarea { 1344 | border-color: rgba(invert($header_background), 0.18); 1345 | } 1346 | 1347 | // TESTS -------------------------------------------------------------------------------------- 1348 | 1349 | .container.show-badge { 1350 | background: $main-background; 1351 | padding: 2em; 1352 | min-height: 70vh; 1353 | } 1354 | 1355 | .list-controls .category-breadcrumb .dropdown-header { 1356 | background: none $i; 1357 | color: inherit $i; 1358 | } 1359 | 1360 | .timeline-container .topic-timeline .timeline-handle { 1361 | background: desaturate($theme-base, 20%); 1362 | } 1363 | 1364 | .select-box-kit .select-box-kit-row.is-selected, 1365 | .select-box-kit .select-kit-row.is-selected, 1366 | .select-kit .select-box-kit-row.is-selected, 1367 | .select-kit .select-kit-row.is-selected { 1368 | background: darken($theme-base, 25%); 1369 | } 1370 | 1371 | .d-icon.d-icon-d-tracking, 1372 | .d-icon.d-icon-d-watching, 1373 | .badge-notification.new-topic { 1374 | color: lighten(desaturate($theme-base, 20%), 10%); 1375 | } 1376 | 1377 | .topic-list > .topic-list-header, 1378 | table.category-list > thead, 1379 | .latest-topic-list .table-heading, 1380 | .table-heading { 1381 | background: $main-background; 1382 | border-bottom: 1px solid $border-color; 1383 | } 1384 | 1385 | .post-info .wiki, 1386 | .post-info .last-wiki-edit { 1387 | color: $success $i; 1388 | } 1389 | 1390 | .lazyYT.lazyYT-container { 1391 | width: calc(100% + 2.5em) $i; 1392 | padding-bottom: calc(56.25% + 1.4em) $i; 1393 | left: -1.25em $i; 1394 | } 1395 | 1396 | span.badge-category-parent-bg { 1397 | border-radius: 100vw 0 0 100vw; 1398 | 1399 | + .badge-category-bg { 1400 | border-radius: 0 100vw 100vw 0; 1401 | border-left: 1px solid $header_background; 1402 | } 1403 | } 1404 | 1405 | .groups-table, 1406 | .groups-table thead, 1407 | .groups-table tbody tr:nth-of-type(even) { 1408 | background: $main-background; 1409 | } 1410 | 1411 | .groups-table tr td, 1412 | .groups-table thead th { 1413 | padding: 12px 5px $i; 1414 | } 1415 | 1416 | .groups-table tr { 1417 | border-bottom: $n; 1418 | } 1419 | 1420 | .groups-table tr td.groups-info { 1421 | padding-left: 10px $i; 1422 | } 1423 | 1424 | .groups-table .groups-info span.group-avatar-flair { 1425 | padding-right: 5px; 1426 | } 1427 | 1428 | // plugin support ----------------------------------------------------------------------------- 1429 | 1430 | // Retort --------------------------------------------- 1431 | 1432 | button.post-retort { 1433 | z-index: 1; 1434 | float: none; 1435 | } 1436 | 1437 | button.post-retort:first-of-type { 1438 | margin-left: 1.25em; 1439 | } 1440 | 1441 | // Whos online --------------------------------------- 1442 | 1443 | #whos-online { 1444 | padding: 1em 0.75em; 1445 | background: $main-background; 1446 | margin-bottom: 1em; 1447 | } 1448 | 1449 | // Discourse Spoiler Alert --------------------------- 1450 | 1451 | .spoiled p { 1452 | text-shadow: inherit; 1453 | -webkit-text-stroke: inherit; 1454 | color: inherit; 1455 | } 1456 | 1457 | // Discourse signature plugin ------------------------ 1458 | 1459 | .user-signature { 1460 | padding: 0 1.25em; 1461 | } 1462 | 1463 | // Discourse assign plugin ------------------------ 1464 | 1465 | p.assigned-to { 1466 | padding: 0 1.25em; 1467 | } 1468 | 1469 | // Inputs ----------------------------------------------------------------------------- 1470 | 1471 | $input-b0: #555 !default; 1472 | $input-b: darken($theme-base, 10%) !default; 1473 | 1474 | input, 1475 | select, 1476 | textarea { 1477 | transition: border-color ease 0.75s; 1478 | 1479 | &:focus:required:invalid:focus { 1480 | box-shadow: 0 0 2px $danger; 1481 | } 1482 | } 1483 | 1484 | input { 1485 | &[type="text"], 1486 | &[type="password"], 1487 | &[type="datetime"], 1488 | &[type="datetime-local"], 1489 | &[type="date"], 1490 | &[type="month"], 1491 | &[type="time"], 1492 | &[type="week"], 1493 | &[type="number"], 1494 | &[type="email"], 1495 | &[type="url"], 1496 | &[type="search"], 1497 | &[type="tel"], 1498 | &[type="color"] { 1499 | &:focus { 1500 | border-color: $input-b0; 1501 | border-bottom-color: $input-b; 1502 | box-shadow: $n; 1503 | } 1504 | } 1505 | } 1506 | 1507 | textarea { 1508 | &:focus { 1509 | border-color: $input-b0; 1510 | border-bottom-color: $input-b; 1511 | box-shadow: $n; 1512 | } 1513 | } 1514 | 1515 | // Select2 Combo-box ---------------------- 1516 | 1517 | .select2-container-active { 1518 | box-shadow: none; 1519 | } 1520 | 1521 | .select2-drop-active { 1522 | border-color: $input-b0; 1523 | border-top-color: $input-b; 1524 | } 1525 | 1526 | .select-box-kit, 1527 | .select-kit { 1528 | &.combo-box { 1529 | .select-box-kit-header, 1530 | .select-kit-header { 1531 | &.is-focused { 1532 | border: 1px solid $input-b; 1533 | -webkit-box-shadow: $n; 1534 | box-shadow: $n; 1535 | } 1536 | } 1537 | 1538 | &.is-highlighted { 1539 | .select-kit-header { 1540 | border: 1px solid $input-b; 1541 | -webkit-box-shadow: $n; 1542 | box-shadow: $n; 1543 | } 1544 | } 1545 | 1546 | &.is-expanded { 1547 | .select-kit-wrapper { 1548 | border: 1px solid $input-b; 1549 | -webkit-box-shadow: $n; 1550 | box-shadow: $n; 1551 | } 1552 | } 1553 | } 1554 | } 1555 | 1556 | // Select2 legacy ------------------------ 1557 | 1558 | .select2-container { 1559 | &.select2-container-active { 1560 | border-color: $input-b0; 1561 | border-bottom-color: $input-b; 1562 | } 1563 | } 1564 | 1565 | .select2-dropdown-open a.select2-choice { 1566 | border-color: $input-b0; 1567 | border-bottom-color: $input-b; 1568 | } 1569 | 1570 | .select2-drop-active { 1571 | border: 1px solid $input-b; 1572 | border-top: 0; 1573 | } 1574 | 1575 | .select2-container-active { 1576 | box-shadow: none; 1577 | } 1578 | 1579 | // other inputs -------------------------- 1580 | 1581 | .tag-chooser { 1582 | &.select2-dropdown-open, 1583 | &.select2-container-active { 1584 | border-color: $input-b; 1585 | } 1586 | } 1587 | 1588 | .select2-container-multi 1589 | .select2-choices 1590 | .select2-search-field 1591 | input.select2-active { 1592 | background: none $i; 1593 | } 1594 | 1595 | .select2-container-multi.select2-container-active .select2-choices { 1596 | border-color: $input-b; 1597 | } 1598 | 1599 | #reply-control .tag-chooser.select2-dropdown-open, 1600 | #reply-control .tag-chooser.select2-container-active { 1601 | border-color: $input-b; 1602 | } 1603 | 1604 | // date chooser navigation arrows 1605 | .pika-prev, 1606 | .pika-next { 1607 | background-color: $input-b; 1608 | } 1609 | 1610 | div.ac-wrap input[type="text"] { 1611 | margin: 1px; 1612 | } 1613 | 1614 | .select-kit.combo-box.category-drop .select-kit-body, 1615 | .select-kit.combo-box.tag-drop .select-kit-body { 1616 | border: 1px solid $input-b0; 1617 | box-shadow: none; 1618 | } 1619 | 1620 | // groups ------------------------------------------------------------------- 1621 | 1622 | .group { 1623 | .group-details-container, 1624 | .group-members, 1625 | .group-members thead, 1626 | .group-members tbody tr:nth-of-type(even), 1627 | .group-logs thead, 1628 | .group-logs tbody tr:nth-of-type(even), 1629 | .group-activity.container, 1630 | .group-post:nth-child(even), 1631 | .group-logs, 1632 | .group-edit, 1633 | .group-logs-controls button { 1634 | background: $main-background; 1635 | } 1636 | 1637 | .group-nav li .active a, 1638 | .group-nav li .active i { 1639 | color: $header_primary; 1640 | } 1641 | 1642 | .group-members thead th, 1643 | .group-members tbody tr td, 1644 | .group-logs thead th, 1645 | .group-logs tbody tr td { 1646 | padding: 12px 5px; 1647 | } 1648 | 1649 | .group-members tr, 1650 | .group-logs tr { 1651 | border-bottom: $n; 1652 | } 1653 | 1654 | table.group-members th { 1655 | border-bottom: 1px solid #474747; 1656 | } 1657 | 1658 | .group-members tr td:first-child, 1659 | .group-members th:first-child, 1660 | .group-logs tr td:first-child, 1661 | .group-logs th:first-child { 1662 | padding-left: 10px; 1663 | } 1664 | 1665 | .group-info span.group-avatar-flair { 1666 | padding-right: 5px; 1667 | } 1668 | 1669 | .group-nav li a { 1670 | color: inherit; 1671 | } 1672 | 1673 | .group-activity.container { 1674 | padding: 1em; 1675 | } 1676 | 1677 | .group-activity-nav li a.active { 1678 | background-color: #4b4b4b; 1679 | font-weight: inherit; 1680 | } 1681 | 1682 | .group-post { 1683 | padding: 1em; 1684 | border-bottom: 1px solid $border-color; 1685 | } 1686 | 1687 | .group-edit { 1688 | padding: 1em; 1689 | border: $n; 1690 | } 1691 | 1692 | .group-logs-controls button { 1693 | margin: 1em 0; 1694 | padding: 0.75em; 1695 | } 1696 | 1697 | .group-members-input .ac-wrap { 1698 | margin-top: 0.75em; 1699 | } 1700 | } 1701 | 1702 | // 404 page ------------------------------------------------------------------- 1703 | 1704 | .page-not-found-topics { 1705 | background: $main-background; 1706 | padding: 1em; 1707 | 1708 | & + .row { 1709 | background: $main-background; 1710 | padding: 0 1em; 1711 | margin-top: 1em; 1712 | } 1713 | } 1714 | 1715 | h1.page-not-found { 1716 | margin: 0 0 20px 0; 1717 | } 1718 | 1719 | // The pit -------------------------------------------------------------------- 1720 | 1721 | .slick-initialized, 1722 | [dir] .slick-initialized { 1723 | width: calc(100% + 2.5em) $i; 1724 | left: -1.25em $i; 1725 | 1726 | > p:empty { 1727 | display: none; 1728 | } 1729 | } 1730 | 1731 | .list-controls #create-topic { 1732 | opacity: 0.9; 1733 | 1734 | .d-icon { 1735 | color: $theme-base; 1736 | } 1737 | 1738 | &:hover, 1739 | &.d-hover { 1740 | opacity: 1; 1741 | background: darken($theme-base, 15%); 1742 | 1743 | .d-icon { 1744 | color: inherit; 1745 | } 1746 | } 1747 | } 1748 | 1749 | .nav-pills > li > a { 1750 | padding: 0px 12px; 1751 | } 1752 | 1753 | .list-controls > .container { 1754 | display: flex; 1755 | align-items: center; 1756 | } 1757 | 1758 | section.post-actions:empty { 1759 | display: $n; 1760 | } 1761 | 1762 | .cooked { 1763 | > { 1764 | .slick-initialized:first-child, 1765 | .lazyYT-container:first-child { 1766 | margin-top: -15px; 1767 | } 1768 | } 1769 | } 1770 | 1771 | .popup-menu { 1772 | background-color: $header_background; 1773 | border-color: $border-color; 1774 | } 1775 | 1776 | .d-header .menu-panel { 1777 | box-shadow: $n; 1778 | background-color: $header_background; 1779 | border-top: 1px solid #555; 1780 | } 1781 | 1782 | .admin-contents.dashboard tbody { 1783 | background: rgba(255, 255, 255, 0.1); 1784 | } 1785 | 1786 | ul.nav.nav-pills { 1787 | margin: 0.5em 0; 1788 | } 1789 | 1790 | .admin-controls { 1791 | padding-top: 0; 1792 | } 1793 | 1794 | .nav-pills > li.active > a, 1795 | .admin-controls .nav.nav-pills li.active a:hover, 1796 | .layouts-nav-button > li.active > a, 1797 | .nav-pills > li > a.active, 1798 | .nav-pills > li > a.active:hover, 1799 | .layouts-nav-button > li > a.active, 1800 | .admin-controls .nav.nav-pills li.active a { 1801 | background: none; 1802 | color: $link-color $i; 1803 | } 1804 | 1805 | .moderator .topic-body { 1806 | border-left: 3px solid lighten(rgba(complement($theme-base), 0.65), 5%) $i; 1807 | } 1808 | 1809 | .moderator .topic-meta-data { 1810 | border-bottom: $n; 1811 | } 1812 | 1813 | .moderator .topic-body .contents .cooked { 1814 | background: $n; 1815 | padding: 0 1.25em; 1816 | padding-top: 15px; 1817 | } 1818 | 1819 | section.navigation-container { 1820 | width: 100%; 1821 | } 1822 | 1823 | button { 1824 | z-index: 1; 1825 | } 1826 | 1827 | .admin-contents thead th { 1828 | background: $header_background; 1829 | } 1830 | 1831 | tbody { 1832 | border-top-width: 1px; 1833 | } 1834 | 1835 | .navigation-container { 1836 | --nav-space: 0; 1837 | } 1838 | 1839 | // desktop only 1840 | 1841 | html.desktop-view.not-mobile-device { 1842 | .topic-post .row, 1843 | .reply .topic-body { 1844 | // display: flex; 1845 | } 1846 | 1847 | .topic-body { 1848 | margin-left: -67px; 1849 | } 1850 | 1851 | .reply .topic-body { 1852 | flex-flow: column; 1853 | flex: 1 0 auto; 1854 | } 1855 | 1856 | section.navigation-container, 1857 | .category-navigation { 1858 | display: flex; 1859 | align-items: center; 1860 | justify-content: flex-start; 1861 | width: 100%; 1862 | } 1863 | .list-controls .nav { 1864 | flex: 1; 1865 | } 1866 | .topic-body { 1867 | max-width: 690px; 1868 | } 1869 | .embedded-posts .topic-body { 1870 | width: 100%; 1871 | } 1872 | #navigation-bar { 1873 | margin: 0; 1874 | span.unread { 1875 | display: none; 1876 | } 1877 | } 1878 | } 1879 | 1880 | // mobile only 1881 | 1882 | html.mobile-view.mobile-device { 1883 | .topic-avatar img.avatar { 1884 | margin: 0; 1885 | } 1886 | 1887 | .alert { 1888 | margin-bottom: 1em $i; 1889 | } 1890 | 1891 | section.post-actions { 1892 | padding-top: 0.25em; 1893 | } 1894 | 1895 | .post-action { 1896 | margin-top: 0.25em; 1897 | margin-left: 0.25em; 1898 | } 1899 | 1900 | .post-actions { 1901 | margin: 0; 1902 | padding-bottom: 0.5em; 1903 | display: flex; 1904 | justify-content: flex-end; 1905 | flex-direction: column; 1906 | &:empty { 1907 | display: none; 1908 | } 1909 | } 1910 | 1911 | @media (max-width: 400px) { 1912 | #main-outlet { 1913 | padding-right: 0; 1914 | padding-left: 0; 1915 | } 1916 | 1917 | .topic-meta-data { 1918 | position: relative; 1919 | } 1920 | 1921 | .topic-meta-data .post-info:not(.edits) { 1922 | margin-right: 0; 1923 | } 1924 | 1925 | .names .new_user a, 1926 | .names .user-title, 1927 | .names .user-title a { 1928 | font-size: 90%; 1929 | } 1930 | 1931 | .post-info.edits + a.reply-to-tab { 1932 | bottom: 5px; 1933 | right: 0.5em $i; 1934 | } 1935 | } 1936 | 1937 | // full width YT 1938 | .mobile-device .lazyYT.lazyYT-container { 1939 | max-width: unset; 1940 | } 1941 | 1942 | .list-controls .nav-pills > li { 1943 | background: none; 1944 | } 1945 | .list-controls .nav-pills { 1946 | padding: 0 0.5em; 1947 | } 1948 | } 1949 | 1950 | .group-info .avatar-flair, 1951 | .groups-table .groups-info .avatar-flair { 1952 | border-radius: 50%; 1953 | align-items: center; 1954 | justify-content: center; 1955 | display: flex; 1956 | i { 1957 | font-size: 1.75em $i; 1958 | } 1959 | } 1960 | 1961 | .select-kit .select-kit-row.is-highlighted { 1962 | background: rgba($theme-base, 0.35) $i; 1963 | } 1964 | 1965 | // centered content 1966 | 1967 | $q-background: rgba(contrast($text-base), 0.5) !default; 1968 | 1969 | .cooked, 1970 | .post-menu-area, 1971 | .moderator .topic-body .contents .cooked { 1972 | background: $header_background; 1973 | } 1974 | 1975 | .mobile-view.mobile-device { 1976 | .topic-post .boxed .contents { 1977 | background: $header_background; 1978 | } 1979 | } 1980 | 1981 | .topic-avatar { 1982 | width: unset; 1983 | margin: 0; 1984 | padding: 1em 0.5em 0 0.5em; 1985 | } 1986 | 1987 | .topic-meta-data { 1988 | padding: 0.5em; 1989 | background: $q-background; 1990 | } 1991 | 1992 | .topic-map { 1993 | margin: 0; 1994 | background: $q-background; 1995 | } 1996 | 1997 | .post-stream { 1998 | display: flex; 1999 | align-items: center; 2000 | flex-direction: column; 2001 | } 2002 | 2003 | #topic-title .title-wrapper, 2004 | #topic-footer-buttons, 2005 | .small-action { 2006 | max-width: 100%; 2007 | } 2008 | 2009 | #topic-title { 2010 | padding: 0; 2011 | } 2012 | 2013 | .time-gap { 2014 | padding: 0 100px; 2015 | margin-bottom: 0 !important; 2016 | } 2017 | 2018 | .time-gap .topic-avatar { 2019 | display: none; 2020 | } 2021 | 2022 | //// --------------------------------------- 2023 | .timeline-container { 2024 | margin-left: 875px; 2025 | 2026 | @media all and (min-width: 1140px) { 2027 | margin-left: 875px; 2028 | } 2029 | @media all and (min-width: 1250px) { 2030 | margin-left: 875px; 2031 | } 2032 | } 2033 | 2034 | .topic-map .buttons .btn { 2035 | box-shadow: none; 2036 | } 2037 | 2038 | #topic-title { 2039 | width: 690px; 2040 | max-width: 100%; 2041 | } 2042 | 2043 | #topic-title .title-wrapper { 2044 | width: 690px; 2045 | } 2046 | 2047 | #suggested-topics { 2048 | width: 100%; 2049 | } 2050 | 2051 | .topic-avatar .avatar-flair { 2052 | top: 38px; 2053 | right: 6px; 2054 | } 2055 | 2056 | .topic-post { 2057 | width: 100%; 2058 | max-width: 690px; 2059 | } 2060 | 2061 | .post-actions { 2062 | background: $q-background; 2063 | margin: 0; 2064 | padding-bottom: 1em; 2065 | } 2066 | 2067 | #topic-title h1 { 2068 | width: 100%; 2069 | } 2070 | 2071 | .small-action .topic-avatar { 2072 | background: none; 2073 | } 2074 | 2075 | .topic-avatar img.avatar { 2076 | margin: 0; 2077 | } 2078 | 2079 | .topic-meta-data .names { 2080 | flex: 1 0 auto; 2081 | } 2082 | 2083 | .topic-meta-data { 2084 | display: flex; 2085 | min-height: 46px; 2086 | align-items: center; 2087 | } 2088 | 2089 | .topic-avatar { 2090 | padding: 9px 11px; 2091 | } 2092 | 2093 | .topic-post { 2094 | width: 100%; 2095 | } 2096 | 2097 | .topic-meta-data .post-info { 2098 | margin-right: 6px; 2099 | } 2100 | 2101 | .topic-body .topic-meta-data { 2102 | padding: 0.5em 0.5em 0.5em 66px; 2103 | } 2104 | 2105 | .posts-wrapper { 2106 | width: 690px; 2107 | margin: 0 auto; 2108 | max-width: 100%; 2109 | } 2110 | 2111 | .gap { 2112 | width: auto; 2113 | padding: 1em; 2114 | } 2115 | 2116 | #topic-title .title-wrapper { 2117 | padding: 1em 0; 2118 | } 2119 | 2120 | #topic-title .edit-topic-title { 2121 | padding: 1em; 2122 | background: rgba(0, 0, 0, 0.5); 2123 | } 2124 | 2125 | #topic-title .title-wrapper { 2126 | padding-bottom: 7px; 2127 | margin-bottom: 16px; 2128 | } 2129 | 2130 | .title-wrapper .topic-category { 2131 | padding: 6px; 2132 | align-items: center; 2133 | } 2134 | 2135 | // 2136 | .embedded-posts { 2137 | border: none; 2138 | } 2139 | 2140 | .embedded-posts { 2141 | margin-left: 0; 2142 | } 2143 | 2144 | .embedded-posts .reply { 2145 | margin-left: 30px; 2146 | } 2147 | 2148 | .embedded-posts .topic-avatar { 2149 | padding: 0.5em; 2150 | } 2151 | 2152 | .reply .cooked { 2153 | padding-bottom: 15px; 2154 | } 2155 | 2156 | .embedded-posts.top { 2157 | margin-left: 0; 2158 | } 2159 | 2160 | .embedded-posts .collapse-down, 2161 | .embedded-posts .collapse-up { 2162 | color: $text-base; 2163 | background: $header_background; 2164 | border-color: $border-color; 2165 | } 2166 | // 2167 | 2168 | .timeline-container { 2169 | z-index: 2; 2170 | } 2171 | 2172 | .select-kit.dropdown-select-box .dropdown-select-box-header:hover .d-icon { 2173 | color: inherit; 2174 | } 2175 | 2176 | .list-controls { 2177 | .btn { 2178 | min-height: 36px; 2179 | } 2180 | } 2181 | 2182 | @if $dark_background_overlay == "true" { 2183 | body:before { 2184 | background: black; 2185 | opacity: 0.7; 2186 | z-index: 0; 2187 | } 2188 | 2189 | #background { 2190 | opacity: 0.85; 2191 | } 2192 | 2193 | // fix IE EDGE backgrounds 2194 | 2195 | @supports (-ms-ime-align: auto) { 2196 | body:before { 2197 | z-index: 2; 2198 | } 2199 | 2200 | #background { 2201 | z-index: 1; 2202 | } 2203 | } 2204 | 2205 | @supports (-ms-accelerator: true) { 2206 | body:before { 2207 | z-index: 2; 2208 | } 2209 | 2210 | #background { 2211 | z-index: 1; 2212 | } 2213 | } 2214 | 2215 | @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { 2216 | body:before { 2217 | z-index: 2; 2218 | } 2219 | 2220 | #background { 2221 | z-index: 1; 2222 | } 2223 | } 2224 | } 2225 | 2226 | #topic-title .title-wrapper { 2227 | background: rgba(0, 0, 0, 0.5); 2228 | padding: 1em; 2229 | margin-top: 1em; 2230 | } 2231 | 2232 | .post-links-container { 2233 | background: rgba(0, 0, 0, 0.5); 2234 | } 2235 | 2236 | .title-wrapper .topic-category { 2237 | padding-left: 0; 2238 | } 2239 | 2240 | .spoiled { 2241 | -webkit-text-stroke: 0; 2242 | } 2243 | 2244 | @if $rounded_borders == "true" { 2245 | #post_1 .contents, 2246 | .nav-pills > li.active > a, 2247 | .topic-map .buttons .btn, 2248 | #reply-control .d-editor-button-bar .btn { 2249 | border-radius: 0; 2250 | } 2251 | 2252 | .contents, 2253 | .menu-panel.drop-down, 2254 | .topic-map, 2255 | .embedded-posts.bottom, 2256 | article:not(#post_1) section.post-menu-area, 2257 | .post-links-container, 2258 | .reply .cooked { 2259 | border-radius: 0 0 10px 10px; 2260 | } 2261 | 2262 | .topic-meta-data, 2263 | #reply-control, 2264 | .embedded-posts.top { 2265 | border-radius: 10px 10px 0 0; 2266 | } 2267 | 2268 | .popup-menu, 2269 | .list-controls, 2270 | .select-kit.dropdown-select-box.is-expanded .select-kit-body, 2271 | table, 2272 | .column, 2273 | .group-activity.container, 2274 | #topic-title .title-wrapper, 2275 | .row .alert.alert-info, 2276 | .boxed.white, 2277 | .cooked > blockquote, 2278 | .topic-list-bottom, 2279 | .group-details-container, 2280 | .group-outlet, 2281 | .admin-controls, 2282 | #banner, 2283 | .user-nav, 2284 | .full-width > ul.nav.nav-pills, 2285 | .list-controls button.btn, 2286 | .moderator .topic-body, 2287 | .topic-body.highlighted, 2288 | #user-card { 2289 | border-radius: 10px; 2290 | } 2291 | 2292 | aside.quote { 2293 | .title { 2294 | border-radius: 10px 10px 0 0; 2295 | } 2296 | 2297 | blockquote { 2298 | border-radius: 0 0 10px 10px; 2299 | } 2300 | } 2301 | 2302 | input[type], 2303 | .btn, 2304 | button:hover, 2305 | button.d-hover { 2306 | border-radius: 4px; 2307 | } 2308 | 2309 | .topic-map .map-collapsed .buttons .btn { 2310 | border-radius: 0 0 10px 0; 2311 | } 2312 | 2313 | table, 2314 | .column, 2315 | .group-outlet, 2316 | #user-card { 2317 | overflow: hidden; 2318 | } 2319 | 2320 | a { 2321 | border-radius: 3px; 2322 | } 2323 | 2324 | .cooked > .onebox, 2325 | .user-table, 2326 | .badge-card, 2327 | .user-stream-item, 2328 | .d-editor-preview blockquote, 2329 | .d-editor-preview aside.onebox { 2330 | border-radius: 10px; 2331 | } 2332 | 2333 | .category-box, 2334 | .category-box-inner { 2335 | border-radius: 15px; 2336 | } 2337 | 2338 | .embedded-posts.bottom { 2339 | margin-top: -10px; 2340 | } 2341 | 2342 | .post-actions { 2343 | padding-top: 10px; 2344 | margin-top: -10px; 2345 | } 2346 | 2347 | // plugin support 2348 | #whos-online { 2349 | border-radius: 10px; 2350 | } 2351 | } 2352 | -------------------------------------------------------------------------------- /common/header.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /eslint.config.mjs: -------------------------------------------------------------------------------- 1 | import DiscourseRecommendedTheme from "@discourse/lint-configs/eslint-theme"; 2 | 3 | export default [...DiscourseRecommendedTheme]; 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "devDependencies": { 4 | "@discourse/lint-configs": "2.4.0", 5 | "ember-template-lint": "6.1.0", 6 | "eslint": "9.19.0", 7 | "prettier": "2.8.8" 8 | }, 9 | "engines": { 10 | "node": ">= 22", 11 | "npm": "please-use-pnpm", 12 | "yarn": "please-use-pnpm", 13 | "pnpm": "9.x" 14 | }, 15 | "packageManager": "pnpm@9.15.5" 16 | } 17 | -------------------------------------------------------------------------------- /settings.yml: -------------------------------------------------------------------------------- 1 | theme_background: 2 | default: "" 3 | description: 4 | en: If you wish to change the default background add the url of the new background above. 5 | dark_background_overlay: 6 | default: false 7 | description: 8 | en: Enable this if you've set a custom background above. 9 | rounded_borders: 10 | default: false 11 | description: 12 | en: Enable rounded borders? 13 | button_text_case: 14 | default: uppercase 15 | type: enum 16 | choices: 17 | - uppercase 18 | - capitalize 19 | description: 20 | en: What text case should buttons have? 21 | highlight_duration: 22 | default: 1.5 23 | min: 0.25 24 | max: 5 25 | description: 26 | en: How long - in seconds - should the highlight last? 27 | -------------------------------------------------------------------------------- /spec/system/core_features_spec.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | RSpec.describe "Core features", type: :system do 4 | before { upload_theme_or_component } 5 | 6 | it_behaves_like "having working core features", skip_examples: %i[profile] 7 | end 8 | --------------------------------------------------------------------------------