view/theme/quattro/quattro.less

   1 // Quattro Theme LESS file
   2
   3 /* global */
   4 body {
   5         font-family: Liberation Sans,helvetica,arial,clean,sans-serif;
   6         font-size: 10px;
   7         background-color: @BodyBackground;
   8         color: @BodyColor;
   9         margin: 50px 0px 0px 0px;
  10         display:table;
  11 }
  12
  13 .shadow(@x: 0px, @y: 5px){
  14    -webkit-box-shadow:@x @y 10px rgba(0, 0, 0, 0.7);
  15    -moz-box-shadow:@x @y 10px rgba(0, 0, 0, 0.7);
  16    box-shadow:@x @y 10px rgba(0, 0, 0, 0.7);
  17 }
  18
  19 .rounded(@tr: 5px, @tl: 5px, @bl: 5px, @br: 5px){
  20         -moz-border-radius: @arguments;
  21         -webkit-border-radius: @arguments;
  22         border-radius: @arguments;
  23 }
  24
  25 .roundbottom (@radius: 5px){ .rounded(0, 0, @radius, @radius); }
  26 .roundtop (@radius: 5px){ .rounded(@radius, @radius, 0, 0); }
  27
  28 a, a:link { color: @Link; text-decoration: none; }
  29 a:visited { color: @LinkVisited; text-decoration: none; }
  30 a:hover {color: @LinkHover; text-decoration: underline; }
  31
  32 .left { float: left; }
  33 .right { float: right; }
  34
  35 .tool {
  36         height: auto; overflow: auto;
  37         .label { float: left;}
  38         .action { float: right; }
  39 }
  40
  41 /* popup notifications */
  42 div.jGrowl div.notice {
  43         background: @NoticeBackgroundColor url("../../../images/icons/48/notice.png") no-repeat 5px center;
  44         color:  @NoticeColor;
  45         padding-left: 58px;
  46 }
  47 div.jGrowl div.info {
  48         background: @InfoBackgroundColor url("../../../images/icons/48/info.png") no-repeat 5px center;
  49         color:  @InfoColor;
  50         padding-left: 58px;
  51 }
  52
  53
  54
  55 /* header */
  56 header {
  57         position: fixed; left: 43%; right: 43%; top: 0px;
  58         margin: 0px; padding: 0px;
  59         /*width: 100%; height: 12px; */
  60         z-index: 110;
  61         color: @Grey1;
  62         #site-location {
  63                 display: none;
  64         }
  65
  66         #banner {
  67
  68             text-align: center;
  69                 width: 100%;
  70                 a, a:active, a:visited, a:link, a:hover { color: @Grey1; text-decoration: none; outline: none; vertical-align: bottom; }
  71                 #logo-img { height: 22px; margin-top:5px;}
  72                 #logo-text { font-size: 22px }
  73         }
  74 }
  75 /* nav */
  76 nav {
  77         width: 100%; height: 32px;
  78         position: fixed; left: 0px; top: 0px;
  79         padding: 0px;
  80         background-color: @NavbarBackground;
  81         color: @Grey1;
  82         z-index: 100;
  83         .shadow(0px, 0px);
  84
  85                 a, a:active, a:visited, a:link, a:hover { color: @Banner; text-decoration: none; outline: none;  }
  86
  87                 ul {
  88                         margin: 0px;
  89                         padding: 0px 20px;
  90                         li {
  91                                 list-style: none;
  92                                 margin: 0px; padding: 0px;
  93                                 float: left;
  94                                 .menu-popup{ left: 0px; right: auto; }
  95                         }
  96
  97                 }
  98
  99                 .nav-menu-icon {
 100                         position: relative;
 101                         height: 22px;
 102                         padding: 5px;
 103                         margin: 0px 10px;
 104                         .roundtop();
 105
 106                         &.selected {
 107                                 background-color: @NavbarSelectedBg;
 108                         }
 109
 110                                 img { width: 22px; height: 22px; }
 111                                 .nav-notify { top: 3px; }
 112                 }
 113
 114                 .nav-menu {
 115                         position: relative;
 116                         height: 16px;
 117                         padding: 5px;
 118                         margin: 3px 15px 0px;
 119                         font-size: 14px;
 120                         border-bottom: 3px solid @NavbarBackground;
 121                         &.selected {
 122                                 border-bottom: 3px solid @NavbarSelectedBorder;
 123                         }
 124
 125                 }
 126
 127                 .nav-notify {
 128                         display: none;
 129                         position: absolute;
 130                         background-color: @NavbarNotifBg;
 131                         .rounded();
 132                         font-size: 10px;
 133                         padding: 1px 3px;
 134                         top: 0px;
 135                         right: -10px;
 136                         min-width: 15px;
 137                         text-align: right;
 138
 139                                 &.show{ display: block; }
 140                 }
 141
 142
 143                 #nav-help-link,
 144                 #nav-search-link,
 145                 #nav-directory-link,
 146                 #nav-apps-link,
 147                 #nav-site-linkmenu {
 148                         float: right;
 149                         .menu-popup{ right: 0px; left: auto; }
 150                 }
 151
 152                 #nav-notifications-linkmenu.on .icon.s22.notify,
 153                 #nav-notifications-linkmenu.selected .icon.s22.notify { background-image: url("../../../images/icons/22/notify_on.png") }
 154                 #nav-apps-link.selected { background-color: @NavbarSelectedBg; }
 155 }
 156
 157
 158 ul.menu-popup {
 159         position: absolute;
 160         display: none;
 161         width: 10em;
 162         background: @MenuBg;
 163         color: @Menu;
 164         margin: 0px;
 165         padding: 0px;
 166         list-style: none;
 167         border: 3px solid @MenuBorder;
 168         z-index: 100000;
 169
 170         .shadow();
 171
 172                 a { display: block; color: @MenuItem; padding: 5px 10px; text-decoration: none;}
 173                 a:hover { background-color: @MenuItemHoverBg; }
 174                 .menu-sep  { border-top: 1px solid @MenuItemSeparator; }
 175                 li { float: none;  overflow: auto; height: auto; display: block; }
 176                 li img { float: left; width: 16px; height: 16px; padding-right: 5px;}
 177                 .empty {
 178                         padding: 5px;
 179                         text-align: center;
 180                         color: @MenuEmpty;
 181                 }
 182
 183 }
 184
 185 #nav-notifications-menu {
 186         width: 400px;
 187         img { float: left; margin-right: 5px; }
 188         .contactname { font-weight: bold; }
 189         .notif-when { font-size: 10px; color: @MenuItemDetail; display: block; }
 190 }
 191
 192
 193
 194
 195 /* aside */
 196 aside {
 197         display: table-cell;
 198         width: 200px;
 199         padding:0px 10px 0px 20px;
 200         border-right: 1px solid @AsideBorder;
 201
 202         .vcard {
 203                 .fn { font-size: 16px; font-weight: bold; margin-bottom: 5px; }
 204                 .title { margin-bottom: 5px; }
 205                 dl { height: auto; overflow: auto; }
 206                 dt {float: left; margin-left: 0px; width: 35%; text-align: right; color: @VCardLabelColor; }
 207                 dd {float: left; margin-left: 4px; width: 60%;}
 208
 209         }
 210
 211         #profile-extra-links {
 212                 ul { padding: 0px; margin: 0px; }
 213                 li { padding: 0px; margin: 0px; list-style: none; }
 214         }
 215
 216         #dfrn-request-link {
 217                 display: block;
 218                 .rounded();
 219                 color: @AsideConnect;
 220                 background: @AsideConnectBg url('../../../images/connect-bg.png') no-repeat left center;
 221                 font-weight: bold;
 222                 text-transform:uppercase;
 223                 padding: 4px 2px 2px 35px;
 224
 225                 &:hover { text-decoration: none; background-color: @AsideConnectHoverBg; }
 226         }
 227
 228         #profiles-menu { width: 20em; }
 229
 230 }
 231
 232 #contact-block {
 233         overflow: auto; height: auto;
 234         .contact-block-h4 { float: left; margin: 5px 0px; }
 235         .allcontact-link { float: right; margin: 5px 0px; }
 236         .contact-block-content {
 237                 clear: both;
 238                 overflow: auto; height: auto;
 239         }
 240         .contact-block-link {
 241                 float: left;
 242                 margin: 0px 2px 2px 0px;
 243         }
 244 }
 245
 246
 247
 248
 249 /* section */
 250 section {
 251         display: table-cell;
 252         width: 800px;
 253         padding:0px 20px 0px 10px;
 254 }
 255
 256