Tryb komentowania ekranów
This commit is contained in:
225
assets/css/comments.css
Normal file
225
assets/css/comments.css
Normal file
@@ -0,0 +1,225 @@
|
||||
/* assets/css/comments.css */
|
||||
|
||||
/* Pasek narzędzi na górze */
|
||||
#prototype-topbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background: #232f3e;
|
||||
color: white;
|
||||
z-index: 100000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
#prototype-topbar .mode-switch {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* Przełącznik (Toggle) */
|
||||
.switch-label {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.switch-label input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
transition: .4s;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
left: 2px;
|
||||
bottom: 2px;
|
||||
background-color: white;
|
||||
transition: .4s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input:checked+.slider {
|
||||
background-color: #2196F3;
|
||||
}
|
||||
|
||||
input:checked+.slider:before {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
/* Pinezki (Markery) */
|
||||
.comment-marker {
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: #ff3e1d;
|
||||
border: 2px solid white;
|
||||
border-radius: 50% 50% 50% 0;
|
||||
transform: rotate(-45deg) translate(-50%, -100%);
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
|
||||
cursor: pointer;
|
||||
z-index: 10000;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.comment-marker:hover {
|
||||
z-index: 10001;
|
||||
transform: rotate(-45deg) scale(1.2);
|
||||
}
|
||||
|
||||
.comment-marker.resolved {
|
||||
background: #71dd37;
|
||||
/* Zielony dla rozwiązanych */
|
||||
}
|
||||
|
||||
/* Dymek z komentarzem (Tooltip) */
|
||||
.comment-popover {
|
||||
position: absolute;
|
||||
background: white;
|
||||
border: 1px solid #d9dee3;
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
width: 250px;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
|
||||
z-index: 10002;
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.comment-popover h6 {
|
||||
margin: 0 0 5px 0;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.comment-popover p {
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Tryb wyboru - podświetlanie elementów */
|
||||
.comment-mode-active *:hover {
|
||||
outline: 2px dashed #2196F3 !important;
|
||||
cursor: comment !important;
|
||||
}
|
||||
|
||||
/* Wykluczenia, żeby nie podświetlać samego UI komentarzy */
|
||||
.comment-mode-active #prototype-topbar *:hover,
|
||||
.comment-mode-active .comment-marker:hover,
|
||||
.comment-mode-active .comment-popover *:hover {
|
||||
outline: none !important;
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
/* Modal do dodawania (prosty) */
|
||||
#comment-input-box {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||||
z-index: 100002;
|
||||
width: 300px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#comment-input-box textarea {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
margin-bottom: 10px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#comment-input-box-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 100001;
|
||||
display: none;
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
/* --- POPRAWKA: Wykluczenie okienka edycji z efektów wizualnych --- */
|
||||
|
||||
/* Nawet w trybie comment-mode-active, nasze okno dialogowe ma wyglądać normalnie */
|
||||
.comment-mode-active #comment-input-box,
|
||||
.comment-mode-active #comment-input-box * {
|
||||
outline: none !important;
|
||||
cursor: auto !important;
|
||||
/* Przywraca normalny kursor (strzałkę/łapkę) */
|
||||
}
|
||||
|
||||
/* --- POPRAWKA: Wykluczenie okienka edycji z efektów wizualnych --- */
|
||||
|
||||
/* assets/css/comments.css */
|
||||
|
||||
/* ... poprzednie style bez zmian ... */
|
||||
|
||||
/* POPRAWKI DLA MODALA I FOCUSU */
|
||||
#comment-input-box {
|
||||
/* Ustawiamy fixed/absolute dynamicznie w JS, ale bazowo: */
|
||||
z-index: 100000;
|
||||
/* Musi być wyżej niż Bootstrap Modal (zwykle 1055) */
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||||
width: 320px;
|
||||
display: none;
|
||||
/* Centrowanie - teraz zrobimy to sprytniej w CSS */
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
#comment-input-box-overlay {
|
||||
position: fixed;
|
||||
/* JS zmieni na absolute jeśli w modalu */
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(2px);
|
||||
z-index: 99999;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Ważne: Pineski muszą być nad wszystkim */
|
||||
.comment-marker {
|
||||
z-index: 100001;
|
||||
pointer-events: auto !important;
|
||||
/* Żeby dało się w nie klikać nawet w trybie blokady */
|
||||
}
|
||||
Reference in New Issue
Block a user