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.

130 lines
2.7 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: relative;
  19. top: 0px;
  20. left: 0%;
  21. z-index: 101;
  22. min-height: 0;
  23. width: 100%;
  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. line-height: 3em;
  30. padding: 0em 1em;
  31. background-color: #555555;
  32. -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
  33. -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
  34. box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
  35. font-size: 1em;
  36. text-align: center;
  37. color: rgba(255, 255, 255, 0.8);
  38. -webkit-border-radius: 0px 0px 5px 5px;
  39. -moz-border-radius: 0px 0px 5px 5px;
  40. border-radius: 0px 0px 5px 5px;
  41. -webkit-transition: 0.2s background;
  42. -moz-transition: 0.2s background;
  43. -o-transition: 0.2s background;
  44. -ms-transition: 0.2s background;
  45. transition: 0.2s background;
  46. }
  47. a.ui.nag {
  48. cursor: pointer;
  49. }
  50. .ui.nag > .title {
  51. display: inline-block;
  52. margin: 0em 0.5em;
  53. color: #FFFFFF;
  54. }
  55. .ui.nag > .close.icon {
  56. cursor: pointer;
  57. opacity: 0.4;
  58. position: absolute;
  59. top: 50%;
  60. right: 1em;
  61. margin-top: -0.5em;
  62. color: #FFFFFF;
  63. -webkit-transition: 0.1s opacity;
  64. -moz-transition: 0.1s opacity;
  65. -o-transition: 0.1s opacity;
  66. -ms-transition: 0.1s opacity;
  67. transition: 0.1s opacity;
  68. }
  69. /*******************************
  70. States
  71. *******************************/
  72. /* Hover */
  73. .ui.nag:hover {
  74. opacity: 1;
  75. }
  76. .ui.nag .close:hover {
  77. opacity: 1;
  78. }
  79. /*******************************
  80. Variations
  81. *******************************/
  82. /*--------------
  83. Static
  84. ---------------*/
  85. .ui.overlay.nag {
  86. position: absolute;
  87. display: block;
  88. }
  89. /*--------------
  90. Fixed
  91. ---------------*/
  92. .ui.fixed.nag {
  93. position: fixed;
  94. }
  95. /*--------------
  96. Bottom
  97. ---------------*/
  98. .ui.botton.nag {
  99. -webkit-border-radius: 5px 5px 0px 0px;
  100. -moz-border-radius: 5px 5px 0px 0px;
  101. border-radius: 5px 5px 0px 0px;
  102. }
  103. .ui.fixed.bottom.nags,
  104. .ui.fixed.bottom.nag {
  105. top: auto;
  106. bottom: 0px;
  107. }
  108. /*--------------
  109. White
  110. ---------------*/
  111. .ui.white.nags .nag,
  112. .ui.white.nag {
  113. background-color: #F1F1F1;
  114. text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
  115. color: #ACACAC;
  116. }
  117. .ui.white.nags .nag .close,
  118. .ui.white.nags .nag .title,
  119. .ui.white.nag .close,
  120. .ui.white.nag .title {
  121. color: #333333;
  122. }
  123. /*******************************
  124. Groups
  125. *******************************/
  126. .ui.nags .nag {
  127. -webkit-border-radius: 0px;
  128. -moz-border-radius: 0px;
  129. border-radius: 0px;
  130. }