☰

Telegram Web better CSS

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

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

  1. // ==UserScript==
  2. // @name          Telegram Web better CSS
  3. // @name:de          Telegram Web besseres CSS
  4. // @namespace     http://tampermonkey.net/
  5. // @version       0.7.5
  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 Anzeige 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. // Feel free to leave GIST Comments
  18. // wishes or suggestions for further CSS adjustments are welcome
  19.  
  20. function addGlobalStyle(css) {
  21.     var head, style;
  22.     head = document.getElementsByTagName('head')[0];
  23.     if (!head) { return; }
  24.     style = document.createElement('style');
  25.     style.type = 'text/css';
  26.     style.innerHTML = css;
  27.     head.appendChild(style);
  28. }
  29.  
  30. (function() {
  31.   'use strict';
  32.   var css = `
  33. /* Message Separation / Contrast */
  34.     body {
  35.         background: #DDD;
  36.     }
  37.     .im_history_col {
  38.         background: #DDD;
  39.     }
  40.     .im_content_message_wrap {
  41.         background: #FFF;
  42.     }
  43.     .im_message_reply {
  44.         background: #DDD;
  45.     }
  46.     .im_send_form_wrap {
  47.         background: #FFF;
  48.     }
  49.     .im_message_date_split {
  50.         background: #FFB;
  51.     }
  52.     .im_message_unread_split {
  53.         background: #FFB;
  54.     }
  55.  
  56. /* Better Select / Contrast */
  57.     .im_message_selected .im_message_outer_wrap {
  58.         background: #CCF;
  59.     }
  60.     .im_history_select_active .im_message_outer_wrap:hover {
  61.         background: #BBF;
  62.     }
  63.     .im_message_focus_active {
  64.         background: #00F;
  65.     }
  66.  
  67. /* Broarder View */
  68.     .im_page_wrap {
  69.         border-radius: 0;
  70.         border-left: 0;
  71.         border-right: 0;
  72.         border-bottom: 0;
  73.     }
  74.     .im_message_wrap {
  75.         max-width: 100%;
  76.         padding: 0 0 0 15px;
  77.     }
  78.     .im_send_panel_wrap {
  79.         max-width: 100%;
  80.     }
  81.     .im_send_form {
  82.         max-width: 100%;
  83.     }
  84.     .im_history_messages {
  85.         margin: 0 20px 0 0;
  86.     }
  87.     .im_dialogs_col .nano > .nano-pane > .nano-slider {
  88.         width: 8px;
  89.         margin: 0 -3px
  90.     }
  91.     .im_history_col .nano > .nano-pane > .nano-slider{
  92.         width: 12px;
  93.     }
  94.  
  95. /* Better Buttons */
  96.     .reply_markup_button_w4 {
  97.         width: auto;
  98.     }
  99.     .reply_markup_button_w3 {
  100.         width: auto;
  101.     }
  102.     .reply_markup_button_w2 {
  103.         width: auto;
  104.     }
  105.     .reply_markup_button_w1 {
  106.         width: auto;
  107.     }
  108.     .reply_markup {
  109.         width: 100%;
  110.     }
  111.     .reply_markup_row {
  112.         float: left;
  113.         padding: 0;
  114.     }
  115.     .reply_markup_button {
  116.         background: #DDF;
  117.         padding: 0 0.5em 0 0.5em;
  118.     }
  119.     .reply_markup_button:hover {
  120.         background: #CCF;
  121.     }
  122.     .reply_markup_button_wrap {
  123.         padding: 0;
  124.     }
  125.     .reply_markup_wrap {
  126.         margin: 0;
  127.         padding: 2px;
  128.     }
  129.  
  130. /* Better Checkbox / Contrast */
  131.     .tg_checkbox span.icon-checkbox-outer {
  132.         background-color: #FAA;
  133.     }
  134.     .tg_checkbox i.icon-checkbox-inner {
  135.         background-color: #A88;
  136.     }
  137.     .tg_checkbox.tg_checkbox_on span.icon-checkbox-outer {
  138.         background-color: #8F8;
  139.     }
  140.     .tg_checkbox.tg_checkbox_on i.icon-checkbox-inner {
  141.         background-color: #0A0;
  142.     }
  143. `;
  144.   addGlobalStyle(css);
  145. })();