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: 1.1rem;
  168.         line-height: 1.35;
  169.         word-break: break-word;
  170.         box-shadow: var(--tg-shadow);
  171.     }
  173.     .bubble:has(img, video) {
  174.         padding: 0 0 0.4375rem 0;
  175.         overflow: hidden;
  177.         .time {
  178.             padding-right: 0.75rem;
  179.         }
  181.         .message-text {
  182.             padding: 0.5625rem 0.75rem 0.4375rem 0.75rem;
  183.         }
  184.     }
  186.     .bubble:has(img):not(:has(.message-text)) {
  187.         position: relative;;
  188.         padding: 0;
  190.         .time {
  191.             background: rgba(0, 0, 0, 0.62);
  192.             border-radius: 62.5rem;
  193.             padding: 0.125rem 0.5rem;
  194.             position: absolute;
  195.             right: 0.75rem;
  196.             bottom: 0.4375rem;
  197.             color: #fff;
  198.         }
  199.     }
  201.     /* incoming */
  202.     .message-in .bubble {
  203.         background: var(--tg-incoming);
  204.         color: var(--tg-text);
  205.         border-top-left-radius: 0.375rem;
  206.         border-top-right-radius: 1rem;
  207.         border-bottom-right-radius: 1rem;
  208.         border-bottom-left-radius: 1rem;
  209.         border: 0.0625rem solid rgba(0,0,0,0.04);
  210.     }
  212.     /* outgoing */
  213.     .message-out .bubble {
  214.         background: var(--tg-outgoing);
  215.         color: var(--tg-text);
  216.         border-top-right-radius: 0.375rem;
  217.         border-top-left-radius: 1rem;
  218.         border-bottom-right-radius: 1rem;
  219.         border-bottom-left-radius: 1rem;
  220.         border: 0.0625rem solid rgba(0,0,0,0.03);
  221.     }
  223.     /* timestamp */
  224.     .time {
  225.         font-size: 0.8rem;
  226.         color: var(--tg-muted);
  227.         text-align: right;
  228.         margin-top: 0.25rem;
  229.     }
  231.     /* date label */
  232.     .chat-group { position: relative; }
  234.     /* unread divider - hidden */
  235.     .chat-unread-divider { display: none; }
  237.     /* unread badge on scroll button */
  238.     .chat-unread-badge {
  239.         position: absolute;
  240.         top: -0.5rem;
  241.         left: 50%;
  242.         transform: translateX(-50%);
  243.         background: var(--tg-primary);
  244.         color: #fff;
  245.         font-size: 0.6875rem;
  246.         font-weight: 600;
  247.         min-width: 1.25rem;
  248.         height: 1.25rem;
  249.         border-radius: 62.5rem;
  250.         display: flex;
  251.         align-items: center;
  252.         justify-content: center;
  253.         padding: 0 0.25rem;
  254.         white-space: nowrap;
  255.         pointer-events: none;
  256.     }
  258.     .chat-date-label {
  259.         display: flex;
  260.         justify-content: center;
  261.         margin: 0.75rem 0 0.5rem;
  262.         position: sticky;
  263.         top: 0;
  264.         z-index: 1;
  265.     }
  267.     .chat-date-label span {
  268.         background: rgb(255,255,255);
  269.         color: var(--tg-muted);
  270.         font-size: 0.8125rem;
  271.         padding: 0.1875rem 0.625rem;
  272.         border-radius: 3.125rem;
  273.     }
  275.     /* =========================
  276.        MESSAGE INPUT
  277.        ========================= */
  279.     .message-text-container {
  280.         display: flex;
  281.         gap: 0.5rem;
  282.     }
  284.     .message-attachment-panel {
  285.         border-radius: 0.35rem;
  286.         overflow: hidden;
  287.     }
  289.     .message-input-container {
  290.         background: var(--tg-surface);
  291.         border-top: 0.0625rem solid var(--tg-border);
  292.         padding: 0.5rem 0.625rem;
  293.         display: flex;
  294.         flex-direction: column;
  295.         gap: 0.5rem;
  296.     }
  298.     .message-input-container input {
  299.         border: 0.0625rem solid var(--tg-border);
  300.         border-radius: 62.5rem;
  301.         padding: 0.625rem 0.875rem;
  302.         font-size: 0.875rem;
  303.         box-shadow: none;
  304.     }
  306.     .message-input-container input:focus {
  307.         border-color: var(--tg-primary);
  308.         outline: none;
  309.     }
  311.     .message-input-container .btn {
  312.         width: 2.625rem;
  313.         height: 2.625rem;
  314.         border-radius: 50%;
  315.         display: flex;
  316.         align-items: center;
  317.         justify-content: center;
  318.     }
  320.     /* =========================
  321.        BOTTOM NAVBAR
  322.        ========================= */
  324.     .navbar {
  325.         background: var(--tg-surface);
  326.         border-top: 0.0625rem solid var(--tg-border);
  327.         height: 4.375rem;
  328.         padding: 0;
  329.     }
  331.     .navbar a {
  332.         flex: 1;
  333.         text-align: center;
  334.         text-decoration: none;
  335.         color: var(--tg-muted);
  336.         font-size: 0.8125rem;
  337.     }
  339.     .navbar a i {
  340.         display: block;
  341.         font-size: 1.5rem;
  342.         margin-bottom: 0.1875rem;
  343.     }
  345.     .navbar a.active { color: var(--tg-primary); }
  346.     .navbar a.active i { color: var(--tg-primary); }
  348.     .topbar .btn-link { color: var(--tg-muted); }
  349.     .topbar .btn-link:hover { color: var(--tg-primary); }
  351.     @media (max-width: 48rem) {
  352.         .bubble { max-width: 85%; }
  353.         .message-input-container { padding: 0.375rem 0.5rem; }
  354.         .navbar { height: 4.375rem; }
  355.     }
  357.     .screen { display: none; height: 100%; }
  358.     .screen.active { display: flex; flex-direction: column; }
  360.     .chat-list-container {
  361.         position: relative;
  362.         width: 100%;
  363.         height: 100%;
  364.     }
  366.     .chat-list {
  367.         display: flex;
  368.         flex-direction: column;
  369.         gap: 0.625rem;
  370.         padding: 0.625rem;
  371.         width: 100%;
  372.         height: 100%;
  373.         overflow-y: auto;
  374.     }
  376.     .chat-item {
  377.         display: flex;
  378.         align-items: center;
  379.         gap: 0.625rem;
  380.         padding: 0.625rem;
  381.         background: white;
  382.         border-radius: 0.75rem;
  383.         cursor: pointer;
  384.     }
  386.     .chat-item .avatar {
  387.         min-width: 2.625rem;
  388.         min-height: 2.625rem;
  389.         border-radius: 50%;
  390.         background: #3390ec;
  391.         color: white;
  392.         display: flex;
  393.         align-items: center;
  394.         justify-content: center;
  395.     }
  397.     .chat-info .name { font-weight: 600; }
  398.     .chat-info .preview { font-size: 0.75rem; color: #6b7280; }
  400.     .chat-row-unread-badge {
  401.         min-width:22px;
  402.         height:22px;
  403.         padding:0 7px;
  404.         border-radius:11px;
  405.         background:#3b82f6;
  406.         color:#fff;
  407.         font-size:12px;
  408.         font-weight:600;
  409.         display:flex;
  410.         align-items:center;
  411.         justify-content:center;
  412.         box-sizing:border-box;
  413.     }
  415.     .contacts-screen { display:flex; flex-direction:column; height:100%; position:relative; }
  416.     .contacts-header { background:var(--tg-surface); border-bottom:0.0625rem solid var(--tg-border); }
  417.     .contacts-list { flex:1; overflow-y:auto; padding:0.5rem; }
  419.     .contact-item {
  420.         display:flex; align-items:center; gap:0.875rem;
  421.         padding:0.75rem; margin-bottom:0.375rem;
  422.         background:var(--tg-surface); border-radius:1rem;
  423.         color:var(--tg-text); transition:.15s;
  424.     }
  425.     .contact-item:hover { background:#f8fafc; }
  427.     .contact-avatar {
  428.         width:3.25rem; height:3.25rem; border-radius:50%;
  429.         background:var(--tg-primary); color:#fff;
  430.         font-weight:600; font-size:1.125rem;
  431.         display:flex; align-items:center; justify-content:center; flex-shrink:0;
  432.     }
  434.     .contact-content { flex:1; }
  435.     .contact-name { font-weight:600; margin-bottom:0.1875rem; }
  436.     .contact-status { font-size:0.75rem; }
  437.     .contact-status i { font-size:0.4375rem; margin-right:0.25rem; }
  438.     .contact-action { color:var(--tg-muted); }
  440.     .contact-fab {
  441.         position:absolute; right:1.25rem; bottom:1.25rem;
  442.         width:3.625rem; height:3.625rem; border-radius:50%;
  443.         display:flex; align-items:center; justify-content:center;
  444.         font-size:1.25rem; z-index:100;
  445.     }
  447.     .contacts-add-screen { display:flex; flex-direction:column; height:100%; background:var(--tg-bg); }
  449.     .contacts-search-header { padding:0.625rem; background:#fff; border-bottom:0.0625rem solid #e5e7eb; }
  450.     .contacts-search-input { border:none; box-shadow:none !important; }
  451.     .contacts-search-input:focus { box-shadow:none !important; }
  452.     .contacts-search-input {
  453.         box-shadow:none !important;
  454.         &::-webkit-outer-spin-button, &::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
  455.         -moz-appearance:textfield;
  456.     }
  458.     .contacts-search-results {
  459.         flex:1; overflow-y:auto; padding:0.625rem;
  460.         display:flex; flex-direction:column; gap:0.5rem;
  461.     }
  463.     .contact-result-item {
  464.         display:flex; align-items:center; gap:0.75rem;
  465.         padding:0.75rem; border-radius:0.875rem;
  466.         background:#fff; cursor:pointer;
  467.     }
  469.     .contact-result-avatar {
  470.         min-width:2.75rem;
  471.         min-height:2.75rem;
  472.         border-radius:50%;
  473.         background:#3390ec;
  474.         color:#fff;
  475.         display:flex;
  476.         align-items:center;
  477.         justify-content:center;
  478.         font-weight:600;
  479.     }
  481.     .contact-result-name { font-weight:600; }
  482.     .contact-result-meta { font-size:0.75rem; color:#6b7280; }
  484.     .user-screen { display:flex; flex-direction:column; height:100%; background:var(--tg-bg); }
  486.     .user-screen-body {
  487.         display:flex; flex-direction:column; align-items:center;
  488.         padding:1.5rem 1.25rem; gap:0.75rem;
  489.         background:var(--tg-surface); border-radius:1rem;
  490.         margin:1rem 0.75rem 0;
  491.     }
  493.     .user-screen-body .contact-avatar { width:5rem; height:5rem; font-size:1.75rem; }
  494.     .user-info { text-align:center; }
  495.     .user-chat-btn { margin-top:0.5rem; border-radius:62.5rem; padding:0.5rem 1.5rem; }
  496.     .user-details { width:100%; }
  497.     .user-detail-row { padding:0.375rem 1rem; text-align:left; }
  498.     .user-detail-label { font-size:0.6875rem; color:var(--tg-muted); margin-top:0.125rem; }
  500.     .profile-screen { display:flex; flex-direction:column; height:100%; background:var(--tg-bg); }
  502.     .profile-body {
  503.         display:flex; flex-direction:column; align-items:center;
  504.         padding:1.5rem 1.25rem; gap:0.75rem;
  505.         background:var(--tg-surface); border-radius:1rem;
  506.         margin:1rem 0.75rem 1rem;
  507.     }
  509.     .profile-avatar {
  510.         width:5rem; height:5rem; font-size:1.75rem;
  511.         border-radius:50%; background:var(--tg-primary); color:#fff;
  512.         font-weight:600; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  513.     }
  515.     .profile-fields { width:80%; }
  517.     .profile-field { padding:0.375rem 1rem; text-align:left; }
  519.     .profile-field input, .profile-field textarea {
  520.         border:none; background:transparent; box-shadow:none !important;
  521.         padding:0; width:100%; font-size:0.875rem;
  522.         color:var(--tg-text); outline:none; resize:none;
  523.     }
  525.     .profile-field input:focus, .profile-field textarea:focus { outline:none; box-shadow:none !important; }
  526.     .profile-field-label { font-size:0.6875rem; color:var(--tg-muted); margin-top:0.125rem; }
  527.     .profile-logout-btn { margin-top:0.5rem; border-radius:62.5rem; padding:0.5rem 1.5rem; }
  535.     .upload-progress-widget {
  536.         position: relative;
  537.         width: 2.625rem;
  538.         height: 2.625rem;
  539.         flex: 0 0 2.625rem;
  540.     }
  542.     .upload-progress-circle {
  543.         width: 100%;
  544.         height: 100%;
  545.         transform: rotate(-90deg);
  546.     }
  548.     .upload-progress-bg {
  549.         fill: none;
  550.         stroke: #e3e6f0;
  551.         stroke-width: 0.28rem;
  552.     }
  554.     .upload-progress-value {
  555.         fill: none;
  556.         stroke: var(--bs-primary);
  557.         stroke-width: 0.28rem;
  558.         stroke-linecap: round;
  560.         stroke-dasharray: 276.46;
  561.         stroke-dashoffset: 276.46;
  563.         transition: stroke-dashoffset .15s linear;
  564.     }
  566.     .upload-progress-icon {
  567.         position: absolute;
  568.         inset: 0;
  570.         display: flex;
  571.         justify-content: center;
  572.         align-items: center;
  574.         font-size: 1.3rem;
  575.         color: var(--bs-secondary);
  577.         pointer-events: none;
  578.     }
  580.     .upload-progress-cancel {
  581.         position: absolute;
  582.         inset: 0;
  584.         display: flex;
  585.         justify-content: center;
  586.         align-items: center;
  588.         width: 100%;
  589.         height: 100%;
  591.         border: 0;
  592.         background: rgba(0, 0, 0, 0.25);
  594.         color: #fff;
  596.         opacity: 1;
  598.         cursor: pointer;
  600.         transition:
  601.                 opacity .15s ease,
  602.                 background .15s ease;
  604.         border-radius: 50%;
  605.     }
  607.     .upload-progress-cancel:hover {
  608.         background: rgba(172, 172, 172, 0.9);
  609.     }
  611.     .upload-progress-cancel i {
  612.         font-size: .8rem;
  613.     }
  615.     .upload-progress-circle {
  616.         width: 100%;
  617.         height: 100%;
  618.         transform-origin: center;
  619.     }
  621.     .upload-progress-circle.rotating {
  622.         animation: upload-progress-rotate 1s linear infinite;
  623.     }
  625.     @keyframes upload-progress-rotate {
  626.         from {
  627.             transform: rotate(-90deg);
  628.         }
  630.         to {
  631.             transform: rotate(270deg);
  632.         }
  633.     }
  641.     .attachment-preview {
  642.         position: relative;
  643.         width: 3.5rem;
  644.         height: 3.5rem;
  645.         flex: 0 0 3.5rem;
  646.     }
  648.     .attachment-preview-image,
  649.     .attachment-preview-icon {
  650.         width: 100%;
  651.         height: 100%;
  652.         border-radius: .375rem;
  653.         object-fit: cover;
  655.         display: flex;
  656.         align-items: center;
  657.         justify-content: center;
  659.         background: #f8f9fc;
  660.         color: #2e59d9;
  661.         font-size: 1.9rem;
  662.     }
  664.     .attachment-remove-btn {
  665.         position: absolute;
  666.         inset: 0;
  668.         font-size: 1.3rem;
  670.         border: 0;
  671.         border-radius: .35rem;
  673.         background: rgba(0, 0, 0, 0.28);
  674.         color: #fff;
  676.         opacity: 1;
  677.         transition: background .15s;
  678.     }
  680.     .attachment-preview:hover .attachment-remove-btn {
  681.         background: rgba(0, 0, 0, 0.58);
  682.     }
  686.     .file-image, .file-video {
  687.         img, video {
  688.             max-width: 31.25rem;
  689.             max-height: 31.25rem;
  690.             width: 100%;
  691.         }
  692.     }
  694.     .file-other {
  695.         display: flex;
  696.         align-items: center;
  697.         gap: 0.5rem;
  698.     }
  706.     .menu-overlay {
  707.         position: fixed;
  708.         inset: 0;
  709.         display: none;
  710.         z-index: 9998;
  711.         background: rgba(0, 0, 0, .28);
  712.         backdrop-filter: blur(2px);
  713.     }
  715.     .popup-menu {
  716.         position: fixed;
  717.         top: 60px;
  718.         right: 12px;
  719.         min-width: 220px;
  720.         max-width: fit-content;
  721.         background: #fff;
  722.         border-radius: 14px;
  723.         box-shadow: 0 10px 35px rgba(0,0,0,.18);
  724.         overflow: hidden;
  725.         display: none;
  726.         z-index: 9999;
  727.     }
  729.     .popup-menu-item {
  730.         display: flex;
  731.         align-items: center;
  732.         gap: 14px;
  733.         padding: 14px 18px;
  734.         cursor: pointer;
  735.         transition: background .15s;
  736.     }
  738.     .popup-menu-item:hover {
  739.         background: #f5f5f5;
  740.     }
  742.     .popup-menu-item i {
  743.         width: 20px;
  744.         text-align: center;
  745.         color: #666;
  746.     }
  748.     .popup-menu-divider {
  749.         height: 1px;
  750.         background: #ececec;
  751.     }
  753.     .popup-menu.show,
  754.     .menu-overlay.show {
  755.         display: block;
  756.     }
  767.     .create-group-screen {
  768.         height: 100%;
  769.         overflow-y: auto;
  770.     }
  772.     .create-group-body {
  773.         padding: 20px;
  774.     }
  776.     .group-avatar {
  777.         width: 96px;
  778.         height: 96px;
  779.         border-radius: 50%;
  780.         background: #0d6efd;
  781.         color: white;
  782.         display: flex;
  783.         align-items: center;
  784.         justify-content: center;
  785.         font-size: 38px;
  786.         margin: 0 auto 25px;
  787.     }
  789.     .group-fields {
  790.         margin-bottom: 20px;
  791.     }
  793.     .group-field {
  794.         margin-bottom: 15px;
  795.     }
  797.     .group-field input,
  798.     .group-field textarea {
  799.         width: 100%;
  800.         border: 0;
  801.         border-bottom: 1px solid #ddd;
  802.         padding: 10px 0;
  803.         outline: none;
  804.         resize: none;
  805.     }
  807.     .group-field-label {
  808.         font-size: 12px;
  809.         color: #888;
  810.         margin-top: 4px;
  811.     }
  813.     .group-section-title {
  814.         font-weight: 600;
  815.         margin: 20px 0 10px;
  816.     }
  818.     .group-members-list {
  819.         margin-top: 15px;
  820.     }
  822.     .group-member {
  823.         display: flex;
  824.         align-items: center;
  825.         padding: 10px 0;
  826.     }
  828.     .group-member-avatar {
  829.         width: 42px;
  830.         height: 42px;
  831.         border-radius: 50%;
  832.         background: #eee;
  833.         display: flex;
  834.         align-items: center;
  835.         justify-content: center;
  836.         margin-right: 12px;
  837.     }
  839.     .create-group-btn {
  840.         width: 100%;
  841.         margin-top: 20px;
  842.     }
  850.     .chat-select {
  851.         align-items: center;
  852.         justify-content: center;
  853.         width: 22px;
  854.         height: 22px;
  855.         cursor: pointer;
  856.         user-select: none;
  857.         flex-shrink: 0;
  858.     }
  860.     .chat-select-checkbox {
  861.         display: none;
  862.     }
  864.     .chat-select-icon {
  865.         font-size: 22px;
  866.         color: #b6bcc6;
  867.         transition: color .15s ease, transform .15s ease;
  868.     }
  870.     .chat-select-checkbox:checked + .chat-select-icon {
  871.         color: var(--bs-primary);
  872.         transform: scale(1.05);
  873.     }
  875.     .chat-item.selection-mode .chat-select {
  876.         display: flex;
  877.     }
  878. </style>