☰

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 ^^)

// ==UserScript==
// @name          Telegram Web better CSS
// @name:de          Telegram Web besseres CSS
// @namespace     http://tampermonkey.net/
// @version       0.7.6
// @description   Changes the CSS of web telegram to more contrast, message separation, broader view and one-line buttons  (if text is short - beta ^^)
// @description:de   Ändert das CSS von Web-Telegram zu mehr Kontrast, Trennenung von Nachrichten, breitere Anzeige und einzeilige Buttons (für kurzen Text - beta ^^)
// @author        Eld0r
// @match         https://web.telegram.org/
// @grant         none
// @copyright      2018, Eld0r (https://gist.github.com/Eld0r)
// @copyright:de      2018, Eld0r (https://gist.github.com/Eld0r)
// @license        CC-BY-NC-ND-3.0 (https://creativecommons.org/licenses/by-nc-nd/3.0/legalcode)
// @license:de        CC-BY-NC-ND-3.0 de (https://creativecommons.org/licenses/by-nc-nd/3.0/de/legalcode)
// ==/UserScript==

// Feel free to leave GIST or greasyfork Comments
// wishes or suggestions for further CSS adjustments are welcome
// - or even scripts for other websites ;)

function addGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}

(function() {
  'use strict';
  var css = `
/* Message Separation / Contrast */
    body {
        background: #DDD;
    }
    .im_history_col {
        background: #DDD;
    }
    .im_content_message_wrap {
        background: #FFF;
    }
    .im_message_reply {
        background: #DDD;
    }
    .im_send_form_wrap {
        background: #FFF;
    }
    .im_message_date_split {
        background: #FFB;
    }
    .im_message_unread_split {
        background: #FFB;
    }

/* Better Select / Contrast */
    .im_message_selected .im_message_outer_wrap {
        background: #CCF;
    }
    .im_history_select_active .im_message_outer_wrap:hover {
        background: #BBF;
    }
    .im_message_focus_active {
        background: #00F;
    }

/* Broarder View */
    .im_page_wrap {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }
    .im_message_wrap {
        max-width: 100%;
        padding: 0 0 0 15px;
    }
    .im_send_panel_wrap {
        max-width: 100%;
    }
    .im_send_form {
        max-width: 100%;
    }
    .im_history_messages {
        margin: 0 20px 0 0;
    }
    .im_dialogs_col .nano > .nano-pane > .nano-slider {
        width: 8px;
        margin: 0 -3px
    }
    .im_history_col .nano > .nano-pane > .nano-slider{
        width: 12px;
    }

/* Better Buttons */
    .reply_markup_button_w4 {
        width: auto;
    }
    .reply_markup_button_w3 {
        width: auto
    }
    .reply_markup_button_w2 {
        width: auto;
    }
    .reply_markup_button_w1 {
        width: auto;
    }
    .reply_markup {
        width: 100%;
    }
    .reply_markup_row {
        float: left;
        padding: 0;
    }
    .reply_markup_button {
        height: auto;
        background: #DDF;
        padding: 0.4em 0.5em 0.45em 0.5em;
    }
    .reply_markup_button:hover {
        background: #CCF;
    }
    .reply_markup_button_wrap {
        padding: 2px;
    }
    .reply_markup_wrap {
        margin: 0;
        padding: 2px;
    }

/* Better Checkbox / Contrast */
    .tg_checkbox span.icon-checkbox-outer {
        background-color: #FAA;
    }
    .tg_checkbox i.icon-checkbox-inner {
        background-color: #A88;
    }
    .tg_checkbox.tg_checkbox_on span.icon-checkbox-outer {
        background-color: #8F8;
    }
    .tg_checkbox.tg_checkbox_on i.icon-checkbox-inner {
        background-color: #0A0;
    }
`;
  addGlobalStyle(css);
})();