Commit c7782905e06050c279f7e4d9c450c963455e895c
1 parent
2518f3d9
Exists in
spb-release/3.0
New header
Signed-off-by: Charles Oliveira <18oliveira.charles@gmail.com> Signed-off-by: Melissa Wen <melissa.srw@gmail.com> Signed-off-by: Peter Lima <peterlima@gmail.com> Signed-off-by: Sergio Oliveira <sergio@tracy.com.br>
Showing
8 changed files
with
508 additions
and
249 deletions
Show diff stats
colab/static/css/header.css
| 1 | -#barra-brasil #wrapper-barra-brasil .brasil-flag{ | ||
| 2 | - height: auto; | 1 | +header #header { |
| 2 | + font-size: 62.5%; | ||
| 3 | + font-family: "open_sansregular", Arial, Helvetica, sans-serif; | ||
| 4 | + padding: 14px 0 0 0; | ||
| 5 | + background-color: #EAEDF0; | ||
| 6 | + color: #fff; | ||
| 7 | + min-width: 960px; | ||
| 3 | } | 8 | } |
| 4 | 9 | ||
| 5 | -#first-nav{ | ||
| 6 | - background-color:#f0f2f1; | ||
| 7 | - background-color:#ecedf1; | ||
| 8 | - background-image: -webkit-radial-gradient(center, ellipse cover, #f0f2f1 1%, #ecedf1 100%) | 10 | +header #header * { |
| 11 | + margin: 0; | ||
| 12 | + padding: 0; | ||
| 13 | + list-style: none; | ||
| 9 | } | 14 | } |
| 10 | 15 | ||
| 11 | -/* Accessibility */ | 16 | +header #header a { |
| 17 | + text-decoration: none; | ||
| 18 | +} | ||
| 12 | 19 | ||
| 13 | -#accessibility { | ||
| 14 | - font-family: arial; | ||
| 15 | - font-size: 10px; | 20 | +header #header > div { |
| 21 | + position: relative; | ||
| 22 | + margin: 0 auto; | ||
| 23 | + max-width: 960px; | ||
| 24 | + display: block; | ||
| 16 | } | 25 | } |
| 17 | 26 | ||
| 18 | -#accessibility a{ | ||
| 19 | - padding-left: 4px; | ||
| 20 | - padding-right: 4px; | ||
| 21 | - color: #2c66ce; | 27 | +header #header * li { |
| 28 | + display: inline; | ||
| 22 | } | 29 | } |
| 23 | 30 | ||
| 24 | -#accessibility span{ | ||
| 25 | - background-color: #2c66ce; | 31 | +header #accessibility { |
| 32 | + /*font-size: 1.1em;*/ | ||
| 33 | + font-size: 1.2em; | ||
| 34 | + font-family: Arial, Helvetica, sans-serif; | ||
| 35 | + display: block; | ||
| 36 | + float: left; | ||
| 37 | + width: 45%; | ||
| 38 | + margin-bottom: 18px; | ||
| 26 | } | 39 | } |
| 27 | 40 | ||
| 28 | -#colab-portal-siteactions{ | ||
| 29 | - font-size: 10px; | ||
| 30 | - text-align: center; | 41 | +header #accessibility a { |
| 42 | + color: #2C65CD; | ||
| 43 | + margin-right: 9px; | ||
| 31 | } | 44 | } |
| 32 | 45 | ||
| 33 | -#colab-portal-siteactions li{ | ||
| 34 | - display: inline-block; | 46 | +header #accessibility span { |
| 47 | + padding: 0 3px; | ||
| 48 | + background: #2C65CD; | ||
| 49 | + color: #fff; | ||
| 35 | } | 50 | } |
| 36 | 51 | ||
| 37 | -#colab-portal-siteactions a { | ||
| 38 | - color:#2c66ce; | 52 | +header #second-nav { |
| 53 | + float: right; | ||
| 54 | +} | ||
| 55 | + | ||
| 56 | +header #portal-siteactions, | ||
| 57 | +header #portal-language { | ||
| 58 | + border-bottom: 1px dotted #2C65CD; | ||
| 59 | +} | ||
| 60 | + | ||
| 61 | +header #portal-siteactions #siteaction-accessibility a { | ||
| 62 | + padding-left: 0; | ||
| 63 | +} | ||
| 64 | + | ||
| 65 | +header #portal-siteactions { | ||
| 66 | + display: block; | ||
| 67 | + float: left; | ||
| 68 | + clear: none; | ||
| 69 | + padding-bottom: 2px; | ||
| 70 | + font-size: 1.3em; | ||
| 71 | +} | ||
| 72 | + | ||
| 73 | +header #portal-siteactions a { | ||
| 74 | + padding: 4px 0 4px 17px; | ||
| 39 | text-decoration: none; | 75 | text-decoration: none; |
| 40 | text-transform: uppercase; | 76 | text-transform: uppercase; |
| 41 | - font-family: 'Open Sans Regular', Arial, Helvetica, sans-serif; | ||
| 42 | - padding-right: 0; | ||
| 43 | - padding-left: 10px; | ||
| 44 | } | 77 | } |
| 45 | 78 | ||
| 46 | -#colab-portal-siteactions #colab-siteaction-mapadosite a{ | ||
| 47 | - padding-right: 0; | 79 | +header #portal-siteactions a, |
| 80 | +header #portal-siteactions a:hover, | ||
| 81 | +header #portal-language a, | ||
| 82 | +header #portal-language a:hover { | ||
| 83 | + color: #2C65CD; | ||
| 48 | } | 84 | } |
| 49 | 85 | ||
| 50 | -#colab-portal-siteactions a:hover { | ||
| 51 | - color: #03316f; | 86 | +header #login-menu #user-menu .user { |
| 87 | + position: relative; | ||
| 88 | + top: -6px; | ||
| 52 | } | 89 | } |
| 53 | 90 | ||
| 54 | -#colab-portal-siteactions span { | ||
| 55 | - border-bottom: 1px dotted #2c66ce; | 91 | +header #login-menu #user-menu .user img { |
| 92 | + width: 32px; | ||
| 93 | + height: 32px; | ||
| 94 | + border-radius: 90%; | ||
| 56 | } | 95 | } |
| 57 | 96 | ||
| 58 | -/* User-bar */ | 97 | +header #login-menu #user-menu .user .carret { |
| 98 | + vertical-align: middle; | ||
| 99 | +} | ||
| 100 | + | ||
| 101 | +header #login-menu { | ||
| 102 | + float:right; | ||
| 103 | + display: block; | ||
| 104 | + clear: none; | ||
| 105 | + padding-bottom: 2px; | ||
| 106 | + font-size: 1.3em; | ||
| 107 | + padding-left: 17px; | ||
| 108 | +} | ||
| 109 | + | ||
| 110 | +header #login-menu a { | ||
| 111 | + font-size: 12px; | ||
| 112 | + padding: 5px 10px; | ||
| 113 | + color: #2C65CD; | ||
| 114 | +} | ||
| 59 | 115 | ||
| 60 | -#user-menu a.btn { | ||
| 61 | - font-size: 13px; | ||
| 62 | - padding: 10px; | ||
| 63 | - background-color: #2c66ce; | ||
| 64 | - border-color: #2c66ce; | 116 | +header #login-menu a.btn-spb-profile { |
| 117 | + background-color: #2C65CD; | ||
| 118 | + border-color: #2C65CD; | ||
| 65 | color: #FFF; | 119 | color: #FFF; |
| 66 | } | 120 | } |
| 67 | 121 | ||
| 68 | -#user-menu .dropdown-menu{ | ||
| 69 | - border-radius: 5px; | 122 | +header #login-menu .login-item a { |
| 123 | + text-transform: uppercase; | ||
| 124 | + font-size: 11px; | ||
| 70 | } | 125 | } |
| 71 | 126 | ||
| 72 | -#user-menu .dropdown-toggle img{ | ||
| 73 | - border-radius: 20px; | 127 | +header #login-menu-box { |
| 128 | + right: 0; | ||
| 129 | + left: auto; | ||
| 74 | } | 130 | } |
| 75 | 131 | ||
| 76 | -#user-menu .user .caret, #menu-spb a .caret { | ||
| 77 | - border-left: 5px solid transparent; | ||
| 78 | - border-right: 5px solid transparent; | ||
| 79 | - border-top: 5px solid #2c66ce; | 132 | +header #portal-searchbox { |
| 133 | + border: 1px solid #CCC; | ||
| 134 | + float: right; | ||
| 135 | + clear: right; | ||
| 136 | + margin: 14px 0 0 0; | ||
| 137 | + padding: 0px 2px; | ||
| 138 | + -webkit-border-radius: 5px; | ||
| 139 | + -moz-border-radius: 5px; | ||
| 140 | + border-radius: 5px; | ||
| 141 | + background: #fff; | ||
| 142 | + text-align: right; | ||
| 143 | + font-size: 1em; | ||
| 144 | + color: #777; | ||
| 80 | } | 145 | } |
| 81 | 146 | ||
| 82 | -#user-menu a:hover .caret, #menu-spb a:hover .caret, #user-menu a:focus .caret, #menu-spb a:focus .caret{ | ||
| 83 | - border-left: 5px solid transparent; | ||
| 84 | - border-right: 5px solid transparent; | ||
| 85 | - border-top: 5px solid #03316f; | 147 | +header #portal-searchbox form { |
| 148 | + white-space: nowrap; | ||
| 149 | +} | ||
| 86 | 150 | ||
| 151 | +header .LSBox { | ||
| 152 | + margin: 0; | ||
| 153 | + padding: 0; | ||
| 154 | + border: none; | ||
| 87 | } | 155 | } |
| 88 | 156 | ||
| 89 | -/* Brand and search */ | 157 | +header fieldset, header .editionComment { |
| 158 | + line-height: 1.5em; | ||
| 159 | + margin: 1em 0; | ||
| 160 | + padding: 0 1em 1em; | ||
| 161 | + width: auto; | ||
| 162 | +} | ||
| 90 | 163 | ||
| 91 | -#spb-logo-search { | ||
| 92 | - margin-top: 10px; | ||
| 93 | - margin-bottom: 10px; | 164 | +header .hiddenStructure { |
| 165 | + display: block; | ||
| 166 | + background: transparent; | ||
| 167 | + background-image: none; | ||
| 168 | + border: none; | ||
| 169 | + height: 0.1em; | ||
| 170 | + overflow: hidden; | ||
| 171 | + padding: 0; | ||
| 172 | + margin: -0.1em 0 0 -0.1em; | ||
| 173 | + width: 1px; | ||
| 94 | } | 174 | } |
| 95 | 175 | ||
| 96 | -#spb-logo-search .logo-box{ | ||
| 97 | - padding-bottom: 20px; | 176 | +header #portal-searchbox label { |
| 177 | + font-weight: normal; | ||
| 178 | + cursor: default; | ||
| 98 | } | 179 | } |
| 99 | 180 | ||
| 100 | -#portal-logo img{ | ||
| 101 | - max-height: 50px; | 181 | +header #portal-searchbox .searchField { |
| 182 | + padding: 0.4em 0.35em 0 0.35em; | ||
| 183 | + width: 192px; | ||
| 184 | + border: none; | ||
| 185 | + border-right: none; | ||
| 186 | + font-size: 1.4em; | ||
| 187 | + font-family: "open_sansregular", Arial, Helvetica, sans-serif; | ||
| 102 | } | 188 | } |
| 103 | 189 | ||
| 104 | -.box-search{ | ||
| 105 | - margin: auto; | ||
| 106 | - margin-top: 10px; | 190 | +header #header input.searchButton { |
| 191 | + background-position: 0px 1px; | ||
| 192 | + padding: 5px 10px 6px 15px; | ||
| 193 | + border: none; | ||
| 194 | + background-color: transparent; | ||
| 195 | + text-indent: -2000px; | ||
| 107 | } | 196 | } |
| 108 | 197 | ||
| 109 | -#search-form .form-group{ | 198 | +header #logo { |
| 110 | float: left; | 199 | float: left; |
| 200 | + padding: 0; | ||
| 201 | + width: 70%; | ||
| 202 | + min-height: 101px; | ||
| 111 | } | 203 | } |
| 112 | 204 | ||
| 113 | -#search-form button.btn.btn-default{ | ||
| 114 | - float: left; | ||
| 115 | - border-radius: 0px 5px 5px 0px; | ||
| 116 | - border-left: none; | ||
| 117 | - color: #2c66ce; | 205 | +header #logo span { |
| 206 | + position: absolute; | ||
| 207 | + display: block; | ||
| 208 | + line-height: 0.5em; | ||
| 118 | } | 209 | } |
| 119 | 210 | ||
| 120 | -#search-form button.btn.btn-default:hover{ | ||
| 121 | - background: #fff; | ||
| 122 | - border: 1px solid #cccccc; | ||
| 123 | - border-left: none; | ||
| 124 | - color: #03316f; | 211 | +header #logo a, header #logo #portal-title { |
| 212 | + color: #2C65CD; | ||
| 125 | } | 213 | } |
| 126 | 214 | ||
| 127 | -#search-form #header-searchbox{ | ||
| 128 | - width: 100%; | ||
| 129 | - border-radius: 5px 0px 0px 5px; | ||
| 130 | - background: #fff; | 215 | +header #portal-title { |
| 216 | + font-size: 4.4em; | ||
| 217 | + font-family: "open_sansextrabold", Arial, Helvetica, sans-serif; | ||
| 218 | + margin-top: 13px; | ||
| 131 | } | 219 | } |
| 132 | 220 | ||
| 133 | -/* Menu */ | 221 | +header #portal-title-1, |
| 222 | +header #portal-description { | ||
| 223 | + font-family: "open_sansregular", Arial, Helvetica, sans-serif; | ||
| 224 | +} | ||
| 134 | 225 | ||
| 135 | -#second-nav { | ||
| 136 | - background-color:#CFD0D2; | ||
| 137 | - min-height: 30px; | ||
| 138 | - line-height: 30px; | ||
| 139 | - font-size: 12px; | ||
| 140 | - border-radius: 0; | ||
| 141 | - margin-bottom: 0; | 226 | +header #portal-description { |
| 227 | + font-size: 1.6em; | ||
| 228 | + margin-top: 10px; | ||
| 229 | + letter-spacing: 0.2px; | ||
| 142 | } | 230 | } |
| 143 | 231 | ||
| 144 | -#second-nav a { | ||
| 145 | - color: #2c66ce; | ||
| 146 | - font-family: 'Open Sans', Arial, Helvetica, sans-serif; | 232 | +header #portal-title-1 { |
| 233 | + /*font-size: 1.2em;*/ | ||
| 234 | + font-size: 1.4em; | ||
| 147 | } | 235 | } |
| 148 | 236 | ||
| 149 | -#menu-spb > li > a{ | ||
| 150 | - padding: 5px 15px 5px 5px; | 237 | +header #social-icons { |
| 238 | + float: right; | ||
| 239 | + clear: right; | ||
| 240 | + margin: 13px 0 22px 0; | ||
| 241 | + display: none; | ||
| 151 | } | 242 | } |
| 152 | 243 | ||
| 153 | -#menu-spb ul.dropdown-menu { | ||
| 154 | - background: #CFD0D2; | ||
| 155 | - border-color: #CFD0D2; | ||
| 156 | - box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); | ||
| 157 | - font-size: 12px; | 244 | +header #social-icons a, |
| 245 | +header #header input.searchButton { | ||
| 246 | + background-image: url("../img/sprite.png"); | ||
| 158 | } | 247 | } |
| 159 | 248 | ||
| 160 | -#menu-spb ul.dropdown-menu a{ | ||
| 161 | - color: #03316f; | 249 | +header #social-icons a { |
| 250 | + display: block; | ||
| 251 | + overflow: hidden; | ||
| 252 | + margin: 0 0 0 2px; | ||
| 253 | + width: 20px; | ||
| 254 | + height: 20px; | ||
| 255 | + border: none; | ||
| 256 | + text-indent: 100%; | ||
| 257 | + white-space: nowrap; | ||
| 258 | + opacity: .85; | ||
| 259 | + filter: alpha(opacity=85); | ||
| 260 | + border-radius: 4px; | ||
| 162 | } | 261 | } |
| 163 | 262 | ||
| 164 | -#menu-spb ul.dropdown-menu a:hover{ | ||
| 165 | - color:#2c66ce; | 263 | +header #portalredes-facebook a { |
| 264 | + background-position: -80px -25px; | ||
| 166 | } | 265 | } |
| 167 | 266 | ||
| 168 | -#menu-spb .open > a, #menu-spb .open > a:hover, #menu-spb .open > a:focus{ | ||
| 169 | - background: none; | 267 | +header #portalredes-googleplus a { |
| 268 | + background-position: -130px 0; | ||
| 170 | } | 269 | } |
| 171 | 270 | ||
| 172 | -#quick-links{ | ||
| 173 | - padding-right: 10px | 271 | +header #portalredes-instagram a { |
| 272 | + background-position: 69px -49px; | ||
| 174 | } | 273 | } |
| 175 | 274 | ||
| 176 | -#quick-links > li > a{ | ||
| 177 | - margin: 5px 0; | ||
| 178 | - padding: 0 15px; | ||
| 179 | - border-right: 1px solid #2c66ce; | 275 | +header #portalredes-twitter a { |
| 276 | + background-position: -155px -25px; | ||
| 180 | } | 277 | } |
| 181 | 278 | ||
| 182 | -#quick-links li:last-child > a{ | ||
| 183 | - padding-right: 5px; | ||
| 184 | - border-right: none; | 279 | +header #portalredes-youtube a { |
| 280 | + background-position: -130px -25px; | ||
| 185 | } | 281 | } |
| 186 | 282 | ||
| 187 | -#quick-links a:hover, #menu-spb a:focus , #menu-spb a:hover { | ||
| 188 | - color: #03316f; | ||
| 189 | - background: none; | 283 | +header #portalredes-soundcloud a { |
| 284 | + background-position: 20px 0; | ||
| 190 | } | 285 | } |
| 191 | 286 | ||
| 192 | -/* Menu collapsed elements */ | ||
| 193 | -.navbar-toggle .icon-bar{ | ||
| 194 | - background-color: #2c66ce; | ||
| 195 | - margin: auto; | 287 | +header #portalredes-slideshare a { |
| 288 | + background-position: 45px 0; | ||
| 196 | } | 289 | } |
| 197 | 290 | ||
| 198 | -.navbar-header.logo .navbar-toggle{ | ||
| 199 | - float: left; | ||
| 200 | - margin: 0; | 291 | +header #portalredes-rss a { |
| 292 | + background-position: 145px -25px; | ||
| 201 | } | 293 | } |
| 202 | 294 | ||
| 203 | -#quick-links-sm{ | ||
| 204 | - list-style: none; | ||
| 205 | - float: right; | 295 | +header .thumbnail { |
| 296 | + min-width: 80px; | ||
| 297 | + max-width: 80px; | ||
| 298 | +} | ||
| 299 | + | ||
| 300 | +header #social-icons li { | ||
| 301 | + display: inline-block; | ||
| 302 | +} | ||
| 303 | + | ||
| 304 | +header #sobre { | ||
| 305 | + background: #D9DBDE; | ||
| 306 | + clear: both; | ||
| 206 | margin: 0; | 307 | margin: 0; |
| 308 | + padding: 6px 0 5px 0; | ||
| 309 | + max-width: 100% !important; | ||
| 310 | + position: relative; | ||
| 311 | +} | ||
| 312 | + | ||
| 313 | +header #sobre ul { | ||
| 314 | + margin: 0 auto; | ||
| 315 | + max-width: 960px; | ||
| 316 | + text-align: right; | ||
| 317 | +} | ||
| 318 | + | ||
| 319 | +header #sobre a { | ||
| 320 | + color: #2C65CD; | ||
| 321 | + font-size: 1.4em; | ||
| 207 | } | 322 | } |
| 208 | 323 | ||
| 209 | -#quick-links-sm li{ | 324 | +header #sobre a .caret { |
| 325 | + border-top: 4px dashed #2C65CD; | ||
| 326 | +} | ||
| 327 | + | ||
| 328 | +header #sobre .softwarepublico-item .dropdown-menu { | ||
| 329 | + margin-top: 10px; | ||
| 330 | +} | ||
| 331 | + | ||
| 332 | + | ||
| 333 | +header #sobre .softwarepublico-item .dropdown-menu:before, | ||
| 334 | +header #second-nav .softwarepublico-item .dropdown-menu:before { | ||
| 335 | + position: absolute; | ||
| 336 | + top: -7px; | ||
| 337 | + left: 20px; | ||
| 210 | display: inline-block; | 338 | display: inline-block; |
| 339 | + border-right: 7px solid transparent; | ||
| 340 | + border-bottom: 7px solid #ccc; | ||
| 341 | + border-left: 7px solid transparent; | ||
| 342 | + border-bottom-color: rgba(0, 0, 0, 0.2); | ||
| 343 | + content: ''; | ||
| 344 | +} | ||
| 345 | + | ||
| 346 | +header #sobre .softwarepublico-item .dropdown-menu:after, | ||
| 347 | +header #second-nav .softwarepublico-item .dropdown-menu:after { | ||
| 348 | + position: absolute; | ||
| 349 | + top: -6px; | ||
| 350 | + left: 21px; | ||
| 351 | + display: inline-block; | ||
| 352 | + border-right: 6px solid transparent; | ||
| 353 | + border-bottom: 6px solid #fff; | ||
| 354 | + border-left: 6px solid transparent; | ||
| 355 | + content: ''; | ||
| 211 | } | 356 | } |
| 212 | 357 | ||
| 213 | -#quick-links-sm > li > a{ | ||
| 214 | - margin: 5px 0; | ||
| 215 | - padding: 0 15px; | ||
| 216 | - border-right: 1px solid #2c66ce; | ||
| 217 | - text-decoration: none; | 358 | +header #second-nav #login-menu-box { |
| 359 | + top: 23px; | ||
| 360 | + padding: 10px 4px; | ||
| 218 | } | 361 | } |
| 219 | 362 | ||
| 220 | -#quick-links-sm li:last-child > a{ | ||
| 221 | - padding-right: 5px; | 363 | +header #user-menu .user-info span { |
| 364 | + color: #172738; | ||
| 365 | +} | ||
| 366 | + | ||
| 367 | +header #second-nav .softwarepublico-item .dropdown-menu:before { | ||
| 368 | + left: auto; | ||
| 369 | + right: 12px; | ||
| 370 | +} | ||
| 371 | + | ||
| 372 | +header #second-nav .softwarepublico-item .dropdown-menu:after { | ||
| 373 | + left: auto; | ||
| 374 | + right: 13px; | ||
| 375 | +} | ||
| 376 | + | ||
| 377 | +header #sobre .softwarepublico-item .dropdown-menu { | ||
| 378 | + margin-top: 10px; | ||
| 379 | +} | ||
| 380 | + | ||
| 381 | +header #sobre .softwarepublico-item .dropdown-menu li { | ||
| 382 | + font-size: 0.65em; | ||
| 383 | + text-align: left; | ||
| 384 | + border-right: none; | ||
| 385 | +} | ||
| 386 | + | ||
| 387 | +header #sobre .softwarepublico-item .dropdown-menu li a { | ||
| 388 | + border-right: none; | ||
| 389 | + border-bottom: 1px solid #EAEDF0; | ||
| 390 | + padding: 8px; | ||
| 391 | +} | ||
| 392 | + | ||
| 393 | +header #sobre .softwarepublico-item .dropdown-menu li:last-child a { border-bottom: none; | ||
| 394 | +} | ||
| 395 | + | ||
| 396 | +header #sobre li.softwarepublico-item a { | ||
| 397 | + border-right: 1px solid #EAEDF0; | ||
| 398 | + /*border-right: 1px solid #2C65CD;*/ | ||
| 399 | + padding: 0 8px; | ||
| 400 | +} | ||
| 401 | + | ||
| 402 | +header #sobre li.softwarepublico-item:last-child a { | ||
| 222 | border-right: none; | 403 | border-right: none; |
| 404 | + padding-right: 0; | ||
| 223 | } | 405 | } |
| 224 | 406 | ||
| 225 | -#quick-links-sm a:hover{ | ||
| 226 | - color: #03316f; | 407 | +header #sobre .softwarepublico-item a { |
| 408 | + border-right: 0; | ||
| 409 | + padding: 0 8px; | ||
| 410 | +} | ||
| 411 | + | ||
| 412 | +header #sobre .softwarepublico-item a:hover { | ||
| 227 | background: none; | 413 | background: none; |
| 414 | + opacity: 0.8; | ||
| 415 | +} | ||
| 416 | + | ||
| 417 | +header #sobre .last-item a { | ||
| 418 | + padding: 0 0 0 8px; | ||
| 419 | + border-right: none; | ||
| 228 | } | 420 | } |
colab/static/css/screen.css
| 1 | @import url(footer.css); | 1 | @import url(footer.css); |
| 2 | @import url(header.css); | 2 | @import url(header.css); |
| 3 | -@import url(http://fonts.googleapis.com/css?family=Open+Sans); | 3 | +@import url(font-awesome.min.css); |
| 4 | + | ||
| 5 | +@font-face { | ||
| 6 | + font-weight: normal; | ||
| 7 | + font-style: normal; | ||
| 8 | + font-family: "open_sanslight"; | ||
| 9 | + src: url("fonts/opensans-300-webfont.eot"); | ||
| 10 | + src: url("fonts/opensans-300-webfont.eot?#iefix") format("embedded-opentype"), | ||
| 11 | + url("fonts/opensans-300-webfont.woff") format("woff"), | ||
| 12 | + url("fonts/opensans-300-webfont.ttf") format("truetype"), | ||
| 13 | + url("fonts/opensans-300-webfont.svg#open_sanslight") format("svg"); | ||
| 14 | +} | ||
| 15 | + | ||
| 16 | +@font-face { | ||
| 17 | + font-weight: normal; | ||
| 18 | + font-style: normal; | ||
| 19 | + font-family: "open_sansregular"; | ||
| 20 | + src: url("fonts/opensans-400-webfont.eot"); | ||
| 21 | + src: url("fonts/opensans-400-webfont.eot?#iefix") format("embedded-opentype"), | ||
| 22 | + url("fonts/opensans-400-webfont.woff") format("woff"), | ||
| 23 | + url("fonts/opensans-400-webfont.ttf") format("truetype"), | ||
| 24 | + url("fonts/opensans-400-webfont.svg#open_sansregular") format("svg"); | ||
| 25 | +} | ||
| 26 | + | ||
| 27 | +@font-face { | ||
| 28 | + font-weight: normal; | ||
| 29 | + font-style: normal; | ||
| 30 | + font-family: "open_sanssemibold"; | ||
| 31 | + src: url("fonts/opensans-600-webfont.eot"); | ||
| 32 | + src: url("fonts/opensans-600-webfont.eot?#iefix") format("embedded-opentype"), | ||
| 33 | + url("fonts/opensans-600-webfont.woff") format("woff"), | ||
| 34 | + url("fonts/opensans-600-webfont.ttf") format("truetype"), | ||
| 35 | + url("fonts/opensans-600-webfont.svg#open_sanssemibold") format("svg"); | ||
| 36 | +} | ||
| 37 | + | ||
| 38 | +@font-face { | ||
| 39 | + font-weight: normal; | ||
| 40 | + font-style: normal; | ||
| 41 | + font-family: "open_sansbold"; | ||
| 42 | + src: url("fonts/opensans-700-webfont.eot"); | ||
| 43 | + src: url("fonts/opensans-700-webfont.eot?#iefix") format("embedded-opentype"), | ||
| 44 | + url("fonts/opensans-700-webfont.woff") format("woff"), | ||
| 45 | + url("fonts/opensans-700-webfont.ttf") format("truetype"), | ||
| 46 | + url("fonts/opensans-700-webfont.svg#open_sansbold") format("svg"); | ||
| 47 | +} | ||
| 48 | + | ||
| 49 | +@font-face { | ||
| 50 | + font-weight: normal; | ||
| 51 | + font-style: normal; | ||
| 52 | + font-family: "open_sansextrabold"; | ||
| 53 | + src: url("fonts/opensans-800-webfont.eot"); | ||
| 54 | + src: url("fonts/opensans-800-webfont.eot?#iefix") format("embedded-opentype"), | ||
| 55 | + url("fonts/opensans-800-webfont.woff") format("woff"), | ||
| 56 | + url("fonts/opensans-800-webfont.ttf") format("truetype"), | ||
| 57 | + url("fonts/opensans-800-webfont.svg#open_sansextrabold") format("svg"); | ||
| 58 | +} | ||
| 4 | 59 | ||
| 5 | body { | 60 | body { |
| 6 | padding-bottom: 0; | 61 | padding-bottom: 0; |
colab/static/img/acesso-a-informacao.png
colab/static/img/brasil.png
colab/static/img/fav.ico
No preview for this file type
12.8 KB
292 Bytes
colab/templates/header.html
| @@ -2,135 +2,147 @@ | @@ -2,135 +2,147 @@ | ||
| 2 | {% load static from staticfiles %} | 2 | {% load static from staticfiles %} |
| 3 | 3 | ||
| 4 | <header> | 4 | <header> |
| 5 | -<div class="navbar navbar-static-top"> | ||
| 6 | -<!-- begin of barra-brasil --> | ||
| 7 | -<div id="barra-brasil"> | ||
| 8 | - <a href="https://brasil.gov.br" style="background:#7F7F7F; height: 20px; padding:4px 0 4px 10px; display: block; font-family:sans,sans-serif; text-decoration:none; color:white; ">Portal do Governo Brasileiro</a> | ||
| 9 | -</div> | ||
| 10 | -<script src="https://barra.brasil.gov.br/barra.js" type="text/javascript" defer async></script> | ||
| 11 | -<!-- end of barra-brasil --> | ||
| 12 | - <div id="first-nav"> | ||
| 13 | - <div class="container"> | ||
| 14 | - <div class="row"> | ||
| 15 | - <div class="col-md-12"> | ||
| 16 | - <ul id="accessibility" class="nav navbar-nav hidden-xs hidden-sm"> | ||
| 17 | - <li> | ||
| 18 | - <a id="link-conteudo" href="#main-content" accesskey="1">Ir para o conteúdo <span class="label label-primary">1</span></a> | ||
| 19 | - </li> | ||
| 20 | - <li> | ||
| 21 | - <a id="link-navegacao" href="#menu-spb" accesskey="2">Ir para o menu <span class="label label-primary">2</span></a> | ||
| 22 | - </li> | ||
| 23 | - <li> <a id="link-buscar" accesskey="3" href="#header-searchbox" title="Go to search">Ir para a busca <span class="label label-primary">3</span></a> | ||
| 24 | - </li> | ||
| 25 | - <li> | ||
| 26 | - <a id="link-rodape" href="#link-top" accesskey="4">Ir para o rodapé <span class="label label-primary">4</span></a> | ||
| 27 | - </li> | ||
| 28 | - </ul> <!-- end of accesskeys --> | ||
| 29 | - <ul id="colab-portal-siteactions" class="nav navbar-nav navbar-right"> | ||
| 30 | - <li id="colab-siteaction-accessibility"> | ||
| 31 | - <a href="/software-publico-brasileiro/acessibilidade"><span>Acessibilidade</span></a> | ||
| 32 | - </li> | ||
| 33 | - <li id="colab-siteaction-contraste"> | ||
| 34 | - <a href="#"><span>Alto Contraste</span></a> | ||
| 35 | - </li> | ||
| 36 | - <li id="colab-siteaction-mapadosite"> | ||
| 37 | - <a href="/social/spb/mapa-do-site"><span>Mapa do site</span></a> | ||
| 38 | - </li> | ||
| 39 | - <!-- begin of user-menu --> | ||
| 40 | - {% if not user.is_authenticated %} | ||
| 41 | - <li class="dropdown hidden-xs hidden-lg"> | ||
| 42 | - <a href="#" class="dropdown-toggle" data-toggle="dropdown">Acesso <b class="caret"></b></a> | ||
| 43 | - <ul class="dropdown-menu"> | ||
| 44 | - {% trans 'Login' as login_text %} | ||
| 45 | - <li><a href="{% url 'signup' %}">{% trans "Register" %}</a></li> | ||
| 46 | - <li><a href="{% url 'login' %}">{% trans "Login" %}</a></li> | ||
| 47 | - </ul> | ||
| 48 | - </li> | ||
| 49 | - {% trans 'Login' as login_text %} | ||
| 50 | - <li class="visible-xs hidden-sm hidden-md"><a href="{% url 'signup' %}">{% trans "Register" %}</a></li> | ||
| 51 | - <li class="visible-xs hidden-sm hidden-md"><a href="{% url 'login' %}">{% trans "Login" %}</a></li> | ||
| 52 | - {% else %} | ||
| 53 | - <li id="user-menu" class="dropdown"> | ||
| 54 | - <a href="#" class="dropdown-toggle user" data-toggle="dropdown">{% gravatar user.email 40 %} <b class="caret"></b> </a> | ||
| 55 | - <ul class="dropdown-menu" role="menu"> | ||
| 56 | - <li> | 5 | + <div id="barra-brasil"> |
| 6 | + <a href="http://brasil.gov.br" style="background:#7F7F7F; height: 20px; padding:4px 0 4px 10px; display: block; font-family:sans,sans-serif; text-decoration:none; color:white; ">Software Público Brasileiro</a> | ||
| 7 | + </div> | ||
| 8 | + <script src="//barra.brasil.gov.br/barra.js" type="text/javascript" defer async></script> | ||
| 9 | + <div id="header" role="banner"> | ||
| 10 | + <div> | ||
| 11 | + <ul id="accessibility"> | ||
| 12 | + <li> | ||
| 13 | + <a accesskey="1" href="#acontent" id="link-conteudo"> | ||
| 14 | + Ir para o conteúdo | ||
| 15 | + <span>1</span> | ||
| 16 | + </a> | ||
| 17 | + </li> | ||
| 18 | + <li> | ||
| 19 | + <a accesskey="2" href="#sobre" id="link-navegacao"> | ||
| 20 | + Ir para o menu | ||
| 21 | + <span>2</span> | ||
| 22 | + </a> | ||
| 23 | + </li> | ||
| 24 | + <li> | ||
| 25 | + <a accesskey="3" href="#nolivesearchGadget" id="link-buscar"> | ||
| 26 | + Ir para a busca | ||
| 27 | + <span>3</span> | ||
| 28 | + </a> | ||
| 29 | + </li> | ||
| 30 | + <li class="last-item"> | ||
| 31 | + <a accesskey="4" href="#afooter" id="link-rodape"> | ||
| 32 | + Ir para o rodapé | ||
| 33 | + <span>4</span> | ||
| 34 | + </a> | ||
| 35 | + </li> | ||
| 36 | + </ul> | ||
| 37 | + <div id="second-nav"> | ||
| 38 | + <ul id="portal-siteactions"> | ||
| 39 | + <li id="siteaction-accessibility"> | ||
| 40 | + <a href="/social/spb/acessibilidade" title="Acessibilidade" accesskey="5"> | ||
| 41 | + Acessibilidade | ||
| 42 | + </a> | ||
| 43 | + </li> | ||
| 44 | + <li id="siteaction-contraste"> | ||
| 45 | + <a href="#" title="Alto Contraste" accesskey="6"> | ||
| 46 | + Alto Contraste | ||
| 47 | + </a> | ||
| 48 | + </li> | ||
| 49 | + <li id="siteaction-mapadosite"> | ||
| 50 | + <a href="/social/spb/mapa-do-site" title="Mapa do Site" accesskey="7"> | ||
| 51 | + Mapa do Site | ||
| 52 | + </a> | ||
| 53 | + </li> | ||
| 54 | + </ul> | ||
| 55 | + <ul id="login-menu"> | ||
| 56 | + {% if not user.is_authenticated %} | ||
| 57 | + <li class="login-item"><a href="{% url 'signup' %}">Cadastre-se</a></li> | ||
| 58 | + <li class="login-item last-item"><a href="{% url 'login' %}">Entrar</a></li> | ||
| 59 | + {% else %} | ||
| 60 | + <li id="user-menu" class="dropdown softwarepublico-item"> | ||
| 61 | + <a href="#" class="dropdown-toggle user" data-toggle="dropdown"> | ||
| 62 | + {% gravatar user.email %} <b class="caret"></b> | ||
| 63 | + </a> | ||
| 64 | + <ul id="login-menu-box" class="dropdown-menu" role="menu"> | ||
| 65 | + <li class="last-item"> | ||
| 57 | <div class="wrapper"> | 66 | <div class="wrapper"> |
| 58 | - <div class="thumbnail">{% gravatar user.email 100 %}</div> | ||
| 59 | - <div class="user-info"> | ||
| 60 | - <span><b>{{ user.get_full_name }}</b></span> | ||
| 61 | - <span class="quiet">{{ user.email }}</span> | ||
| 62 | - </div> | ||
| 63 | - <div> | ||
| 64 | - <a class="btn btn-info pull-left" href="{% url 'user_profile' user.username %}">{% trans "My Profile" %}</a> | ||
| 65 | - {% trans 'Logout' as logout_text %} | ||
| 66 | - <a class="btn btn-default pull-right" href="{% url 'logout' %}"> {% trans "Logout" %}</a> | 67 | + <div class="thumbnail">{% gravatar user.email %}</div> |
| 68 | + <div class="user-info"> | ||
| 69 | + <span><b>{{ user.get_full_name }}</b></span> | ||
| 70 | + <span class="quiet">{{ user.email }}</span> | ||
| 71 | + </div> | ||
| 72 | + <div> | ||
| 73 | + <a class="btn btn-default btn-spb-profile pull-left" href="{% url 'user_profile' user.username %}">Meu perfil</a> | ||
| 74 | + <a class="btn btn-default pull-right" href="{% url 'logout' %}">Sair</a> | ||
| 67 | </div> | 75 | </div> |
| 68 | </div> | 76 | </div> |
| 69 | </li> | 77 | </li> |
| 70 | </ul> | 78 | </ul> |
| 71 | - </li> <!-- end of user-menu --> | ||
| 72 | - {% endif %} | ||
| 73 | - </ul> | ||
| 74 | - </div> | ||
| 75 | - </div> <!-- end of access-menu --> | ||
| 76 | - <div class="row" id="spb-logo-search"> | ||
| 77 | - <div class="col-md-6 logo-box"> | ||
| 78 | - <div id="logo"> | ||
| 79 | - <a href="/" id="portal-logo"> | ||
| 80 | - <img class="img-responsive pull-left" src="{% static 'img/logo.svg' %}" /> | ||
| 81 | - </a> | ||
| 82 | - </div> | ||
| 83 | - </div> | ||
| 84 | - <div class="col-md-6"> | ||
| 85 | - <div class="input-group box-search navbar-right"> | ||
| 86 | - <form action="{% url 'haystack_search' %}" method="GET" id="search-form" class="navbar-form" role="search"> | ||
| 87 | - <div class="form-group"> | ||
| 88 | - <label class="sr-only" for="header-searchbox">{% trans 'Search...' %}</label> | ||
| 89 | - <input name="q" id="header-searchbox" | ||
| 90 | - class="form-control" value="{{ request.GET.q }}" | ||
| 91 | - type="search" placeholder="{% trans 'Search...' %}" /> | ||
| 92 | - </div> | ||
| 93 | - <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button> | ||
| 94 | - </form> | ||
| 95 | - </div> | ||
| 96 | - </div> | 79 | + </li> |
| 80 | + {% endif %} | ||
| 81 | + </ul> | ||
| 97 | </div> | 82 | </div> |
| 98 | - </div> | ||
| 99 | - </div><!-- end of first-nav --> | ||
| 100 | - <div id="second-nav"> | ||
| 101 | - <div class="container"> | ||
| 102 | - <div class="row"> | ||
| 103 | - <ul id="quick-links-sm" class="hidden-md hidden-lg"> | ||
| 104 | - <li id="link-faq"> | ||
| 105 | - <a href="/social/spb/ajuda">FAQ</a> | 83 | + <div id="logo"> |
| 84 | + <a id="portal-logo" title="" href="/"> | ||
| 85 | + <span id="portal-title-1">Portal do</span> | ||
| 86 | + <h1 id="portal-title" class="corto">Software Público Brasileiro</h1> | ||
| 87 | + <span id="portal-description">MINISTÉRIO DO PLANEJAMENTO, ORÇAMENTO E GESTÃO</span> | ||
| 88 | + </a> | ||
| 89 | + </div> | ||
| 90 | + <div id="portal-searchbox"> | ||
| 91 | + <form id="nolivesearchGadget_form" action="{% url 'haystack_search' %}"> | ||
| 92 | + <fieldset class="LSBox"><legend class="hiddenStructure">Buscar no portal</legend> | ||
| 93 | + <label class="hiddenStructure" for="nolivesearchGadget">Buscar no portal</label> | ||
| 94 | + <input name="q" type="text" size="18" value="{{ request.GET.q }}" title="Buscar no portal" placeholder="Buscar no portal" class="searchField" id="nolivesearchGadget"> | ||
| 95 | + <input class="searchButton" type="submit" value="Buscar no portal"> | ||
| 96 | + </fieldset> | ||
| 97 | + </form> | ||
| 98 | + </div> | ||
| 99 | + <div id="social-icons"> | ||
| 100 | + <ul> | ||
| 101 | + <li id="portalredes-facebook" class="portalredes-item"> | ||
| 102 | + <a href="#">Facebook</a> | ||
| 106 | </li> | 103 | </li> |
| 107 | - <li id="link-contact"> | ||
| 108 | - <a href="/social/spb/contato">Contato</a> | 104 | + <li id="portalredes-googleplus" class="portalredes-item"> |
| 105 | + <a href="#">Google+</a> | ||
| 109 | </li> | 106 | </li> |
| 110 | - </ul> | ||
| 111 | - <div class="navbar-header logo"> | ||
| 112 | - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> | ||
| 113 | - <span class="icon-bar"></span> | ||
| 114 | - <span class="icon-bar"></span> | ||
| 115 | - <span class="icon-bar"></span> | ||
| 116 | - </button> | ||
| 117 | - </div> | ||
| 118 | - <ul id="menu-spb" class="nav navbar-nav navbar-collapse collapse "> | ||
| 119 | - <li> | ||
| 120 | - <a href="{% url 'thread_list' %}">{% trans "Groups" %}</a> | 107 | + <li id="portalredes-instagram" class="portalredes-item"> |
| 108 | + <a href="#">Instagram</a> | ||
| 121 | </li> | 109 | </li> |
| 122 | - {% proxy_menu %} | ||
| 123 | - </ul> | ||
| 124 | - <ul id="quick-links" class="nav navbar-nav navbar-right hidden-xs hidden-sm"> | ||
| 125 | - <li id="link-faq"> | ||
| 126 | - <a href="/social/spb/ajuda">Perguntas Frequentes</a> | 110 | + <li id="portalredes-twitter" class="portalredes-item"> |
| 111 | + <a href="#">Twitter</a> | ||
| 112 | + </li> | ||
| 113 | + <li id="portalredes-youtube" class="portalredes-item"> | ||
| 114 | + <a href="#">YouTube</a> | ||
| 115 | + </li> | ||
| 116 | + <li id="portalredes-soundcloud" class="portalredes-item"> | ||
| 117 | + <a href="#">SoundCloud</a> | ||
| 127 | </li> | 118 | </li> |
| 128 | - <li id="link-contact"> | ||
| 129 | - <a href="/social/spb/contato">Contato</a> | 119 | + <li id="portalredes-slideshare" class="portalredes-item"> |
| 120 | + <a href="#">Slideshare</a> | ||
| 121 | + </li> | ||
| 122 | + <li id="portalredes-rss" class="portalredes-item last-item"> | ||
| 123 | + <a href="#">RSS</a> | ||
| 130 | </li> | 124 | </li> |
| 131 | </ul> | 125 | </ul> |
| 132 | </div> | 126 | </div> |
| 133 | </div> | 127 | </div> |
| 128 | + <div id="sobre"> | ||
| 129 | + <ul> | ||
| 130 | + <li id="softwarepublico-groups" class="softwarepublico-item"> | ||
| 131 | + <a href="{% url 'thread_list' %}" title="Listas de discussão">Listas de discussão</a> | ||
| 132 | + </li> | ||
| 133 | + {% proxy_menu %} | ||
| 134 | + <li id="softwarepublico-perguntas-frequentes" class="softwarepublico-item"> | ||
| 135 | + <a href="/social/spb/ajuda" title="Perguntas frequentes">Perguntas frequentes</a> | ||
| 136 | + </li> | ||
| 137 | + <li id="softwarepublico-contato" class="softwarepublico-item"> | ||
| 138 | + <a href="/social/spb/contato" title="Contato">Contato</a> | ||
| 139 | + </li> | ||
| 140 | + </ul> | ||
| 141 | + </div> | ||
| 134 | </div> | 142 | </div> |
| 135 | -</div> | ||
| 136 | </header> | 143 | </header> |
| 144 | + | ||
| 145 | +{% block main_content %} | ||
| 146 | + <a name="acontent" id="acontent"></a> | ||
| 147 | +{% endblock %} | ||
| 148 | + |