User:Choocolatiah/common.css

/***********/ /* Tooltip */ /*Copied from Dragalia Lost Wiki*/ /***********/

.tooltipbase { position: relative; display: inline-block; border-bottom: 1px dotted #aaa; line-height: 1.3; }

.tooltiptext { visibility: hidden; min-width: 150px; padding: 12px 14px; text-align: center; position: absolute; left: 50%; bottom: calc(20px + 100%); z-index: 99999; background: #fff; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.15); border: 1px solid #a2a9b1; border-radius: 2px; font-weight: normal; color: black; text-shadow: none; }

.tooltiptext-long { min-width: 350px; }

.tooltiptext:after, .tooltiptext:before { content: ''; position: absolute; left: 50%; border-style: solid; }

.tooltiptext:after { top: 100%; bottom: auto; width: 20px; height: 20px; background: #fff; margin-top: -10px; margin-left: -10px; box-shadow: 1px 1px 0px #a2a9b1; transform: rotate(45deg); border-width: 0; }

.tooltiptext:before { top: 100%; bottom: auto; border-width: 18px; margin-left: -18px; border-color: rgba(0, 0, 0, 0.15) transparent transparent transparent; pointer-events: none; }

.tooltipbase .tooltipbase .tooltiptext { bottom: auto; top: 195%; }

.tooltipbase .tooltipbase .tooltiptext:after { top: auto; bottom: 100%; border-width: 15px; margin-left: -15px; border-color: transparent transparent white transparent; width: 0; height: 0; box-shadow: none; background: none; transform: none; }

.tooltipbase .tooltipbase .tooltiptext:before { top: auto; bottom: 100%; border-width: 16px; margin-left: -16px; border-color: transparent transparent #888 transparent; transform: translate(-50%,0); }

.tooltiptext hr { margin: 10px 0 12px; position: relative; background: none; }

.tooltiptext hr:after { content: ''; display: block; width: 100%; height: 1px !important; position: absolute; left: -14px; background: #a2a9b1; padding: 0 14px; }

.tooltipbase:hover>.tooltiptext { visibility: visible; }

.tooltiptext { opacity: 0; transition: opacity 200ms ease, visibility 0s ease 200ms, transform 200ms ease; transform: translate(-50%,8px); }

.tooltipbase .tooltipbase .tooltiptext { transform: translateY(-8px); }

.tooltipbase:hover>.tooltiptext { opacity: 1; transition-delay: 0s; transform: translate(-50%,0); }

/* for Module:Dialoge2 testing */ .dialogue { display: grid; grid-gap: 0 15px; align-content: center; }

.dialogue-icon { grid-area: icon; padding-top: 5px; justify-self: right; }

.dialogue-name { grid-area: name; }

.dialogue-text { display: flex; flex-wrap: wrap; gap: 0.5em 1em; grid-area: text; padding: 0.5em 1em; background: var(--color-surface-2); border-color: var(--color-surface-3); border-width: 1px; border-style: solid; }

.dialogue-text:hover { background: var(--color-surface-2--hover); }

.dialogue-text.marked { background: var(--color-surface-2--active); border-right-width: thick; }

.dt-en, .dt-jp { flex: 1 1 200px; }

/* Modern */ .dialogue.modern { grid-template-columns: 50px 1fr; grid-template-rows: 2em 1fr; grid-template-areas: "icon name" "icon text"; width: 960px; max-width: 100%; margin: 2em auto; }

.dialogue.modern .dialogue-name { align-self: center; }

.dialogue.modern .dialogue-text { border-radius: var(--border-radius--medium); }

/* Traditional */ .dialogue.traditional { grid-template-columns: 125px 1fr; grid-template-rows: 60px 1fr; grid-template-areas: "icon text" "name text"; margin: -1px 0; }

.dialogue.traditional .dialogue-icon { justify-self: center; }

.dialogue.traditional .dialogue-name { justify-self: center; }