widget/css/semantic.css - master - mikopbx/ModuleAmoCrm

widget/css/semantic.css
342 строки7 KB
Alexey Portnov
Fix: дубли контактов при параллельных AmoCdrDaemon, CSS leak виджета, устаревшие ссылки
10 мар 2026, 15:15
10 мар 2026, 15:15d741ed5
/*
 * Minimal Fomantic UI styles for MikoPBX AmoCRM widget sticker.
 * Scoped under #miko to prevent CSS leaking into AmoCRM interface.
 *
 * Components: Reset, Form, Button, Message
 * Based on Fomantic UI 2.9.2
 */

/* ==============================
   Reset (scoped)
   ============================== */

#miko *,
#miko *::before,
#miko *::after {
  box-sizing: border-box;
}

#miko input[type="text"],
#miko input[type="email"],
#miko input[type="search"],
#miko input[type="password"] {
  -webkit-appearance: none;
  -moz-appearance: none;
}

#miko button,
#miko input,
#miko optgroup,
#miko select,
#miko textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

#miko button,
#miko input {
  overflow: visible;
}

#miko button,
#miko select {
  text-transform: none;
}

#miko button,
#miko [type="button"],
#miko [type="reset"],
#miko [type="submit"] {
  -webkit-appearance: button;
}

#miko button::-moz-focus-inner,
#miko [type="button"]::-moz-focus-inner,
#miko [type="reset"]::-moz-focus-inner,
#miko [type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/* ==============================
   Site basics (scoped)
   ============================== */

#miko h3 {
  font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  line-height: 1.28571429em;
  margin: calc(2rem - 0.14285714em) 0 1rem;
  font-weight: bold;
  padding: 0;
  font-size: 1.28571429rem;
}

#miko h3:first-child {
  margin-top: 0;
}

#miko h6 {
  font-size: 0.92857143em;
  font-weight: bold;
  margin: 0 0 0.28571429rem 0;
}

#miko a {
  color: #4183c4;
  text-decoration: none;
}

#miko a:hover {
  color: #1e70bf;
  text-decoration: none;
}

/* ==============================
   Button
   ============================== */

#miko .ui.button {
  cursor: pointer;
  display: inline-block;
  min-height: 1em;
  outline: none;
  border: none;
  vertical-align: baseline;
  background: #e0e1e2 none;
  color: rgba(0, 0, 0, 0.6);
  font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  margin: 0 0.25em 0 0;
  padding: 0.78571429em 1.5em;
  text-transform: none;
  text-shadow: none;
  font-weight: bold;
  line-height: 1em;
  font-style: normal;
  text-align: center;
  text-decoration: none;
  border-radius: 0.28571429rem;
  box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}

#miko .ui.button:hover {
  background-color: #cacbcd;
  background-image: none;
  box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  color: rgba(0, 0, 0, 0.8);
}

#miko .ui.button:focus {
  background-color: #cacbcd;
  color: rgba(0, 0, 0, 0.8);
  background-image: none;
}

#miko .ui.button:active {
  background-color: #babbbc;
  color: rgba(0, 0, 0, 0.9);
  box-shadow: none;
}

/* Primary */

#miko .ui.primary.button {
  background-color: #2185d0;
  color: #fff;
  text-shadow: none;
  background-image: none;
  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
}

#miko .ui.primary.button:hover {
  background-color: #1678c2;
  color: #fff;
  text-shadow: none;
}

#miko .ui.primary.button:focus {
  background-color: #0d71bb;
  color: #fff;
  text-shadow: none;
}

#miko .ui.primary.button:active {
  background-color: #1a69a4;
  color: #fff;
  text-shadow: none;
}

/* Hidden button */

#miko .ui.button.hidden {
  display: none;
}

/* ==============================
   Form
   ============================== */

#miko .ui.form {
  position: relative;
  max-width: 100%;
}

#miko .ui.form .field {
  clear: both;
  margin: 0 0 1em;
}

#miko .ui.form .field:last-child {
  margin-bottom: 0;
}

#miko .ui.form .field > label {
  display: block;
  margin: 0 0 0.28571429rem 0;
  font-size: 0.92857143em;
  font-weight: bold;
  text-transform: none;
  color: rgba(0, 0, 0, 0.87);
}

#miko .ui.form textarea,
#miko .ui.form input[type="text"] {
  width: 100%;
  vertical-align: top;
  font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  margin: 0;
  outline: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  line-height: 1.21428571em;
  padding: 0.67857143em 1em;
  font-size: 1em;
  background: #fff;
  border: 1px solid rgba(34, 36, 38, 0.15);
  color: rgba(0, 0, 0, 0.87);
  border-radius: 0.28571429rem;
  box-shadow: 0 0 0 0 transparent inset;
  transition: color 0.1s ease, border-color 0.1s ease;
}

#miko .ui.form textarea {
  padding: 0.78571429em 1em;
  line-height: 1.2857;
  resize: vertical;
}

#miko .ui.form textarea:not([rows]) {
  height: 12em;
  min-height: 8em;
  max-height: 24em;
}

/* Placeholder */

#miko .ui.form ::-webkit-input-placeholder {
  color: rgba(191, 191, 191, 0.87);
}

#miko .ui.form ::placeholder {
  color: rgba(191, 191, 191, 0.87);
}

/* Focus */

#miko .ui.form input[type="text"]:focus,
#miko .ui.form textarea:focus {
  color: rgba(0, 0, 0, 0.95);
  border-color: #85b7d9;
  border-radius: 0.28571429rem;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.35) inset;
}

#miko .ui.form :focus::placeholder {
  color: rgba(115, 115, 115, 0.87);
}

/* ==============================
   Message
   ============================== */

#miko .ui.message {
  position: relative;
  min-height: 1em;
  margin: 1em 0;
  background: #f8f8f9;
  padding: 1em 1.5em;
  line-height: 1.4285em;
  color: rgba(0, 0, 0, 0.87);
  transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
  border-radius: 0.28571429rem;
  box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.22) inset, 0 0 0 0 rgba(0, 0, 0, 0);
}

#miko .ui.message:first-child {
  margin-top: 0;
}

#miko .ui.message:last-child {
  margin-bottom: 0;
}

#miko .ui.message .header {
  display: block;
  font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  font-weight: bold;
  margin: -0.14285714em 0 0 0;
}

#miko .ui.message .header:not(.ui) {
  font-size: 1.14285714em;
}

#miko .ui.message p {
  opacity: 0.85;
  margin: 0.75em 0;
}

#miko .ui.message p:first-child {
  margin-top: 0;
}

#miko .ui.message p:last-child {
  margin-bottom: 0;
}

#miko .ui.message .header + p {
  margin-top: 0.25em;
}

#miko .ui.message > :first-child {
  margin-top: 0;
}

#miko .ui.message > :last-child {
  margin-bottom: 0;
}

/* Red / Error */

#miko .ui.red.message {
  background-color: #ffe8e6;
  color: #db2828;
  box-shadow: 0 0 0 1px #db2828 inset, 0 0 0 0 rgba(0, 0, 0, 0);
}

#miko .ui.red.message .header {
  color: #c82121;
}

/* Hidden message */

#miko .ui.message.hidden {
  display: none;
}