8,756
edits
imported>Kittymmeow No edit summary |
(CSS for qud character infobox added) |
||
Line 1,739: | Line 1,739: | ||
.qud-image:hover { | .qud-image:hover { | ||
background: #0f3b3a; | background: #0f3b3a; | ||
} | |||
/* | |||
* QUD COLORS AND FONTS | |||
* ==================== | |||
*/ | |||
:root { | |||
--qud-color-y: #ffffff; | |||
--qud-color-y-dark: #b1c9c3; | |||
--qud-color-r: #d74200; | |||
--qud-color-r-dark: #a64a2e; | |||
--qud-color-o: #e99f10; | |||
--qud-color-o-dark: #f15f22; | |||
--qud-color-w: #cfc041; | |||
--qud-color-w-dark: #98875f; | |||
--qud-color-g: #00c420; | |||
--qud-color-g-dark: #009403; | |||
--qud-color-b: #0096ff; | |||
--qud-color-b-dark: #0048bd; | |||
--qud-color-c: #77bfcf; | |||
--qud-color-c-dark: #40a4b9; | |||
--qud-color-m: #da5bd6; | |||
--qud-color-m-dark: #b154cf; | |||
--qud-color-k: #155352; | |||
--qud-color-k-dark: #0f3b3a; | |||
--qud-font-terminal1: 'Source Code Pro','Consolas','Courier New','Courier','Lucida Console'; | |||
--qud-font-terminal2: 'Source Code Pro','Consolas','Lucida Console','Courier New','Courier'; | |||
--qud-font-icon1: 'Source Code Pro','Calibri','Courier New','Courier','Arial'; | |||
--qud-font-icon2: 'Source Code Pro','Calibri','Consolas','Lucida Console'; | |||
--qud-font-infobox-title: 'Source Code Pro','Segoe UI','Consolas','Lucida Console','Courier New','Courier'; | |||
--qud-font-infobox-content: 'Segoe UI','Consolas','Lucida Console','Courier New','Courier'; | |||
--qud-font-collapser-arrows: 'Source Code Pro, Lucida Console, Consolas'; | |||
} | |||
/* | |||
* QUD CHARACTER - INFOBOX ADJUSTMENTS | |||
* =================================== | |||
*/ | |||
.qud-character-infobox .moduleinfobox { | |||
overflow: hidden; /* prevent horizontal scrollbar from appearing */ | |||
} | |||
.qud-character-infobox .moduleinfobox :focus { | |||
outline: 0px solid #000; /* remove focus outline on selected collapsible */ | |||
} | |||
.qud-character-infobox .infobox-title { | |||
background: var(--searchsuggestions-background); | |||
color: var(--qud-color-y); | |||
font-family: var(--qud-font-infobox-title); | |||
line-height: 2em; | |||
font-size: 1.5em; | |||
padding: 0px 8px; | |||
} | |||
/* styles for generic, non-specialized infobox rows below */ | |||
.qud-character-infobox .infobox-rows th { | |||
background: var(--navbox-background); /* var(--navbox-alt-background); */ | |||
font-family: var(--qud-font-terminal2); | |||
} | |||
.qud-character-infobox .infobox-rows th + td { | |||
background: var(--navbox-background); | |||
font-size: 1.12em; | |||
} | |||
/* | |||
* QUD CHARACTER - COLLAPSIBLES | |||
* ============================ | |||
*/ | |||
td.qud-collapser { | |||
background: var(--navigation-tab-background); | |||
color: var(--infobox-label-color); | |||
font-weight: bold; | |||
height: 2.6em; | |||
} | |||
.qud-collapser-head { | |||
display: flex; | |||
font-weight: bold; | |||
font-size: 1.1em; | |||
font-family: var(--qud-font-terminal2); | |||
} | |||
.qud-collapser-title { | |||
margin-left:1.5em; | |||
} | |||
.qud-collapser-content { | |||
padding: 0 4px; | |||
background: var(--code-background); /*#0f3b3a;*/ | |||
} | |||
.qud-collapser-arrow-right { | |||
text-align: center; | |||
position: absolute; | |||
line-height: 1.8em; | |||
font-family: var(--qud-font-collapser-arrows); | |||
left: 0.6em; | |||
z-index: 10; | |||
} | |||
.qud-collapser-arrow-down { | |||
text-align: center; | |||
position: absolute; | |||
line-height: 1.8em; | |||
font-family: var(--qud-font-collapser-arrows); | |||
background: var(--fpheading-background); | |||
left: 0.6em; | |||
z-index: 20; | |||
} | |||
/* | |||
* QUD CHARACTER - TOOLTIPS | |||
* ======================== | |||
*/ | |||
.qud-tooltip { | |||
position: relative; | |||
} | |||
.qud-tooltip .qud-tooltip-text { | |||
visibility: hidden; | |||
width: 120px; | |||
background-color: var(--searchsuggestions-background); | |||
color: var(--qud-color-y); | |||
text-align: center; | |||
padding: 5px 0; | |||
border-radius: 6px; | |||
font-size: calc(0.23em + 7px); | |||
position: absolute; | |||
z-index: 1; | |||
width: 120px; | |||
bottom: 100%; | |||
left: 50%; | |||
margin-left: -60px; /* half of the width */ | |||
} | |||
.qud-tooltip:hover .qud-tooltip-text { | |||
visibility: visible; | |||
} | |||
.qud-tooltip:hover .qud-tooltip-text.delayed-tooltip { | |||
transition-delay: 0.35s; /* delayed-tooltip class to delay the appearance */ | |||
} | |||
/* | |||
* QUD CHARACTER - CORE STATS | |||
* ========================== | |||
*/ | |||
.qud-core-stats:hover, | |||
.qud-basic-attributes:hover, | |||
.qud-attribute-entry:hover, | |||
.qud-attributes-row:hover, | |||
.qud-attributes-wrapper:hover, | |||
.qud-resistances:hover { | |||
cursor: default; | |||
} | |||
.qud-core-stats-wrapper { | |||
display: flex; | |||
padding: 0 1.2em 18px 1.2em; | |||
height: 1.7em; | |||
} | |||
.qud-core-stats-entry { | |||
flex: 1 0 33%; | |||
text-align: center; | |||
white-space: nowrap; | |||
font-size: 1.7em; | |||
font-weight: bold; | |||
font-family: var(--qud-font-terminal1); | |||
margin-top: 0px; | |||
transition: font-size 0.1s, margin-top 0.1s; | |||
} | |||
.qud-core-stats-entry:hover { | |||
font-size: calc(1.7em + 4px); | |||
margin-top: -2px; | |||
} | |||
.qud-stat-icon { | |||
display: inline-block; | |||
padding-right: 0.3em; | |||
line-height: 1.2em; | |||
height: 1.2em; | |||
font-family: var(--qud-font-icon1); | |||
font-size: 1.3em; | |||
font-weight: bold; | |||
position: relative; | |||
top:0.05em; | |||
} | |||
.qud-stats-health .qud-stat-icon { | |||
color: var(--qud-color-r-dark); | |||
} | |||
.qud-stats-av .qud-stat-icon { | |||
color: var(--qud-color-b-dark); | |||
} | |||
.qud-stats-dv .qud-stat-icon { | |||
color: var(--qud-color-k); | |||
font-family: var(--qud-font-icon2); | |||
} | |||
.qud-stat-value { | |||
display: inline-block; | |||
color: var(--qud-color-y); | |||
} | |||
/* | |||
* QUD CHARACTER - LEVEL | |||
* ===================== | |||
*/ | |||
.qud-character-level-wrapper { | |||
color: var(--qud-color-y-dark); | |||
padding: 0em 2em 10px 2em; | |||
font-family: var(--qud-font-terminal1); | |||
font-size: 1.3em; | |||
font-weight: bold; | |||
text-align: center; | |||
} | |||
.qud-character-level-text, | |||
.qud-character-level-value { | |||
display: inline-block; | |||
padding-right: 0.45em; | |||
} | |||
.qud-character-level-value { | |||
color: var(--qud-color-c); | |||
} | |||
/* | |||
* QUD CHARACTER - ATTRIBUTES | |||
* ========================== | |||
*/ | |||
.qud-attributes-wrapper, | |||
.qud-attributes-header-row { | |||
color: var(--qud-color-y-dark); | |||
padding: 0 1em 4px 1em; | |||
} | |||
.qud-attributes-row, | |||
.qud-attributes-header-row { | |||
display: flex; | |||
line-height: 1.6em; | |||
white-space: nowrap; | |||
} | |||
.qud-attributes-header-button { | |||
flex: 1 0 50%; | |||
opacity: 0.5; | |||
color: var(--qud-color-c-dark); | |||
font-size: 1em; | |||
font-weight: bold; | |||
font-family: var(--qud-font-terminal1); | |||
text-align: center; | |||
font-style: italic; | |||
text-decoration: underline; | |||
transition: color 0.1s, opacity 0.1s; | |||
} | |||
.qud-attributes-header-button:hover { | |||
opacity: 1; | |||
color: var(--qud-color-c); | |||
} | |||
.qud-attributes-title { | |||
padding: 0 0 0.2em 0; | |||
color: var(--qud-color-y-dark); | |||
font-size: 1em; | |||
font-weight:bold; | |||
font-family: var(--qud-font-terminal1); | |||
} | |||
.qud-attribute-entry { | |||
flex: 1 0 33%; | |||
font-size: 1.3em; | |||
font-weight: bold; | |||
font-family: var(--qud-font-terminal1); | |||
transition: transform 0.1s; | |||
transform: perspective(1px); /* fixes bluriness in Chrome immediately after hover, during transition-delay */ | |||
-webkit-backface-visibility: hidden; | |||
backface-visibility: hidden; | |||
} | |||
.qud-attribute-entry.qud-tooltip:hover { | |||
transform: scale(1.08,1.08); | |||
transition-delay: 0.35s; | |||
} | |||
.qud-attribute-entry.qud-tooltip:hover .qud-tooltip-text { | |||
transition-delay: 0.35s; | |||
} | |||
.qud-attribute-label { | |||
display: inline-block; | |||
padding-right: 0.45em; | |||
} | |||
.qud-attribute-value { | |||
display: inline-block; | |||
} | |||
.qud-roll-range { | |||
font-style: italic; | |||
display: block; | |||
color: var(--qud-color-y-dark) | |||
} | |||
.qud-roll-raw { | |||
display: none; | |||
} | |||
div.qud-attribute-st + div.qud-attribute-value, | |||
div.qud-attribute-ag + div.qud-attribute-value, | |||
div.qud-attribute-to + div.qud-attribute-value, | |||
div.qud-attribute-wi + div.qud-attribute-value, | |||
div.qud-attribute-in + div.qud-attribute-value, | |||
div.qud-attribute-eg + div.qud-attribute-value { | |||
color: var(--qud-color-c) | |||
} | |||
.qud-attribute-st { color: var(--qud-color-y); } | |||
.qud-attribute-ag { color: var(--qud-color-w); } | |||
.qud-attribute-qn { color: var(--qud-color-y-dark); } | |||
.qud-attribute-to { color: var(--qud-color-r); } | |||
.qud-attribute-wi { color: var(--qud-color-g); } | |||
.qud-attribute-ms { color: var(--qud-color-y-dark); } | |||
.qud-attribute-in { color: var(--qud-color-b); } | |||
.qud-attribute-eg { color: var(--qud-color-m); } | |||
.qud-attribute-ma { color: var(--qud-color-y-dark); } | |||
/* | |||
* QUD CHARACTER - DETAILED ATTRIBUTES | |||
* =================================== | |||
*/ | |||
.qud-stat-details-wrapper { | |||
color: var(--qud-color-y-dark); | |||
margin: 0.5em 0; | |||
display: table; | |||
border-collapse: collapse; | |||
} | |||
.qud-stat-details-entry { | |||
display: table-row; | |||
font-size: 0.9em; | |||
font-weight: bold; | |||
font-family: var(--qud-font-terminal1); | |||
} | |||
.qud-stat-details-entry > div { | |||
display: table-cell; | |||
text-align: center; | |||
padding: 0 0.4em; | |||
color: var(--qud-color-y-dark); | |||
border-left: var(--infobox-border); | |||
} | |||
.qud-stat-details-entry > div:first-child { | |||
border-left: none; | |||
text-align: left; | |||
} | |||
.qud-stat-details-entry > div.qud-stat-table-header { | |||
color: var(--qud-color-k); | |||
} | |||
.qud-stat-name { | |||
color: var(--qud-color-y); | |||
} | |||
/* | |||
* QUD CHARACTER - RESISTANCES | |||
* =========================== | |||
*/ | |||
.qud-resistances-wrapper { | |||
color: var(--qud-color-y-dark); | |||
padding: 0 1.3em 1.8em 1.6em; | |||
display: flex; | |||
flex-wrap: wrap; | |||
border-bottom: var(--infobox-border); | |||
margin-bottom: 12px; | |||
} | |||
.qud-resistance-row { | |||
flex: 1 0 50%; | |||
font-size: 1em; | |||
font-weight: bold; | |||
font-family: var(--qud-font-terminal1); | |||
} | |||
.qud-resistance-prefix, | |||
.qud-resistance-text, | |||
.qud-resistance-value { | |||
display: inline-block; | |||
padding-right: 0.45em; | |||
} | |||
.qud-resistance-value.positive-value { | |||
color: var(--qud-color-g); | |||
} | |||
.qud-resistance-value.negative-value { | |||
color: var(--qud-color-r); | |||
} | |||
/* | |||
* QUD CHARACTER - INVENTORY | |||
* ========================= | |||
*/ | |||
.qud-inv-group { | |||
font-weight: bold; | |||
} | |||
.qud-equipped { | |||
border-bottom: var(--infobox-border); | |||
padding-bottom: 6px; | |||
} | |||
.qud-carried { | |||
border-top: none; | |||
padding-bottom: 6px; | |||
} | |||
.qud-item-qty { | |||
color: var(--infobox-details-background); | |||
} | |||
.qud-equipped-title { | |||
color: var(--infobox-details-background); | |||
} | |||
.qud-inv-content-itemlist { | |||
padding: 2px 3px 2px 5px; | |||
font-family: var(--qud-font-infobox-content); | |||
font-size: 1.2em; | |||
} | |||
.qud-inventory-item { | |||
text-overflow: clip; | |||
max-width: 149px; | |||
white-space: nowrap; | |||
} | |||
/* | |||
* QUD CHARACTER - SKILLS and MUTATIONS | |||
* ==================================== | |||
*/ | |||
.qud-skills-wrapper, | |||
.qud-mutations-wrapper { | |||
display: flex; | |||
flex-direction: row; | |||
flex-wrap: wrap; | |||
font-size: 1.1em; | |||
font-weight: bold; | |||
font-family: var(--qud-font-infobox-content); | |||
max-width: 260px; | |||
padding: 0.4em 0; | |||
} | |||
.qud-skill-entry, | |||
.qud-mutation-entry { | |||
flex: 1 0 100%; | |||
transition: .8s opacity; | |||
line-height: 1.2em; | |||
padding: 0.1em 0 0.4em 0.5em; | |||
overflow: hidden; | |||
box-sizing: border-box; | |||
text-overflow: clip; | |||
justify-content: center; | |||
align-items: center; | |||
border-radius: 2px; | |||
transition: background 0.15s; | |||
} | |||
.qud-skill-entry:hover, | |||
.qud-mutation-entry:hover { | |||
background: var(--navigation-tab-background); | |||
} | |||
.qud-skill-entry a, | |||
.qud-mutation-entry a { | |||
display: block; /* make entire row clickable */ | |||
} | |||
.qud-mutation-entry { | |||
display: flex; | |||
justify-content: left; | |||
} | |||
.qud-mutation-entry a { | |||
width: 100%; | |||
} | |||
.qud-mutation-entry:hover a b { | |||
display: inline-block; | |||
text-decoration: none; | |||
} | } |