/* CodeSelect Gadget - CSS styling. Activates all .code-select fields on the site. By clicking the icon the code is copied to clipboard and tooltip is changed See detailed documentation in Dev/mediawiki */ /* 1. General */ .code-select { display: inline-block; background: #f6f6f6; border-radius: 7px; box-shadow: inset 2px 2px 6px rgba(0,0,0,0.05); border: 1px solid #e3e3e3; padding: 5px 13px 0 40px; position: relative; max-width: 100%; vertical-align: middle; min-height: 31px; overflow: auto; } html.client-nojs .code-select { font-family: Courier, monospace; font-size: 14px; color: #0054a8; line-height: 1.6em; width: 100%; overflow: auto; white-space: pre; padding: 4px 13px 2px 15px; cursor: auto !important; } .code-select, .code-select > *:not(.cbutton) { cursor: copy !important; } .code-select:hover { border-color: #d8d8d8; background: #f0f0f0; } .code-select.js-fully-loaded { overflow: visible; padding-left: 38px; white-space: unset; } /* 2. Tooltip */ .code-select .tooltip2 { position: absolute; top: -39px; left: 6px; background: white; color: #337cd9; border: 1px solid #337cd9; padding: 6px 10px; border-radius: 6px; z-index: 1010; font-weight: bold; font-size: 14px; display: none; white-space: nowrap; font-family: Courier, monospace; } .code-select .tooltip2::after { content: " "; position: absolute; top: 100%; left: 7px; border-width: 7px; border-style: solid; border-color: #337cd9 transparent transparent transparent; } .code-select .tooltip2 .copied { display: none; } .code-select .tooltip2 .hover { display: inline-block; } .code-select.copied .tooltip2 .copied { display: inline-block; } .code-select.copied .tooltip2 .hover { display: none; } .code-select.copied .tooltip2 { display: inline-block; background: #07c007; border-color: #01b101; color: white; } .code-select.copied .tooltip2::after { border-top-color: #00a400; } .code-select .tooltip2 .copied > i { margin-right: 3px; position: relative; top: 1px; } .code-select > .cbutton:hover ~ .tooltip2 { display: inline-block; } /* 3. Icon */ .code-select > .cbutton { cursor: pointer; display: inline-block; } .code-select:not([data-button-image-src]) > .cbutton { position: absolute; left: 8px; top: 2px; height: 25px; width: 27px; text-align: center; padding-top: 4px; border-radius: 5px; color: #5594c7; font-size: 16px; } .code-select > .cbutton.fa-check { color: #00d400; } .code-select:not(.copied) > .cbutton:hover { color: #0054a8; } /* 4. Text-Containers */ .code-select .code, .code-select { font-family: 'Cousine', monospace, Courier; font-size: 13px; color: #0054a8; line-height: 1.6em; width: 100%; white-space: pre; } .code-select.inline-style .code, .code-select.inline-style { width: auto; } .code-select .code { overflow: auto; padding: 0 0 0 2px; display: block; } /* 5. Variant : Image Button */ html.client-nojs .code-select[data-button-image-src] { display: none !important; } .code-select[data-button-image-src] { border: none; background: transparent; padding: 0; width: 30px; height: 30px; box-shadow: none; } .code-select[data-button-image-src] img { width: 100%; height: 100%; object-fit: contain; object-position: center; } .code-select[data-button-image-src], .code-select[data-button-image-src] > *:not(.cbutton) { cursor: auto !important; } .code-select[data-button-image-src]:not(.js-fully-loaded) { visibility: hidden; } .code-select[data-button-image-src] .cbutton:not(i) { width: inherit; height: auto; transition: filter .3s; } .code-select[data-button-image-src] .cbutton:not(i):hover { filter: brightness( .97 ); } .code-select[data-button-image-src] i.cbutton { color: #5594c7; font-size: 18px; position: absolute; top: calc( 50% - 10px ); left: calc( 50% - 10px ); } .code-select[data-button-image-src] i.cbutton.fa-clone { } .code-select[data-button-image-src] i.cbutton:hover { color: #003870; } .code-select[data-button-image-src] .tooltip2 { top: -43px; left: -3px; } .code-select[data-button-image-src] .tooltip2::after { left: 9px; } .code-select[data-button-image-src] .code { width: 2px; height: 2px; display: inline-block; opacity: 0; overflow: hidden; } /* 6. CodeSelect with target */ .code-select-target-helper { position: relative; } .code-select[data-target] { display: none; } .code-select-target-helper .code-select[data-target] { display: block; } /* [[Category:MultiWiki]] */