|
|
| Line 1: |
Line 1: |
| /****************************************/
| |
| /******* Start DRUID CSS rules *********/
| |
| /****************************************/
| |
|
| |
|
| .druid-container {
| |
| /* These variables are designed to inherit from your wiki's color variables.
| |
| If your wiki uses a different naming scheme, change the inner names to match yours.
| |
| If your wiki doesn't use color variables you should consider doing so,
| |
| otherwise you can replace the inner variables or the fallback values with colors that match your wiki.
| |
| */
| |
| --druid-background-color: var(--wiki-content-background-color, #ffffff);
| |
| --druid-background-color--rgb: var(--wiki-content-background-color--rgb, 255, 255, 255);
| |
|
| |
| --druid-secondary-background-color: var(--wiki-accent-color, #36c);
| |
| --druid-secondary-background-color--rgb: var(--wiki-accent-color--rgb, 51, 102, 204);
| |
| --druid-secondary-background-label-color: var(--wiki-accent-label-color, #fff);
| |
| --druid-secondary-background-label-color--rgb: var(--wiki-accent-label-color--rgb, 255, 255, 255);
| |
|
| |
| --druid-tertiary-background-color: var(--wiki-content-background-color--secondary, #eaecf0);
| |
| --druid-tertiary-background-color--rgb: var(--wiki-content-background-color--secondary--rgb, 234, 236, 240);
| |
|
| |
| --druid-border-color: var(--wiki-content-border-color, #a7d7f9);
| |
| --druid-border-color--rgb: var(--wiki-content-border-color--rgb, 167, 215, 249);
| |
|
| |
| --druid-link-color: var(--wiki-content-link-color, #0645ad);
| |
| --druid-link-color--rgb: var(--wiki-content-link-color--rgb, 6, 69, 173);
| |
| --druid-link-label-color: var(--wiki-content-link-label-color, #fff);
| |
| --druid-link-label-color--rgb: var(--wiki-content-link-label-color--rgb, 255, 255, 255);
| |
| }
| |
|
| |
| /* --------------------------------- */
| |
| /* Safe to edit ABOVE this line */
| |
| /* --------------------------------- */
| |
|
| |
| /* --------------------------------- */
| |
| /* Do not edit below this line */
| |
| /* --------------------------------- */
| |
|
| |
| .druid-container {
| |
| border: 4px solid var(--druid-border-color);
| |
| border-radius: 3px;
| |
| background: var(--druid-background-color);
| |
| float: right;
| |
| clear: right;
| |
| margin: 0 0 1em 1em;
| |
| width:100%;
| |
| max-width:22em;
| |
| box-sizing: border-box;
| |
| border-collapse: collapse;
| |
| }
| |
|
| |
| @media screen and (max-width: 720px) {
| |
| .druid-container {
| |
| float: none;
| |
| margin: 0.5rem auto;
| |
| }
| |
| }
| |
|
| |
| .druid-main-images-file,
| |
| .druid-main-image {
| |
| text-align:center;
| |
| }
| |
|
| |
| .druid-infobox .druid-title,
| |
| .druid-infobox .druid-section {
| |
| background:rgba(var(--druid-secondary-background-color--rgb), 0.75);
| |
| color:var(--druid-secondary-background-label-color);
| |
| text-align:center;
| |
| font-size:1.5em;
| |
| padding:1px;
| |
| }
| |
|
| |
| .druid-infobox .druid-section {
| |
| font-size: 1.25em;
| |
| font-weight: 500;
| |
| }
| |
|
| |
| .druid-infobox .druid-collapsible .druid-section {
| |
| flex-grow: 1;
| |
| }
| |
|
| |
| .druid-label {
| |
| font-weight:bold;
| |
| text-align: right;
| |
| box-sizing: border-box;
| |
| }
| |
|
| |
| .druid-row > .druid-label {
| |
| width: 48%;
| |
| flex-shrink: 0;
| |
| }
| |
|
| |
| .druid-row > .druid-label,
| |
| .druid-row > .druid-data {
| |
| padding-inline: 0.3em;
| |
| }
| |
|
| |
| .druid-main-image,
| |
| .druid-main-images {
| |
| padding:5px;
| |
| }
| |
|
| |
| .druid-main-image img,
| |
| .druid-main-images img {
| |
| max-width:100%;
| |
| height:auto;
| |
| }
| |
|
| |
| .druid-main-images-labels {
| |
| display:flex;
| |
| flex-direction:row;
| |
| flex-wrap:wrap;
| |
| justify-content: space-evenly;
| |
| margin:0.25em;
| |
| gap:0.25em;
| |
| }
| |
|
| |
| .druid-main-images-label {
| |
| cursor:pointer;
| |
| flex:1 1 auto;
| |
| text-align:center;
| |
| transition:.1s ease-in;
| |
| outline:1px solid var(--druid-link-color);
| |
| }
| |
|
| |
| .druid-main-images-label.focused {
| |
| background:var(--druid-link-color);
| |
| color:var(--druid-link-label-color);
| |
| }
| |
|
| |
| .druid-main-images-label:not(.focused):hover {
| |
| background:rgba(var(--druid-link-color--rgb), 0.25);
| |
| }
| |
|
| |
| .druid-toggleable-data:not(.focused),
| |
| .druid-main-images-file:not(.focused),
| |
| .druid-toggleable-heading:not(.focused) {
| |
| display:none;
| |
| }
| |
|
| |
| .druid-row:not(:has(.druid-grid)):has(.druid-toggleable-data-empty.focused) {
| |
| display:none;
| |
| }
| |
|
| |
| .druid-section:has(.druid-toggleable-heading-empty.focused) {
| |
| display:none;
| |
| }
| |
|
| |
| .druid-grid {
| |
| display:grid;
| |
| gap: 0.3em;
| |
| padding: 0.35em;
| |
| }
| |
|
| |
| .druid-grid-item {
| |
| background:var(--druid-tertiary-background-color);
| |
| padding:0.25em;
| |
| border:1px solid rgba(var(--druid-border-color--rgb), 0.5);
| |
| border-radius: 2px;
| |
| }
| |
|
| |
| .druid-grid-item .druid-label,
| |
| .druid-grid-item .druid-data {
| |
| text-align: center;
| |
| }
| |
|
| |
| .druid-data-wide {
| |
| width:100%;
| |
| }
| |
|
| |
| .druid-section-container > .druid-collapsible {
| |
| display: flex;
| |
| justify-content: space-between;
| |
| align-items: center;
| |
| }
| |
|
| |
| .druid-collapsed {
| |
| display:none!important;
| |
| }
| |
|
| |
| .druid-collapsible {
| |
| cursor:pointer;
| |
| position:relative;
| |
| }
| |
|
| |
| .druid-collapsible::after {
| |
| content: "";
| |
| display: block;
| |
| position: absolute;
| |
| right: 10px;
| |
| width: 20px;
| |
| height: 20px;
| |
| --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3E collapse %3C/title%3E%3Cpath d='M1 13.75l1.5 1.5 7.5-7.5 7.5 7.5 1.5-1.5-9-9-9 9z'/%3E%3C/svg%3E") no-repeat;
| |
| -webkit-mask: var(--mask);
| |
| mask: var(--mask);
| |
| -webkit-mask-size: 100% 100%;
| |
| mask-size: 100% 100%;
| |
| -webkit-mask-position: center center;
| |
| mask-position: center center;
| |
| background-color: var(--druid-secondary-background-label-color);
| |
| }
| |
|
| |
| .druid-collapsible-collapsed::after {
| |
| transform: rotate(180deg);
| |
| }
| |
|
| |
| .druid-section-container:has(.druid-toggleable-data-empty.focused):not(:has(.druid-toggleable-data-nonempty.focused)):not(:has(.druid-data-nonempty)) {
| |
| display: none;
| |
| }
| |
|
| |
| /*****************************************
| |
| Div support
| |
| *****************************************/
| |
|
| |
| div.druid-row {
| |
| display:flex;
| |
| margin-block: 1px;
| |
| }
| |
|
| |
| div.druid-row + div.druid-row {
| |
| margin-top: 0;
| |
| }
| |
|
| |
| div.druid-row > .druid-label {
| |
| background: var(--druid-tertiary-background-color);
| |
| }
| |
|
| |
| .druid-infobox .druid-title {
| |
| font-weight: 700;
| |
| }
| |
|
| |
| .druid-infobox #toc {
| |
| display:none;
| |
| }
| |
|
| |
|
| |
| /********
| |
| Custom display classes
| |
| *********/
| |
|
| |
| div.druid-stacked.druid-row,
| |
| .druid-stacked div.druid-row {
| |
| flex-direction: column;
| |
| }
| |
|
| |
| .druid-stacked.druid-row > .druid-label,
| |
| .druid-stacked .druid-row > .druid-label {
| |
| text-align: left;
| |
| width: 100%;
| |
| flex-basis:unset;
| |
| }
| |
|
| |
| .druid-stacked.druid-row > .druid-data,
| |
| .druid-stacked .druid-row > .druid-data {
| |
| padding-left: .75em;
| |
| }
| |
|
| |
| /* --------------------------------- */
| |
| /* Do not edit above this line */
| |
| /* --------------------------------- */
| |
|
| |
| /* --------------------------------- */
| |
| /* Local overrides go below this line */
| |
| /* --------------------------------- */
| |
|
| |
|
| |
| /****************************************/
| |
| /******* End DRUID CSS rules *********/
| |
| /****************************************/
| |
