elegant.less 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. @import "../bootstrap/less/bootstrap.less";
  2. @import "../bootstrap/less/utilities.less";
  3. @import "custom-variables.less";
  4. @import "custom-classes.less";
  5. .mixin-no-color-no-decoration() {
  6. color: inherit;
  7. text-decoration: none;
  8. }
  9. h1, h2, h3, h4, h5, h6 {
  10. .mixin-no-color-no-decoration;
  11. small {
  12. .mixin-no-color-no-decoration;
  13. }
  14. a {
  15. .mixin-no-color-no-decoration;
  16. &:hover {
  17. .mixin-no-color-no-decoration;
  18. }
  19. &:focus {
  20. .mixin-no-color-no-decoration;
  21. }
  22. }
  23. }
  24. .form-control {
  25. &:extend(.form-control);
  26. border-radius: 15px;
  27. }
  28. .navbar-form {
  29. &:extend(.navbar-form);
  30. @media (max-width: @grid-float-breakpoint) {
  31. margin-left: 0;
  32. margin-right: 0;
  33. }
  34. @media (min-width: @screen-sm-min) {
  35. .form-control {
  36. width: 100%;
  37. }
  38. }
  39. }
  40. .navbar-default {
  41. &:extend(.navbar-default);
  42. background-color: @el-navbar-top-background-color;
  43. background-image: @el-navbar-top-background-image;
  44. background-repeat: repeat-x;
  45. border: @el-navbar-top-border;
  46. box-shadow: @el-navbar-top-box-shadow;
  47. }
  48. .list-of-tags {
  49. font-family: @font-family-sans-serif;
  50. ul& {
  51. list-style: none outside none;
  52. margin: 20px 0 0;
  53. overflow: hidden;
  54. padding: 0;
  55. li {
  56. float: left;
  57. line-height: 2em;
  58. margin: 0;
  59. }
  60. a {
  61. background: @gray-lighter;
  62. border-radius: 3px;
  63. color: #222;
  64. font-size: 1em;
  65. margin: 2px;
  66. padding: 3px 6px;
  67. text-decoration: none;
  68. span {
  69. font-size: .8em;
  70. vertical-align: super;
  71. }
  72. }
  73. }
  74. }
  75. .articles-in-tag {
  76. font-family: @font-family-sans-serif;
  77. ul& {
  78. list-style: none outside none;
  79. margin: 0 0 0 5px;
  80. li {
  81. font-size: 1.1em;
  82. line-height: 1.6em;
  83. time {
  84. color: @gray-light;
  85. display: inline-block;
  86. font-family: @font-family-monospace;
  87. font-size: .9em;
  88. width: 7em;
  89. }
  90. }
  91. }
  92. }
  93. .page-header {
  94. &:extend(.page-header);
  95. color: @el-page-header-color;
  96. margin-top: 10px;
  97. padding-left: 5px;
  98. }
  99. // footer code is taken from http://getbootstrap.com/examples/sticky-footer-navbar/
  100. html {
  101. min-height: 100%;
  102. position: relative;
  103. }
  104. body {
  105. margin-bottom: @el-page-footer-height;
  106. @media (max-width: @screen-md) {
  107. margin-bottom: @el-page-footer-height + @el-page-footer-height-subset * 1;
  108. }
  109. @media (max-width: @screen-sm) {
  110. margin-bottom: @el-page-footer-height + @el-page-footer-height-subset * 2;
  111. }
  112. @media (max-width: @screen-xs) {
  113. margin-bottom: @el-page-footer-height + @el-page-footer-height-subset * 3;
  114. }
  115. }
  116. footer {
  117. align-items: center;
  118. background-color: @el-page-footer-color;
  119. border-top: @el-page-footer-border-top;//1px solid rgba(0, 0, 0, .2);
  120. bottom: 0;
  121. display: flex;
  122. height: @el-page-footer-height;
  123. @media (max-width: @screen-md) {
  124. height: @el-page-footer-height + @el-page-footer-height-subset * 1;
  125. }
  126. @media (max-width: @screen-sm) {
  127. height: @el-page-footer-height + @el-page-footer-height-subset * 2;
  128. }
  129. @media (max-width: @screen-xs) {
  130. height: @el-page-footer-height + @el-page-footer-height-subset * 3;
  131. }
  132. position: absolute;
  133. width: 100%;
  134. div {
  135. font-family: @font-family-sans-serif;
  136. font-size: 0.8em;
  137. text-align: left;
  138. &:only-child {
  139. text-align: right; // if only elegant license is present
  140. }
  141. @media (min-width: @screen-md) {
  142. &:last-child {
  143. text-align: right;
  144. }
  145. }
  146. @media (max-width: @screen-md) {
  147. &:nth-last-child(2), &:nth-last-child(3) {
  148. margin-bottom: 4px;
  149. }
  150. }
  151. }
  152. }