actuel-inactuel/assets/front-comments/style.css

:root {
  --fc-border: 2px solid var(--color-primary);
  --fc-border-light: 1px solid #999;
  --fc-font-size-m: 1.2rem;
  --fc-font-size-s: calc(var(--fc-font-size-m) / 1.3);
}

.fc__btn {
  border: none;
  background-color: transparent;
  padding: 0;
  cursor: pointer;
}
.fc__btn:not(.fc__bubble):hover,
.fc__btn-add.fc__btn-add--move {
  filter: invert(100%);
}
.fc__icon {
  width: 100%;
}

.fc__bubble,
.fc__btn-add {
  z-index: 999;
}
.fc__btn-add:focus {
  outline: none !important;
}

.fc__edition-panel,
.fc__btn-add,
.fc__bubble {
  z-index: 999;
}

.fc__btn-add {
  position: fixed;
  width: 3rem;
  height: 2.5rem;
  cursor: pointer;
}
.fc__btn-add--bottom-right {
  bottom: 1rem;
  right: 1rem;
}
.fc__btn-add--bottom-left {
  bottom: 1rem;
  left: 1rem;
}
.fc__btn-add--top-left {
  top: 1rem;
  left: 1rem;
}
.fc__btn-add--top-right {
  top: 1rem;
  right: 1rem;
}

.fc__btn-add .fc__plus {
  width: 3rem;
  height: 3rem;
  display: inline-block;
  transform: translateY(-2px);
}
.fc__btn-add:not(.fc__btn-add--move) {
  top: auto !important;
  left: auto !important;
}
.fc__btn-add.fc__btn-add--move {
  position: absolute;
  cursor: none !important;
}

.fc__btn-add--field {
  right: 5rem;
}

.fc__edition-panel {
  --panel-width: 15rem;
  position: absolute;
  padding-bottom: 0;
}

.fc__edition-panel--left {
  transform: translateX(calc(0rem - var(--panel-width)));
}
.fc__edition-panel--top {
  transform: translateY(calc(0rem - 150px));
}

.fc__edition-panel textarea {
  position: relative !important;
  resize: none !important;
  color: var(--color-primary) !important;
  font-family: sans-serif !important;
  font-weight: 100 !important;

  width: var(--panel-width) !important;
  height: 7rem !important;
  outline: none !important;
  border: var(--fc-border) !important;
  padding: 0.5rem !important;
}

.fc__edition-panel textarea:focus {
  outline: none !important;
}

.fc__edition-panel__btns {
  display: flex;
  background-color: var(--color-background);
  margin-top: 0.5rem;
}

.fc__edition-panel__btns button {
  all: initial;

  color: var(--color-primary);
  font-family: sans-serif;
  font-weight: 100;
  text-align: center;
  font-size: 1rem;

  width: 100%;
  padding: 0.5rem;
  border: var(--fc-border) !important;
  background-color: var(--color-background);
  cursor: pointer;
}
.fc__edition-panel__btns button:first-child {
  border-right: none !important;
}

.fc__edition-panel__btns button:hover {
  background-color: #eee;
}

.fc__bubble {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;

  width: 3rem;
  height: 2.9rem;
  scroll-margin-top: 6rem;

  color: var(--color-primary);
  font-family: sans-serif;
  font-size: var(--fc-font-size-m);
  font-weight: 500;

  background-image: var(--fc-icon-chat-box-empty);
  background-size: 3rem 2.5rem;
  background-position: 0 4px;
  background-repeat: no-repeat;
}

.fc__comment {
  position: absolute;
  z-index: 999;

  width: 20rem;
  padding: 1rem;
  background-color: var(--color-background);
  border: var(--fc-border) !important;
}

.fc__comment * {
  color: var(--color-primary) !important;
  font-family: sans-serif !important;
  font-weight: 100 !important;
}

.fc__comment p {
  margin: 1rem 0 !important;
}

.fc__comment-delete {
  position: absolute;
  right: 1rem;
  top: 1rem;
}

.fc__icon {
  width: 1.5rem;
  height: 1.5rem;
}

.fc__comment,
.fc__edition-panel {
  font-family: sans-serif;
  font-size: var(--fc-font-size-m);
  font-weight: 100;
}

/* ================= CONTEXT ================= */
#collapsible {
  display: none;
}

.fc__label-toggle {
  display: block;
  font-size: var(--fc-font-size-s);
  cursor: pointer;
}

.fc__label-toggle::before {
  content: " ";
  display: inline-block;

  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid currentColor;

  vertical-align: middle;
  margin-right: 0.7rem;
  transform: translateY(-2px);

  transition: transform 0.2s ease-out;
}

.fc__collapsible-content {
  max-height: 0px;
  overflow: hidden;

  transition: max-height 0.25s ease-in-out;
}

.fc__toggle:checked + .fc__label-toggle + .fc__collapsible-content {
  max-height: 100vh;
}
.fc__toggle:checked + .fc__label-toggle::before {
  transform: rotate(90deg) translateX(-3px);
}

.fc__content-inner {
  margin: 0;
  margin-top: 1rem;
  padding-left: 0;
}

.fc__context-item {
  list-style-type: none;
  font-size: var(--fc-font-size-s);
  line-height: 1.3;
}
.fc__context-item:not(:last-child) {
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px dotted var(--color-primary);
}

.fc__open-window {
  background-color: transparent;
  border: 1px solid var(--color-primary);
  border-radius: 0;
  cursor: pointer;
  margin-left: 1rem;
}

.fc__open-window:hover {
  background-color: var(--color-primary);
  color: var(--color-background) !important;
}
/* ================= END CONTEXT ================= */

.fc__author {
  font-weight: 400;
}

.fc__datetime {
  font-size: var(--fc-font-size-s);
}

.fc__suggestion {
  position: relative;
  padding: 0.1rem 0.2rem;
  margin: 0 0.2rem;
  background-color: inherit;
  border: var(--fc-border);
}
.fc__suggestion:hover {
  color: var(--color-background);
  background-color: var(--color-primary);
}
.fc__suggestion--edit {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

.fc__suggestion-bubble {
  position: absolute;
  z-index: 999;
  width: 20vw;
  background-color: var(--color-background);
  color: var(--color-primary);
  border: var(--fc-border);
  padding: 1rem;
  left: -0.1rem;
  bottom: -5.5rem;
}

.fc__suggestion-bubble__btns {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  column-gap: 0.5rem;
}