☰

Telegram Web better CSS

Changes the CSS of web telegram to more contrast, message separation, broader view and one-line buttons (beta)

当前为 2018-05-17 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name          Telegram Web better CSS
  3. // @name:de          Telegram Web besseres CSS
  4. // @namespace     http://tampermonkey.net/
  5. // @version       0.7.3
  6. // @description   Changes the CSS of web telegram to more contrast, message separation, broader view and one-line buttons (beta)
  7. // @description:de   Ändert das CSS von Web-Telegram zu mehr Kontrast, Trennenung von Nachrichten, breitere Anzige und einzeilige Buttons (beta)
  8. // @author        Eld0r
  9. // @match         https://web.telegram.org/
  10. // @grant         none
  11. // @copyright      2018, Eld0r (https://openuserjs.org/users/Eld0r)
  12. // @copyright:de      2018, Eld0r (https://openuserjs.org/users/Eld0r)
  13. // @license        CC-BY-NC-ND 3.0 (https://creativecommons.org/licenses/by-nc-nd/3.0/legalcode)
  14. // @license:de        CC-BY-NC-ND 3.0 de (https://creativecommons.org/licenses/by-nc-nd/3.0/de/legalcode)
  15. // ==/UserScript==
  16.  
  17. // ==OpenUserJS==
  18. // @author        Eld0r
  19. // @license       CC-BY-NC-ND-3.0
  20. // ==/OpenUserJS==
  21.  
  22. // Feel free to leave GIST Comments
  23. // wishes or suggestions for further CSS adjustments are welcome
  24.  
  25. function addGlobalStyle(css) {
  26.     var head, style;
  27.     head = document.getElementsByTagName('head')[0];
  28.     if (!head) { return; }
  29.     style = document.createElement('style');
  30.     style.type = 'text/css';
  31.     style.innerHTML = css;
  32.     head.appendChild(style);
  33. }
  34.  
  35. (function() {
  36.   'use strict';
  37.   var css = `
  38. /* Message Separation / Contrast */
  39.     body {
  40.         background: #DDD;
  41.     }
  42.     .im_history_col {
  43.         background: #DDD;
  44.     }
  45.     .im_content_message_wrap {
  46.         background: #FFF;
  47.     }
  48.     .im_message_reply {
  49.         background: #DDD;
  50.     }
  51.     .im_send_form_wrap {
  52.         background: #FFF;
  53.     }
  54.     .im_message_date_split {
  55.         background: #FFB;
  56.     }
  57.     .im_message_unread_split {
  58.         background: #FFB;
  59.     }
  60.  
  61. /* Better Select / Contrast */
  62.     .im_message_selected .im_message_outer_wrap {
  63.         background: #CCF;
  64.     }
  65.     .im_history_select_active .im_message_outer_wrap:hover {
  66.         background: #BBF;
  67.     }
  68.     .im_message_focus_active {
  69.         background: #00F;
  70.     }
  71.  
  72. /* Broarder View */
  73.     .im_page_wrap {
  74.         border-radius: 0;
  75.         border-left: 0;
  76.         border-right: 0;
  77.         border-bottom: 0;
  78.     }
  79.     .im_message_wrap {
  80.         max-width: 100%;
  81.         padding: 0 0 0 15px;
  82.     }
  83.     .im_send_panel_wrap {
  84.         max-width: 100%;
  85.     }
  86.     .im_send_form {
  87.         max-width: 100%;
  88.     }
  89.     .im_history_messages {
  90.         margin: 0 20px 0 0;
  91.     }
  92.     .im_dialogs_col .nano > .nano-pane > .nano-slider {
  93.         width: 8px;
  94.         margin: 0 -3px
  95.     }
  96.     .im_history_col .nano > .nano-pane > .nano-slider{
  97.         width: 12px;
  98.     }
  99.  
  100. /* Better Buttons */
  101.     .reply_markup_button_w4 {
  102.         width: auto;
  103.     }
  104.     .reply_markup_button_w3 {
  105.         width: auto;
  106.     }
  107.     .reply_markup_button_w2 {
  108.         width: auto;
  109.     }
  110.     .reply_markup_button_w1 {
  111.         width: auto;
  112.     }
  113.     .reply_markup {
  114.         width: 100%;
  115.     }
  116.     .reply_markup_row {
  117.         float: left;
  118.         padding: 0;
  119.     }
  120.     .reply_markup_button {
  121.         background: #DDF;
  122.         padding: 0 0.5em 0 0.5em;
  123.     }
  124.     .reply_markup_button:hover {
  125.         background: #CCF;
  126.     }
  127.     .reply_markup_button_wrap {
  128.         padding: 0;
  129.     }
  130.     .reply_markup_wrap {
  131.         margin: 0;
  132.         padding: 2px;
  133.     }
  134.  
  135. /* Better Checkbox / Contrast */
  136.     .tg_checkbox span.icon-checkbox-outer {
  137.         background-color: #FAA;
  138.     }
  139.     .tg_checkbox i.icon-checkbox-inner {
  140.         background-color: #A88;
  141.     }
  142.     .tg_checkbox.tg_checkbox_on span.icon-checkbox-outer {
  143.         background-color: #8F8;
  144.     }
  145.     .tg_checkbox.tg_checkbox_on i.icon-checkbox-inner {
  146.         background-color: #0A0;
  147.     }
  148. `;
  149.   addGlobalStyle(css);
  150. })();