☰

Telegram Web better CSS

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

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