Merge pull request Roll20#7914 from NMarrero/master

Serenity: Add tooltips to attributes & skills; fix complication typo
vallfors · Dec 14, 2020 · ce3ce39 · ce3ce39
2 parents cb17614 + 6cd0681
commit ce3ce39
Show file tree

Hide file tree

Showing 2 changed files with 2,456 additions and 46 deletions.
diff --git a/Serenity/serenity.css b/Serenity/serenity.css
@@ -92,6 +92,11 @@
     text-align: left;
 }
 
+.sheet-serenity-charactersheet .sheet-serenity-character-custom-assets,
+.sheet-serenity-charactersheet .sheet-serenity-character-custom-complications {
+    display: block;
+}
+
 .sheet-serenity-charactersheet .sheet-serenity-custom-asset,
 .sheet-serenity-charactersheet .sheet-serenity-custom-complication {
     display: flex;
@@ -1193,6 +1198,10 @@
     width: 180px;
 }
 
+.sheet-serenity-charactersheet .sheet-character-attributes td:not(:last-child) {
+    text-align: right;
+}
+
 .sheet-serenity-charactersheet .sheet-character-derived-traits {
     text-align: right;
     width: 405px;
@@ -1203,6 +1212,7 @@
 
 .sheet-serenity-charactersheet .sheet-character-derived-traits td:not(:last-child) {
     padding-right: 10px;
+    text-align: right;
 }
 
 .sheet-serenity-charactersheet .sheet-character-derived-traits input {
@@ -1474,6 +1484,10 @@
     width: 450px;
 }
 
+.sheet-serenity-charactersheet .sheet-character-skills td {
+    text-align: right;
+}
+
 .sheet-serenity-charactersheet .sheet-character-skills td:nth-child(2) {
     border-right: 2px groove #c93f00;
     padding-right: 10px;
@@ -1686,6 +1700,98 @@
     width: 100%;
 }
 
+.sheet-serenity-charactersheet .sheet-serenity-tooltip {
+    position: relative;
+}
+
+.sheet-serenity-charactersheet .sheet-serenity-tooltip .sheet-serenity-tooltip-text {
+    position: absolute;
+    z-index: 1;
+    text-align: left;
+    font-size: larger;
+    /* vertically center */
+    top: 50%;
+    -webkit-transform: translateY(-50%);
+    transform: translateY(-50%);
+    /* basic styles */
+    width: 400px;
+    padding: 10px;
+    border-radius: 10px;
+    background: black;
+    color: white;
+    opacity: 0;
+    transition: 0.3s opacity;
+    display: none;
+    /* move to right */
+    left: 100%;
+    margin-left: 15px;
+    /* and add a small left margin */
+}
+
+.sheet-serenity-charactersheet .sheet-serenity-tooltip .sheet-serenity-tooltip-text table {
+    margin: 5px;
+}
+
+.sheet-serenity-charactersheet .sheet-serenity-tooltip .sheet-serenity-tooltip-text table td {
+    color: white;
+    padding: 5px;
+    border: 1px solid white;
+    text-align: left;
+}
+
+.sheet-serenity-charactersheet .sheet-serenity-tooltip .sheet-serenity-tooltip-text table td:first-child {
+    border: none;
+}
+
+.sheet-serenity-charactersheet .sheet-serenity-tooltip .sheet-serenity-tooltip-text.sheet-serenity-tooltip-text-wide {
+    width: 500px;
+}
+
+.sheet-serenity-charactersheet .sheet-serenity-tooltip .sheet-serenity-tooltip-text.sheet-serenity-tooltip-text-left {
+    /* reset defaults */
+    left: initial;
+    margin: initial;
+    /* set new values */
+    right: 100%;
+    margin-right: 15px;
+}
+
+.sheet-serenity-charactersheet .sheet-serenity-tooltip .sheet-serenity-tooltip-text:after {
+    content: "";
+    position: absolute;
+    /* vertically center */
+    top: 50%;
+    -webkit-transform: translateY(-50%);
+    transform: translateY(-50%);
+    /* the arrow */
+    border: 10px solid #000;
+    border-color: transparent black transparent transparent;
+    opacity: 0;
+    transition: 0.3s;
+    /* position tooltip correctly */
+    right: 100%;
+    margin-left: -5px;
+}
+
+.sheet-serenity-charactersheet .sheet-serenity-tooltip .sheet-serenity-tooltip-text.sheet-serenity-tooltip-text-left:after {
+    /* reset defaults */
+    right: initial;
+    margin: initial;
+    border: initial;
+    /* set new values */
+    left: 100%;
+    margin-right: -5px;
+    /* the arrow */
+    border: 10px solid #000;
+    border-color: transparent transparent transparent black;
+}
+
+.sheet-serenity-charactersheet .sheet-serenity-tooltip:hover .sheet-serenity-tooltip-text,
+.sheet-serenity-charactersheet .sheet-serenity-tooltip:hover .sheet-serenity-tooltip-text:after {
+    opacity: 1;
+    display: block;
+}
+
 div.sheet-tab-content {
     visibility: hidden;
     bottom: 0;