news_aggregator / static /styles.css
ksvmuralidhar's picture
Upload files
078c1e1 verified
raw
history blame
9.22 kB
html {
scroll-behavior: smooth;
}
@media screen and (min-width: 800px) {
a.headline {
background-color: #E5E4E2;
display: block;
width: relative;
text-decoration: none;
color: black;
line-height: 1.2;
align: justify;
border-left: 5px solid transparent;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 0px;
font-weight: bold;
font-size: 18px;
padding-right: 5px;
font-family: Arial, Helvetica, sans-serif;
}
}
@media screen and (max-width: 800px) {
a.headline {
background-color: #E5E4E2;
display: block;
width: relative;
text-decoration: none;
color: black;
line-height: 1.2;
align: justify;
border-left: 5px solid transparent;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 0px;
font-weight: bold;
font-size: 16.5px;
padding-right: 5px;
font-family: Arial, Helvetica, sans-serif;
}
}
@media screen and (min-width: 800px) {
a.description {
background-color: #E5E4E2;
align:justify;
text-align: justify;
display: block;
height:100%;
width: relative;
text-decoration: none;
border-left: 5px solid transparent;
border-top: 0px;
border-bottom: 7px solid transparent;
border-right: 0px;
font-size: 14px;
padding-right: 5px;
font-family: Arial, Helvetica, sans-serif;
color: dimgrey;
}
}
@media screen and (max-width: 800px) {
a.description {
background-color: #E5E4E2;
align:justify;
text-align: justify;
display: block;
height:100%;
width: relative;
text-decoration: none;
border-left: 5px solid transparent;
border-top: 0px;
border-bottom: 7px solid transparent;
border-right: 0px;
font-size: 12.5px;
padding-right: 5px;
font-family: Arial, Helvetica, sans-serif;
color: dimgrey;
}
}
@media screen and (min-width: 800px) {
a.time {
background-color: #E5E4E2;
align:justify;
display: block;
height:100%;
width: relative;
text-decoration: none;
border-left: 5px solid transparent;
border-top: 0px;
border-bottom: 1px solid transparent;
border-right: 0px;
padding-right: 5px;
font-size: 11px;
padding-bottom: 5px;
font-family: Arial, Helvetica, sans-serif;
color: green;
}
}
@media screen and (max-width: 800px) {
a.time {
background-color: #E5E4E2;
align:justify;
display: block;
height:100%;
width: relative;
text-decoration: none;
border-left: 5px solid transparent;
border-top: 0px;
border-bottom: 1px solid transparent;
border-right: 0px;
padding-right: 5px;
font-size: 10px;
padding-bottom: 5px;
font-family: Arial, Helvetica, sans-serif;
color: green;
}
}
.box {
display: flex;
justify-content: center;
align-items: center;
height: inherit;
padding: 20px;
}
@media screen and (min-width: 800px) {
form {
width: 50%;
overflow-x: hidden;
padding: 20px;
border-radius: 10px;
background: #fff;
box-shadow: 0 0 20px 0 #095484;
}}
@media screen and (max-width: 800px) {
form {
width: 100%;
overflow-x: hidden;
padding: 20px;
border-radius: 10px;
background: #fff;
box-shadow: 0 0 15px 0 #095484;
}}
.banner {
position: relative;
height: 30px;
/* background-size: cover; */
display: flex;
/* justify-content: center; */
/* align-items: center; */
/* text-align: center; */
}
@media screen and (min-width: 800px) {
h1 {
position: absolute;
margin: 0;
padding-left: 50px;
font-size: 25px;
color: black;
z-index: 2;
font-family: Arial, Helvetica, sans-serif;
}
}
@media screen and (max-width: 800px) {
h1 {
position: absolute;
margin: 0;
padding-left: 40px;
font-size: 24px;
color: black;
z-index: 2;
font-family: Arial, Helvetica, sans-serif;
}
}
p.unavailable {
background-color: #E5E4E2;
display: block;
width: 100%;
text-decoration: none;
color: black;
line-height: 1.2;
align: justify;
border-left: 5px solid transparent;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 0px;
font-weight: bold;
font-size: 18px;
padding-right: 5px;
font-family: Arial, Helvetica, sans-serif;
}
div.news-item{
background-color: #E5E4E2;
/*box-shadow: rgba(0, 0, 0, 0.4) -1px 0px 5px, rgba(0, 0, 0, 0.5) 0px 4px 5px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;*/
box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 5px 1px, rgba(0, 0, 0, 0.1) 0px 4px 5px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;
}
div.news-item:hover{
box-shadow: none;
}
@media screen and (min-width: 800px) {
p.srctxt {
align:justify;
text-align: justify;
word-break: break-all;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
}
.logo-img{
margin-right: 10px;
vertical-align: center;
/* position: relative; */
width: 34px;
height: 34px;
}
}
@media screen and (max-width: 800px) {
p.srctxt {
align:justify;
text-align: justify;
word-break: break-all;
font-size: 9px;
font-family: Arial, Helvetica, sans-serif;
}
.logo-img{
margin-right: 10px;
vertical-align: top;
/* position: absolute; */
width: 30px;
height: 30px;
}
}
.float{
position:fixed;
width:25px;
height:25px;
bottom:15px;
right:12px;
background-color: white;
border-radius:50%;
text-align:center;
vertical-align:center;
z-index: 99999998;
font-size:0;
cursor:pointer;
animation: beatan 0.8s infinite alternate;
}
.top-float{
position:fixed;
width:25px;
height:25px;
bottom:52px;
right:12px;
background-color: white;
border-radius:50%;
text-align:center;
vertical-align:center;
z-index: 99999998;
font-size:0;
cursor:pointer;
animation: beatan 0.8s infinite alternate;
}
.my-float{
margin-top:22px;
}
@keyframes beatan{
to { transform: scale(1.1); }
}
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 99999999999;
background: url('../static/loader.gif') 50% 50% no-repeat rgb(255,255,255);
}
.highlight {
background-color: yellow;
font-weight: bold;
}
.input-container {
position: relative;
padding-bottom: 10px;
}
.keyword-input {
border-radius: 5px;
transition: border-color 0.3s ease;
border: 1px solid silver;
width: 10em;
height: 1.5em;
padding-left: 0.5em;
outline: none;
overflow: hidden;
}
.clear-btn {
position: absolute;
font-size: 20px;
left: 129px;
transform: translateY(-105%);
cursor: pointer;
opacity: 0;
transition: opacity 0.3s ease;
}
.clear-btn.show {
opacity: 1;
}
@media screen and (min-width: 800px) {
a.article-category {
background-color: #E5E4E2;
align:justify;
display: block;
height:100%;
width: relative;
text-decoration: none;
border-left: 5px solid transparent;
border-top: 0px;
font-weight: bold;
border-bottom: 1px solid transparent;
border-right: 0px;
padding-right: 5px;
font-size: 11px;
padding-bottom: 0px;
font-family: Arial, Helvetica, sans-serif;
color: green;
}
}
@media screen and (max-width: 800px) {
a.article-category {
background-color: #E5E4E2;
align:justify;
display: block;
height:100%;
font-weight: bold;
width: relative;
text-decoration: none;
border-left: 5px solid transparent;
border-top: 0px;
border-bottom: 1px solid transparent;
border-right: 0px;
padding-right: 5px;
font-size: 10px;
padding-bottom: 0px;
font-family: Arial, Helvetica, sans-serif;
color: green;
}
}
.content {
display: none;
font-family: Arial, Helvetica, sans-serif;
padding-right: 5px;
padding-top: 5px;
border-left: 5px solid transparent;
}
.container{
padding-bottom:10px;
}
.show-similar-button-container{
display: flex;
flex-direction: column;
align-items: center;
}
.similar-news-item:hover {
text-decoration: none;
}
@media screen and (min-width: 800px) {
.similar-news-item {
text-align: justify;
text-decoration: underline;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
color: black;
display:inline-block;
padding-bottom: 10px;
width:100%;
/*white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;*/
}
}
@media screen and (max-width: 800px) {
.similar-news-item {
text-align: justify;
text-decoration: underline;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
color: black;
display:inline-block;
padding-bottom: 8px;
width:100%;
/*white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;*/
}
}
.show-more {
background-color: #E5E4E2;
font-family: Arial, Helvetica, sans-serif;
border-radius:4px;
padding-top:3px;
padding-bottom:3px;
padding-left:3px;
padding-right:3px;
font-size: 12px;
display: box;
border: none;
}
.show-more:hover {
background-color: black;
color: white;
}
.show-less {
background-color: #E5E4E2;
font-family: Arial, Helvetica, sans-serif;
border-radius:4px;
padding-top:3px;
padding-bottom:3px;
padding-left:3px;
padding-right:3px;
font-size: 12px;
border: none;
display: none;
}
.show-less:hover {
background-color: black;
color: white;
}
.word-cloud-container{
word-wrap: break-word;
padding-bottom: 10px;
}
.wc-tokens{
font-family: Arial, Helvetica, sans-serif;
font-size: 13.2px;
cursor: pointer;
}
.wc-tokens:hover{
text-decoration: underline;
}
.word-cloud-section{
padding-bottom: 10px;
display: none;
word-wrap: break-word;
}
.show-more-word-cloud{
padding-bottom: 23px;
text-align: center;
}
.three-dots{
font-size: 30px;
margin: 0;
line-height:0;
vertical-align: top;
padding: 0;
cursor: pointer;
}
.three-dots:hover{
font-size: 25px;
}