Add icons with spire. Using css3 transform scale.

Leonardo Merlin
1 parent 8a9c29fb
Showing 84 changed files with 331 additions and 245 deletions Show diff stats
gulp/images.js
gulp/inject.js
gulp/watch.js
package.json
src/app/components/navbar/navbar.directive.js
src/app/components/navbar/navbar.html
src/app/components/navbar/navbar.scss
src/app/components/programas/programas.directive.js
src/app/components/programas/programas.html
src/app/components/programas/programas.scss
src/app/index.route.js
src/app/index.run.js
src/app/index.scss
src/app/partials/article/article.controller.js
src/app/partials/article/article.html
src/app/partials/auth/auth.scss
src/app/partials/auth/signin.html
src/app/partials/auth/signup.html
src/app/partials/header/header.controller.js
src/app/partials/header/header.html
@@ -0,0 +1,21 @@
+'use strict';
+
+var path = require('path');
+var gulp = require('gulp');
+var conf = require('./conf');
+
+var gulpif = require('gulp-if');
+var sprity = require('sprity');
+
+gulp.task('sprites', function () {
+  var src = path.join(conf.paths.src, '/assets/images/icons/*.png');
+  var destCss = path.join(conf.paths.tmp, '/serve/app/');
+  var destImg = path.join(conf.paths.tmp, '/serve/assets/images/icons');
+
+  return sprity.src({
+    src: src,
+    style: 'sprite.css',
+    cssPath: '../assets/images/icons/'
+  })
+  .pipe(gulpif('*.png', gulp.dest(destImg), gulp.dest(destCss)));
+});
@@ -9,7 +9,7 @@ var $ = require(&#39;gulp-load-plugins&#39;)();
 var wiredep = require('wiredep').stream;
 var _ = require('lodash');
-gulp.task('inject', ['scripts', 'styles'], function () {
+gulp.task('inject', ['scripts', 'styles', 'sprites'], function () {
   var injectStyles = gulp.src([
     path.join(conf.paths.tmp, '/serve/app/**/*.css'),
     path.join('!' + conf.paths.tmp, '/serve/app/vendor.css')
@@ -25,6 +25,16 @@ gulp.task(&#39;watch&#39;, [&#39;inject&#39;], function () {
     }
   });
+  gulp.watch([
+    path.join(conf.paths.src, '/assets/images/icons/*.png')
+  ], function(event) {
+    if(isOnlyChange(event)) {
+      gulp.start('sprites');
+    } else {
+      gulp.start('inject');
+    }
+  });
+
   gulp.watch(path.join(conf.paths.src, '/app/**/*.js'), function(event) {
     if(isOnlyChange(event)) {
       gulp.start('scripts');
@@ -32,7 +32,7 @@
     "gulp-sass": "~2.0.1",
     "gulp-angular-filesort": "~1.1.1",
     "main-bower-files": "~2.8.0",
-    "merge-stream": "~0.1.7",
+    "merge-stream": "^1.0.0",
     "jshint-stylish": "~2.0.0",
     "wiredep": "~2.2.2",
     "karma": "~0.12.36",
@@ -47,7 +47,9 @@
     "http-proxy-middleware": "~0.0.5",
     "chalk": "~1.0.0",
     "uglify-save-license": "~0.4.1",
-    "wrench": "~1.5.8"
+    "wrench": "~1.5.8",
+    "gulp-if": "^1.2.5",
+    "sprity": "^1.0.7"
   },
   "engines": {
     "node": ">=0.10.0"
@@ -11,7 +11,7 @@
       restrict: 'E',
       templateUrl: 'app/components/navbar/navbar.html',
       scope: {
-          creationDate: '='
+        creationDate: '='
       },
       controller: NavbarController,
       controllerAs: 'vm',
@@ -23,11 +23,15 @@
     /** @ngInject */
     function NavbarController($log) {
       $log.debug('NavbarController');
-      // var vm = this;
-      // "vm.creation" is avaible by directive option "bindToController: true"
-      // vm.relativeDate = moment(vm.creationDate).fromNow();
+      var vm = this;
+
+      vm.scrollTo = function(hash) {
+        var $el = angular.element('#' + hash);
+        angular.element('body').animate({scrollTop: $el.offset().top}, 'slow');
+      };
     }
+
   }
 })();
-<nav class="navbar navbar-static-top">
+<nav class="header-navbar navbar navbar-static-top">
   <div class="container-fluid">
     <div class="navbar-header">
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
@@ -16,7 +16,7 @@
     <div id="navbar-collapse" class="collapse navbar-collapse">
       <ul class="nav navbar-nav">
         <li><a ui-sref="sobre">Sobre</a></li>
-        <li><a ui-sref="programas">Programas</a></li>
+        <li><a ui-sref="inicio({'#':'lista-de-programas'})" ng-click="vm.scrollTo('lista-de-programas')">Programas</a></li>
         <!-- <li><a ui-sref="ranking">Ranking</a></li> -->
         <!-- <li><a ui-sref="duvidas">Dúvidas</a></li> -->
         <!-- <li><a ui-sref="respostas">Respostas</a></li> -->
-.navbar-brand {
-  height: auto;
-}
+.header-navbar {
-.navbar-nav > li > a {
-  padding-top: 30px;
-  padding-bottom: 30px;
-}
+    .navbar-brand {
+        height: auto;
+    }
+
+    .navbar-nav a {
+        padding-top: 30px;
+        padding-bottom: 30px;
+        text-transform: uppercase;
+        color: #03316f;
+
+        -webkit-transition: all 0.2s ease-in-out;
+        -moz-transition: all 0.2s ease-in-out;
+        -o-transition: all 0.2s ease-in-out;
+        transition: all 0.2s ease-in-out;
+
+        .contraste & {
+            color: #fff;
+        }
+    }
-.navbar-toggle .icon-bar {
-  background-color: #333;
+    .navbar-toggle .icon-bar {
+        background-color: #333;
+    }
 }
@@ -27,10 +27,10 @@
       vm.init();
     }
-    ProgramaListController.prototype.init = function () {
+    ProgramaListController.prototype.init = function() {
       var vm = this;
-      if(!vm.article){
+      if (!vm.article) {
         vm.$log.warn('no article to display. Tip: use a ng-if before use this directive');
         return;
       }
@@ -38,9 +38,9 @@
       vm.categories = vm.article.categories;
       vm.programs = vm.article.children;
       vm.orderCriteries = [
-        { label: 'Aleatório', name: 'aleatorio' },
         { label: 'Título', name: 'titulo' },
-        { label: 'Tema', name: 'tema' }
+        { label: 'Tema', name: 'tema' },
+        { label: 'Aleatório', name: 'aleatorio' }
       ];
       vm.filtredProgramList = vm.getFiltredPrograms();
@@ -59,31 +59,31 @@
       }
       // update window location params
-      vm.$scope.$watch('vm.query', function(newValue, oldValue){
+      vm.$scope.$watch('vm.query', function(newValue/*, oldValue*/) {
         vm.search.filtro = newValue ? newValue : null;
         vm.$location.search('filtro', vm.search.filtro);
         vm.filtredProgramList = vm.getFiltredPrograms();
       });
-      vm.$scope.$watch('vm.limitTo', function(newValue, oldValue){
+      vm.$scope.$watch('vm.limitTo', function(newValue/*, oldValue*/) {
         vm.search.limite = (newValue && newValue !== vm.defaultLimit)  ? newValue : null;
         vm.$location.search('limite', vm.search.limite);
         vm.filtredProgramList = vm.getFiltredPrograms();
       });
-      vm.$scope.$watch('vm.categoryFilter', function(newValue, oldValue){
+      vm.$scope.$watch('vm.categoryFilter', function(newValue/*, oldValue*/) {
         vm.search.tema = newValue ? newValue.slug : null;
         vm.$location.search('tema', vm.search.tema);
         vm.filtredProgramList = vm.getFiltredPrograms();
       });
-      vm.$scope.$watch('vm.orderCriteria', function(newValue, oldValue){
+      vm.$scope.$watch('vm.orderCriteria', function(newValue/*, oldValue*/) {
         vm.search.ordem = (newValue && newValue.name) ? newValue.name : null;
         vm.$location.search('ordem', vm.search.ordem);
         vm.filtredProgramList = vm.getFiltredPrograms();
       });
-      vm.$scope.$watch('vm.reverse', function(newValue, oldValue){
+      vm.$scope.$watch('vm.reverse', function(newValue/*, oldValue*/) {
         vm.search.reverso = newValue ? newValue : null;
         vm.$location.search('reverso', vm.search.reverso);
         vm.filtredProgramList = vm.getFiltredPrograms();
@@ -91,7 +91,7 @@
     };
-    ProgramaListController.prototype.resetFilterValues = function () {
+    ProgramaListController.prototype.resetFilterValues = function() {
       var vm = this;
       vm.query = null;
@@ -100,40 +100,41 @@
       vm.orderCriteria = null;
     };
-    ProgramaListController.prototype.getIconClasses = function (category) {
+    ProgramaListController.prototype.getIconClasses = function(category) {
       var vm = this;
       vm.$log.debug('[TODO] getIconClasses of category:', category);
       return 'glyphicon glyphicon-exclamation-sign';
     };
-    ProgramaListController.prototype.getCategoryBySlug = function (categorySlug) {
+    ProgramaListController.prototype.getCategoryBySlug = function(categorySlug) {
       var vm = this;
       var result = null;
-      angular.forEach(vm.categories, function (value, key){
-        if(value.slug === categorySlug){
+      angular.forEach(vm.categories, function(value, key) {
+        if (value.slug === categorySlug) {
           result = value;
         }
-      })
+      });
+
       return result;
-    }
+    };
-    ProgramaListController.prototype.filterByCategory = function (category, $event) {
+    ProgramaListController.prototype.filterByCategory = function(category, $event) {
       var vm = this;
       $event.stopPropagation();
-      if(category !== vm.categoryFilter){
+      if (category !== vm.categoryFilter) {
         // selected new filter
         vm.categoryFilter = category;
-      }else{
+      } else {
         vm.categoryFilter = null;
       }
     };
-    ProgramaListController.prototype.showAll = function ($event) {
+    ProgramaListController.prototype.showAll = function($event) {
       var vm = this;
       $event.stopPropagation();
@@ -142,7 +143,7 @@
       vm.limitTo = vm.programs.length;
     };
-    ProgramaListController.prototype.getFiltredPrograms = function () {
+    ProgramaListController.prototype.getFiltredPrograms = function() {
       var vm = this;
       var input = vm.programs;
@@ -155,15 +156,15 @@
       var limitTo = vm.$filter('limitTo');
       var limit = vm.limitTo ? vm.limitTo : 4;
-      if(categoryFilter){
+      if (categoryFilter) {
         output = _filterByCategory(output, categoryFilter);
       }
-      if(query){
+      if (query) {
         output = filter(output, query, false);
       }
-      switch(orderCriteria.name) {
+      switch (orderCriteria.name) {
         case 'titulo':
           output = orderBy(output, 'title', vm.reverse);
           break;
@@ -171,21 +172,23 @@
           output = orderBy(output, 'categories[0].name', vm.reverse);
           break;
         case 'more_participants':
-          $log.info('Criteria not handled yet: ', orderCriteria);
+          vm.$log.info('Criteria not handled yet: ', orderCriteria);
           break;
         case 'aleatorio':
-        default:
           // shuffling
-          // if(!vm._isShuffled){
-            output = vm.filterShuffle(output);
+          // if (!vm._isShuffled){
+          output = vm.filterShuffle(output);
           //   vm._isShuffled = true;
           // }
-          if(vm.reverse){
+          if (vm.reverse) {
             output = output.slice().reverse();
           }
           break;
+        default:
+          vm.$log.warn('Criteria not matched: ', orderCriteria);
+          break;
       }
       output = limitTo(output, limit);
@@ -193,7 +196,7 @@
       return output;
     };
-    ProgramaListController.prototype.filterShuffle = function (input) {
+    ProgramaListController.prototype.filterShuffle = function(input) {
       var result = [];
       var resultByCategory = {};
@@ -202,7 +205,7 @@
         var program = input[i];
         var categorySlug = program.categories[0].slug;
-        if(!resultByCategory[categorySlug]){
+        if (!resultByCategory[categorySlug]) {
           resultByCategory[categorySlug] = [];
         }
@@ -210,9 +213,11 @@
       }
       // shuffle each array
-      for (var prop in resultByCategory){
-        if( resultByCategory.hasOwnProperty( prop ) ) {
-          var categoryWithPrograms = resultByCategory[prop];
+      var prop = null;
+      var categoryWithPrograms = null;
+      for (prop in resultByCategory) {
+        if (resultByCategory.hasOwnProperty(prop)) {
+          categoryWithPrograms = resultByCategory[prop];
           resultByCategory[prop] = shuffle(categoryWithPrograms);
         }
       }
@@ -224,12 +229,14 @@
         var foundProgram = false;
         // each categoryList with array of program
-        for (var prop in resultByCategory){
+        prop = null;
+        categoryWithPrograms = null;
+        for (prop in resultByCategory) {
-          if( resultByCategory.hasOwnProperty( prop ) ) {
-            var categoryWithPrograms = resultByCategory[prop];
+          if (resultByCategory.hasOwnProperty(prop)) {
+            categoryWithPrograms = resultByCategory[prop];
-            if (categoryWithPrograms.length > 0 ) {
+            if (categoryWithPrograms.length > 0) {
               var pivotProgram = categoryWithPrograms.pop();
               result.push(pivotProgram);
               foundProgram = true;
@@ -237,13 +244,13 @@
           }
         }
-        if(!foundProgram){
+        if (!foundProgram) {
           hasProgram = false;
         }
       }
       return result;
-    }
+    };
     var directive = {
       restrict: 'E',
@@ -259,10 +266,10 @@
     return directive;
   }
-  function _filterByCategory (input, category){
+  function _filterByCategory (input, category) {
     input = input || [];
-    if(!category){
+    if (!category) {
       // no filter
       return input;
     }
@@ -270,7 +277,7 @@
     var out = [];
     for (var i = 0; i < input.length; i++) {
       var program = input[i];
-      if(program.categories[0].slug === category.slug){
+      if (program.categories[0].slug === category.slug) {
         out.push(program);
       }
     }
@@ -278,19 +285,6 @@
     return out;
   }
-  function _filterByCriteria (input, criteria, reverse){
-    var vm = this;
-    input = input || [];
-    criteria = criteria || {};
-    reverse = reverse || false;
-
-    var out = [];
-
-
-
-    return out;
-  }
-
   // -> Fisher–Yates shuffle algorithm
   function shuffle (array) {
     var currentIndex = array.length, temporaryValue, randomIndex ;
@@ -311,5 +305,4 @@
     return array;
   }
-
 })();
@@ -2,15 +2,16 @@
   <div class="col-sm-3">
     <div class="category-list">
       <nav class="navigation">
-        <h3 class="title"><b>Programas</b> por Tema</h3>
+        <h3 class="category-list--title"><b>Programas</b> por Tema</h3>
         <div class="list-group category-list" ng-class="vm.categoryFilter.slug">
-          <button type="button" class="list-group-item category-item"
+          <button type="button" class="list-group-item category-list--item"
             ng-repeat="category in vm.categories"
             ng-class="{active: vm.categoryFilter.slug === category.slug}"
             ng-click="vm.filterByCategory(category, $event)">
-            <span ng-class="[category.iconClass]"></span>
-            <span>{{::category.name}}</span>
+            <span class="category-list--icon-circle" ng-class="category.slug"></span>
+            <span class="category-list--icon icon" ng-class="'icon-tema-' + category.slug"></span>
+            <span class="category-list--label">{{::category.name}}</span>
             <span class="glyphicon glyphicon-chevron-right pull-right"></span>
           </button>
@@ -44,15 +45,15 @@
                 <option value="">-- Ordernar por: --</option>
               </select>
-              <div class="checkbox">
+              <!-- <div class="checkbox">
                 <label>
                   <input type="checkbox" ng-model="vm.reverse">
                   Reverso
                 </label>
-              </div>
+              </div> -->
-              <input id="programListLimit" type="number" class="form-control input-sm" size="4" step="2" ng-model="vm.limitTo" aria-label="Limitar" >
-              <label for="programListLimit" class="control-label">Limite</label>
+              <!-- <input id="programListLimit" type="number" class="form-control input-sm" size="4" step="2" ng-model="vm.limitTo" aria-label="Limitar" >
+              <label for="programListLimit" class="control-label">Limite</label> -->
             </div>
           </aside>
 .program-list {
+    .header {
+        position: relative;
+        height: 40px;
+        margin-bottom: 10px;
-  .header {
-    position: relative;
-    height: 40px;
-    margin-bottom: 10px;
-
-    button {
-      position: absolute;
-      right: 0;
-      top: 2px;
+        button {
+            position: absolute;
+            right: 0;
+            top: 2px;
+        }
     }
-  }
-
 }
 .category-list {
+    &--title {
+        color: #ffffff;
+        font-size: 16px;
+        margin: 0;
+        padding: 20px;
+        background-color: #484848;
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
+        overflow: hidden;
+    }
+
+
+    &--group {
+    }
+
+    &--item {
+        position: relative;
+        text-transform: uppercase;
+        font-weight: bold;
+        padding: 0;
+        height: 68px;
+        display: table-cell;
+        vertical-align: middle;
+    }
+
+    &--label {
+        margin-left: 70px;
+        margin-right: 30px;
+        display: inline-block;
+    }
+
+    &--icon-circle {
+        width: 48px;
+        height: 48px;
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        border: 1px solid #fff;
+        border-radius: 48px;
+
+        @each $category, $color in $categories {
+            &.#{$category} {
+                background-color: $color;
+            }
+        }
+    }
+
+    .category-list--icon {
+        position: absolute;
+        top: -16px;
+        left: -14px;
+        transform: scale(0.4);
+    }
     @each $category, $color in $categories {
         &.#{$category} {
@@ -45,18 +45,6 @@
           'footer': { templateUrl: 'app/partials/footer/footer.html' }
         }
       })
-      .state('programas', {
-        url: '/programas',
-        views: {
-          'header': { templateUrl: 'app/partials/header/header.html' },
-          'main': {
-            templateUrl: 'app/partials/programas/programas.html',
-            controller: 'ProgramasController',
-            controllerAs: 'programas'
-          },
-          'footer': { templateUrl: 'app/partials/footer/footer.html' }
-        }
-      })
       .state('programa', {
         url: '/programa/:slug',
         views: {
@@ -12,11 +12,12 @@
     .run(runBlock);
   /** @ngInject */
-  function runAuth($rootScope, $cookies, USER_ROLES, AUTH_EVENTS, AuthService, $log){
+  function runAuth($rootScope, $cookies, USER_ROLES, AUTH_EVENTS, AuthService, $log) {
     // Listner url/state changes, and check permission
-    $rootScope.$on('$stateChangeStart', function (event, next) {
-      if(!next.data || !next.data.authorizedRoles){
+    $rootScope.$on('$stateChangeStart', function(event, next) {
+
+      if (!next.data || !next.data.authorizedRoles) {
         $log.debug('public url/state');
         return;
       }
@@ -42,32 +43,34 @@
   /** @ngInject */
   function runAccessibility($rootScope, $timeout, $cookies, $log) {
-    var contrast = $cookies.get('dialoga_contraste') === "true";
+    var contrast = $cookies.get('dialoga_contraste') === 'true';
     adjustContrast(contrast);
-    function adjustContrast(state){
+    function adjustContrast(state) {
       var bodyEl = angular.element(document).find('body');
       angular.element(bodyEl).toggleClass('contraste', !!state);
     }
-    $rootScope.toggleContrast = function () {
+    $rootScope.toggleContrast = function() {
       contrast = !contrast;
       $cookies.put('dialoga_contraste', contrast);
       adjustContrast(contrast);
     };
-    $rootScope.focusMainContent = function ($event) {
+    $rootScope.focusMainContent = function($event) {
       // prevent skip link from redirecting
       if ($event) { $event.preventDefault(); }
       var mainContentArea = document.querySelector('[role="main"]');
-      if ( mainContentArea ) {
-        $timeout(function(){
-          mainContentArea.focus();
-        },90);
-      }else{
+      if (mainContentArea) {
+        $timeout(function() {
+          var $el = angular.element(mainContentArea);
+
+          angular.element('body').animate({scrollTop: $el.offset().top}, 'slow');
+        }, 90);
+      } else {
         $log.warn('role="main" not found.');
       }
     };
@@ -76,42 +79,45 @@
   }
   /** @ngInject */
-  function runHistory($rootScope, $log) {
+  function runHistory($rootScope) {
     $rootScope.$on('$stateChangeSuccess', function(event, toState, toStateParams, fromState, fromStateParams) {
       $rootScope.$previousState = { state: fromState, params: fromStateParams};
     });
   }
   /** @ngInject */
-  function runPath($rootScope, api, $log) {
-    var isProduction = (/^http:\/\/dialoga\.gov\.br\//.test(window.location.href));
+  function runPath($rootScope, api, $window, $log) {
+    var isProduction = (/^http:\/\/dialoga\.gov\.br\//.test($window.location.href));
     $rootScope.basePath = isProduction ? api.hostProd :  api.hostHom;
     $log.debug('runPath end.');
   }
   /** @ngInject */
-  function runColorUtils($log) {
-    
-    window.ColorLuminance = function (hex, lum) {
+  function runColorUtils($window) {
+
+    $window.ColorLuminance = function(hex, lum) {
       // validate hex string
       hex = String(hex).replace(/[^0-9a-f]/gi, '');
       if (hex.length < 6) {
-        hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
+        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
       }
       lum = lum || 0;
       // convert to decimal and change luminosity
-      var rgb = "#", c, i;
+      var rgb = '#';
+      var c;
+      var i;
+
       for (i = 0; i < 3; i++) {
-        c = parseInt(hex.substr(i*2,2), 16);
+        c = parseInt(hex.substr(i * 2, 2), 16);
         c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
-        rgb += ("00"+c).substr(c.length);
+        rgb += ('00' + c).substr(c.length);
       }
       return rgb;
-    }
+    };
   }
   /** @ngInject */
@@ -28,6 +28,21 @@ $categories-descriptions: (saude: &quot;Saúde é direito de todos e dever do Estado.
 body {
     // font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    &.contraste {
+        color: #fff;
+        background-color: #000;
+
+        a,
+        .btn {
+            color: #fff;
+            background-color: #000;
+        }
+
+        .skip-links a:focus {
+            background-color: #000 !important;
+            border-color: #fff;
+        }
+    }
 }
@@ -23,12 +23,13 @@
     vm.page = vm.$state.current.name;
     vm.article = null;
-    switch(vm.page){
+    vm.loading = true;
+    switch (vm.page){
       case 'sobre':
-        vm.ArticleService.getAbout(handleSuccess);
+        vm.ArticleService.getAbout(handleSuccess, handleError);
         break;
       case 'termos-de-uso':
-        vm.ArticleService.getTerms(handleSuccess);
+        vm.ArticleService.getTerms(handleSuccess, handleError);
         break;
       default:
         vm.$log.warn('Page not handled:', vm.page);
@@ -36,8 +37,14 @@
     }
     function handleSuccess (data) {
+      vm.loading = false;
       vm.article = data.article;
       // vm.article.body = vm.$sce.trustAsHtml(vm.article.body);
     }
+
+    function handleError (error) {
+      vm.loading = false;
+      vm.error = error;
+    }
   };
 })();
 <div class="container" role="main">
 	<span class="hide">{{::article.page}}</span>
+
+  <div ng-if="article.loading">
+    <div class="alert alert-info">
+      Carregando conteúdo...
+    </div>
+  </div>
+
+  <div ng-if="article.error">
+    <div class="alert alert-info">
+      Erro ao carregar conteúdo.
+    </div>
+  </div>
+
 	<div ng-if="article.article">
 		<article>
 			<header>
-.btn-social {
-  color: #fff;
-  font-weight: bold;
-
-  &:hover,
-  &:focus {color: #fff;}
-
-  &.btn-facebook {
-    background-color: #33477a;
-    &:hover,
-    &:focus {background-color: #304373; }
-    &:active {background-color: #33477a; }
-  }
-  &.btn-google-plus {
-    background-color: #b92d25;
-    &:hover,
-    &:focus {background-color: #b12b23; }
-    &:active {background-color: #b92d25; }
-  }
-}
+.auth-content{
-.glyphicon {
-  &.icon-white {
-    fill: white;
-  }
-}
+    .btn-social {
+      color: #fff;
+      font-weight: bold;
+
+      &:hover,
+      &:focus {color: #fff;}
+
+      &.btn-facebook {
+        background-color: #33477a;
+        &:hover,
+        &:focus {background-color: #304373; }
+        &:active {background-color: #33477a; }
+      }
+      &.btn-google-plus {
+        background-color: #b92d25;
+        &:hover,
+        &:focus {background-color: #b12b23; }
+        &:active {background-color: #b92d25; }
+      }
+    }
+
+    .btn {
+        .contraste & {
+            color: #fff;
+        }
+    }
+    .btn-primary {
+        .contraste & {
+            background-color: #262626;
+            border-color: #666;
+        }
+    }
+
+    .glyphicon {
+      &.icon-white {
+        fill: white;
+      }
+    }
+
+    .separator-or {
+      border-top: 2px solid #d8d8d8;
+      text-align: center;
+      font-weight: bold;
+
+      &:after {
+        content: "ou";
+        position: absolute;
+        top: 4px;
+        left: 50%;
+        margin-left: -26px;
+        font-size: 30px;
+        line-height: 30px;
+        padding: 0 0.25em;
+        background: $gray;
-.separator-or {
-  border-top: 2px solid #d8d8d8;
-  text-align: center;
-  font-weight: bold;
-
-  &:after {
-    content: "ou";
-    position: absolute;
-    top: 4px;
-    left: 50%;
-    margin-left: -26px;
-    font-size: 30px;
-    line-height: 30px;
-    padding: 0 0.25em;
-    background: $gray;
-  }
+        .contraste & {
+            background: #000;
+        }
+      }
+    }
 }
-<section role="main" class="section-gray">
+<section role="main" class="section-gray auth-content">
   <div class="container">
     <div class="row">
       <div class="col-sm-8 col-sm-offset-2">
+<!-- Facebook -->
+<!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 33" width="25" height="25"><path d="M18 32L12 32 12 16l-4 0 0-5.5 4 0 0-3.2C12 2.7 13.2 0 18.5 0l4.4 0 0 5.5 -2.8 0c-2.1 0-2.2 0.8-2.2 2.2l0 2.8 5 0 -0.6 5.5L18 16 18 32z"/></svg> -->
+<!-- Twitter -->
+<!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 33" width="25" height="25"><path d="M32 6.1c-1.2 0.5-2.4 0.9-3.8 1 1.4-0.8 2.4-2.1 2.9-3.6 -1.3 0.8-2.7 1.3-4.2 1.6 -1.2-1.3-2.9-2.1-4.8-2.1 -3.6 0-6.6 2.9-6.6 6.6 0 0.5 0.1 1 0.2 1.5 -5.5-0.3-10.3-2.9-13.5-6.9 -0.6 1-0.9 2.1-0.9 3.3 0 2.3 1.2 4.3 2.9 5.5 -1.1 0-2.1-0.3-3-0.8 0 0 0 0.1 0 0.1 0 3.2 2.3 5.8 5.3 6.4 -0.6 0.2-1.1 0.2-1.7 0.2 -0.4 0-0.8 0-1.2-0.1 0.8 2.6 3.3 4.5 6.1 4.6 -2.2 1.8-5.1 2.8-8.2 2.8 -0.5 0-1.1 0-1.6-0.1 2.9 1.9 6.4 3 10.1 3 12.1 0 18.7-10 18.7-18.7 0-0.3 0-0.6 0-0.8C30 8.5 31.1 7.4 32 6.1z"/></svg> -->
+<!-- Google Plus -->
+<!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 33" width="25" height="25"><path d="M17.5 2c0 0-6.3 0-8.4 0C5.3 2 1.8 4.8 1.8 8.1c0 3.4 2.6 6.1 6.4 6.1 0.3 0 0.5 0 0.8 0 -0.2 0.5-0.4 1-0.4 1.6 0 0.9 0.5 1.7 1.1 2.3 -0.5 0-0.9 0-1.5 0C3.6 18.1 0 21.1 0 24.1c0 3 3.9 4.9 8.6 4.9 5.3 0 8.2-3 8.2-6 0-2.4-0.7-3.9-2.9-5.4 -0.8-0.5-2.2-1.8-2.2-2.6 0-0.9 0.3-1.3 1.6-2.4 1.4-1.1 2.4-2.6 2.4-4.4 0-2.1-0.9-4.2-2.7-4.8l2.7 0L17.5 2zM14.5 22.5c0.1 0.3 0.1 0.6 0.1 0.9 0 2.4-1.6 4.4-6.1 4.4 -3.2 0-5.5-2-5.5-4.5 0-2.4 2.9-4.4 6.1-4.4 0.8 0 1.4 0.1 2.1 0.3C12.9 20.4 14.2 21.1 14.5 22.5zM9.4 13.4c-2.2-0.1-4.2-2.4-4.6-5.2 -0.4-2.8 1.1-5 3.2-4.9 2.2 0.1 4.2 2.3 4.6 5.2C13 11.2 11.6 13.4 9.4 13.4zM26 8L26 2 24 2 24 8 18 8 18 10 24 10 24 16 26 16 26 10 32 10 32 8z"/></svg> -->
+
 <section>
   <div class="container">
     <div class="row">
@@ -8,7 +15,7 @@
     </div>
   </div>
 </section>
-<section role="main" class="section-gray">
+<section role="main" class="section-gray auth-content">
   <div class="container">
     <div class="row">
       <div class="col-sm-8 col-sm-offset-2">
@@ -18,9 +25,6 @@
             <span class="glyphicon icon-facebook icon-white" aria-hidden="true">
               <!-- Facebook -->
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 33" width="25" height="25"><path d="M18 32L12 32 12 16l-4 0 0-5.5 4 0 0-3.2C12 2.7 13.2 0 18.5 0l4.4 0 0 5.5 -2.8 0c-2.1 0-2.2 0.8-2.2 2.2l0 2.8 5 0 -0.6 5.5L18 16 18 32z"/></svg>
-
-              <!-- Twitter -->
-              <!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 33" width="25" height="25"><path d="M32 6.1c-1.2 0.5-2.4 0.9-3.8 1 1.4-0.8 2.4-2.1 2.9-3.6 -1.3 0.8-2.7 1.3-4.2 1.6 -1.2-1.3-2.9-2.1-4.8-2.1 -3.6 0-6.6 2.9-6.6 6.6 0 0.5 0.1 1 0.2 1.5 -5.5-0.3-10.3-2.9-13.5-6.9 -0.6 1-0.9 2.1-0.9 3.3 0 2.3 1.2 4.3 2.9 5.5 -1.1 0-2.1-0.3-3-0.8 0 0 0 0.1 0 0.1 0 3.2 2.3 5.8 5.3 6.4 -0.6 0.2-1.1 0.2-1.7 0.2 -0.4 0-0.8 0-1.2-0.1 0.8 2.6 3.3 4.5 6.1 4.6 -2.2 1.8-5.1 2.8-8.2 2.8 -0.5 0-1.1 0-1.6-0.1 2.9 1.9 6.4 3 10.1 3 12.1 0 18.7-10 18.7-18.7 0-0.3 0-0.6 0-0.8C30 8.5 31.1 7.4 32 6.1z"/></svg> -->
             </span>
             <span class="text">
               Conectar pelo Facebook
@@ -30,7 +34,7 @@
         <div class="col-sm-6">
           <button type="button" class="btn btn-lg btn-block btn-social btn-google-plus">
             <span class="glyphicon icon-google-plus icon-white" aria-hidden="true">
-              <!-- Google + -->
+              <!-- Google Plus -->
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 33" width="25" height="25"><path d="M17.5 2c0 0-6.3 0-8.4 0C5.3 2 1.8 4.8 1.8 8.1c0 3.4 2.6 6.1 6.4 6.1 0.3 0 0.5 0 0.8 0 -0.2 0.5-0.4 1-0.4 1.6 0 0.9 0.5 1.7 1.1 2.3 -0.5 0-0.9 0-1.5 0C3.6 18.1 0 21.1 0 24.1c0 3 3.9 4.9 8.6 4.9 5.3 0 8.2-3 8.2-6 0-2.4-0.7-3.9-2.9-5.4 -0.8-0.5-2.2-1.8-2.2-2.6 0-0.9 0.3-1.3 1.6-2.4 1.4-1.1 2.4-2.6 2.4-4.4 0-2.1-0.9-4.2-2.7-4.8l2.7 0L17.5 2zM14.5 22.5c0.1 0.3 0.1 0.6 0.1 0.9 0 2.4-1.6 4.4-6.1 4.4 -3.2 0-5.5-2-5.5-4.5 0-2.4 2.9-4.4 6.1-4.4 0.8 0 1.4 0.1 2.1 0.3C12.9 20.4 14.2 21.1 14.5 22.5zM9.4 13.4c-2.2-0.1-4.2-2.4-4.6-5.2 -0.4-2.8 1.1-5 3.2-4.9 2.2 0.1 4.2 2.3 4.6 5.2C13 11.2 11.6 13.4 9.4 13.4zM26 8L26 2 24 2 24 8 18 8 18 10 24 10 24 16 26 16 26 10 32 10 32 8z"/></svg>
             </span>
             <span class="text">
@@ -1,16 +0,0 @@
-(function() {
-  'use strict';
-
-  angular
-    .module('dialoga')
-    .controller('HeaderController', HeaderController);
-
-  /** @ngInject */
-  function HeaderController($log) {
-    var vm = this;
-
-    vm.$log = $log;
-    vm.$log.debug('HeaderController');
-  }
-
-})();
-<header class="container" ng-controller="HeaderController as header">
+<header class="container">
   <div class="row">
     <div class="accessibility-wrapper">
@@ -18,7 +18,7 @@
     vm.init();
     vm.$log.debug('InicioController');
   }
-  
+
   InicioController.prototype.init = function() {
     var vm = this;
@@ -1,24 +0,0 @@
-(function() {
-  'use strict';
-
-  angular
-    .module('dialoga')
-    .controller('ProgramasController', ProgramasController);
-
-  /** @ngInject */
-  function ProgramasController(ArticleService, $log) {
-    $log.debug('ProgramasController');
-
-    var vm = this;
-
-    vm.ArticleService = ArticleService;
-    vm.$log = $log;
-
-    vm.init();
-  }
-
-  ProgramasController.prototype.init = function () {
-
-    vm.programaList = [];
-  };
-})();
@@ -1,15 +0,0 @@
-(function() {
-  'use strict';
-
-  describe('controllers', function(){
-
-    beforeEach(module('dialoga'));
-
-    // it('should define more than 5 awesome things', inject(function($controller) {
-    //   var vm = $controller('SobreController');
-
-    //   // expect(angular.isArray(vm.awesomeThings)).toBeTruthy();
-    //   // expect(vm.awesomeThings.length > 5).toBeTruthy();
-    // }));
-  });
-})();
@@ -1,8 +0,0 @@
-<div class="container">
-
-  <h1>Programas:</h1>
-  <div ng-repeat="programa in programas.programaList">
-    <programa-box programa="programa"></programa-box>
-  </div>
-
-</div>
@@ -20,11 +20,12 @@
     <!-- css files will be automatically insert here -->
     <!-- endinject -->
     <!-- endbuild -->
+    <link rel="stylesheet" href="/app/sprite.css">
   </head>
   <body ng-cloak>
     <div class="skip-links">
-      <a href="#content" class="sr-only sr-only-focusable" tabindex="0" ng-click="focusMainContent($event)">Ir para o conteúdo principal</a>
+      <a href="#content" class="sr-only sr-only-focusable btn btn-link" tabindex="0" ng-click="focusMainContent($event)">Ir para o conteúdo principal</a>
     </div>
     <div id="barra-brasil" style="background:#7F7F7F; height: 20px; padding:0 0 0 10px;display:block;">
@@ -0,0 +1,21 @@		@@ -0,0 +1,21 @@
	1	+'use strict';
	2	+
	3	+var path = require('path');
	4	+var gulp = require('gulp');
	5	+var conf = require('./conf');
	6	+
	7	+var gulpif = require('gulp-if');
	8	+var sprity = require('sprity');
	9	+
	10	+gulp.task('sprites', function () {
	11	+ var src = path.join(conf.paths.src, '/assets/images/icons/*.png');
	12	+ var destCss = path.join(conf.paths.tmp, '/serve/app/');
	13	+ var destImg = path.join(conf.paths.tmp, '/serve/assets/images/icons');
	14	+
	15	+ return sprity.src({
	16	+ src: src,
	17	+ style: 'sprite.css',
	18	+ cssPath: '../assets/images/icons/'
	19	+ })
	20	+ .pipe(gulpif('*.png', gulp.dest(destImg), gulp.dest(destCss)));
	21	+});
	@@ -9,7 +9,7 @@ var $ = require('gulp-load-plugins')();		@@ -9,7 +9,7 @@ var $ = require('gulp-load-plugins')();
9	var wiredep = require('wiredep').stream;	9	var wiredep = require('wiredep').stream;
10	var _ = require('lodash');	10	var _ = require('lodash');
11		11
12	-gulp.task('inject', ['scripts', 'styles'], function () {	12	+gulp.task('inject', ['scripts', 'styles', 'sprites'], function () {
13	var injectStyles = gulp.src([	13	var injectStyles = gulp.src([
14	path.join(conf.paths.tmp, '/serve/app/*/.css'),	14	path.join(conf.paths.tmp, '/serve/app/*/.css'),
15	path.join('!' + conf.paths.tmp, '/serve/app/vendor.css')	15	path.join('!' + conf.paths.tmp, '/serve/app/vendor.css')
	@@ -25,6 +25,16 @@ gulp.task('watch', ['inject'], function () {		@@ -25,6 +25,16 @@ gulp.task('watch', ['inject'], function () {
25	}	25	}
26	});	26	});
27		27
		28	+ gulp.watch([
		29	+ path.join(conf.paths.src, '/assets/images/icons/*.png')
		30	+ ], function(event) {
		31	+ if(isOnlyChange(event)) {
		32	+ gulp.start('sprites');
		33	+ } else {
		34	+ gulp.start('inject');
		35	+ }
		36	+ });
		37	+
28	gulp.watch(path.join(conf.paths.src, '/app/*/.js'), function(event) {	38	gulp.watch(path.join(conf.paths.src, '/app/*/.js'), function(event) {
29	if(isOnlyChange(event)) {	39	if(isOnlyChange(event)) {
30	gulp.start('scripts');	40	gulp.start('scripts');
1	-<nav class="navbar navbar-static-top">	1	+<nav class="header-navbar navbar navbar-static-top">
2	<div class="container-fluid">	2	<div class="container-fluid">
3	<div class="navbar-header">	3	<div class="navbar-header">
4	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">	4	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
	@@ -16,7 +16,7 @@		@@ -16,7 +16,7 @@
16	<div id="navbar-collapse" class="collapse navbar-collapse">	16	<div id="navbar-collapse" class="collapse navbar-collapse">
17	<ul class="nav navbar-nav">	17	<ul class="nav navbar-nav">
18	<li><a ui-sref="sobre">Sobre</a></li>	18	<li><a ui-sref="sobre">Sobre</a></li>
19	- <li><a ui-sref="programas">Programas</a></li>	19	+ <li><a ui-sref="inicio({'#':'lista-de-programas'})" ng-click="vm.scrollTo('lista-de-programas')">Programas</a></li>
20	<!-- <li><a ui-sref="ranking">Ranking</a></li> -->	20	<!-- <li><a ui-sref="ranking">Ranking</a></li> -->
21	<!-- <li><a ui-sref="duvidas">Dúvidas</a></li> -->	21	<!-- <li><a ui-sref="duvidas">Dúvidas</a></li> -->
22	<!-- <li><a ui-sref="respostas">Respostas</a></li> -->	22	<!-- <li><a ui-sref="respostas">Respostas</a></li> -->
1	-.navbar-brand {
2	- height: auto;
3	-}	1	+.header-navbar {
4		2
5	-.navbar-nav > li > a {
6	- padding-top: 30px;
7	- padding-bottom: 30px;
8	-}	3	+ .navbar-brand {
		4	+ height: auto;
		5	+ }
		6	+
		7	+ .navbar-nav a {
		8	+ padding-top: 30px;
		9	+ padding-bottom: 30px;
		10	+ text-transform: uppercase;
		11	+ color: #03316f;
		12	+
		13	+ -webkit-transition: all 0.2s ease-in-out;
		14	+ -moz-transition: all 0.2s ease-in-out;
		15	+ -o-transition: all 0.2s ease-in-out;
		16	+ transition: all 0.2s ease-in-out;
		17	+
		18	+ .contraste & {
		19	+ color: #fff;
		20	+ }
		21	+ }
9		22
10	-.navbar-toggle .icon-bar {
11	- background-color: #333;	23	+ .navbar-toggle .icon-bar {
		24	+ background-color: #333;
		25	+ }
12	}	26	}
1	.program-list {	1	.program-list {
		2	+ .header {
		3	+ position: relative;
		4	+ height: 40px;
		5	+ margin-bottom: 10px;
2		6
3	- .header {
4	- position: relative;
5	- height: 40px;
6	- margin-bottom: 10px;
7	-
8	- button {
9	- position: absolute;
10	- right: 0;
11	- top: 2px;	7	+ button {
		8	+ position: absolute;
		9	+ right: 0;
		10	+ top: 2px;
		11	+ }
12	}	12	}
13	- }
14	-
15	}	13	}
16		14
17	.category-list {	15	.category-list {
		16	+ &--title {
		17	+ color: #ffffff;
		18	+ font-size: 16px;
		19	+ margin: 0;
		20	+ padding: 20px;
		21	+ background-color: #484848;
		22	+ border-top-left-radius: 5px;
		23	+ border-top-right-radius: 5px;
		24	+ overflow: hidden;
		25	+ }
		26	+
		27	+
		28	+ &--group {
		29	+ }
		30	+
		31	+ &--item {
		32	+ position: relative;
		33	+ text-transform: uppercase;
		34	+ font-weight: bold;
		35	+ padding: 0;
		36	+ height: 68px;
		37	+ display: table-cell;
		38	+ vertical-align: middle;
		39	+ }
		40	+
		41	+ &--label {
		42	+ margin-left: 70px;
		43	+ margin-right: 30px;
		44	+ display: inline-block;
		45	+ }
		46	+
		47	+ &--icon-circle {
		48	+ width: 48px;
		49	+ height: 48px;
		50	+ position: absolute;
		51	+ top: 10px;
		52	+ left: 10px;
		53	+ border: 1px solid #fff;
		54	+ border-radius: 48px;
		55	+
		56	+ @each $category, $color in $categories {
		57	+ &.#{$category} {
		58	+ background-color: $color;
		59	+ }
		60	+ }
		61	+ }
		62	+
		63	+ .category-list--icon {
		64	+ position: absolute;
		65	+ top: -16px;
		66	+ left: -14px;
		67	+ transform: scale(0.4);
		68	+ }
18		69
19	@each $category, $color in $categories {	70	@each $category, $color in $categories {
20	&.#{$category} {	71	&.#{$category} {
	@@ -45,18 +45,6 @@		@@ -45,18 +45,6 @@
45	'footer': { templateUrl: 'app/partials/footer/footer.html' }	45	'footer': { templateUrl: 'app/partials/footer/footer.html' }
46	}	46	}
47	})	47	})
48	- .state('programas', {
49	- url: '/programas',
50	- views: {
51	- 'header': { templateUrl: 'app/partials/header/header.html' },
52	- 'main': {
53	- templateUrl: 'app/partials/programas/programas.html',
54	- controller: 'ProgramasController',
55	- controllerAs: 'programas'
56	- },
57	- 'footer': { templateUrl: 'app/partials/footer/footer.html' }
58	- }
59	- })
60	.state('programa', {	48	.state('programa', {
61	url: '/programa/:slug',	49	url: '/programa/:slug',
62	views: {	50	views: {
	@@ -28,6 +28,21 @@ $categories-descriptions: (saude: "Saúde é direito de todos e dever do Estado.		@@ -28,6 +28,21 @@ $categories-descriptions: (saude: "Saúde é direito de todos e dever do Estado.
28		28
29	body {	29	body {
30	// font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;	30	// font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
		31	+ &.contraste {
		32	+ color: #fff;
		33	+ background-color: #000;
		34	+
		35	+ a,
		36	+ .btn {
		37	+ color: #fff;
		38	+ background-color: #000;
		39	+ }
		40	+
		41	+ .skip-links a:focus {
		42	+ background-color: #000 !important;
		43	+ border-color: #fff;
		44	+ }
		45	+ }
31	}	46	}
32		47
33		48
1	<div class="container" role="main">	1	<div class="container" role="main">
2	<span class="hide">{{::article.page}}</span>	2	<span class="hide">{{::article.page}}</span>
		3	+
		4	+ <div ng-if="article.loading">
		5	+ <div class="alert alert-info">
		6	+ Carregando conteúdo...
		7	+ </div>
		8	+ </div>
		9	+
		10	+ <div ng-if="article.error">
		11	+ <div class="alert alert-info">
		12	+ Erro ao carregar conteúdo.
		13	+ </div>
		14	+ </div>
		15	+
3	<div ng-if="article.article">	16	<div ng-if="article.article">
4	<article>	17	<article>
5	<header>	18	<header>
1	-.btn-social {
2	- color: #fff;
3	- font-weight: bold;
4	-
5	- &:hover,
6	- &:focus {color: #fff;}
7	-
8	- &.btn-facebook {
9	- background-color: #33477a;
10	- &:hover,
11	- &:focus {background-color: #304373; }
12	- &:active {background-color: #33477a; }
13	- }
14	- &.btn-google-plus {
15	- background-color: #b92d25;
16	- &:hover,
17	- &:focus {background-color: #b12b23; }
18	- &:active {background-color: #b92d25; }
19	- }
20	-}	1	+.auth-content{
21		2
22	-.glyphicon {
23	- &.icon-white {
24	- fill: white;
25	- }
26	-}	3	+ .btn-social {
		4	+ color: #fff;
		5	+ font-weight: bold;
		6	+
		7	+ &:hover,
		8	+ &:focus {color: #fff;}
		9	+
		10	+ &.btn-facebook {
		11	+ background-color: #33477a;
		12	+ &:hover,
		13	+ &:focus {background-color: #304373; }
		14	+ &:active {background-color: #33477a; }
		15	+ }
		16	+ &.btn-google-plus {
		17	+ background-color: #b92d25;
		18	+ &:hover,
		19	+ &:focus {background-color: #b12b23; }
		20	+ &:active {background-color: #b92d25; }
		21	+ }
		22	+ }
		23	+
		24	+ .btn {
		25	+ .contraste & {
		26	+ color: #fff;
		27	+ }
		28	+ }
		29	+ .btn-primary {
		30	+ .contraste & {
		31	+ background-color: #262626;
		32	+ border-color: #666;
		33	+ }
		34	+ }
		35	+
		36	+ .glyphicon {
		37	+ &.icon-white {
		38	+ fill: white;
		39	+ }
		40	+ }
		41	+
		42	+ .separator-or {
		43	+ border-top: 2px solid #d8d8d8;
		44	+ text-align: center;
		45	+ font-weight: bold;
		46	+
		47	+ &:after {
		48	+ content: "ou";
		49	+ position: absolute;
		50	+ top: 4px;
		51	+ left: 50%;
		52	+ margin-left: -26px;
		53	+ font-size: 30px;
		54	+ line-height: 30px;
		55	+ padding: 0 0.25em;
		56	+ background: $gray;
27		57
28	-.separator-or {
29	- border-top: 2px solid #d8d8d8;
30	- text-align: center;
31	- font-weight: bold;
32	-
33	- &:after {
34	- content: "ou";
35	- position: absolute;
36	- top: 4px;
37	- left: 50%;
38	- margin-left: -26px;
39	- font-size: 30px;
40	- line-height: 30px;
41	- padding: 0 0.25em;
42	- background: $gray;
43	- }	58	+ .contraste & {
		59	+ background: #000;
		60	+ }
		61	+ }
		62	+ }
44	}	63	}