682 lines
14 KiB
CSS
682 lines
14 KiB
CSS
/*
|
|
* 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);
|
|
}
|
|
|
|
.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
|
|
}
|
|
|
|
/*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;
|
|
}
|
|
|
|
.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: #000700;
|
|
-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);
|
|
}
|
|
}
|
|
|
|
@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 {
|
|
color: #ffffff;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.hero .otherdls a:hover,
|
|
.hero .hero-description a:hover {
|
|
color: #00ff00;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/*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;
|
|
}
|
|
}
|