├── Gruntfile.js ├── LICENSE ├── README.MD ├── icon ├── add.svg ├── create.svg ├── exit_to_app.svg ├── logo@2x.png ├── notifications_none.svg ├── notifications_none_hl.svg ├── search.svg ├── settings.svg └── wallet_giftcard_hl.svg ├── package.json ├── v2ex.css ├── v2ex.less └── v2ex.min.css /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt){ 2 | grunt.initConfig({ 3 | less: { 4 | development: { 5 | files: { 6 | "v2ex.css": "v2ex.less" 7 | } 8 | }, 9 | production: { 10 | options: { 11 | compress: true 12 | }, 13 | files: { 14 | "v2ex.min.css": "v2ex.less" 15 | } 16 | } 17 | }, 18 | 19 | //监视器 20 | watch: { 21 | css: { 22 | files: ['v2ex.less'], 23 | tasks: ['less'] 24 | } 25 | } 26 | }); 27 | 28 | grunt.loadNpmTasks('grunt-contrib-less'); 29 | grunt.loadNpmTasks('grunt-contrib-watch'); 30 | 31 | grunt.registerTask('default', ['less']); 32 | }; -------------------------------------------------------------------------------- /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 | {description} 294 | Copyright (C) {year} {fullname} 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 | {signature of Ty Coon}, 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 | 341 | -------------------------------------------------------------------------------- /README.MD: -------------------------------------------------------------------------------- 1 | # V2EX MATERIAL THEME 2 | 3 | 新版本（仅支持 Chrome）：https://github.com/zdhxiong/v2ex-material-theme2 4 | 5 | ## 代码 6 | 7 | @import url("//play.cdn.w3cbus.com/v2ex-material-theme/v2ex.min.css"); 8 | 9 | ## 使用方法 10 | 11 | 进入 www.v2ex.com ，登录后进设置，在自定义CSS处填入代码保存即可。 12 | 13 | ![](http://ww4.sinaimg.cn/large/63f511e3gw1ep9ax8zk7nj20iz0bgwf5.jpg) 14 | 15 | ## 预览图 16 | 17 | ![](http://ww2.sinaimg.cn/large/63f511e3gw1ep99vosv55j20ys0qj43r.jpg) 18 | ![](http://ww1.sinaimg.cn/large/63f511e3gw1ep99wvry7ij20yq0qidj2.jpg) 19 | -------------------------------------------------------------------------------- /icon/add.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icon/create.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icon/exit_to_app.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icon/logo@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zdhxiong/v2ex-material-theme/76c2936dc6e817e8003fcc99b9430f42159dc448/icon/logo@2x.png -------------------------------------------------------------------------------- /icon/notifications_none.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icon/notifications_none_hl.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icon/search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icon/settings.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icon/wallet_giftcard_hl.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "v2ex-material-theme", 3 | "devDependencies": { 4 | "grunt": "~0.4.5", 5 | "grunt-contrib-watch": "~0.6.1", 6 | "grunt-contrib-less": "^1.0.0" 7 | } 8 | } -------------------------------------------------------------------------------- /v2ex.css: -------------------------------------------------------------------------------- 1 | .adsbygoogle { 2 | display: none !important; 3 | } 4 | .box { 5 | backdrop-filter: none; 6 | } 7 | a:link, 8 | a:visited, 9 | a:active { 10 | color: #778087; 11 | } 12 | .cell, 13 | .header { 14 | border-bottom: 1px solid #eaeaea; 15 | } 16 | .cell, 17 | .item, 18 | .inner { 19 | padding: 20px; 20 | } 21 | .avatar { 22 | border-radius: 100%!important; 23 | } 24 | #Top { 25 | background-image: none; 26 | background-color: #4285f4; 27 | height: 56px; 28 | font-size: 16px; 29 | position: fixed; 30 | top: 0; 31 | left: 0; 32 | right: 0; 33 | box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28); 34 | padding: 0 20px; 35 | z-index: 99; 36 | } 37 | #Top a { 38 | color: #fff; 39 | } 40 | #Top .content { 41 | padding-top: 4px; 42 | } 43 | #Top td:first-child { 44 | position: fixed; 45 | left: 20px; 46 | padding-top: 4px; 47 | cursor: pointer; 48 | } 49 | #Top #Logo { 50 | background-image: url("//play.cdn.w3cbus.com/v2ex-material-theme/icon/logo@2x.png"); 51 | } 52 | #Top td:last-child { 53 | position: fixed; 54 | right: 20px; 55 | } 56 | #Search form div { 57 | background: url("//play.cdn.w3cbus.com/v2ex-material-theme/icon/search.svg") no-repeat 10px center rgba(255, 255, 255, 0.15) !important; 58 | border-radius: 2px; 59 | height: 36px!important; 60 | width: 820px!important; 61 | } 62 | #Search form div:hover { 63 | background-color: rgba(255, 255, 255, 0.25) !important; 64 | } 65 | #Search form input { 66 | color: #fff; 67 | height: 36px; 68 | width: 760px; 69 | margin-left: 40px; 70 | } 71 | #Top td:last-child { 72 | visibility: hidden; 73 | } 74 | #Top td:last-child a:last-child, 75 | #Top a[href='/settings'], 76 | #Rightbar .inner > a[href='/notifications'], 77 | #Rightbar .inner > strong > a[href='/notifications'], 78 | #Rightbar > .box:nth-child(2) td:first-child a[href^='/member/'], 79 | #Rightbar a[href='/mission/daily'] { 80 | visibility: visible; 81 | position: fixed; 82 | top: 10px; 83 | color: rgba(255, 255, 255, 0); 84 | width: 36px; 85 | height: 36px; 86 | border-radius: 100%; 87 | overflow: hidden; 88 | } 89 | #Top td:last-child a:last-child:focus, 90 | #Top a[href='/settings']:focus, 91 | #Rightbar .inner > a[href='/notifications']:focus, 92 | #Rightbar .inner > strong > a[href='/notifications']:focus, 93 | #Rightbar a[href='/mission/daily']:focus { 94 | background-color: rgba(0, 0, 0, 0.1); 95 | } 96 | #Top td:last-child a:last-child { 97 | right: 26px; 98 | background: url("//play.cdn.w3cbus.com/v2ex-material-theme/icon/exit_to_app.svg") no-repeat center; 99 | } 100 | #Top a[href='/settings'] { 101 | right: 72px; 102 | background: url("//play.cdn.w3cbus.com/v2ex-material-theme/icon/settings.svg") no-repeat center; 103 | } 104 | #Rightbar .inner > a[href='/notifications'] { 105 | right: 120px; 106 | background: url("//play.cdn.w3cbus.com/v2ex-material-theme/icon/notifications_none.svg") no-repeat center; 107 | } 108 | #Rightbar .inner > strong > a[href='/notifications'] { 109 | right: 120px; 110 | background: url("//play.cdn.w3cbus.com/v2ex-material-theme/icon/notifications_none_hl.svg") no-repeat center; 111 | } 112 | #Rightbar > .box:nth-child(2) td:first-child a[href^='/member/'] { 113 | right: 180px; 114 | } 115 | #Rightbar > .box:nth-child(2) td:first-child a[href^='/member/'] .avatar { 116 | width: 36px; 117 | height: 36px; 118 | } 119 | #Rightbar a[href='/mission/daily'] { 120 | right: 240px; 121 | background: url("//play.cdn.w3cbus.com/v2ex-material-theme/icon/wallet_giftcard_hl.svg") no-repeat center; 122 | } 123 | @media only screen and (max-width: 1400px) { 124 | #Top form div { 125 | width: 276px!important; 126 | } 127 | #Top form input { 128 | width: 236px; 129 | } 130 | #Search { 131 | position: fixed; 132 | left: 140px; 133 | } 134 | } 135 | #Wrapper { 136 | background-color: #ececec; 137 | padding-top: 80px; 138 | } 139 | #Rightbar { 140 | visibility: hidden; 141 | position: fixed; 142 | z-index: 999; 143 | } 144 | #MyNodes .node a:nth-of-type(1), 145 | #Rightbar > .sep20:first-child, 146 | #Rightbar table td:nth-of-type(3) a[href='/new'] { 147 | border-radius: 100%; 148 | box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28); 149 | transition: all 150ms cubic-bezier(0.25, 0.25, 0, 1); 150 | } 151 | #MyNodes .node a:nth-of-type(1):hover, 152 | #Rightbar > .sep20:first-child:hover, 153 | #Rightbar table td:nth-of-type(3) a[href='/new']:hover { 154 | box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32); 155 | transition: box-shadow 150ms cubic-bezier(0, 0, 0.2, 1); 156 | } 157 | #MyNodes .node a:nth-of-type(1):active, 158 | #Rightbar > .sep20:first-child:active, 159 | #Rightbar table td:nth-of-type(3) a[href='/new']:active { 160 | box-shadow: 0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36); 161 | } 162 | #MyNodes { 163 | visibility: visible; 164 | position: fixed; 165 | right: 20px; 166 | bottom: 48px; 167 | width: 56px; 168 | height: 372px; 169 | background-color: transparent; 170 | } 171 | #MyNodes .node { 172 | padding: 0; 173 | position: relative; 174 | height: 58px; 175 | text-align: right; 176 | } 177 | #MyNodes .node:hover { 178 | background: none; 179 | border: none; 180 | box-shadow: none; 181 | } 182 | #MyNodes .node a:last-child { 183 | position: absolute; 184 | display: none; 185 | right: 60px; 186 | top: 8px; 187 | white-space: nowrap; 188 | background: rgba(70, 70, 70, 0.9); 189 | border-radius: 2px; 190 | box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); 191 | color: #ececec; 192 | font-weight: bold; 193 | line-height: 1em; 194 | font-size: 12px; 195 | min-width: 20px; 196 | max-width: 200px; 197 | overflow: hidden; 198 | padding: 6px 8px; 199 | text-overflow: ellipsis; 200 | vertical-align: middle; 201 | text-decoration: none; 202 | opacity: 0; 203 | transition: opacity 150ms cubic-bezier(0.4, 0, 1, 1); 204 | } 205 | #MyNodes .node a:nth-of-type(1) { 206 | position: absolute; 207 | top: 0; 208 | right: 8px; 209 | width: 40px; 210 | height: 40px; 211 | opacity: 0; 212 | transform: scale(0); 213 | } 214 | #MyNodes .node a:nth-of-type(1):hover + a { 215 | display: block; 216 | opacity: 1; 217 | transition-delay: 10ms; 218 | transition: opacity 150ms cubic-bezier(0, 0, 0.2, 1); 219 | } 220 | #MyNodes .node a:nth-of-type(1) img { 221 | width: 40px; 222 | height: 40px; 223 | border-radius: 100%; 224 | } 225 | #MyNodes .node_compose { 226 | display: none; 227 | } 228 | #Rightbar > .sep20:first-child { 229 | position: fixed; 230 | right: 20px; 231 | bottom: 20px; 232 | width: 56px; 233 | height: 56px; 234 | color: rgba(255, 255, 255, 0); 235 | visibility: visible; 236 | background: url("//play.cdn.w3cbus.com/v2ex-material-theme/icon/add.svg") no-repeat center #db4437; 237 | z-index: 99; 238 | cursor: pointer; 239 | } 240 | #Rightbar > .sep20:first-child:hover ~ .box #MyNodes .node:nth-child(-n + 6) a:nth-of-type(1), 241 | #MyNodes:hover .node:nth-child(-n + 6) a:nth-of-type(1), 242 | #Rightbar > .sep20:first-child:hover ~ .box table td:nth-of-type(3) a[href='/new'], 243 | #Rightbar .box:nth-child(2) .cell:nth-last-child(2) table td:nth-of-type(3):hover a[href='/new'] { 244 | opacity: 1; 245 | transform: scale(1); 246 | transition: all 150ms cubic-bezier(0.25, 0.25, 0, 1); 247 | } 248 | #Rightbar > .sep20:first-child:hover ~ .box #MyNodes .node:nth-child(1) a:nth-of-type(1), 249 | #MyNodes:hover .node:nth-child(1) a:nth-of-type(1) { 250 | transition-delay: 75ms; 251 | } 252 | #Rightbar > .sep20:first-child:hover ~ .box #MyNodes .node:nth-child(2) a:nth-of-type(1), 253 | #MyNodes:hover .node:nth-child(2) a:nth-of-type(1) { 254 | transition-delay: 60ms; 255 | } 256 | #Rightbar > .sep20:first-child:hover ~ .box #MyNodes .node:nth-child(3) a:nth-of-type(1), 257 | #MyNodes:hover .node:nth-child(3) a:nth-of-type(1) { 258 | transition-delay: 45ms; 259 | } 260 | #Rightbar > .sep20:first-child:hover ~ .box #MyNodes .node:nth-child(4) a:nth-of-type(1), 261 | #MyNodes:hover .node:nth-child(4) a:nth-of-type(1) { 262 | transition-delay: 30ms; 263 | } 264 | #Rightbar > .sep20:first-child:hover ~ .box #MyNodes .node:nth-child(5) a:nth-of-type(1), 265 | #MyNodes:hover .node:nth-child(5) a:nth-of-type(1) { 266 | transition-delay: 15ms; 267 | } 268 | #Rightbar > .sep20:first-child:hover ~ .box #MyNodes .node:nth-child(6) a:nth-of-type(1), 269 | #MyNodes:hover .node:nth-child(6) a:nth-of-type(1) { 270 | transition-delay: 0ms; 271 | } 272 | #Rightbar .box:nth-child(2) .cell:nth-last-child(2) table td:nth-of-type(3) { 273 | position: fixed; 274 | right: 48px; 275 | bottom: 20px; 276 | width: 86px; 277 | height: 56px; 278 | visibility: visible; 279 | } 280 | #Rightbar table td:nth-of-type(3) a[href='/new'] { 281 | position: fixed; 282 | right: 94px; 283 | bottom: 28px; 284 | width: 40px; 285 | height: 40px; 286 | color: rgba(255, 255, 255, 0); 287 | visibility: visible; 288 | background: url("//play.cdn.w3cbus.com/v2ex-material-theme/icon/create.svg") no-repeat center #4caf50; 289 | opacity: 0; 290 | transform: scale(0); 291 | } 292 | #Main { 293 | margin: 0; 294 | } 295 | #Main > .box { 296 | border-radius: 0; 297 | box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24); 298 | border-bottom: none; 299 | background-color: #fff; 300 | color: #212121; 301 | } 302 | #Main > .box:nth-child(2) .cell { 303 | padding: 10px 20px; 304 | position: relative; 305 | } 306 | #Main > .box:nth-child(2) .cell .topic_info, 307 | #Main > .box:nth-child(2) .cell .small { 308 | visibility: hidden; 309 | } 310 | #Main > .box:nth-child(2) .cell .topic_info strong:nth-of-type(1), 311 | #Main > .box:nth-child(2) .cell .small strong:nth-of-type(1) { 312 | visibility: visible; 313 | position: absolute; 314 | left: 72px; 315 | font-size: 14px; 316 | } 317 | #Main > .box:nth-child(2) .cell .item_title { 318 | position: absolute; 319 | left: 256px; 320 | right: 78px; 321 | height: 24px; 322 | line-height: 24px; 323 | overflow: hidden; 324 | white-space: nowrap; 325 | text-overflow: ellipsis; 326 | } 327 | #Main > .box:nth-child(2) .cell .vote { 328 | display: none; 329 | } 330 | #Main > .box:nth-child(2) .cell .avatar { 331 | width: 28px; 332 | height: 28px; 333 | } 334 | .header { 335 | padding: 20px; 336 | } 337 | .topic_buttons { 338 | border-radius: 0; 339 | line-height: 36px; 340 | background: #e8e9ed; 341 | } 342 | .topic_buttons > div { 343 | line-height: 36px!important; 344 | } 345 | .topic_content, 346 | .reply_content, 347 | .inner, 348 | .payload { 349 | color: #212121; 350 | font: 400 14px/1.8 Avenir, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; 351 | } 352 | .mll, 353 | .sll, 354 | .mle { 355 | background-color: #fff; 356 | color: #212121; 357 | border: 1px solid #ddd; 358 | border-radius: 0; 359 | padding: 10px; 360 | width: 908px!important; 361 | } 362 | .no { 363 | background-color: #f0f0f0; 364 | color: #ccc; 365 | } 366 | .cell .avatar, 367 | .inner:last-child .avatar { 368 | width: 40px; 369 | height: 40px; 370 | } 371 | .subtle { 372 | padding: 20px; 373 | } 374 | .super.button { 375 | background-color: #4285f4; 376 | background-image: none; 377 | text-shadow: none; 378 | color: #fff; 379 | border: none!important; 380 | box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24); 381 | border-radius: 2px; 382 | line-height: 2.5; 383 | margin: 4px 0; 384 | padding: 0 16px; 385 | letter-spacing: 0.5px; 386 | transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1); 387 | } 388 | .super.button:hover { 389 | background-color: #3a76e5!important; 390 | color: #fff!important; 391 | border: none!important; 392 | text-shadow: none!important; 393 | box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28) !important; 394 | } 395 | .super.button:active { 396 | background-color: #3367d6!important; 397 | color: #fff!important; 398 | border: none!important; 399 | text-shadow: none!important; 400 | box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32) !important; 401 | } 402 | .super.button[disabled], 403 | .super.button.disable_now, 404 | .super.button[disabled]:hover, 405 | .super.button.disable_now:hover, 406 | .super.button[disabled]:active, 407 | .super.button.disable_now:active { 408 | background-color: rgba(0, 0, 0, 0.12) !important; 409 | color: rgba(0, 0, 0, 0.26) !important; 410 | box-shadow: none!important; 411 | text-shadow: none!important; 412 | } 413 | .page_current, 414 | .page_normal { 415 | border: none!important; 416 | box-shadow: none!important; 417 | border-radius: 2px!important; 418 | line-height: 2.5!important; 419 | margin: 4px 0!important; 420 | padding: 0 10px!important; 421 | letter-spacing: 0.5px; 422 | transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1); 423 | font-size: 13px!important; 424 | } 425 | .page_input { 426 | line-height: 30px!important; 427 | padding: 0 0 0 8px!important; 428 | width: 60px!important; 429 | box-shadow: none!important; 430 | } 431 | a[onclick^='deleteNotification'] { 432 | float: right; 433 | } 434 | .payload { 435 | background-color: rgba(255, 255, 255, 0); 436 | padding-top: 15px; 437 | } 438 | -------------------------------------------------------------------------------- /v2ex.less: -------------------------------------------------------------------------------- 1 | @icon-url: "//play.cdn.w3cbus.com/v2ex-material-theme/icon"; 2 | @font-color: #212121; 3 | @banner-color: #4285f4; 4 | @node-count: 6;//右侧显示的节点数量 5 | 6 | // 挡住页面内容的广告 7 | .adsbygoogle { 8 | display: none !important; 9 | } 10 | 11 | // fixed: https://github.com/zdhxiong/v2ex-material-theme/issues/6 12 | .box { 13 | backdrop-filter: none; 14 | } 15 | 16 | a:link, a:visited, a:active { 17 | color: #778087; 18 | } 19 | .cell, 20 | .header{ 21 | border-bottom: 1px solid #eaeaea; 22 | } 23 | .cell, 24 | .item, 25 | .inner{ 26 | padding: 20px; 27 | } 28 | .avatar{ 29 | border-radius: 100%!important; 30 | } 31 | 32 | //banner 33 | #Top{ 34 | background-image: none; 35 | background-color: @banner-color; 36 | height: 56px; 37 | font-size: 16px; 38 | position: fixed; 39 | top: 0; 40 | left: 0; 41 | right: 0; 42 | box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28); 43 | padding: 0 20px; 44 | z-index: 99; 45 | a{ 46 | color: #fff; 47 | } 48 | .content{ 49 | padding-top: 4px; 50 | } 51 | //logo 52 | td:first-child{ 53 | position: fixed; 54 | left: 20px; 55 | padding-top: 4px; 56 | cursor: pointer; 57 | } 58 | #Logo { 59 | background-image: url("@{icon-url}/logo@2x.png"); 60 | } 61 | //右侧图标 62 | td:last-child{ 63 | position: fixed; 64 | right: 20px; 65 | } 66 | } 67 | //搜索框 68 | #Search{ 69 | form{ 70 | div{ 71 | background: url("@{icon-url}/search.svg") no-repeat 10px center rgba(255, 255, 255, 0.15)!important; 72 | border-radius: 2px; 73 | height: 36px!important; 74 | width: 820px!important; 75 | &:hover{ 76 | background-color: rgba(255,255,255,.25)!important; 77 | } 78 | } 79 | input{ 80 | color: #fff; 81 | height: 36px; 82 | width: 760px; 83 | margin-left: 40px; 84 | } 85 | } 86 | } 87 | 88 | //banner右侧链接 89 | #Top td:last-child{ 90 | visibility: hidden; 91 | } 92 | #Top td:last-child a:last-child, 93 | #Top a[href='/settings'], 94 | #Rightbar .inner>a[href='/notifications'], 95 | #Rightbar .inner>strong>a[href='/notifications'], 96 | #Rightbar>.box:nth-child(2) td:first-child a[href^='/member/'], 97 | #Rightbar a[href='/mission/daily']{ 98 | visibility: visible; 99 | position: fixed; 100 | top: 10px; 101 | color:rgba(255,255,255,0); 102 | width: 36px; 103 | height: 36px; 104 | border-radius: 100%; 105 | overflow: hidden; 106 | } 107 | #Top td:last-child a:last-child:focus, 108 | #Top a[href='/settings']:focus, 109 | #Rightbar .inner>a[href='/notifications']:focus, 110 | #Rightbar .inner>strong>a[href='/notifications']:focus, 111 | #Rightbar a[href='/mission/daily']:focus{ 112 | background-color:rgba(0,0,0,.1); 113 | } 114 | //登出 115 | #Top td:last-child a:last-child{ 116 | right: 26px; 117 | background: url("@{icon-url}/exit_to_app.svg") no-repeat center; 118 | } 119 | //设置 120 | #Top a[href='/settings']{ 121 | right: 72px; 122 | background: url("@{icon-url}/settings.svg") no-repeat center; 123 | } 124 | //没有新消息 125 | #Rightbar .inner>a[href='/notifications']{ 126 | right: 120px; 127 | background: url("@{icon-url}/notifications_none.svg") no-repeat center; 128 | } 129 | //有新消息 130 | #Rightbar .inner>strong>a[href='/notifications']{ 131 | right: 120px; 132 | background: url("@{icon-url}/notifications_none_hl.svg") no-repeat center; 133 | } 134 | //头像 135 | #Rightbar>.box:nth-child(2) td:first-child a[href^='/member/']{ 136 | right: 180px; 137 | .avatar{ 138 | width: 36px; 139 | height: 36px; 140 | } 141 | } 142 | //签到链接 143 | #Rightbar a[href='/mission/daily']{ 144 | right: 240px; 145 | background: url("@{icon-url}/wallet_giftcard_hl.svg") no-repeat center; 146 | } 147 | 148 | @media only screen and (max-width : 1400px) { 149 | #Top{ 150 | form div{ 151 | width: 276px!important; 152 | } 153 | form input{ 154 | width: 236px; 155 | } 156 | } 157 | #Search{ 158 | position: fixed; 159 | left: 140px; 160 | } 161 | } 162 | 163 | #Wrapper{ 164 | background-color: #ececec; 165 | padding-top: 80px; 166 | } 167 | 168 | #Rightbar{ 169 | visibility: hidden; 170 | position: fixed; 171 | z-index: 999; 172 | } 173 | 174 | //右下角的按钮们 175 | #MyNodes .node a:nth-of-type(1), 176 | #Rightbar>.sep20:first-child, 177 | #Rightbar table td:nth-of-type(3) a[href='/new']{ 178 | border-radius: 100%; 179 | box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28); 180 | transition: all 150ms cubic-bezier(.25,.25,0,1); 181 | &:hover{ 182 | box-shadow: 0 0 6px rgba(0,0,0,.16),0 6px 12px rgba(0,0,0,.32); 183 | transition: box-shadow 150ms cubic-bezier(0,0,.2,1); 184 | } 185 | &:active{ 186 | box-shadow: 0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36); 187 | } 188 | } 189 | 190 | //收藏的节点 191 | #MyNodes{ 192 | visibility: visible; 193 | position: fixed; 194 | right: 20px; 195 | bottom: 48px; 196 | width: 56px; 197 | height: @node-count * 58px + 24px; 198 | background-color: transparent; 199 | .node{ 200 | padding: 0; 201 | position: relative; 202 | height: 58px; 203 | text-align: right; 204 | &:hover{ 205 | background: none; 206 | border: none; 207 | box-shadow: none; 208 | } 209 | a:last-child{ 210 | position: absolute; 211 | display: none; 212 | right: 60px; 213 | top: 8px; 214 | white-space:nowrap; 215 | background: rgba(70,70,70,.9); 216 | border-radius: 2px; 217 | box-shadow: 0 1px 2px rgba(0,0,0,.15); 218 | color: #ececec; 219 | font-weight: bold; 220 | line-height: 1em; 221 | font-size: 12px; 222 | min-width: 20px; 223 | max-width: 200px; 224 | overflow: hidden; 225 | padding: 6px 8px; 226 | text-overflow: ellipsis; 227 | vertical-align: middle; 228 | text-decoration:none; 229 | opacity: 0; 230 | transition: opacity 150ms cubic-bezier(.4,0,1,1); 231 | } 232 | a:nth-of-type(1){ 233 | position: absolute; 234 | top: 0; 235 | right: 8px;; 236 | width: 40px; 237 | height: 40px; 238 | opacity: 0; 239 | transform: scale(0); 240 | &:hover{ 241 | +a{ 242 | display: block; 243 | opacity: 1; 244 | transition-delay: 10ms; 245 | transition: opacity 150ms cubic-bezier(0,0,.2,1); 246 | } 247 | } 248 | img{ 249 | width: 40px; 250 | height: 40px; 251 | border-radius: 100%; 252 | } 253 | } 254 | } 255 | .node_compose{ 256 | display:none; 257 | } 258 | } 259 | 260 | //右下角图标 261 | #Rightbar>.sep20:first-child{ 262 | position: fixed; 263 | right: 20px; 264 | bottom: 20px; 265 | width: 56px; 266 | height: 56px; 267 | color:rgba(255,255,255,0); 268 | visibility: visible; 269 | background: url("@{icon-url}/add.svg") no-repeat center #db4437; 270 | z-index: 99; 271 | cursor: pointer; 272 | } 273 | 274 | //节点和发表按钮 275 | #Rightbar>.sep20:first-child:hover ~.box #MyNodes .node:nth-child(-n+@{node-count}) a:nth-of-type(1), 276 | #MyNodes:hover .node:nth-child(-n+@{node-count}) a:nth-of-type(1), 277 | #Rightbar>.sep20:first-child:hover ~.box table td:nth-of-type(3) a[href='/new'], 278 | #Rightbar .box:nth-child(2) .cell:nth-last-child(2) table td:nth-of-type(3):hover a[href='/new']{ 279 | opacity: 1; 280 | transform: scale(1); 281 | transition: all 150ms cubic-bezier(.25, .25, 0, 1); 282 | } 283 | 284 | //显示节点的动画 285 | #Rightbar>.sep20:first-child:hover ~.box #MyNodes, 286 | #MyNodes:hover{ 287 | //收藏节点动画 288 | .loopNodeAnimate (@index) when (@index<=@node-count){ 289 | .node:nth-child(@{index}) a:nth-of-type(1){ 290 | transition-delay: (@node-count - @index) * 15ms; 291 | } 292 | .loopNodeAnimate(@index + 1); 293 | } 294 | .loopNodeAnimate(1); 295 | } 296 | 297 | //显示发表按钮 298 | #Rightbar .box:nth-child(2) .cell:nth-last-child(2) table td:nth-of-type(3){ 299 | position: fixed; 300 | right: 48px; 301 | bottom: 20px; 302 | width: 86px; 303 | height: 56px; 304 | visibility: visible; 305 | } 306 | #Rightbar table td:nth-of-type(3) a[href='/new']{ 307 | position: fixed; 308 | right: 94px; 309 | bottom: 28px; 310 | width: 40px; 311 | height: 40px; 312 | color:rgba(255,255,255,0); 313 | visibility: visible; 314 | background: url("@{icon-url}/create.svg") no-repeat center #4caf50; 315 | opacity: 0; 316 | transform: scale(0); 317 | } 318 | 319 | #Main{ 320 | margin: 0; 321 | >.box{ 322 | border-radius: 0; 323 | box-shadow: 0 -1px 0 #e5e5e5,0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24); 324 | border-bottom: none; 325 | background-color: #fff; 326 | color: @font-color; 327 | } 328 | //话题列表 329 | >.box:nth-child(2){ 330 | .cell{ 331 | padding: 10px 20px; 332 | position: relative; 333 | .topic_info, 334 | .small { 335 | visibility: hidden; 336 | strong:nth-of-type(1) { 337 | visibility: visible; 338 | position: absolute; 339 | left: 72px; 340 | font-size: 14px; 341 | } 342 | } 343 | .item_title{ 344 | position: absolute; 345 | left: 256px; 346 | right: 78px; 347 | height: 24px; 348 | line-height: 24px; 349 | overflow: hidden; 350 | white-space: nowrap; 351 | text-overflow: ellipsis; 352 | } 353 | .vote{ 354 | display: none; 355 | } 356 | .avatar{ 357 | width: 28px; 358 | height: 28px; 359 | } 360 | } 361 | } 362 | } 363 | 364 | //话题内容 365 | .header{ 366 | padding: 20px; 367 | } 368 | .topic_buttons{ 369 | border-radius: 0; 370 | line-height: 36px; 371 | background: #e8e9ed; 372 | >div{ 373 | line-height: 36px!important; 374 | } 375 | } 376 | .topic_content, 377 | .reply_content, 378 | .inner, 379 | .payload{ 380 | color: @font-color; 381 | font: 400 14px/1.8 Avenir, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; 382 | } 383 | .mll, .sll, .mle { 384 | background-color: #fff; 385 | color: @font-color; 386 | border: 1px solid #ddd; 387 | border-radius: 0; 388 | padding: 10px; 389 | width: 908px!important; 390 | } 391 | .no{ 392 | background-color: #f0f0f0; 393 | color: #ccc; 394 | } 395 | .cell, 396 | .inner:last-child{ 397 | .avatar{ 398 | width: 40px; 399 | height: 40px; 400 | } 401 | } 402 | .subtle{ 403 | padding: 20px; 404 | } 405 | 406 | //按钮 407 | .super.button{ 408 | background-color: @banner-color; 409 | background-image: none; 410 | text-shadow: none; 411 | color: #fff; 412 | border: none!important; 413 | box-shadow: 0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24); 414 | border-radius: 2px; 415 | line-height: 2.5; 416 | margin: 4px 0; 417 | padding: 0 16px; 418 | letter-spacing: 0.5px; 419 | transition: box-shadow .2s cubic-bezier(.4,0,.2,1),background-color .2s cubic-bezier(.4,0,.2,1); 420 | &:hover{ 421 | background-color: #3a76e5!important; 422 | color: #fff!important; 423 | border: none!important; 424 | text-shadow: none!important; 425 | box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28)!important; 426 | } 427 | &:active{ 428 | background-color: #3367d6!important; 429 | color: #fff!important; 430 | border: none!important; 431 | text-shadow: none!important; 432 | box-shadow: 0 0 6px rgba(0,0,0,.16),0 6px 12px rgba(0,0,0,.32)!important; 433 | } 434 | &[disabled], 435 | &.disable_now{ 436 | &, 437 | &:hover, 438 | &:active{ 439 | background-color: rgba(0,0,0,.12)!important; 440 | color: rgba(0,0,0,.26)!important; 441 | box-shadow: none!important; 442 | text-shadow: none!important; 443 | } 444 | } 445 | } 446 | 447 | //分页页码 448 | .page_current, 449 | .page_normal{ 450 | border: none!important; 451 | box-shadow: none!important; 452 | border-radius: 2px!important; 453 | line-height: 2.5!important; 454 | margin: 4px 0!important; 455 | padding: 0 10px!important; 456 | letter-spacing: 0.5px; 457 | transition: box-shadow .2s cubic-bezier(.4,0,.2,1),background-color .2s cubic-bezier(.4,0,.2,1); 458 | font-size: 13px!important; 459 | } 460 | //分页输入框 461 | .page_input{ 462 | line-height: 30px!important; 463 | padding: 0 0 0 8px!important; 464 | width: 60px!important; 465 | box-shadow: none!important; 466 | } 467 | 468 | //消息页面 469 | //消息页面删除按钮右浮 470 | a[onclick^='deleteNotification']{ 471 | float: right; 472 | } 473 | //去掉消息内容的背景 474 | .payload{ 475 | background-color: rgba(255,255,255,0); 476 | padding-top: 15px; 477 | } 478 | -------------------------------------------------------------------------------- /v2ex.min.css: -------------------------------------------------------------------------------- 1 | .adsbygoogle{display:none !important}.box{backdrop-filter:none}a:link,a:visited,a:active{color:#778087}.cell,.header{border-bottom:1px solid #eaeaea}.cell,.item,.inner{padding:20px}.avatar{border-radius:100% !important}#Top{background-image:none;background-color:#4285f4;height:56px;font-size:16px;position:fixed;top:0;left:0;right:0;box-shadow:0 0 4px rgba(0,0,0,0.14),0 4px 8px rgba(0,0,0,0.28);padding:0 20px;z-index:99}#Top a{color:#fff}#Top .content{padding-top:4px}#Top td:first-child{position:fixed;left:20px;padding-top:4px;cursor:pointer}#Top #Logo{background-image:url("//play.cdn.w3cbus.com/v2ex-material-theme/icon/logo@2x.png")}#Top td:last-child{position:fixed;right:20px}#Search form div{background:url("//play.cdn.w3cbus.com/v2ex-material-theme/icon/search.svg") no-repeat 10px center rgba(255,255,255,0.15) !important;border-radius:2px;height:36px !important;width:820px !important}#Search form div:hover{background-color:rgba(255,255,255,0.25) !important}#Search form input{color:#fff;height:36px;width:760px;margin-left:40px}#Top td:last-child{visibility:hidden}#Top td:last-child a:last-child,#Top a[href='/settings'],#Rightbar .inner>a[href='/notifications'],#Rightbar .inner>strong>a[href='/notifications'],#Rightbar>.box:nth-child(2) td:first-child a[href^='/member/'],#Rightbar a[href='/mission/daily']{visibility:visible;position:fixed;top:10px;color:rgba(255,255,255,0);width:36px;height:36px;border-radius:100%;overflow:hidden}#Top td:last-child a:last-child:focus,#Top a[href='/settings']:focus,#Rightbar .inner>a[href='/notifications']:focus,#Rightbar .inner>strong>a[href='/notifications']:focus,#Rightbar a[href='/mission/daily']:focus{background-color:rgba(0,0,0,0.1)}#Top td:last-child a:last-child{right:26px;background:url("//play.cdn.w3cbus.com/v2ex-material-theme/icon/exit_to_app.svg") no-repeat center}#Top a[href='/settings']{right:72px;background:url("//play.cdn.w3cbus.com/v2ex-material-theme/icon/settings.svg") no-repeat center}#Rightbar .inner>a[href='/notifications']{right:120px;background:url("//play.cdn.w3cbus.com/v2ex-material-theme/icon/notifications_none.svg") no-repeat center}#Rightbar .inner>strong>a[href='/notifications']{right:120px;background:url("//play.cdn.w3cbus.com/v2ex-material-theme/icon/notifications_none_hl.svg") no-repeat center}#Rightbar>.box:nth-child(2) td:first-child a[href^='/member/']{right:180px}#Rightbar>.box:nth-child(2) td:first-child a[href^='/member/'] .avatar{width:36px;height:36px}#Rightbar a[href='/mission/daily']{right:240px;background:url("//play.cdn.w3cbus.com/v2ex-material-theme/icon/wallet_giftcard_hl.svg") no-repeat center}@media only screen and (max-width:1400px){#Top form div{width:276px !important}#Top form input{width:236px}#Search{position:fixed;left:140px}}#Wrapper{background-color:#ececec;padding-top:80px}#Rightbar{visibility:hidden;position:fixed;z-index:999}#MyNodes .node a:nth-of-type(1),#Rightbar>.sep20:first-child,#Rightbar table td:nth-of-type(3) a[href='/new']{border-radius:100%;box-shadow:0 0 4px rgba(0,0,0,0.14),0 4px 8px rgba(0,0,0,0.28);transition:all 150ms cubic-bezier(.25, .25, 0, 1)}#MyNodes .node a:nth-of-type(1):hover,#Rightbar>.sep20:first-child:hover,#Rightbar table td:nth-of-type(3) a[href='/new']:hover{box-shadow:0 0 6px rgba(0,0,0,0.16),0 6px 12px rgba(0,0,0,0.32);transition:box-shadow 150ms cubic-bezier(0, 0, .2, 1)}#MyNodes .node a:nth-of-type(1):active,#Rightbar>.sep20:first-child:active,#Rightbar table td:nth-of-type(3) a[href='/new']:active{box-shadow:0 0 8px rgba(0,0,0,0.18),0 8px 16px rgba(0,0,0,0.36)}#MyNodes{visibility:visible;position:fixed;right:20px;bottom:48px;width:56px;height:372px;background-color:transparent}#MyNodes .node{padding:0;position:relative;height:58px;text-align:right}#MyNodes .node:hover{background:none;border:none;box-shadow:none}#MyNodes .node a:last-child{position:absolute;display:none;right:60px;top:8px;white-space:nowrap;background:rgba(70,70,70,0.9);border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,0.15);color:#ececec;font-weight:bold;line-height:1em;font-size:12px;min-width:20px;max-width:200px;overflow:hidden;padding:6px 8px;text-overflow:ellipsis;vertical-align:middle;text-decoration:none;opacity:0;transition:opacity 150ms cubic-bezier(.4, 0, 1, 1)}#MyNodes .node a:nth-of-type(1){position:absolute;top:0;right:8px;width:40px;height:40px;opacity:0;transform:scale(0)}#MyNodes .node a:nth-of-type(1):hover+a{display:block;opacity:1;transition-delay:10ms;transition:opacity 150ms cubic-bezier(0, 0, .2, 1)}#MyNodes .node a:nth-of-type(1) img{width:40px;height:40px;border-radius:100%}#MyNodes .node_compose{display:none}#Rightbar>.sep20:first-child{position:fixed;right:20px;bottom:20px;width:56px;height:56px;color:rgba(255,255,255,0);visibility:visible;background:url("//play.cdn.w3cbus.com/v2ex-material-theme/icon/add.svg") no-repeat center #db4437;z-index:99;cursor:pointer}#Rightbar>.sep20:first-child:hover~.box #MyNodes .node:nth-child(-n+6) a:nth-of-type(1),#MyNodes:hover .node:nth-child(-n+6) a:nth-of-type(1),#Rightbar>.sep20:first-child:hover~.box table td:nth-of-type(3) a[href='/new'],#Rightbar .box:nth-child(2) .cell:nth-last-child(2) table td:nth-of-type(3):hover a[href='/new']{opacity:1;transform:scale(1);transition:all 150ms cubic-bezier(.25, .25, 0, 1)}#Rightbar>.sep20:first-child:hover~.box #MyNodes .node:nth-child(1) a:nth-of-type(1),#MyNodes:hover .node:nth-child(1) a:nth-of-type(1){transition-delay:75ms}#Rightbar>.sep20:first-child:hover~.box #MyNodes .node:nth-child(2) a:nth-of-type(1),#MyNodes:hover .node:nth-child(2) a:nth-of-type(1){transition-delay:60ms}#Rightbar>.sep20:first-child:hover~.box #MyNodes .node:nth-child(3) a:nth-of-type(1),#MyNodes:hover .node:nth-child(3) a:nth-of-type(1){transition-delay:45ms}#Rightbar>.sep20:first-child:hover~.box #MyNodes .node:nth-child(4) a:nth-of-type(1),#MyNodes:hover .node:nth-child(4) a:nth-of-type(1){transition-delay:30ms}#Rightbar>.sep20:first-child:hover~.box #MyNodes .node:nth-child(5) a:nth-of-type(1),#MyNodes:hover .node:nth-child(5) a:nth-of-type(1){transition-delay:15ms}#Rightbar>.sep20:first-child:hover~.box #MyNodes .node:nth-child(6) a:nth-of-type(1),#MyNodes:hover .node:nth-child(6) a:nth-of-type(1){transition-delay:0ms}#Rightbar .box:nth-child(2) .cell:nth-last-child(2) table td:nth-of-type(3){position:fixed;right:48px;bottom:20px;width:86px;height:56px;visibility:visible}#Rightbar table td:nth-of-type(3) a[href='/new']{position:fixed;right:94px;bottom:28px;width:40px;height:40px;color:rgba(255,255,255,0);visibility:visible;background:url("//play.cdn.w3cbus.com/v2ex-material-theme/icon/create.svg") no-repeat center #4caf50;opacity:0;transform:scale(0)}#Main{margin:0}#Main>.box{border-radius:0;box-shadow:0 -1px 0 #e5e5e5,0 0 2px rgba(0,0,0,0.12),0 2px 4px rgba(0,0,0,0.24);border-bottom:none;background-color:#fff;color:#212121}#Main>.box:nth-child(2) .cell{padding:10px 20px;position:relative}#Main>.box:nth-child(2) .cell .topic_info,#Main>.box:nth-child(2) .cell .small{visibility:hidden}#Main>.box:nth-child(2) .cell .topic_info strong:nth-of-type(1),#Main>.box:nth-child(2) .cell .small strong:nth-of-type(1){visibility:visible;position:absolute;left:72px;font-size:14px}#Main>.box:nth-child(2) .cell .item_title{position:absolute;left:256px;right:78px;height:24px;line-height:24px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#Main>.box:nth-child(2) .cell .vote{display:none}#Main>.box:nth-child(2) .cell .avatar{width:28px;height:28px}.header{padding:20px}.topic_buttons{border-radius:0;line-height:36px;background:#e8e9ed}.topic_buttons>div{line-height:36px !important}.topic_content,.reply_content,.inner,.payload{color:#212121;font:400 14px/1.8 Avenir,Microsoft Yahei,Hiragino Sans GB,Microsoft Sans Serif,WenQuanYi Micro Hei,sans-serif}.mll,.sll,.mle{background-color:#fff;color:#212121;border:1px solid #ddd;border-radius:0;padding:10px;width:908px !important}.no{background-color:#f0f0f0;color:#ccc}.cell .avatar,.inner:last-child .avatar{width:40px;height:40px}.subtle{padding:20px}.super.button{background-color:#4285f4;background-image:none;text-shadow:none;color:#fff;border:none !important;box-shadow:0 0 2px rgba(0,0,0,0.12),0 2px 4px rgba(0,0,0,0.24);border-radius:2px;line-height:2.5;margin:4px 0;padding:0 16px;letter-spacing:.5px;transition:box-shadow .2s cubic-bezier(.4, 0, .2, 1),background-color .2s cubic-bezier(.4, 0, .2, 1)}.super.button:hover{background-color:#3a76e5 !important;color:#fff !important;border:none !important;text-shadow:none !important;box-shadow:0 0 4px rgba(0,0,0,0.14),0 4px 8px rgba(0,0,0,0.28) !important}.super.button:active{background-color:#3367d6 !important;color:#fff !important;border:none !important;text-shadow:none !important;box-shadow:0 0 6px rgba(0,0,0,0.16),0 6px 12px rgba(0,0,0,0.32) !important}.super.button[disabled],.super.button.disable_now,.super.button[disabled]:hover,.super.button.disable_now:hover,.super.button[disabled]:active,.super.button.disable_now:active{background-color:rgba(0,0,0,0.12) !important;color:rgba(0,0,0,0.26) !important;box-shadow:none !important;text-shadow:none !important}.page_current,.page_normal{border:none !important;box-shadow:none !important;border-radius:2px !important;line-height:2.5 !important;margin:4px 0 !important;padding:0 10px !important;letter-spacing:.5px;transition:box-shadow .2s cubic-bezier(.4, 0, .2, 1),background-color .2s cubic-bezier(.4, 0, .2, 1);font-size:13px !important}.page_input{line-height:30px !important;padding:0 0 0 8px !important;width:60px !important;box-shadow:none !important}a[onclick^='deleteNotification']{float:right}.payload{background-color:rgba(255,255,255,0);padding-top:15px} --------------------------------------------------------------------------------