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: 12px;
   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         .icon { float: right; }
  39 }
  40
  41
  42 /* header */
  43 header {
  44         position: fixed; left: 43%; right: 43%; top: 0px;
  45         margin: 0px; padding: 0px;
  46         /*width: 100%; height: 12px; */
  47         z-index: 110;
  48         color: @Grey1;
  49         #site-location {
  50                 display: none;
  51         }
  52
  53         #banner {
  54
  55             text-align: center;
  56                 width: 100%;
  57                 a, a:active, a:visited, a:link, a:hover { color: @Grey1; text-decoration: none; outline: none; vertical-align: bottom; }
  58                 #logo-img { height: 22px; margin-top:5px;}
  59                 #logo-text { font-size: 22px }
  60         }
  61 }
  62 /* nav */
  63 nav {
  64         width: 100%; height: 32px;
  65         position: fixed; left: 0px; top: 0px;
  66         padding: 0px;
  67         background-color: @NavbarBackground;
  68         color: @Grey1;
  69         z-index: 100;
  70         .shadow(0px, 0px);
  71
  72                 a, a:active, a:visited, a:link, a:hover { color: @Banner; text-decoration: none; outline: none;  }
  73
  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                 }
  85
  86                 .nav-menu-icon {
  87                         position: relative;
  88                         height: 22px;
  89                         padding: 5px;
  90                         margin: 0px 10px;
  91                         .roundtop();
  92
  93                         &.selected {
  94                                 background-color: @NavbarSelectedBg;
  95                         }
  96
  97                                 img { width: 22px; height: 22px; }
  98                                 .nav-notify { top: 3px; }
  99                 }
 100
 101                 .nav-menu {
 102                         position: relative;
 103                         height: 16px;
 104                         padding: 5px;
 105                         margin: 3px 15px 0px;
 106                         font-size: 14px;
 107                         border-bottom: 3px solid @NavbarBackground;
 108                         &.selected {
 109                                 border-bottom: 3px solid @NavbarSelectedBorder;
 110                         }
 111
 112                 }
 113
 114                 .nav-notify {
 115                         display: none;
 116                         position: absolute;
 117                         background-color: @NavbarNotifBg;
 118                         .rounded();
 119                         font-size: 10px;
 120                         padding: 1px 3px;
 121                         top: 0px;
 122                         right: -10px;
 123                         min-width: 15px;
 124                         text-align: right;
 125
 126                                 &.show{ display: block; }
 127                 }
 128
 129
 130                 #nav-help-link,
 131                 #nav-search-link,
 132                 #nav-directory-link,
 133                 #nav-apps-link,
 134                 #nav-site-linkmenu {
 135                         float: right;
 136                         .menu-popup{ right: 0px; left: auto; }
 137                 }
 138
 139                 #nav-notifications-linkmenu.selected .icon.s22.notify { background-image: url("../../../images/icons/22/notify_on.png") }
 140                 #nav-apps-link.selected { background-color: @NavbarSelectedBg; }
 141 }
 142
 143
 144 ul.menu-popup {
 145         position: absolute;
 146         display: none;
 147         width: 10em;
 148         background: @MenuBg;
 149         color: @Menu;
 150         margin: 0px;
 151         padding: 0px;
 152         list-style: none;
 153         border: 3px solid @MenuBorder;
 154         z-index: 100000;
 155
 156         .shadow();
 157
 158                 a { display: block; color: @MenuItem; padding: 5px 10px;}
 159                 a:hover { background-color: @MenuItemHoverBg; }
 160                 .menu-sep  { border-top: 1px solid @MenuItemSeparator; }
 161                 li { float: none;  overflow: auto; height: auto; display: block; }
 162
 163                 .empty {
 164                         padding: 5px;
 165                         text-align: center;
 166                         color: @MenuEmpty;
 167                 }
 168 }
 169
 170 #nav-notifications-menu {
 171         width: 400px;
 172         img { float: left; margin-right: 5px; }
 173         .contactname { font-weight: bold; }
 174         .notif-when { font-size: 10px; color: @MenuItemDetail; display: block; }
 175 }
 176
 177
 178
 179
 180 /* aside */
 181 aside {
 182         display: table-cell;
 183         width: 200px;
 184         padding:0px 10px 0px 20px;
 185         border-right: 1px solid @AsideBorder;
 186
 187         .vcard {
 188                 .fn { font-size: 16px; font-weight: bold; margin-bottom: 5px; }
 189                 .title { margin-bottom: 5px; }
 190                 dl { height: auto; overflow: auto; }
 191                 dt {float: left; margin-left: 0px; width: 35%; }
 192                 dd {float: left; margin-left: 4px; width: 60%;}
 193
 194         }
 195
 196         #profile-extra-links {
 197                 ul { padding: 0px; margin: 0px; }
 198                 li { padding: 0px; margin: 0px; list-style: none; }
 199         }
 200
 201         #dfrn-request-link {
 202                 display: block;
 203                 .rounded();
 204                 color: @AsideConnect;
 205                 background: @AsideConnectBg url('../../../images/connect-bg.png') no-repeat left center;
 206                 font-weight: bold;
 207                 text-transform:uppercase;
 208                 padding: 4px 2px 2px 35px;
 209
 210                 &:hover { text-decoration: none; background-color: @AsideConnectHoverBg; }
 211         }
 212
 213 }
 214
 215 #contact-block {
 216         overflow: auto; height: auto;
 217         .contact-block-h4 { float: left; margin: 5px 0px; }
 218         .allcontact-link { float: right; margin: 5px 0px; }
 219         .contact-block-content {
 220                 clear: both;
 221                 overflow: auto; height: auto;
 222         }
 223         .contact-block-link {
 224                 float: left;
 225                 margin: 0px 2px 2px 0px;
 226         }
 227 }
 228
 229
 230
 231
 232 /* section */
 233 section {
 234         display: table-cell;
 235         width: 800px;
 236         padding:0px 20px 0px 10px;
 237 }
 238
 239
 240