ilk
This commit is contained in:
1532
ui/src/css/app.css
Normal file
1532
ui/src/css/app.css
Normal file
@@ -0,0 +1,1532 @@
|
||||
/* ===========================================================
|
||||
GLOBAL CUSTOM CSS
|
||||
=========================================================== */
|
||||
.with-bg {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
}
|
||||
.with-bg::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: url('/images/Baggi-tekstilas-logolu.jpg') no-repeat center top;
|
||||
background-size: 400px auto;
|
||||
opacity: 0.15;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
.with-bg > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.q-page {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.with-bg::before {
|
||||
background-size: 260px auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== ÜST BLOKLAR (SABİT) ===== */
|
||||
.filter-sticky {
|
||||
position: sticky;
|
||||
top: 56px; /* q-header yüksekliği */
|
||||
z-index: 300;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.filter-collapsible {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* ===== TABLO SCROLL ===== */
|
||||
.table-scroll {
|
||||
margin-top: 0; /* 🔹 Boşluğu kaldır */
|
||||
height: calc(100vh - 56px); /* 🔹 Header yüksekliği kadar kısalt */
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sticky-table .q-table__middle {
|
||||
overflow: visible !important;
|
||||
max-height: none !important;
|
||||
}
|
||||
|
||||
.sticky-table .q-table__top {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 220;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.sticky-table thead th {
|
||||
position: sticky;
|
||||
top: 40px;
|
||||
z-index: 210;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* 🔹 Toggle bar */
|
||||
.sticky-bar {
|
||||
position: sticky;
|
||||
top: 0; /* tablo scroll başladığında en üstte kalsın */
|
||||
z-index: 230;
|
||||
background: #fff;
|
||||
padding: 4px 8px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
/* ===== KOLON DARALTMA + WRAP ===== */
|
||||
.sticky-table thead th {
|
||||
resize: horizontal;
|
||||
overflow: auto;
|
||||
min-width: 80px;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.sticky-table td {
|
||||
min-width: 80px;
|
||||
max-width: 400px;
|
||||
white-space: normal !important;
|
||||
word-break: break-word !important;
|
||||
overflow-wrap: break-word !important;
|
||||
line-height: 1.2rem;
|
||||
padding: 4px 8px !important;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* ===== GÖRSEL ===== */
|
||||
.baggi-ppct {
|
||||
display: block;
|
||||
margin: 30px auto 0;
|
||||
max-width: 400px;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.col-desc {
|
||||
white-space: normal !important;
|
||||
word-break: break-word !important;
|
||||
overflow-wrap: break-word;
|
||||
font-size: 0.75rem !important;
|
||||
line-height: 1.1rem;
|
||||
width: 220px !important;
|
||||
max-width: 220px !important;
|
||||
min-width: 180px !important;
|
||||
}
|
||||
|
||||
/* ===== TABLO GÖRÜNÜM ===== */
|
||||
.custom-table { font-size: 0.8rem; }
|
||||
.custom-table th { background: #fff; font-weight: 800; color: #222; }
|
||||
.custom-table td { font-weight: 600; color: #333; }
|
||||
|
||||
.custom-subtable { font-size: 0.72rem; background: #fafafa; }
|
||||
.custom-subtable th { background: #f9f9f9; font-weight: 500; color: #555; }
|
||||
.custom-subtable td { font-weight: 400; color: #666; }
|
||||
|
||||
/* dar sütunlar için */
|
||||
.col-narrow {
|
||||
font-size: 0.72rem;
|
||||
padding: 2px 6px !important;
|
||||
max-width: 90px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* ===== GRUP SATIRI ===== */
|
||||
.group-row {
|
||||
background: #f1f1f1 !important;
|
||||
font-weight: 700 !important;
|
||||
color: #222;
|
||||
border-top: 2px solid #ccc;
|
||||
border-bottom: 2px solid #ccc;
|
||||
}
|
||||
|
||||
/* ===== BALANCE CARD ===== */
|
||||
.balance-card {
|
||||
width: 100%;
|
||||
min-height: 120px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.q-table td[data-col="belge_no"],
|
||||
.q-table td[data-col="Belge_No"],
|
||||
.q-table td[data-col="BELGE_NO"] {
|
||||
color: var(--q-primary) !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
/* ===========================================================
|
||||
PERMISSIONS PAGE (FINAL)
|
||||
=========================================================== */
|
||||
|
||||
/* Toolbar */
|
||||
.permissions-toolbar {
|
||||
position: sticky;
|
||||
top: 42px; /* q-header yüksekliği */
|
||||
z-index: 300;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 8px 16px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
/* Table scroll alanı */
|
||||
.permissions-table-scroll {
|
||||
height: calc(100vh - 112px); /* header (56) + toolbar (56) */
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Tablo gövdesi */
|
||||
.permissions-table .q-table__middle {
|
||||
overflow: auto !important;
|
||||
max-height: none !important;
|
||||
padding-top: 0px; /* 🔑 Başlık yüksekliği kadar boşluk bırak */
|
||||
}
|
||||
|
||||
/* Sticky başlıklar – toolbar’ın altında */
|
||||
.permissions-table thead th {
|
||||
position: sticky;
|
||||
top:10px; /* toolbar altında hizalanır */
|
||||
z-index: 210;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
/* Hücreler */
|
||||
.permissions-table td {
|
||||
min-width: 80px;
|
||||
max-width: 400px;
|
||||
white-space: normal !important;
|
||||
word-break: break-word !important;
|
||||
overflow-wrap: break-word !important;
|
||||
line-height: 1.2rem;
|
||||
padding: 4px 8px !important;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* İlk kolon (role) sabit */
|
||||
.permissions-table .permissions-sticky-col {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 205;
|
||||
background: #fff;
|
||||
box-shadow: 2px 0 4px rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
/* ===========================================================
|
||||
1️⃣ ROOT & GLOBAL RESET
|
||||
=========================================================== */
|
||||
:root {
|
||||
--header-h: 0px;
|
||||
--filter-h: 72px;
|
||||
--save-h: 60px;
|
||||
--grid-header-h: 172px;
|
||||
--sub-header-h: 34px;
|
||||
--drawer-w: 240px;
|
||||
|
||||
/* Grid kolon genişlikleri */
|
||||
--col-model: 90px;
|
||||
--col-renk: 80px;
|
||||
--col-ana: 100px;
|
||||
--col-alt: 100px;
|
||||
--col-aciklama: 140px;
|
||||
--col-adet: 70px;
|
||||
--col-fiyat: 70px;
|
||||
--col-pb: 70px;
|
||||
--col-tutar: 70px;
|
||||
--col-termin: 142px; /* 🔹 termin tarihi kolon genişliği */
|
||||
|
||||
/* Beden blok ölçüleri */
|
||||
--grp-title-w: 90px;
|
||||
--grp-title-gap: 4px;
|
||||
--beden-w: 44px;
|
||||
--beden-h: 28px;
|
||||
--beden-count: 16;
|
||||
|
||||
/* Tema renkleri */
|
||||
--baggi-gold: #c9a227;
|
||||
--baggi-gold-pale: #fff9e6;
|
||||
--baggi-gold-light: #fff7d2;
|
||||
--baggi-cream: #fffef9;
|
||||
--baggi-gray-border: #bbb;
|
||||
}
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { height: 100%; margin: 0; }
|
||||
body {
|
||||
background: #fff;
|
||||
color: #222;
|
||||
font-family: Inter, "Segoe UI", Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
#q-app, .q-page-container { margin: 0; padding: 0; }
|
||||
.q-layout__page { top: 0 !important; }
|
||||
/* ===========================================================
|
||||
2️⃣ PAGE STRUCTURE & SCROLL
|
||||
=========================================================== */
|
||||
.order-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - var(--header-h));
|
||||
overflow-y: auto;
|
||||
overflow-x: visible;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.body--drawer-left-open .q-page-container {
|
||||
margin-left: var(--drawer-w);
|
||||
width: calc(100% - var(--drawer-w));
|
||||
}
|
||||
.body--drawer-left-closed .q-page-container {
|
||||
margin-left: 0; width: 100%;
|
||||
}
|
||||
|
||||
/* 🔸 Yatay scroll sadece grid alanında */
|
||||
.order-scroll-x {
|
||||
flex: 1;
|
||||
overflow-x: auto;
|
||||
overflow-y: visible;
|
||||
background: #fff;
|
||||
}
|
||||
/* 🔸 Scrollbar stili */
|
||||
|
||||
.order-page::-webkit-scrollbar-thumb,
|
||||
.order-scroll-x::-webkit-scrollbar {
|
||||
height: 8px; width: 8px;
|
||||
}
|
||||
.order-scroll-x::-webkit-scrollbar-thumb {
|
||||
background: #c0a75e;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.order-scroll-x::-webkit-scrollbar-track {
|
||||
background: #f9f5e6;
|
||||
}
|
||||
|
||||
/* ===========================================================
|
||||
3️⃣ STICKY STACK (HEADER + TOOLBARS)
|
||||
=========================================================== */
|
||||
.q-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.sticky-stack {
|
||||
position: sticky;
|
||||
top: var(--header-h);
|
||||
margin-top: 0 !important;
|
||||
z-index: 950;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
/* 🔹 Filtre bar */
|
||||
.filter-bar {
|
||||
background: #fafafa;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 12px 24px;
|
||||
margin-top:0 !important;
|
||||
}
|
||||
|
||||
/* 🔹 Save toolbar */
|
||||
.save-toolbar {
|
||||
background: var(--baggi-gold-pale);
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 10px 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
z-index: 940;
|
||||
}
|
||||
.save-toolbar .label { font-weight: 700; color: #6a5314; }
|
||||
.save-toolbar .value { font-weight: 700; color: #000; }
|
||||
.save-toolbar .q-btn {
|
||||
font-weight: 600;
|
||||
border-radius: 6px;
|
||||
text-transform: none;
|
||||
}
|
||||
/* ===========================================================
|
||||
4️⃣ GRID HEADER (ANA BAŞLIK BLOKU)
|
||||
=========================================================== */
|
||||
.order-grid-header {
|
||||
position: sticky;
|
||||
top: calc(var(--header-h) + var(--filter-h) + var(--save-h));
|
||||
z-index: 700;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-template-columns:
|
||||
var(--col-model)
|
||||
var(--col-renk)
|
||||
var(--col-ana)
|
||||
var(--col-alt)
|
||||
var(--col-aciklama)
|
||||
calc(var(--grp-title-w) + var(--grp-title-gap) + (var(--beden-w)*var(--beden-count)))
|
||||
var(--col-adet)
|
||||
var(--col-fiyat)
|
||||
var(--col-pb)
|
||||
var(--col-tutar)
|
||||
var(--col-termin);
|
||||
background: var(--baggi-cream);
|
||||
border-bottom: 2px solid var(--baggi-gray-border);
|
||||
box-shadow: 0 2px 3px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
/* Sabit kolonlar */
|
||||
.order-grid-header .col-fixed {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
writing-mode: vertical-lr;
|
||||
transform: rotate(180deg);
|
||||
background: var(--baggi-gold-light);
|
||||
border: 1px solid #aaa;
|
||||
font-weight: 700;
|
||||
font-size: 12.5px;
|
||||
height: var(--grid-header-h);
|
||||
}
|
||||
|
||||
.order-grid-header .aciklama-col {
|
||||
background: #fff9c4;
|
||||
border-right: 2px solid #a6a6a6;
|
||||
}
|
||||
/* ===========================================================
|
||||
5️⃣ BEDEN BLOKLARI & SAĞ TOPLAM
|
||||
=========================================================== */
|
||||
.order-grid-header .beden-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: var(--grid-header-h);
|
||||
background: #fff;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.order-grid-header .grp-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: var(--beden-h);
|
||||
}
|
||||
|
||||
.order-grid-header .grp-title {
|
||||
width: var(--grp-title-w);
|
||||
text-align: right;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.order-grid-header .grp-body {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: var(--beden-w);
|
||||
}
|
||||
.order-grid-header .grp-cell.hdr {
|
||||
width: var(--beden-w);
|
||||
height: var(--beden-h);
|
||||
border: 1px solid #bbb;
|
||||
font-size: 11.5px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.order-grid-header .total-row {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
background: #fff59d;
|
||||
}
|
||||
.order-grid-header .total-cell {
|
||||
width: var(--col-adet);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
writing-mode: vertical-lr;
|
||||
transform: rotate(180deg);
|
||||
border-right: 1px solid #bbb;
|
||||
background: var(--baggi-gold-pale);
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
}
|
||||
/* ===========================================================
|
||||
6️⃣ SUB-HEADER (ÜRÜN GRUBU BAR) — TAM HİZALANMIŞ
|
||||
=========================================================== */
|
||||
.order-sub-header {
|
||||
padding-right: 0 !important; /* 🔹 Ekstra sağ boşluğu kaldır */
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
.order-sub-header {
|
||||
position: sticky;
|
||||
top: calc(
|
||||
var(--header-h)
|
||||
+ var(--filter-h)
|
||||
+ var(--save-h)
|
||||
+ var(--grid-header-h)
|
||||
);
|
||||
z-index: 650;
|
||||
|
||||
/* 🔹 Header ile birebir grid düzeni */
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-template-columns:
|
||||
var(--col-model)
|
||||
var(--col-renk)
|
||||
var(--col-ana)
|
||||
var(--col-alt)
|
||||
var(--col-aciklama)
|
||||
calc(var(--grp-title-w) + var(--grp-title-gap) + (var(--beden-w) * var(--beden-count)))
|
||||
var(--col-adet)
|
||||
var(--col-fiyat)
|
||||
var(--col-pb)
|
||||
var(--col-tutar)
|
||||
var(--col-termin);
|
||||
|
||||
align-items: center;
|
||||
justify-items: stretch;
|
||||
height: var(--sub-header-h);
|
||||
min-height: var(--sub-header-h);
|
||||
|
||||
/* 🔹 Görsel */
|
||||
background: linear-gradient(90deg, #fffbe9 0%, #fff4c4 50%, #fff1b0 100%);
|
||||
border-top: 1px solid #d6c06a;
|
||||
border-bottom: 1px solid #d6c06a;
|
||||
|
||||
/* 🔹 Hatalı hizalamaları engelle */
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
padding-right: 0 !important; /* ✅ sağ taşmayı önler */
|
||||
}
|
||||
|
||||
/* 🔹 Genişlik eşitleme */
|
||||
:root {
|
||||
--col-termin: 142px; /* ✅ q-input genişliğiyle birebir */
|
||||
}
|
||||
|
||||
/* 🔹 Sub-header hover efekti */
|
||||
.order-sub-header:hover {
|
||||
background: linear-gradient(90deg, #fff9cf 0%, #fff3b0 70%, #ffe88f 100%);
|
||||
}
|
||||
|
||||
|
||||
/* 🔹 Sol taraf (MODEL–AÇIKLAMA alanı) */
|
||||
.order-sub-header .sub-left {
|
||||
grid-column: 1 / span 5;
|
||||
font-weight: 800;
|
||||
padding-left: 6px;
|
||||
color: #2b1f05;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 🔹 Orta beden bloğu (header’la aynı yapı) */
|
||||
.order-sub-header .sub-center {
|
||||
grid-column: 6 / 7;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: var(--beden-w);
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
width: calc(var(--grp-title-w) + var(--grp-title-gap) + (var(--beden-w) * var(--beden-count)));
|
||||
padding-left: var(--grp-title-w);
|
||||
margin-left: var(--grp-title-gap);
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.order-sub-header .beden-cell {
|
||||
width: var(--beden-w);
|
||||
height: 100%;
|
||||
border: 1px solid #d8c16b;
|
||||
border-right: none;
|
||||
background: #fffdf3;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.order-sub-header .beden-cell:last-child {
|
||||
border-right: 1px solid #d8c16b;
|
||||
}
|
||||
|
||||
/* 🔹 Sağ taraf (adet–fiyat–pb–tutar–termin toplamları) */
|
||||
.order-sub-header .sub-right {
|
||||
grid-column: 7 / -1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
text-align: right;
|
||||
padding-right: 0px;
|
||||
font-weight: 900;
|
||||
color: #3b2f09;
|
||||
line-height: 1.3;
|
||||
text-transform: uppercase;
|
||||
font-size: 13.5px;
|
||||
transform: translateX(-60px);
|
||||
}
|
||||
|
||||
.order-sub-header:hover {
|
||||
background: linear-gradient(90deg,#fff9cf 0%,#fff3b0 70%,#ffe88f 100%);
|
||||
}
|
||||
|
||||
:root {
|
||||
--sub-header-h: 60px;
|
||||
}
|
||||
|
||||
|
||||
/* Taşmayı engelle (ihtiyaten) */
|
||||
.order-sub-header {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ===========================================================
|
||||
7️⃣ GRID BODY & SATIRLAR — TAM HİZALANMIŞ
|
||||
=========================================================== */
|
||||
.order-grid-body {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
margin-top: 0 !important;
|
||||
padding-top: var(--sub-header-h);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.summary-row {
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
var(--col-model)
|
||||
var(--col-renk)
|
||||
var(--col-ana)
|
||||
var(--col-alt)
|
||||
var(--col-aciklama)
|
||||
calc(var(--grp-title-w) + var(--grp-title-gap) + (var(--beden-w) * var(--beden-count)))
|
||||
var(--col-adet)
|
||||
var(--col-fiyat)
|
||||
var(--col-pb)
|
||||
var(--col-tutar)
|
||||
var(--col-termin);}
|
||||
|
||||
.summary-row:hover {
|
||||
background: #fffce0;
|
||||
}
|
||||
.summary-row.is-editing {
|
||||
background: #fff3cd;
|
||||
outline: 2px solid #caa83f;
|
||||
}
|
||||
|
||||
.summary-row .cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: var(--beden-h);
|
||||
padding: 4px 6px;
|
||||
font-size: 13px;
|
||||
color: #222;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.summary-row.row-closed {
|
||||
opacity: 0.55;
|
||||
background: #f5f5f5;
|
||||
pointer-events: none;
|
||||
}
|
||||
.summary-row.row-closed:hover {
|
||||
background: #f5f5f5 !important;
|
||||
}
|
||||
|
||||
.summary-row:nth-child(odd) { background: #fffef9; }
|
||||
|
||||
/* 🔹 Beden blok hizalaması */
|
||||
.summary-row .grp-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
transform: translateX(calc(var(--grp-title-w) - var(--beden-w)));
|
||||
}
|
||||
.summary-row .grp-row {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: var(--beden-w);
|
||||
}
|
||||
.summary-row .grp-row .cell.beden {
|
||||
width: var(--beden-w);
|
||||
height: var(--beden-h);
|
||||
border: 1px solid #ddd;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.cell.beden.ghost {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
border: 1px solid transparent !important;
|
||||
}
|
||||
|
||||
/* 🔹 Sağ kolonlar */
|
||||
.summary-row .cell.adet,
|
||||
.summary-row .cell.fiyat,
|
||||
.summary-row .cell.pb,
|
||||
.summary-row .cell.tutar,
|
||||
.summary-row .cell.termin {
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
border-left: none !important;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.summary-row .cell.tutar {
|
||||
text-align: right;
|
||||
justify-content: flex-end;
|
||||
padding-right: 8px;
|
||||
border-right: none !important;
|
||||
}
|
||||
|
||||
.summary-row .cell.termin {
|
||||
background: #fffef9;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-width: var(--col-termin);
|
||||
}
|
||||
.summary-row .cell.termin .q-input {
|
||||
width: 100%;
|
||||
max-width: 142px !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.summary-row .cell.termin input {
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* ===========================================================
|
||||
9️⃣ ORDER EDITOR (ALT FORM)
|
||||
=========================================================== */
|
||||
.editor {
|
||||
position: relative;
|
||||
z-index: 50;
|
||||
background: #fffef9;
|
||||
border-top: 1px solid #ddd;
|
||||
margin-top: 24px;
|
||||
padding: 16px;
|
||||
}
|
||||
.editor::before {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 4px;
|
||||
background: linear-gradient(to right,#c9a227,#e5d28b,#fff7d2);
|
||||
margin-bottom: 12px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.editor .q-btn:hover { background: #d2b04d; }
|
||||
.editor .q-input,
|
||||
.editor .q-select { margin-bottom: 8px; font-size: 14px; }
|
||||
.cell.termin .termin-label {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
color: #222;
|
||||
background: #fffef9;
|
||||
border-left: 1px solid #ccc;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ===========================================================
|
||||
🔟 RESPONSIVE + MİNÖR DÜZEN
|
||||
=========================================================== */
|
||||
@media (max-width: 1024px) {
|
||||
:root { --beden-w: 40px; --col-aciklama: 120px; }
|
||||
.order-grid-header .col-fixed { font-size: 11px; }
|
||||
.order-sub-header { font-size: 12.5px; }
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
:root {
|
||||
--beden-w: 36px;
|
||||
--col-model: 70px;
|
||||
--col-renk: 60px;
|
||||
--col-aciklama: 100px;
|
||||
}
|
||||
.order-page { font-size: 13px; }
|
||||
.order-grid-header .total-cell { font-size: 10.5px; }
|
||||
}
|
||||
|
||||
.summary-row .cell {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 4px 6px;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.summary-row .grp-area,
|
||||
.summary-row .grp-row,
|
||||
.summary-row .grp-row .cell.beden {
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
.summary-row .cell.aciklama {
|
||||
grid-column: 5 / 6 !important; /* sadece 5. kolon */
|
||||
position: relative !important;
|
||||
width: calc(var(--col-aciklama) + 92px) !important; /* 🔹 74px genişletme */
|
||||
margin-right: -92px !important; /* 🔹 bedenle tam hizalanır */
|
||||
white-space: normal !important;
|
||||
word-break: break-word !important;
|
||||
overflow-wrap: break-word !important;
|
||||
line-height: 1.4 !important;
|
||||
padding: 6px 12px !important;
|
||||
font-size: 13px !important;
|
||||
text-align: left !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: flex-start !important;
|
||||
justify-content: flex-start !important;
|
||||
min-height: 36px !important;
|
||||
background: #fff !important;
|
||||
box-sizing: border-box !important;
|
||||
border-right: 1px solid #ccc !important;
|
||||
z-index: 10 !important;
|
||||
}
|
||||
/* 🧩 Grid çizgi kontrastı güçlendirme */
|
||||
.summary-row .cell,
|
||||
.order-grid-header .col-fixed,
|
||||
.summary-row .grp-row .cell.beden {
|
||||
border-color: #bbb !important; /* 🔹 daha belirgin çizgi */
|
||||
}
|
||||
|
||||
.summary-row .cell:not(:last-child) {
|
||||
border-right: 1px solid #bdbdbd !important;
|
||||
}
|
||||
/* ===========================================================
|
||||
🧱 ALT GRID ÇİZGİLERİ – TÜM SATIRLAR İÇİN
|
||||
=========================================================== */
|
||||
.summary-row {
|
||||
border-bottom: 1px solid #ccc; /* 🔹 satır alt çizgisi */
|
||||
}
|
||||
|
||||
.summary-row:last-child {
|
||||
border-bottom: 2px solid #b7a33a; /* 🔹 son satırda Baggi gold tonu */
|
||||
}
|
||||
|
||||
/* 🔹 Hücrelerin alt çizgisi (beden dahil) */
|
||||
.summary-row .cell,
|
||||
.summary-row .grp-row .cell.beden {
|
||||
border-bottom: 1px solid #ddd !important;
|
||||
}
|
||||
|
||||
/* 🔹 Hover olduğunda grid çizgileri kaybolmasın */
|
||||
.summary-row:hover .cell,
|
||||
.summary-row:hover .grp-row .cell.beden {
|
||||
border-bottom: 1px solid #ccc !important;
|
||||
}
|
||||
.summary-row:hover {
|
||||
background: #fffce0;
|
||||
}
|
||||
|
||||
.summary-row.is-editing {
|
||||
background: #fff3cd;
|
||||
outline: 2px solid #caa83f;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.editor .q-btn:hover {
|
||||
background: #d2b04d;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 🔹 Hover olduğunda grid çizgileri kaybolmasın */
|
||||
.summary-row:hover .cell,
|
||||
.summary-row:hover .grp-row .cell.beden {
|
||||
border-bottom: 1px solid #ccc !important;
|
||||
}
|
||||
|
||||
/* ===========================================================
|
||||
🎨 STOK RENKLERİ (LOW–MID–HIGH)
|
||||
=========================================================== */
|
||||
.stok-red {
|
||||
color: #e53935; /* 🔴 Kırmızı */
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stok-yellow {
|
||||
color: #f9a825; /* 🟡 Sarı */
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stok-green {
|
||||
color: #43a047; /* 🟢 Yeşil */
|
||||
font-weight: 600;
|
||||
}
|
||||
.q-banner.rounded-borders {
|
||||
border-radius: 8px;
|
||||
}
|
||||
.order-gateway {
|
||||
background: linear-gradient(145deg, #fff 0%, #fafafa 100%);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.order-btn {
|
||||
font-size: 1.2rem;
|
||||
padding: 20px 40px;
|
||||
border-radius: 12px;
|
||||
min-width: 280px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.order-btn:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
/* ===========================================================
|
||||
🧭 DRAWER AÇIKKEN GRID HİZALAMA FIX
|
||||
=========================================================== */
|
||||
|
||||
/* Drawer açıkken içerik kaymaması */
|
||||
.body--drawer-left-open .order-page {
|
||||
width: calc(100vw - var(--drawer-w)); /* viewport'tan drawer genişliği kadar düş */
|
||||
overflow-x: visible; /* dış overflow’u kes */
|
||||
}
|
||||
|
||||
/* Scroll konteyner sadece grid içinde çalışsın */
|
||||
.order-scroll-x {
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
overflow-y: visible;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Scrollbar ve sağ boşluğu dengeler */
|
||||
.order-grid-header,
|
||||
.order-sub-header,
|
||||
.order-grid-body {
|
||||
min-width: fit-content;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* ===========================================================
|
||||
🧱 DRAWER AÇIKKEN TAM HİZALAMA FIX (v2)
|
||||
=========================================================== */
|
||||
|
||||
/* Drawer açıkken tüm üst bloklar sağdan taşmasın */
|
||||
.body--drawer-left-open .filter-bar,
|
||||
.body--drawer-left-open .save-toolbar,
|
||||
.body--drawer-left-open .order-grid-header,
|
||||
.body--drawer-left-open .order-sub-header,
|
||||
.body--drawer-left-open .order-grid-body {
|
||||
width: calc(100vw - var(--drawer-w)); /* drawer genişliği kadar daralt */
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
overflow-x: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Drawer kapalıyken tam genişlik */
|
||||
.body--drawer-left-closed .filter-bar,
|
||||
.body--drawer-left-closed .save-toolbar,
|
||||
.body--drawer-left-closed .order-grid-header,
|
||||
.body--drawer-left-closed .order-sub-header,
|
||||
.body--drawer-left-closed .order-grid-body {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
/* Order grid sağ sınırı altın kenarlıkla bitir (optik kapanış) */
|
||||
.order-grid-header,
|
||||
.order-sub-header,
|
||||
.order-grid-body {
|
||||
border-right: 2px solid var(--baggi-gold);
|
||||
}
|
||||
/* ===========================================================
|
||||
🎯 SAĞ ALT BOŞLUK FİNAL FIX
|
||||
=========================================================== */
|
||||
|
||||
/* Drawer açıkken tüm grid konteynerleri sağdan tam sıfırla */
|
||||
.body--drawer-left-open .order-page,
|
||||
.body--drawer-left-open .filter-bar,
|
||||
.body--drawer-left-open .save-toolbar,
|
||||
.body--drawer-left-open .order-grid-header,
|
||||
.body--drawer-left-open .order-sub-header,
|
||||
.body--drawer-left-open .order-grid-body {
|
||||
width: calc(100vw - var(--drawer-w) - 8px); /* 🔹 scrollbar toleransı */
|
||||
padding-right: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
overflow-x: visible !important;
|
||||
}
|
||||
|
||||
/* Son altın kenarlık hizasını koru */
|
||||
.order-grid-body {
|
||||
border-right: 2px solid var(--baggi-gold);
|
||||
}
|
||||
/* ===========================================================
|
||||
🎯 GRID SAĞ HİZALAMA (FILTER + SAVE + HEADER)
|
||||
=========================================================== */
|
||||
|
||||
/* Ana scroll container referansı */
|
||||
.order-scroll-x {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start; /* hizalama sola */
|
||||
overflow-x: auto;
|
||||
overflow-y: visible;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* Filter ve Save barlar grid genişliğini takip etsin */
|
||||
.filter-bar,
|
||||
.save-toolbar,
|
||||
.order-grid-header,
|
||||
.order-sub-header {
|
||||
width: fit-content; /* içeriğe göre genişlik */
|
||||
min-width: 100%; /* minimum ekran kadar */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Grid body’nin genişliği kadar sağ hizalama */
|
||||
.order-grid-body {
|
||||
width: fit-content;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* 🔒 Kapalı satır */
|
||||
.summary-row.row-closed {
|
||||
background: #e6e6e6 !important;
|
||||
opacity: 0.65;
|
||||
pointer-events: none; /* tüm inputları disable eder */
|
||||
}
|
||||
|
||||
/* Hover iptal */
|
||||
.summary-row.row-closed:hover {
|
||||
background: #e6e6e6 !important;
|
||||
}
|
||||
|
||||
/* Edit efekti de kapansın */
|
||||
.summary-row.row-closed.is-editing {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
/* Sağ kenarda taşma veya padding olmasın */
|
||||
.filter-bar,
|
||||
.save-toolbar,
|
||||
.order-grid-header,
|
||||
.order-sub-header,
|
||||
.order-grid-body {
|
||||
margin-right: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
border-right: none !important; /* altın çizgi istemiyorsan kaldırılır */
|
||||
}
|
||||
.summary-row.row-error {
|
||||
background: rgba(193, 0, 21, 0.08);
|
||||
}
|
||||
|
||||
.row-error-icon {
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
|
||||
/* Drawer açık/kapalı fark etmeden */
|
||||
.body--drawer-left-open .order-scroll-x,
|
||||
.body--drawer-left-closed .order-scroll-x {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* ===============================
|
||||
ORDER LIST (ol-) — Sticky Stack
|
||||
=============================== */
|
||||
|
||||
:root {
|
||||
/* Quasar header yüksekliği */
|
||||
--ol-header-h: 56px;
|
||||
/* Filter bar yüksekliği (px) — inputlar tek satırsa 56 idealdir */
|
||||
--ol-filter-h: 96px;
|
||||
}
|
||||
|
||||
/* q-page tek scroller: header altından başlar */
|
||||
.ol-page {
|
||||
height: calc(100vh - var(--ol-header-h));
|
||||
overflow: auto; /* 🔑 tek scroll container */
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Filter bar: q-header’ın altında sticky */
|
||||
.ol-filter-bar {
|
||||
position: sticky;
|
||||
top: 0; /* 🔑 .ol-page scroller’ında en üst */
|
||||
z-index: 600;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 10px 16px;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
|
||||
min-height: var(--ol-filter-h);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* QTable: sticky thead, zebra aktif ve çakışma yok */
|
||||
.ol-table .q-table__middle {
|
||||
overflow: visible !important; /* sticky thead için güvenli */
|
||||
max-height: none !important;
|
||||
}
|
||||
|
||||
/* thead sabitleme: filter bar’ın ALTINA oturur */
|
||||
.ol-table thead th {
|
||||
position: sticky;
|
||||
top: var(--ol-filter-h); /* 🔑 filter yüksekliği kadar boşluk */
|
||||
z-index: 500;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Zebra */
|
||||
.ol-table .q-table__body .q-tr:nth-child(odd) {
|
||||
background-color: #f7f7f7 !important;
|
||||
}
|
||||
.ol-table .q-table__body .q-tr:nth-child(even) {
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
.ol-table .q-table__body .q-tr:hover {
|
||||
background-color: #fff7d1 !important;
|
||||
transition: background-color .15s ease;
|
||||
}
|
||||
|
||||
/* Hücreler */
|
||||
.ol-table .q-td {
|
||||
font-size: .9rem;
|
||||
line-height: 1.3;
|
||||
padding: 6px 8px !important;
|
||||
}
|
||||
|
||||
/* Güvenli z-index hiyerarşisi */
|
||||
.q-header { z-index: 1000 !important; } /* header en üstte */
|
||||
.q-drawer { z-index: 950 !important; } /* drawer header’ın altında */
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width: 768px) {
|
||||
:root { --ol-filter-h: 64px; } /* input kırılıyorsa biraz artır */
|
||||
.ol-filter-bar { padding: 8px 12px; }
|
||||
}
|
||||
/* ===========================================================
|
||||
🟡 ORDERLIST ZEBRA FIX (v3)
|
||||
=========================================================== */
|
||||
|
||||
/* Her iki tr katmanını da hedefliyoruz (Quasar q-tr + native tr) */
|
||||
.ol-table tbody tr:nth-child(odd),
|
||||
.ol-table .q-table__body .q-tr:nth-child(odd) {
|
||||
background-color: #faf8ef !important; /* açık krem tonu */
|
||||
}
|
||||
|
||||
.ol-table tbody tr:nth-child(even),
|
||||
.ol-table .q-table__body .q-tr:nth-child(even) {
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Hover tonu: hafif Baggi gold dokunuşu */
|
||||
.ol-table tbody tr:hover,
|
||||
.ol-table .q-table__body .q-tr:hover {
|
||||
background-color: #fff4cc !important;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
/* =========================================================
|
||||
📌 OrderList — Toplam USD Banner
|
||||
========================================================= */
|
||||
.ol-qbanner {
|
||||
background: #f9fafb;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.ol-qbanner-amount {
|
||||
color: #1976d2; /* Quasar primary */
|
||||
margin-left: 6px;
|
||||
}
|
||||
/* =========================================================
|
||||
📌 ORDER LIST (ol-) — MULTILINE COLUMN FIX
|
||||
========================================================= */
|
||||
|
||||
/* Ortak çok satırlı davranış */
|
||||
.ol-col-multiline {
|
||||
white-space: normal !important;
|
||||
overflow: hidden;
|
||||
word-break: break-word;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
/* 🧾 Cari Adı — 2 SATIR */
|
||||
.ol-col-cari {
|
||||
max-width: 200px;
|
||||
min-width: 150px;
|
||||
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
font-weight: 600;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
/* 📝 Açıklama — 5 SATIR */
|
||||
.ol-col-desc {
|
||||
max-width: 220px;
|
||||
min-width: 160px;
|
||||
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
font-size: 0.82rem;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
/* Hücre padding iyileştirme */
|
||||
.ol-table .q-td.ol-col-cari,
|
||||
.ol-table .q-td.ol-col-desc {
|
||||
padding-top: 6px !important;
|
||||
padding-bottom: 6px !important;
|
||||
}
|
||||
|
||||
/* Header hizalama */
|
||||
.ol-table th.ol-col-cari,
|
||||
.ol-table th.ol-col-desc {
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* =========================================================
|
||||
ORDER LIST — FILTER BAR FLEX FIX (FINAL)
|
||||
========================================================= */
|
||||
|
||||
.ol-filter-bar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 600;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
/* 🔑 TEK SATIR */
|
||||
.ol-filter-row {
|
||||
display: flex;
|
||||
align-items: flex-end; /* 🔑 tüm input & butonlar aynı çizgi */
|
||||
gap: 12px;
|
||||
flex-wrap: nowrap; /* ❌ alt satıra düşme */
|
||||
}
|
||||
|
||||
/* Inputlar */
|
||||
.ol-filter-input {
|
||||
min-width: 180px;
|
||||
max-width: 260px;
|
||||
}
|
||||
|
||||
/* Arama biraz geniş */
|
||||
.ol-search {
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
/* Butonlar */
|
||||
.ol-filter-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Toplam banner */
|
||||
.ol-filter-total {
|
||||
margin-left: auto; /* 🔑 sağa yasla */
|
||||
background: #f9fafb;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
padding: 8px 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Mobile fallback */
|
||||
@media (max-width: 1200px) {
|
||||
.ol-filter-row {
|
||||
flex-wrap: wrap;
|
||||
row-gap: 8px;
|
||||
}
|
||||
|
||||
.ol-filter-total {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.order-gateway {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.draft-card {
|
||||
width: 320px;
|
||||
max-width: 90vw;
|
||||
}
|
||||
/* ===========================================================
|
||||
🕵️ ACTIVITY LOGS (act-) — GLOBAL
|
||||
=========================================================== */
|
||||
|
||||
/* Sayfa konteyneri */
|
||||
.act-page {
|
||||
height: calc(100vh - 56px); /* q-header */
|
||||
overflow: auto;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* Sticky filter bar */
|
||||
.act-filter-bar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 620;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 10px 16px;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
/* Filtre satırı */
|
||||
.act-filter-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 12px;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
/* Input genişlikleri */
|
||||
.act-filter-input {
|
||||
min-width: 160px;
|
||||
max-width: 240px;
|
||||
}
|
||||
|
||||
.act-filter-wide {
|
||||
min-width: 260px;
|
||||
}
|
||||
|
||||
/* Aksiyon butonları */
|
||||
.act-filter-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-left: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Tablo */
|
||||
.act-table {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* Sticky thead */
|
||||
.act-table thead th {
|
||||
position: sticky;
|
||||
top: 56px; /* filter bar yüksekliği */
|
||||
z-index: 500;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Zebra */
|
||||
.act-table tbody tr:nth-child(odd) {
|
||||
background: #faf8ef;
|
||||
}
|
||||
.act-table tbody tr:nth-child(even) {
|
||||
background: #fff;
|
||||
}
|
||||
.act-table tbody tr:hover {
|
||||
background: #fff4cc;
|
||||
}
|
||||
|
||||
/* Hücreler */
|
||||
.act-table .q-td {
|
||||
padding: 6px 8px !important;
|
||||
line-height: 1.25;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Başarılı / hatalı satır */
|
||||
.act-row-success {
|
||||
background: rgba(67, 160, 71, 0.06);
|
||||
}
|
||||
.act-row-fail {
|
||||
background: rgba(211, 47, 47, 0.06);
|
||||
}
|
||||
|
||||
/* Badge renkleri */
|
||||
.act-badge-ok {
|
||||
background: #43a047;
|
||||
}
|
||||
.act-badge-fail {
|
||||
background: #e53935;
|
||||
}
|
||||
|
||||
/* Dar kolon */
|
||||
.act-col-narrow {
|
||||
max-width: 90px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* Route kolonu */
|
||||
.act-col-route {
|
||||
max-width: 260px;
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
/* IP / UA */
|
||||
.act-col-meta {
|
||||
font-size: 0.75rem;
|
||||
color: #555;
|
||||
}
|
||||
/* ================================
|
||||
UserList — Piyasa Wrap (NO CUT)
|
||||
================================ */
|
||||
|
||||
/* Hücre yukarıdan başlasın */
|
||||
.ol-col-piyasa {
|
||||
vertical-align: top;
|
||||
padding-top: 6px !important;
|
||||
padding-bottom: 6px !important;
|
||||
}
|
||||
|
||||
/* Chip konteyner */
|
||||
.piyasa-wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap; /* 🔑 alt satıra insin */
|
||||
align-content: flex-start;
|
||||
|
||||
row-gap: 4px;
|
||||
column-gap: 6px;
|
||||
|
||||
/* ❌ KESİNLİKLE YOK */
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* Chip */
|
||||
.piyasa-chip {
|
||||
flex: 0 0 calc(25% - 6px); /* 🔑 satırda 4 adet */
|
||||
max-width: calc(25% - 6px);
|
||||
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.user-detail-page {
|
||||
background: #fafafa;
|
||||
}
|
||||
.image-preview {
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.image-thumb {
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.workorder-page {
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
/* ===============================
|
||||
PERMISSIONS — BAGGI THEME
|
||||
=============================== */
|
||||
|
||||
.permissions-page {
|
||||
background: #fff;
|
||||
height: calc(100vh - 56px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Scroll alanı */
|
||||
.permissions-table-scroll {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* Tablo */
|
||||
.permissions-table {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* Sticky header */
|
||||
.permissions-table thead th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 300;
|
||||
background: var(--baggi-cream);
|
||||
font-weight: 800;
|
||||
color: #222;
|
||||
box-shadow: 0 2px 3px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
/* Hücreler */
|
||||
.permissions-table td {
|
||||
font-weight: 600;
|
||||
padding: 6px 8px !important;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Zebra */
|
||||
.permissions-table tbody tr:nth-child(odd) {
|
||||
background: #fffef7;
|
||||
}
|
||||
.permissions-table tbody tr:nth-child(even) {
|
||||
background: #ffffff;
|
||||
}
|
||||
.permissions-table tbody tr:hover {
|
||||
background: #fff4cc;
|
||||
}
|
||||
|
||||
/* Sol kolon sabit */
|
||||
.permissions-sticky-col {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 250;
|
||||
background: #fff;
|
||||
box-shadow: 2px 0 4px rgba(0,0,0,0.04);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Header checkbox */
|
||||
.permissions-table .q-th .column {
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user