-
-
Save sergiospagnuolo/b9bcbcf729802989e15c782a67a45de9 to your computer and use it in GitHub Desktop.
Observatório de impulsionamento de conteúdo nas eleições
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
library(shiny) | |
library(shinydashboard) | |
library(tidyverse) | |
library(lubridate) | |
library(htmlwidgets) | |
library(DT) | |
#desabilita notação científica para números | |
options(scipen = 999) | |
options(shiny.sanitize.errors = FALSE) | |
ui <- dashboardPage( | |
dashboardHeader(), | |
dashboardSidebar(collapsed = TRUE), | |
dashboardBody( | |
tags$head( | |
tags$link(rel = "stylesheet", type = "text/css", href = "custom.css"), | |
tags$style(type="text/css", | |
".shiny-output-error { visibility: hidden; }", | |
".shiny-output-error:before { visibility: hidden; }" | |
) | |
), | |
fluidRow( | |
column(4, | |
column(6,uiOutput('estados')), | |
column(6,uiOutput('legenda')), | |
column(6,uiOutput('cargos')), | |
column(6,uiOutput('politicos')), | |
column(6, | |
textInput(inputId = "valor_custom", | |
label = tags$div(icon("money-bill", class = "icons"), | |
'Valor mínimo', tags$br(), | |
tags$span(style="font-weight:300;font-size:0.7em;line-height:1.3em", "Filtre por valor acima de R$1")), | |
value = "", | |
placeholder = "Apenas números")), | |
column(6, | |
selectInput(inputId = "rede", | |
label = tags$div(icon("share-alt-square", class = "icons"), | |
'Redes', tags$br(), | |
tags$span(style="font-weight:300;font-size:0.7em;line-height:1.3em", "Selecione uma rede")), | |
choices = c("Todas", | |
"Facebook", | |
"Google", | |
"ByteDance (TikTok)" = "ByteDance", | |
"YouTube"), | |
selected = "Todas" | |
) | |
), | |
column(12, | |
dateRangeInput(inputId = "data", | |
label = tags$div(icon("calendar", class = "icons"), | |
'Datas (dd/mm/aa)',tags$br(), | |
tags$span(style="font-weight:300;font-size:0.7em;line-height:1.3em", "Desde início de agosto")), | |
start = "2022-08-04", end = Sys.Date(), | |
min = "2022-08-04", max = Sys.Date(), | |
format = "dd/mm/yyyy", weekstart = 0, | |
language = "pt", separator = " ATÉ ", | |
width = NULL, autoclose = TRUE), | |
) | |
), | |
valueBox(textOutput("n_gastos"), "gastos com rubrica \"impulsionamento\"", icon = icon("list-alt")), | |
valueBox(textOutput("n_candidatos"), "candidatos impulsionaram conteúdo", icon = icon("users")), | |
valueBox(textOutput("total_gasto"), "gastos com rubrica \"impulsionamento\"", icon = icon("money-bill")), | |
valueBox(textOutput("media_gasto"), "foi a média de gastos", icon = icon("grip-lines")), | |
valueBox(textOutput("maior_gasto"), "foi o maior gasto", icon = icon("sort-up")), | |
valueBox(textOutput("menor_gasto"), "foi o menor gasto", icon = icon("sort-down")), | |
tags$div(style="padding:20px", | |
DT::DTOutput("table"), | |
) | |
) | |
) | |
) | |
server <- function(input, output) { | |
dt <- reactive({ | |
d <- read.csv("https://docs.google.com/spreadsheets/d/e/2PACX-1vQw_zM_7VqGQ0tuxEvmYVBOR1hK702jiThBeKc9NmNWOQGKKD78f-4OKLmLJqRQwD37snObfdEW4jzl/pub?gid=0&single=true&output=csv", header = T) | |
d <- d %>% | |
filter(DS_ORIGEM_DESPESA == "Despesa com Impulsionamento de Conteúdos") | |
d$valor <- gsub(".", "", d$VR_DESPESA_CONTRATADA) | |
d$valor <- as.numeric(gsub(",", ".", d$VR_DESPESA_CONTRATADA)) | |
d$DT_DESPESA <- as_date(d$DT_DESPESA,format="%d/%m/%Y") | |
#d$DT_DESPESA <- sub("^0+", "", d$DT_DESPESA) | |
d <- d %>% | |
select(NM_CANDIDATO, SG_PARTIDO, DS_CARGO, DT_DESPESA,valor, SG_UF, ST_TURNO, NR_CNPJ_PRESTADOR_CONTA, DS_TIPO_FORNECEDOR, NM_FORNECEDOR, NM_FORNECEDOR_RFB, DS_DESPESA, DS_ORIGEM_DESPESA) %>% | |
rename(Candidato = NM_CANDIDATO, | |
Partido = SG_PARTIDO, | |
Cargo = DS_CARGO, | |
"Turno" = ST_TURNO, | |
UF = SG_UF, | |
"Valor" = valor, | |
"Descrição" = DS_DESPESA, | |
"Data da despesa" = DT_DESPESA, | |
"CNPJ prestador" = NR_CNPJ_PRESTADOR_CONTA, | |
"Tipo de fornecedor" = DS_TIPO_FORNECEDOR, | |
"Nome do fornecedor" = NM_FORNECEDOR, | |
"Nome do prestador" = NM_FORNECEDOR_RFB, | |
"Origem da despesa" = DS_ORIGEM_DESPESA | |
) | |
return(d) | |
}) | |
output$estados <- renderUI({ | |
d <- dt() | |
selectizeInput(inputId = "uf", | |
#multiple = TRUE, | |
label = tags$div(icon("map-marker-alt", class = "icons"), | |
'UF', tags$br(), tags$span(style="font-weight:300;font-size:0.7em;line-height:1.3em", "Escolha um cargo.")), | |
choices = c("Todas", as.list(unique(d$UF))), | |
selected = "Todas") | |
}) | |
output$legenda <- renderUI({ | |
d <- dt() | |
selectizeInput(inputId = "partido", | |
#multiple = TRUE, | |
label = tags$div(icon("paste", class = "icons"), | |
'Partidos', tags$br(), tags$span(style="font-weight:300;font-size:0.7em;line-height:1.3em", "Escolha um partido")), | |
choices = c("Todos", as.list(unique(d$Partido))), | |
selected = "Todos") | |
}) | |
output$cargos <- renderUI({ | |
d <- dt() | |
selectizeInput(inputId = "cargo", | |
#multiple = TRUE, | |
label = tags$div(icon("suitcase", class = "icons"), | |
'Cargo', tags$br(), tags$span(style="font-weight:300;font-size:0.7em;line-height:1.3em", "Escolha um ou mais cargos")), | |
choices = c("Todos", as.list(unique(d$Cargo))), | |
selected = "Todos") | |
}) | |
output$politicos <- renderUI({ | |
d <- dt() | |
d <- d %>% arrange(Candidato) | |
selectizeInput(inputId = "politico", | |
#multiple = TRUE, | |
label = tags$div(icon("user", class = "icons"), | |
'Candidato', tags$br(), tags$span(style="font-weight:300;font-size:0.7em;line-height:1.3em", "Escolha um candidato")), | |
choices = c("Todos", as.list(unique(d$Candidato))), | |
selected = "Todos", | |
multiple = FALSE) | |
}) | |
dados <- reactive({ | |
d <- dt() | |
d <- d %>% filter(`Data da despesa` >= input$data[1] & `Data da despesa` <= input$data[2]) | |
if (input$partido != "Todos") { | |
d <- d %>% filter(Partido == input$partido) | |
} | |
if(input$uf != "Todas"){ | |
d <- d %>% filter(UF == input$uf) | |
} | |
if(input$cargo != "Todos"){ | |
d <- d %>% filter(Cargo == input$cargo) | |
} | |
if(input$politico != "Todos"){ | |
d <- d %>% filter(Candidato == input$politico) | |
} | |
if(input$valor_custom != ""){ | |
d <- d %>% filter(Valor >= input$valor_custom) | |
} | |
if(input$rede != "Todas"){ | |
d <- d %>% filter(str_detect(Descrição, regex(input$rede, ignore_case = TRUE)) | | |
str_detect(`Nome do prestador`, regex(input$rede, ignore_case = TRUE)) | | |
str_detect(`Nome do fornecedor`, regex(input$rede, ignore_case = TRUE)) | |
) | |
} | |
return(d) | |
}) | |
# STATS | |
output$n_gastos <- renderText({ | |
d <- dados() | |
d <- d %>% | |
tally() | |
paste0(format(round(d$n, 1), big.mark=".", small.mark = ",")) | |
}) | |
output$n_candidatos <- renderText({ | |
d <- dados() | |
d <- d %>% | |
n_distinct(na.rm = FALSE) | |
paste0(format(round(d), big.mark=".", small.mark = ",")) | |
}) | |
output$total_gasto <- renderText({ | |
d <- dados() | |
d <- d %>% | |
summarise(t = sum(Valor)) | |
paste0("R$", format(round(d$t, 0), big.mark=".", small.mark = ",")) | |
}) | |
output$media_gasto <- renderText({ | |
d <- dados() | |
d <- d %>% | |
summarise(t = mean(Valor)) | |
paste0("R$", format(round(d$t, 0), big.mark=".", small.mark = ",")) | |
}) | |
output$maior_gasto <- renderText({ | |
d <- dados() | |
d <- d %>% | |
summarise(t = max(Valor)) | |
paste0("R$", format(round(d$t, 0), big.mark=".", small.mark = ",")) | |
}) | |
output$menor_gasto <- renderText({ | |
d <- dados() | |
d <- d %>% | |
summarise(t = min(Valor)) | |
paste0("R$", format(round(d$t, 0), big.mark=".", small.mark = ",")) | |
}) | |
output$table <- DT::renderDT({ | |
# Importa os dados principais e filtra pelas datas do input$date | |
main_table <- dados() | |
# Gera a tabela principal | |
main_table | |
}, escape = FALSE, | |
filter = "top", | |
callback=JS('$(\'div.has-feedback input[type="search"]\').attr( "placeholder", "Busca" )'), | |
extensions = c("Buttons", "Scroller"), | |
rownames = FALSE, | |
# CONFIGURACOES GERAIS DA TABELA | |
options = list( | |
#language = list(searchPlaceholder = "Busca por palavra-chave...", | |
# zeroRecords = "Não há resultados para a sua busca.", | |
# sSearch = ""), | |
scrollY = 500, scroller = TRUE, scrollX = T, | |
pageLength = 50, | |
lengthMenu = list( c(10, 50, 100, -1) # declare values | |
, c(10, 50, 100, "Todos") # declare titles | |
), | |
dom = 'fBlrtip', | |
buttons = | |
list('copy', list( | |
extend = 'collection', | |
buttons = c('csv', 'excel'), | |
text = 'Baixe os dados', | |
exportOptions = list( | |
modifiers = list(selected = TRUE) | |
) | |
)), | |
language = list( | |
lengthMenu = "Mostrando _MENU_ registros", | |
buttons = list(copy = 'Copiar tabela', | |
copyTitle = "Tabela copiada com sucesso", | |
copySuccess = "%d linhas copiadas"), | |
info = 'FONTE: TSE/Análise Núcleo Jornalismo', | |
paginate = list(previous = 'Anterior', `next` = 'Próxima'), | |
processing = "CARREGANDO OS DADOS...", | |
searchPlaceholder = "Busque em todas as colunas", | |
search = "", | |
emptyTable = "INICIE SUA BUSCA POR TERMOS DE PESQUISA", | |
zeroRecords = "SEM RESULTADOS PARA MOSTRAR, FAÇA NOVA BUSCA"), | |
info = TRUE | |
) | |
# Fecha DT::datatable | |
) | |
} | |
shinyApp(ui, server) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;700&display=swap'); | |
body, .content-wrapper, .right-side{ | |
background-color: #eeeeee !important; | |
font-family: 'Barlow', sans-serif !important; | |
font-size: 16px; | |
} | |
aside, .navbar, .main-header, .main-sidebar{ | |
display:none | |
} | |
.skin-blue .left-side, .skin-blue .main-sidebar, .skin-blue .wrapper { | |
background-color: #eeeeee !important; | |
} | |
.shiny-input-container:not(.shiny-input-container-inline){ | |
width: 100% !important; | |
} | |
h1, h2, h3, h4, h5, h6{ | |
font-family: 'Barlow', sans-serif !important; | |
} | |
h1{ | |
font-size: 18px; | |
font-weight: bold; | |
margin-top: 12px; | |
} | |
h3{ | |
font-size: 1em; | |
font-weight: 700; | |
} | |
h4{ | |
font-size: 16px; | |
font-weight: 300 | |
} | |
h5{ | |
font-size: 11px; | |
} | |
h6{ | |
background-color: #eeeeee; | |
margin-top: 15px; | |
border-radius: 5px; | |
padding: 3px; | |
font-weight: 700; | |
color: #000; | |
float: right; | |
} | |
p{ | |
margin: 0 0 12px; | |
font-size: 0.9em; | |
} | |
tspan{ | |
font-family: 'Barlow', Sans-Serif; | |
font-size: 1.2em; | |
} | |
.inner{ | |
background-color: #eeeeee; | |
color: #000; | |
border: 2px solid #0fb872; | |
font-family: 'Barlow', Sans-Serif; | |
} | |
.shiny-text-output{ | |
display: inline; | |
} | |
#engagement-display_media_movel{ | |
display:inline; | |
text-decoration: underline | |
} | |
.irs--shiny .irs-bar { | |
top: 25px; | |
height: 8px; | |
border-top: 1px solid #0fb872; | |
border-bottom: 1px solid #0fb872; | |
background: #0fb872; | |
} | |
td{ | |
font-size: 0.9em !important; | |
} | |
th{ | |
text-align: center !important; | |
} | |
code{ | |
font-size: 75%; | |
padding: 0 4px 0 0 !important; | |
} | |
.irs { | |
font-family: Barlow, sans-serif; | |
} | |
.irs-line { | |
overflow: inherit; | |
top: 25px; | |
height: 8px; | |
background: linear-gradient(to bottom, #dedede -50%, white 150%); | |
background-color: #ededed; | |
border: 1px solid #cccccc; | |
border-radius: 8px; | |
} | |
.irs-grid-text{ | |
color: #000; | |
} | |
.selectize-input{ | |
font-size: 0.9em; | |
} | |
.well{ | |
/*background-color: #ababab; */ | |
border: 1px solid #ababab; | |
color: #000; | |
margin-top: 14px; | |
} | |
.irs-min, .irs-max{ | |
color: #ffffff; | |
background: #231f20; | |
display: none; | |
} | |
.irs-single{ | |
background:#ffffff; | |
color: #4b31dd; | |
display: none; | |
} | |
.selectize-control.multi .selectize-input > div{ | |
background:#555; | |
font-weight: 700; | |
color: #fff; | |
} | |
.container-fluid { | |
padding-left: 0 !important; | |
padding-right: 0 !important; | |
} | |
.header{ | |
background-color: #4b31dd; | |
color: #fff; | |
padding: 0.1px 10px 10px 15px; | |
margin-top: 15px; | |
border-radius: 3px; | |
} | |
.explain{ | |
margin-bottom: 20px; | |
font-size: 11px; | |
} | |
.form-group{ | |
margin-bottom: 0; | |
margin-top: 0; | |
} | |
.form-control{ | |
} | |
.control-label{ | |
float: left; | |
margin-right: 20px; | |
margin-top: 0px !important; | |
margin-left: 0px !important; | |
margin-bottom: 10px; | |
} | |
.shiny-input-container{ | |
margin-bottom: 10px; | |
} | |
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover { | |
color: #eeeeee; | |
background-color: #4b31dd; | |
border-radius: 15px; | |
} | |
.navbar-nav{ | |
display: block !important; | |
margin: 10px auto !important; | |
float: none !important; | |
max-width: 100vw !important; | |
text-align: center; | |
} | |
.navbar-nav>li>a { | |
padding: 5px 12px; | |
} | |
.container-fluid{ | |
color: #231f20; | |
background-color: #eeeeee; | |
} | |
.twitter-tweet{ | |
width: 100%; | |
} | |
#trends-tweets{ | |
display: block; | |
overflow: auto; | |
min-width: 100% !important; | |
} | |
.desc{ | |
margin: 30px 1% 0 0 !important; | |
} | |
.desc > table > tobody > tr > td{ | |
border-right: 1px solid black; | |
} | |
.desc h4 { | |
font-size: 0.8em; | |
color: #fff; | |
background-color: #4b31dd; | |
padding: 10px 8px ; | |
border-radius: 8px; | |
display: inline; | |
font-weight: 300; | |
} | |
.desc p{ | |
font-size: 1em; | |
} | |
.destaque{ | |
font-size: 1.3em; | |
line-height: 1.8em; | |
font-weight: 400; | |
background-color: #eeeeee; | |
color: #231f20; | |
display: inline; | |
padding: 3px 0; | |
} | |
.destaque a{ | |
color: #4b31dd; | |
} | |
.destaque a:hover{ | |
color: #fff; | |
text-decoration: none; | |
} | |
.destaque span{ | |
font-weight: 700; | |
border: #4b31dd 1px solid; | |
color: #4b31dd; | |
background-color: #eeeeee; | |
padding: 1px 5px; | |
border-radius: 5px; | |
font-size: 1.2em; | |
} | |
.destaque span:hover{ | |
font-weight: 700; | |
border: #f33872 1px solid; | |
color: #fff; | |
background-color: #f33872; | |
padding: 1px 5px; | |
border-radius: 5px; | |
font-size: 1.2em; | |
} | |
hr{ | |
border-top: 2px solid #4b31dd; | |
} | |
.icons{ | |
color: #0fb872; | |
} | |
.dataTables_wrapper .dataTables_filter { | |
float: left !important; | |
text-align: left !important; | |
} | |
#DataTables_Table_0_filter, | |
#DataTables_Table_1_filter, | |
#DataTables_Table_2_filter, | |
#DataTables_Table_3_filter, | |
#DataTables_Table_4_filter, | |
#DataTables_Table_5_filter, | |
#DataTables_Table_6_filter, | |
#DataTables_Table_7_filter, | |
#DataTables_Table_8_filter, | |
#DataTables_Table_9_filter, | |
#DataTables_Table_10_filter, | |
#DataTables_Table_11_filter, | |
#DataTables_Table_12_filter, | |
#DataTables_Table_13_filter, | |
#DataTables_Table_14_filter, | |
#DataTables_Table_15_filter | |
{ | |
width: 100%; | |
} | |
input::placeholder{ | |
color: #4b31dd !important; | |
font-size: 0.9em; | |
opacity: 1; | |
font-weight: 300; | |
} | |
#DataTables_Table_0_filter input, #DataTables_Table_1_filter input, #DataTables_Table_2_filter input, #DataTables_Table_3_filter input, #DataTables_Table_4_filter input, #DataTables_Table_5_filter input, #DataTables_Table_6_filter input, #DataTables_Table_7_filter input, #DataTables_Table_8_filter input, #DataTables_Table_9_filter input, #DataTables_Table_10_filter input, #DataTables_Table_11_filter input, #DataTables_Table_12_filter input, #DataTables_Table_13_filter input, #DataTables_Table_14_filter input, #DataTables_Table_15_filter input { | |
width: 100%; | |
/*max-width: 650px;*/ | |
border-width: 2px; | |
background-color: #eeeeee; | |
border-color: #0fb872 !important; | |
border-radius: 8px; | |
border-style: solid; | |
padding: 6px 12px; | |
text-align: center; | |
margin-right: 15px; | |
color: #231f20; | |
margin-bottom:15px; | |
} | |
#DataTables_Table_0_filter label, | |
#DataTables_Table_1_filter label, | |
#DataTables_Table_2_filter label, | |
#DataTables_Table_3_filter label, | |
#DataTables_Table_4_filter label, | |
#DataTables_Table_5_filter label, | |
#DataTables_Table_6_filter label, | |
#DataTables_Table_7_filter label, | |
#DataTables_Table_8_filter label, | |
#DataTables_Table_9_filter label, | |
#DataTables_Table_10_filter label, | |
#DataTables_Table_11_filter label, | |
#DataTables_Table_12_filter label, | |
#DataTables_Table_13_filter label, | |
#DataTables_Table_14_filter label, | |
#DataTables_Table_15_filter label | |
{ | |
display: block !important; | |
} | |
#tweets-conexoes{ | |
margin: 10px 0; | |
} | |
.btn-group-sm>.btn, .btn-sm { | |
padding: 2.5px 5px; | |
font-size: 10px; | |
border-radius: 3px; | |
} | |
.btn-primary { | |
color: #231f20; | |
font-weight: 300; | |
background-color: #ffffff; | |
border-color: #4b31dd; | |
} | |
.btn-primary.active, .btn-primary:active, .open>.dropdown-toggle.btn-primary { | |
color: #fff; | |
background-color: #4b31dd; | |
border-color: #4b31dd; | |
} | |
.btn-primary:hover { | |
color: #fff; | |
background-color: #4b31dd; | |
border-color: #4b31dd; | |
} | |
.btn-group, .btn-group-vertical { | |
margin: 2px; | |
} | |
/* CARDS */ | |
.wrapper { | |
max-width: 100%; | |
width: 100%; | |
margin: 5px auto 20px; | |
min-height: 500px; | |
} | |
.columns { | |
display: flex; | |
flex-flow: row wrap; | |
justify-content: center; | |
margin: 5px 0; | |
} | |
.column { | |
flex: 1; | |
box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px; | |
margin: 2px; | |
padding: 10px 30px 20px; | |
font-size: 0.75em !important; | |
line-height: 1.8em; | |
} | |
.column:first-child { margin-left: 0; } | |
.column:last-child { margin-right: 0; } | |
@media screen and (max-width: 980px) { | |
.columns .column { | |
margin-bottom: 5px; | |
flex-basis: 40%; | |
} | |
.columns .column:nth-last-child(2) { | |
margin-right: 0; | |
} | |
.columns .column:last-child { | |
flex-basis: 100%; | |
margin: 0; | |
} | |
} | |
@media screen and (max-width: 680px) { | |
.columns .column { | |
flex-basis: 100%; | |
margin: 0 0 5px 0; | |
} | |
} | |
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { | |
color: #fff; | |
cursor: default; | |
background-color: #4b31dd; | |
border: 1px solid #4b31dd; | |
border-bottom-color: transparent; | |
} | |
.nav-tabs>li>a { | |
color: #0fb872; | |
margin-right: 2px; | |
line-height: 1.42857143; | |
border: 0px solid transparent; | |
border-radius: 4px 4px 0 0; | |
} | |
.nav-tabs { | |
border-bottom: 1px solid #ddd; | |
} | |
#resumo-date-label{ | |
margin-bottom: 5px !important; | |
} | |
/* carousel*/ | |
carousel { | |
width: 100%%; | |
display: inline; | |
} | |
carousel page { | |
position: absolute; | |
top: 2em; | |
min-height: 350px; | |
left: 0; | |
width: 100%; | |
transform: scale(0); | |
} | |
carousel page label { | |
cursor: pointer; | |
background: #2eefa0; | |
} | |
carousel #page1cb:checked ~ #page1 { | |
transform: scale(1); | |
} | |
carousel #page2cb:checked ~ #page2 { | |
transform: scale(1); | |
} | |
carousel #page3cb:checked ~ #page3 { | |
transform: scale(1); | |
} | |
.html-widget.gauge svg { | |
height: 240px; | |
} | |
/* RADIO BUTTONS */ | |
.columns input[type="radio"]{ | |
display: none; | |
} | |
#option-1:checked:checked ~ .option-1, | |
#option-2:checked:checked ~ .option-2{ | |
border-color: #0069d9; | |
background: #0069d9; | |
color: #f33872; | |
} | |
#option-1:checked:checked ~ .option-1 .dot::before, | |
#option-2:checked:checked ~ .option-2 .dot::before{ | |
opacity: 1; | |
transform: scale(1); | |
} | |
.wrapper .option span{ | |
font-size: 20px; | |
color: #808080; | |
} | |
#option-1:checked:checked ~ .option-1 span, | |
#option-2:checked:checked ~ .option-2 span{ | |
color: #fff; | |
} | |
#conteudo-horas_trends{ | |
display: inline; | |
font-weight: 700; | |
} | |
#popularity-conexoes-label{ | |
width: 100%; | |
height: 5px; | |
} | |
#popularity-chartTerms-label, #popularity-date-label, #engagement-date-label, #engagement-metrica-label{ | |
margin-bottom: 5px; | |
} | |
.btn-default { | |
color: #fff; | |
background-color: #4b31dd; | |
border-color: #4b31dd; | |
} | |
.btn-default:hover { | |
background-color: #0fb872; | |
} | |
.wrapper .option span { | |
font-size: 0.7em; | |
color: #000; | |
text-transform: uppercase; | |
} | |
.wrapper .option span:hover{ | |
color: #fff; | |
} | |
/* TABS */ | |
.prodNav { | |
font-size:0.76em; | |
background: #f5f5f5; | |
border-radius: 20px; | |
overflow: hidden; | |
display: inline-block; | |
vertical-align: middle; | |
margin: 10px 0 20px; | |
line-height: 1.1; | |
padding-left: 0; | |
} | |
.prodNav .ptItem { | |
padding: 9px 15px; | |
line-height: 20px; | |
border-radius: 20px; | |
border: 1px solid transparent; | |
font-weight: 500; | |
cursor: pointer; | |
display: inline-block; | |
vertical-align: middle; | |
transition: all 0.3s ease-in-out; | |
} | |
.prodNav .ptItem.active, | |
.prodNav .ptItem:hover { | |
background: #4b31dd; | |
border-color: #4b31dd; | |
color: #ffffff; | |
} | |
.prodBody { | |
border: 1px solid #c1c1c1; | |
padding: 20px; | |
border-radius: 5px; | |
font-size: 14px; | |
} | |
.prodBody a{ | |
color: #000} | |
.prodMain { | |
display: none; | |
padding: 20px; | |
color: #ffffff; | |
} | |
.prodMain.active { | |
display: block; | |
} | |
#pTab1C { | |
background: #f33872; | |
} | |
#pTab2C { | |
background: #0fb872; | |
} | |
#pTab3C { | |
background: #e2a805; | |
} | |
.pretty { | |
margin-left: -10px; | |
} | |
/* ESTILOS DOS LINKS-CARDS */ | |
.cards-table td, .cards-table th{ | |
text-align: left; | |
} | |
.card-link a{ | |
color: #4b31dd; | |
} | |
.card-link a:hover{ | |
color: #0fb872; | |
} | |
.card-title{ | |
font-size: 1.4em; | |
font-weight: bold; | |
margin-top: 12px; | |
} | |
.card-head{ | |
font-size: 1em; | |
font-weight: 700; | |
text-transform: uppercase; | |
} | |
.card-desc{ | |
margin: 0 0 12px; | |
font-size: 1.1em; | |
} | |
.card-meta{ | |
font-weight: 300; | |
} | |
.img-destak{ | |
float:right; | |
max-width:300px; | |
margin: 0 0 20px 30px; | |
} | |
@media screen and (max-width: 980px){ | |
.img-destak{ | |
margin: 20px 0x; | |
} | |
} | |
/* CARDS */ | |
.wrapper { | |
max-width: 100%; | |
width: 100%; | |
margin: 5px auto 20px; | |
min-height: 500px; | |
} | |
.columns { | |
display: flex; | |
flex-flow: row wrap; | |
justify-content: center; | |
margin: 5px 0; | |
} | |
.column { | |
flex: 1; | |
box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px; | |
margin: 2px; | |
padding: 10px 30px 20px; | |
font-size: 0.75em !important; | |
line-height: 1.8em; | |
} | |
.column:first-child { margin-left: 0; } | |
.column:last-child { margin-right: 0; } | |
@media screen and (max-width: 680px) { | |
.mob-hide{ | |
display: none; | |
} | |
.columns .column { | |
margin-bottom: 5px; | |
flex-basis: 40%; | |
} | |
.columns .column:nth-last-child(2) { | |
margin-right: 0; | |
} | |
.columns .column:last-child { | |
flex-basis: 100%; | |
margin: 0; | |
} | |
.cards-pol{ | |
margin-right:20px; | |
} | |
} | |
@media screen and (max-width: 680px) { | |
.columns .column { | |
flex-basis: 100%; | |
margin: 0 0 5px 0; | |
} | |
} | |
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { | |
color: #fff; | |
cursor: default; | |
background-color: #4b31dd; | |
border: 1px solid #4b31dd; | |
border-bottom-color: transparent; | |
} | |
.nav-tabs>li>a { | |
color: #0fb872; | |
margin-right: 2px; | |
line-height: 1.42857143; | |
border: 0px solid transparent; | |
border-radius: 4px 4px 0 0; | |
} | |
.nav-tabs { | |
border-bottom: 1px solid #ddd; | |
} | |
#resumo-date-label{ | |
margin-bottom: 5px !important; | |
} | |
/* carousel*/ | |
carousel { | |
width: 100%%; | |
display: inline; | |
} | |
carousel page { | |
position: absolute; | |
top: 2em; | |
min-height: 350px; | |
left: 0; | |
width: 100%; | |
transform: scale(0); | |
} | |
carousel page label { | |
cursor: pointer; | |
background: #2eefa0; | |
} | |
carousel #page1cb:checked ~ #page1 { | |
transform: scale(1); | |
} | |
carousel #page2cb:checked ~ #page2 { | |
transform: scale(1); | |
} | |
carousel #page3cb:checked ~ #page3 { | |
transform: scale(1); | |
} | |
.html-widget.gauge svg { | |
height: 240px; | |
} | |
/* RADIO BUTTONS */ | |
.columns input[type="radio"]{ | |
display: none; | |
} | |
#option-1:checked:checked ~ .option-1, | |
#option-2:checked:checked ~ .option-2{ | |
border-color: #0069d9; | |
background: #0069d9; | |
color: #f33872; | |
} | |
#option-1:checked:checked ~ .option-1 .dot::before, | |
#option-2:checked:checked ~ .option-2 .dot::before{ | |
opacity: 1; | |
transform: scale(1); | |
} | |
.wrapper .option span{ | |
font-size: 20px; | |
color: #808080; | |
} | |
#option-1:checked:checked ~ .option-1 span, | |
#option-2:checked:checked ~ .option-2 span{ | |
color: #fff; | |
} | |
#conteudo-horas_trends{ | |
display: inline; | |
font-weight: 700; | |
} | |
#popularity-conexoes-label{ | |
width: 100%; | |
height: 5px; | |
} | |
#popularity-chartTerms-label, #popularity-date-label, #engagement-date-label, #engagement-metrica-label{ | |
margin-bottom: 5px; | |
} | |
.btn-default { | |
color: #fff; | |
background-color: #4b31dd; | |
border-color: #4b31dd; | |
} | |
.btn-default:hover { | |
background-color: #0fb872; | |
} | |
.wrapper .option span { | |
font-size: 0.7em; | |
color: #000; | |
text-transform: uppercase; | |
} | |
.wrapper .option span:hover{ | |
color: #fff; | |
} | |
/* TABS */ | |
.prodNav { | |
font-size:0.76em; | |
background: #f5f5f5; | |
border-radius: 20px; | |
overflow: hidden; | |
display: inline-block; | |
vertical-align: middle; | |
margin: 10px 0 20px; | |
line-height: 1.1; | |
padding-left: 0; | |
} | |
.prodNav .ptItem { | |
padding: 9px 15px; | |
line-height: 20px; | |
border-radius: 20px; | |
border: 1px solid transparent; | |
font-weight: 500; | |
cursor: pointer; | |
display: inline-block; | |
vertical-align: middle; | |
transition: all 0.3s ease-in-out; | |
} | |
.prodNav .ptItem.active, | |
.prodNav .ptItem:hover { | |
background: #4b31dd; | |
border-color: #4b31dd; | |
color: #ffffff; | |
} | |
.prodBody { | |
border: 1px solid #c1c1c1; | |
padding: 20px; | |
border-radius: 5px; | |
font-size: 14px; | |
} | |
.prodBody a{ | |
color: #000} | |
.prodMain { | |
display: none; | |
padding: 20px; | |
color: #ffffff; | |
} | |
.prodMain.active { | |
display: block; | |
} | |
#pTab1C { | |
background: #f33872; | |
} | |
#pTab2C { | |
background: #0fb872; | |
} | |
#pTab3C { | |
background: #e2a805; | |
} | |
.pretty { | |
margin-left: -10px; | |
} | |
.shiny-input-checkboxgroup label~.shiny-options-group{ | |
margin-bottom: 8px; | |
} | |
/* ESTILOS DOS LINKS-CARDS */ | |
.cards-table td, .cards-table th{ | |
text-align: left; | |
} | |
.card-link a{ | |
color: #4b31dd; | |
} | |
.card-link a:hover{ | |
color: #0fb872; | |
} | |
.card-title{ | |
font-size: 1.4em; | |
font-weight: bold; | |
margin-top: 12px; | |
} | |
.card-head{ | |
font-size: 1em; | |
font-weight: 700; | |
text-transform: uppercase; | |
} | |
.card-desc{ | |
margin: 0 0 12px; | |
font-size: 1.1em; | |
} | |
.card-meta{ | |
font-weight: 300; | |
} | |
.img-destak{ | |
float:right; | |
max-width:300px; | |
margin: 0 0 20px 30px; | |
} | |
@media screen and (max-width: 680px){ | |
.img-destak{ | |
margin: 20px 0x; | |
} | |
} | |
/* Tabela responsiva */ | |
.tabela { | |
/*border: 1px solid #000000;*/ | |
border-collapse: collapse; | |
margin: 20px auto 0; | |
padding: 0px; | |
table-layout: fixed; | |
min-width: 100%; | |
} | |
.tabela th { | |
text-align: center; | |
border: 1px solid #4b31dd; | |
font-weight: bold; | |
text-align: center; | |
} | |
.tabela td { | |
font-size: 0.85em; | |
padding: 5px; | |
border: 1px solid #4b31dd; | |
} | |
.tabela tr { | |
background-color: #eeeeee; | |
color: #000000; | |
text-align: center; | |
} | |
.tabela .mobile-head { | |
display: none; | |
} | |
.tabela .show-on-mobile { | |
display: none; | |
} | |
@media screen and (max-width: 800px) { | |
.tabela { | |
border: 0px solid #4b31dd; | |
border-collapse: collapse; | |
margin: 20px auto 0; | |
padding: 0px; | |
table-layout: fixed; | |
min-width: 100%; | |
} | |
.tabela td { | |
padding: 8px; | |
border: 1px solid #4b31dd; | |
display: block; | |
text-align: right; | |
width: 100%\9; | |
float: left\9; | |
} | |
.tabela tr { | |
background-color: #dddddd; | |
color: #000000; | |
text-align: right; | |
margin: 8px; | |
} | |
.tabela tr:first-child { | |
display: none; | |
} | |
.tabela tr { | |
display: block; | |
} | |
.tabela td:not(:first-child) { | |
border-top: 0px; | |
} | |
.tabela .mobile-head { | |
font-weight: bold; | |
color: #000000; | |
float: left; | |
text-align: left; | |
display: block; | |
} | |
.tabela .show-on-mobile { | |
display: block; | |
} | |
} | |
.inicio { | |
font-size: 1.1em; | |
} | |
.inicio span{ | |
padding: 0px 5px; | |
position: relative; | |
background: #FFBB99; | |
cursor: pointer; | |
} | |
small{ | |
font-weight: 300; | |
font-size: 13px; | |
font-family: monospace; | |
} | |
.destaques{ | |
padding: 12px; | |
margin: 8px; | |
border: 2px solid #4b31dd; | |
border-radius: 10px; | |
min-height: 220px; | |
} | |
#posts-mode > label{ | |
display: none; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment