This repository has been archived on 2024-09-12. You can view files and clone it, but cannot push or open issues or pull requests.
svrjs-website/themes/svrjswebsite/source/css/index-page.css

683 lines
14 KiB
CSS
Raw Normal View History

2024-03-15 21:53:12 +01:00
/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 400 version
*/
.comparison-table-container {
width: 100%; /* For NetSurf 3.6 */
max-width: 1152px;
margin: 0 auto;
}
.comparison-table {
width: 100%;
table-layout: auto;
}
.comparison-table tr td,
.comparison-table tr th {
padding-top: 0.225em;
padding-bottom: 0.225em;
width: 16.66666666666666666666666666%;
}
.comparison-table-feature {
background-color: #00b000;
color: #ffffff;
font-weight: bold;
}
tr.comparison-table-mobile-feature {
display: none;
}
tr.comparison-table-mobile-feature td {
background-color: #00b000;
border-left: #00b000 solid 0.3125em;
color: #ffffff;
font-weight: bold;
padding: 0.225em;
padding-left: 0.06875em;
}
.translated-rtl tr.comparison-table-mobile-feature td {
padding-left: 0.225em;
padding-right: 0.06875em;
border-left: none;
border-right: #00b000 solid 0.3125em;
}
.comparison-table tr td:nth-child(2n+3) {
background-color: #dfffdf
}
.comparison-table-yes {
background-color: #00ff00;
color: #000000;
}
.comparison-table tr td.comparison-table-yes:nth-child(2n+3) {
background-color: #60ff60;
color: #000000;
}
.comparison-table-no {
background-color: #ff0000;
color: #ffffff;
}
.comparison-table tr td.comparison-table-no:nth-child(2n+3) {
background-color: #ff6060;
color: #ffffff;
}
.comparison-table-sus {
background-color: #ffff00;
color: #000000;
}
.comparison-table tr td.comparison-table-sus:nth-child(2n+3) {
background-color: #ffff60;
color: #000000;
}
.comparison-table tr th.comparison-table-myproduct,
.comparison-table tr td.comparison-table-myproduct {
border-left: #007000 solid 0.3125em;
border-right: #007000 solid 0.3125em;
padding-left: 0.15625em;
padding-right: 0.15625em;
}
.comparison-table tr:last-child td.comparison-table-myproduct {
border-bottom: #007000 solid 0.3125em;
padding-bottom: 0.3125em;
}
.hero {
background-image: url("/img/hero-image.jpg");
background-repeat: no-repeat;
background-position: right top;
-webkit-background-size: 50% 50%;
-moz-background-size: 50%;
-o-background-size: 50%;
background-size: 50%;
background-attachment: fixed;
background-color: #9aff9a;
-webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
font-size: 16px; /*So hero image wouldn't break*/
display: block;
}
.translated-rtl .hero {
background-position: left top;
}
.hero-content-column {
background-color: #9aff9a;
width: 50%;
}
.hero-content {
padding: 2.5em 2.85em;
}
.hero-description {
min-height: 20.35em;
}
.hero h1 {
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
font-size: 3.115em;
line-height: 1.15em;
margin: 0;
}
.hero p {
font-size: 1.235em;
padding: 1.25em 0 1.1em 0;
margin: 0;
line-height: 1.165em;
}
.download-container {
display: block;
}
.maindownloads {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.otherdls {
margin-top: 0.425em;
font-size: 0.8965em;
line-height: 1.35em;
}
.promo-point-clearfix {
content: "";
display: table;
clear: both
}
.promo-point-subcontainer {
width: 25%;
float: left;
margin-left: -1px;
/*padding: 0.5em 0;*/
text-align: center;
}
.promo-point {
margin: 0.5em;
margin-top: 0;
margin-bottom: 1.15em;
background-color: #ffffff;
-webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
}
.translated-rtl .promo-point-subcontainer {
float: right;
}
.promo-image {
display: block;
margin: auto;
width: 100%;
height: auto;
max-width: 320px;
}
.promo-text {
text-align: left;
padding-bottom: 0.5em;
padding-left: 0.5em;
padding-right: 0.5em;
}
.translated-rtl .promo-text {
text-align: right;
}
.index-section-even h2,
.index-section-odd h2 {
text-align: center;
text-transform: uppercase;
font-size: 2.5em;
margin: 0;
margin-bottom: 0.35em;
padding: 0.5em 0 0 0;
overflow-wrap: break-word;
word-wrap: break-word;
/*Doesn't use word-break: break-all fallback*/
word-break: break-word;
}
.index-section-even h3,
.index-section-odd h3 {
font-size: 1.5em;
margin: 0.83em 0;
}
.index-section-even h4,
.index-section-odd h4 {
font-size: 1.17em;
margin: 1em 0;
}
.index-section-even h5,
.index-section-odd h5 {
font-size: 1em;
margin: 1.33em 0;
}
.index-section-even h6,
.index-section-odd h6 {
font-size: 0.83em;
margin: 1.67em 0;
}
.index-section-even,
.index-section-odd {
padding: 0 0.5em;
display: block;
}
.index-section-even:nth-child(n+5),
.index-section-odd {
-webkit-box-shadow: 0 -3px 6px 0 rgba(0, 0, 0, 0.175);
-moz-box-shadow: 0 -3px 6px 0 rgba(0, 0, 0, 0.175);
box-shadow: 0 -3px 6px 0 rgba(0, 0, 0, 0.175);
}
.index-section-even,
.index-section-odd {
padding-bottom: 0.8em;
}
.index-section-odd p:last-child,
.index-section-even p:last-child {
margin-bottom: 0;
padding-bottom: 0.2em;
}
.index-section-odd {
background-color: #c5ffc5;
}
.section-videos {
text-align: center;
}
.section-container, .section-videos, .promo-point-container {
width: 100%; /* For NetSurf 3.6 */
max-width: 1280px;
margin: 0 auto;
}
.promo-point-container {
max-width: 1440px;
}
.section-videos video {
width: 100%;
max-width: 800px;
-webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.225);
-moz-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.225);
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.225);
}
2024-03-19 20:05:19 +01:00
.download-separator {
font-size: 0.75em;
}
.command-tab {
display: inline;
display: inline-block;
text-decoration: none;
color: #ffffff;
background-color: #00b000;
font-size: 0.95em;
padding: 0.2em 0.5em;
margin-right: 0.5em;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
cursor: pointer;
}
.command-tab.command-tab-selected {
color: #007000;
background-color: #ffffff;
}
.command-tab:hover {
background-color: #007000;
text-decoration: none;
}
.command-tab.command-tab-selected:hover {
color: #007000;
background-color: #ffffff;
}
#command-tab-tabcontainer {
width: 100%;
max-width: 480px;
text-align: left;
position: relative;
z-index: 1;
}
#command-tab-container {
background-color: #dfffdf;
color: #000000;
width: 100%;
max-width: 480px;
-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
position: relative;
z-index: 2;
}
#command-tab-container .maindownloads {
padding: 0.5em;
}
#command-tab-command {
display: block;
overflow-x: auto;
overflow-y: visible;
text-align: left;
white-space: nowrap;
padding: 0.5em 0.65em;
font-size: 1em;
}
#command-tab-copy {
display: inline;
float: right;
padding: 0.25em 0.4em;
cursor: pointer;
}
#command-tab-h {
font-size: 0.88em;
padding: 0.35em 0.6em;
padding-bottom: 0;
font-weight: bold;
text-align: left;
}
.command-tab-clearfix {
content: "";
display: table;
clear: both
}
2024-03-15 21:53:12 +01:00
/*CSS hacks for Webp support check*/
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution:.001dpcm) {
@supports (background-image: -webkit-image-set(url('/img/hero-image.webp') 1x)) {
.hero {
background-image: url('/img/hero-image.webp');
}
}
}
@supports (flex-basis: max-content) {
.hero {
background-image: url('/img/hero-image.webp');
}
}
@supports selector(:nth-child) {
.hero {
background-image: url('/img/hero-image.webp');
}
}
@media screen and (prefers-color-scheme: dark) {
.dummy {}
.hero {
background-color: #006f00;
-webkit-box-shadow: 0 3px 6px 0 rgba(127, 127, 127, 0.2);
-moz-box-shadow: 0 3px 6px 0 rgba(127, 127, 127, 0.2);
box-shadow: 0 3px 6px 0 rgba(127, 127, 127, 0.2);
}
.hero .otherdls a,
.hero .hero-description a {
color: #ffffff;
text-decoration: underline;
}
.hero .otherdls a:hover,
.hero .hero-description a:hover {
color: #00ff00;
}
2024-03-15 21:53:12 +01:00
.hero-content-column {
background-color: #006f00;
}
.index-section-even:nth-child(n+5),
.index-section-odd {
-webkit-box-shadow: 0 -3px 6px 0 rgba(127, 127, 127, 0.175);
-moz-box-shadow: 0 -3px 6px 0 rgba(127, 127, 127, 0.175);
box-shadow: 0 -3px 6px 0 rgba(127, 127, 127, 0.175);
}
.index-section-odd {
background-color: #003a00;
}
.promo-point {
background-color: #000f00;
-webkit-box-shadow: 0 5px 10px 0 rgba(127, 127, 127, 0.15);
-moz-box-shadow: 0 5px 10px 0 rgba(127, 127, 127, 0.15);
box-shadow: 0 5px 10px 0 rgba(127, 127, 127, 0.15);
}
.section-videos video {
-webkit-box-shadow: 0 5px 10px 0 rgba(127, 127, 127, 0.225);
-moz-box-shadow: 0 5px 10px 0 rgba(127, 127, 127, 0.225);
box-shadow: 0 5px 10px 0 rgba(127, 127, 127, 0.225);
}
.comparison-table tr td:nth-child(2n+3) {
background-color: #002000
}
.comparison-table tr td.comparison-table-yes:nth-child(2n+3) {
background-color: #009f00;
color: #ffffff;
}
.comparison-table tr td.comparison-table-no:nth-child(2n+3) {
background-color: #9f0000;
color: #ffffff;
}
.comparison-table tr td.comparison-table-sus:nth-child(2n+3) {
background-color: #c0c000;
color: #ffffff;
}
.command-tab {
background-color: #00b000;
-webkit-box-shadow: 0 4px 8px 0 rgba(127, 127, 127, 0.25);
-moz-box-shadow: 0 4px 8px 0 rgba(127, 127, 127, 0.25);
box-shadow: 0 4px 8px 0 rgba(127, 127, 127, 0.25);
}
.command-tab:hover {
background-color: #00d000;
color: #ffffff;
}
.command-tab.command-tab-selected:hover {
color: #007000;
background-color: #ffffff;
}
#command-tab-container {
background-color: #002000;
color: #ffffff;
-webkit-box-shadow: 0 4px 8px 0 rgba(127, 127, 127, 0.25);
-moz-box-shadow: 0 4px 8px 0 rgba(127, 127, 127, 0.25);
box-shadow: 0 4px 8px 0 rgba(127, 127, 127, 0.25);
}
2024-03-15 21:53:12 +01:00
}
@media screen and (min-width: 1800px) {
.hero {
background-image: url("/img/hero-image-big.jpg");
}
/*CSS hacks for Webp support check*/
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution:.001dpcm) {
@supports (background-image: -webkit-image-set(url('/img/hero-image.webp') 1x)) {
.hero {
background-image: url('/img/hero-image-big.webp');
}
}
}
@supports (flex-basis: max-content) {
.hero {
background-image: url('/img/hero-image-big.webp');
}
}
@supports selector(:nth-child) {
.hero {
background-image: url('/img/hero-image-big.webp');
}
}
}
@media screen and (max-width: 1600px) {
.hero-description {
min-height: 23.65em;
}
}
@media screen and (max-width: 1440px) {
.hero-description {
min-height: 24.25em;
}
}
@media screen and (max-width: 1000px) {
.hero {
background-image: url("/img/hero-image-small.jpg");
background-color: #006f00;
-webkit-background-size: 100% 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: top center;
background-attachment: fixed;
color: #ffffff;
padding: 3em;
font-size: 1em;
}
.hero .otherdls a,
.hero .hero-description a {
2024-03-15 21:53:12 +01:00
color: #ffffff;
text-decoration: underline;
2024-03-15 21:53:12 +01:00
}
.hero .otherdls a:hover,
.hero .hero-description a:hover {
2024-03-15 21:53:12 +01:00
color: #00ff00;
}
2024-03-15 21:53:12 +01:00
.hero .styled-button {
background-color: #00b000;
-webkit-box-shadow: 0 4px 8px 0 rgba(127, 127, 127, 0.25);
-moz-box-shadow: 0 4px 8px 0 rgba(127, 127, 127, 0.25);
box-shadow: 0 4px 8px 0 rgba(127, 127, 127, 0.25);
}
.hero .styled-button:hover {
background-color: #00d000;
color: #ffffff;
}
.hero .styled-button.styled-button-disabled, .hero .styled-button.styled-button-disabled:hover {
background-color: #808080;
}
.hero-content-column {
width: 100%;
background: none;
}
.hero-content {
padding: 0;
text-align: center;
}
.hero-description {
min-height: 0px;
}
#command-tab-container, #command-tab-tabcontainer {
margin: auto;
}
2024-03-15 21:53:12 +01:00
/*CSS hacks for Webp support check*/
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution:.001dpcm) {
@supports (background-image: -webkit-image-set(url('/img/hero-image.webp') 1x)) {
.hero {
background-image: url('/img/hero-image-small.webp');
}
}
}
@supports (flex-basis: max-content) {
.hero {
background-image: url('/img/hero-image-small.webp');
}
}
@supports selector(:nth-child) {
.hero {
background-image: url('/img/hero-image-small.webp');
}
}
}
@media screen and (max-width: 890px) {
.promo-point-subcontainer {
width: 50%;
}
.promo-point-clearfix-halfway {
content: "";
display: table;
clear: both
}
}
@media screen and (max-width: 480px) {
.promo-point-subcontainer {
width: 100%;
float: none;
}
.promo-point-clearfix-halfway, .promo-point-clearfix {
display:none;
}
.hero {
padding: 2.5em;
}
.hero h1 {
font-size: 3.05em;
}
.comparison-table tr td,
.comparison-table tr th {
width: 20%;
}
.comparison-table-feature,
.comparison-table-blank {
display: none;
}
tr.comparison-table-mobile-feature {
display: table-row;
}
}
@media screen and (max-width: 350px) {
.hero {
padding: 2.0em;
}
}