You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

117 lines
2.4 KiB

  1. /*
  2. * # Semantic Nag
  3. * http://github.com/quirkyinc/semantic
  4. *
  5. *
  6. * Copyright 2013 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. * Released: April 17 2013
  11. */
  12. /*******************************
  13. Nag
  14. *******************************/
  15. .ui.nag {
  16. display: none;
  17. opacity: 0.95;
  18. position: absolute;
  19. top: 0px;
  20. left: 10%;
  21. z-index: 101;
  22. width: 80%;
  23. min-height: 20px;
  24. -webkit-box-sizing: border-box;
  25. -moz-box-sizing: border-box;
  26. -ms-box-sizing: border-box;
  27. box-sizing: border-box;
  28. margin: 0em;
  29. padding: 0.75em 1em;
  30. background-color: #555555;
  31. -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
  32. -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
  33. box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
  34. font-size: 1em;
  35. text-align: center;
  36. color: rgba(255, 255, 255, 0.8);
  37. -webkit-border-radius: 0px 0px 5px 5px;
  38. -moz-border-radius: 0px 0px 5px 5px;
  39. border-radius: 0px 0px 5px 5px;
  40. -webkit-transition: 0.2s background;
  41. -moz-transition: 0.2s background;
  42. -o-transition: 0.2s background;
  43. -ms-transition: 0.2s background;
  44. transition: 0.2s background;
  45. }
  46. a.ui.nag {
  47. cursor: pointer;
  48. }
  49. .ui.nag > .title {
  50. display: inline-block;
  51. margin: 0em 0.5em;
  52. color: #FFFFFF;
  53. }
  54. .ui.nag > .icon.close {
  55. cursor: pointer;
  56. opacity: 0.4;
  57. position: absolute;
  58. top: 50%;
  59. right: 1em;
  60. margin-top: -0.5em;
  61. color: #FFFFFF;
  62. -webkit-transition: 0.1s opacity;
  63. -moz-transition: 0.1s opacity;
  64. -o-transition: 0.1s opacity;
  65. -ms-transition: 0.1s opacity;
  66. transition: 0.1s opacity;
  67. }
  68. /*******************************
  69. States
  70. *******************************/
  71. /* Hover */
  72. .ui.nag:hover {
  73. opacity: 1;
  74. }
  75. .ui.nag .close:hover {
  76. opacity: 1;
  77. }
  78. /*******************************
  79. Variations
  80. *******************************/
  81. /*--------------
  82. Static
  83. ---------------*/
  84. .ui.static.nag {
  85. position: static;
  86. display: block;
  87. }
  88. /*--------------
  89. Fixed
  90. ---------------*/
  91. .ui.fixed.nag {
  92. position: fixed;
  93. }
  94. /*--------------
  95. Bottom
  96. ---------------*/
  97. .ui.nag.bottom {
  98. -webkit-border-radius: 5px 5px 0px 0px;
  99. -moz-border-radius: 5px 5px 0px 0px;
  100. border-radius: 5px 5px 0px 0px;
  101. }
  102. .ui.nag.bottom.fixed {
  103. top: auto;
  104. bottom: 0px;
  105. }
  106. /*--------------
  107. White
  108. ---------------*/
  109. .ui.nag.white {
  110. background-color: #F1F1F1;
  111. text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
  112. color: #ACACAC;
  113. }
  114. .ui.nag.white .close,
  115. .ui.nag.white .title {
  116. color: #333333;
  117. }