openstackweb/news/code/ui/frontend/css/news.css
2014-10-31 16:21:41 -03:00

650 lines
10 KiB
CSS

#important-dates h3 {
font-size: 18px
}
#important-dates {
font-size: 13px
}
.news-item {
border-bottom: 1px solid #edf2f7;
padding-bottom: 30px;
margin-bottom: 30px
}
.grey-bar.news {
margin-bottom: 0;
padding: 20px;
text-align: right
}
.grey-bar.news a {
font-size: 12px;
text-transform: uppercase;
color: #30739C
}
.grey-bar.news a:hover {
color: #2A4E68;
text-decoration: none
}
.grey-bar.news a i {
margin-right: 5px
}
.grey-bar.news a.manage-news-link {
color: #889E2F;
margin-right: 20px
}
.grey-bar.news a.manage-news-link:hover {
color: #5A6E1D
}
.carousel, .carousel-inner {
height: 350px
}
.carousel-inner img {
min-height: 350px;
height: 100%;
min-width: 100%;
max-width: none;
width: auto;
opacity: .6
}
.carousel-inner > .item > a > img, .carousel-inner > .item > img {
min-width: 100%;
max-width: none;
width: 100%
}
@media (max-width: 767px) {
.carousel-inner > .item > a > img, .carousel-inner > .item > img {
width: auto
}
}
.carousel-inner .item {
height: 350px;
background: #2A4E68
}
.carousel-control {
text-shadow: none
}
.carousel-control i {
position: absolute;
top: 50%;
z-index: 5;
display: inline-block
}
.carousel-control.right i {
right: 50%;
margin-top: -15px;
margin-right: -15px
}
.carousel-control.left i {
left: 50%;
margin-top: -15px;
margin-left: -15px
}
.carousel-caption {
text-shadow: none;
bottom: 60px
}
.carousel-caption h3 {
color: #fff
}
.carousel-caption a.more-btn {
display: block;
color: #fff;
background: #DA422F;
border-radius: 4px;
padding: 5px 10px;
margin: 0 auto 20px;
max-width: 150px;
text-transform: uppercase;
font-size: 12px
}
.carousel-caption a.more-btn:hover {
text-decoration: none;
background: #B92623
}
.newsFeatured {
margin: 40px 0 60px;
float: left;
text-align: left;
padding-bottom: 10px;
border-bottom: 1px solid #edf2f7;
min-width: 100% !important
}
.featuredImage {
position: relative;
width: 100%;
height: 180px;
overflow: hidden;
margin-bottom: 10px;
background: #30739C
}
.featuredImage img {
width: 100%
}
.featuredHeadline {
position: absolute;
bottom: 0;
right: 0;
left: 0;
background: rgba(0, 0, 0, .6);
padding: 15px 10px;
font-weight: 400;
color: #fff
}
.featuredHeadline .more {
display: none;
text-align: center;
margin: 30px auto 20px;
text-transform: uppercase;
font-weight: 600;
background: #fff;
border-radius: 2px;
padding: 10px;
width: 150px;
color: #333
}
.featuredHeadline .more i {
margin-left: 8px
}
.featuredHeadline .more:hover {
background: #eee
}
.featuredImage:hover .featuredHeadline, .open .featuredHeadline {
top: 0
}
.featuredImage:hover .more, .open .more {
display: block
}
.featuredImage:hover .featuredDate {
display: none
}
.featuredDate {
font-size: 12px;
position: absolute;
top: 5px;
left: 10px;
color: #fff
}
.featuredSummary {
font-size: 12px;
color: #555
}
ul.featured {
padding: 0;
margin: 0
}
ul.featured li {
list-style: none;
margin-bottom: 30px;
border-radius: 4px
}
@media (max-width: 767px) {
ul.featured li {
margin-bottom: 20px
}
}
.recentBox {
margin-bottom: 30px
}
.itemTimeStamp {
font-size: 12px;
color: #999;
margin-left: 10px;
padding-left: 10px;
border-left: 1px solid #aaa
}
.news-sidebar {
background: #edf2f7;
padding: 15px;
border-radius: 4px;
margin-top: 0
}
.see-all-events {
float: right
}
.see-all-events a {
font-size: 12px
}
.eventBlock {
padding-left: 15px;
font-size: 12px
}
.eventBlock h3 {
margin-bottom: 15px
}
.eventBlock .event {
margin-bottom: 20px
}
.eventBlock .event.top {
margin-top: 20px
}
.main-video-wrapper {
width: 100%;
background: #222;
height: auto;
margin: 0 0 30px;
text-align: center;
-moz-box-sizing: border-box;
box-sizing: border-box
}
a.main-video {
position: relative;
display: block;
max-width: 617px;
margin: 0 auto;
border-left: 1px solid #eee;
border-right: 1px solid #eee
}
a.main-video .video-description-wrapper {
position: absolute;
display: block;
background: rgba(0, 0, 0, .7);
bottom: 0;
left: 0;
right: 0;
top: 230px;
text-align: left;
z-index: 1000;
padding: 20px
}
@media (max-width: 767px) {
a.main-video .video-description-wrapper {
top: 60%
}
}
@media (max-width: 480px) {
a.main-video .video-description-wrapper {
top: 50%
}
}
a.main-video .video-description-wrapper .video-description {
width: 80%;
float: left
}
a.main-video .video-description-wrapper .video-description h3 {
color: #fff;
font-size: 22px;
font-weight: 600;
width: 100%;
height: 25px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis
}
a.main-video .video-description-wrapper .video-description p {
color: #fff;
font-size: 13px;
line-height: 1.2;
font-weight: 400;
padding: 0;
display: block;
width: 100%;
height: 15px;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
a.main-video:hover .video-description-wrapper {
top: 0
}
a.main-video:hover .video-description-wrapper .video-description h3 {
height: 10%;
white-space: normal
}
a.main-video:hover .video-description-wrapper .video-description p {
height: 90%;
white-space: normal
}
@media (max-width: 480px) {
a.main-video:hover .video-description-wrapper {
top: 50%
}
a.main-video:hover .video-description-wrapper .video-description h3 {
height: 25px;
white-space: nowrap
}
a.main-video:hover .video-description-wrapper .video-description p {
height: 15px;
white-space: nowrap
}
}
.main-video img {
margin: 0 auto;
width: 100%;
max-width: 615px;
max-height: 100%;
display: block;
position: relative;
z-index: 1
}
.play-btn {
float: right;
color: #fff;
font-size: 40px;
width: 20%;
margin-top: 5px;
text-align: center
}
.play-btn img#play {
max-width: 70px;
max-height: 70px
}
.featured-row {
width: 100%;
background: #2A4E68;
padding: 0;
position: relative;
display: block;
margin-bottom: 50px
}
.featured-row h2 {
color: #fff;
font-weight: 400;
font-size: 24px
}
.featured-row h2 span {
font-weight: 400;
font-size: 12px;
color: #edf2f7;
margin-left: 20px
}
.featured-row:after {
top: 100%;
left: 10%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(42, 78, 104, 0);
border-top-color: #2A4E68;
border-width: 15px;
margin-left: -15px
}
.daily-recap-wrapper .video-thumb-title {
text-align: center
}
.video-thumb {
background: #edf2f7;
text-align: center;
width: 100%;
height: 138px;
min-height: 138px;
position: relative;
display: table;
overflow: hidden;
margin-bottom: 20px
}
.thumb-play {
display: none;
background-image: url(//www.openstack.org/themes/openstack/images/landing-pages/auto/play-button.png);
background-repeat: no-repeat;
background-position: center center;
background-color: rgba(0, 0, 0, .3);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0
}
.video-thumb:hover .thumb-play {
display: block
}
.video-thumb img.video-thumb-img {
width: 100%;
max-width: 100%;
height: 138px
}
.video-thumb p {
color: #C6CDD6;
font-size: 14px;
font-weight: 700;
display: table-cell;
vertical-align: middle
}
.sort-row {
background: #edf2f7;
width: 100%;
min-height: 50px;
padding: 25px 0;
position: relative;
display: block;
margin: 50px 0;
color: #2A4E68
}
.sort-left {
float: left
}
.sort-left i {
color: #b4c5d6;
line-height: 1;
margin-right: 10px
}
.sort-left i:hover {
color: #2A4E68;
cursor: pointer
}
.sort-left i.active {
color: #2A4E68
}
.sort-right {
float: right;
font-size: 12px;
text-transform: uppercase;
font-weight: 600
}
.sort-right i {
margin-left: 10px;
font-weight: 700;
font-size: 14px
}
.video-thumb-title {
margin: -10px 0 0;
color: #30739C;
font-size: 12px;
font-weight: 400;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.video-thumb-speaker {
color: #30739C;
font-size: 12px;
font-weight: 600;
margin-bottom: 40px;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.video-dropdown > .dropdown-menu {
margin: 20px -20px 0;
padding: 10px 0;
min-width: 230px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
left: -99%;
right: 100%;
background-color: #edf2f7;
background-clip: padding-box;
border: 1px solid transparent;
box-shadow: none
}
.video-dropdown > .dropdown-menu li a {
text-transform: uppercase;
padding: 13px 20px;
font-size: 12px;
color: #2A4E68
}
.video-dropdown > .dropdown-menu li a:hover {
color: #fff;
background: #2A4E68
}
.video-dropdown > .dropdown-menu li a:focus {
outline: 0
}
.newSubNav {
width: 85%
}
.newSubNav ul {
padding: 0;
margin-top: 30px;
margin-left: -10px
}
.newSubNav ul:nth-child(2) {
border-top: 1px solid #E8E8E8;
padding-top: 30px
}
.newSubNav li {
list-style: none
}
.newSubNav a {
color: #8A959E;
text-transform: uppercase;
font-size: 12px;
padding: 15px 20px;
display: block
}
.newSubNav a.current, .newSubNav a.current:hover {
background-color: #EDF2F7;
font-weight: 700;
color: #2D709B
}
.newSubNav a:hover {
text-decoration: none;
color: #000
}
.newSubNav .fa-chevron-right {
float: right;
margin-top: 2px;
color: #C6D8E4
}
li#start a {
color: #75C320
}
li#openstack-shared-services {
padding-bottom: 20px;
border-bottom: 1px solid #E8E8E8
}
li#start {
margin-top: 20px
}
fieldset {
border: 1px solid #CCC;
padding: 20px 17px;
margin-bottom: 20px
}
fieldset ul {
list-style: none
}
input[type=radio] {
margin-left: 0
}
input[type=checkbox] {
margin-left: 0 !important
}
input[type=checkbox], input[type=radio] {
display: inline-block
}