buttons.php 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. <?php
  2. /**
  3. * CSS buttons
  4. *
  5. * @package Elgg.Core
  6. * @subpackage UI
  7. */
  8. ?>
  9. /* <style> /**/
  10. /* **************************
  11. BUTTONS
  12. ************************** */
  13. /* Base */
  14. .elgg-button {
  15. font-size: 14px;
  16. font-weight: bold;
  17. border-radius: 5px;
  18. width: auto;
  19. padding: 2px 4px;
  20. cursor: pointer;
  21. box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.40);
  22. background-color: #ccc;
  23. }
  24. a.elgg-button {
  25. padding: 3px 6px;
  26. }
  27. .elgg-button:hover,
  28. .elgg-button:focus {
  29. background: #eee;
  30. }
  31. /* Submit: This button should convey, "you're about to take some definitive action" */
  32. .elgg-button-submit {
  33. color: white;
  34. text-shadow: 1px 1px 0px black;
  35. text-decoration: none;
  36. border: 1px solid #4690d6;
  37. background: #4690d6 url(<?php echo elgg_get_site_url(); ?>_graphics/button_graduation.png) repeat-x left 10px;
  38. }
  39. .elgg-button-submit:hover,
  40. .elgg-button-submit:focus {
  41. border-color: #0054a7;
  42. text-decoration: none;
  43. color: white;
  44. background: #0054a7 url(<?php echo elgg_get_site_url(); ?>_graphics/button_graduation.png) repeat-x left 10px;
  45. }
  46. .elgg-button-submit.elgg-state-disabled {
  47. background: #999;
  48. border-color: #999;
  49. cursor: default;
  50. }
  51. /* Cancel: This button should convey a negative but easily reversible action (e.g., turning off a plugin) */
  52. .elgg-button-cancel {
  53. color: #333;
  54. background: #ddd url(<?php echo elgg_get_site_url(); ?>_graphics/button_graduation.png) repeat-x left 10px;
  55. border: 1px solid #999;
  56. }
  57. .elgg-button-cancel:hover,
  58. .elgg-button-cancel:focus {
  59. color: #444;
  60. background-color: #999;
  61. background-position: left 10px;
  62. text-decoration: none;
  63. }
  64. /* Action: This button should convey a normal, inconsequential action, such as clicking a link */
  65. .elgg-button-action {
  66. background: #ccc url(<?php echo elgg_get_site_url(); ?>_graphics/button_background.gif) repeat-x 0 0;
  67. border:1px solid #999;
  68. color: #333;
  69. padding: 2px 15px;
  70. text-align: center;
  71. font-weight: bold;
  72. text-decoration: none;
  73. text-shadow: 0 1px 0 white;
  74. cursor: pointer;
  75. border-radius: 5px;
  76. box-shadow: none;
  77. }
  78. .elgg-button-action:hover,
  79. .elgg-button-action:focus {
  80. background: #ccc url(<?php echo elgg_get_site_url(); ?>_graphics/button_background.gif) repeat-x 0 -15px;
  81. color: #111;
  82. text-decoration: none;
  83. border: 1px solid #999;
  84. }
  85. /* Delete: This button should convey "be careful before you click me" */
  86. .elgg-button-delete {
  87. color: #bbb;
  88. text-decoration: none;
  89. border: 1px solid #333;
  90. background: #555 url(<?php echo elgg_get_site_url(); ?>_graphics/button_graduation.png) repeat-x left 10px;
  91. text-shadow: 1px 1px 0px black;
  92. }
  93. .elgg-button-delete:hover,
  94. .elgg-button-delete:focus {
  95. color: #999;
  96. background-color: #333;
  97. background-position: left 10px;
  98. text-decoration: none;
  99. }
  100. .elgg-button-dropdown {
  101. padding:3px 6px;
  102. text-decoration:none;
  103. display:block;
  104. font-weight:bold;
  105. position:relative;
  106. margin-left:0;
  107. color: white;
  108. background-color: transparent;
  109. border:1px solid #71B9F7;
  110. border-radius:4px;
  111. box-shadow: 0 0 0;
  112. }
  113. .elgg-button-dropdown:after {
  114. content: " \25BC ";
  115. font-size:smaller;
  116. }
  117. .elgg-button-dropdown:hover {
  118. background-color:#71B9F7;
  119. text-decoration:none;
  120. }
  121. .elgg-button-dropdown:focus {
  122. text-decoration: none;
  123. }
  124. .elgg-button-dropdown.elgg-state-active {
  125. background: #ccc;
  126. outline: none;
  127. color: #333;
  128. border:1px solid #ccc;
  129. border-radius:4px 4px 0 0;
  130. }