Mihomo improved

2026-04-13 18:56:13 +03:00
parent 8c35022483
commit 6aa0349f5d
11 changed files with 3753 additions and 569 deletions
--- a/public/app.js
+++ b/public/app.js
@@ -64,6 +64,25 @@ function modeLabel(m) {
  return { dhcp: 'DHCP', static: 'Static', loopback: 'Loopback', manual: 'Manual' }[m] || (m || '?');
 }

+// ── SVG icons ────────────────────────────────────────────────────────────────
+
+const ICON = {
+  pencil: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15">
+    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
+    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
+  </svg>`,
+  restart: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15">
+    <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/>
+    <path d="M3 3v5h5"/>
+  </svg>`,
+  trash: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
+    <path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6"/>
+  </svg>`,
+  plus: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="13" height="13">
+    <path d="M12 5v14M5 12h14"/>
+  </svg>`,
+};
+
 // ── Render ───────────────────────────────────────────────────────────────────

 function renderAll() {
@@ -99,6 +118,8 @@ function buildCard(iface, vlans) {
  const hasPending = state.pending.includes(iface.name);
  const sc = stateClass(iface.state);
  const isLo = iface.name === 'lo' || iface.mode === 'loopback';
+  const isUp = iface.state === 'up';
+  const label = iface.label || '';

  const card = document.createElement('div');
  card.className = 'iface-card' + (hasPending ? ' has-pending' : '');
@@ -108,23 +129,24 @@ function buildCard(iface, vlans) {
    `<div class="info-row"><span class="info-label">IPv6</span><span class="info-val">${a}</span></div>`
  ).join('');

+  const nameBlock = label
+    ? `<div class="card-name-stack">
+        <span class="card-label-text">${label}</span>
+        <span class="card-iface-sub">${iface.name}</span>
+       </div>`
+    : `<span class="card-iface-name">${iface.name}</span>`;
+
  card.innerHTML = `
    <div class="card-header">
      <div class="card-name">
        <span class="state-dot ${sc}"></span>
-        <span>${iface.name}</span>
+        ${nameBlock}
        ${hasPending ? '<span class="pending-badge">несохранено</span>' : ''}
      </div>
-      <div style="display:flex;gap:6px;align-items:center">
-        <span class="mode-badge ${iface.mode || 'unknown'}">${modeLabel(iface.mode)}</span>
-      </div>
+      <span class="mode-badge ${iface.mode || 'unknown'}">${modeLabel(iface.mode)}</span>
    </div>

    <div class="card-info">
-      <div class="info-row">
-        <span class="info-label">Статус</span>
-        <span class="info-val">${iface.state || 'unknown'}</span>
-      </div>
      <div class="info-row">
        <span class="info-label">IPv4</span>
        <span class="info-val">${iface.ipv4
@@ -136,14 +158,13 @@ function buildCard(iface, vlans) {
        <span class="info-label">Шлюз</span>
        <span class="info-val">${iface.gateway || '<span class="none">&mdash;</span>'}</span>
      </div>
-
      <div class="traffic-row">
        <div class="traffic-item">
-          <span class="traffic-label">RX</span>
+          <span class="traffic-label">↓ RX</span>
          <span class="traffic-val">${fmtBytes(iface.rx_bytes)}</span>
        </div>
        <div class="traffic-item">
-          <span class="traffic-label">TX</span>
+          <span class="traffic-label">↑ TX</span>
          <span class="traffic-val">${fmtBytes(iface.tx_bytes)}</span>
        </div>
        <div class="traffic-item">
@@ -154,10 +175,15 @@ function buildCard(iface, vlans) {
    </div>

    <div class="card-actions">
-      <button class="btn btn-success btn-sm" data-action="up"      data-iface="${iface.name}">ON</button>
-      <button class="btn btn-danger  btn-sm" data-action="down"    data-iface="${iface.name}">OFF</button>
-      <button class="btn btn-ghost   btn-sm" data-action="restart" data-iface="${iface.name}">RESTART</button>
-      <button class="btn btn-primary btn-sm" data-action="config"  data-iface="${iface.name}" style="margin-left:auto">CONFIG</button>
+      ${!isLo ? `
+      <label class="toggle-label iface-power-toggle" title="${isUp ? 'Выключить интерфейс' : 'Включить интерфейс'}">
+        <input type="checkbox" ${isUp ? 'checked' : ''} data-action="toggle" data-iface="${iface.name}">
+        <span class="toggle-slider"></span>
+        <span class="iface-toggle-label">${isUp ? 'Вкл' : 'Выкл'}</span>
+      </label>
+      <button class="btn-icon" data-action="restart" data-iface="${iface.name}" title="Перезапустить">${ICON.restart}</button>
+      ` : ''}
+      <button class="btn-icon btn-icon-accent" data-action="config" data-iface="${iface.name}" title="Настроить" style="margin-left:auto">${ICON.pencil}</button>
    </div>

    ${!isLo ? buildVLANSection(iface.name, vlans) : ''}
@@ -170,6 +196,8 @@ function buildVLANSection(parentName, vlans) {
  const rows = vlans.map(v => {
    const sc = stateClass(v.state);
    const hasPending = state.pending.includes(v.name);
+    const isUp = v.state === 'up';
+    const label = v.label || '';
    const ip = v.ipv4
      ? v.ipv4 + (v.ipv4_mask ? ' / ' + v.ipv4_mask : '')
      : '<span class="none">&mdash;</span>';
@@ -177,17 +205,21 @@ function buildVLANSection(parentName, vlans) {
      <div class="vlan-row" data-name="${v.name}">
        <div class="vlan-row-left">
          <span class="state-dot ${sc}" style="width:8px;height:8px"></span>
-          <span class="vlan-iface-name">${v.name}</span>
+          ${label
+            ? `<div class="vlan-name-stack"><span class="vlan-label-text">${label}</span><span class="vlan-iface-name">${v.name}</span></div>`
+            : `<span class="vlan-iface-name">${v.name}</span>`}
          <span class="vlan-id-tag">VLAN ${vlanId(v.name)}</span>
          <span class="mode-badge ${v.mode || 'unknown'}">${modeLabel(v.mode)}</span>
          ${hasPending ? '<span class="pending-badge">несохранено</span>' : ''}
        </div>
        <div class="vlan-row-info">${ip}</div>
        <div class="vlan-row-actions">
-          <button class="btn btn-success btn-xs" data-action="up"     data-iface="${v.name}">ON</button>
-          <button class="btn btn-danger  btn-xs" data-action="down"   data-iface="${v.name}">OFF</button>
-          <button class="btn btn-primary btn-xs" data-action="config" data-iface="${v.name}">CONFIG</button>
-          <button class="btn btn-danger  btn-xs" data-action="delete" data-iface="${v.name}" title="Удалить VLAN">✕</button>
+          <label class="toggle-label" title="${isUp ? 'Выключить' : 'Включить'}">
+            <input type="checkbox" ${isUp ? 'checked' : ''} data-action="toggle" data-iface="${v.name}">
+            <span class="toggle-slider toggle-sm"></span>
+          </label>
+          <button class="btn-icon" data-action="config" data-iface="${v.name}" title="Настроить">${ICON.pencil}</button>
+          <button class="btn-icon btn-icon-danger" data-action="delete" data-iface="${v.name}" title="Удалить VLAN">${ICON.trash}</button>
        </div>
      </div>`;
  }).join('');
@@ -199,8 +231,8 @@ function buildVLANSection(parentName, vlans) {
  return `
    <div class="vlan-section">
      <div class="vlan-header">
-        <span class="vlan-title">Теговые VLAN</span>
-        <button class="btn btn-ghost btn-xs" data-action="addvlan" data-iface="${parentName}">+ Добавить</button>
+        <span class="vlan-title">VLAN</span>
+        <button class="btn btn-ghost btn-xs" data-action="addvlan" data-iface="${parentName}">${ICON.plus} Добавить</button>
      </div>
      <div class="vlan-list">
        ${rows}
@@ -251,17 +283,13 @@ async function doAction(name, action) {
    return;
  }

-  const btn = document.querySelector(`[data-action="${action}"][data-iface="${name}"]`);
-  if (btn) { btn.disabled = true; btn.textContent = '...'; }
-
  try {
    await post(`/api/interfaces/${name}/${action}`);
    showToast(`${name}: ${action} выполнено`, 'success');
    await loadAll();
  } catch (e) {
    showToast(`${name} ${action}: ${e.message}`, 'error');
-  } finally {
-    if (btn) btn.disabled = false;
+    await loadAll(); // refresh to restore correct toggle state
  }
 }

@@ -285,12 +313,12 @@ async function openConfig(name) {
  }

  try {
-    const [{ config, pending }, natData] = await Promise.all([
+    const [configData, natData] = await Promise.all([
      get(`/api/config/${name}`),
      get('/api/nat').catch(() => null),
    ]);
    if (natData) state.nat = natData;
-    fillForm(config, pending, name);
+    fillForm(configData.config, configData.pending, name, configData.label || '');
    document.getElementById('modal').classList.remove('hidden');
  } catch (e) {
    showToast('Ошибка загрузки конфига: ' + e.message, 'error');
@@ -313,11 +341,12 @@ async function openNewVLAN(parentName) {
    if (natData) state.nat = natData;
  } catch (_) {}

-  fillForm({ auto: true, mode: 'static' }, false, '');
+  fillForm({ auto: true, mode: 'static' }, false, '', '');
  document.getElementById('modal').classList.remove('hidden');
 }

-function fillForm(cfg, pending, name) {
+function fillForm(cfg, pending, name, label = '') {
+  document.getElementById('cfgLabel').value   = label;
  document.getElementById('cfgAuto').checked    = !!cfg.auto;
  document.getElementById('cfgAddress').value   = cfg.address || '';
  document.getElementById('cfgNetmask').value   = cfg.netmask || '';
@@ -327,7 +356,6 @@ function fillForm(cfg, pending, name) {
  const mode = cfg.mode === 'static' ? 'static' : 'dhcp';
  setMode(mode);

-  // Mark pending visually
  if (pending && name) {
    document.getElementById('modalTitle').textContent = `Настройка: ${name} (несохранённые изменения)`;
  }
@@ -390,6 +418,7 @@ async function saveConfig() {
  const mode = currentMode();
  const cfg = {
    name,
+    label:   document.getElementById('cfgLabel').value.trim(),
    auto:    document.getElementById('cfgAuto').checked,
    mode,
    address: document.getElementById('cfgAddress').value.trim(),
@@ -451,7 +480,6 @@ async function discardAll() {
  }
  state.pending = [];
  renderPendingBanner();
-  renderAll();
  showToast('Изменения отменены', 'info');
  await loadAll();
 }
@@ -471,15 +499,17 @@ function showToast(msg, type = 'info') {
 // ── Event wiring ──────────────────────────────────────────────────────────────

 document.getElementById('refreshBtn').addEventListener('click', loadAll);
-
 document.getElementById('applyBtn').addEventListener('click', applyAll);
 document.getElementById('discardAllBtn').addEventListener('click', discardAll);

-// Card action buttons (delegated)
+// Card button clicks (delegated)
 document.getElementById('ifaceGrid').addEventListener('click', e => {
  const btn = e.target.closest('[data-action]');
  if (!btn) return;
+  // Don't handle toggle inputs here (handled by 'change' below)
+  if (btn.tagName === 'INPUT' && btn.type === 'checkbox') return;
  const { action, iface } = btn.dataset;
+  if (!action || !iface) return;
  if (action === 'config') {
    openConfig(iface);
  } else if (action === 'addvlan') {
@@ -489,6 +519,13 @@ document.getElementById('ifaceGrid').addEventListener('click', e => {
  }
 });

+// Toggle switch (on/off) — delegated change event
+document.getElementById('ifaceGrid').addEventListener('change', e => {
+  const input = e.target.closest('input[data-action="toggle"]');
+  if (!input) return;
+  doAction(input.dataset.iface, input.checked ? 'up' : 'down');
+});
+
 // Modal close
 document.getElementById('closeModal').addEventListener('click', closeModal);
 document.getElementById('cancelConfigBtn').addEventListener('click', closeModal);
--- a/public/index.html
+++ b/public/index.html
@@ -106,6 +106,11 @@
        <div class="form-divider"></div>
      </div>

+      <div class="form-row">
+        <label for="cfgLabel">Название (метка)</label>
+        <input type="text" id="cfgLabel" placeholder="Например: WAN, LAN, Гости…" style="font-family:inherit">
+      </div>
+
      <div class="form-row">
        <label class="checkbox-label">
          <input type="checkbox" id="cfgAuto">
--- a/public/proxy.html
+++ b/public/proxy.html
--- a/public/proxy.js
+++ b/public/proxy.js
--- a/public/style.css
+++ b/public/style.css
@@ -1411,6 +1411,133 @@ select {
  .form-grid-2 { grid-template-columns: 1fr; }
 }

+/* ── Icon-only action buttons ── */
+.btn-icon-accent {
+  color: var(--accent);
+}
+.btn-icon-accent:hover {
+  color: var(--accent-h);
+  background: rgba(0, 212, 255, 0.1);
+  text-shadow: 0 0 8px var(--accent-glow);
+}
+.btn-icon-danger {
+  color: var(--muted);
+}
+.btn-icon-danger:hover {
+  color: var(--danger);
+  background: rgba(255, 51, 102, 0.1);
+}
+
+/* ── Card power toggle ── */
+.iface-power-toggle {
+  gap: 8px;
+}
+.iface-toggle-label {
+  font-size: .78rem;
+  font-weight: 600;
+  color: var(--text-dim);
+  min-width: 28px;
+}
+
+/* ── Small toggle (VLAN rows) ── */
+.toggle-sm {
+  width: 30px !important;
+  height: 17px !important;
+  border-radius: 9px !important;
+}
+.toggle-sm::after {
+  width: 11px !important;
+  height: 11px !important;
+}
+.toggle-label input:checked + .toggle-sm::after {
+  transform: translateX(13px) !important;
+}
+
+/* ── Card name with label ── */
+.card-name-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.card-label-text {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--text);
+}
+.card-iface-sub {
+  font-size: .72rem;
+  color: var(--muted);
+  font-family: "JetBrains Mono", "Fira Code", monospace;
+}
+.card-iface-name {
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+/* ── VLAN label in row ── */
+.vlan-name-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+.vlan-label-text {
+  font-size: .82rem;
+  font-weight: 700;
+  color: var(--text);
+}
+.vlan-iface-name {
+  font-size: .72rem;
+  color: var(--muted);
+  font-family: "JetBrains Mono", "Fira Code", monospace;
+}
+
+/* ── Proxy form helpers ── */
+.field-select {
+  background: var(--bg-deep);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  padding: 9px 12px;
+  font-size: .9rem;
+  width: 100%;
+}
+.mono-ta {
+  background: var(--bg-deep);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  padding: 9px 12px;
+  font-size: .85rem;
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  width: 100%;
+  resize: vertical;
+}
+.settings-section-title {
+  color: var(--accent);
+  font-size: .85rem;
+  font-weight: 700;
+  letter-spacing: .05em;
+  text-transform: uppercase;
+  margin-bottom: 12px;
+}
+.pf-section-title {
+  font-size: .8rem;
+  font-weight: 700;
+  color: var(--accent);
+  letter-spacing: .05em;
+  text-transform: uppercase;
+  margin-bottom: 10px;
+  margin-top: 4px;
+}
+.pf-subsection-title {
+  font-size: .78rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  letter-spacing: .04em;
+  margin-bottom: 8px;
+  margin-top: 2px;
+}
+
 /* ── Scanline overlay (subtle futuristic effect) ── */
 body::after {
  content: '';
@@ -1425,4 +1552,268 @@ body::after {
    rgba(0, 212, 255, 0.008) 2px,
    rgba(0, 212, 255, 0.008) 4px
  );
+}
+
+/* ── Dashboard ── */
+.dash-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+@media (max-width: 768px) {
+  .dash-grid { grid-template-columns: 1fr; }
+}
+.dash-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 18px;
+  backdrop-filter: blur(10px);
+}
+.dash-card-title {
+  font-size: .85rem;
+  font-weight: 700;
+  color: var(--accent);
+  letter-spacing: .05em;
+  text-transform: uppercase;
+  margin-bottom: 14px;
+}
+.dash-traffic-card {
+  border-color: rgba(0, 212, 255, 0.15);
+}
+.dash-traffic-row {
+  display: flex;
+  gap: 24px;
+  margin-bottom: 8px;
+}
+.dash-traffic-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+}
+.dash-traffic-label {
+  font-size: .72rem;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: .06em;
+}
+.dash-traffic-val {
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  font-size: 1.1rem;
+  color: var(--accent);
+  text-shadow: 0 0 8px rgba(0, 212, 255, 0.15);
+  font-variant-numeric: tabular-nums;
+}
+.dash-traffic-total {
+  font-size: .95rem;
+  color: var(--text-dim);
+  text-shadow: none;
+}
+.dash-mem-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding-top: 8px;
+  border-top: 1px solid var(--border);
+  margin-top: 4px;
+}
+.dash-mode-switch {
+  display: flex;
+  background: var(--bg-deep);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 3px;
+  gap: 2px;
+}
+.dash-mode-switch .seg-btn {
+  flex: 1;
+  padding: 8px 12px;
+  border: none;
+  border-radius: calc(var(--radius-sm) - 2px);
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  font-size: .85rem;
+  font-weight: 600;
+  transition: all .2s ease;
+}
+.dash-mode-switch .seg-btn.active {
+  background: linear-gradient(135deg, #0090b3, #00d4ff);
+  color: #fff;
+  box-shadow: 0 2px 8px rgba(0, 212, 255, 0.2);
+}
+.dash-mode-switch .seg-btn:not(.active):hover { background: var(--surface-3); color: var(--text); }
+
+.dash-info-row {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+.dash-section {
+  margin-bottom: 20px;
+}
+.dash-section-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+.dash-section-header h3 {
+  font-size: 1rem;
+  font-weight: 700;
+  background: linear-gradient(135deg, var(--text), var(--accent));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.dash-group-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.dash-group-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  backdrop-filter: blur(10px);
+  transition: all .3s ease;
+}
+.dash-group-card:hover {
+  border-color: var(--border-hi);
+  box-shadow: var(--glow-sm);
+}
+.dash-group-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+}
+.dash-group-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.dash-group-name {
+  font-weight: 700;
+  font-size: .95rem;
+  color: var(--text);
+}
+.dash-proxy-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 6px;
+  padding: 10px 14px;
+}
+.dash-proxy-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border-radius: var(--radius-sm);
+  background: var(--surface-2);
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all .15s ease;
+  font-size: .82rem;
+}
+.dash-proxy-item:hover {
+  border-color: var(--border-hi);
+  background: var(--surface-3);
+  transform: translateY(-1px);
+}
+.dash-proxy-item.dash-proxy-active {
+  border-color: rgba(0, 255, 136, 0.4);
+  background: rgba(0, 255, 136, 0.06);
+}
+.dash-proxy-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text);
+  font-weight: 600;
+}
+.dash-proxy-type {
+  font-size: .68rem;
+  color: var(--muted);
+}
+.dash-delay {
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  font-size: .78rem;
+  font-weight: 600;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+.dash-delay-good { color: var(--success); }
+.dash-delay-medium { color: var(--warning); }
+.dash-delay-slow { color: var(--danger); }
+.dash-delay-unknown { color: var(--muted); }
+
+.dash-conn-count {
+  font-size: .78rem;
+  font-weight: 700;
+  color: var(--accent);
+  background: rgba(0, 212, 255, 0.1);
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-variant-numeric: tabular-nums;
+}
+.dash-conn-table-wrap {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow-x: auto;
+  backdrop-filter: blur(10px);
+}
+.dash-conn-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: .82rem;
+}
+.dash-conn-table thead {
+  background: rgba(0, 212, 255, 0.03);
+  border-bottom: 1px solid var(--border);
+}
+.dash-conn-table th {
+  text-align: left;
+  padding: 10px 12px;
+  font-size: .72rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: .06em;
+  color: var(--muted);
+  white-space: nowrap;
+}
+.dash-conn-table td {
+  padding: 8px 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
+  vertical-align: middle;
+}
+.dash-conn-table tbody tr:hover { background: rgba(0, 212, 255, 0.03); }
+.dash-conn-host {
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  color: var(--text);
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dash-conn-chain {
+  color: var(--text-dim);
+  max-width: 220px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dash-conn-traffic {
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  color: var(--text-dim);
+  font-size: .78rem;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
 }