You are here

editoria11y.css in Editoria11y Accessibility Checker 7

Same filename and directory in other branches
  1. 1.0.x css/editoria11y.css
/* Drupal 7 only */
.panels-ipe #ed11y-panel {
  transform: translateY(-50px) !important;
}

/*
1. Reset and base elements
2. Panel
3. Element highlights and tips
4. Popovers
 */

/* 1. Reset and base elements =============== */

.ed11y-reset,
.ed11y-reset div,
.ed11y-reset p,
.ed11y-reset ul,
.ed11y-reset li,
.ed11y-reset span,
.ed11y-reset img,
.ed11y-reset button,
.ed11y-reset a,
.ed11y-reset svg {
  /* Yes: this is an abomination. But injected content inherits styles from the theme. */
  all: initial !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  line-height: 1.5 !important;
  color: #404040 !important;
  box-sizing: border-box !important;
  font-size: 15px !important;
  border: none !important;
}
.ed11y-reset div {
  display: block !important;
}
.ed11y-reset p {
  padding-bottom: 13px !important;
  display: block !important;
}
.ed11y-reset button,
.ed11y-reset button * {
  text-align: center !important;
  cursor: pointer !important;
}
.ed11y-reset a,
.ed11y-reset a * {
  text-decoration: underline !important;
  cursor: pointer !important;
  color: inherit !important;
}
.ed11y-reset a:hover,
.ed11y-reset a:focus,
.ed11y-reset a:hover span,
.ed11y-reset a:focus span {
  color: #0a65aa !important;
}
.ed11y-reset li {
  display: block !important;
  list-style: none !important;
}

.ed11y-reset .ed11y-small,
.ed11y-reset .ed11y-small * {
  font-size: 13px !important;
}

.ed11y-button:hover,
.ed11y-button:focus {
  background: silver !important;
  color: black !important;
}

/* 2. Info panel ============================================= */

#ed11y-panel {
  z-index: 1000 !important;
  position: fixed !important;
  bottom: 16px !important;
  right: 21px !important;
  text-align: left !important;
  transform-origin: 100% 100% !important;
  border-radius: 4px 4px 8px 4px !important;
  transition: opacity .2s !important;
  max-width: calc(100vw - 28px) !important;
  background: #fff !important;
}

#ed11y-panel .ed11y-panel-inactive,
.ed11y-reset .ed11y-fullcheck,
.ed11y-panel-shut #ed11y-panel-content,
.ed11y-panel-shut #ed11y-panel-buttonbar button:not(#ed11y-main-toggle),
.ed11y-panel-minimized #ed11y-panel-upper,
.ed11y-panel-minimized #ed11y-panel-content,
.ed11y-panel-minimized #ed11y-shutpanel,
.ed11y-panel-minimized #ed11y-summary-toggle,
.ed11y-panel-minimized .ed11y-about,
.ed11y-pass .ed11y-jumplink {
  display: none !important;
}
.ed11y-panel-active .ed11y-upper-active {
  display: block !important;
}

#ed11y-panel.ed11y-preload {
  opacity: 0 !important;
  transform: scale(0) !important;
}
.ed11y-panel-active {
  width: 21.25em !important;
  box-shadow: 2px 2px 6px #0004, 0 0 0 1px #0002 !important;
}

#ed11y-panel-buttonbar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  border-top: 1px solid #ccc !important;
  border-radius: 0 12px 12px 0 !important;
}
#ed11y-panel-buttonbar button:not(#ed11y-main-toggle) {
  flex: 1 1 auto !important;
  border-right: 1px solid #ccc !important;
  min-height: 33px !important;
  min-width: 44px !important;
  color: #666 !important;
  font-weight: 300 !important;
}
#ed11y-panel #ed11y-panel-buttonbar [aria-pressed='true']:not(.ed11y-minimize) {
  background: #3679b0 !important;
  color: #fff !important;
}
#ed11y-panel-buttonbar button:not(#ed11y-main-toggle):hover,
#ed11y-panel-buttonbar button:not(#ed11y-main-toggle):focus {
  background: #064980 !important;
  color: #fff !important;
}
#ed11y-summary-toggle {
  font-size: 12px !important;
}
#ed11y-shutpanel {
  padding-right: 7px !important;
  font-family: helvetica, arial, sans-serif !important;
}
#ed11y-panel-buttonbar #ed11y-main-toggle {
  flex: 0 0 auto !important;
  height: 2.267em !important;
}
#ed11y-panel .ed11y-toggle-icon {
  width: 0 !important;
  height: 0 !important;
  padding: 17px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin: -15px -1px -17px !important;
  background-color: transparent !important;
}
#ed11y-panel.ed11y-pass .ed11y-toggle-icon {
  margin: -19px -5px -17px !important;
}
.ed11y-minimize span {
  box-shadow: 1.5px 1.5px #777 !important;
  height: 0.467em !important;
  width: 0.467em !important;
  display: inline-block !important;
  transform: rotate(45deg) !important;
  vertical-align: top !important;
  margin-top: 0.267em !important;
}
.ed11y-minimize:hover span,
.ed11y-minimize:focus span {
  box-shadow: 2px 2px #fff !important;
}
.ed11y-panel-minimized .ed11y-minimize span {
  transform: rotate(225deg) !important;
  margin-top: 12px !important;
}
.ed11y-panel-minimized .ed11y-minimize {
  padding-right: 8px !important;
}

#ed11y-main-toggle {
  background-color: #3271A4 !important;
  color: #fff !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  padding: 3px 5px 5px 5px !important;
  z-index: 1001 !important;
  outline: none !important;
  margin: -1px -12px -2px -14px !important;
}
#ed11y-main-toggle * {
  color: #fff !important;
  fill: #fff !important;
}
.ed11y-warnings  #ed11y-main-toggle {
  background-image: linear-gradient(to bottom, #be8c00, #826000) !important;
}
.ed11y-errors #ed11y-main-toggle {
  background-image: linear-gradient(to top, #790909, #b80000) !important;
}
#ed11y-panel #ed11y-main-toggle.disabled {
  background: gray !important;
  cursor: not-allowed !important;
}
#ed11y-main-toggle .ed11y-count {
  padding: 0 2px 0 0 !important;
  user-select: none !important;
  display: inline-block !important;
  font-size: 14px !important;
  vertical-align: middle !important;
  color: #fed !important;
  min-width: 1em !important;
}

#ed11y-panel-content {
  padding: 1em 1em 1em 1.125em !important;
  display: flex !important;
  align-items: center !important;
}
.ed11y-reset #ed11y-panel-header {
  position: relative !important;
  padding: 15px 36px 15px 15px !important;
  color: #333 !important;
  height: 74px !important;
  width: 100% !important;
  line-height: 22px !important;
  background: #fff !important;
}

a.ed11y-jumplink,
a.ed11y-jumplink span {
  color: #004c9b !important;
  font-size: 13px !important;
}
a.ed11y-jumplink {
  display: inline-block !important;
  padding: 3px 6px !important;
  margin: -6px !important;
}

#ed11y-panel a:hover,
#ed11y-panel a:focus,
#ed11y-panel a:hover span,
#ed11y-panel a:focus span {
  color: #111 !important;
}

#ed11y-panel .ed11y-fullcheck-header {
  padding: 0 15px !important;
  line-height: 28px !important;
  background: #3679b0 !important;
  font-size: 14px !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 4px 4px 0 0 !important;
}
#ed11y-panel .ed11y-fullcheck-header p {
  padding: 4px 0 8px !important;
  font-size: 14px !important;
  color: #fff !important;
}
.ed11y-fullcheck-header a:hover,
.ed11y-fullcheck-header a:focus {
  color: inherit !important;
  text-decoration: none !important;
  box-shadow: inset 0 -2px #fff, 0 1px #fff !important;
}

.ed11y-reset .ed11y-bold {
  font-weight: 600 !important;
  color: inherit !important;
}

.ed11y-reset .ed11y-fullcheck {
  position: relative !important;
  padding-bottom: 0 !important;
  width: 100% !important;
  transition: all .2s ease-out !important;
  border-bottom: 1px solid #dbdbdb !important;
  background: #f4f4f4 !important;
}
.ed11y-fullcheck .ed11y-header-button {
  background: rgba(0,0,0,.25) !important;
  color: #fff !important;
  opacity: 1 !important;
  padding: 0 8px 3px 9px !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  font-size: 12px !important;
  border-top-right-radius: 4px !important;
}
.ed11y-header-button span {
  color: inherit !important;
}
.ed11y-fullcheck button:hover,
.ed11y-fullcheck button:focus {
  background: #444 !important;
}

#ed11y-panel .ed11y-next-button {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  height: 28px !important;
  color: #fff !important;
}

/* todo beta: this needs JS */
#ed11y-panel .allytogglefocus {
  transform: scale(1.09) !important;
  background-image: linear-gradient(to bottom, #e040fb, #00bcd4) !important;
}
.ed11y-error-message a {
  color: #fff !important;
  text-decoration: underline !important;
  border: 0 !important;
}
.ed11y-error-message a:hover,
.ed11y-error-message a:focus {
  text-decoration: none !important;
}
.ed11y-reset .ed11y-sr-only,
div.ed11y-sr-only {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important;
  display: block !important;
  white-space: nowrap !important;
  clip-path: inset(50%) !important;
}
.ed11y-reset .ed11y-red-text,
.ed11y-reset .ed11y-red-text strong {
  color: #ba0013 !important;
  font-size: 15px !important;
}
#ed11y-outline-list .ed11y-outline-2 {
  padding-left: 28px !important;
}
#ed11y-outline-list .ed11y-outline-3 {
  padding-left: 36px !important;
}
#ed11y-outline-list .ed11y-outline-4 {
  padding-left: 44px !important;
}
#ed11y-outline-list .ed11y-outline-5 {
  padding-left: 52px !important;
}
#ed11y-outline-list .ed11y-outline-6 {
  padding-left: 60px !important;
}
#ed11y-outline-list .ed11y-red-text span[aria-hidden="true"] {
  float: left !important;
  margin-left: -12px !important;
}
.ed11y-fullcheck li,
.ed11y-fullcheck ul {
  padding: 5px 0 5px 20px !important;
  font-size: 14px !important;
  text-indent: -23px !important;
}
.ed11y-fullcheck ul {
  list-style-type: none !important;
  padding: 7px 10px 0 15px !important;
  background: #f4f4f4 !important;
  display: block !important;
  z-index: 100 !important;
  position: relative !important;
  outline: 0 !important;
  max-height: calc(90vh - 352px) !important;
  min-height: 160px !important;
  overflow-y: auto !important;
}
#ed11y-outline-list .ed11y-small {
  font-weight: 600 !important;
}
#ed11y-outline-list .ed11y-small:first-child {
  box-shadow: inset 0 0 0 1px #777 !important;
  border-radius: 4px !important;
  width: 18px !important;
  height: 18px !important;
  display: inline-block !important;
  text-align: center !important;
  margin-right: 2px !important;
  color: #fff !important;
  background: linear-gradient(to bottom right, #a659ce, #1679b0) !important;
  line-height: 18px !important;
  font-size: 12px !important;
}
#ed11y-image-list li {
  padding: 2px 6px !important;
  text-indent: 0 !important;
  width: 100% !important;
  word-break: break-word !important;
  margin: 12px 0 !important;
  float: left !important;
}
#ed11y-image-list img {
  width: 76px !important;
  margin: 4px 10px 0 0 !important;
  float: left !important;
}

#ed11y-outline-list::-webkit-scrollbar {
  -webkit-appearance: none !important;
  width: 7px !important;
}
#ed11y-outline-list::-webkit-scrollbar-thumb {
  border-radius: 5px !important;
  background-color: rgba(0, 0, 0, .5) !important;
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5) !important;
}
.ed11y-tip button {
  top: 0 !important;
  position: absolute !important;
  width: 34px !important;
  height: 46px !important;
  right: 2px !important;
  color: #fafafa !important;
  background: #3679b0 !important;
  box-shadow: -1px 1px rgba(255,255,255,.6) !important;
}


button#ed11y-panel-button {
  float: left !important;
  border-radius: 0 !important;
  background: #f6f6f6 !important;
  width: 48% !important;
  color: #4d4d4d !important;
  font-size: 14px !important;
  border-top: 1px solid #d7d7d7 !important;
  outline: 0 !important;
  cursor: pointer !important;
  height: 30px !important;
}

#ed11y-panel.ed11y-panel-minimized {
  width: auto !important;
  min-height: 0 !important;
  right: 22px !important;
}

.ed11y-reveal-alts {
  position: absolute !important;
  font-size: 14px !important;
  display: inline-flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}

.ed11y-reveal-alts span {
  background: #00bffff3 !important;
  color: #111 !important;
  z-index: 100 !important;
  text-indent: 28px !important;
  font-weight: 500 !important;
  padding: 6px !important;
  width: 100% !important;
}
.ed11y-reveal-alts svg {
  width: 22px !important;
  margin: 0 0 0 -27px !important;
  position: absolute !important;
}
.ed11y-reveal-alts path {
  fill: #111 !important;
}

button#ed11y-panel-button:focus,
button#ed11y-panel-button:hover {
  background: #e1e1e1 !important;
}


span.ed11y-headings-label {
  font-size: .9em !important;
  padding: 4px 3px !important;
  border-radius: 3px !important;
  background-color: #777678 !important;
  background-image: linear-gradient(to bottom right, #b629ce, #16aec2) !important;
  color: white !important;
  display: inline-block !important;
}

@media (prefers-reduced-motion: reduce) {
  #ed11y-panel > * {
    animation: none !important;
  }
}


/* ===== Alert and warning highlights ============================================= */

.ed11y-tip p {
  color: #41576d !important;
}
.ed11y-reset .ed11y-tip-heading {
  font-size: 15px !important;
  font-weight: 500 !important;
  padding: 12px 34px 11px 16px !important;
  margin: -16px -16px 11px -16px !important;
  color: #fff !important;
  background: #3679b0 !important;
  min-height: 46px !important;
}
.ed11y-reset .ed11y-tip-heading * {
  color: inherit !important;
}
.ed11y-tip-heading ~ .ed11y-tip-heading {
  margin: 8px 0 12px -16px !important;
  padding: 3px 16px !important;
  display: inline-block !important;
}
.ed11y-tip-heading ~ .ed11y-tip-heading::before {
  content: "Issue #2: " !important;
  padding-right: 2px !important;
}
.ed11y-tip-heading ~ .ed11y-tip-heading ~ .ed11y-tip-heading::before {
  content: "Issue #3: " !important;
}
.ed11y-tip-heading ~ .ed11y-tip-heading ~ .ed11y-tip-heading ~ .ed11y-tip-heading::before {
  content: "Issue #4: " !important;
}
.ed11y-revealed-element {
  background: #ffe877 !important;
  padding: 12px 16px 44px !important;
  text-align: center !important;
  font-weight: 600 !important;
  border-radius: 16px 16px 0 0 !important;
}

.ed11y-reset .ed11y-pop {
  display: none !important;
}

/* Templated SVG icons from FontAwesome 5 for better cross-browser support and minimize conflicting libraries. */
button .ed11y-toggle-icon,
div.ed11y-panel-icon {
  background: 50% 50% #d00017 url("data:image/svg+xml,%3Csvg role='img' focusable='false' width='28px' height='28px' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ffffff' d='M256 48c114.953 0 208 93.029 208 208 0 114.953-93.029 208-208 208-114.953 0-208-93.029-208-208 0-114.953 93.029-208 208-208m0-40C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 56C149.961 64 64 149.961 64 256s85.961 192 192 192 192-85.961 192-192S362.039 64 256 64zm0 44c19.882 0 36 16.118 36 36s-16.118 36-36 36-36-16.118-36-36 16.118-36 36-36zm117.741 98.023c-28.712 6.779-55.511 12.748-82.14 15.807.851 101.023 12.306 123.052 25.037 155.621 3.617 9.26-.957 19.698-10.217 23.315-9.261 3.617-19.699-.957-23.316-10.217-8.705-22.308-17.086-40.636-22.261-78.549h-9.686c-5.167 37.851-13.534 56.208-22.262 78.549-3.615 9.255-14.05 13.836-23.315 10.217-9.26-3.617-13.834-14.056-10.217-23.315 12.713-32.541 24.185-54.541 25.037-155.621-26.629-3.058-53.428-9.027-82.141-15.807-8.6-2.031-13.926-10.648-11.895-19.249s10.647-13.926 19.249-11.895c96.686 22.829 124.283 22.783 220.775 0 8.599-2.03 17.218 3.294 19.249 11.895 2.029 8.601-3.297 17.219-11.897 19.249z'%3E%3C/path%3E%3C/svg%3E") no-repeat !important;
  background-size: 28px !important;
  line-height: 100px !important;
}

div.ed11y-panel-icon {
  height: 34px !important;
  width: 34px !important;
  margin: 0 12px 0 0 !important;
  border-radius: 100% !important;
  background-color: #3679b0 !important;
}

.ed11y-pass .ed11y-panel-icon {
  background: 50% 50% #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' role='img' focusable='false' aria-hidden='true' viewBox='0 0 512 512'%3E%3Cpath fill='%23359E56' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'%3E%3C/path%3E%3C/svg%3E") no-repeat !important;
}
.ed11y-errors .ed11y-panel-icon {
  background-color: #b80000 !important;
}
.ed11y-warnings .ed11y-panel-icon {
  background-color: #ae7c00 !important;
}
.ed11y-errors .ed11y-jumplink,
.ed11y-errors .ed11y-jumplink span {
  color: #b80000 !important;
}
.ed11y-warnings .ed11y-jumplink,
.ed11y-warnings .ed11y-jumplink span {
  color: #826000 !important;
}

.ed11y-pops-ready .ed11y-pop,
.ed11y-errors .ed11y-toggle-icon,
.ed11y-warning .ed11y-toggle-icon {
  background: 50% 50% #d00017 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' role='img' focusable='false' aria-hidden='true' viewBox='0 0 576 576' width='22px' height='22px'%3E%3Cpath fill='%23ffffff' d='M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'%3E%3C/path%3E%3C/svg%3E") no-repeat !important;
  background-size: 22px !important;
}

.ed11y-pops-ready .ed11y-warning-btn {
  background: 50% 50% #ffc800 url("data:image/svg+xml,%3Csvg height='22px' width='22px' fill='%23505050' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' viewBox='0 0 100 100' enable-background='new 0 0 100 100' xml:space='preserve'%3E%3Cpath d='M50,5C25.147,5,5,25.147,5,50c0,24.854,20.147,45,45,45c24.854,0,45-20.146,45-45C95,25.147,74.854,5,50,5z M49.999,76.75 c-3.342,0-6.061-2.717-6.061-6.057c0-3.346,2.719-6.066,6.061-6.066c3.343,0,6.063,2.723,6.063,6.066 C56.063,74.033,53.342,76.75,49.999,76.75z M66.238,43.808c-1.174,1.827-2.795,4.01-6.028,6.531 c-3.213,2.461-4.185,3.724-4.478,4.259c-0.166,0.299-0.402,0.895-0.59,2.004c-0.065,0.39-0.119,0.812-0.162,1.265l-0.254,2.714 l-9.771,0.023l0.124-3.127c0.017-0.4,0.06-1.185,0.168-1.918c0.324-2.229,1.085-4.209,2.261-5.882 c1.104-1.573,3.247-3.563,6.549-6.079c2.442-1.863,3.396-2.928,3.764-3.492c0.47-0.717,0.697-1.472,0.697-2.305 c0-1.931-0.705-3.46-2.094-4.545c-1.474-1.151-3.518-1.735-6.073-1.735c-2.265,0-4.176,0.599-5.682,1.778 c-1.594,1.239-2.713,2.953-3.245,4.964l-0.66,2.492l-9.563-1.037l0.676-3.238c0.88-4.218,2.865-7.474,5.902-9.677 c3.934-2.855,8.156-4.303,12.552-4.303c4.856,0,8.831,1.249,12.508,3.931c3.399,2.482,5.349,6.492,5.349,11.002 C68.188,39.642,67.55,41.727,66.238,43.808z'%3E%3C/path%3E%3C/svg%3E") no-repeat !important;
}
.ed11y-warnings .ed11y-toggle-icon {
  background: 50% 50% #ffc800 url("data:image/svg+xml,%3Csvg width='124' height='124' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Ctitle%3ELayer 1%3C/title%3E %3Cpath d='m61,18c-24.853,0 -45,20.147 -45,45c0,24.854 20.147,45 45,45c24.854,0 45,-20.146 45,-45c0,-24.853 -20.146,-45 -45,-45zm-0.001,71.75c-3.342,0 -6.061,-2.717 -6.061,-6.057c0,-3.346 2.719,-6.066 6.061,-6.066c3.343,0 6.063,2.723 6.063,6.066c0.001,3.34 -2.72,6.057 -6.063,6.057zm16.239,-32.942c-1.174,1.827 -2.795,4.01 -6.028,6.531c-3.213,2.461 -4.185,3.724 -4.478,4.259c-0.166,0.299 -0.402,0.895 -0.59,2.004c-0.065,0.39 -0.119,0.812 -0.162,1.265l-0.254,2.714l-9.771,0.023l0.124,-3.127c0.017,-0.4 0.06,-1.185 0.168,-1.918c0.324,-2.229 1.085,-4.209 2.261,-5.882c1.104,-1.573 3.247,-3.563 6.549,-6.079c2.442,-1.863 3.396,-2.928 3.764,-3.492c0.47,-0.717 0.697,-1.472 0.697,-2.305c0,-1.931 -0.705,-3.46 -2.094,-4.545c-1.474,-1.151 -3.518,-1.735 -6.073,-1.735c-2.265,0 -4.176,0.599 -5.682,1.778c-1.594,1.239 -2.713,2.953 -3.245,4.964l-0.66,2.492l-9.563,-1.037l0.676,-3.238c0.88,-4.218 2.865,-7.474 5.902,-9.677c3.934,-2.855 8.156,-4.303 12.552,-4.303c4.856,0 8.831,1.249 12.508,3.931c3.399,2.482 5.349,6.492 5.349,11.002c0,2.209 -0.638,4.294 -1.95,6.375z' id='svg_1'/%3E %3Cellipse fill='none' stroke='%23000000' stroke-width='10' cx='61' cy='62.81668' id='svg_4' rx='56' ry='56'/%3E %3C/g%3E %3C/svg%3E") no-repeat !important;
  background-size: 28px !important;
}

#ed11y-panel.ed11y-warnings .ed11y-toggle-icon {
  margin: 0 5px 0 -1px !important;
  padding: 14px !important;
  filter: invert(1) brightness(1.725) !important;
}

.ed11y-pops-ready .ed11y-pop {
  font-size: 0 !important;
  display: block !important;
  border-radius: 50% !important;
  position: absolute !important;
  margin: 10px 0 0 10px !important;
  z-index: 499 !important;
  padding: 17px !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  box-shadow: 1px 1px 5px 0 rgba(0,0,0,.5) !important;
  min-width: 0 !important;
  outline: 0 !important;
  width: 0 !important;
  height: 0 !important;
}
.ed11y-reset .ed11y-pop[data-ed11y-inserted="after"] {
  margin-left: -8px !important;
}
.ed11y-reset .ed11y-pop-ready {
  display: block !important;
  transition: box-shadow .15s ease-out !important;
}


.ed11y-instance-inline + .ed11y-instance-inline > button {
  margin-top: 16px !important;
  box-shadow: none !important;
}

body .ed11y-link-text-warning {
  box-shadow: 0 0 0 4px #ffc800 !important;
  border-radius: 2px !important;
  border-color: transparent !important;
}
button.ed11y-pop:hover {
  box-shadow: 0 0 0 3px #5294ca !important;
}
body .ed11y-headings-fail {
  color: #c22326 !important;
}
body .ed11y-error-border {
  outline: 5px solid #c22326 !important;
}
body .ed11y-link-text-fail {
  background-color: #c22326 !important;
  border-radius: 0.25em !important;
  padding: 5px !important;
  color: white !important;
}
body .ed11y-text-warning,
body .ed11y-uppercase-warning {
  background-color: rgba(255,200,0, .2);
  box-shadow: 4px 0 rgba(255,200,0, .2), -4px 0 rgba(255,200,0, .2);
}
body .ed11y-text-warning {
  background-color: rgba(255,200,0, .2) !important;
  box-shadow: 4px 0 rgba(255,200,0, .2), -4px 0 rgba(255,200,0, .2) !important;
}

body .ed11y-warning-border {
  outline: 5px solid #ffc800 !important;
}

#ed11y-panel svg {
  overflow: hidden !important;
  vertical-align: top !important;
}


.ed11y-tip-ready[aria-expanded="true"]:focus {
  outline: none !important;
}
[data-ed11y-tip-root] {
  z-index: 500 !important;
}
.ed11y-tip-box[data-theme~='ed11y-theme'] {
  background-color: white !important;
  color: #333 !important;
  padding: 8px !important;
  font-size: 14px !important;
  box-shadow: 0 0 16px #0009 !important;
  font-weight: normal !important;
}

.ed11y-reset .ed11y-tip {
  width: 400px !important;
  max-width: 98vw !important;
  position: absolute !important;
  background: #fafafa !important;
  border-radius: 3px 0 3px 0 !important;
  padding: 16px 16px 0 16px !important;
  box-shadow: inset 0 0 0 2px #3679b0, -1px 0 #fff3, 1px 1px 5px rgba(0,0,0,.2) !important;
  color: #112f4e !important;
  z-index: 1001 !important;
  display: none !important;
}
.ed11y-reset .ed11y-tip-under {
  width: calc(100vw - 30px) !important;
}

.ed11y-tip .ed11y-arrow {
  content: "" !important;
  position: absolute !important;
  width: 20px !important;
  height: 20px !important;
  margin-left: -26px !important;
  transform: rotate(45deg) !important;
  border: 1px solid rgba(255,255,255,.6) !important;
  border-right: 0 !important;
  border-top: 0 !important;
  background: #3679b0 !important;
}

.ed11y-reset .ed11y-about[aria-expanded="true"] {
  background: #3679b0 !important;
  color: #fff !important;
}
.ed11y-about-text + #ed11y-fullcheck-headers {
  display: none !important;
}
.ed11y-reset .ed11y-about-text {
  background: #fafafa !important;
  padding: 16px 18px 1px 16px !important;
  box-shadow: inset 0 0 3px rgba(0,0,0,.2) !important;
}
.ed11y-about-text p + p {
  padding-right: 26px !important;
}
.ed11y-tip-left .ed11y-arrow {
  right: -10px !important;
  transform: rotate(-135deg) !important;
}
.ed11y-tip-under .ed11y-arrow {
  transform: rotate(135deg) !important;
}

.ed11y-hover + .ed11y-tip,
.ed11y-reset .ed11y-tip-open {
  display: block !important;
  opacity: 1 !important;
}
.ed11y-force-overflow {
  overflow: visible !important;
}
.ed11y-hidden-highlight {
  box-shadow: inset 0 0 0 1px #c27000, 0 0 0 2px #c26000, 0 0 0 7px #ffc800, 0 0 0 10px #c27000 !important;
}
.ed11y-instance {
  text-align: left !important;
}
.ed11y-instance-inline {
  text-align: left !important;
  display: inline !important;
  vertical-align: top !important;
  position: absolute !important;
}
.ed11y-reset .ed11y-tip-closer {
  margin: -13px -16px 0 0 !important;
  position: relative !important;
  float: right !important;
  padding: 2px 8px 5px 9px !important;
  font-size: 14px !important;
}
#ed11y-panel .ed11y-tip-box {
  width: 95% !important;
}

.ed11y-hidden,
.ed11y-reset .ed11y-hidden {
  display: none !important;
}

.ed11y-button:focus,
button.ed11y-pop:focus,
#ed11y-panel a:focus,
#ed11y-panel button:focus,
#ed11y-main-toggle:hover {
  box-shadow: 0 0 3px 1px #fff, 0 0 0 3px #064980 !important;
}
.ed11y-panel-minimized#ed11y-panel .ed11y-minimize:focus {
  box-shadow: none !important;
}

File

css/editoria11y.css
View source
  1. /* Drupal 7 only */
  2. .panels-ipe #ed11y-panel {
  3. transform: translateY(-50px) !important;
  4. }
  5. /*
  6. 1. Reset and base elements
  7. 2. Panel
  8. 3. Element highlights and tips
  9. 4. Popovers
  10. */
  11. /* 1. Reset and base elements =============== */
  12. .ed11y-reset,
  13. .ed11y-reset div,
  14. .ed11y-reset p,
  15. .ed11y-reset ul,
  16. .ed11y-reset li,
  17. .ed11y-reset span,
  18. .ed11y-reset img,
  19. .ed11y-reset button,
  20. .ed11y-reset a,
  21. .ed11y-reset svg {
  22. /* Yes: this is an abomination. But injected content inherits styles from the theme. */
  23. all: initial !important;
  24. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  25. line-height: 1.5 !important;
  26. color: #404040 !important;
  27. box-sizing: border-box !important;
  28. font-size: 15px !important;
  29. border: none !important;
  30. }
  31. .ed11y-reset div {
  32. display: block !important;
  33. }
  34. .ed11y-reset p {
  35. padding-bottom: 13px !important;
  36. display: block !important;
  37. }
  38. .ed11y-reset button,
  39. .ed11y-reset button * {
  40. text-align: center !important;
  41. cursor: pointer !important;
  42. }
  43. .ed11y-reset a,
  44. .ed11y-reset a * {
  45. text-decoration: underline !important;
  46. cursor: pointer !important;
  47. color: inherit !important;
  48. }
  49. .ed11y-reset a:hover,
  50. .ed11y-reset a:focus,
  51. .ed11y-reset a:hover span,
  52. .ed11y-reset a:focus span {
  53. color: #0a65aa !important;
  54. }
  55. .ed11y-reset li {
  56. display: block !important;
  57. list-style: none !important;
  58. }
  59. .ed11y-reset .ed11y-small,
  60. .ed11y-reset .ed11y-small * {
  61. font-size: 13px !important;
  62. }
  63. .ed11y-button:hover,
  64. .ed11y-button:focus {
  65. background: silver !important;
  66. color: black !important;
  67. }
  68. /* 2. Info panel ============================================= */
  69. #ed11y-panel {
  70. z-index: 1000 !important;
  71. position: fixed !important;
  72. bottom: 16px !important;
  73. right: 21px !important;
  74. text-align: left !important;
  75. transform-origin: 100% 100% !important;
  76. border-radius: 4px 4px 8px 4px !important;
  77. transition: opacity .2s !important;
  78. max-width: calc(100vw - 28px) !important;
  79. background: #fff !important;
  80. }
  81. #ed11y-panel .ed11y-panel-inactive,
  82. .ed11y-reset .ed11y-fullcheck,
  83. .ed11y-panel-shut #ed11y-panel-content,
  84. .ed11y-panel-shut #ed11y-panel-buttonbar button:not(#ed11y-main-toggle),
  85. .ed11y-panel-minimized #ed11y-panel-upper,
  86. .ed11y-panel-minimized #ed11y-panel-content,
  87. .ed11y-panel-minimized #ed11y-shutpanel,
  88. .ed11y-panel-minimized #ed11y-summary-toggle,
  89. .ed11y-panel-minimized .ed11y-about,
  90. .ed11y-pass .ed11y-jumplink {
  91. display: none !important;
  92. }
  93. .ed11y-panel-active .ed11y-upper-active {
  94. display: block !important;
  95. }
  96. #ed11y-panel.ed11y-preload {
  97. opacity: 0 !important;
  98. transform: scale(0) !important;
  99. }
  100. .ed11y-panel-active {
  101. width: 21.25em !important;
  102. box-shadow: 2px 2px 6px #0004, 0 0 0 1px #0002 !important;
  103. }
  104. #ed11y-panel-buttonbar {
  105. display: flex !important;
  106. flex-direction: row !important;
  107. flex-wrap: nowrap !important;
  108. border-top: 1px solid #ccc !important;
  109. border-radius: 0 12px 12px 0 !important;
  110. }
  111. #ed11y-panel-buttonbar button:not(#ed11y-main-toggle) {
  112. flex: 1 1 auto !important;
  113. border-right: 1px solid #ccc !important;
  114. min-height: 33px !important;
  115. min-width: 44px !important;
  116. color: #666 !important;
  117. font-weight: 300 !important;
  118. }
  119. #ed11y-panel #ed11y-panel-buttonbar [aria-pressed='true']:not(.ed11y-minimize) {
  120. background: #3679b0 !important;
  121. color: #fff !important;
  122. }
  123. #ed11y-panel-buttonbar button:not(#ed11y-main-toggle):hover,
  124. #ed11y-panel-buttonbar button:not(#ed11y-main-toggle):focus {
  125. background: #064980 !important;
  126. color: #fff !important;
  127. }
  128. #ed11y-summary-toggle {
  129. font-size: 12px !important;
  130. }
  131. #ed11y-shutpanel {
  132. padding-right: 7px !important;
  133. font-family: helvetica, arial, sans-serif !important;
  134. }
  135. #ed11y-panel-buttonbar #ed11y-main-toggle {
  136. flex: 0 0 auto !important;
  137. height: 2.267em !important;
  138. }
  139. #ed11y-panel .ed11y-toggle-icon {
  140. width: 0 !important;
  141. height: 0 !important;
  142. padding: 17px !important;
  143. display: inline-block !important;
  144. vertical-align: middle !important;
  145. margin: -15px -1px -17px !important;
  146. background-color: transparent !important;
  147. }
  148. #ed11y-panel.ed11y-pass .ed11y-toggle-icon {
  149. margin: -19px -5px -17px !important;
  150. }
  151. .ed11y-minimize span {
  152. box-shadow: 1.5px 1.5px #777 !important;
  153. height: 0.467em !important;
  154. width: 0.467em !important;
  155. display: inline-block !important;
  156. transform: rotate(45deg) !important;
  157. vertical-align: top !important;
  158. margin-top: 0.267em !important;
  159. }
  160. .ed11y-minimize:hover span,
  161. .ed11y-minimize:focus span {
  162. box-shadow: 2px 2px #fff !important;
  163. }
  164. .ed11y-panel-minimized .ed11y-minimize span {
  165. transform: rotate(225deg) !important;
  166. margin-top: 12px !important;
  167. }
  168. .ed11y-panel-minimized .ed11y-minimize {
  169. padding-right: 8px !important;
  170. }
  171. #ed11y-main-toggle {
  172. background-color: #3271A4 !important;
  173. color: #fff !important;
  174. border-radius: 50px !important;
  175. cursor: pointer !important;
  176. padding: 3px 5px 5px 5px !important;
  177. z-index: 1001 !important;
  178. outline: none !important;
  179. margin: -1px -12px -2px -14px !important;
  180. }
  181. #ed11y-main-toggle * {
  182. color: #fff !important;
  183. fill: #fff !important;
  184. }
  185. .ed11y-warnings #ed11y-main-toggle {
  186. background-image: linear-gradient(to bottom, #be8c00, #826000) !important;
  187. }
  188. .ed11y-errors #ed11y-main-toggle {
  189. background-image: linear-gradient(to top, #790909, #b80000) !important;
  190. }
  191. #ed11y-panel #ed11y-main-toggle.disabled {
  192. background: gray !important;
  193. cursor: not-allowed !important;
  194. }
  195. #ed11y-main-toggle .ed11y-count {
  196. padding: 0 2px 0 0 !important;
  197. user-select: none !important;
  198. display: inline-block !important;
  199. font-size: 14px !important;
  200. vertical-align: middle !important;
  201. color: #fed !important;
  202. min-width: 1em !important;
  203. }
  204. #ed11y-panel-content {
  205. padding: 1em 1em 1em 1.125em !important;
  206. display: flex !important;
  207. align-items: center !important;
  208. }
  209. .ed11y-reset #ed11y-panel-header {
  210. position: relative !important;
  211. padding: 15px 36px 15px 15px !important;
  212. color: #333 !important;
  213. height: 74px !important;
  214. width: 100% !important;
  215. line-height: 22px !important;
  216. background: #fff !important;
  217. }
  218. a.ed11y-jumplink,
  219. a.ed11y-jumplink span {
  220. color: #004c9b !important;
  221. font-size: 13px !important;
  222. }
  223. a.ed11y-jumplink {
  224. display: inline-block !important;
  225. padding: 3px 6px !important;
  226. margin: -6px !important;
  227. }
  228. #ed11y-panel a:hover,
  229. #ed11y-panel a:focus,
  230. #ed11y-panel a:hover span,
  231. #ed11y-panel a:focus span {
  232. color: #111 !important;
  233. }
  234. #ed11y-panel .ed11y-fullcheck-header {
  235. padding: 0 15px !important;
  236. line-height: 28px !important;
  237. background: #3679b0 !important;
  238. font-size: 14px !important;
  239. color: #fff !important;
  240. font-weight: 600 !important;
  241. border-radius: 4px 4px 0 0 !important;
  242. }
  243. #ed11y-panel .ed11y-fullcheck-header p {
  244. padding: 4px 0 8px !important;
  245. font-size: 14px !important;
  246. color: #fff !important;
  247. }
  248. .ed11y-fullcheck-header a:hover,
  249. .ed11y-fullcheck-header a:focus {
  250. color: inherit !important;
  251. text-decoration: none !important;
  252. box-shadow: inset 0 -2px #fff, 0 1px #fff !important;
  253. }
  254. .ed11y-reset .ed11y-bold {
  255. font-weight: 600 !important;
  256. color: inherit !important;
  257. }
  258. .ed11y-reset .ed11y-fullcheck {
  259. position: relative !important;
  260. padding-bottom: 0 !important;
  261. width: 100% !important;
  262. transition: all .2s ease-out !important;
  263. border-bottom: 1px solid #dbdbdb !important;
  264. background: #f4f4f4 !important;
  265. }
  266. .ed11y-fullcheck .ed11y-header-button {
  267. background: rgba(0,0,0,.25) !important;
  268. color: #fff !important;
  269. opacity: 1 !important;
  270. padding: 0 8px 3px 9px !important;
  271. position: absolute !important;
  272. top: 0 !important;
  273. right: 0 !important;
  274. font-size: 12px !important;
  275. border-top-right-radius: 4px !important;
  276. }
  277. .ed11y-header-button span {
  278. color: inherit !important;
  279. }
  280. .ed11y-fullcheck button:hover,
  281. .ed11y-fullcheck button:focus {
  282. background: #444 !important;
  283. }
  284. #ed11y-panel .ed11y-next-button {
  285. position: absolute !important;
  286. top: 0 !important;
  287. right: 0 !important;
  288. font-size: 12px !important;
  289. font-weight: 400 !important;
  290. height: 28px !important;
  291. color: #fff !important;
  292. }
  293. /* todo beta: this needs JS */
  294. #ed11y-panel .allytogglefocus {
  295. transform: scale(1.09) !important;
  296. background-image: linear-gradient(to bottom, #e040fb, #00bcd4) !important;
  297. }
  298. .ed11y-error-message a {
  299. color: #fff !important;
  300. text-decoration: underline !important;
  301. border: 0 !important;
  302. }
  303. .ed11y-error-message a:hover,
  304. .ed11y-error-message a:focus {
  305. text-decoration: none !important;
  306. }
  307. .ed11y-reset .ed11y-sr-only,
  308. div.ed11y-sr-only {
  309. position: absolute !important;
  310. clip: rect(1px, 1px, 1px, 1px) !important;
  311. padding: 0 !important;
  312. border: 0 !important;
  313. height: 1px !important;
  314. width: 1px !important;
  315. overflow: hidden !important;
  316. display: block !important;
  317. white-space: nowrap !important;
  318. clip-path: inset(50%) !important;
  319. }
  320. .ed11y-reset .ed11y-red-text,
  321. .ed11y-reset .ed11y-red-text strong {
  322. color: #ba0013 !important;
  323. font-size: 15px !important;
  324. }
  325. #ed11y-outline-list .ed11y-outline-2 {
  326. padding-left: 28px !important;
  327. }
  328. #ed11y-outline-list .ed11y-outline-3 {
  329. padding-left: 36px !important;
  330. }
  331. #ed11y-outline-list .ed11y-outline-4 {
  332. padding-left: 44px !important;
  333. }
  334. #ed11y-outline-list .ed11y-outline-5 {
  335. padding-left: 52px !important;
  336. }
  337. #ed11y-outline-list .ed11y-outline-6 {
  338. padding-left: 60px !important;
  339. }
  340. #ed11y-outline-list .ed11y-red-text span[aria-hidden="true"] {
  341. float: left !important;
  342. margin-left: -12px !important;
  343. }
  344. .ed11y-fullcheck li,
  345. .ed11y-fullcheck ul {
  346. padding: 5px 0 5px 20px !important;
  347. font-size: 14px !important;
  348. text-indent: -23px !important;
  349. }
  350. .ed11y-fullcheck ul {
  351. list-style-type: none !important;
  352. padding: 7px 10px 0 15px !important;
  353. background: #f4f4f4 !important;
  354. display: block !important;
  355. z-index: 100 !important;
  356. position: relative !important;
  357. outline: 0 !important;
  358. max-height: calc(90vh - 352px) !important;
  359. min-height: 160px !important;
  360. overflow-y: auto !important;
  361. }
  362. #ed11y-outline-list .ed11y-small {
  363. font-weight: 600 !important;
  364. }
  365. #ed11y-outline-list .ed11y-small:first-child {
  366. box-shadow: inset 0 0 0 1px #777 !important;
  367. border-radius: 4px !important;
  368. width: 18px !important;
  369. height: 18px !important;
  370. display: inline-block !important;
  371. text-align: center !important;
  372. margin-right: 2px !important;
  373. color: #fff !important;
  374. background: linear-gradient(to bottom right, #a659ce, #1679b0) !important;
  375. line-height: 18px !important;
  376. font-size: 12px !important;
  377. }
  378. #ed11y-image-list li {
  379. padding: 2px 6px !important;
  380. text-indent: 0 !important;
  381. width: 100% !important;
  382. word-break: break-word !important;
  383. margin: 12px 0 !important;
  384. float: left !important;
  385. }
  386. #ed11y-image-list img {
  387. width: 76px !important;
  388. margin: 4px 10px 0 0 !important;
  389. float: left !important;
  390. }
  391. #ed11y-outline-list::-webkit-scrollbar {
  392. -webkit-appearance: none !important;
  393. width: 7px !important;
  394. }
  395. #ed11y-outline-list::-webkit-scrollbar-thumb {
  396. border-radius: 5px !important;
  397. background-color: rgba(0, 0, 0, .5) !important;
  398. -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5) !important;
  399. }
  400. .ed11y-tip button {
  401. top: 0 !important;
  402. position: absolute !important;
  403. width: 34px !important;
  404. height: 46px !important;
  405. right: 2px !important;
  406. color: #fafafa !important;
  407. background: #3679b0 !important;
  408. box-shadow: -1px 1px rgba(255,255,255,.6) !important;
  409. }
  410. button#ed11y-panel-button {
  411. float: left !important;
  412. border-radius: 0 !important;
  413. background: #f6f6f6 !important;
  414. width: 48% !important;
  415. color: #4d4d4d !important;
  416. font-size: 14px !important;
  417. border-top: 1px solid #d7d7d7 !important;
  418. outline: 0 !important;
  419. cursor: pointer !important;
  420. height: 30px !important;
  421. }
  422. #ed11y-panel.ed11y-panel-minimized {
  423. width: auto !important;
  424. min-height: 0 !important;
  425. right: 22px !important;
  426. }
  427. .ed11y-reveal-alts {
  428. position: absolute !important;
  429. font-size: 14px !important;
  430. display: inline-flex !important;
  431. flex-direction: column !important;
  432. justify-content: flex-end !important;
  433. }
  434. .ed11y-reveal-alts span {
  435. background: #00bffff3 !important;
  436. color: #111 !important;
  437. z-index: 100 !important;
  438. text-indent: 28px !important;
  439. font-weight: 500 !important;
  440. padding: 6px !important;
  441. width: 100% !important;
  442. }
  443. .ed11y-reveal-alts svg {
  444. width: 22px !important;
  445. margin: 0 0 0 -27px !important;
  446. position: absolute !important;
  447. }
  448. .ed11y-reveal-alts path {
  449. fill: #111 !important;
  450. }
  451. button#ed11y-panel-button:focus,
  452. button#ed11y-panel-button:hover {
  453. background: #e1e1e1 !important;
  454. }
  455. span.ed11y-headings-label {
  456. font-size: .9em !important;
  457. padding: 4px 3px !important;
  458. border-radius: 3px !important;
  459. background-color: #777678 !important;
  460. background-image: linear-gradient(to bottom right, #b629ce, #16aec2) !important;
  461. color: white !important;
  462. display: inline-block !important;
  463. }
  464. @media (prefers-reduced-motion: reduce) {
  465. #ed11y-panel > * {
  466. animation: none !important;
  467. }
  468. }
  469. /* ===== Alert and warning highlights ============================================= */
  470. .ed11y-tip p {
  471. color: #41576d !important;
  472. }
  473. .ed11y-reset .ed11y-tip-heading {
  474. font-size: 15px !important;
  475. font-weight: 500 !important;
  476. padding: 12px 34px 11px 16px !important;
  477. margin: -16px -16px 11px -16px !important;
  478. color: #fff !important;
  479. background: #3679b0 !important;
  480. min-height: 46px !important;
  481. }
  482. .ed11y-reset .ed11y-tip-heading * {
  483. color: inherit !important;
  484. }
  485. .ed11y-tip-heading ~ .ed11y-tip-heading {
  486. margin: 8px 0 12px -16px !important;
  487. padding: 3px 16px !important;
  488. display: inline-block !important;
  489. }
  490. .ed11y-tip-heading ~ .ed11y-tip-heading::before {
  491. content: "Issue #2: " !important;
  492. padding-right: 2px !important;
  493. }
  494. .ed11y-tip-heading ~ .ed11y-tip-heading ~ .ed11y-tip-heading::before {
  495. content: "Issue #3: " !important;
  496. }
  497. .ed11y-tip-heading ~ .ed11y-tip-heading ~ .ed11y-tip-heading ~ .ed11y-tip-heading::before {
  498. content: "Issue #4: " !important;
  499. }
  500. .ed11y-revealed-element {
  501. background: #ffe877 !important;
  502. padding: 12px 16px 44px !important;
  503. text-align: center !important;
  504. font-weight: 600 !important;
  505. border-radius: 16px 16px 0 0 !important;
  506. }
  507. .ed11y-reset .ed11y-pop {
  508. display: none !important;
  509. }
  510. /* Templated SVG icons from FontAwesome 5 for better cross-browser support and minimize conflicting libraries. */
  511. button .ed11y-toggle-icon,
  512. div.ed11y-panel-icon {
  513. background: 50% 50% #d00017 url("data:image/svg+xml,%3Csvg role='img' focusable='false' width='28px' height='28px' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ffffff' d='M256 48c114.953 0 208 93.029 208 208 0 114.953-93.029 208-208 208-114.953 0-208-93.029-208-208 0-114.953 93.029-208 208-208m0-40C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 56C149.961 64 64 149.961 64 256s85.961 192 192 192 192-85.961 192-192S362.039 64 256 64zm0 44c19.882 0 36 16.118 36 36s-16.118 36-36 36-36-16.118-36-36 16.118-36 36-36zm117.741 98.023c-28.712 6.779-55.511 12.748-82.14 15.807.851 101.023 12.306 123.052 25.037 155.621 3.617 9.26-.957 19.698-10.217 23.315-9.261 3.617-19.699-.957-23.316-10.217-8.705-22.308-17.086-40.636-22.261-78.549h-9.686c-5.167 37.851-13.534 56.208-22.262 78.549-3.615 9.255-14.05 13.836-23.315 10.217-9.26-3.617-13.834-14.056-10.217-23.315 12.713-32.541 24.185-54.541 25.037-155.621-26.629-3.058-53.428-9.027-82.141-15.807-8.6-2.031-13.926-10.648-11.895-19.249s10.647-13.926 19.249-11.895c96.686 22.829 124.283 22.783 220.775 0 8.599-2.03 17.218 3.294 19.249 11.895 2.029 8.601-3.297 17.219-11.897 19.249z'%3E%3C/path%3E%3C/svg%3E") no-repeat !important;
  514. background-size: 28px !important;
  515. line-height: 100px !important;
  516. }
  517. div.ed11y-panel-icon {
  518. height: 34px !important;
  519. width: 34px !important;
  520. margin: 0 12px 0 0 !important;
  521. border-radius: 100% !important;
  522. background-color: #3679b0 !important;
  523. }
  524. .ed11y-pass .ed11y-panel-icon {
  525. background: 50% 50% #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' role='img' focusable='false' aria-hidden='true' viewBox='0 0 512 512'%3E%3Cpath fill='%23359E56' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'%3E%3C/path%3E%3C/svg%3E") no-repeat !important;
  526. }
  527. .ed11y-errors .ed11y-panel-icon {
  528. background-color: #b80000 !important;
  529. }
  530. .ed11y-warnings .ed11y-panel-icon {
  531. background-color: #ae7c00 !important;
  532. }
  533. .ed11y-errors .ed11y-jumplink,
  534. .ed11y-errors .ed11y-jumplink span {
  535. color: #b80000 !important;
  536. }
  537. .ed11y-warnings .ed11y-jumplink,
  538. .ed11y-warnings .ed11y-jumplink span {
  539. color: #826000 !important;
  540. }
  541. .ed11y-pops-ready .ed11y-pop,
  542. .ed11y-errors .ed11y-toggle-icon,
  543. .ed11y-warning .ed11y-toggle-icon {
  544. background: 50% 50% #d00017 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' role='img' focusable='false' aria-hidden='true' viewBox='0 0 576 576' width='22px' height='22px'%3E%3Cpath fill='%23ffffff' d='M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'%3E%3C/path%3E%3C/svg%3E") no-repeat !important;
  545. background-size: 22px !important;
  546. }
  547. .ed11y-pops-ready .ed11y-warning-btn {
  548. background: 50% 50% #ffc800 url("data:image/svg+xml,%3Csvg height='22px' width='22px' fill='%23505050' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' viewBox='0 0 100 100' enable-background='new 0 0 100 100' xml:space='preserve'%3E%3Cpath d='M50,5C25.147,5,5,25.147,5,50c0,24.854,20.147,45,45,45c24.854,0,45-20.146,45-45C95,25.147,74.854,5,50,5z M49.999,76.75 c-3.342,0-6.061-2.717-6.061-6.057c0-3.346,2.719-6.066,6.061-6.066c3.343,0,6.063,2.723,6.063,6.066 C56.063,74.033,53.342,76.75,49.999,76.75z M66.238,43.808c-1.174,1.827-2.795,4.01-6.028,6.531 c-3.213,2.461-4.185,3.724-4.478,4.259c-0.166,0.299-0.402,0.895-0.59,2.004c-0.065,0.39-0.119,0.812-0.162,1.265l-0.254,2.714 l-9.771,0.023l0.124-3.127c0.017-0.4,0.06-1.185,0.168-1.918c0.324-2.229,1.085-4.209,2.261-5.882 c1.104-1.573,3.247-3.563,6.549-6.079c2.442-1.863,3.396-2.928,3.764-3.492c0.47-0.717,0.697-1.472,0.697-2.305 c0-1.931-0.705-3.46-2.094-4.545c-1.474-1.151-3.518-1.735-6.073-1.735c-2.265,0-4.176,0.599-5.682,1.778 c-1.594,1.239-2.713,2.953-3.245,4.964l-0.66,2.492l-9.563-1.037l0.676-3.238c0.88-4.218,2.865-7.474,5.902-9.677 c3.934-2.855,8.156-4.303,12.552-4.303c4.856,0,8.831,1.249,12.508,3.931c3.399,2.482,5.349,6.492,5.349,11.002 C68.188,39.642,67.55,41.727,66.238,43.808z'%3E%3C/path%3E%3C/svg%3E") no-repeat !important;
  549. }
  550. .ed11y-warnings .ed11y-toggle-icon {
  551. background: 50% 50% #ffc800 url("data:image/svg+xml,%3Csvg width='124' height='124' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Ctitle%3ELayer 1%3C/title%3E %3Cpath d='m61,18c-24.853,0 -45,20.147 -45,45c0,24.854 20.147,45 45,45c24.854,0 45,-20.146 45,-45c0,-24.853 -20.146,-45 -45,-45zm-0.001,71.75c-3.342,0 -6.061,-2.717 -6.061,-6.057c0,-3.346 2.719,-6.066 6.061,-6.066c3.343,0 6.063,2.723 6.063,6.066c0.001,3.34 -2.72,6.057 -6.063,6.057zm16.239,-32.942c-1.174,1.827 -2.795,4.01 -6.028,6.531c-3.213,2.461 -4.185,3.724 -4.478,4.259c-0.166,0.299 -0.402,0.895 -0.59,2.004c-0.065,0.39 -0.119,0.812 -0.162,1.265l-0.254,2.714l-9.771,0.023l0.124,-3.127c0.017,-0.4 0.06,-1.185 0.168,-1.918c0.324,-2.229 1.085,-4.209 2.261,-5.882c1.104,-1.573 3.247,-3.563 6.549,-6.079c2.442,-1.863 3.396,-2.928 3.764,-3.492c0.47,-0.717 0.697,-1.472 0.697,-2.305c0,-1.931 -0.705,-3.46 -2.094,-4.545c-1.474,-1.151 -3.518,-1.735 -6.073,-1.735c-2.265,0 -4.176,0.599 -5.682,1.778c-1.594,1.239 -2.713,2.953 -3.245,4.964l-0.66,2.492l-9.563,-1.037l0.676,-3.238c0.88,-4.218 2.865,-7.474 5.902,-9.677c3.934,-2.855 8.156,-4.303 12.552,-4.303c4.856,0 8.831,1.249 12.508,3.931c3.399,2.482 5.349,6.492 5.349,11.002c0,2.209 -0.638,4.294 -1.95,6.375z' id='svg_1'/%3E %3Cellipse fill='none' stroke='%23000000' stroke-width='10' cx='61' cy='62.81668' id='svg_4' rx='56' ry='56'/%3E %3C/g%3E %3C/svg%3E") no-repeat !important;
  552. background-size: 28px !important;
  553. }
  554. #ed11y-panel.ed11y-warnings .ed11y-toggle-icon {
  555. margin: 0 5px 0 -1px !important;
  556. padding: 14px !important;
  557. filter: invert(1) brightness(1.725) !important;
  558. }
  559. .ed11y-pops-ready .ed11y-pop {
  560. font-size: 0 !important;
  561. display: block !important;
  562. border-radius: 50% !important;
  563. position: absolute !important;
  564. margin: 10px 0 0 10px !important;
  565. z-index: 499 !important;
  566. padding: 17px !important;
  567. vertical-align: middle !important;
  568. cursor: pointer !important;
  569. box-shadow: 1px 1px 5px 0 rgba(0,0,0,.5) !important;
  570. min-width: 0 !important;
  571. outline: 0 !important;
  572. width: 0 !important;
  573. height: 0 !important;
  574. }
  575. .ed11y-reset .ed11y-pop[data-ed11y-inserted="after"] {
  576. margin-left: -8px !important;
  577. }
  578. .ed11y-reset .ed11y-pop-ready {
  579. display: block !important;
  580. transition: box-shadow .15s ease-out !important;
  581. }
  582. .ed11y-instance-inline + .ed11y-instance-inline > button {
  583. margin-top: 16px !important;
  584. box-shadow: none !important;
  585. }
  586. body .ed11y-link-text-warning {
  587. box-shadow: 0 0 0 4px #ffc800 !important;
  588. border-radius: 2px !important;
  589. border-color: transparent !important;
  590. }
  591. button.ed11y-pop:hover {
  592. box-shadow: 0 0 0 3px #5294ca !important;
  593. }
  594. body .ed11y-headings-fail {
  595. color: #c22326 !important;
  596. }
  597. body .ed11y-error-border {
  598. outline: 5px solid #c22326 !important;
  599. }
  600. body .ed11y-link-text-fail {
  601. background-color: #c22326 !important;
  602. border-radius: 0.25em !important;
  603. padding: 5px !important;
  604. color: white !important;
  605. }
  606. body .ed11y-text-warning,
  607. body .ed11y-uppercase-warning {
  608. background-color: rgba(255,200,0, .2);
  609. box-shadow: 4px 0 rgba(255,200,0, .2), -4px 0 rgba(255,200,0, .2);
  610. }
  611. body .ed11y-text-warning {
  612. background-color: rgba(255,200,0, .2) !important;
  613. box-shadow: 4px 0 rgba(255,200,0, .2), -4px 0 rgba(255,200,0, .2) !important;
  614. }
  615. body .ed11y-warning-border {
  616. outline: 5px solid #ffc800 !important;
  617. }
  618. #ed11y-panel svg {
  619. overflow: hidden !important;
  620. vertical-align: top !important;
  621. }
  622. .ed11y-tip-ready[aria-expanded="true"]:focus {
  623. outline: none !important;
  624. }
  625. [data-ed11y-tip-root] {
  626. z-index: 500 !important;
  627. }
  628. .ed11y-tip-box[data-theme~='ed11y-theme'] {
  629. background-color: white !important;
  630. color: #333 !important;
  631. padding: 8px !important;
  632. font-size: 14px !important;
  633. box-shadow: 0 0 16px #0009 !important;
  634. font-weight: normal !important;
  635. }
  636. .ed11y-reset .ed11y-tip {
  637. width: 400px !important;
  638. max-width: 98vw !important;
  639. position: absolute !important;
  640. background: #fafafa !important;
  641. border-radius: 3px 0 3px 0 !important;
  642. padding: 16px 16px 0 16px !important;
  643. box-shadow: inset 0 0 0 2px #3679b0, -1px 0 #fff3, 1px 1px 5px rgba(0,0,0,.2) !important;
  644. color: #112f4e !important;
  645. z-index: 1001 !important;
  646. display: none !important;
  647. }
  648. .ed11y-reset .ed11y-tip-under {
  649. width: calc(100vw - 30px) !important;
  650. }
  651. .ed11y-tip .ed11y-arrow {
  652. content: "" !important;
  653. position: absolute !important;
  654. width: 20px !important;
  655. height: 20px !important;
  656. margin-left: -26px !important;
  657. transform: rotate(45deg) !important;
  658. border: 1px solid rgba(255,255,255,.6) !important;
  659. border-right: 0 !important;
  660. border-top: 0 !important;
  661. background: #3679b0 !important;
  662. }
  663. .ed11y-reset .ed11y-about[aria-expanded="true"] {
  664. background: #3679b0 !important;
  665. color: #fff !important;
  666. }
  667. .ed11y-about-text + #ed11y-fullcheck-headers {
  668. display: none !important;
  669. }
  670. .ed11y-reset .ed11y-about-text {
  671. background: #fafafa !important;
  672. padding: 16px 18px 1px 16px !important;
  673. box-shadow: inset 0 0 3px rgba(0,0,0,.2) !important;
  674. }
  675. .ed11y-about-text p + p {
  676. padding-right: 26px !important;
  677. }
  678. .ed11y-tip-left .ed11y-arrow {
  679. right: -10px !important;
  680. transform: rotate(-135deg) !important;
  681. }
  682. .ed11y-tip-under .ed11y-arrow {
  683. transform: rotate(135deg) !important;
  684. }
  685. .ed11y-hover + .ed11y-tip,
  686. .ed11y-reset .ed11y-tip-open {
  687. display: block !important;
  688. opacity: 1 !important;
  689. }
  690. .ed11y-force-overflow {
  691. overflow: visible !important;
  692. }
  693. .ed11y-hidden-highlight {
  694. box-shadow: inset 0 0 0 1px #c27000, 0 0 0 2px #c26000, 0 0 0 7px #ffc800, 0 0 0 10px #c27000 !important;
  695. }
  696. .ed11y-instance {
  697. text-align: left !important;
  698. }
  699. .ed11y-instance-inline {
  700. text-align: left !important;
  701. display: inline !important;
  702. vertical-align: top !important;
  703. position: absolute !important;
  704. }
  705. .ed11y-reset .ed11y-tip-closer {
  706. margin: -13px -16px 0 0 !important;
  707. position: relative !important;
  708. float: right !important;
  709. padding: 2px 8px 5px 9px !important;
  710. font-size: 14px !important;
  711. }
  712. #ed11y-panel .ed11y-tip-box {
  713. width: 95% !important;
  714. }
  715. .ed11y-hidden,
  716. .ed11y-reset .ed11y-hidden {
  717. display: none !important;
  718. }
  719. .ed11y-button:focus,
  720. button.ed11y-pop:focus,
  721. #ed11y-panel a:focus,
  722. #ed11y-panel button:focus,
  723. #ed11y-main-toggle:hover {
  724. box-shadow: 0 0 3px 1px #fff, 0 0 0 3px #064980 !important;
  725. }
  726. .ed11y-panel-minimized#ed11y-panel .ed11y-minimize:focus {
  727. box-shadow: none !important;
  728. }