MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 108: / Line 108: @@
 .commentary-body + .commentary-body {
    margin-top: 6px;
+}
+.commentary-body {
+  max-height: 0;
+  overflow: hidden;
+  opacity: 0;
+  transition: all 0.3s ease;
 }
-.commentary-body.commentary-hidden {
+.commentary-body.open {
-   display: none;
+  max-height: 500px;
+   opacity: 1;
 }
 .commentary-body.commentary-hidden + p:empty,
 .verse-block > p:empty {
@@ Line 372: / Line 378: @@
    }
 }
-.icon {
-  display: inline-block;
-  width: 14px;
-  height: 14px;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: contain;
-  vertical-align: middle;
-}
 /* Your icons */
 .icon-copy {
@@ Line 404: / Line 400: @@
 .shloka-line {
    display: flex;
-   align-items: baseline;
+   align-items: center;   /* better */
-   justify-content: space-between;
+   justify-content: flex-start; /* IMPORTANT */
-}
+  gap: 10px;}
 /* Keep text natural */
@@ Line 424: / Line 420: @@
 /* Icon tuning */
 .icon {
+  display: inline-block;
    width: 18px;
    height: 18px;
+  background-repeat: no-repeat;
+  background-position: center;
    background-size: contain;
    transform: translateY(2px);
+  pointer-events: none;
 }
 .verse-action-btn {
@@ Line 445: / Line 445: @@
    background-color: rgba(0,0,0,0.05);
    transform: scale(1.05);
-}
-/* Hide actions by default */
-.verse-actions {
-  opacity: 0;
-  transition: opacity 0.2s ease;
 }
-/* Show on hover of verse */
-.verse-block:hover .verse-actions {
-  opacity: 1;
-}
 /* Default */
 .verse-action-commentary {
@@ Line 470: / Line 461: @@
 .verse-action-commentary.active .icon {
    filter: invert(25%) sepia(80%) saturate(500%) hue-rotate(200deg);
+}
+/* TOOLTIP */
+.copy-tooltip {
+  position: absolute;
+  top: -28px;
+  right: 0;
+  background: #333;
+  color: #fff;
+  font-size: 11px;
+  padding: 3px 6px;
+  border-radius: 4px;
 }