User:DatGuy/spihelper.dev.css

/* {{Wikipedia:USync|repo=https://github.com/DatGuy1/spihelper|ref=refs/heads/build/develop|path=spihelper.css}} */
/* v3.3.2 */
/* src/spihelper.css */
.spiHelper-section-open {
  background-color: var(--background-color-progressive-subtle, #eaf3ff);
  border-radius: 2px;
  padding: 0 3px;
}

.spiHelper-section-open:-webkit-any(span) {
  text-transform: lowercase;
  margin-inline-start: .5em;
}

.spiHelper-section-open:-moz-any(span) {
  text-transform: lowercase;
  margin-inline-start: .5em;
}

.spiHelper-section-open:is(span) {
  text-transform: lowercase;
  margin-inline-start: .5em;
}

.spihelper-hovertext {
  text-decoration: underline dotted;
  text-underline-offset: 1px;
  cursor: var(--cursor-help, help);
}

.spiHelper-setting {
  padding: 12px;
}

.cdx-toggle-switch.enableSwitch {
  align-self: baseline;
}

.spiHelper-mainCard {
  background-color: var(--background-color-base, #fff);
  border: 1px solid var(--border-color-base, #a2a9b1);
  border-radius: 2px;
  padding: 12px;
}

#spiHelper-topView-Action {
  display: flex;
  flex-direction: column;
  align-items:  flex-start;
}

#spiHelper-vue-mount-point.unpinned {
  position: sticky;
  z-index: 5;
  top: 60px;
}

#spiHelper-vue-mount-point.unpinned .spiHelper-mainCard {
  position: absolute;
  overflow-y: auto;
  width: 97.35%;
  max-height: 40vh;
}

.spiHelper-mainCard-Header {
  position: relative;
}

.spiHelper-mainCard-Header .header-buttons {
  position: absolute;
  top: 0;
}

.spiHelper-mainCard-Header .header-buttons:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  right: 0;
}

.spiHelper-mainCard-Header .header-buttons:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  right: 0;
}

.spiHelper-mainCard-Header .header-buttons:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  right: 0;
}

.spiHelper-mainCard-Header .header-buttons:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: 0;
}

.spiHelper-mainCard-Header .header-buttons:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: 0;
}

.spiHelper-mainCard-Header .header-buttons:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: 0;
}

#spiHelper-topView-Accordion .cdx-accordion {
  overflow: visible;
}

#spiHelper-topView-Accordion .cdx-accordion.action-enabled > summary {
  background-color: var(--background-color-progressive-subtle, #e8eeff);
}

#spiHelper-topView-Accordion .cdx-toggle-switch.enableSwitch:not(:only-child) {
  margin-bottom: .75em;
}

#buttonRow {
  display: flex;
  overflow-x: auto;
  flex-wrap: nowrap;
  max-width: calc(100% - 102px);
  padding-bottom: 2px;
}

#buttonRow > button {
  flex-shrink: 0;
}

#messageRow {
  width: 100%;
}

#messageRow:has( > *) {
  padding-top: 20px;
}

#contentRow {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin-top: 1em;
}

#contentRow > div {
  display: flex;
  flex-direction: column;
  gap: .75em;
}

#contentRow > div.is-visible ~ div.is-visible {
  border-top: 1px solid var(--color-base--subtle);
  padding-top: 16px;
}

#contentRow > div:not(.is-visible) {
  display: none;
}

.spiHelper-section-selector {
  display: flex;
  flex-wrap: nowrap;
  align-items:  center;
  gap: 8px;
}

.spiHelper-section-selector .spiHelper-section-input {
  display: flex;
  flex: none;
  width: 256px;
  transition: width .2s ease-in-out;
}

.spiHelper-section-selector .spiHelper-section-input.spiHelper-section-input--multi {
  width: 440px;
}

.spiHelper-section-selector .spiHelper-section-input > .cdx-select-vue {
  width: 100%;
}

.spiHelper-section-selector .spiHelper-section-input > .spiHelper-multi-select-lookup {
  width: 100%;
}

.spiHelper-section-selector .spiHelper-section-input > .spiHelper-multi-select-lookup .cdx-chip-input__chips {
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  height: 32px;
}

.spiHelper-multi-section-entry {
  border-bottom: 1px solid var(--border-color-subtle, #c8ccd1);
  margin-bottom: 12px;
  padding-bottom: 12px;
}

.spiHelper-multi-section-entry:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.spiHelper-multi-section-entry h4 {
  margin: 0 0 4px;
}

#mw-content-text .mw-parser-output:has( > .spiHelper-section-overlay) {
  position: relative;
}

.spiHelper-section-overlay {
  position: absolute;
  pointer-events: none;
  z-index: -1;
  border-radius: 4px;
  left: -12px;
  right: -12px;
}

.spiHelper-section-overlay.spiHelper-section-overlay--selected {
  border: 3px solid var(--border-color-progressive, #36c);
  background-color: var(--background-color-progressive-subtle, #e8f1ff);
}

.spiHelper-section-overlay.spiHelper-section-overlay--preview {
  border: 1px dashed var(--border-color-progressive, #36c);
  background-color: var(--background-color-progressive-subtle, #f3f7ff);
}

.spiHelper-blockoptions-group {
  margin-bottom: 12px;
}

#spiHelper-opts-dialog .cdx-dialog__header {
  display: flex;
  box-sizing: border-box;
  justify-content: flex-end;
  align-items: baseline;
  width: 100%;
}

#spiHelper-opts-dialog .spiHelper-template-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#spiHelper-opts-dialog .spiHelper-template-container .cdx-field {
  margin: 0;
}

#spiHelper-opts-dialog .spiHelper-template-container .cdx-field__help-text {
  margin: 0;
}

#spiHelper-opts-dialog .spiHelper-template-container .cdx-field__validation-message {
  margin: 0;
}

#spiHelper-opts-dialog .spiHelper-template-container .cdx-text-input {
  min-width: 0;
}

#spiHelper-opts-dialog .spiHelper-template-container .spiHelper-template:last-child {
  margin-bottom: 16px;
}

#spiHelper-opts-dialog .spiHelper-template-container .spiHelper-template-group-item {
  padding-inline-start: 12px;
}

#spiHelper-opts-dialog .spiHelper-template-container .spiHelper-template-input {
  display: flex;
  margin-top: 4px;
}

#spiHelper-opts-dialog .spiHelper-template-container .spiHelper-template-input > .cdx-field {
  flex-grow: 1;
  width: 0;
}

#spiHelper-opts-dialog .spiHelper-template-container .spiHelper-template-input > .cdx-text-input {
  flex-grow: 1;
  width: 0;
}

.spiHelper-submitForm {
  margin-top: 12px;
}

.spiHelper-submitForm .cdx-text-input {
  max-width: 80px;
}

.spiHelper-submitForm > * + * {
  margin-top: 12px;
}

.spiHelper-submitForm .cdx-message + .cdx-button {
  margin-top: 12px;
}

.spiHelper-sockTable {
  --spihelper-tag-column-width: 190px;
}

.spiHelper-sockTable .setAllRow > th {
  vertical-align: middle;
  border-bottom-color: var(--color-emphasized, #101418) !important;
}

.spiHelper-sockTable thead tr:first-child th {
  vertical-align: bottom;
}

.spiHelper-sockTable tbody td {
  vertical-align: middle;
}

.spiHelper-sockTable .header-content {
  display: flex;
  flex-wrap: wrap;
  align-items:  center;
  gap: 8px;
}

.spiHelper-sockTable .header-content .header-content-buttons {
  display: flex;
  gap: 8px;
}

.spiHelper-sockTable .header-content .header-content-buttons .cdx-message {
  align-items:  center;
}

.spiHelper-sockTable .header-content .header-content-buttons .cdx-message .cdx-message__content {
  margin-inline-start: 4px;
}

.spiHelper-sockTable th.tagHeader {
  width: var(--spihelper-tag-column-width);
}

.spiHelper-sockTable th.checkboxHeader {
  padding: 12px 8px;
}

.spiHelper-sockTable .cdx-select-vue {
  width: 100%;
}

.spiHelper-sockTable .cdx-select-vue__handle {
  word-break: keep-all;
  min-width: 110px;
}

.spiHelper-sockTable thead tr.blockSettingsRow th {
  white-space: nowrap;
  padding: 6px 4px;
  font-size: .75rem;
}

.spiHelper-sockTable .cdx-checkbox {
  width: min-content;
  margin: 0 auto;
}

.spiHelper-sockTable .cdx-checkbox:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  left: 1px;
}

.spiHelper-sockTable .cdx-checkbox:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  left: 1px;
}

.spiHelper-sockTable .cdx-checkbox:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  left: 1px;
}

.spiHelper-sockTable .cdx-checkbox:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: 1px;
}

.spiHelper-sockTable .cdx-checkbox:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: 1px;
}

.spiHelper-sockTable .cdx-checkbox:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: 1px;
}

.spiHelper-sockTable td:has(.cdx-checkbox) {
  width: 55px;
  padding: 4px;
}

.spiHelper-sockTable .setAllRow th:has(.cdx-checkbox) {
  width: 55px;
  padding: 4px;
}

.spiHelper-sockTable .cdx-text-input {
  min-width: 50px;
}

.spiHelper-sockTable .cdx-field__help-text {
  display: none;
}

.spiHelper-sockTable .user-lookup {
  min-width: 160px;
}

.spiHelper-sockTable th.selectTagOptions button {
  width: var(--spihelper-tag-column-width);
  justify-content: flex-start;
  padding: 0 5px;
}

.spiHelper-sockTable .spihelper-expiry-input {
  min-width: 90px;
}

.spiHelper-sockTable button.userTag {
  width: var(--spihelper-tag-column-width);
  justify-content: flex-start;
  padding: 0 5px;
  font-weight: normal;
}

.spiHelper-sockTable button.userTag + button.userTag {
  margin-top: 4px;
}

.spiHelper-sockTable button.userTag .userTag__label {
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.spiHelper-sockTable button.userTag .cdx-icon.userTag__kind {
  flex-shrink: 0;
}

.spiHelper-sockTable button.userTag .cdx-icon.userTag__status {
  flex-shrink: 0;
}

.spiHelper-sockTable.linkTable thead {
  text-wrap: nowrap;
}

#spiHelper-PreviewBox {
  min-height: 26px;
}

#spiHelper-PreviewBox .cdx-button {
  position: absolute;
  top: 8px;
}

#spiHelper-PreviewBox .cdx-button:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  right: 8px;
}

#spiHelper-PreviewBox .cdx-button:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  right: 8px;
}

#spiHelper-PreviewBox .cdx-button:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  right: 8px;
}

#spiHelper-PreviewBox .cdx-button:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: 8px;
}

#spiHelper-PreviewBox .cdx-button:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: 8px;
}

#spiHelper-PreviewBox .cdx-button:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: 8px;
}

#spiHelper-PreviewBox #htmlPreview {
  overflow-wrap: break-word;
  box-sizing: border-box;
  width: 100%;
  padding-inline-end: 40px;
}

#spiHelper-CaseLoader {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#spiHelper-CaseLoader .cdx-text-input {
  max-width: 200px;
}

div.edit-tag-popover {
  min-width: 380px;
}

div.edit-tag-popover .tag-category {
  display: flex;
  width: auto;
  margin-bottom: 16px;
}

div.edit-tag-popover .tag-category > button {
  flex: 1;
}

div.edit-tag-popover .edit-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

div.edit-tag-popover .edit-body > .cdx-toggle-button-group {
  display: flex;
  width: auto;
}

div.edit-tag-popover .edit-body > .cdx-toggle-button-group > button {
  white-space: nowrap;
  flex: 1;
  min-width: max-content;
  padding: 0 4px;
}

div.edit-tag-popover footer {
  display: flex;
  justify-content: space-between;
}

div.edit-tag-popover footer .cdx-popover__footer__actions {
  gap: 0;
}

#spiHelper-templateRow {
  display: flex;
}

#spiHelper-templateRow .cdx-select-vue__handle {
  min-width: 0;
}

#spiHelper-templateRow > .cdx-select-vue {
  flex: 1;
}

Content Disclaimer

Informasi ini disarikan dari Wikipedia dan disajikan kembali untuk tujuan edukasi. Konten tersedia di bawah lisensi CC BY-SA 3.0. Kami tidak bertanggung jawab atas ketidakakuratan data yang bersumber dari kontribusi publik tersebut.

  1. The information displayed on this website is sourced in part or in whole from Wikipedia and has been adapted for the purpose of restating it. We strive to provide accurate and relevant information, however:
  2. There is no guarantee of absolute accuracy. Wikipedia is an open, collaborative project that can be edited by anyone, so information is subject to change.
  3. It is not intended to constitute professional advice. The content displayed is for informational and educational purposes only. For important decisions (e.g., medical, legal, or financial), please consult a professional.
  4. Content copyright. Wikipedia is licensed under the Creative Commons Attribution-ShareAlike License (CC BY-SA). This means that content may be reused with appropriate attribution and shared under a similar license.
  5. Responsible use. Any risk arising from the use of information from this website is entirely the responsibility of the user.