toolbar.css 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. /* toolbar */
  2. .toolbar
  3. {
  4. box-shadow: 0px 5px 3px -3px rgba(50, 50, 50, 0.3);
  5. z-index:1;
  6. overflow-x: auto;
  7. overflow-y: hidden;
  8. scrollbar-width: none;
  9. }
  10. .toolbar::-webkit-scrollbar
  11. {
  12. width: 0px;
  13. height: 0px;
  14. }
  15. .tool_buttons
  16. {
  17. white-space: nowrap;
  18. }
  19. .tool_button
  20. {
  21. color:#606060;
  22. display: inline-block;
  23. width: 40px;
  24. height: 40px;
  25. font-size:9px;
  26. font-family: Arial;
  27. vertical-align: middle;
  28. text-align: center;
  29. margin:0px;
  30. background-position: center center;
  31. background-size: 32px 32px;
  32. background-repeat: no-repeat;
  33. background-color: #f0f0f0;
  34. border:none;
  35. border-radius: 0px;
  36. box-shadow: none;
  37. }
  38. .tool_button:hover
  39. {
  40. cursor:pointer;
  41. }
  42. .change.tool_button
  43. {
  44. background-color: #f8f840;
  45. box-shadow:inset 4px 4px 4px rgba(0, 0, 0, 0.2);
  46. }
  47. .tool_button:hover
  48. {
  49. background-color: #ffc0c0;
  50. outline:none;
  51. }
  52. .tool_button:focus
  53. {
  54. border-style: dotted;
  55. border-color: black;
  56. border-width: 1px;
  57. outline: none;
  58. transition: all 0.4s ease;
  59. box-shadow: none;
  60. }
  61. .tool_button.selected,
  62. .tool_button:active
  63. {
  64. outline:none;
  65. background-color: #ff8080;
  66. box-shadow:inset 4px 4px 4px rgba(0, 0, 0, 0.2);
  67. }