410 lines
6.1 KiB
CSS
410 lines
6.1 KiB
CSS
.add-task input[type="submit"] {
|
|
color: white;
|
|
width: 80px;
|
|
margin-top: 4px;
|
|
background-color: #27ae60;
|
|
padding: 4px;
|
|
border: none;
|
|
cursor: pointer;
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.add-task input[type="reset"] {
|
|
color: white;
|
|
width: 80px;
|
|
margin-top: 4px;
|
|
background-color: #e74c3c;
|
|
padding: 4px;
|
|
border: none;
|
|
cursor: pointer;
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.add-task input[type="submit"]:hover {
|
|
background-color: #27ae60b0;
|
|
}
|
|
|
|
.add-task input[type="reset"]:hover {
|
|
background-color: #e74c3cb8;
|
|
}
|
|
|
|
.circle {
|
|
fill: #14283c;
|
|
}
|
|
|
|
.text-circle {
|
|
fill: #a3bbad;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tools {
|
|
text-align: right;
|
|
|
|
}
|
|
|
|
.input1 {
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
border: 0;
|
|
width: 70%;
|
|
color: #959da5;
|
|
}
|
|
|
|
.input2 {
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
border: 0;
|
|
width: 100%;
|
|
margin-bottom: 4px;
|
|
color: #959da5;
|
|
|
|
}
|
|
|
|
.tools svg,
|
|
.subtitle svg {
|
|
float: right;
|
|
display: block;
|
|
padding: 4px;
|
|
cursor: pointer;
|
|
fill: white;
|
|
padding: 8px;
|
|
font-weight: bold;
|
|
width: 20px;
|
|
height: 20px;
|
|
|
|
}
|
|
|
|
.tools svg:hover,
|
|
.subtitle svg:hover {
|
|
fill: #e74c3c;
|
|
}
|
|
|
|
.tools svg path {
|
|
font-weight: 900;
|
|
}
|
|
|
|
.contextmenu {
|
|
position: absolute;
|
|
width: 100px;
|
|
height: auto;
|
|
background: rgba(0, 0, 0, 0.1);
|
|
padding: 0;
|
|
color: black;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
display: block;
|
|
|
|
}
|
|
|
|
.disabled {
|
|
pointer-events: none;
|
|
color: #a9b5c1;
|
|
}
|
|
|
|
.wrong {
|
|
border: 1px solid red;
|
|
}
|
|
|
|
.add-task {
|
|
position: absolute;
|
|
width: 200px;
|
|
padding: 4px;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
display: none;
|
|
|
|
}
|
|
|
|
.add-task form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
|
|
.contextmenu span {
|
|
padding: 8px;
|
|
display: block;
|
|
font-weight: 600;
|
|
}
|
|
|
|
|
|
|
|
.contextmenu span:hover {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
|
|
}
|
|
|
|
|
|
.triangle {
|
|
opacity: 0.6;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.triangle:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.gantt .red {
|
|
fill: #e74c3c;
|
|
}
|
|
|
|
.gantt .orange {
|
|
fill: #FF6B30;
|
|
}
|
|
|
|
.gantt .yellow {
|
|
fill: #FFD300;
|
|
}
|
|
|
|
.gantt .green {
|
|
fill: #27ae60;
|
|
}
|
|
|
|
.outline {
|
|
outline: 2px solid #333;
|
|
}
|
|
|
|
.noopacity {
|
|
display: none;
|
|
}
|
|
|
|
.opacity {
|
|
display: block;
|
|
}
|
|
|
|
.gantt .grid-background {
|
|
fill: none;
|
|
}
|
|
|
|
.gantt .grid-header {
|
|
fill: #ffffff;
|
|
stroke: #e0e0e0;
|
|
stroke-width: 1.4;
|
|
}
|
|
|
|
.gantt .grid-row {
|
|
fill: #ffffff;
|
|
}
|
|
|
|
.gantt .grid-row:nth-child(even) {
|
|
fill: #f5f5f5;
|
|
}
|
|
|
|
.gantt .row-line {
|
|
stroke: #ebeff2;
|
|
}
|
|
|
|
.gantt .tick {
|
|
stroke: #e0e0e0;
|
|
stroke-width: 0.2;
|
|
}
|
|
|
|
.gantt .tick.thick {
|
|
stroke-width: 0.4;
|
|
}
|
|
|
|
.gantt .today-highlight {
|
|
fill: #61b75e;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.gantt .arrow {
|
|
fill: none;
|
|
stroke: #666;
|
|
stroke-width: 1.4;
|
|
}
|
|
|
|
.gantt .bar {
|
|
fill: #b8c2cc;
|
|
stroke: #8D99A6;
|
|
stroke-width: 0;
|
|
transition: stroke-width .3s ease;
|
|
user-select: none;
|
|
}
|
|
|
|
.gantt .bar.gantt-task-backlog {
|
|
fill: #640808;
|
|
}
|
|
|
|
.gantt .bar-wrapper:hover .bar.gantt-task-backlog {
|
|
fill: #640808;
|
|
}
|
|
|
|
.gantt .bar.gantt-task-faktura {
|
|
fill: #a900fc;
|
|
}
|
|
|
|
.gantt .bar-wrapper:hover .bar.gantt-task-faktura {
|
|
fill: #a900fc;
|
|
}
|
|
|
|
.gantt .bar-progress {
|
|
fill: #a71e1e;
|
|
}
|
|
|
|
.gantt .bar-invalid {
|
|
fill: transparent;
|
|
stroke: #8D99A6;
|
|
stroke-width: 1;
|
|
stroke-dasharray: 5;
|
|
}
|
|
|
|
.gantt .bar-invalid~.bar-label {
|
|
fill: #555;
|
|
}
|
|
|
|
.gantt .bar-label {
|
|
fill: #fff;
|
|
dominant-baseline: central;
|
|
text-anchor: middle;
|
|
font-size: 12px;
|
|
font-weight: lighter;
|
|
}
|
|
|
|
.gantt .bar-label.big {
|
|
fill: #555;
|
|
text-anchor: start;
|
|
}
|
|
|
|
.gantt .handle {
|
|
fill: #ddd;
|
|
cursor: ew-resize;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity .3s ease;
|
|
}
|
|
|
|
.gantt .bar-wrapper {
|
|
cursor: pointer;
|
|
outline: none;
|
|
}
|
|
|
|
.gantt .bar-wrapper:hover .bar {
|
|
fill: #a9b5c1;
|
|
}
|
|
|
|
.gantt .bar-wrapper:hover .bar-progress {
|
|
fill: #8a8aff;
|
|
}
|
|
|
|
.gantt .bar-wrapper:hover .handle {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
|
|
.gantt .bar-wrapper.active .bar {
|
|
fill: #a9b5c1;
|
|
}
|
|
|
|
.gantt .bar-wrapper.active .bar-progress {
|
|
fill: #8a8aff;
|
|
}
|
|
|
|
.gantt .lower-text,
|
|
.gantt .upper-text {
|
|
font-size: 12px;
|
|
text-anchor: middle;
|
|
}
|
|
|
|
.gantt .upper-text {
|
|
fill: #555;
|
|
}
|
|
|
|
.gantt .lower-text {
|
|
fill: #333;
|
|
}
|
|
|
|
.gantt .hide {
|
|
display: none;
|
|
}
|
|
|
|
.gantt-container {
|
|
position: relative;
|
|
overflow: auto;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.gantt-container .popup-wrapper {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
padding: 0;
|
|
color: #959da5;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.gantt-container .popup-wrapper .title {
|
|
border-bottom: 3px solid #a3a3ff;
|
|
padding: 10px;
|
|
}
|
|
|
|
.gantt-container .popup-wrapper .subtitle {
|
|
padding: 10px;
|
|
color: #dfe2e5;
|
|
}
|
|
|
|
.gantt-container .popup-wrapper .pointer {
|
|
position: absolute;
|
|
height: 5px;
|
|
margin: 0 0 0 -5px;
|
|
border: 5px solid transparent;
|
|
border-top-color: rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
.upper-date-separator {
|
|
stroke: #ccc;
|
|
stroke-width: 1;
|
|
}
|
|
|
|
/* Styl dla podświetlenia tekstu dzisiejszej daty w nagłówku */
|
|
.gantt .date text.today-date-highlight {
|
|
fill: #E91E63;
|
|
/* Wybierz kolor podświetlenia, np. różowy */
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Opcjonalnie: Styl dla podświetlenia całej kolumny dzisiejszej daty */
|
|
/* Ta reguła już prawdopodobnie istnieje w Twoim kodzie (make_grid_highlights) */
|
|
.gantt .grid .today-highlight {
|
|
fill: #fcf8e3;
|
|
/* Jasnożółte tło dla całej kolumny */
|
|
opacity: 0.7;
|
|
/* Lekka przezroczystość */
|
|
}
|
|
|
|
/* Poprawka dla czytelności tekstu na podświetlonym tle */
|
|
.gantt .grid .today-highlight+.date text.today-date-highlight {
|
|
/* Można dodać dodatkowe style, jeśli tekst zlewa się z tłem kolumny */
|
|
}
|
|
|
|
/* Upewnij się, że górny i dolny tekst daty są dobrze widoczne */
|
|
.gantt .date .upper-text {
|
|
fill: #555;
|
|
font-size: 12px;
|
|
/* text-anchor: middle; */
|
|
/* Usunięte stąd, ustawiane dynamicznie w JS */
|
|
}
|
|
|
|
.gantt .date .lower-text {
|
|
fill: #333;
|
|
font-size: 12px;
|
|
/* text-anchor: middle; */
|
|
/* Usunięte stąd, ustawiane dynamicznie w JS */
|
|
}
|
|
|
|
/* Styl dla linii oddzielających daty w nagłówku */
|
|
.gantt .date .date-separator {
|
|
stroke: #e0e0e0;
|
|
stroke-width: 1;
|
|
}
|
|
|
|
/* Opcjonalnie: Podświetlenie linii separatora dla dzisiejszej daty */
|
|
.gantt .date .date-separator.today-date-highlight {
|
|
stroke: #E91E63;
|
|
/* Ten sam kolor co tekst */
|
|
}
|
|
|
|
.upper-text.today-date {
|
|
fill: red !important;
|
|
font-weight: bold;
|
|
font-size: 16px !important;
|
|
} |