Rotate copy-over-buttons correctly (#1335)

This commit is contained in:
Aryan Pingle
2023-03-02 17:12:52 +05:30
committed by GitHub
parent 583117697e
commit a8bc48f94c
2 changed files with 7 additions and 0 deletions

View File

@@ -112,6 +112,9 @@
.copy-over-button {
composes: title-button;
/* Make the filled arrow point towards the other options element */
transform: rotate(var(--rotate-copyoverbutton-angle));
svg {
fill: var(--header-text-color);
}

View File

@@ -45,9 +45,11 @@
--hot-theme-color: var(--hot-pink);
--header-text-color: var(--white);
--scroller-radius: var(--options-radius) var(--options-radius) 0 0;
--rotate-copyoverbutton-angle: 90deg; /* To point down */
@media (min-width: 600px) {
--scroller-radius: 0 var(--options-radius) var(--options-radius) 0;
--rotate-copyoverbutton-angle: 0deg; /* To point right (no change) */
}
}
@@ -56,9 +58,11 @@
--hot-theme-color: var(--deep-blue);
--header-text-color: var(--dark-text);
--scroller-radius: var(--options-radius) var(--options-radius) 0 0;
--rotate-copyoverbutton-angle: -90deg; /* To point up */
@media (min-width: 600px) {
--scroller-radius: var(--options-radius) 0 0 var(--options-radius);
--rotate-copyoverbutton-angle: 180deg; /* To point left */
}
}