@charset "UTF-8";
/* ---------------------------------------------------------------------------
   postit.css - l'aspetto della nota, che nella versione VCL era codice.

   Vale la pena dire cosa ha preso il posto di cosa, perche' non e' una
   traduzione riga per riga ma un cambio di mestiere:

     ombra sfumata    <- era una maschera a 8 bit, due passate di box blur e una
                         bitmap a 32 bit con alpha premoltiplicato. Qui e'
                         filter: drop-shadow(), e non a caso: drop-shadow segue
                         la SAGOMA ritagliata, quindi l'ombra viene fuori con
                         l'angolo piegato gia' dentro, esattamente come la
                         maschera di prima. box-shadow no: quello disegna un
                         rettangolo e basta.
     angolo piegato   <- era un poligono disegnato a mano; qui e' un clip-path
                         sulla carta piu' un triangolo in CSS per la piega.
     bordo che pulsa  <- era un TTimer che invalidava; qui e' @keyframes, e non
                         costa niente a nessuno.
     dissolvenza      <- era un ciclo sincrono che ridipingeva; qui e' una
                         transition.
   --------------------------------------------------------------------------- */

.pi-scroll {
  position: absolute;
  inset: 0;
  overflow: auto;
  user-select: none;
  -webkit-user-select: none;
}

.pi-canvas {
  position: relative;
  transform-origin: 0 0;
}

/* La griglia e' un gradiente ripetuto invece di una passata di SetPixelV: il
   browser la ridisegna da se' a ogni scorrimento, e non c'e' piu' bisogno di
   limitarsi al GetClipBox per non pagarla a ogni fotogramma. */
.pi-canvas.pi-grid {
  background-image:
    radial-gradient(circle, var(--pi-grid-color) 1px, transparent 1px);
  background-size: var(--pi-grid-size) var(--pi-grid-size);
}

.pi-canvas.pi-bg {
  background-repeat: no-repeat;
  background-size: cover;
}

/* --- la nota --- */

.pi-note {
  position: absolute;
  box-sizing: border-box;
  /* Il contenitore non ha fondo: il fondo ce l'ha .pi-paper, che e'
     ritagliata. Il filtro sta qui perche' deve vedere la sagoma finita. */
  filter: drop-shadow(var(--pi-sh-x) var(--pi-sh-x) var(--pi-sh-b) var(--pi-sh-c));
  transition: left var(--pi-anim) ease-in-out,
              top var(--pi-anim) ease-in-out,
              width var(--pi-anim) ease-in-out,
              height var(--pi-anim) ease-in-out,
              opacity var(--pi-fade) linear,
              transform var(--pi-fade) ease-in;
}

/* Durante il trascinamento la transizione va tolta, o la nota inseguirebbe il
   mouse con due decimi di ritardo invece di stargli sotto. */
.pi-note.pi-dragging,
.pi-note.pi-sizing {
  transition: none;
  z-index: 9999;
}

.pi-note.pi-noshadow {
  filter: none;
}

.pi-paper {
  position: absolute;
  inset: 0;
  background: var(--pi-paper);
  clip-path: var(--pi-clip);
}

/* La piega: due triangoli, uno per l'ombra interna e uno per la carta girata.
   Nella versione VCL erano due Polygon con colori ricavati da DarkenColor;
   qui il colore lo fa color-mix, cosi' segue la carta senza che il server
   debba mandare un secondo colore. */
.pi-fold {
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--pi-fold);
  height: var(--pi-fold);
  background: linear-gradient(
    135deg,
    transparent 0 50%,
    color-mix(in srgb, var(--pi-paper) 78%, black) 50% 100%
  );
  pointer-events: none;
}

.pi-note.pi-resizable .pi-grip {
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--pi-fold);
  height: var(--pi-fold);
  cursor: nwse-resize;
}

/* La striscia della priorita'. Sul bordo sinistro perche' e' l'unico lato
   libero: a destra in basso c'e' la data del promemoria, a sinistra in basso i
   pulsanti dell'editor, in alto a destra il pulsante dello zoom e in basso a
   destra la piega. Non intercetta il mouse: e' un contrassegno, non un
   comando. */
.pi-prio {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
}

.pi-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--pi-title-h);
  display: flex;
  align-items: center;
  padding: 0 var(--pi-margin);
  box-sizing: border-box;
  border-bottom: 1px solid color-mix(in srgb, var(--pi-paper) 70%, black);
  cursor: default;
  overflow: hidden;
}

.pi-note.pi-draggable .pi-title {
  cursor: move;
}

.pi-title-text {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pi-body {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--pi-title-h);
  bottom: var(--pi-bottom);
  padding: var(--pi-margin);
  box-sizing: border-box;
  overflow: hidden;
  white-space: pre-wrap;
  word-wrap: break-word;
  cursor: default;
}

.pi-note.pi-draggable .pi-body {
  cursor: move;
}

/* --- il promemoria --- */

.pi-rem {
  position: absolute;
  /* Prima della piega, non sotto: la carta e' ritagliata sull'angolo, e una
     data messa a filo del bordo verrebbe tagliata a meta' dal clip-path.
     Nella versione VCL il conto era lo stesso, fatto a mano in ReminderRect. */
  right: calc(var(--pi-fold) + var(--pi-margin));
  bottom: 2px;
  height: var(--pi-strip);
  display: flex;
  align-items: center;
  gap: 3px;
  pointer-events: none;
  white-space: nowrap;
}

.pi-rem::before {
  content: "\1F551";           /* l'orologino */
  font-size: 90%;
}

/* Il colore dice lo stato senza scriverlo. Assegnare un colore al font del
   promemoria non ha effetto, ed e' voluto: qui vince la scadenza. */
.pi-rem.pi-rem-pending { opacity: .45; }
.pi-rem.pi-rem-overdue { color: #e02020; opacity: 1; font-weight: 600; }
.pi-rem.pi-rem-done    { opacity: .40; text-decoration: line-through; }

/* --- il pulsare --- */

/* La fase si ricava dall'orologio dell'animazione, non da un contatore: se il
   browser salta un fotogramma il battito non se ne accorge. Il bordo non muove
   ne' ridimensiona la nota, apposta: il bersaglio da cliccare per spegnerla
   deve stare fermo sotto il dito. */
@keyframes pi-pulse {
  0%, 100% { box-shadow: inset 0 0 0 0px rgba(224, 32, 32, 0); }
  50%      { box-shadow: inset 0 0 0 3px rgba(224, 32, 32, .95); }
}

.pi-note.pi-alert .pi-paper {
  animation: pi-pulse 1.1s ease-in-out infinite;
}

/* --- selezione --- */

.pi-note.pi-selected .pi-paper {
  outline: 1px solid #2060c0;
  outline-offset: -1px;
}

.pi-handle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #fff;
  border: 1px solid #2060c0;
  box-sizing: border-box;
  pointer-events: none;
}

/* --- pulsanti --- */

.pi-btn {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin-left: 4px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  opacity: .55;
  display: grid;
  place-items: center;
  line-height: 1;
  font-size: 11px;
  color: inherit;
}

.pi-btn:hover { opacity: 1; }

.pi-editbtns {
  position: absolute;
  left: var(--pi-margin);
  bottom: 2px;
  height: var(--pi-strip);
  display: flex;
  align-items: center;
  gap: 2px;
  z-index: 3;
}

.pi-editbtns .pi-btn {
  width: 18px;
  height: 16px;
  margin: 0;
  font-size: 13px;
  opacity: .8;
}

.pi-editbtns .pi-ok     { color: #007800; }
.pi-editbtns .pi-cancel { color: #aa1e1e; }

/* --- editor in posto --- */

/* Nella versione VCL l'editor doveva vivere sul parent, perche' la nota era un
   TGraphicControl e non aveva un handle su cui appoggiarlo. Qui la nota e' un
   elemento come un altro, e l'editor ci sta dentro: e' una delle poche cose
   che il web rende piu' semplici. */
.pi-edit {
  position: absolute;
  box-sizing: border-box;
  border: 0;
  outline: 1px solid rgba(0, 0, 0, .25);
  background: rgba(255, 255, 255, .55);
  resize: none;
  padding: var(--pi-margin);
  margin: 0;
  z-index: 4;
  font: inherit;
  color: inherit;
}

.pi-edit-title {
  padding: 0 var(--pi-margin);
}

/* --- rettangolo di selezione --- */

/* Nella versione VCL si disegnava in XOR con DrawFocusRect dentro un
   LockWindowUpdate: ridisegnare lo stesso rettangolo lo cancellava. Qui e' un
   div, e non c'e' niente da cancellare. */
.pi-marquee {
  position: absolute;
  border: 1px dashed #2060c0;
  background: rgba(32, 96, 192, .08);
  pointer-events: none;
  z-index: 10000;
}

/* --- dissolvenza dell'eliminazione --- */

.pi-note.pi-fading {
  opacity: 0;
  transform: scale(.55);
  pointer-events: none;
}

/* --- menu contestuale --- */

.pi-menu {
  position: fixed;
  z-index: 100000;
  min-width: 170px;
  padding: 4px 0;
  background: #fff;
  border: 1px solid #b0b0b0;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
  font: 9pt "Segoe UI", sans-serif;
  color: #202020;
  user-select: none;
}

.pi-mi {
  padding: 4px 26px 4px 24px;
  cursor: default;
  white-space: nowrap;
  position: relative;
}

.pi-mi:hover           { background: #e8f0fe; }
.pi-mi.pi-disabled     { color: #a0a0a0; }
.pi-mi.pi-disabled:hover { background: transparent; }
.pi-mi.pi-checked::before {
  content: "\2713";
  position: absolute;
  left: 8px;
}
.pi-mi.pi-sub::after {
  content: "\25B8";
  position: absolute;
  right: 8px;
}

.pi-sep {
  height: 1px;
  margin: 4px 6px;
  background: #e0e0e0;
}

.pi-swatch {
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 1px solid rgba(0, 0, 0, .35);
  margin-right: 7px;
  vertical-align: -1px;
}