templates/components/messenger/messenger_styles.html.twig line 1

Open in your IDE?
  1. {% set options = {
  3. }|merge(options|default({})) %}
  5. <style>
  6.     :root {
  8.         /* =========================
  9.            TELEGRAM COLOR SYSTEM
  10.            ========================= */
  12.         --tg-bg: #e7ebf0;
  13.         --tg-surface: #ffffff;
  15.         --tg-incoming: #ffffff;
  16.         --tg-outgoing: #d9fdd3;
  18.         --tg-primary: #3390ec;
  19.         --tg-online: #31d158;
  21.         --tg-text: #0f172a;
  22.         --tg-muted: #6b7280;
  24.         --tg-border: #e6e6e6;
  26.         --tg-shadow: 0 0.0625rem 0.125rem rgba(0,0,0,0.06);
  27.     }
  29.     /* =========================
  30.        GLOBAL
  31.        ========================= */
  33.     :root {
  34.         --vh: 100dvh;
  35.     }
  37.     html, body {
  38.         height: var(--vh);
  39.         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  40.         color: var(--tg-text);
  41.         overflow: hidden !important;
  42.         font-size: 1rem;
  44.         @media (max-width: 769px) {
  45.             font-size: 18px;
  46.         }
  47.     }
  49.     /* =========================
  50.        LAYOUT
  51.        ========================= */
  53.     .layout {
  54.         height: 100%;
  55.         display: flex;
  56.         flex-direction: column;
  57.         background: var(--tg-bg);
  58.         max-width: 62.5rem;
  59.         border-left: 0.0625rem solid var(--tg-border);
  60.         border-right: 0.0625rem solid var(--tg-border);
  61.     }
  63.     .layout-container {
  64.         width: 100%;
  65.         height: 100%;
  66.         display: flex;
  67.         justify-content: center;
  68.         align-items: center;
  69.     }
  71.     .screens-container {
  72.         flex: 1;
  73.         display: flex;
  74.         flex-direction: column;
  75.         min-height: 0;
  76.     }
  78.     .screens {
  79.         flex: 1;
  80.         overflow: hidden;
  81.         background: var(--tg-bg);
  82.     }
  84.     /* =========================
  85.        TOPBAR
  86.        ========================= */
  88.     .topbar {
  89.         background: var(--tg-surface);
  90.         border-bottom: 0.0625rem solid var(--tg-border);
  91.         box-shadow: var(--tg-shadow);
  92.         z-index: 10;
  93.     }
  95.     /* avatar */
  96.     .topbar .rounded-circle {
  97.         box-shadow: var(--tg-shadow);
  98.     }
  100.     /* online */
  101.     .text-success {
  102.         color: var(--tg-online) !important;
  103.     }
  105.     /* =========================
  106.        CHAT AREA
  107.        ========================= */
  109.     .chat {
  110.         height: 100%;
  111.         display: flex;
  112.         flex-direction: column;
  113.         position: relative;
  114.     }
  116.     .chat-scroll-down {
  117.         position: absolute;
  118.         bottom: 1rem;
  119.         right: 1rem;
  120.         width: 2.5rem;
  121.         height: 2.5rem;
  122.         border-radius: 50%;
  123.         background: var(--tg-surface);
  124.         border: 0.0625rem solid var(--tg-border);
  125.         box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.12);
  126.         color: var(--tg-muted);
  127.         display: flex;
  128.         align-items: center;
  129.         justify-content: center;
  130.         cursor: pointer;
  131.         z-index: 10;
  132.         transition: opacity .2s;
  133.     }
  135.     .chat-bodies {
  136.         flex: 1;
  137.         overflow: hidden;
  138.         display: flex;
  139.         flex-direction: column;
  140.     }
  142.     .chat-body {
  143.         flex: 1;
  144.         overflow-y: auto;
  145.         padding: 0.75rem 0.625rem;
  146.         background: radial-gradient(rgba(0,0,0,0.02) 0.0625rem, transparent 0.0625rem);
  147.         background-size: 1.125rem 1.125rem;
  148.     }
  150.     /* message rows */
  151.     .message {
  152.         display: flex;
  153.         margin-bottom: 0.5rem;
  154.     }
  156.     .message-in { justify-content: flex-start; }
  157.     .message-out { justify-content: flex-end; }
  159.     /* =========================
  160.        BUBBLES (REAL TELEGRAM COLORS)
  161.        ========================= */
  163.     .bubble {
  164.         max-width: 78%;
  165.         padding: 0.5625rem 0.75rem 0.4375rem 0.75rem;
  166.         border-radius: 1rem;
  167.         font-size: 0.906rem;
  168.         line-height: 1.35;
  169.         word-break: break-word;
  170.         box-shadow: var(--tg-shadow);
  171.     }
  173.     /* incoming */
  174.     .message-in .bubble {
  175.         background: var(--tg-incoming);
  176.         color: var(--tg-text);
  177.         border-top-left-radius: 0.375rem;
  178.         border-top-right-radius: 1rem;
  179.         border-bottom-right-radius: 1rem;
  180.         border-bottom-left-radius: 1rem;
  181.         border: 0.0625rem solid rgba(0,0,0,0.04);
  182.     }
  184.     /* outgoing */
  185.     .message-out .bubble {
  186.         background: var(--tg-outgoing);
  187.         color: var(--tg-text);
  188.         border-top-right-radius: 0.375rem;
  189.         border-top-left-radius: 1rem;
  190.         border-bottom-right-radius: 1rem;
  191.         border-bottom-left-radius: 1rem;
  192.         border: 0.0625rem solid rgba(0,0,0,0.03);
  193.     }
  195.     /* timestamp */
  196.     .time {
  197.         font-size: 0.625rem;
  198.         color: var(--tg-muted);
  199.         text-align: right;
  200.         margin-top: 0.25rem;
  201.     }
  203.     /* date label */
  204.     .chat-group { position: relative; }
  206.     /* unread divider - hidden */
  207.     .chat-unread-divider { display: none; }
  209.     /* unread badge on scroll button */
  210.     .chat-unread-badge {
  211.         position: absolute;
  212.         top: -0.5rem;
  213.         left: 50%;
  214.         transform: translateX(-50%);
  215.         background: var(--tg-primary);
  216.         color: #fff;
  217.         font-size: 0.6875rem;
  218.         font-weight: 600;
  219.         min-width: 1.25rem;
  220.         height: 1.25rem;
  221.         border-radius: 62.5rem;
  222.         display: flex;
  223.         align-items: center;
  224.         justify-content: center;
  225.         padding: 0 0.25rem;
  226.         white-space: nowrap;
  227.         pointer-events: none;
  228.     }
  230.     .chat-date-label {
  231.         display: flex;
  232.         justify-content: center;
  233.         margin: 0.75rem 0 0.5rem;
  234.         position: sticky;
  235.         top: 0;
  236.         z-index: 1;
  237.     }
  239.     .chat-date-label span {
  240.         background: rgb(255,255,255);
  241.         color: var(--tg-muted);
  242.         font-size: 0.8125rem;
  243.         padding: 0.1875rem 0.625rem;
  244.         border-radius: 3.125rem;
  245.     }
  247.     /* =========================
  248.        MESSAGE INPUT
  249.        ========================= */
  251.     .message-input-container {
  252.         background: var(--tg-surface);
  253.         border-top: 0.0625rem solid var(--tg-border);
  254.         padding: 0.5rem 0.625rem;
  255.         display: flex;
  256.         align-items: center;
  257.         gap: 0.5rem;
  258.     }
  260.     .message-input-container input {
  261.         border: 0.0625rem solid var(--tg-border);
  262.         border-radius: 62.5rem;
  263.         padding: 0.625rem 0.875rem;
  264.         font-size: 0.875rem;
  265.         box-shadow: none;
  266.     }
  268.     .message-input-container input:focus {
  269.         border-color: var(--tg-primary);
  270.         outline: none;
  271.     }
  273.     .message-input-container .btn {
  274.         width: 2.625rem;
  275.         height: 2.625rem;
  276.         border-radius: 50%;
  277.         display: flex;
  278.         align-items: center;
  279.         justify-content: center;
  280.     }
  282.     /* =========================
  283.        BOTTOM NAVBAR
  284.        ========================= */
  286.     .navbar {
  287.         background: var(--tg-surface);
  288.         border-top: 0.0625rem solid var(--tg-border);
  289.         height: 4.375rem;
  290.         padding: 0;
  291.     }
  293.     .navbar a {
  294.         flex: 1;
  295.         text-align: center;
  296.         text-decoration: none;
  297.         color: var(--tg-muted);
  298.         font-size: 0.8125rem;
  299.     }
  301.     .navbar a i {
  302.         display: block;
  303.         font-size: 1.5rem;
  304.         margin-bottom: 0.1875rem;
  305.     }
  307.     .navbar a.active { color: var(--tg-primary); }
  308.     .navbar a.active i { color: var(--tg-primary); }
  310.     .topbar .btn-link { color: var(--tg-muted); }
  311.     .topbar .btn-link:hover { color: var(--tg-primary); }
  313.     @media (max-width: 48rem) {
  314.         .bubble { max-width: 85%; font-size: 0.844rem; }
  315.         .message-input-container { padding: 0.375rem 0.5rem; }
  316.         .navbar { height: 4.375rem; }
  317.     }
  319.     .screen { display: none; height: 100%; }
  320.     .screen.active { display: flex; flex-direction: column; }
  322.     .chat-list {
  323.         display: flex;
  324.         flex-direction: column;
  325.         gap: 0.625rem;
  326.         padding: 0.625rem;
  327.     }
  329.     .chat-item {
  330.         display: flex;
  331.         align-items: center;
  332.         gap: 0.625rem;
  333.         padding: 0.625rem;
  334.         background: white;
  335.         border-radius: 0.75rem;
  336.         cursor: pointer;
  337.     }
  339.     .chat-item .avatar {
  340.         width: 2.625rem;
  341.         height: 2.625rem;
  342.         border-radius: 50%;
  343.         background: #3390ec;
  344.         color: white;
  345.         display: flex;
  346.         align-items: center;
  347.         justify-content: center;
  348.     }
  350.     .chat-info .name { font-weight: 600; }
  351.     .chat-info .preview { font-size: 0.75rem; color: #6b7280; }
  353.     .contacts-screen { display:flex; flex-direction:column; height:100%; position:relative; }
  354.     .contacts-header { background:var(--tg-surface); border-bottom:0.0625rem solid var(--tg-border); }
  355.     .contacts-list { flex:1; overflow-y:auto; padding:0.5rem; }
  357.     .contact-item {
  358.         display:flex; align-items:center; gap:0.875rem;
  359.         padding:0.75rem; margin-bottom:0.375rem;
  360.         background:var(--tg-surface); border-radius:1rem;
  361.         color:var(--tg-text); transition:.15s;
  362.     }
  363.     .contact-item:hover { background:#f8fafc; }
  365.     .contact-avatar {
  366.         width:3.25rem; height:3.25rem; border-radius:50%;
  367.         background:var(--tg-primary); color:#fff;
  368.         font-weight:600; font-size:1.125rem;
  369.         display:flex; align-items:center; justify-content:center; flex-shrink:0;
  370.     }
  372.     .contact-content { flex:1; }
  373.     .contact-name { font-weight:600; margin-bottom:0.1875rem; }
  374.     .contact-status { font-size:0.75rem; }
  375.     .contact-status i { font-size:0.4375rem; margin-right:0.25rem; }
  376.     .contact-action { color:var(--tg-muted); }
  378.     .contact-fab {
  379.         position:absolute; right:1.25rem; bottom:1.25rem;
  380.         width:3.625rem; height:3.625rem; border-radius:50%;
  381.         display:flex; align-items:center; justify-content:center;
  382.         font-size:1.25rem; z-index:100;
  383.     }
  385.     .contacts-add-screen { display:flex; flex-direction:column; height:100%; background:var(--tg-bg); }
  387.     .contacts-search-header { padding:0.625rem; background:#fff; border-bottom:0.0625rem solid #e5e7eb; }
  388.     .contacts-search-input { border:none; box-shadow:none !important; }
  389.     .contacts-search-input:focus { box-shadow:none !important; }
  390.     .contacts-search-input {
  391.         box-shadow:none !important;
  392.         &::-webkit-outer-spin-button, &::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
  393.         -moz-appearance:textfield;
  394.     }
  396.     .contacts-search-results {
  397.         flex:1; overflow-y:auto; padding:0.625rem;
  398.         display:flex; flex-direction:column; gap:0.5rem;
  399.     }
  401.     .contact-result-item {
  402.         display:flex; align-items:center; gap:0.75rem;
  403.         padding:0.75rem; border-radius:0.875rem;
  404.         background:#fff; cursor:pointer;
  405.     }
  407.     .contact-result-avatar {
  408.         width:2.75rem; height:2.75rem; border-radius:50%;
  409.         background:#3390ec; color:#fff;
  410.         display:flex; align-items:center; justify-content:center; font-weight:600;
  411.     }
  413.     .contact-result-name { font-weight:600; }
  414.     .contact-result-meta { font-size:0.75rem; color:#6b7280; }
  416.     .user-screen { display:flex; flex-direction:column; height:100%; background:var(--tg-bg); }
  418.     .user-screen-body {
  419.         display:flex; flex-direction:column; align-items:center;
  420.         padding:1.5rem 1.25rem; gap:0.75rem;
  421.         background:var(--tg-surface); border-radius:1rem;
  422.         margin:1rem 0.75rem 0;
  423.     }
  425.     .user-screen-body .contact-avatar { width:5rem; height:5rem; font-size:1.75rem; }
  426.     .user-info { text-align:center; }
  427.     .user-chat-btn { margin-top:0.5rem; border-radius:62.5rem; padding:0.5rem 1.5rem; }
  428.     .user-details { width:100%; }
  429.     .user-detail-row { padding:0.375rem 1rem; text-align:left; }
  430.     .user-detail-label { font-size:0.6875rem; color:var(--tg-muted); margin-top:0.125rem; }
  432.     .profile-screen { display:flex; flex-direction:column; height:100%; background:var(--tg-bg); }
  434.     .profile-body {
  435.         display:flex; flex-direction:column; align-items:center;
  436.         padding:1.5rem 1.25rem; gap:0.75rem;
  437.         background:var(--tg-surface); border-radius:1rem;
  438.         margin:1rem 0.75rem 0;
  439.     }
  441.     .profile-avatar {
  442.         width:5rem; height:5rem; font-size:1.75rem;
  443.         border-radius:50%; background:var(--tg-primary); color:#fff;
  444.         font-weight:600; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  445.     }
  447.     .profile-fields { width:80%; }
  449.     .profile-field { padding:0.375rem 1rem; text-align:left; }
  451.     .profile-field input, .profile-field textarea {
  452.         border:none; background:transparent; box-shadow:none !important;
  453.         padding:0; width:100%; font-size:0.875rem;
  454.         color:var(--tg-text); outline:none; resize:none;
  455.     }
  457.     .profile-field input:focus, .profile-field textarea:focus { outline:none; box-shadow:none !important; }
  458.     .profile-field-label { font-size:0.6875rem; color:var(--tg-muted); margin-top:0.125rem; }
  459.     .profile-logout-btn { margin-top:0.5rem; border-radius:62.5rem; padding:0.5rem 1.5rem; }
  461. </style>