Simulate graph states in the browser
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

keys.css 2.4KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. /**
  2. * KEYS.css
  3. *
  4. * A simple stylesheet for rendering beautiful keyboard-style elements.
  5. *
  6. * Author: Michael Hüneburg
  7. * Website: http://michaelhue.com/keyscss
  8. * License: MIT License (see LICENSE.txt)
  9. */
  10. /* Base style, essential for every key. */
  11. kbd, .key {
  12. display: inline;
  13. display: inline-block;
  14. min-width: 1em;
  15. padding: .2em .3em;
  16. font: normal .85em/1 "Lucida Grande", Lucida, Arial, sans-serif;
  17. text-align: center;
  18. text-decoration: none;
  19. -moz-border-radius: .3em;
  20. -webkit-border-radius: .3em;
  21. border-radius: .3em;
  22. border: none;
  23. cursor: default;
  24. -moz-user-select: none;
  25. -webkit-user-select: none;
  26. user-select: none;
  27. }
  28. kbd[title], .key[title] {
  29. cursor: help;
  30. }
  31. /* Dark style for display on light background. This is the default style. */
  32. kbd, kbd.dark, .dark-keys kbd, .key, .key.dark, .dark-keys .key {
  33. background: rgb(80, 80, 80);
  34. background: -moz-linear-gradient(top, rgb(60, 60, 60), rgb(80, 80, 80));
  35. background: -webkit-gradient(linear, left top, left bottom, from(rgb(60, 60, 60)), to(rgb(80, 80, 80)));
  36. color: rgb(250, 250, 250);
  37. text-shadow: -1px -1px 0 rgb(70, 70, 70);
  38. -moz-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
  39. -webkit-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
  40. box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
  41. }
  42. /* Light style for display on dark background. */
  43. kbd.light, .light-keys kbd, .key.light, .light-keys .key {
  44. background: rgb(250, 250, 250);
  45. background: -moz-linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255));
  46. background: -webkit-gradient(linear, left top, left bottom, from(rgb(210, 210, 210)), to(rgb(255, 255, 255)));
  47. color: rgb(50, 50, 50);
  48. text-shadow: 0 0 2px rgb(255, 255, 255);
  49. -moz-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
  50. -webkit-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
  51. box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
  52. }