Advertisement
Hclegend

Untitled

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