Friendica Communications Platform (please note that this is a clone of the repository at github, issues are handled there) https://friendi.ca
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.
 
 
 
 
 
 

244 lines
5.0 KiB

  1. // Quattro Theme LESS file
  2. /* global */
  3. body {
  4. font-family: Liberation Sans,helvetica,arial,clean,sans-serif;
  5. font-size: 12px;
  6. background-color: @BodyBackground;
  7. color: @BodyColor;
  8. margin: 50px 0px 0px 0px;
  9. display:table;
  10. }
  11. .shadow(@x: 0px, @y: 5px){
  12. -webkit-box-shadow:@x @y 10px rgba(0, 0, 0, 0.7);
  13. -moz-box-shadow:@x @y 10px rgba(0, 0, 0, 0.7);
  14. box-shadow:@x @y 10px rgba(0, 0, 0, 0.7);
  15. }
  16. .rounded(@tr: 5px, @tl: 5px, @bl: 5px, @br: 5px){
  17. -moz-border-radius: @arguments;
  18. -webkit-border-radius: @arguments;
  19. border-radius: @arguments;
  20. }
  21. .roundbottom (@radius: 5px){ .rounded(0, 0, @radius, @radius); }
  22. .roundtop (@radius: 5px){ .rounded(@radius, @radius, 0, 0); }
  23. a, a:link { color: @Link; text-decoration: none; }
  24. a:visited { color: @LinkVisited; text-decoration: none; }
  25. a:hover {color: @LinkHover; text-decoration: underline; }
  26. .left { float: left; }
  27. .right { float: right; }
  28. /* icons */
  29. .icons(@size: 22) {
  30. &.notify { background-image: url("../../../images/icons/notify_off_@{size}.png"); }
  31. &.gear { background-image: url("../../../images/icons/gear_@{size}.png"); }
  32. }
  33. .icon {
  34. background-color: transparent ;
  35. background-repeat: no-repeat;
  36. background-position: center center;
  37. display: block;
  38. overflow: hidden;
  39. text-indent: -9999px;
  40. &.s22 {
  41. width:22px; height: 22px;
  42. padding: 1px;
  43. .icons(22);
  44. }
  45. }
  46. /* header */
  47. header {
  48. position: fixed; left: 43%; right: 43%; top: 0px;
  49. margin: 0px; padding: 0px;
  50. /*width: 100%; height: 12px; */
  51. z-index: 110;
  52. color: @Grey1;
  53. #site-location {
  54. display: none;
  55. }
  56. #banner {
  57. text-align: center;
  58. width: 100%;
  59. a, a:active, a:visited, a:link, a:hover { color: @Grey1; text-decoration: none; outline: none; vertical-align: bottom; }
  60. #logo-img { height: 22px; margin-top:5px;}
  61. #logo-text { font-size: 22px }
  62. }
  63. }
  64. /* nav */
  65. nav {
  66. width: 100%; height: 32px;
  67. position: fixed; left: 0px; top: 0px;
  68. padding: 0px;
  69. background-color: @NavbarBackground;
  70. color: @Grey1;
  71. z-index: 100;
  72. .shadow(0px, 0px);
  73. a, a:active, a:visited, a:link, a:hover { color: @Banner; text-decoration: none; outline: none; }
  74. ul {
  75. margin: 0px;
  76. padding: 0px 20px;
  77. li {
  78. list-style: none;
  79. margin: 0px; padding: 0px;
  80. float: left;
  81. .menu-popup{ left: 0px; right: auto; }
  82. }
  83. }
  84. .nav-menu-icon {
  85. position: relative;
  86. height: 22px;
  87. padding: 5px;
  88. margin: 0px 10px;
  89. .roundtop();
  90. &.selected {
  91. background-color: @NavbarSelectedBg;
  92. }
  93. img { width: 22px; height: 22px; }
  94. .nav-notify { top: 3px; }
  95. }
  96. .nav-menu {
  97. position: relative;
  98. height: 16px;
  99. padding: 5px;
  100. margin: 3px 15px 0px;
  101. font-size: 14px;
  102. border-bottom: 3px solid @NavbarBackground;
  103. &.selected {
  104. border-bottom: 3px solid @NavbarSelectedBorder;
  105. }
  106. }
  107. .nav-notify {
  108. display: none;
  109. position: absolute;
  110. background-color: @NavbarNotifBg;
  111. .rounded();
  112. font-size: 10px;
  113. padding: 1px 3px;
  114. top: 0px;
  115. right: -10px;
  116. min-width: 15px;
  117. text-align: right;
  118. &.show{ display: block; }
  119. }
  120. #nav-help-link,
  121. #nav-search-link,
  122. #nav-directory-link,
  123. #nav-apps-link,
  124. #nav-site-linkmenu {
  125. float: right;
  126. .menu-popup{ right: 0px; left: auto; }
  127. }
  128. #nav-notifications-linkmenu.selected .icon.s22.notify { background-image: url("../../../images/icons/notify_on_22.png") }
  129. #nav-apps-link.selected { background-color: @NavbarSelectedBg; }
  130. }
  131. ul.menu-popup {
  132. position: absolute;
  133. display: none;
  134. width: 10em;
  135. background: @MenuBg;
  136. color: @Menu;
  137. margin: 0px;
  138. padding: 0px;
  139. list-style: none;
  140. border: 3px solid @MenuBorder;
  141. z-index: 100000;
  142. .shadow();
  143. a { display: block; color: @MenuItem; padding: 5px 10px;}
  144. a:hover { background-color: @MenuItemHoverBg; }
  145. .menu-sep { border-top: 1px solid @MenuItemSeparator; }
  146. li { float: none; overflow: auto; height: auto; display: block; }
  147. .empty {
  148. padding: 5px;
  149. text-align: center;
  150. color: @MenuEmpty;
  151. }
  152. }
  153. #nav-notifications-menu {
  154. width: 400px;
  155. img { float: left; margin-right: 5px; }
  156. .contactname { font-weight: bold; }
  157. .notif-when { font-size: 10px; color: @MenuItemDetail; display: block; }
  158. }
  159. /* aside */
  160. aside {
  161. display: table-cell;
  162. width: 200px;
  163. padding:0px 10px 0px 20px;
  164. border-right: 1px solid @AsideBorder;
  165. .vcard {
  166. .fn { font-size: 16px; font-weight: bold; margin-bottom: 5px; }
  167. .title { margin-bottom: 5px; }
  168. dl { height: auto; overflow: auto; }
  169. dt {float: left; margin-left: 0px; width: 35%; }
  170. dd {float: left; margin-left: 4px; width: 60%;}
  171. }
  172. #profile-extra-links {
  173. ul { padding: 0px; margin: 0px; }
  174. li { padding: 0px; margin: 0px; list-style: none; }
  175. }
  176. #dfrn-request-link {
  177. display: block;
  178. .rounded();
  179. color: @AsideConnect;
  180. background: @AsideConnectBg url('../../../images/connect-bg.png') no-repeat left center;
  181. font-weight: bold;
  182. text-transform:uppercase;
  183. padding: 4px 2px 2px 35px;
  184. &:hover { text-decoration: none; background-color: @AsideConnectHoverBg; }
  185. }
  186. }
  187. /* section */
  188. section {
  189. display: table-cell;
  190. width: 800px;
  191. padding:0px 20px 0px 10px;
  192. }