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.
- 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:
- 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.
- 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.
- 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.
- Responsible use. Any risk arising from the use of information from this website is entirely the responsibility of the user.