mirror of
https://github.com/smogon/pokemon-showdown-client.git
synced 2026-03-21 17:50:29 -05:00
54535213e0
For the first time since original tooltips, we have a pressed-down animation for move/switch buttons! More importantly, long-presses are no longer weird, and now just lock in the tooltip instead of also opening a context menu. In addition, clicking on a locked tooltip dismisses it, which should help address complaints about locked tooltips being hard to dismiss. This makes it slightly harder to select text in locked tooltips, but clicking and dragging on desktop still works.
396 lines
13 KiB
CSS
396 lines
13 KiB
CSS
.movemenu button.type-Normal {
|
|
/* bg: 97 to 90, border: 70 */
|
|
background: hsl(60,14%,93%);
|
|
background: linear-gradient(to bottom, hsl(60,14%,97%), hsl(60,14%,84%));
|
|
border-color: hsl(60,14%,70%);
|
|
}
|
|
.movemenu button.type-Normal small {
|
|
color: hsl(60,14%,41%);
|
|
}
|
|
.movemenu button.type-Normal:hover {
|
|
/* bg: 95 to 83, border: 41 */
|
|
background: hsl(60,14%,87%);
|
|
background: linear-gradient(to bottom, hsl(60,14%,94%), hsl(60,14%,77%));
|
|
border-color: hsl(60,14%,41%);
|
|
}
|
|
.movemenu button.type-Normal:active, .movemenu button.type-Normal.pressed {
|
|
/* bg: 83 to 88, border: 41 */
|
|
background: hsl(60,14%,77%);
|
|
background: linear-gradient(to bottom, hsl(60,14%,77%), hsl(60,14%,83%));
|
|
border-color: hsl(60,14%,41%);
|
|
}
|
|
|
|
.movemenu button.type-Fighting {
|
|
/* bg: 97 to 90, border: 70 */
|
|
background: hsl(3,40%,93%);
|
|
background: linear-gradient(to bottom, hsl(3,40%,97%), hsl(3,40%,84%));
|
|
border-color: hsl(3,40%,70%);
|
|
}
|
|
.movemenu button.type-Fighting small {
|
|
color: hsl(3,40%,41%);
|
|
}
|
|
.movemenu button.type-Fighting:hover {
|
|
/* bg: 95 to 83, border: 41 */
|
|
background: hsl(342, 16%, 87%);
|
|
background: linear-gradient(to bottom, hsl(3,40%,94%), hsl(3,40%,77%));
|
|
border-color: hsl(3,40%,41%);
|
|
}
|
|
.movemenu button.type-Fighting:active, .movemenu button.type-Fighting.pressed {
|
|
/* bg: 83 to 88, border: 41 */
|
|
background: hsl(342, 16%, 77%);
|
|
background: linear-gradient(to bottom, hsl(3,40%,77%), hsl(3,40%,83%));
|
|
border-color: hsl(3,40%,41%);
|
|
}
|
|
|
|
.movemenu button.type-Flying {
|
|
/* bg: 97 to 90, border: 70 */
|
|
background: hsl(255,20%,93%);
|
|
background: linear-gradient(to bottom, hsl(255,20%,97%), hsl(255,20%,84%));
|
|
border-color: hsl(255,20%,70%);
|
|
}
|
|
.movemenu button.type-Flying small {
|
|
color: hsl(255,20%,41%);
|
|
}
|
|
.movemenu button.type-Flying:hover {
|
|
/* bg: 95 to 83, border: 41 */
|
|
background: hsl(255,20%,87%);
|
|
background: linear-gradient(to bottom, hsl(255,20%,94%), hsl(255,20%,77%));
|
|
border-color: hsl(255,20%,41%);
|
|
}
|
|
.movemenu button.type-Flying:active, .movemenu button.type-Flying.pressed {
|
|
/* bg: 83 to 88, border: 41 */
|
|
background: hsl(255,20%,77%);
|
|
background: linear-gradient(to bottom, hsl(255,20%,77%), hsl(255,20%,83%));
|
|
border-color: hsl(255,20%,41%);
|
|
}
|
|
|
|
.movemenu button.type-Poison {
|
|
/* bg: 97 to 90, border: 70 */
|
|
background: hsl(300,30%,93%);
|
|
background: linear-gradient(to bottom, hsl(300,30%,97%), hsl(300,30%,84%));
|
|
border-color: hsl(300,30%,70%);
|
|
}
|
|
.movemenu button.type-Poison small {
|
|
color: hsl(300,30%,41%);
|
|
}
|
|
.movemenu button.type-Poison:hover {
|
|
/* bg: 95 to 83, border: 41 */
|
|
background: hsl(300,30%,87%);
|
|
background: linear-gradient(to bottom, hsl(300,30%,94%), hsl(300,30%,77%));
|
|
border-color: hsl(300,30%,41%);
|
|
}
|
|
.movemenu button.type-Poison:active, .movemenu button.type-Poison.pressed {
|
|
/* bg: 83 to 88, border: 41 */
|
|
background: hsl(300,30%,77%);
|
|
background: linear-gradient(to bottom, hsl(300,30%,77%), hsl(300,30%,83%));
|
|
border-color: hsl(300,30%,41%);
|
|
}
|
|
|
|
.movemenu button.type-Ground {
|
|
/* bg: 97 to 90, border: 70 */
|
|
background: hsl(44,27%,93%);
|
|
background: linear-gradient(to bottom, hsl(44,27%,97%), hsl(44,27%,84%));
|
|
border-color: hsl(44,27%,70%);
|
|
}
|
|
.movemenu button.type-Ground small {
|
|
color: hsl(44,27%,41%);
|
|
}
|
|
.movemenu button.type-Ground:hover {
|
|
/* bg: 95 to 83, border: 41 */
|
|
background: hsl(44,27%,87%);
|
|
background: linear-gradient(to bottom, hsl(44,27%,94%), hsl(44,27%,77%));
|
|
border-color: hsl(44,27%,41%);
|
|
}
|
|
.movemenu button.type-Ground:active, .movemenu button.type-Ground.pressed {
|
|
/* bg: 83 to 88, border: 41 */
|
|
background: hsl(44,27%,77%);
|
|
background: linear-gradient(to bottom, hsl(44,27%,77%), hsl(44,27%,83%));
|
|
border-color: hsl(44,27%,41%);
|
|
}
|
|
|
|
.movemenu button.type-Rock {
|
|
/* bg: 97 to 90, border: 70 */
|
|
background: hsl(49,35%,93%);
|
|
background: linear-gradient(to bottom, hsl(49,35%,97%), hsl(49,35%,84%));
|
|
border-color: hsl(49,35%,70%);
|
|
}
|
|
.movemenu button.type-Rock small {
|
|
color: hsl(49,35%,41%);
|
|
}
|
|
.movemenu button.type-Rock:hover {
|
|
/* bg: 95 to 83, border: 41 */
|
|
background: hsl(49,35%,87%);
|
|
background: linear-gradient(to bottom, hsl(49,35%,94%), hsl(49,35%,77%));
|
|
border-color: hsl(49,35%,41%);
|
|
}
|
|
.movemenu button.type-Rock:active, .movemenu button.type-Rock.pressed {
|
|
/* bg: 83 to 88, border: 41 */
|
|
background: hsl(49,35%,77%);
|
|
background: linear-gradient(to bottom, hsl(49,35%,77%), hsl(49,35%,83%));
|
|
border-color: hsl(49,35%,41%);
|
|
}
|
|
|
|
.movemenu button.type-Bug {
|
|
/* bg: 97 to 90, border: 70 */
|
|
background: hsl(66,42%,93%);
|
|
background: linear-gradient(to bottom, hsl(66,42%,97%), hsl(66,42%,84%));
|
|
border-color: hsl(66,42%,70%);
|
|
}
|
|
.movemenu button.type-Bug small {
|
|
color: hsl(66,42%,41%);
|
|
}
|
|
.movemenu button.type-Bug:hover {
|
|
/* bg: 95 to 83, border: 41 */
|
|
background: hsl(66,42%,87%);
|
|
background: linear-gradient(to bottom, hsl(66,42%,94%), hsl(66,42%,77%));
|
|
border-color: hsl(66,42%,41%);
|
|
}
|
|
.movemenu button.type-Bug:active, .movemenu button.type-Bug.pressed {
|
|
/* bg: 83 to 88, border: 41 */
|
|
background: hsl(66,42%,77%);
|
|
background: linear-gradient(to bottom, hsl(66,42%,77%), hsl(66,42%,83%));
|
|
border-color: hsl(66,42%,41%);
|
|
}
|
|
|
|
.movemenu button.type-Ghost {
|
|
/* bg: 97 to 90, border: 70 */
|
|
background: hsl(262,21%,93%);
|
|
background: linear-gradient(to bottom, hsl(262,21%,97%), hsl(262,21%,84%));
|
|
border-color: hsl(262,21%,70%);
|
|
}
|
|
.movemenu button.type-Ghost small {
|
|
color: hsl(262,21%,41%);
|
|
}
|
|
.movemenu button.type-Ghost:hover {
|
|
/* bg: 95 to 83, border: 41 */
|
|
background: hsl(262,21%,87%);
|
|
background: linear-gradient(to bottom, hsl(262,21%,94%), hsl(262,21%,77%));
|
|
border-color: hsl(262,21%,41%);
|
|
}
|
|
.movemenu button.type-Ghost:active, .movemenu button.type-Ghost.pressed {
|
|
/* bg: 83 to 88, border: 41 */
|
|
background: hsl(262,21%,77%);
|
|
background: linear-gradient(to bottom, hsl(262,21%,77%), hsl(262,21%,83%));
|
|
border-color: hsl(262,21%,41%);
|
|
}
|
|
|
|
.movemenu button.type-Steel {
|
|
/* bg: 97 to 90, border: 70 */
|
|
background: hsl(240,6%,93%);
|
|
background: linear-gradient(to bottom, hsl(240,6%,97%), hsl(240,6%,84%));
|
|
border-color: hsl(240,6%,70%);
|
|
}
|
|
.movemenu button.type-Steel small {
|
|
color: hsl(240,6%,41%);
|
|
}
|
|
.movemenu button.type-Steel:hover {
|
|
/* bg: 95 to 83, border: 41 */
|
|
background: hsl(240,6%,87%);
|
|
background: linear-gradient(to bottom, hsl(240,6%,94%), hsl(240,6%,77%));
|
|
border-color: hsl(240,6%,41%);
|
|
}
|
|
.movemenu button.type-Steel:active, .movemenu button.type-Steel.pressed {
|
|
/* bg: 83 to 88, border: 41 */
|
|
background: hsl(240,6%,77%);
|
|
background: linear-gradient(to bottom, hsl(240,6%,77%), hsl(240,6%,83%));
|
|
border-color: hsl(240,6%,41%);
|
|
}
|
|
|
|
.movemenu button.type-Fire {
|
|
/* bg: 97 to 90, border: 70 */
|
|
background: hsl(25,40%,93%);
|
|
background: linear-gradient(to bottom, hsl(25,40%,97%), hsl(25,40%,84%));
|
|
border-color: hsl(25,40%,70%);
|
|
}
|
|
.movemenu button.type-Fire small {
|
|
color: hsl(25,40%,41%);
|
|
}
|
|
.movemenu button.type-Fire:hover {
|
|
/* bg: 95 to 83, border: 41 */
|
|
background: hsl(25,40%,87%);
|
|
background: linear-gradient(to bottom, hsl(25,40%,94%), hsl(25,40%,77%));
|
|
border-color: hsl(25,40%,41%);
|
|
}
|
|
.movemenu button.type-Fire:active, .movemenu button.type-Fire.pressed {
|
|
/* bg: 83 to 88, border: 41 */
|
|
background: hsl(25,40%,77%);
|
|
background: linear-gradient(to bottom, hsl(25,40%,77%), hsl(25,40%,83%));
|
|
border-color: hsl(25,40%,41%);
|
|
}
|
|
|
|
.movemenu button.type-Water {
|
|
/* bg: 97 to 90, border: 70 */
|
|
background: hsl(222,29%,93%);
|
|
background: linear-gradient(to bottom, hsl(222,29%,97%), hsl(222,29%,84%));
|
|
border-color: hsl(222,29%,70%);
|
|
}
|
|
.movemenu button.type-Water small {
|
|
color: hsl(222,29%,41%);
|
|
}
|
|
.movemenu button.type-Water:hover {
|
|
/* bg: 95 to 83, border: 41 */
|
|
background: hsl(222,29%,87%);
|
|
background: linear-gradient(to bottom, hsl(222,29%,94%), hsl(222,29%,77%));
|
|
border-color: hsl(222,29%,41%);
|
|
}
|
|
.movemenu button.type-Water:active, .movemenu button.type-Water.pressed {
|
|
/* bg: 83 to 88, border: 41 */
|
|
background: hsl(222,29%,77%);
|
|
background: linear-gradient(to bottom, hsl(222,29%,77%), hsl(222,29%,83%));
|
|
border-color: hsl(222,29%,41%);
|
|
}
|
|
|
|
.movemenu button.type-Grass {
|
|
/* bg: 97 to 90, border: 70 */
|
|
background: hsl(100,30%,93%);
|
|
background: linear-gradient(to bottom, hsl(100,30%,97%), hsl(100,30%,84%));
|
|
border-color: hsl(100,30%,70%);
|
|
}
|
|
.movemenu button.type-Grass small {
|
|
color: hsl(100,30%,41%);
|
|
}
|
|
.movemenu button.type-Grass:hover {
|
|
/* bg: 95 to 83, border: 41 */
|
|
background: hsl(100,30%,87%);
|
|
background: linear-gradient(to bottom, hsl(100,30%,94%), hsl(100,30%,77%));
|
|
border-color: hsl(100,30%,41%);
|
|
}
|
|
.movemenu button.type-Grass:active, .movemenu button.type-Grass.pressed {
|
|
/* bg: 83 to 88, border: 41 */
|
|
background: hsl(100,30%,77%);
|
|
background: linear-gradient(to bottom, hsl(100,30%,77%), hsl(100,30%,83%));
|
|
border-color: hsl(100,30%,41%);
|
|
}
|
|
|
|
.movemenu button.type-Electric {
|
|
/* bg: 97 to 90, border: 70 */
|
|
background: hsl(48,41%,93%);
|
|
background: linear-gradient(to bottom, hsl(48,41%,97%), hsl(48,41%,84%));
|
|
border-color: hsl(48,41%,70%);
|
|
}
|
|
.movemenu button.type-Electric small {
|
|
color: hsl(48,41%,41%);
|
|
}
|
|
.movemenu button.type-Electric:hover {
|
|
/* bg: 95 to 83, border: 41 */
|
|
background: hsl(48,41%,87%);
|
|
background: linear-gradient(to bottom, hsl(48,41%,94%), hsl(48,41%,77%));
|
|
border-color: hsl(48,41%,41%);
|
|
}
|
|
.movemenu button.type-Electric:active, .movemenu button.type-Electric.pressed {
|
|
/* bg: 83 to 88, border: 41 */
|
|
background: hsl(48,41%,77%);
|
|
background: linear-gradient(to bottom, hsl(48,41%,77%), hsl(48,41%,83%));
|
|
border-color: hsl(48,41%,41%);
|
|
}
|
|
|
|
.movemenu button.type-Psychic {
|
|
/* bg: 97 to 90, border: 70 */
|
|
background: hsl(342,33%,93%);
|
|
background: linear-gradient(to bottom, hsl(342,33%,97%), hsl(342,33%,84%));
|
|
border-color: hsl(342,33%,70%);
|
|
}
|
|
.movemenu button.type-Psychic small {
|
|
color: hsl(342,33%,41%);
|
|
}
|
|
.movemenu button.type-Psychic:hover {
|
|
/* bg: 95 to 83, border: 41 */
|
|
background: hsl(342,33%,87%);
|
|
background: linear-gradient(to bottom, hsl(342,33%,94%), hsl(342,33%,77%));
|
|
border-color: hsl(342,33%,41%);
|
|
}
|
|
.movemenu button.type-Psychic:active, .movemenu button.type-Psychic.pressed {
|
|
/* bg: 83 to 88, border: 41 */
|
|
background: hsl(342,33%,77%);
|
|
background: linear-gradient(to bottom, hsl(342,33%,77%), hsl(342,33%,83%));
|
|
border-color: hsl(342,33%,41%);
|
|
}
|
|
|
|
.movemenu button.type-Ice {
|
|
/* bg: 97 to 90, border: 70 */
|
|
background: hsl(180,15%,93%);
|
|
background: linear-gradient(to bottom, hsl(180,15%,97%), hsl(180,15%,84%));
|
|
border-color: hsl(180,15%,70%);
|
|
}
|
|
.movemenu button.type-Ice small {
|
|
color: hsl(180,15%,41%);
|
|
}
|
|
.movemenu button.type-Ice:hover {
|
|
/* bg: 95 to 83, border: 41 */
|
|
background: hsl(180,15%,87%);
|
|
background: linear-gradient(to bottom, hsl(180,15%,94%), hsl(180,15%,77%));
|
|
border-color: hsl(180,15%,41%);
|
|
}
|
|
.movemenu button.type-Ice:active, .movemenu button.type-Ice.pressed {
|
|
/* bg: 83 to 88, border: 41 */
|
|
background: hsl(180,15%,77%);
|
|
background: linear-gradient(to bottom, hsl(180,15%,77%), hsl(180,15%,83%));
|
|
border-color: hsl(180,15%,41%);
|
|
}
|
|
|
|
.movemenu button.type-Dragon {
|
|
/* bg: 97 to 90, border: 70 */
|
|
background: hsl(257,39%,93%);
|
|
background: linear-gradient(to bottom, hsl(257,39%,97%), hsl(257,39%,84%));
|
|
border-color: hsl(257,39%,70%);
|
|
}
|
|
.movemenu button.type-Dragon small {
|
|
color: hsl(257,39%,41%);
|
|
}
|
|
.movemenu button.type-Dragon:hover {
|
|
/* bg: 95 to 83, border: 41 */
|
|
background: hsl(257,39%,87%);
|
|
background: linear-gradient(to bottom, hsl(257,39%,94%), hsl(257,39%,77%));
|
|
border-color: hsl(257,39%,41%);
|
|
}
|
|
.movemenu button.type-Dragon:active, .movemenu button.type-Dragon.pressed {
|
|
/* bg: 83 to 88, border: 41 */
|
|
background: hsl(257,39%,77%);
|
|
background: linear-gradient(to bottom, hsl(257,39%,77%), hsl(257,39%,83%));
|
|
border-color: hsl(257,39%,41%);
|
|
}
|
|
|
|
.movemenu button.type-Dark {
|
|
/* bg: 97 to 90, border: 70 */
|
|
background: hsl(24,18%,93%);
|
|
background: linear-gradient(to bottom, hsl(24,18%,97%), hsl(24,18%,84%));
|
|
border-color: hsl(24,18%,70%);
|
|
}
|
|
.movemenu button.type-Dark small {
|
|
color: hsl(24,18%,41%);
|
|
}
|
|
.movemenu button.type-Dark:hover {
|
|
/* bg: 95 to 83, border: 41 */
|
|
background: hsl(24,18%,87%);
|
|
background: linear-gradient(to bottom, hsl(24,18%,94%), hsl(24,18%,77%));
|
|
border-color: hsl(24,18%,41%);
|
|
}
|
|
.movemenu button.type-Dark:active, .movemenu button.type-Dark.pressed {
|
|
/* bg: 83 to 88, border: 41 */
|
|
background: hsl(24,18%,77%);
|
|
background: linear-gradient(to bottom, hsl(24,18%,77%), hsl(24,18%,83%));
|
|
border-color: hsl(24,18%,41%);
|
|
}
|
|
|
|
.movemenu button.type-Fairy {
|
|
/* bg: 97 to 90, border: 70 */
|
|
background: hsl(310,41%,93%);
|
|
background: linear-gradient(to bottom, hsl(310,41%,97%), hsl(310,41%,84%));
|
|
border-color: hsl(310,41%,70%);
|
|
}
|
|
.movemenu button.type-Fairy small {
|
|
color: hsl(310,41%,41%);
|
|
}
|
|
.movemenu button.type-Fairy:hover {
|
|
/* bg: 95 to 83, border: 41 */
|
|
background: hsl(310,41%,87%);
|
|
background: linear-gradient(to bottom, hsl(310,41%,94%), hsl(310,41%,77%));
|
|
border-color: hsl(310,41%,41%);
|
|
}
|
|
.movemenu button.type-Fairy:active, .movemenu button.type-Fairy.pressed {
|
|
/* bg: 83 to 88, border: 41 */
|
|
background: hsl(310,41%,77%);
|
|
background: linear-gradient(to bottom, hsl(310,41%,77%), hsl(310,41%,83%));
|
|
border-color: hsl(310,41%,41%);
|
|
}
|