├── README.md ├── LICENSE ├── githubmd.user.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # GitHub Material Design 2 | GitHub in Material Design 3 | 4 | # Installation 5 | Install it with [Stylish](https://userstyles.org/) or [Stylus](https://add0n.com/stylus.html) from this [link](https://userstyles.org/styles/123952/github-material-design) 6 | 7 | # Extra 8 | To enable extra you need to install the [TamperMonkey](https://www.tampermonkey.net/) extension for your browser and download the script from the repo: open the githubmd.user.js file and click the raw button. Click the install button 9 | 10 | Current extra features: 11 | - New fancy inputs 12 | 13 | # Credits 14 | Thanks to: [github-notification-bouncing](https://github.com/muchweb/github-notification-bouncing), [GitHub issue link inline titles](https://userstyles.org/styles/106817/github-issue-link-inline-titles), [Ripple effect](https://github.com/Kvaibhav01/Ripple-without-JS), [Bootstrap 4 Inputs](http://jsfiddle.net/sedvo037/) and [Maicol Battistini (maicol07)](https://maicol07.it) 15 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /githubmd.user.js: -------------------------------------------------------------------------------- 1 | // ==UserScript== 2 | // @name Github Material Design Extras 3 | // @namespace http://tampermonkey.net/ 4 | // @version 0.1 5 | // @description Extra features to the Github Material Design theme 6 | // @author maicol07 7 | // @icon https://github.githubassets.com/pinned-octocat.svg 8 | // @match https://github.com/* 9 | // @grant none 10 | // @require https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js 11 | // ==/UserScript== 12 | 13 | (function() { 14 | 'use strict'; 15 | 16 | // INPUTS CLASS INJECTION 17 | $('.input-contrast:not(.header-search-input)').addClass('form_control'); 18 | $('label + .input-contrast:not(.header-search-input)').wrapAll('
'); 19 | 20 | // INPUTS ACTIVATION 21 | $(document).ready(function() { 22 | $(".form_control").click(function() { 23 | $(this).parent().addClass("label-animate"); 24 | }); 25 | 26 | $(window).click(function() { 27 | if (!$(event.target).is('.form_control')) { 28 | $(".form_control").each(function() { 29 | if ($(this).val() == '') { 30 | $(this).parent().removeClass("label-animate"); 31 | } 32 | }); 33 | } 34 | }); 35 | }); 36 | 37 | })(); 38 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @-moz-document domain("github.com") { 2 | /* 3 | (c) 2012-2016 GitHub 4 | 5 | When using the GitHub logos, be sure to follow the GitHub logo guidelines (https://github.com/logos) 6 | 7 | Code License: MIT (http://choosealicense.com/licenses/mit/) 8 | Applies to all other files 9 | */ 10 | /* 11 | github-notification-bouncing 12 | https://github.com/muchweb/github-notification-bouncing 13 | */ 14 | @keyframes bounce { 15 | to { 16 | transform: scale(1.4); 17 | opacity: 1; 18 | } 19 | } 20 | 21 | @keyframes shrink { 22 | 0%, 23 | 50% { 24 | width: 14px; 25 | height: 14px; 26 | box-shadow: 0 0 8px transparent; 27 | } 28 | } 29 | 30 | .mail-status.unread { 31 | animation: bounce .5s ease-out infinite alternate, shrink 60s linear; 32 | width: 16px; 33 | height: 16px; 34 | opacity: 0.9; 35 | transform: scale(1); 36 | box-shadow: 0 0 8px #4183C4; 37 | } 38 | 39 | /* 40 | GitHub issue link inline titles 41 | https://userstyles.org/styles/106817/github-issue-link-inline-titles 42 | */ 43 | .issue-link[title]:after { 44 | content: attr(title); 45 | font-size: 0.8em; 46 | margin-left: 0.4em; 47 | margin-right: 0.6em; 48 | padding: 0.2em 0.4em; 49 | border: 1px solid #ccc; 50 | background: #eee; 51 | color: #777; 52 | position: relative; 53 | top: -1px; 54 | } 55 | 56 | .header { 57 | padding-top: 15px; 58 | padding-bottom: 15px; 59 | } 60 | 61 | .header, 62 | .blankslate, 63 | .header-logged-in, 64 | .org-header, 65 | .simple-box, 66 | .menu, 67 | .capped-card, 68 | .file-header, 69 | .file, 70 | .network-graph-container, 71 | .js-code-editor, 72 | .container-preview, 73 | .show-code, 74 | .auth-form-body, 75 | .repohead.experiment-repo-nav, 76 | .file-wrap, 77 | .branch-infobar, 78 | .commit-tease:not(.js-details-container), 79 | .Box, 80 | .overall-summary, 81 | .stats-switcher-viewport, 82 | .table-list, 83 | .table-list-header, 84 | .new-user-avatar-cta, 85 | .comment, 86 | .previewable-edit, 87 | .timeline-comment, 88 | .js-comment, 89 | .js-task-list-container, 90 | .owner-comment, 91 | .current-user, 92 | .activity-listing.contribution-activity.js-contribution-activity, 93 | .boxed-group { 94 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2) !important; 95 | border: none; 96 | border-radius: 4px; 97 | } 98 | 99 | .repository-lang-stats-graph .language-color { 100 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2) !important; 101 | } 102 | 103 | .header-nav-link { 104 | margin-top: 5px; 105 | } 106 | 107 | .header-logo-invertocat { 108 | margin-top: 3px; 109 | } 110 | 111 | .site-search, 112 | #your-repos-filter, 113 | .input-block, 114 | .filter_input, 115 | .short, 116 | .js-repository-name, 117 | .js-filterable-field, 118 | .select, 119 | .subnav-search-input, 120 | .input-contrast, 121 | .auto-search-input, 122 | .js-autosearch-field, 123 | .js-member-filter-field, 124 | .filename, 125 | .js-gist-filename, 126 | .js-blob-filename, 127 | #user_profile_name, 128 | #user_profile_blog, 129 | #user_profile_company, 130 | #user_profile_location, 131 | #user_old_password, 132 | #user_new_password, 133 | #user_confirm_new_password, 134 | #q { 135 | font-size: 14px; 136 | border-color: transparent !important; 137 | box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 1px rgba(0, 0, 0, .12) !important; 138 | -webkit-transition: box-shadow .2s !important; 139 | transition: box-shadow .2s !important; 140 | border-radius: 2px !important; 141 | box-sizing: border-box !important; 142 | background: white; 143 | } 144 | 145 | #rename_field { 146 | line-height: 8px !important; 147 | } 148 | 149 | .form-control { 150 | padding: 5px 8px; 151 | margin: 1px; 152 | } 153 | 154 | .form-control > input { 155 | border-color: transparent!important; 156 | line-height: 40px!important; 157 | height: 40px!important; 158 | box-shadow: 0 1px 1.5px rgba(0, 0, 0, .06), 0 1px 1px rgba(0, 0, 0, .12)!important; 159 | -webkit-transition: box-shadow .2s!important; 160 | transition: box-shadow .2s!important; 161 | border-radius: 2px!important; 162 | box-sizing: border-box!important; 163 | background: #fff!important; 164 | padding: 5px; 165 | } 166 | 167 | .form-control, 168 | :not(.CodeMirror.cm-s-github-light), 169 | .form-select { 170 | border: 0; 171 | height: 40px!important; 172 | } 173 | 174 | .form-control.focus, 175 | .form-control:focus, 176 | .form-select.focus, 177 | .form-select:focus { 178 | border: 0; 179 | outline: none; 180 | box-shadow: none; 181 | } 182 | 183 | .form-control { 184 | padding: 0; 185 | margin: 0; 186 | } 187 | 188 | .site-search .chromeless-input { 189 | width: 260px; 190 | height: 30px !important; 191 | min-height: 0; 192 | } 193 | 194 | .site-search .scope-badge { 195 | margin-left: 1px; 196 | padding: 0 5px; 197 | line-height: 26px; 198 | vertical-align: initial; 199 | } 200 | 201 | .subnav-search-input, 202 | .input-contrast, 203 | .auto-search-input, 204 | .js-repo-filter-field, 205 | .js-autosearch-field, 206 | .site-search form { 207 | width: 360px; 208 | padding-right: 2px; 209 | margin-right: 0; 210 | } 211 | 212 | .form-control.focus, 213 | .form-control:focus, 214 | input[type="text"].focus, 215 | input[type="text"]:focus, 216 | .focused .drag-and-drop, 217 | input[type="password"].focus, 218 | input[type="password"]:focus, 219 | input[type="email"].focus, 220 | input[type="email"]:focus, 221 | input[type="number"].focus, 222 | input[type="number"]:focus, 223 | input[type="tel"].focus, 224 | input[type="tel"]:focus, 225 | input[type="url"].focus, 226 | input[type="url"]:focus, 227 | select.focus, 228 | select:focus, 229 | textarea.focus, 230 | textarea:focus { 231 | border-color: #fff; 232 | box-shadow: none; 233 | } 234 | 235 | .header-search-input { 236 | color: black !important; 237 | } 238 | 239 | #js-issues-search { 240 | padding-left: 30px; 241 | } 242 | 243 | /* Button styles with Ripple (https://github.com/mladenplavsic/css-ripple-effect) */ 244 | .btn, 245 | .subnav-item, 246 | .state, 247 | .btn-sm, 248 | .hx_reponav a.reponav-item, 249 | .social-count, 250 | .Header-link, 251 | .dropdown-item, 252 | .select-menu-item { 253 | box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 1px rgba(0, 0, 0, .12) !important; 254 | text-decoration: none; 255 | text-align: center; 256 | letter-spacing: 0; 257 | transition: .2s ease-in; 258 | cursor: pointer; 259 | position: relative; 260 | overflow: hidden; 261 | transform: translate3d(0, 0, 0); 262 | } 263 | 264 | .btn:after, 265 | .subnav-item:after, 266 | .state:after, 267 | .btn-sm:after, 268 | .hx_reponav a.reponav-item:after, 269 | .social-count:after, 270 | .Header-link:after, 271 | .dropdown-item:after, 272 | .select-menu-item:after { 273 | content: ""; 274 | display: block; 275 | position: absolute; 276 | width: 100%; 277 | height: 100%; 278 | top: 0; 279 | left: 0; 280 | pointer-events: none; 281 | background-image: radial-gradient(circle, #888 10%, transparent 10.01%); 282 | background-repeat: no-repeat; 283 | background-position: 50%; 284 | transform: scale(10, 10); 285 | opacity: 0; 286 | transition: transform .5s, opacity 1s; 287 | } 288 | 289 | .btn-primary:after { 290 | background-image: radial-gradient(circle, #fff 10%, transparent 10.01%); 291 | } 292 | 293 | .btn:active:after, 294 | .subnav-item:active:after, 295 | .state:active:after, 296 | .btn-sm:active:after, 297 | .hx_reponav a.reponav-item:active:after, 298 | .social-count:active:after, 299 | .Header-link:active:after, 300 | .dropdown-item:active:after, 301 | .select-menu-item:active:after { 302 | transform: scale(0, 0); 303 | opacity: .3; 304 | transition: 0s; 305 | } 306 | 307 | input.btn { 308 | padding: 6px 8px; 309 | } 310 | 311 | .btn-primary, 312 | .btn-primary:hover { 313 | background-image: linear-gradient(#66BB6A, #4CAF50); 314 | } 315 | 316 | .profilecols .filter-bar { 317 | padding: 15px 8px 15px; 318 | } 319 | 320 | .tabnav { 321 | padding-bottom: 0; 322 | } 323 | 324 | body.page-profile .tab-content { 325 | padding-bottom: 15px; 326 | } 327 | 328 | .repo-list-item { 329 | padding: 30px 20px 30px 20px; 330 | } 331 | 332 | .activity-tab { 333 | padding-top: 15px; 334 | } 335 | 336 | .pagehead { 337 | padding-bottom: 0; 338 | } 339 | 340 | .tabnav-tab, 341 | .pagehead-tabs-item, 342 | .hx_reponav a.reponav-item, 343 | .pagehead-nav-item { 344 | padding: 15px 12px !important; 345 | height: 54px; 346 | } 347 | 348 | .tabnav-tabs, 349 | .pagehead-tabs { 350 | margin-bottom: 0; 351 | } 352 | 353 | .tabnav-tab.selected, 354 | .pagehead-tabs-item.selected, 355 | a.repo-filter.text-small.text-muted.js-repo-filter-tab.filter-selected, 356 | .reponav-item.selected, 357 | .pagehead-nav-item.selected { 358 | background-color: #f0f0f0 !important; 359 | border-top: 0; 360 | border-left: 0; 361 | border-right: 0; 362 | border-bottom: 3px solid #4285f4; 363 | color: #4285f4; 364 | margin: 2px 0px 0; 365 | } 366 | 367 | .activity-listing.contribution-activity.js-contribution-activity { 368 | padding: 15px; 369 | border-radius: 4px; 370 | } 371 | 372 | div.select-menu.right.js-menu-container.js-select-menu.js-period-container { 373 | padding-top: 25px; 374 | } 375 | 376 | .state { 377 | text-transform: uppercase; 378 | padding: 3px; 379 | } 380 | 381 | .state-closed, 382 | .bar-section-negative { 383 | background-color: #E53935 !important; 384 | } 385 | 386 | .state-merged, 387 | .bar-section-alt { 388 | background-color: #7B1FA2 !important; 389 | } 390 | 391 | .state-open, 392 | .bar-section-positive { 393 | background-color: #43A047 !important; 394 | } 395 | 396 | .Box--overlay { 397 | border: none !important; 398 | border-color: unset !important; 399 | border-radius: 4px; 400 | box-shadow: 0 0 18px rgba(0, 0, 0, .4) !important; 401 | } 402 | 403 | /* PR Button fix - No ripple, unfortunately */ 404 | .js-mrege-method-menu-button::after, 405 | .select-menu-button::after { 406 | transform: unset !important; 407 | opacity: unset !important; 408 | top: unset; 409 | left: unset; 410 | width: unset; 411 | height: unset; 412 | display: inline-block; 413 | position: relative; 414 | } 415 | 416 | /* PR Selects fix */ 417 | .select-menu-list .select-menu-item { 418 | display: block; 419 | } 420 | 421 | /* Fix shadow on some elements */ 422 | .hx_reponav a.reponav-item, 423 | .dropdown-item { 424 | box-shadow: unset !important; 425 | } 426 | 427 | .dropdown-item { 428 | text-align: unset; 429 | display: block; 430 | } 431 | 432 | /* Fix for dialogs shadow */ 433 | summary.btn.btn-danger.boxed-action { 434 | transform: unset; 435 | } 436 | 437 | /* Extra Inputs */ 438 | .form_control { 439 | border-color: revert !important; 440 | } 441 | 442 | .form_group > label { 443 | top: 31px; 444 | left: 15px; 445 | position: relative; 446 | padding: 0px 5px 0px 5px; 447 | font-size: 1.1em; 448 | transition: 0.2s; 449 | pointer-events: none; 450 | } 451 | 452 | .form_group.label-animate > label { 453 | background-color: white; 454 | top: 12px !important; 455 | left: 16px !important; 456 | font-size: 0.9em; 457 | } 458 | 459 | .form_control:focus { 460 | background-color: unset !important; 461 | border: revert; 462 | border-color: #2c3e50 !important; 463 | } 464 | 465 | /* Fix header search bar */ 466 | input.input-sm.header-search-input { 467 | background: none !important; 468 | height: initial !important; 469 | line-height: unset !important; 470 | } 471 | 472 | input.input-sm.header-search-input:focus { 473 | background-color: #fafbfc !important; 474 | border: none; 475 | } 476 | } 477 | --------------------------------------------------------------------------------