User:Mikevoir/SourceTemplateData.css

/* Popup wrappers */ .td-popup { z-index: 500; min-height: 100%; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: block; overflow: visible; padding: 16px; } .td-popup-wrapper { overflow-y: clip; min-height: 100%; margin: 0 auto; max-width: 100%; background-color: var(--theme-page-background-color--secondary); transition: all 300ms; z-index: 999; max-height: calc(100% - 8em); top: 0; opacity: 1; transform: scale(1); position: relative; border-radius: 3px; color: var(--theme-page-text-color); width: 900px; height: 90%; color-scheme: dark light; } .td-popup-head-wrapper { min-height: 52px; outline: 1px solid var(--theme-border-color); overflow: hidden; z-index: 3; top: 0; position: relative; left: 0; right: 0; } .td-popup-body-wrapper { box-sizing: border-box; background: none; margin: 0; height: calc(100% - 5em); top: 0; bottom: 36px; padding: 8px 19px; overflow: auto; z-index: 2; position: relative; } /* Popup header */ .td-popup-head-label { margin: auto; cursor: default; margin-right: 9px; min-height: 52px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; font-weight: 700; line-height: 52px; user-select: none; -ms-user-select: none; -moz-user-select: none; -webkit-user-select: none; } .td-popup-head-close-button { cursor: pointer; left: 0; position: absolute; height: 100%; top: 0; bottom: 0; background-color: transparent; border-color: transparent; border-top-left-radius: 3px; color: var(--theme-page-text-color); align-items: center; display: inline-flex; font-size: 25px; text-decoration: none !important; font-weight: 700; justify-content: center; letter-spacing: 0.15px; line-height: 1.5; padding: 7px 15px; text-transform: uppercase; transition: background-color 300ms, color 300ms, border-color 300ms; }

/* Template general info */ .td-popup-body-header { display: block; position: relative; width: 100%; box-sizing: border-box; margin: 20px 0 20px 0; top: 0; left: 0; right: 0; bottom: 0; color: var(--theme-page-text-color); color-scheme: dark light; font-size: 16px; } .td-popup-template { font-size: 30px; text-align: center; } .td-popup-template:before { filter: invert(1); content: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2223%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E puzzle %3C/title%3E%3Ccircle cx=%2217%22 cy=%2210%22 r=%223%22/%3E%3Cpath d=%22M10.58 3A3 3 0 0 1 11 4.5a3 3 0 0 1-6 0A3 3 0 0 1 5.42 3H1v12a2 2 0 0 0 2 2h12V3z%22/%3E%3C/svg%3E"); } .td-popup-template-format-text { color: #54595d; overflow-wrap: break-word; } /* Hide the default checkbox */ opacity: 0 }
 * 1) template-format {

/* Style the artificial checkbox */ .td-popup-format-button-label:before { display: inline-flex; content: '\2800'; position: relative; align-items: center; border-style: solid; border-width: 2px; color: var(--theme-link-color); height: 16px; width: 16px; top: 0; bottom: 0; left: -5px; /* default empty */ }

/* Style its checked state with a tick */ content: '\2714'; }
 * 1) template-format:checked + .td-popup-format-button-label:before {

/* Template params */ .td-popup-param { display: block; position: relative; width: 100%; box-sizing: border-box; margin: 20px 0 20px 0; border: 1px solid var(--theme-link-color); padding: 8px; border-radius: 3px; top: 0; } .td-popup-param-example { color: #54595d; overflow-wrap: break-word; } .td-popup-param-label { box-sizing: border-box; display: inline-block; vertical-align: middle; font-weight: bold; overflow-wrap: break-word; font-size: 1.1em; line-height: 1.705em; } .td-popup-param-list { display: inline-flex; width: fit-content; margin-left: .5em; gap: .5em; }