akfatimeline 1.0.6 → 1.2.0

package/dist/dist/components/Timeline/Timeline.css

@@ -1,616 +0,0 @@
-/* src/components/Timeline/Timeline.css */
-@import "flatpickr/dist/themes/material_green.css";
-
-/* 
-  Temel: "sales sayfası" temasıyla uyumlu renkler, 
-  light vs. dark tanımları 
-*/
-
-:root {
-  /* Light Tema Varsayılan Renkler */
-  --background-color: #f5f5f2;       /* Açık tema arka plan */
-  --text-color: #666;               /* Açık tema yazı rengi */
-  --border-color: #bbb;             /* Daha yumuşak border */
-
-  /* Header */
-  --header-background-color: #f5f5f2;  /* Üst header, tablo header */
-  --header-text-color: #666;
-
-  /* Resources */
-  --resource-background-color: #f5f5f2;  
-  --resource-text-color: #666;
-  --group-header-background-color: #dadada;
-
-  /* Timeline */
-  --timeline-header-background-color: #f5f5f2;
-  --timeline-cell-border-color: #ccc;
-  --timeline-event-background-color: #fff;
-  --timeline-event-border-color: #666;
-  --timeline-event-text-color: #666;
-
-  /* Scrollbar */
-  --scrollbar-thumb-background: #aaa;
-  --scrollbar-thumb-hover-background: #888;
-
-  --resource-width: 150px;
-  --cell-height: 40px;
-  --header-height: 60px;
-  --time-slot-height: 20px;
-  --container-height: 480px;
-
-  --timeline-new-event-background-color: #ff5722;
-  --timeline-new-event-text-color: #fff;
-
-  --timeline-event-background-color: #ff7f50; 
-  --timeline-event-text-color: #fff;
-  --timeline-event-border-color: #fff;
-
-  --timeline-cell-selected-bg: rgba(25,118,210,0.2);
-
-  user-select: none; /* Metin seçimini engelle */
-}
-
-/* Koyu Tema */
-.dark-mode {
-  /* Koyu tema */
-  --background-color: #16202a;               /* Koyu tema arka plan */
-  --text-color: #ddd;                        /* Koyu tema yazı rengi */
-  --border-color: #444;
-
-  --header-background-color: #16202a;
-  --header-text-color: #bbb;
-
-  --resource-background-color: #16202a;
-  --resource-text-color: #bbb;
-  --group-header-background-color: #0d141b;
-
-  --timeline-header-background-color: #16202a;
-  --timeline-cell-border-color: #444;
-  --timeline-event-background-color: #2a2a2a;
-  --timeline-event-border-color: #222;
-  --timeline-event-text-color: #ddd;
-
-  --scrollbar-thumb-background: #555;
-  --scrollbar-thumb-hover-background: #888;
-
-  --timeline-new-event-background-color: #a83e20;
-  --timeline-new-event-text-color: #eee;
-
-  --timeline-event-background-color: #a83e20;
-  --timeline-event-text-color: #fff;
-  --timeline-event-border-color: #222;
-
-  --timeline-cell-selected-bg: rgba(76,175,80,0.2);
-}
-
-/* Genel Timeline Konteyner */
-.timeline-container {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  overflow: hidden;
-  box-sizing: border-box;
-  background-color: var(--background-color);
-  color: var(--text-color);
-}
-
-/* Master Header */
-.timeline-master-header {
-  width: 100%;
-  background-color: var(--header-background-color);
-  color: var(--header-text-color);
-  border-bottom: 1px solid var(--border-color);
-  z-index: 10;
-  padding: 10px;
-  box-sizing: border-box;
-}
-
-/* Timeline Body */
-.timeline-body {
-  display: flex;
-  flex: 1;
-}
-
-/* Sol Kısım: Resources */
-.timeline-resources-container {
-  width: var(--resource-width);
-  display: flex;
-  flex-direction: column;
-  border-right: 1px solid var(--border-color);
-  position: sticky;
-  left: 0;
-  top: var(--header-height);
-  z-index: 2;
-  background-color: var(--resource-background-color);
-  overflow-y: auto;
-}
-
-/* Resources Header */
-.resources-header {
-  background-color: var(--header-background-color);
-  color: var(--resource-text-color);
-  text-align: center;
-  width: var(--resource-width);
-  font-weight: bold;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: calc(var(--header-height) * 2); /* Üst üste iki header yüksekliği */
-  border-right: 1px solid var(--border-color);
-  box-sizing: border-box;
-}
-
-/* Grup Başlığı Hücreleri */
-.group-header-row {
-  display: flex;
-  height: var(--cell-height);
-  background-color: var(--group-header-background-color);
-  color: var(--resource-text-color);
-  font-weight: bold;
-}
-
-.group-header-cell {
-  flex: 1;
-  border: 1px solid var(--border-color);
-  text-align: center;
-  background-color: var(--group-header-background-color);
-  color: var(--resource-text-color);
-  height: var(--cell-height);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Resource Grupları */
-.resource-group {
-  display: flex;
-  flex-direction: column;
-}
-
-/* Resource Grup Header */
-.resource-group-header {
-  background-color: var(--group-header-background-color);
-  color: var(--resource-text-color);
-  font-weight: bold;
-  height: var(--cell-height);
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 0px;
-  cursor: pointer;
-  border: 1px solid var(--border-color);
-}
-
-/* Resource Hücreleri */
-.resource-cell {
-  padding: 0;
-  text-align: left;
-  background-color: var(--resource-background-color);
-  color: var(--resource-text-color);
-  height: var(--cell-height);
-  display: flex;
-  align-items: center;
-  border: 0.3px solid var(--border-color);
-  box-sizing: border-box;
-}
-
-/* Sağ Kısım: Timeline */
-.timeline-scrollable-container {
-  flex: 1;
-  overflow-x: auto;
-  overflow-y: hidden;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-}
-
-/* Header ve Content Wrapper */
-.timeline-header-content-wrapper {
-  display: flex;
-  flex-direction: column;
-}
-
-/* Timeline Header */
-.timeline-header {
-  display: flex;
-  background-color: var(--timeline-header-background-color);
-  color: var(--header-text-color);
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  height: var(--header-height);
-  overflow: hidden;
-  box-sizing: border-box;
-}
-
-/* Timeline Content */
-.timeline-content {
-  display: flex;
-  flex-direction: column;
-}
-
-/* Grup Container */
-.group-container {
-  display: flex;
-  flex-direction: column;
-}
-
-/* Resource Satırları */
-.resource-row {
-  display: flex;
-  box-sizing: border-box;
-  position: relative;
-  height: var(--cell-height);
-  border: 1px solid var(--border-color);
-  margin-top: -1px;
-  overflow: hidden;
-}
-
-/* Timeline Hücreleri */
-.timeline-cell {
-  flex: 1;
-  border: 1px solid var(--timeline-cell-border-color);
-  height: 100%;
-  box-sizing: border-box;
-}
-
-/* Hücre Seçili Durumu */
-.timeline-cell.selected {
-  background-color: rgba(25, 118, 210, 0.2); /* satır içi/hover */
-}
-
-/* Event Stilleri */
-.event {
-  position: absolute;
-  background-color: var(--timeline-event-background-color);
-  color: var(--timeline-event-text-color);
-  font-size: 12px;
-  padding: 2px 5px;
-  border-radius: 4px;
-  text-align: left;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  box-sizing: border-box;
-  z-index: 10;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  border: 1px solid var(--timeline-event-border-color);
-  cursor: pointer;
-}
-
-/* Event Time Stili */
-.event-time {
-  font-size: 10px;
-  margin-top: 2px;
-}
-
-/* Scrollbar için */
-.timeline-scrollable-container::-webkit-scrollbar {
-  height: 10px;
-}
-
-.timeline-scrollable-container::-webkit-scrollbar-thumb {
-  background: var(--scrollbar-thumb-background);
-  border-radius: 5px;
-}
-
-.timeline-scrollable-container::-webkit-scrollbar-thumb:hover {
-  background: var(--scrollbar-thumb-hover-background);
-}
-
-.resources-header {
-  background-color: var(--header-background-color);
-  color: var(--resource-text-color);
-  text-align: center;
-  width: var(--resource-width);
-  font-weight: bold;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 80px;
-  border-right: 1px solid var(--border-color);
-  box-sizing: border-box;
-}
-
-/* TimelineHeader Container */
-.timeline-header-container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-/* Ay + Yıl satırı */
-.timeline-header-month-row {
-  display: flex;
-  background-color: var(--header-background-color);
-  color: var(--header-text-color);
-  font-weight: bold;
-  font-size: 16px;
-  height: 40px;
-  line-height: 40px;
-  border-bottom: 1px solid var(--border-color);
-}
-
-/* Ay + Yıl hücreleri */
-.timeline-header-month-cell {
-  text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  /* border-right => dynamic, inline style if needed */
-  box-sizing: border-box;
-}
-
-/* Günlük Hücreler (tarih satırı) */
-.timeline-header-day-row {
-  display: flex;
-  background-color: var(--timeline-header-background-color);
-  color: var(--header-text-color);
-  /* border-bottom: 1px solid var(--border-color); if needed */
-}
-
-/* Günlük hücre (her gün) */
-.timeline-header-day-cell {
-  height: 40px;
-  line-height: 40px;
-  font-size: 14px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  text-align: center;
-  box-sizing: border-box;
-}
-
-
-/* src/components/Timeline/Timeline.css */
-/* Ekleme: MasterHeader stili */
-
-/* Kapsayıcı */
-.master-header-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between; /* Butonlar solda, select sağda */
-  padding: 10px;
-  background-color: var(--header-background-color);
-  color: var(--header-text-color);
-}
-
-.master-header-buttons {
-  display: flex; /* Yan yana dizilim */
-  align-items: center; /* Dikey hizalama */
-}
-
-.master-header-btn {
-  background-color: transparent;
-  color: var(--header-text-color);
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  padding: 6px 12px;
-  margin-right: 10px; /* Butonlar arasında mesafe */
-  cursor: pointer;
-  font-size: 14px;
-  transition: background-color 0.2s ease, color 0.2s ease;
-}
-
-.master-header-btn:hover {
-  background-color: rgba(25, 118, 210, 0.2); /* Açık tema hover */
-}
-
-.dark-mode .master-header-btn:hover {
-  background-color: rgba(76, 175, 80, 0.2); /* Koyu tema hover */
-}
-
-.master-header-btn:focus {
-  outline: none;
-}
-
-
-
-/* Tarih seçici (Date Picker) */
-.master-header-date-picker {
-  background-color: transparent;
-  color: var(--header-text-color);
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  padding: 5px 12px;
-  margin-right: 10px; /* Butonlar arasında mesafe */
-  cursor: pointer;
-  font-size: 14px;
-  transition: background-color 0.2s ease, color 0.2s ease;
-}
-
-.master-header-date-picker:hover {
-  background-color: rgba(25, 118, 210, 0.2); /* Açık tema hover */
-}
-
-.dark-mode .master-header-date-picker:hover {
-  background-color: rgba(76, 175, 80, 0.2); /* Koyu tema hover */
-}
-
-.master-header-date-picker:focus {
-  outline: none;
-}
-
-/* Select */
-.master-header-select {
-  margin-left: auto; /* Sağa yaslamak için */
-  background-color: transparent;
-  color: var(--header-text-color);
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  padding: 4px 8px;
-  font-size: 14px;
-  cursor: pointer;
-}
-
-.master-header-select:focus {
-  outline: none;
-}
-
-/* Flatpickr Takvim Kutusu */
-.flatpickr-calendar {
-  background-color: var(--background-color);
-  color: var(--text-color);
-  border: 1px solid var(--border-color);
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Gölge efekti */
-}
-
-
-/* Flatpickr Günü */
-.flatpickr-day {
-  background-color: var(--background-color); /* Arka plan rengi */
-  color: var(--text-color); /* Yazı rengi */
-  border-radius: 4px; /* Köşeleri yuvarlat */
-  cursor: pointer;
-}
-
-.flatpickr-day:hover {
-  background-color: rgba(25, 118, 210, 0.2); /* Hover efekti */
-}
-
-.dark-mode .flatpickr-day:hover {
-  background-color: rgba(76, 175, 80, 0.2); /* Koyu tema hover efekti */
-}
-
-/* Seçili Gün */
-.flatpickr-day.selected {
-  background-color: #4caf50; /* Seçili gün rengi */
-  color: white; /* Seçili gün yazı rengi */
-}
-
-/* Flatpickr Ay ve Yıl */
-.flatpickr-months .flatpickr-month {
-  background-color: var(--background-color);
-  color: var(--text-color);
-}
-
-/* Flatpickr Ay İleri ve Geri Düğmeleri */
-.flatpickr-prev-month, .flatpickr-next-month {
-  color: var(--text-color);
-  cursor: pointer;
-}
-
-/* Koyu Tema Örnekleri */
-.dark-mode .flatpickr-calendar {
-  background-color: #1f2937; /* Koyu tema arka plan */
-  color: #ffffff; /* Koyu tema yazı rengi */
-}
-
-.dark-mode .flatpickr-day.selected {
-  background-color: #4caf50;
-  color: white;
-}
-
-
-/* Container */
-.timeline-content-container {
-  position: relative;
-  width: 100%;
-  height: auto; /* or as needed */
-  display: flex;
-  flex-direction: column;
-}
-
-/* Group container */
-.timeline-group-container {
-  margin-bottom: 0px;
-  display: flex;
-  flex-direction: column;
-}
-
-/* Group header row */
-.timeline-group-header-row {
-  display: flex;
-  margin-top: -0.08rem;
-}
-
-.timeline-group-header-cell {
-  flex: 1;
-  height: 2.58rem;
-  background-color: var(--group-header-background-color);
-  border: 1px solid var(--border-color);
-  
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Resource row */
-.timeline-resource-row {
-  display: flex;
-  position: relative;
-  height: var(--cell-height, 40px);
-  border: 1px solid var(--border-color);
-  box-sizing: border-box;
-}
-
-/* Each day cell */
-.timeline-cell {
-  flex: 1;
-  height: 100%;
-  position: relative;
-  border-left: 1px solid var(--border-color);
-  border-right: 1px solid var(--border-color);
-  box-sizing: border-box;
-  cursor: pointer;
-}
-
-/* "selected" day cell */
-.timeline-cell.selected {
-  background-color: var(--timeline-cell-selected-bg, rgba(25,118,210,0.2));
-}
-
-/* Event */
-.timeline-event {
-  position: absolute;
-  background-color: var(--timeline-event-background-color, #0093ce);
-  color: var(--timeline-event-text-color, #fff);
-  font-size: 14px;
-  padding: 5px;
-  border-radius: 20px;
-  box-sizing: border-box;
-  z-index: 10;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  border: 1px solid var(--timeline-event-border-color, #fff);
-  top: 5px; /* or a variable offset if you want */
-  /* "left" and "width" are inline from JS */
-}
-
-/* Extend handle */
-.timeline-event-extend-handle {
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 10px;
-  height: 100%;
-  background-color: rgba(0,0,0,0.2);
-  cursor: col-resize;
-  z-index: 20;
-}
-
-/* Temp event (while creating) */
-.timeline-temp-event {
-  position: absolute;
-  background-color: var(--timeline-new-event-background-color, #0093ce);
-  color: var(--timeline-new-event-text-color, #fff);
-  opacity: 0.7;
-  border-radius: 20px;
-  z-index: 9;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  /* "left"/"width" from JS: " ...calculatePosition(tempEvent, dates)" */
-  top: 5px;
-}