From 0af1ac3e1bc104b2b55897ff7a1dc78746f72024 Mon Sep 17 00:00:00 2001 From: Carsten Schoenert Date: Thu, 4 Apr 2019 22:35:29 +0200 Subject: download.css: updated due reworked the content --- english/download/download.css | 251 +++++++++++++++++++++++++----------------- 1 file changed, 152 insertions(+), 99 deletions(-) diff --git a/english/download/download.css b/english/download/download.css index 05244147446..c1db15c1dc8 100644 --- a/english/download/download.css +++ b/english/download/download.css @@ -34,10 +34,24 @@ h3 { padding: 6px; border: 2px solid #787878; border-radius: 4px; + font-size: 1.5em; +} + +h4 { + font-size: 1.5em; + font-style: normal; +} + +.hint-text { + text-decoration: underline; } +/* + Styling elements for centred text and lists in the middle of the site or + column. +*/ .centered-middle-50 { - width: 50%; + width: 65%; left: 50%; top: 50%; text-align: left; @@ -68,132 +82,171 @@ h3 { margin-right: 9%; } -.tooltip { - position: relative; +/* + The CSS styling for all used 'stylish' buttons. + Basic data for the classes are taken from http://buttonoptimizer.com/# + but got modified a bit. +*/ +.btn { display: inline-block; - /*border-bottom: 1px dotted black;*/ -} - -.tooltip .tooltiptext { - visibility: hidden; - width: 120px; - bottom: 100%; - left: 50%; - margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */ - background-color: black; - color: #fff; text-align: center; - border-radius: 6px; - padding: 5px; - - /* Position the tooltip */ - position: absolute; - z-index: 1; -} - -.tooltip:hover .tooltiptext { - visibility: visible; -} - -/* CSS Styling stuff for download buttons - - The following stuff is based on debhome.css line 48 - 85. - It's can't be used from this CSS file directly with some override as other - style elements get's broken then. - As it's need heavily modified anyway the original CSS was taken and adopted. - */ - -/* The core classes. */ -.dl-btn-img { - display: block; - position: absolute; - font-size: 1.5em; - line-height: 2; - background-color: #ededed; - margin-top: -25px; - border-radius: 20px; + margin-top: 0px; + padding: 12px 24px; + border: 1px solid #0b7e34; + border-radius: 8px; + background: #12cd55; + background: -webkit-gradient(linear, left top, left bottom, from(#12cd55), to(#0b7e34)); + background: -moz-linear-gradient(top, #12cd55, #0b7e34); + background: linear-gradient(to bottom, #12cd55, #0b7e34); + -webkit-box-shadow: #11be4e 1px -1px 10px 0px; + -moz-box-shadow: #11be4e 1px -1px 10px 0px; + box-shadow: #11be4e 1px 0px 21px 0px; + text-shadow: #074f21 1px 1px 1px; + font: normal normal bold 20px /*arial*/; + width: 350px; + font-size: 2.3em; +} + +.btn-info { + font-size: 0.55em; + font-weight: initial; + font-style: normal; + text-align: center; + margin: 0px -30px 0px 0px; + color: #ffffff; + text-decoration: none; } -.dl-btn-img a { +/* Don't use any decoration for href */ +a.btn { color: white; - font-weight: bold; text-decoration: none; - border: 0.15em solid #339900; - display: block; - background: transparent url('../Pics/emblem-downloads.png') no-repeat 15px 5px; - padding-left: 30px; - padding-right: 1em; - color:#339900; - border-radius: 20px; -} - -.dl-btn-img a em { - font-size: 0.75em; - font-weight: normal; - clear: right; - line-height: 0.5em; - font-style: normal; - display: block; - margin-bottom: 1em; - border-radius: 20px; } -.dl-btn-img-nonfree a:hover { - color: white; +a.btn:hover { + color: #e7dfdf; } -.dl-btn-img-free a:hover em { +.btn:hover, .btn:focus { + border: 1px solid #0e9e41; + background: #16f666; + background: -webkit-gradient(linear, left top, left bottom, from(#16f666), to(#0d973e)); + background: -moz-linear-gradient(top, #16f666, #0d973e); + background: linear-gradient(to bottom, #16f666, #0d973e); color: white; + text-decoration: none; } -/* The overidden elements for the installer and the LiveCD varaiants. */ -.dl-btn-img-free { - left: 5%; - right: 78% +.btn:active { + background: #0b7e34; + background: -webkit-gradient(linear, left top, left bottom, from(#0b7e34), to(#0b7e34)); + background: -moz-linear-gradient(top, #0b7e34, #0b7e34); + background: linear-gradient(to bottom, #0b7e34, #0b7e34); + color: white; } -.dl-btn-img-nonfree { - left: 23%; - right: 56% +.btn:before{ + content: "\0000a0"; + display: inline-block; + height: 30px; + width: 30px; + line-height: 24px; + margin: 0 4px 0px -10px; + position: relative; + top: 0px; + left: -10px; + background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAB1UlEQVRIibXVMWgUURAG4O82p0UIQUQsDkEEETuDjTYGbUUkVbCyEewsBEshHGIhCOHQ1lqtRKI22qRJJxYWASsRSzEiRgmRi8XOmnXvvc0pcWDYeTPz/pk3O/NeB4X/SBX4MGMf7obcPEGx23JbADiOAVaxEbwaumPGoCLDXdwMwHUs4U7w89BthE+3BWfkWNX6HrbwEL2EXw+Pw2eQOH22RDAfGxcz9qL2rRKZTwXo1JQHcB6HcAVfcAo/EwHqtBevMYkH+IgX+FSPdAlrkUnFl1MZZeSrjb1rgQlmsYllzCh/2Ensb8m6GeBg7OkGxnJgznbwEkdxAt9aQP+GpvAW7yjbbbElu3+VB1gvEobc6C/YrvHCGP6/gVcwh2n5Ycm1ao6nA3OlwC3l0Cz58yfP1bJKXYZ1/dD29M8oJ70X2Nk2/RFBquz7NVu/EWxfgI60aTccHuEVLigH7QOu4UmU8EymRLeV7XxROaj3lUP3DJ+r5HK36SRu4E3LCTYj26c4LdFRXaNU1fU77gbnaE+LbQgTyvtoKyJ2GnwY13EOZ2MtbEdC/x5fE3sr3vFFq5emyf2E/4g8zqOfCtLspCzVp7mNmz95J//ki9Zcp8o1Vlkq+RdF139qw2G1QgAAAABJRU5ErkJggg==") no-repeat left center transparent; + background-size: 100% 100%; +} + +.btn-non-free { + border: 1px solid #225594; + background: #40a0ff; + background: -webkit-gradient(linear, left top, left bottom, from(#40a0ff), to(#225594)); + background: -moz-linear-gradient(top, #40a0ff, #225594); + background: linear-gradient(to bottom, #40a0ff, #225594); + -webkit-box-shadow: #1169c0 1px -1px 21px 0px; + -moz-box-shadow: #1169c0 1px -1px 10px 0px; + text-shadow: #143257 1px 1px 1px; +} + +.btn-non-free:hover, .btn-non-free:focus { + border: 1px solid #225594; + background: #4dc0ff; + background: -webkit-gradient(linear, left top, left bottom, from(#4dc0ff), to(#2966b2)); + background: -moz-linear-gradient(top, #4dc0ff, #2966b2); + background: linear-gradient(to bottom, #4dc0ff, #2966b2); + color: #ffffff; + text-decoration: none; } - -.dl-btn-live-free { - left: 47%; - right: 35% +.btn-non-free:active { + background: #225594; + background: -webkit-gradient(linear, left top, left bottom, from(#225594), to(#225594)); + background: -moz-linear-gradient(top, #225594, #225594); + background: linear-gradient(to bottom, #225594, #225594); } -.dl-btn-live-nonfree { - left: 67%; - right: 15% +/* The third extra button for more downloads.*/ +.btn-more-img { + display: inline-block; + text-align: center; + vertical-align: middle; + padding: 12px 24px; + border: 1px solid #5e6270; + border-radius: 8px; + background: #b2b5bf; + background: -webkit-gradient(linear, left top, left bottom, from(#b2b5bf), to(#969cb3)); + background: -moz-linear-gradient(top, #b2b5bf, #969cb3); + background: linear-gradient(to bottom, #b2b5bf, #969cb3); + text-shadow: #3b3d46 1px 1px 1px; + font: normal normal bold 20px/* arial*/; + color: #ffffff; + text-decoration: none; } -.dl-btn-img-nonfree a { - border: 0.15em solid #f92908; +a.btn-more-img { + color: white; + text-decoration: none; } -.dl-btn-img-free a:hover { - background-color: #339900; /* green */ - color: white; +a.btn-more-img:hover { + color: black; } -.dl-btn-img-nonfree a:hover { - background-color: #d2351c; /* red */ +.btn-more-img:hover, +.btn-more-img:focus { + border: 1px solid #757a8c; + background: #d6d9e5; + background: -webkit-gradient(linear, left top, left bottom, from(#d6d9e5), to(#7d7e84)); + background: -moz-linear-gradient(top, #d6d9e5, #7d7e84); + background: linear-gradient(to bottom, #d6d9e5, #7d7e84); + color: #ffffff; + text-decoration: none; } - -.dl-btn-img-free a em { - color: #339900; +.btn-more-img:active { + background: #6b6d73; + background: -webkit-gradient(linear, left top, left bottom, from(#6b6d73), to(#969cb3)); + background: -moz-linear-gradient(top, #6b6d73, #969cb3); + background: linear-gradient(to bottom, #6b6d73, #969cb3); } - -.dl-btn-img-nonfree a em { - color: #f92908; +.btn-more-img:before{ + content: "\0000a0"; + display: inline-block; + height: 24px; + width: 24px; + line-height: 24px; + margin: 0 4px -6px -4px; + position: relative; + top: 0px; + left: 0px; + background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABrklEQVRIia3WzW4TQQwH8F9CQFG0qqpKVEhEkXgA4MCZA0/HU3CscuHYN6gQ6oV3CJxAag+E71ZZDuNJJptskq1qyRrvjsde/+2xF/qY4Ay/UXfkOaYYh60mm2BWHLjBzw58E+dmYWtpOK9nofAOT3CEqgOfxtk6bCmN9yLEIZ7iW2wsYn2Egf10jC+4xjN8LzfrCLUqwpsErlcdoMoQX0UkGa4NB2PrObkrz8LWhoOpVU5OWiDp75BPrHIybToYRoh1KG4ru0P4VKqueemdlNBhyNexLoK7yL/wD1XTQZMWW+QBPuByz9mlchu1OR/iBUYaF2rbuV0RtIXfSWffJSphybkpv7wqdP/gtmngUIguJFjy++zsa6HzCW90iCC3i7yOtuiU77KtJoxr96CyuvZt1ElngB9SyCOpfjPtK+GDdPo4l8J7K3XFTPdSRbQ3tzYaSEn/uENnDcZyZOY+VNvdawbBbfsbDjId2Wx2mbrIy2b3QJpqGZK/eInneBww9KTJ9jDWffKxlM9XeN+zXuuknFwEbLdSV+xCecx+xutmiPl5LA2Lubv9xuSR6T/zur71snglUwAAAABJRU5ErkJggg==") no-repeat left center transparent; + background-size: 100% 100%; } -.dl-btn-img-free a:hover em { - background-color: #339900; +.btn-more-images { + margin-top: -1.5em; } -.dl-btn-img-nonfree a:hover em { - background-color: #d2351c; - color: white; +.btn-more-livecds { + margin-top: 0.8em; } - -- cgit v1.2.3