|
.tgo_flex{ |
|
display: flex; |
|
justify-content: space-between;/*space-around*/ |
|
} |
|
body { |
|
font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, |
|
"Helvetica Neue", Helvetica, Arial, sans-serif; |
|
} |
|
/*----------------------------------------------------*/ |
|
/* #Habilitar darkmode em uma página */ |
|
@media (prefers-color-scheme: dark) { |
|
body { |
|
background-color: black; |
|
color: white; |
|
} |
|
} |
|
/*----------------------------------------------------*/ |
|
/*----------------------------------------------------*/ |
|
#Botao estilizado arredondado |
|
{ |
|
background: #fed133 !important; |
|
border-bottom-left-radius: 6px !important; |
|
border-bottom-right-radius: 6px !important; |
|
border-bottom-width: 2px !important; |
|
border-color: rgba(0,0,0,.35) !important; |
|
border-left-width: 2px !important; |
|
border-right-width: 2px !important; |
|
border-style: solid !important; |
|
border-top-left-radius: 6px !important; |
|
border-top-right-radius: 6px !important; |
|
border-top-width: 2px !important; |
|
box-shadow: 0px 4px 0px 0px rgba(14,84,159,0.14) !important; |
|
color: rgba(0,0,0,0.62) !important; |
|
font-family: Ubuntu !important; |
|
font-size: 16px !important; |
|
font-weight: 600 !important; |
|
-webkit-letter-spacing: 0 !important; |
|
-moz-letter-spacing: 0 !important; |
|
-ms-letter-spacing: 0 !important; |
|
letter-spacing: 0 !important; |
|
line-height: 1 !important; |
|
margin-bottom: 8px !important; |
|
margin-left: 0px !important; |
|
margin-right: 0px !important; |
|
margin-top: 0px !important; |
|
max-width: 100% !important; |
|
padding-bottom: 14px !important; |
|
padding-left: 12px !important; |
|
padding-right: 12px !important; |
|
padding-top: 14px !important; |
|
text-transform: none !important; |
|
-webkit-text-decoration: none !important; |
|
text-decoration: none !important; |
|
width: 100% !important; |
|
cursor: pointer; |
|
} |
|
/*----------------------------------------------------*/ |
|
#Div fixada bottom |
|
#unverified_bar { |
|
position: fixed; |
|
bottom: 0; |
|
z-index: 999999; |
|
background: #55b559; |
|
color: #fff; |
|
padding: 15px 0; |
|
font-size: 12px; |
|
width: 100%; |
|
font-weight: 700; |
|
padding-left: 40px; |
|
padding-right: 40px; |
|
} |
|
/* |
|
<div id="unverified_bar"> |
|
<p>Content</p> |
|
</div> |
|
*/ |
|
/*----------------------------------------------------*/ |
|
/* Remove o outline dos botoes */ |
|
button { outline: none; } |
|
.btn:focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } |
|
.btn:focus { outline: none !important; } |
|
.btn:focus { box-shadow: none; }/*----------------------------------------------------*/ |
|
/*----------------------------------------------------*/ |
|
/* Key CSS Media Query Applies Classname */ |
|
None None Always .pure-u-* |
|
sm @media screen and (min-width: 35.5em) ≥ 568px .pure-u-sm-* |
|
md @media screen and (min-width: 48em) ≥ 768px .pure-u-md-* |
|
lg @media screen and (min-width: 64em) ≥ 1024px .pure-u-lg-* |
|
xl @media screen and (min-width: 80em) ≥ 1280px .pure-u-xl-* |
|
/*----------------------------------------------------*/ |
|
|
|
@media (min-width: 1200px){ |
|
.container { |
|
max-width: 1140px; |
|
} |
|
} |
|
@media (min-width: 992px){ |
|
.container { |
|
max-width: 960px; |
|
} |
|
} |
|
@media (min-width: 768px){ |
|
.container { |
|
max-width: 720px; |
|
} |
|
} |
|
@media (min-width: 576px){ |
|
.container { |
|
max-width: 540px; |
|
} |
|
} |
|
.container { |
|
width: 100%; |
|
padding-right: 15px; |
|
padding-left: 15px; |
|
margin-right: auto; |
|
margin-left: auto; |
|
} |
|
*, ::after, ::before { |
|
box-sizing: border-box; |
|
} |
|
/*----------------------------------------------------*/ |
|
#Estilizando o title |
|
/* |
|
Opção 1 |
|
#https://jsfiddle.net/z42r2vv0/2/ |
|
*/ |
|
|
|
a { |
|
position: relative; |
|
display: inline-block; |
|
margin-top: 20px; |
|
} |
|
|
|
a[title]:hover:after { |
|
content: attr(title); |
|
position: absolute; |
|
top: -100%; |
|
left: 0; |
|
} |
|
|
|
/* |
|
<a href="http://www.google.com/" title="Hello world!"> |
|
Hover over me |
|
</a> |
|
*/ |
|
|
|
/* |
|
Opção 2 |
|
#https://stackoverflow.com/questions/2011142/how-to-change-the-style-of-the-title-attribute-inside-an-anchor-tag |
|
*/ |
|
|
|
a.tip { |
|
border-bottom: 1px dashed; |
|
text-decoration: none |
|
} |
|
|
|
a.tip:hover { |
|
cursor: help; |
|
position: relative |
|
} |
|
|
|
a.tip span { |
|
display: none |
|
} |
|
|
|
a.tip:hover span { |
|
border: #c0c0c0 1px dotted; |
|
padding: 5px 20px 5px 5px; |
|
display: block; |
|
z-index: 100; |
|
background: url(../images/status-info.png) #f0f0f0 no-repeat 100% 5%; |
|
left: 0px; |
|
margin: 10px; |
|
width: 250px; |
|
position: absolute; |
|
top: 10px; |
|
text-decoration: none |
|
} |
|
/* |
|
<a href="#" class="tip">Link<span>This is the CSS tooltip showing up when you mouse over the link</span></a> |
|
*/ |
|
/*----------------------------------------------------*/ |
|
/* |
|
#Comment box |
|
<div style=' |
|
margin-top: 16px!important; |
|
margin-bottom: 16px!important; |
|
width: auto; |
|
background-color: #04040424; |
|
padding: 8px 12px; |
|
border-left: 4px solid #4CAF50; |
|
word-wrap: break-word; |
|
font-family: Consolas,"courier new"; |
|
font-size: 16px;'> |
|
</div> */ |
|
/*----------------------------------------------------*/ |
|
/* Pre code tag */ |
|
|
|
code, |
|
pre { |
|
display: block; |
|
padding: 9.5px; |
|
margin: 0 0 10px; |
|
font-size: 13px; |
|
line-height: 20px; |
|
word-break: break-all; |
|
word-wrap: break-word; |
|
white-space: pre; |
|
white-space: pre-wrap; |
|
background-color: #f5f5f5; |
|
border: 1px solid #ccc; |
|
border: 1px solid #00000026; |
|
-webkit-border-radius: 4px; |
|
-moz-border-radius: 4px; |
|
border-radius: 4px; |
|
|
|
padding: 0 3px 2px; |
|
font-family: Monaco, Menlo, Consolas, "Courier New", monospace; |
|
font-size: 12px; |
|
color: #333; |
|
-webkit-border-radius: 3px; |
|
-moz-border-radius: 3px; |
|
border-radius: 3px; |
|
} |
|
|
|
/* <pre style="position: relative;"> |
|
{ |
|
"id": "1608574934713" |
|
} |
|
</pre> |
|
*/ |
|
/*----------------------------------------------------*/ |
|
/* Link hover estilizado: |
|
https://jsfiddle.net/TiagoFranca/rc6ga8pj/ */ |
|
/*----------------------------------------------------*/ |
