mirror of
https://github.com/TeamNewPipe/website
synced 2025-10-06 00:22:38 +02:00
cleaing up css
This commit is contained in:
Lukas Walter
336
css/blog.css
336
css/blog.css
@@ -1,51 +1,58 @@
|
||||
body, html {
|
||||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial;
|
||||
}
|
||||
|
||||
body.modal-open {
|
||||
padding: 0!important;
|
||||
padding: 0 !important;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.container .container {
|
||||
width:auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.container.container-double {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
@media (min-width: 768px){
|
||||
|
||||
/* Small devices (tablets, 768px and up) */
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container.container-double {
|
||||
padding-left: 45px;
|
||||
padding-right: 45px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px){
|
||||
.container.container-double {
|
||||
padding-left: 60px;
|
||||
padding-right: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small devices (tablets, 768px and up) */
|
||||
@media (min-width: 768px) {
|
||||
.text-justify-sm {
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
|
||||
/* Medium devices (desktops, 992px and up) */
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.container.container-double {
|
||||
padding-left: 60px;
|
||||
padding-right: 60px;
|
||||
}
|
||||
.text-justify-md {
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large devices (large desktops, 1200px and up) */
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.text-justify-lg {
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
|
||||
.row.is-flex {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
@@ -55,6 +62,7 @@ body.modal-open {
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.row.is-flex > [class*='col-'] {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
@@ -66,69 +74,84 @@ body.modal-open {
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.red, .red:hover {
|
||||
|
||||
.red,
|
||||
.red:hover {
|
||||
color: #cd201f;
|
||||
}
|
||||
|
||||
.f-droid {
|
||||
width: 160px;
|
||||
}
|
||||
a:hover, a:focus {
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.border-white {
|
||||
border: 3px solid white;
|
||||
}
|
||||
|
||||
.navbar-brand .border-white {
|
||||
border: 2px solid white;
|
||||
}
|
||||
|
||||
|
||||
/* Header */
|
||||
|
||||
#header {
|
||||
-webkit-box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.175);
|
||||
-moz-box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.175);
|
||||
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.175);
|
||||
-webkit-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.175);
|
||||
-moz-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.175);
|
||||
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.175);
|
||||
}
|
||||
|
||||
.header-wrapper {
|
||||
background: rgba(170, 29, 29, 0.85);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.header-background {
|
||||
background: url('img/bg_large2.jpg') center center;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top:0;
|
||||
left:0;
|
||||
z-index: -1;
|
||||
background: url('img/bg_large2.jpg') center center;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.header-wrapper h3 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.header-text {
|
||||
margin-bottom: 40px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header-wrapper .f-droid-wrapper {
|
||||
position: relative;
|
||||
bottom: -25px;
|
||||
}
|
||||
|
||||
.header-wrapper .f-droid-wrapper {
|
||||
-webkit-box-shadow: 0px -1px 8px black, 0px 3px 8px black;
|
||||
-moz-box-shadow: 0px -1px 8px black, 0px 3px 8px black;
|
||||
box-shadow: 0px -1px 8px black, 0px 3px 8px black;
|
||||
-moz-border-radius:5px;
|
||||
-webkit-border-radius:5;
|
||||
border-radius:5px;
|
||||
-webkit-box-shadow: 0 -1px 8px black, 0 3px 8px black;
|
||||
-moz-box-shadow: 0 -1px 8px black, 0 3px 8px black;
|
||||
box-shadow: 0 -1px 8px black, 0 3px 8px black;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.header-wrapper .f-droid-wrapper:hover {
|
||||
-webkit-box-shadow: 0px -1px 9px black, 0px 3px 9px black;
|
||||
-moz-box-shadow: 0px -1px 9px black, 0px 3px 9px black;
|
||||
box-shadow: 0px -1px 9px black, 0px 3px 9px black;
|
||||
-webkit-box-shadow: 0 -1px 9px black, 0 3px 9px black;
|
||||
-moz-box-shadow: 0 -1px 9px black, 0 3px 9px black;
|
||||
box-shadow: 0 -1px 9px black, 0 3px 9px black;
|
||||
}
|
||||
|
||||
.header-box-wrapper > .container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-box-wrapper .phone {
|
||||
display: inline;
|
||||
position: absolute;
|
||||
@@ -137,6 +160,7 @@ a:hover, a:focus {
|
||||
height: 450px;
|
||||
width: calc(350 / 713 * 450px);
|
||||
}
|
||||
|
||||
.header-box-wrapper .logo {
|
||||
width: auto;
|
||||
position: absolute;
|
||||
@@ -144,13 +168,16 @@ a:hover, a:focus {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.header-box-wrapper .logo > img {
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
.header-box-wrapper .phone > img {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.header-box-wrapper .phone > video {
|
||||
height: 554px;
|
||||
/* z-index: 1; */
|
||||
@@ -159,6 +186,7 @@ a:hover, a:focus {
|
||||
left: 7.3px;
|
||||
width: calc(328 / 553 * 350px);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.header-box-wrapper .pull-left {
|
||||
float: none !important;
|
||||
@@ -178,7 +206,8 @@ a:hover, a:focus {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px){
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.header-text {
|
||||
margin-bottom: 100px;
|
||||
width: auto;
|
||||
@@ -189,12 +218,12 @@ a:hover, a:focus {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Navigation */
|
||||
|
||||
.navbar {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/*.navbar-wrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -202,20 +231,23 @@ a:hover, a:focus {
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
}*/
|
||||
|
||||
.navbar-full-bg {
|
||||
background: #AA1D1D;
|
||||
background: rgba(170,29,29,0.95);
|
||||
background: rgba(170, 29, 29, 0.95);
|
||||
padding-top: 7px;
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
|
||||
.navbar-inverse {
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.navbar-inverse .badge {
|
||||
display: inline;
|
||||
background-color: #a7a7a7;
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-brand {
|
||||
padding-top: 24px;
|
||||
padding-bottom: 24px;
|
||||
@@ -224,11 +256,13 @@ a:hover, a:focus {
|
||||
font-weight: 500;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-brand .navbar-logo {
|
||||
height: 36px;
|
||||
position: absolute;
|
||||
margin-top: calc((36px - 14px) / -2);
|
||||
}
|
||||
|
||||
.navbar-full-bg .navbar-inverse .navbar-brand {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
@@ -241,6 +275,7 @@ a:hover, a:focus {
|
||||
line-height: 14px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.navbar-full-bg .navbar-inverse .navbar-brand > span {
|
||||
line-height: 18px;
|
||||
font-size: 18px;
|
||||
@@ -248,26 +283,34 @@ a:hover, a:focus {
|
||||
margin-bottom: -2px;
|
||||
margin-left: 46px;
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-nav > li > a {
|
||||
color: white;
|
||||
line-height: 14px;
|
||||
}
|
||||
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover {
|
||||
|
||||
.navbar-inverse .navbar-nav > .active > a,
|
||||
.navbar-inverse .navbar-nav > .active > a:focus,
|
||||
.navbar-inverse .navbar-nav > .active > a:hover {
|
||||
background: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
padding-top: 17px;
|
||||
padding-bottom: 17px;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
margin-right: 20px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
#header.navbar-full-bg {
|
||||
padding: 0;
|
||||
@@ -288,11 +331,15 @@ a:hover, a:focus {
|
||||
padding-left: 0;
|
||||
margin-left: 15px;
|
||||
}
|
||||
.navbar-header > .navbar-toggle, .navbar-header > .navbar-toggle:hover, .navbar-header > .navbar-toggle:focus {
|
||||
.navbar-header > .navbar-toggle,
|
||||
.navbar-header > .navbar-toggle:hover,
|
||||
.navbar-header > .navbar-toggle:focus {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover {
|
||||
.navbar-inverse .navbar-nav > .active > a,
|
||||
.navbar-inverse .navbar-nav > .active > a:focus,
|
||||
.navbar-inverse .navbar-nav > .active > a:hover {
|
||||
font-weight: normal;
|
||||
}
|
||||
.navbar-collapse {
|
||||
@@ -308,9 +355,11 @@ a:hover, a:focus {
|
||||
strong.extra {
|
||||
font-size: 125%;
|
||||
}
|
||||
|
||||
.separator {
|
||||
border-top: 2px solid white;
|
||||
}
|
||||
|
||||
.donate {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
@@ -322,10 +371,13 @@ strong.extra {
|
||||
font-size: 125%;
|
||||
transition: background 0.75s;
|
||||
}
|
||||
.donate:hover, .donate:focus {
|
||||
|
||||
.donate:hover,
|
||||
.donate:focus {
|
||||
background: #AA1D1D;
|
||||
}
|
||||
@media (max-width: 767px){
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.text-2 {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
@@ -335,67 +387,78 @@ strong.extra {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Footer */
|
||||
|
||||
#footer {
|
||||
-webkit-box-shadow: 0px -4px 4px 0px rgba(0,0,0,0.175);
|
||||
-moz-box-shadow: 0px -4px 4px 0px rgba(0,0,0,0.175);
|
||||
box-shadow: 0px -4px 4px 0px rgba(0,0,0,0.175);
|
||||
-webkit-box-shadow: 0 -4px 4px 0 rgba(0, 0, 0, 0.175);
|
||||
-moz-box-shadow: 0 -4px 4px 0 rgba(0, 0, 0, 0.175);
|
||||
box-shadow: 0 -4px 4px 0 rgba(0, 0, 0, 0.175);
|
||||
background: #b31c1b;
|
||||
width: 100%;
|
||||
min-height: 170px;
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#footer,
|
||||
#footer a,
|
||||
#footer a:hover {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#footer .image-holder {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
top: -45px;
|
||||
}
|
||||
|
||||
#footer .image-puffer,
|
||||
.image-puffer {
|
||||
padding-bottom: 70px;
|
||||
}
|
||||
|
||||
#footer .footer-logo {
|
||||
height: 90px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#footer .footer-links {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#footer .footer-links > span {
|
||||
flex-basis: 100%;
|
||||
width: 100%;
|
||||
padding: 7px 0;
|
||||
}
|
||||
|
||||
#footer .footer-links > .line-break {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#footer-main-links {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
#footer-main-links .footer-links {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#footer-copyright {
|
||||
padding: 30px 15px 15px 15px;
|
||||
padding: 30px 15px 15px;
|
||||
background: #9a1817;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#copyright-span {
|
||||
order: 10;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#footer .footer-links {
|
||||
flex-direction: row;
|
||||
@@ -435,90 +498,99 @@ strong.extra {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.extra-space {
|
||||
height: 20px;
|
||||
}
|
||||
.border-left {
|
||||
border-left: 2px solid #d0cdcd;
|
||||
border-left: 2px solid #f3eff2;
|
||||
border-left: 2px solid white;
|
||||
}
|
||||
.col-md-9.border-left {
|
||||
margin-left: 15px;
|
||||
width: calc(75% - 15px);
|
||||
-webkit-box-shadow: -4px 0px 4px 0px rgba(0,0,0,0.175);
|
||||
-moz-box-shadow: -4px 0px 4px 0px rgba(0,0,0,0.175);
|
||||
box-shadow: -4px 0px 4px 0px rgba(0,0,0,0.175);
|
||||
-webkit-box-shadow: -4px 0 4px 0 rgba(0, 0, 0, 0.175);
|
||||
-moz-box-shadow: -4px 0 4px 0 rgba(0, 0, 0, 0.175);
|
||||
box-shadow: -4px 0 4px 0 rgba(0, 0, 0, 0.175);
|
||||
}
|
||||
.border-right {
|
||||
border-right: 2px solid #d0cdcd;
|
||||
border-right: 2px solid #f3eff2;
|
||||
border-right: 2px solid white;
|
||||
}
|
||||
.col-md-9.border-right {
|
||||
-webkit-box-shadow: 4px 0px 4px 0px rgba(0,0,0,0.175);
|
||||
-moz-box-shadow: 4px 0px 4px 0px rgba(0,0,0,0.175);
|
||||
box-shadow: 4px 0px 4px 0px rgba(0,0,0,0.175);
|
||||
-webkit-box-shadow: 4px 0 4px 0 rgba(0, 0, 0, 0.175);
|
||||
-moz-box-shadow: 4px 0 4px 0 rgba(0, 0, 0, 0.175);
|
||||
box-shadow: 4px 0 4px 0 rgba(0, 0, 0, 0.175);
|
||||
}
|
||||
.col-md-9.border-left.border-right {
|
||||
-webkit-box-shadow: -4px 0px 4px 0px rgba(0,0,0,0.175), 4px 0px 4px 0px rgba(0,0,0,0.175);
|
||||
-moz-box-shadow: -4px 0px 4px 0px rgba(0,0,0,0.175), 4px 0px 4px 0px rgba(0,0,0,0.175);
|
||||
box-shadow: -4px 0px 4px 0px rgba(0,0,0,0.175), 4px 0px 4px 0px rgba(0,0,0,0.175);
|
||||
-webkit-box-shadow: -4px 0 4px 0 rgba(0, 0, 0, 0.175), 4px 0 4px 0 rgba(0, 0, 0, 0.175);
|
||||
-moz-box-shadow: -4px 0 4px 0 rgba(0, 0, 0, 0.175), 4px 0 4px 0 rgba(0, 0, 0, 0.175);
|
||||
box-shadow: -4px 0 4px 0 rgba(0, 0, 0, 0.175), 4px 0 4px 0 rgba(0, 0, 0, 0.175);
|
||||
}
|
||||
.image-puffer {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Posts */
|
||||
|
||||
.col-img {
|
||||
text-align: center;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.col-img > img {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.navbar-fixed-top ~ .post-collection {
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
.post-collection {
|
||||
background: #E2DEE0;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.post-collection a {
|
||||
color: #CD322E;
|
||||
}
|
||||
|
||||
.post-collection a:hover {
|
||||
color: #AA1D1D;
|
||||
}
|
||||
|
||||
.post.single-article {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
color: #cd201f;
|
||||
}
|
||||
|
||||
.single-post {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
.border-box {
|
||||
border: 2px solid white;
|
||||
margin-bottom: 20px;
|
||||
padding: 15px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.border-box:hover {
|
||||
background: #d0cdcd;
|
||||
border: 3px solid white;
|
||||
border-right-width: 2px;
|
||||
padding: 14px 15px 14px 14px;
|
||||
}
|
||||
|
||||
.border-box .categories {
|
||||
margin-top: 15px;
|
||||
}
|
||||
@media (min-width: 767px){
|
||||
|
||||
@media (min-width: 767px) {
|
||||
.border-box .anchor-right-small {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
@@ -532,12 +604,12 @@ strong.extra {
|
||||
top: -3px;
|
||||
right: -18px;
|
||||
width: 18px;
|
||||
#background: linear-gradient(to right, #f3eff2 0%, white 100%);
|
||||
border-top: 3px solid #AA1D1D;
|
||||
border-bottom: 3px solid #AA1D1D;
|
||||
display: block;
|
||||
}
|
||||
.border-box .anchor-right-full, .border-box .anchor-right-full-light {
|
||||
.border-box .anchor-right-full,
|
||||
.border-box .anchor-right-full-light {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: -17px;
|
||||
@@ -545,7 +617,8 @@ strong.extra {
|
||||
width: 15px;
|
||||
background: white;
|
||||
}
|
||||
.border-box:hover .anchor-right-full, .border-box:hover .anchor-right-full-light {
|
||||
.border-box:hover .anchor-right-full,
|
||||
.border-box:hover .anchor-right-full-light {
|
||||
top: -3px;
|
||||
right: -18px;
|
||||
bottom: -3px;
|
||||
@@ -557,6 +630,7 @@ strong.extra {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.border-box > .row {
|
||||
margin-left: 0;
|
||||
@@ -573,19 +647,23 @@ strong.extra {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.post-collection {
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.postImg {
|
||||
max-height: 33vh;
|
||||
}
|
||||
}
|
||||
|
||||
.postImg[src*=".svg"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#mediaFileView .fa-times {
|
||||
color: white;
|
||||
position: absolute;
|
||||
@@ -593,12 +671,15 @@ strong.extra {
|
||||
top: 25px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#screenshots #mediaFileView .fa-times {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#mediaFileView .fa-times:before {
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.img-full-width {
|
||||
max-width: 85vw;
|
||||
max-height: 85vh;
|
||||
@@ -607,6 +688,7 @@ strong.extra {
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) !important;
|
||||
}
|
||||
|
||||
@media (min-width: 767px) {
|
||||
#mediaFileView .fa-times {
|
||||
right: 40px;
|
||||
@@ -616,28 +698,36 @@ strong.extra {
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
|
||||
/*
|
||||
#sidebar {
|
||||
-webkit-box-shadow: inset 4px 0px 4px 0px rgba(0,0,0,0.175);
|
||||
-moz-box-shadow: inset 4px 0px 4px 0px rgba(0,0,0,0.175);
|
||||
box-shadow: inset 4px 0px 4px 0px rgba(0,0,0,0.75);
|
||||
box-shadow: inset 6px 0px 4px -4px rgba(0,0,0,0.175);
|
||||
-webkit-box-shadow: inset 4px 0 4px 0 rgba(0,0,0,0.175);
|
||||
-moz-box-shadow: inset 4px 0 4px 0 rgba(0,0,0,0.175);
|
||||
box-shadow: inset 4px 0 4px 0 rgba(0,0,0,0.75);
|
||||
box-shadow: inset 6px 0 4px -4px rgba(0,0,0,0.175);
|
||||
}*/
|
||||
|
||||
.sidebar .list-group h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sidebar .list-group .active {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.sidebar .list-group .active, .sidebar .list-group > *, .sidebar .list-group a {
|
||||
|
||||
.sidebar .list-group .active,
|
||||
.sidebar .list-group > *,
|
||||
.sidebar .list-group a {
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.sidebar .list-group a:hover {
|
||||
color: #CD322E;
|
||||
}
|
||||
|
||||
.sidebar .list-group a .icon {
|
||||
width: 0;
|
||||
float: left;
|
||||
@@ -648,6 +738,7 @@ strong.extra {
|
||||
-o-transition: width 0s ease-in-out;
|
||||
transition: width 0s ease-in-out;
|
||||
}
|
||||
|
||||
.sidebar .list-group a:hover .icon {
|
||||
width: 15px;
|
||||
-webkit-transition: width 1s ease-in-out;
|
||||
@@ -657,27 +748,31 @@ strong.extra {
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
|
||||
.pagination > li > a {
|
||||
color: #CD322E;
|
||||
}
|
||||
.pagination > li > a:hover, .pagination > li > a.active {
|
||||
|
||||
.pagination > li > a:hover,
|
||||
.pagination > li > a.active {
|
||||
color: #AA1D1D;
|
||||
background-color: #f3eff2;
|
||||
border-color: #d0cdcd;
|
||||
}
|
||||
|
||||
.pagination > li > a.disabled {
|
||||
cursor: default;
|
||||
}
|
||||
@media (max-width: 767px){
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.sidebar {
|
||||
border-top: 2px solid white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Search */
|
||||
|
||||
@media (min-width: 767px){
|
||||
@media (min-width: 767px) {
|
||||
.nav.navbar-nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -689,81 +784,102 @@ strong.extra {
|
||||
li.search-container a {
|
||||
padding: 0;
|
||||
}
|
||||
li.search-container button, li.search-container button:hover, li.search-container button:hover:active, li.search-container button:active, li.search-container button:focus {
|
||||
li.search-container button,
|
||||
li.search-container button:hover,
|
||||
li.search-container button:hover:active,
|
||||
li.search-container button:active,
|
||||
li.search-container button:focus {
|
||||
background: none;
|
||||
color: white;
|
||||
border-width: 0px;
|
||||
border-width: 0;
|
||||
}
|
||||
.input-group .form-control.search-input {
|
||||
float: right;
|
||||
width:0;
|
||||
width: 0;
|
||||
transition: width 0.65s ease-out 0.75s, padding 0.0s ease-out 1.4s, border 0s linear 1.45s;
|
||||
padding: 0;
|
||||
border: 0px solid rgb(204, 204, 204);
|
||||
border: 0 solid rgb(204, 204, 204);
|
||||
}
|
||||
.input-group .form-control.search-input:hover, .input-group .form-control.search-input:focus, .input-group .form-control.search-input:active, .input-group:hover .form-control.search-input {
|
||||
.input-group .form-control.search-input:hover,
|
||||
.input-group .form-control.search-input:focus,
|
||||
.input-group .form-control.search-input:active,
|
||||
.input-group:hover .form-control.search-input {
|
||||
width: 100%;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid rgb(204, 204, 204);
|
||||
transition: width 0.65s ease-out 0s, padding 0.0s ease-in 0.0s, border 0s linear 0.0s;
|
||||
}
|
||||
}
|
||||
|
||||
div.search-container {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
div.search-container button:hover {
|
||||
background: #f3eff2;
|
||||
color: #AA1D1D;
|
||||
}
|
||||
div.search-container button:active, div.search-container button:focus, div.search-container button:hover:active {
|
||||
|
||||
div.search-container button:active,
|
||||
div.search-container button:focus,
|
||||
div.search-container button:hover:active {
|
||||
color: #AA1D1D;
|
||||
}
|
||||
div.search-container button:focus, div.search-container input:focus {
|
||||
|
||||
div.search-container button:focus,
|
||||
div.search-container input:focus {
|
||||
border: 1px solid #AA1D1D;
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 10px rgba(170,29,29,0.95);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.noTransition {
|
||||
transition: all 0s !important;
|
||||
}
|
||||
|
||||
.category.post-preview {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
|
||||
/* Sticky footer */
|
||||
|
||||
#page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: #E2DEE0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: #E2DEE0;
|
||||
}
|
||||
#header, #footer {
|
||||
flex: none;
|
||||
|
||||
#header,
|
||||
#footer {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.height-full-parent {
|
||||
display: -ms-flex; display: -webkit-flex; display: flex;
|
||||
display: -ms-flex;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.height-full-child {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.post-collection {
|
||||
flex: 1 0 auto;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
/** Comments **/
|
||||
|
||||
#comments {
|
||||
margin-top: 20px;
|
||||
#background: #f3eff2;
|
||||
}
|
||||
|
||||
#comments > h4 {
|
||||
font-weight: bold;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
#comments-separator {
|
||||
width: calc(100% + 60px);
|
||||
border-top: 2px solid white;
|
||||
@@ -771,6 +887,7 @@ div.search-container button:focus, div.search-container input:focus {
|
||||
margin-left: -30px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
@media (min-width: 767px) {
|
||||
.comments-separator {
|
||||
width: calc(100% + 15px);
|
||||
@@ -787,29 +904,39 @@ div.search-container button:focus, div.search-container input:focus {
|
||||
#comments .text-wrapper > .text {
|
||||
float: left;
|
||||
}
|
||||
#comments .text-wrapper > .text h1, #comments .text-wrapper > .text h2,
|
||||
#comments .text-wrapper > .text h3, #comments .text-wrapper > .text h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#comments .text-wrapper > .text h1,
|
||||
#comments .text-wrapper > .text h2,
|
||||
#comments .text-wrapper > .text h3,
|
||||
#comments .text-wrapper > .text h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#comments .text-wrapper > .text h5 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#comments .text-wrapper > .text h6 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#comments .text-wrapper > .text blockquote {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
#comments .isso-postbox > .form-wrapper .textarea:focus,
|
||||
#comments .isso-postbox > .form-wrapper input:focus {
|
||||
border-color: #AA1D1D;
|
||||
}
|
||||
|
||||
#comments .isso-postbox {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#comments .isso-postbox > .form-wrapper .text-wrapper {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#comments .isso-postbox > .form-wrapper .textarea-wrapper .markdown-info {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
@@ -829,21 +956,26 @@ div.search-container button:focus, div.search-container input:focus {
|
||||
margin: 0 0 .3em;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#comments .isso-postbox > .form-wrapper .preview .isso-comment {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#comments .isso-postbox > .form-wrapper > .auth-section .post-action > * {
|
||||
background: white;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
#comments .isso-postbox > .form-wrapper > .auth-section .post-action > *:hover {
|
||||
border-color: #AA1D1D;
|
||||
}
|
||||
|
||||
#comments .isso-postbox > .form-wrapper > .auth-section .input-wrapper,
|
||||
#comments .isso-postbox > .form-wrapper > .auth-section .post-action {
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
|
||||
#comments .isso-postbox > .form-wrapper > .auth-section .post-action > span.info-icon {
|
||||
line-height: 28px;
|
||||
font-size: 20px;
|
||||
@@ -859,16 +991,20 @@ div.search-container button:focus, div.search-container input:focus {
|
||||
line-height: 34px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#comments-info-modal table {
|
||||
border: none;
|
||||
}
|
||||
|
||||
#comments-info-modal table tr td {
|
||||
padding-bottom: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
#comments-info-modal table tr td pre {
|
||||
margin-bottom: 0;
|
||||
white-space: -o-pre-wrap; /* Opera 7 */
|
||||
white-space: -o-pre-wrap;
|
||||
/* Opera 7 */
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
@@ -5,6 +5,7 @@
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#isso-thread a {
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -13,14 +14,17 @@
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#isso-thread > h4 {
|
||||
color: #555;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#isso-thread .textarea {
|
||||
min-height: 58px;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
#isso-thread .textarea.placeholder {
|
||||
color: #AAA;
|
||||
}
|
||||
@@ -32,13 +36,16 @@
|
||||
padding: 15px;
|
||||
background: #E2DEE0;
|
||||
}
|
||||
|
||||
#isso-root > .isso-comment {
|
||||
border: 2px solid white;
|
||||
}
|
||||
|
||||
.isso-comment:not(:first-of-type),
|
||||
.isso-follow-up .isso-comment {
|
||||
border-top: 1px solid rgba(256, 256, 256, 0.6);
|
||||
}
|
||||
|
||||
.isso-comment > div.avatar,
|
||||
.isso-postbox > .avatar {
|
||||
display: block;
|
||||
@@ -46,6 +53,7 @@
|
||||
width: 7%;
|
||||
margin: 3px 15px 0 0;
|
||||
}
|
||||
|
||||
.isso-postbox > .avatar {
|
||||
float: left;
|
||||
margin: 5px 10px 0 5px;
|
||||
@@ -53,6 +61,7 @@
|
||||
height: 48px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.isso-comment > div.avatar > svg,
|
||||
.isso-postbox > .avatar > svg {
|
||||
max-width: 48px;
|
||||
@@ -61,23 +70,29 @@
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.isso-comment > div.text-wrapper {
|
||||
display: felx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
}
|
||||
|
||||
.isso-comment .isso-follow-up {
|
||||
padding-left: calc(7% + 20px);
|
||||
}
|
||||
.isso-comment > div.text-wrapper > .isso-comment-header, .isso-comment > div.text-wrapper > .isso-comment-footer {
|
||||
|
||||
.isso-comment > div.text-wrapper > .isso-comment-header,
|
||||
.isso-comment > div.text-wrapper > .isso-comment-footer {
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
.isso-comment > div.text-wrapper > .isso-comment-header {
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.isso-comment > div.text-wrapper > .isso-comment-header .spacer {
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.isso-comment > div.text-wrapper > .isso-comment-header .spacer,
|
||||
.isso-comment > div.text-wrapper > .isso-comment-header a.permalink,
|
||||
.isso-comment > div.text-wrapper > .isso-comment-header .note,
|
||||
@@ -86,28 +101,32 @@
|
||||
font-weight: normal;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
.isso-comment > div.text-wrapper > .isso-comment-header .spacer:hover,
|
||||
.isso-comment > div.text-wrapper > .isso-comment-header a.permalink:hover,
|
||||
.isso-comment > div.text-wrapper > .isso-comment-header .note:hover,
|
||||
.isso-comment > div.text-wrapper > .isso-comment-header a.parent:hover {
|
||||
color: #606060 !important;
|
||||
}
|
||||
|
||||
.isso-comment > div.text-wrapper > .isso-comment-header .note {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.isso-comment > div.text-wrapper > .isso-comment-header .author {
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
}
|
||||
.isso-comment > div.text-wrapper > .textarea-wrapper .textarea {
|
||||
margin-top: 0.2em;
|
||||
}
|
||||
|
||||
.isso-comment > div.text-wrapper > .textarea-wrapper .textarea,
|
||||
.isso-comment > div.text-wrapper > div.text p {
|
||||
margin-top: 0.2em;
|
||||
}
|
||||
|
||||
.isso-comment > div.text-wrapper > div.text p:last-child {
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
|
||||
.isso-comment > div.text-wrapper > div.text h1,
|
||||
.isso-comment > div.text-wrapper > div.text h2,
|
||||
.isso-comment > div.text-wrapper > div.text h3,
|
||||
@@ -117,46 +136,57 @@
|
||||
font-size: 130%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.isso-comment > div.text-wrapper > div.textarea-wrapper .textarea {
|
||||
width: 100%;
|
||||
border: 1px solid white;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 2px #888;
|
||||
}
|
||||
|
||||
.isso-comment > div.text-wrapper > .isso-comment-footer {
|
||||
font-size: 0.80em;
|
||||
color: gray !important;
|
||||
clear: left;
|
||||
}
|
||||
|
||||
.isso-comment > div.text-wrapper > .isso-comment-footer a {
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.isso-comment > div.text-wrapper > .isso-comment-footer a:hover {
|
||||
color: #333 !important;
|
||||
/*text-shadow: #aaaaaa 0 0 1px !important;*/
|
||||
}
|
||||
|
||||
.isso-comment > div.text-wrapper > .isso-comment-footer > a {
|
||||
position: relative;
|
||||
top: .2em;
|
||||
}
|
||||
.isso-comment > div.text-wrapper > .isso-comment-footer > a + a {
|
||||
|
||||
.isso-comment > div.text-wrapper > .isso-comment-footer > a+a {
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
.isso-comment > div.text-wrapper > .isso-comment-footer .votes {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.isso-comment > div.text-wrapper > .isso-comment-footer .upvote svg,
|
||||
.isso-comment > div.text-wrapper > .isso-comment-footer .downvote svg {
|
||||
position: relative;
|
||||
top: .2em;
|
||||
}
|
||||
|
||||
.isso-comment > div.text-wrapper > .isso-comment-footer .spacer {
|
||||
padding: 0 3px;
|
||||
}
|
||||
|
||||
.isso-comment .isso-postbox {
|
||||
margin-top: 0.8em;
|
||||
}
|
||||
|
||||
.isso-comment.isso-no-votes span.votes {
|
||||
display: none;
|
||||
}
|
||||
@@ -165,14 +195,17 @@
|
||||
max-width: 68em;
|
||||
margin: 0 auto 2em;
|
||||
}
|
||||
|
||||
.isso-postbox > .form-wrapper {
|
||||
display: block;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.isso-postbox > .form-wrapper > .auth-section,
|
||||
.isso-postbox > .form-wrapper > .auth-section .post-action {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.isso-postbox > .form-wrapper .textarea {
|
||||
margin: 0 0 .3em;
|
||||
padding: .4em .8em;
|
||||
@@ -181,19 +214,22 @@
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
#isso-thread .textarea:focus,
|
||||
#isso-thread input:focus,
|
||||
#isso-thread button:focus {
|
||||
border-color: #AA1D1D;
|
||||
}
|
||||
|
||||
.isso-postbox > .form-wrapper > .auth-section .input-wrapper {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
max-width: 23%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.isso-postbox > .form-wrapper > .auth-section .input-wrapper input,
|
||||
.isso-postbox > .form-wrapper > .auth-section .input-wrapper button{
|
||||
.isso-postbox > .form-wrapper > .auth-section .input-wrapper button {
|
||||
padding: .3em 10px;
|
||||
max-width: 100%;
|
||||
border-radius: 3px;
|
||||
@@ -202,12 +238,14 @@
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.isso-postbox > .form-wrapper > .auth-section .post-action,
|
||||
.isso-postbox > .form-wrapper > .auth-section .input-info {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.isso-postbox > .form-wrapper > .auth-section .post-action > input,
|
||||
.isso-postbox > .form-wrapper > .auth-section .post-action > button {
|
||||
padding: calc(.3em - 1px);
|
||||
@@ -219,14 +257,17 @@
|
||||
line-height: 1.4em;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.isso-postbox > .form-wrapper > .auth-section .post-action > input:hover,
|
||||
.isso-postbox > .form-wrapper > .auth-section .post-action > button:hover {
|
||||
background-color: #CCC;
|
||||
}
|
||||
|
||||
.isso-postbox > .form-wrapper > .auth-section .post-action > input:active,
|
||||
.isso-postbox > .form-wrapper > .auth-section .post-action > button:active{
|
||||
.isso-postbox > .form-wrapper > .auth-section .post-action > button:active {
|
||||
background-color: #BBB;
|
||||
}
|
||||
|
||||
@media screen and (max-width:600px) {
|
||||
.isso-postbox > .form-wrapper > .auth-section .input-wrapper {
|
||||
display: block;
|
||||
@@ -249,6 +290,4 @@
|
||||
.isso-postbox > .form-wrapper > .auth-section .input-info {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -6,20 +6,25 @@ body {
|
||||
main {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
main * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
main h3 {
|
||||
margin-top: 32.5px;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
main h3.with-subtitle {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
main .row [class^="col"] {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
@media (min-width: 768px){
|
||||
|
||||
@media (min-width: 768px) {
|
||||
main h3.with-subtitle {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@@ -32,32 +37,38 @@ main .row [class^="col"] {
|
||||
background: #f3eff2;
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
#keep-running .row [class^="col"] {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
|
||||
#thanks {
|
||||
background: #d0cdcd;
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
#thanks h3 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#donate {
|
||||
padding: 90px 0;
|
||||
color: white;
|
||||
background: rgba(115, 115, 115, 0.88);
|
||||
}
|
||||
|
||||
#donate h3 {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
#donate .with-subtitle {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#donate .subtitle {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#button-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -65,38 +76,47 @@ main .row [class^="col"] {
|
||||
justify-content: space-between;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.button-wrapper {
|
||||
flex-grow: 1;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
#bountysource-donation {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#liberapay-donation {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.phone-background .row [class^="col"] {
|
||||
padding: 0 0 0 15px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#donate-title {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
#bitcoin-donation {
|
||||
text-align: center;
|
||||
display: none;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#bitcoin-donation samp {
|
||||
background: #AA1D1D;
|
||||
border-radius: 5px;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1199px) {
|
||||
#liberapay-donation {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
#donate {
|
||||
padding: 30px 0;
|
||||
@@ -132,6 +152,7 @@ main .row [class^="col"] {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
#parallax-background {
|
||||
background: url('../img/bg_tiles.jpg') center center;
|
||||
position: fixed;
|
||||
@@ -140,44 +161,54 @@ main .row [class^="col"] {
|
||||
left: 0;
|
||||
z-index: -8;
|
||||
}
|
||||
|
||||
#donate-wrapper {
|
||||
z-index: -4;
|
||||
position: relative;
|
||||
}
|
||||
#donate-wrapper .row > div > * {
|
||||
|
||||
#donate-wrapper .row > div > * {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.phone-background {
|
||||
height: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: -2;
|
||||
}
|
||||
.phone-background, .phone-background * {
|
||||
|
||||
.phone-background,
|
||||
.phone-background * {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.phone-background img {
|
||||
max-width: 230px;
|
||||
display: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.phone-background img {
|
||||
display: block;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 992px){
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.phone-background .row [class^="col"] {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.phone-background img {
|
||||
margin-top: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
#footer .image-puffer {
|
||||
background-color: #D0CDCD;
|
||||
}
|
||||
75
css/faq.css
75
css/faq.css
@@ -1,46 +1,55 @@
|
||||
body {
|
||||
color: black;
|
||||
}
|
||||
|
||||
body,
|
||||
footer .image-puffer {
|
||||
background: #f3eff2;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
body,
|
||||
footer .image-puffer {
|
||||
background: #E2DEE0;
|
||||
}
|
||||
}
|
||||
|
||||
.site-content {
|
||||
margin-top: 78px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.site-content > .container {
|
||||
background: #f3eff2;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.site-content > .container > h3 {
|
||||
margin-top: 32.5px;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.site-content {
|
||||
padding: 60px 0 30px 0;
|
||||
padding: 60px 0 30px;
|
||||
}
|
||||
.site-content > .container {
|
||||
padding-top: 45px;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
h3 > a > i.fa-chevron-left {
|
||||
color: black;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.tiles-container {
|
||||
padding: 30px 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.tiles-container .tile {
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
@@ -51,12 +60,15 @@ h3 > a > i.fa-chevron-left {
|
||||
.tiles-container .is-flex > a > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tiles-container .tile.tile-left {
|
||||
border-right: 1px solid #BBB;
|
||||
}
|
||||
|
||||
.tiles-container .tile.tile-right {
|
||||
border-left: 1px solid #BBB;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.tiles-container .is-flex {
|
||||
flex-wrap: nowrap;
|
||||
@@ -72,21 +84,25 @@ h3 > a > i.fa-chevron-left {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
#faq #faq-menu {
|
||||
padding: 30px 15px 0 15px;
|
||||
padding: 30px 15px 0;
|
||||
}
|
||||
|
||||
#faq #faq-menu .tile {
|
||||
display: flex;
|
||||
background-color: rgba(226,222,224,0.1);
|
||||
background-color: rgba(226, 222, 224, 0.1);
|
||||
color: white;
|
||||
padding: 45px 0;
|
||||
transition: transform 0.25s ease-in-out, filter 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
#faq #faq-menu .tile:hover {
|
||||
transform: scale(1.1);
|
||||
z-index: 3;
|
||||
filter: brightness(1.3);
|
||||
}
|
||||
|
||||
#faq #faq-menu .tile::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -98,17 +114,21 @@ h3 > a > i.fa-chevron-left {
|
||||
background: #BC1F1E url(/img/bg_rectangle_tile.svg) no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#faq #faq-menu .tile > div {
|
||||
margin: auto 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#faq #faq-menu .row.is-flex:first-child .tile {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
#faq #faq-menu .tile > span {
|
||||
margin-top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#faq #faq-menu .tile > div > h2 {
|
||||
font-size: 24px;
|
||||
margin-top: 15px;
|
||||
@@ -119,29 +139,35 @@ h3 > a > i.fa-chevron-left {
|
||||
margin: 15px 15px 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Use fixed width and left margin to center this tile.
|
||||
* This is necessary since the big tiles have an extra margin between each other.
|
||||
*/
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#faq #faq-menu-tutorials article.tile {
|
||||
margin-left: calc((660px - 328px) / 2)
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
#faq #faq-menu-tutorials article.tile {
|
||||
max-width: 276px;
|
||||
margin-left: 286px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
#faq #faq-menu-tutorials article.tile {
|
||||
max-width: 343px;
|
||||
margin-left: 353px;
|
||||
}
|
||||
}
|
||||
|
||||
.tiles-container #tile-download h2 {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.tiles-container.faq-tiles .tile {
|
||||
margin-bottom: 15px;
|
||||
padding: 0;
|
||||
@@ -159,9 +185,11 @@ h3 > a > i.fa-chevron-left {
|
||||
font-weight: bold;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.tiles-container.faq-tiles .tile:hover > .tile-head {
|
||||
background: #d0cdcd;
|
||||
}
|
||||
|
||||
.tiles-container.faq-tiles .tile > .tile-head > span {
|
||||
padding: 7px 15px;
|
||||
margin-right: 15px;
|
||||
@@ -169,44 +197,44 @@ h3 > a > i.fa-chevron-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tiles-container.faq-tiles .tile > .tile-head > span.tutorial {
|
||||
padding: 7px 12px 7px 11px;
|
||||
}
|
||||
|
||||
.tiles-container.faq-tiles .tile > .tile-head > strong {
|
||||
padding: 7px 15px;
|
||||
width: calc(100% - 45px);
|
||||
}
|
||||
|
||||
.tiles-container.faq-tiles .tile > .tile-body {
|
||||
display: none;
|
||||
#height: 0;
|
||||
#overflow: hidden;
|
||||
padding: 15px;
|
||||
#transition: height 0.5s ease-in-out;
|
||||
border-top: 1px solid #BBB;
|
||||
}
|
||||
.tiles-container.faq-tiles .tile.active > .tile-body {
|
||||
#height: auto;
|
||||
#display: block;
|
||||
#transition: display 0s 0.5s;
|
||||
}
|
||||
|
||||
.tiles-container.faq-tiles .tile > .tile-body img {
|
||||
max-width: 50%;
|
||||
max-height: calc(100vh - 78px);
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.tiles-container.faq-tiles .tile > .tile-body hr {
|
||||
margin: 0 -15px 10px;
|
||||
border-top: 1px solid #bbb;
|
||||
}
|
||||
|
||||
.tiles-container.faq-tiles .tile > .tile-body figure {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tiles-container.faq-tiles .tile > .tile-body figure img,
|
||||
.tiles-container.faq-tiles .tile > .tile-body figure video {
|
||||
float: left;
|
||||
margin: 0 auto 15px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.tiles-container.faq-tiles .tile > .tile-body figure {
|
||||
flex-direction: row;
|
||||
@@ -216,19 +244,23 @@ h3 > a > i.fa-chevron-left {
|
||||
margin: 0 15px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
#faq .search-container #search-submit,
|
||||
#faq .search-container #search-box {
|
||||
background: #E2DEE0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#faq .search-container #search-box:focus {
|
||||
border: 1px solid #AA1D1D;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#faq #search-results #search-submit:hover,
|
||||
#faq #search-results #search-submit:focus {
|
||||
border-color: #bbb;
|
||||
}
|
||||
|
||||
#faq #search-results.active {
|
||||
margin-top: 30px;
|
||||
}
|
||||
@@ -236,65 +268,80 @@ h3 > a > i.fa-chevron-left {
|
||||
#tutorial {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#tutorial a {
|
||||
color: #CD201F;
|
||||
}
|
||||
|
||||
#tutorial section {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#tutorial section > header {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
#tutorial section figure {
|
||||
flex-direction: column;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#tutorial section figure > img,
|
||||
#tutorial section figure > video {
|
||||
margin-bottom: 10px;
|
||||
box-shadow: 0 0 4px 0 rgba(0,0,0,0.8);
|
||||
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.8);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#tutorial section figure > figcaption img {
|
||||
height: 1.2em;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#tutorial section figure {
|
||||
max-width: 200px;
|
||||
float: left;
|
||||
margin-right: 15px;
|
||||
}
|
||||
#tutorial section figure~:not(figure) {
|
||||
#tutorial section figure ~ :not(figure) {
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
|
||||
#tutorial .text-success {
|
||||
color: #29a400;
|
||||
}
|
||||
.faq-back-link, .faq-back-link:hover {
|
||||
|
||||
.faq-back-link,
|
||||
.faq-back-link:hover {
|
||||
font-size: 16px;
|
||||
color: #CD201F;
|
||||
}
|
||||
|
||||
.row.is-flex.figure-wrapper {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin: 0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #e2dee0;
|
||||
color: black;
|
||||
padding: 2px 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#faq .improve-faq-hint {
|
||||
border-radius: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.faq-tiles ~ .row > .col-md-8.col-md-offset-2 > .improve-faq-hint {
|
||||
margin-left: -15px;
|
||||
margin-right: -15px;
|
||||
}
|
||||
|
||||
.improve-faq-hint > .fa {
|
||||
font-size: 150%;
|
||||
margin-right: 15px;
|
||||
|
||||
@@ -10,10 +10,13 @@
|
||||
display: flex;
|
||||
border-bottom: 1px solid #aaaaaa;
|
||||
}
|
||||
.gallery a, .gallery a:hover {
|
||||
|
||||
.gallery a,
|
||||
.gallery a:hover {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.gallery a.change-slide {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -25,11 +28,12 @@
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
background: #858585;
|
||||
background: -webkit-linear-gradient(left, rgba(85,85,85,0.8) 30px, rgba(150,150,150,0.8), rgba(85,85,85,08) -webkit-calc(100% - 30px));
|
||||
background: -o-linear-gradient(right, rgba(85,85,85,0.8) 30px, rgba(150,150,160,0.8), rgba(85,85,85,0.8) calc(100% - 30px));
|
||||
background: -moz-linear-gradient(right, rgba(85,85,85,0.8) 30px, rgba(150,150,150,0.8), rgba(85,85,85,0.8) calc(100% - 30px));
|
||||
background: linear-gradient(to right, rgba(85,85,85,0.8) 30px, rgba(150,150,150,0.8), rgba(85,85,85,0.8) calc(100% - 30px));
|
||||
background: -webkit-linear-gradient(left, rgba(85, 85, 85, 0.8) 30px, rgba(150, 150, 150, 0.8), rgba(85, 85, 85, 08) -webkit-calc(100% - 30px));
|
||||
background: -o-linear-gradient(right, rgba(85, 85, 85, 0.8) 30px, rgba(150, 150, 160, 0.8), rgba(85, 85, 85, 0.8) calc(100% - 30px));
|
||||
background: -moz-linear-gradient(right, rgba(85, 85, 85, 0.8) 30px, rgba(150, 150, 150, 0.8), rgba(85, 85, 85, 0.8) calc(100% - 30px));
|
||||
background: linear-gradient(to right, rgba(85, 85, 85, 0.8) 30px, rgba(150, 150, 150, 0.8), rgba(85, 85, 85, 0.8) calc(100% - 30px));
|
||||
}
|
||||
|
||||
.gallery-element.gallery-parallax-background {
|
||||
background: transparent;
|
||||
}
|
||||
@@ -38,37 +42,46 @@
|
||||
vertical-align: middle;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.feature-details {
|
||||
position: relative;
|
||||
padding: 15px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.feature-details > .container {
|
||||
display: unset;
|
||||
}
|
||||
|
||||
.feature-details .details-flex {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.feature-details .details-image {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.feature-details .details-image img {
|
||||
max-width: 100%;
|
||||
max-height: 350px;
|
||||
display: initial;
|
||||
}
|
||||
|
||||
.feature-details .details-image.image-slideshow img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.feature-details .details-image.image-slideshow img.active {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.feature-details .details-image .banner {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.feature-details .details-text {
|
||||
width: 75%;
|
||||
max-width: 660px;
|
||||
@@ -77,6 +90,7 @@
|
||||
padding-left: 50px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
.feature-details .details-text .subtitle {
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -85,22 +99,19 @@
|
||||
.gallery {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.gallery-element {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
#features-tiles {
|
||||
margin-bottom: 37px;
|
||||
}
|
||||
.feature-details, .list-box {
|
||||
.feature-details,
|
||||
.list-box {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.feature-details .details-flex {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.feature-details .details-image {
|
||||
float: unset;
|
||||
width: 100%;
|
||||
@@ -115,58 +126,75 @@
|
||||
.feature-details .details-text {
|
||||
float: unset;
|
||||
width: 100%;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Extra small size since Bootstrap 4
|
||||
/* Extra small size since Bootstrap 4
|
||||
We use Bootstrap 3 but this size was added to Bootstrap 4 for a good reason. It adresses phones with portait mode. */
|
||||
|
||||
@media (max-width: 543px) {
|
||||
.gallery-element {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
.list-box, .list-box > .container-fluid {
|
||||
.list-box,
|
||||
.list-box > .container-fluid {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Override bxSlider's stles */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.bx-wrapper a.bx-prev, .bx-wrapper a.bx-prev:hover, .bx-wrapper a.bx-prev:focus {
|
||||
padding-left: 0px;
|
||||
background: url(../img/control-prev.png) 0px 15px no-repeat;
|
||||
.bx-wrapper a.bx-prev,
|
||||
.bx-wrapper a.bx-prev:hover,
|
||||
.bx-wrapper a.bx-prev:focus {
|
||||
padding-left: 0;
|
||||
background: url(../img/control-prev.png) 0 15px no-repeat;
|
||||
}
|
||||
.bx-wrapper a.bx-next, .bx-wrapper a.bx-next:hover, .bx-wrapper a.bx-next:focus {
|
||||
padding-right: 0px;
|
||||
background: url(../img/control-next.png) 0px 15px no-repeat;
|
||||
.bx-wrapper a.bx-next,
|
||||
.bx-wrapper a.bx-next:hover,
|
||||
.bx-wrapper a.bx-next:focus {
|
||||
padding-right: 0;
|
||||
background: url(../img/control-next.png) 0 15px no-repeat;
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.bx-wrapper a.bx-prev, .bx-wrapper a.bx-prev:hover, .bx-wrapper a.bx-prev:focus {
|
||||
.bx-wrapper a.bx-prev,
|
||||
.bx-wrapper a.bx-prev:hover,
|
||||
.bx-wrapper a.bx-prev:focus {
|
||||
padding-left: 30px;
|
||||
background: url(../img/control-prev.png) 15px 15px no-repeat;
|
||||
}
|
||||
.bx-wrapper a.bx-next, .bx-wrapper a.bx-next:hover, .bx-wrapper a.bx-next:focus {
|
||||
.bx-wrapper a.bx-next,
|
||||
.bx-wrapper a.bx-next:hover,
|
||||
.bx-wrapper a.bx-next:focus {
|
||||
padding-right: 30px;
|
||||
background: url(../img/control-next.png) 15px 15px no-repeat;
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 546px){
|
||||
|
||||
@media (max-width: 546px) {
|
||||
.bx-viewport {
|
||||
height: auto !important;
|
||||
}
|
||||
.bx-wrapper a.bx-prev, .bx-wrapper a.bx-prev:hover, .bx-wrapper a.bx-prev:focus {
|
||||
.bx-wrapper a.bx-prev,
|
||||
.bx-wrapper a.bx-prev:hover,
|
||||
.bx-wrapper a.bx-prev:focus {
|
||||
padding-left: 7.5px;
|
||||
background: url(../img/control-prev.png) 7.5px 15px no-repeat;
|
||||
}
|
||||
.bx-wrapper a.bx-next, .bx-wrapper a.bx-next:hover, .bx-wrapper a.bx-next:focus {
|
||||
.bx-wrapper a.bx-next,
|
||||
.bx-wrapper a.bx-next:hover,
|
||||
.bx-wrapper a.bx-next:focus {
|
||||
padding-right: 7.5px;
|
||||
background: url(../img/control-next.png) 0px 15px no-repeat;
|
||||
background: url(../img/control-next.png) 0 15px no-repeat;
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
@@ -2,14 +2,17 @@
|
||||
padding-bottom: 65px;
|
||||
min-height: calc(100vh - 78px - 208px);
|
||||
}
|
||||
|
||||
#content-container h3 {
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
#content-container a,
|
||||
#content-container a:hover,
|
||||
#content-container a:focus {
|
||||
color: #CD201F;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #e2dee0;
|
||||
}
|
||||
107
css/press.css
107
css/press.css
@@ -1,34 +1,35 @@
|
||||
/************
|
||||
***SHADOWS***
|
||||
************/
|
||||
|
||||
.background-gray.background-fade {
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.0) calc((100% - 1170px) / 2)),
|
||||
linear-gradient(to right, rgba(0,0,0,0.0) calc(100% - ((100% - 1170px) / 2)), rgba(0,0,0,0.2) 100% );
|
||||
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.0) calc((100% - 1170px) / 2)), linear-gradient(to right, rgba(0, 0, 0, 0.0) calc(100% - ((100% - 1170px) / 2)), rgba(0, 0, 0, 0.2) 100%);
|
||||
}
|
||||
|
||||
.background-light-gray.background-fade {
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.0) calc((100% - 1170px) / 2)),
|
||||
linear-gradient(to right, rgba(0,0,0,0.0) calc(100% - ((100% - 1170px) / 2)), rgba(0,0,0,0.1) 100% );
|
||||
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.0) calc((100% - 1170px) / 2)), linear-gradient(to right, rgba(0, 0, 0, 0.0) calc(100% - ((100% - 1170px) / 2)), rgba(0, 0, 0, 0.1) 100%);
|
||||
}
|
||||
|
||||
#header {
|
||||
-webkit-box-shadow: 0 4px 4px 0 rgba(0,0,0,0.175);
|
||||
-moz-box-shadow: 0 4px 4px 0 rgba(0,0,0,0.175);
|
||||
box-shadow: 0 4px 4px 0 rgba(0,0,0,0.175);
|
||||
-webkit-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.175);
|
||||
-moz-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.175);
|
||||
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.175);
|
||||
}
|
||||
|
||||
.footer .shadow-top {
|
||||
-webkit-box-shadow: 0 -4px 4px 0 rgba(0,0,0,0.175);
|
||||
-moz-box-shadow: 0 -4px 4px 0 rgba(0,0,0,0.175);
|
||||
box-shadow: 0 -4px 4px 0 rgba(0,0,0,0.175);
|
||||
-webkit-box-shadow: 0 -4px 4px 0 rgba(0, 0, 0, 0.175);
|
||||
-moz-box-shadow: 0 -4px 4px 0 rgba(0, 0, 0, 0.175);
|
||||
box-shadow: 0 -4px 4px 0 rgba(0, 0, 0, 0.175);
|
||||
}
|
||||
|
||||
.navbar-fixed-top ~ .site-content {
|
||||
margin-top: 64px;
|
||||
}
|
||||
|
||||
.navbar-fixed-top {
|
||||
border-bottom: 2px solid white;
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 767px) {
|
||||
.navbar-fixed-top {
|
||||
border-bottom-width: 0;
|
||||
@@ -38,34 +39,41 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Sidebar */
|
||||
|
||||
.sidebar {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar .list-group h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sidebar .list-group .active {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.sidebar .list-group span.active {
|
||||
font-weight: bold;
|
||||
}
|
||||
.sidebar .list-group .active, .sidebar .list-group > *, .sidebar .list-group a {
|
||||
|
||||
.sidebar .list-group .active,
|
||||
.sidebar .list-group > *,
|
||||
.sidebar .list-group a {
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.sidebar .list-group .list-group-item {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.sidebar .list-group a:hover {
|
||||
color: #CD322E;
|
||||
}
|
||||
|
||||
.sidebar .list-group a .icon {
|
||||
width: 0;
|
||||
float: left;
|
||||
@@ -76,6 +84,7 @@
|
||||
-o-transition: width 0s ease-in-out;
|
||||
transition: width 0s ease-in-out;
|
||||
}
|
||||
|
||||
.sidebar .list-group a:hover .icon {
|
||||
width: 15px;
|
||||
-webkit-transition: width 1s ease-in-out;
|
||||
@@ -83,13 +92,16 @@
|
||||
-o-transition: width 1s ease-in-out;
|
||||
transition: width 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
.sidebar .list-group .list-group-item.red {
|
||||
color: #cd201f;
|
||||
}
|
||||
|
||||
.sidebar .search-container {
|
||||
width: 80%;
|
||||
}
|
||||
@media (max-width: 767px){
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.sidebar {
|
||||
border-top: 2px solid white;
|
||||
padding-left: 30px;
|
||||
@@ -100,56 +112,65 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Content */
|
||||
|
||||
.hidden-press {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.visible-press {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.site-content {
|
||||
background: #E2DEE0;
|
||||
border-top: 2px solid white;
|
||||
}
|
||||
|
||||
.site-content .container .container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 767px) {
|
||||
.site-content {
|
||||
border-top-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
main.content {
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
main.content a {
|
||||
color: #cd201f;
|
||||
}
|
||||
|
||||
.media-gallery {
|
||||
position: relative;
|
||||
margin-bottom: 15px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.media-gallery > div {
|
||||
border-bottom: 2px solid white;
|
||||
border-bottom: 1px solid #f3eff2;
|
||||
padding: 25px 0 15px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.media-gallery > .col-md-6:nth-last-child(1) {
|
||||
border-bottom-width: 0;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
.media-gallery > .col-sm-4 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.media-gallery a {
|
||||
color: #cd201f;
|
||||
}
|
||||
|
||||
@media (min-width: 767px) {
|
||||
.media-gallery > .col-md-6 {
|
||||
border-right: 2px solid white;
|
||||
border-right: 1px solid #f3eff2;
|
||||
padding: 25px 15px 15px 15px;
|
||||
width: 50%;
|
||||
@@ -165,14 +186,17 @@ main.content a {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.media-gallery > .col-sm-4 {
|
||||
width: calc(100% / 3);
|
||||
}
|
||||
}
|
||||
|
||||
.media-gallery .media-file {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.media-gallery .media-file > * {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
@@ -180,19 +204,25 @@ main.content a {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#screenshots .media-gallery .media-file > * {
|
||||
max-height: 260px;
|
||||
}
|
||||
.media-gallery /*.media-file > **/[data-toggle=modal], .media-gallery .media-file > img[onclick*="viewMediaFile"] {
|
||||
|
||||
.media-gallery [data-toggle=modal],
|
||||
.media-gallery .media-file > img[onclick*="viewMediaFile"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.media-name {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#screenshots #mediaFileView .fa-times {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 767px) {
|
||||
#screenshots .media-gallery .media-file > * {
|
||||
margin-left: 0;
|
||||
@@ -203,45 +233,57 @@ main.content a {
|
||||
.media-download .size {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.extra-space {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
h3.start {
|
||||
margin-bottom: 45px;
|
||||
color: #cd201f;
|
||||
}
|
||||
|
||||
p.subtitle {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
|
||||
.large {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.large-linebreak {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
#last-modified {
|
||||
font-size: 12px;
|
||||
margin-top: 45px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#welcome h4 {
|
||||
margin-top: 25px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#welcome strong {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#welcome p {
|
||||
text-align: justify;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
#welcome ul {
|
||||
margin-bottom: 15px;
|
||||
padding-inline-start: 11px;
|
||||
}
|
||||
|
||||
@media (min-width: 767px) {
|
||||
#welcome {
|
||||
font-size: 15px;
|
||||
@@ -251,52 +293,65 @@ p.subtitle {
|
||||
padding-left: 0;
|
||||
}
|
||||
#welcome ul li.linebreak {
|
||||
text-indent: -11px; margin-left: 11px;
|
||||
text-indent: -11px;
|
||||
margin-left: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
#announcements article {
|
||||
padding: 5px 13px 5px 13px;
|
||||
border: 2px solid #fff;
|
||||
margin-bottom: 25px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#announcements article .press-date {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
#announcements article img.postImg {
|
||||
margin: 0 auto 15px;
|
||||
}
|
||||
|
||||
/* Search */
|
||||
|
||||
#search-results {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
#search-results > .border-box {
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
#search-results > .border-box * {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
#search-results > .border-box .search-result-meta {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
#search-results > .border-box .search-result-meta a {
|
||||
color: #cd201f;
|
||||
}
|
||||
|
||||
#search-results > .border-box .search-result-content {
|
||||
margin-bottom: 15px;
|
||||
border-left: 2px solid white;
|
||||
}
|
||||
|
||||
#search-results > .border-box .search-result-content main h3.start,
|
||||
#search-results > .border-box .search-result-content .download-license-warning {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#search-results > .border-box .search-result-content .media-gallery [data-toggle="modal"],
|
||||
#search-results > .border-box .search-result-content .media-gallery .media-file > img[onclick*="viewMediaFile"]{
|
||||
#search-results > .border-box .search-result-content .media-gallery .media-file > img[onclick*="viewMediaFile"] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
|
||||
.footer .image-puffer {
|
||||
background:#E2DEE0;
|
||||
background: #E2DEE0;
|
||||
}
|
||||
@@ -1,5 +1,7 @@
|
||||
@media all {
|
||||
.page-break { display: none; }
|
||||
.page-break {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
@@ -9,19 +11,31 @@
|
||||
* (also possible with moznomarginboxes attribute in HTML tag
|
||||
* but not accepted by all browsers)
|
||||
*/
|
||||
@page { margin: 0; }
|
||||
body { margin: 1.6cm; }
|
||||
.page-break { display: block; page-break-before: always; }
|
||||
.extra-space, .main {
|
||||
@page {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
margin: 1.6cm;
|
||||
}
|
||||
.page-break {
|
||||
display: block;
|
||||
page-break-before: always;
|
||||
}
|
||||
.extra-space,
|
||||
.main {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
html, body, #page {
|
||||
html,
|
||||
body,
|
||||
#page {
|
||||
height: auto;
|
||||
}
|
||||
#header, #footer, #sidebar {
|
||||
#header,
|
||||
#footer,
|
||||
#sidebar {
|
||||
display: none;
|
||||
}
|
||||
.navbar-fixed-top ~ .site-content {
|
||||
@@ -34,4 +48,4 @@
|
||||
.download-license-warning {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
328
css/style.css
328
css/style.css
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user