Advertisement
Hclegend

Untitled

Nov 13th, 2016
139
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.78 KB | None | 0 0
  1. //META{"name":"Overwatch","description":"For all Overwatch lovers out there!","author":"Matt","version":"1.10"}*//
  2.  
  3. /*
  4. ## ## ### ######## ######## ## ## ### ########
  5. ### ### ## ## ## ## ## ## ## ## ##
  6. #### #### ## ## ## ## ## ## ## ## ##
  7. ## ### ## ## ## ## ## ######### ## ## ##
  8. ## ## ######### ## ## ## ## ######### ##
  9. ## ## ## ## ## ## ## ## ## ## ##
  10. ## ## ## ## ## ## ## ## ## ## ########
  11. */
  12.  
  13. /* Main Background and Settings Background*/
  14. .dummyclass {
  15. color: #fff;
  16. }
  17. .app {
  18. background-image: url(https://i.imgur.com/KFIiKbA.jpg) !important;
  19. background-size: cover !important;
  20. }
  21.  
  22. .callout-backdrop{
  23. opacity:.40 !important;
  24. }
  25. /* Scrollbars */
  26. .scroller-wrap .scroller::-webkit-scrollbar-thumb {
  27. border:0px solid rgba(255,255,255,1) !important;
  28. background-color:rgba(25,25,25,.75) !important;
  29. }
  30.  
  31. .scroller-wrap .scroller::-webkit-scrollbar-track-piece {
  32. border:0px solid rgba(255,255,255,0) !important;
  33. background-color:rgba(0,0,0,0) !important;
  34. }
  35.  
  36. /* Hidden*/
  37. .links,
  38. .help-container {
  39. display: none;
  40. }
  41.  
  42. /* transparent stuff*/
  43. .links,
  44. .chat,
  45. .typing,
  46. .content,
  47. .guild-channels,
  48. .private-channels,
  49. .guild-header header,
  50. .divider-red span,
  51. .messages-wrapper,
  52. #voice-connection {
  53. background-color: transparent !important;
  54. }
  55.  
  56. /* Server list area */
  57. .guilds-wrapper {
  58. background:rgba(0,0,0,0.65) !important;
  59. }
  60.  
  61. /* Channels list area */
  62. .channels-wrap {
  63. background:rgba(0,0,0,0.55) ;
  64. }
  65.  
  66. /* Chat area */
  67. .content .flex-spacer {
  68. background:rgba(0,0,0,0.65);
  69. }
  70.  
  71. /* User list area */
  72. .channel-members {
  73. background:rgba(0,0,0,0.55) !important;
  74. }
  75.  
  76. /* Title Bar Area */
  77. .title-wrap {
  78. background:rgba(0,0,0,0.55) !important;
  79. }
  80.  
  81. /* Text Area */
  82. textarea {
  83. background:transparent !important;
  84. }
  85.  
  86. .channel-textarea-inner {
  87. background: rgba(23,23,23,0.2) !important;
  88. margin:0px 0px 0px;
  89.  
  90. }
  91.  
  92. .typing {
  93. position: absolute;
  94. bottom: 1px;
  95. }
  96.  
  97. .messages .message-group .markup .highlight {
  98. background-color:rgba(35,35,35,1) !important;
  99. color:#cccccc !important;
  100. padding: 1px 4px;
  101. border-radius: 8px;
  102. }
  103.  
  104. .messages .markup pre code.hljs {
  105. background:rgba(6,6,6,0.75) !important;
  106. color:#b2b2b2 !important;
  107. padding:1em !important;
  108. border: 1px solid#FAA02E;
  109. border-radius:8px;
  110. }
  111.  
  112. .modal-content .markup code.inline,
  113. .messages .markup code.inline {
  114. background:rgba(6,6,6,0.75) !important;
  115. color:#b2b2b2 !important;
  116. padding:0em 0.6em !important;
  117. border: 1px solid #FAA02E;
  118. border-radius:8px !important;
  119. }
  120.  
  121. /* Guild Header */
  122. .guild-header ul {
  123. background:#191919 !important;
  124. opacity:1 !important;
  125. transition: transform .5s cubic-bezier(0.18, 0.89, 0.32, 1.28) !important;
  126. padding-top:100px;
  127. top:-40px;
  128. }
  129.  
  130. .guild-header-open ul {
  131. opacity: 1 !important;
  132. border-bottom: 4px solid rgba(250,160,46,1);
  133. }
  134.  
  135. /* Account and settings area */
  136. .account {
  137. z-index: 9;
  138. border-top: 6px solid !important;
  139. background: transparent;
  140. height: 120px;
  141. box-sizing: border-box;
  142. color: #FAA02E;
  143. position: relative;
  144. }
  145.  
  146. .account .status {
  147. border:0px solid rgba(0,0,0,1);
  148. }
  149.  
  150. .account .btn {
  151. background: #FAA02E;/
  152. box-shadow:none !important;
  153. border: none;
  154. }
  155.  
  156. .account .btn:active {
  157. background:#FAA02E;
  158. }
  159.  
  160. .account .btn-settings:after{
  161. background-image: url(https://image000.flaticon.com/icons/svg/126/126472.svg);
  162. opacity: 0.5;
  163. }
  164.  
  165. .account .btn-deafen,
  166. .account .btn-mute {
  167. border-right:0px solid #000;
  168. }
  169.  
  170. .account .btn-deafen, .account .btn-settings {
  171. box-shadow:none !important;
  172. }
  173.  
  174. .account .btn-group {
  175. border:none;
  176. position:absolute;
  177. right:72px;
  178. top:75px;
  179. }
  180.  
  181. .account .avatar-small {
  182. opacity:1;
  183. right: -40px;
  184. top:-20px;
  185. border-radius: 8px;
  186. width: 50px;
  187. height: 50px;
  188. background-size: 100%;
  189. }
  190.  
  191. .account .account-details {
  192. padding-bottom: 38px;
  193. padding-left: 50px;
  194. }
  195.  
  196. .account .account-details .username {
  197. max-width: 100px !important;
  198. font-size: 15px;
  199. }
  200.  
  201. .account .account-details .discriminator {
  202. font-size: 20px;
  203. }
  204.  
  205. /* Vocie server info */
  206. #voice-connection {
  207. z-index: 9;
  208. border-top: 6px solid !important;
  209. padding: 5px 10px 5px 10px !important;
  210. color: #FAA02E;
  211. }
  212.  
  213. #voice-connection .btn {
  214. background: transparent;
  215. box-shadow:none !important;
  216. border:none;
  217. }
  218.  
  219.  
  220. #voice-connection .btn-group {
  221. border:none;
  222. }
  223.  
  224. /* Guilds */
  225. .guilds-wrapper .guilds-add {
  226. font-size:30px;
  227. background:#000;
  228. border-radius:8px;
  229. }
  230.  
  231. .guilds .guild-inner {
  232. background:transparent !important;
  233. }
  234.  
  235. .guilds .active .guild-inner {
  236. background:transparent !important;
  237. animation:colorPuls 1s infinite alternate;
  238. }
  239.  
  240. @-webkit-keyframes colorPuls {
  241. 100% {background:#FAA02E;}
  242. 0% {background:;}
  243. }
  244.  
  245. .guilds .guild-inner:hover {
  246. background:transparent !important;
  247. }
  248.  
  249. .guild-channels .channel-text:not(.selected):hover {
  250. width:100% !important;
  251. padding-right:10px !important;
  252. }
  253.  
  254. .guild-channels .channel:not(.selected):before,
  255. .guild-channels .channel.selected:before,
  256. .guild-channels .channel.selected:hover:before,
  257. .private-channels .channel:not(.selected):before,
  258. .private-channels .channel.selected:before,
  259. .private-channels .channel.selected:hover:before,
  260. .private-channels .search-result.selected:before,
  261. .private-channels .search-result:hover:before {
  262. border-left:transparent !important;
  263. }
  264.  
  265. .guilds li.unread .guild-inner:before,
  266. .guild-channels .channel-text.unread:not(.selected):not(.channel-muted):before {
  267. background:#FAA02E;
  268. }
  269.  
  270. .guilds-wrapper .guilds .guild.unread:before {
  271. background:#FAA02E;
  272. }
  273.  
  274. .guilds-wrapper .guilds .guild .guild-inner {
  275. border-radius:8px !important;
  276. }
  277.  
  278. .create-guild-container .action.join .btn-primary {
  279. background-color: #232323;
  280. }
  281.  
  282. .create-guild-container .or,
  283. .create-guild-container .action.join,
  284. .create-guild-container .action.create {
  285. background: transparent;
  286. }
  287.  
  288. .guild-channels .channel.selected {
  289. background: rgba(250,160,46,0.5);
  290. }
  291.  
  292. .guild-channels .channel:not(.selected):hover,
  293. .private-channels .channel:not(.selected):hover,
  294. .private-channels .channel.selected,
  295. .private-channels .search-result.selected,
  296. .private-channels .search-result:not(.selected):hover{
  297. background: rgba(250,160,46,0.3);
  298. }
  299.  
  300. .guild-channels .channel .channel-name {
  301. text-transform: Capitalize;
  302. }
  303.  
  304. /* Settings */
  305. .settings .settings-inner {
  306. background-image: url(https://imgur.com/YKiWE79.png) !important;
  307. background-size: cover;
  308. background-position: center center;
  309. }
  310.  
  311. .form .btn-default {
  312. padding:10px 0 !important;
  313. width: 90px;
  314. height: 50px;
  315. border-radius: 3px;
  316. border-bottom:0px;
  317. background-color:#232323;
  318. color:#e5e5e5;
  319. }
  320.  
  321. .form .btn-default:hover {
  322. -webkit-transition: background-color .2s ease;
  323. background-color:#990000;
  324. border:none;
  325. }
  326.  
  327. .tab-bar.SIDE {
  328. margin-right: 0px;
  329. background:rgba(250,160,46,1);
  330. overflow-y:hidden;
  331. border-right:6px solid #2F2526;
  332. }
  333.  
  334. .settings .settings-actions {
  335. background-color: #2F2526;
  336. border-top: 1px solid #2F2526;
  337. }
  338.  
  339. .tab-bar .tab-bar-item {
  340. color: #FFF !important;
  341. }
  342.  
  343. .user-settings-modal-connections .user-settings-modal-connections-list .connection .connection-integrations {
  344. border-color: transparent !important;
  345. }
  346.  
  347. .form .control-group textarea {
  348. background:#232323 !important;
  349. box-sizing:border-box;
  350. border:0px solid #232323 !important;
  351. color:#e5e5e5;
  352. border-radius:0px;
  353. font-size:18px;
  354. padding:5px 10px 5px 10px;
  355. }
  356.  
  357. .form .control-group input[type=email],
  358. .form .control-group input[type=password],
  359. .form .control-group input[type=text] {
  360. padding:5px 10px 5px 10px;
  361. border-radius:8px;
  362. box-sizing: border-box;
  363. border:0px solid #232323 !important;
  364. background:#FAA02E !important;
  365. color:#FFF;
  366. font-size:18px;
  367. }
  368.  
  369. .user-settings-modal-connections .user-settings-modal-connections-list .connection .connection-integrations {
  370. border-color: transparent !important;
  371. }
  372.  
  373. .form .control-group textarea {
  374. background:#232323 !important;
  375. box-sizing:border-box;
  376. border:0px solid #232323 !important;
  377. color:#e5e5e5;
  378. border-radius:0px;
  379. font-size:18px;
  380. padding:5px 10px 5px 10px;
  381. }
  382.  
  383. .form .control-group input[type=email],
  384. .form .control-group input[type=password],
  385. .form .control-group input[type=text] {
  386. padding:5px 10px 5px 10px;
  387. border-radius:8px;
  388. box-sizing: border-box;
  389. border:0px solid #232323 !important;
  390. background:#FAA02E !important;
  391. color:#FFF;
  392. font-size:18px;
  393. }
  394.  
  395. .avatar-uploader .avatar-uploader-inner {
  396. border-radius:8px;
  397. border:5px solid #FAA02E;
  398. background:#232323;
  399. }
  400.  
  401. .user-settings-modal-connections .user-settings-modal-accounts-list .connect-container .name {
  402. color:#e5e5e5;
  403. }
  404.  
  405. .form .radio-group .radio,
  406. .form .checkbox-group .checkbox,
  407. .checkbox .checkbox-inner+span {
  408. color:#cccccc !important;
  409. }
  410.  
  411. .checkbox .checkbox-inner input[type=checkbox]:checked+span{
  412. background:#FAA02E;
  413. border-color: #FAA02E;
  414. }
  415.  
  416. .user-settings-modal-games .games-table .games-row .item-game .last-played {
  417. color:#cccccc;
  418. }
  419.  
  420. .user-settings-modal-games .games-table {
  421. background-color: #2F2526;
  422. }
  423.  
  424. .form .btn-primary {
  425. background-color:#232323;
  426. }
  427.  
  428. .form .btn-primary:hover {
  429. background-color:#FAA02E;
  430. }
  431.  
  432. .tab-bar.TOP .tab-bar-item {
  433. color:#b2b2b2;
  434. }
  435. .tab-bar.TOP .tab-bar-item:hover {
  436. color:#cccccc;
  437. border-color:#FCBD49;
  438. }
  439.  
  440. .tab-bar.TOP .tab-bar-item.selected {
  441. border-color:#FAA02E;
  442. color:#e5e5e5;
  443. }
  444.  
  445. .settings-panel {
  446. background: transparent !important;
  447. }
  448.  
  449. .radio .radio-inner span:after {
  450. background-color: #FAA02E;
  451. }
  452.  
  453. .slider .slider-bar .slider-bar-fill {
  454. background-color: #FAA02E;
  455. }
  456.  
  457. .slider .slider-handle {
  458. border-color: #FFF;
  459. }
  460.  
  461. .need-help-modal a {
  462. color:#FAA02E;
  463. }
  464.  
  465. .need-help-modal a:hover {
  466. color:#FFB557;
  467. }
  468.  
  469. input#help-query {
  470. background:#060606 !important;
  471. }
  472.  
  473. .markdown-modal,
  474. .form .form-inner,
  475. .form .formheader,
  476. .form .form-actions,
  477. .need-help-modal .footer,
  478. .markdown-modal .markdown-modal-footer {
  479. background:#060606 !important;
  480. }
  481.  
  482. .need-help-modal .header {
  483. background: #FAA02E;
  484. }
  485.  
  486. .need-help-modal .header input[type=text]-placeholder {
  487. color:#e5e5e5;
  488. }
  489.  
  490. .need-help-modal .header input[type=text] {
  491. color:#fff;
  492. background:rgba(25,25,25,1);
  493. box-shadow:0px 0px 0px 0px;
  494. box-radius:0px;
  495. box-sizing:border-box;
  496. }
  497.  
  498. .form .form-header {
  499. background:#060606;
  500. border-bottom:1px solid;
  501. border-color:#FFF !important;
  502. }
  503.  
  504. .form header {
  505. color: #FAA02E;
  506. }
  507.  
  508. .tab-bar .tab-bar-item.selected {
  509. background-color: transparent !important;
  510. }
  511.  
  512. .channel-notification-settings .content-inner {
  513. background: transparent !important;
  514. }
  515.  
  516. .guild-settings-modal-members {
  517. background:none !important;
  518. }
  519.  
  520. /* User Popout */
  521. .user-popout .footer,
  522. .user-popout .body {
  523. background-color : #2F2526;
  524. border-top: 1px solid #FAA02E;
  525. }
  526.  
  527. .user-popout .header {
  528. background:rgba(250,160,46,1) !important;
  529. border-top-radius:8px !important;
  530. }
  531.  
  532. .user-popout .avatar-wrapper .avatar-popout {
  533. border:0px solid rgba(153,0,0,1);
  534. background-color:rgba(0,0,0,0.9);
  535. }
  536.  
  537. .user-popout .footer .quick-message-wrapper .input {
  538. background:#232323;
  539. border:hidden;
  540. color:#e5e5e5;
  541. }
  542.  
  543. .user-popout .avatar-wrapper .avatar-hint {
  544. border-radius: 8px;
  545. }
  546.  
  547. /* Bot Tag */
  548. .bot-tag,
  549. .bot-tag.bot-tag-invert {
  550. background:#FAA02E;
  551. color:#e5e5e5 !important;
  552. }
  553.  
  554.  
  555. /* Friends and Private Messages */
  556. .theme-dark
  557. .friends-table
  558. .messages .message-group
  559. .edit-message .edit-operation,
  560. .theme-dark .messages-wrapper
  561. .messages .message-group .edit-message .edit-operation {
  562. margin:10px 0 0 0;
  563. color:#cccccc;
  564. border-radius: 8px;
  565. }
  566.  
  567. .guilds-wrapper .guilds .friends-online {
  568. font-size: 9.5px;
  569. margin-left: -7px;
  570. line-height: 20px;
  571. width: 55px;
  572. height: 20px;
  573. border-radius: 8px;
  574. overflow: hidden;
  575. background:transparent;
  576. margin-left:-3px;
  577. }
  578.  
  579. .add-friend-popout .btn {
  580. background-color:#232323 !important;
  581. color:#e5e5e5;
  582. }
  583.  
  584. #friends .friends-header .tab-bar-item.selected {
  585. background-color: #FAA02E !important;
  586. }
  587.  
  588. #friends .friends-header .tab-bar-item:hover {
  589. background-color: rgba(250,160,46,0.5)!important;
  590. }
  591.  
  592. #friends .btn {
  593. background-color:#FAA02E !important;
  594. color:#e5e5e5;
  595. }
  596.  
  597. .private-channels .channel.selected .icon-friends {
  598. background-color: transparent;
  599. }
  600.  
  601. #friends {
  602. background:transparent !important;
  603. }
  604.  
  605. .friends-header {
  606. background:rgba(0,0,0,0.65) !important;
  607. }
  608.  
  609. .friends-table {
  610. background:rgba(0,0,0,0.65) !important;
  611. margin-top:0 !important;
  612. }
  613.  
  614. .friends-header,
  615. .friends-table .friends-table-header {
  616. border-bottom: 0px solid hsla(0,0%,100%,.1) !important;
  617. }
  618.  
  619. .friends-header .tab-bar .tab-bar-separator,
  620. .friends-table .friends-table-header .friends-column-separator {
  621. background-color:hsla(0,0%,100%,.1) !important;
  622. }
  623.  
  624. .friends-table .friends-row:hover {
  625. background:rgba(23,23,23,0.65) !important;
  626. }
  627.  
  628. #friends
  629. .friends-table
  630. .friends-row
  631. .friends-column-actions .friends-action.friends-action-red {
  632. background:#232323;
  633. color:#cccccc
  634. }
  635.  
  636. .add-friend-popout {
  637. border-radius:10px
  638. }
  639.  
  640. .add-friend-popout .btn {
  641. background-color:#FAA02E !important;
  642. color:#e5e5e5;
  643. }
  644.  
  645. .add-friend-popout .btn:disabled {
  646. background-color:#232323 !important;
  647. opacity:1;
  648. color:#e5e5e5;
  649. }
  650.  
  651. .add-friend-popout header
  652. input:focus {
  653. background:#191919;
  654. color:#fff;
  655. border:solid 0px #191919;
  656. }
  657.  
  658. .add-friend-popout header input:not(focused) {
  659. border:hidden;
  660. background:#191919;
  661. }
  662.  
  663. .add-friend-popout header {
  664. background-color: #FAA02E;
  665. }
  666.  
  667. .add-friend-popout section {
  668. background-color: #FAA02E;
  669. }
  670.  
  671. .private-channels .channel:hover:not(.selected) .icon-friends {
  672. background-color:transparent !important;
  673. }
  674.  
  675. .private-channels .channel.btn-friends {
  676. margin-right:10px;
  677. }
  678.  
  679. .private-channels .channel .close {
  680. margin-right:5px;
  681. }
  682.  
  683. .private-channels .search-bar {
  684. background: transparent !important;
  685. }
  686.  
  687. /* Avatars */
  688. .avatar-small {
  689. border-radius:8px;
  690. }
  691.  
  692. .avatar-popout {
  693. border-radius:8px;
  694. }
  695. .avatar-large {
  696. border-radius:8px;
  697. }
  698.  
  699. .avatar-xxlarge {
  700. border-radius:8px
  701. }
  702. .avatar-medium {
  703. border-radius:8px;
  704. }
  705. .avatar-xsmall {
  706. border-radius:8px;
  707. }
  708.  
  709. /* User List */
  710. .theme-dark .channel-members h2 {
  711. color: #FFF !important;
  712. background-color: #FAA02E;
  713. border-radius: 8px;
  714. border-bottom:0px solid #000;
  715. border-top:0px solid #000;
  716. padding-top: 5px;
  717. padding-bottom: 5px;
  718. text-align: center;
  719. }
  720.  
  721. .channel-members .member:hover{
  722. background: rgba(250,160,46,0.3) !important;
  723. }
  724.  
  725. .channel-members .member.popout-open {
  726. background: rgba(250,160,46,0.5) !important;
  727. }
  728.  
  729. /* Notification Badge */
  730. .badge {
  731. background-color: #FAA02E;
  732. }
  733.  
  734. /* Tooltips */
  735. .tooltip {
  736. background: #FAA02E;
  737. color: #FFF;
  738. }
  739.  
  740. .tooltip.tooltip-right:after{
  741. border-right-color: #FAA02E;
  742. }
  743.  
  744. .tooltip.tooltip-left:after{
  745. border-left-color: #FAA02E;
  746. }
  747. .tooltip.tooltip-top:after{
  748. border-top-color: #FAA02E;
  749. }
  750. .tooltip.tooltip-bottom:after{
  751. border-bottom-color: #FAA02E;
  752. }
  753.  
  754. /* CodeMirror */
  755. .CodeMirror {
  756. background: rgba(255,255,255,0.15) !important;
  757. border-radius: 0px;
  758. color: rgba(255,255,255,0.8) !important;
  759. }
  760.  
  761. .CodeMirror-gutters {
  762. background: rgba(255,255,255,0.25) !important;
  763. border:none !important;
  764. }
  765.  
  766. .CodeMirror-linenumber {
  767. color: #fff !important;
  768. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement