lib/rorvswild/local/stylesheet/local.css from BaseSecrete/rorvswild

lib/rorvswild/local/stylesheet/local.css
Summary

Maintainability

Test Coverage

Issues
/* TOGGLER */
.rorvswild-local-toggler {
  background: rgb(17 20 27) !important;
  color: rgb(182 202 255) !important;
  font-weight: 700 !important;
  box-shadow: 0 0 0 1px rgba(69,74,84,1) inset, 0 1px 4px 0px rgba(14,18,26,0.96) !important;
  border-radius: 2px !important;
  font-family: SF Mono, Menlo, Consolas, DejaVu Sans Mono, monospace !important;
  font-size: 15px !important;
  line-height: 24px !important;
  position: fixed !important;
  bottom: 12px !important;
  left: 12px !important;
  padding: 0 12px !important;
  cursor: pointer !important;
  z-index: 99999999999999999 !important;
}

.rorvswild-local-toggler small {
  color: rgb(146 149 159) !important;
  font-weight: 400 !important;
  font-size: 10px !important;
  margin-left: 4px !important;
  display: inline-block !important;
}

/* TOGGLER POSITION OPTION (default bottom-left) */
.is-top-right .rorvswild-local-toggler {
  bottom: auto !important;
  left: auto !important;
  right: 12px !important;
  top: 12px !important;
}

.is-top-left .rorvswild-local-toggler {
  bottom: auto !important;
  top: 12px !important;
}

.is-bottom-right .rorvswild-local-toggler {
  bottom: 12px !important;
  left: auto !important;
  right: 12px !important;
}

.is-hidden .rorvswild-local-toggler { display: none; }

/* PANEL */
.rorvswild-local-panel {
  background: rgb(17 20 27) !important;
  color: rgb(199 203 214) !important;
  font-family: SF Mono, Menlo, Consolas, DejaVu Sans Mono, monospace !important;
  font-size: 15px !important;
  line-height: 24px !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 100000000000000000 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden;
  height: 100dvh;
}

.rorvswild-local-panel.is-hidden,
.rorvswild-local-panel:not(.is-hidden) + .rorvswild-local-toggler {
  display: none !important;
}

.rorvswild-local-panel * {
  font-family: inherit !important;
  font-size: inherit !important;
  box-sizing: border-box !important;
  color: inherit !important;
}

.rorvswild-local-panel ::-moz-selection {
  background: rgb(71 75 83) !important;
  color: rgb(224 228 239) !important;
}

.rorvswild-local-panel ::selection {
  background: rgb(71 75 83) !important;
  color: rgb(224 228 239) !important;
}

.rorvswild-local-panel small {
  color: rgb(146 149 159) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  margin-left: 2px !important;
}

/* Panel Header */
.rorvswild-local-panel__header {
  background: rgb(26 29 36) !important;
  box-shadow: 0 1px 2px 0 rgba(14,18,26, .8) !important;
}

.rorvswild-local-panel__header .rorvswild-local-panel__width-limiter {
  display: flex;
  padding: 12px !important;
}


.rorvswild-local-panel__header__title {
  color: rgb(199 203 214) !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  letter-spacing: 2px !important;
  text-align: center !important;
  flex: 1;
}

.rorvswild-local-panel svg {
  height: 24px !important;
  width: 24px !important;
  stroke-width: 2.5 !important;
  fill: none !important;
  stroke-linecap: square !important;
  stroke: rgb(146 149 159) !important;
  stroke-miterlimit: 10 !important;
  vertical-align: middle !important;
}

.rorvswild-local-panel svg:hover { stroke: rgb(199 203 214) !important; }

.rorvswild-local-panel__logo { width: 60px !important; }

.rorvswild-local-panel__header__icons {
  width: 60px !important;
  display: flex !important;
  justify-content: flex-end !important;
}

.rorvswild-local-panel__close {
  cursor: pointer !important;
  margin-left: 12px !important;
}

.rorvswild-local-panel__github svg {
  stroke: none !important;
  fill: rgb(146 149 159) !important;
}

.rorvswild-local-panel__github svg:hover {
  stroke: none !important;
  fill: rgb(199 203 214) !important;
}

/* Panel Content */
.rorvswild-local-panel__content {
  flex: 1 !important;
  height: calc(100% - 48px) !important;
  overflow-y: scroll;
  overscroll-behavior: contain;
}

.rorvswild-local-panel__content::-webkit-scrollbar { width: 4px !important; }

.rorvswild-local-panel__content::-webkit-scrollbar-corner { background: transparent !important; }

.rorvswild-local-panel__content::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.3) !important;
  background: transparent !important;
}

.rorvswild-local-panel__content::-webkit-scrollbar-thumb {
  background-color: rgb(146 149 159) !important;
  outline: 1px solid rgb(146 149 159) !important;
}

/* Panel request summary */
.rorvswild-local-panel__request {
  display: flex !important;
  padding: 12px 12px 11px !important;
  border-bottom: 1px solid rgb(26 29 36) !important;
  cursor: pointer !important;
  flex-wrap: wrap !important;
}

.rorvswild-local-panel__request:hover { background: rgb(26 29 36) !important; }

.rorvswild-local-panel__request__name {
  word-break: break-all !important;
  overflow-wrap: break-word !important;
  width: 100% !important;
  color: rgb(199 203 214) !important;
  font-weight: 700;
}

.rorvswild-local-panel__request__name > span {
  text-decoration-color: rgb(146 149 159);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 1px;
}

.rorvswild-local-panel__request__path {
  color: rgb(146 149 159) !important;
  font-weight: 400;
  display: block !important;
  text-decoration: none !important;
  text-decoration-thickness: 0 !important;
  text-decoration-color: transparent !important;
}

.rorvswild-local-panel__request__started-at {
  color: rgb(146 149 159) !important;
  margin-left: 12px !important;
}

.rorvswild-local-panel__request__runtime { 
  color: rgb(182 202 255) !important; 
  font-weight: 700 !important;
}

/* Panel request details */
.rorvswild-local-panel__back-button {
  margin: 24px 12px 18px !important;
  cursor: pointer !important;
  display: block !important;
}

.rorvswild-local-panel__request-details__request {
  display: flex !important;
  margin-bottom: 48px !important;
  padding: 12px 12px 0 !important;
  flex-wrap: wrap !important;
}

h2.rorvswild-local-panel__request__name__title {
  margin:-18px 0 0 !important;
  padding:0 !important;
  font-size: 31px !important;
  line-height: 48px !important;
  font-weight: 700 !important;
  font-family: SF Mono, Menlo, Consolas, DejaVu Sans Mono, monospace !important;
  text-align: left !important;
}

/* details sections */
.rorvswild-local-panel__request-details__section {
  padding: 12px 12px 11px !important;
  border-bottom: 1px solid rgb(26 29 36) !important;
  display: block !important;
}

.rorvswild-local-panel__request-details__section:hover {
  background: rgb(26 29 36) !important;
  transition: all .3s !important;
}

.rorvswild-local-panel__request-details__section__main {
  display: flex !important;
  gap: 8px;
  width: 100% !important;
  flex-wrap: wrap !important;
}

.rorvswild-local-panel__request-details__section__file {
  width: 100% !important;
  word-break: break-all !important;
  overflow-wrap: break-word !important;
  min-width: 0 !important;
  color: rgb(199 203 214) !important;
  display: flex;
  gap: 8px;
}

a.rorvswild-local-panel__request-details__section__file__name {
  text-decoration-color: rgb(146 149 159);
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 1px;
}

a.rorvswild-local-panel__request-details__section__file__name:hover { text-decoration-color: rgb(199 203 214); }

a.rorvswild-local-panel__request-details__section__file__name::after {
  content: '↗';
  text-decoration: none;
  display: inline-block;
  margin-left: 4px;
  opacity: 0.5;
}

a.rorvswild-local-panel__request-details__section__file__name:hover::after { opacity: 1; }

.rorvswild-local-panel__request-details__section__file__name span {
  background: rgb(38 41 49);
  text-decoration: none;
  display: inline-block;
}

.rorvswild-local-panel__request-details__section__average {
  color: rgb(182 202 255) !important;
  font-weight: 700 !important;
  width: 48px !important;
  text-align: right;
  margin-left: auto;
}

.rorvswild-local-panel__request-details__section__calls {
  color: rgb(199 203 214) !important;
  width: 48px !important;
  text-align: right;
}

.rorvswild-local-panel__request-details__section__impact {
  color: rgb(199 203 214) !important;
  width: 48px !important;
  font-weight: 700 !important;
  text-align: right;
}

.rorvswild-local-panel__request-details__section__code {
  color: rgb(146 149 159) !important;
  background: rgb(14 15 20);
  padding: 12px;
  margin: 12px -12px -12px;
  overflow: hidden !important;
  display: none;
}

.rorvswild-local-panel__request-details__section__kind {
  background: rgb(38 41 49);
  font-size: 10px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  letter-spacing: 1px !important;
  width: 64px !important;
  height: 24px !important;
  min-height: 24px;
  padding: 0;
  display: inline-block !important;
  flex-shrink: 0;
}

button.rorvswild-local-panel__request-details__section__kind {
  box-shadow: 0 0 0 1px rgb(72 75 80) inset;
  border: none;
  font-weight: 700;
  position: relative;
}

button.rorvswild-local-panel__request-details__section__kind span {
  display: inline-block;
  max-width: calc(5ch + 5px);
  white-space: nowrap;
  overflow: hidden;
}

button.rorvswild-local-panel__request-details__section__kind:hover { box-shadow: 0 0 0 1px rgb(147 149 156) inset; }

button.rorvswild-local-panel__request-details__section__kind::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 4px;
  height: 4px;
  border-bottom: 1px solid rgb(146 149 159);
  border-right: 1px solid rgb(146 149 159);
  transform: rotate(45deg);
  right: 6px;
  top:calc(50% - 3px);
}

button.rorvswild-local-panel__request-details__section__kind:hover::after { border-color: inherit; }

span.rorvswild-local-panel__request-details__section__kind { 
  background: rgb(14 15 20) !important;
  color: rgb(146 149 159)!important;
}

.rorvswild-local-panel__request-details__section.is-open .rorvswild-local-panel__request-details__section__code {
  display: flex;
  border-bottom: 1px solid rgb(26 29 36) !important
}

.rorvswild-local-panel__request-details__section.is-open .rorvswild-local-panel__request-details__section__kind {
  color: rgb(182 202 255) !important;
  background-color: rgb(14 15 20) !important;
}

.rorvswild-local-panel__request-details__section.is-open .rorvswild-local-panel__request-details__section__kind::after {
  transform: rotate(225deg);
  transform-origin: 2.5px 3px;
}

/* Panel Footer */
.rorvswild-local-panel__footer {
  width: 100% !important;
  background: rgb(38 41 49) !important;
  color: rgb(182 202 255) !important;
  padding: 12px !important;
  text-align: center !important;
}

a.rorvswild-local-panel__footer__link {
  color: rgb(199 203 214) !important;
  text-decoration: underline !important;
  line-height: inherit !important;
}

@media screen and (min-width: 720px) {
  .rorvswild-local-panel__request-details__section__main { flex-wrap: nowrap !important; }

  .rorvswild-local-panel__request__name,
  .rorvswild-local-panel__request-details__section__file { flex: 1 !important; }

  .rorvswild-local-panel__request__runtime { margin-left: 12px !important; }

  .rorvswild-local-panel__width-limiter {
    max-width: 1520px;
    margin: 0 auto;
  }
}