Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
av-styles-and-scripts [2020/06/08 09:21] avsetula |
av-styles-and-scripts [2024/03/22 12:25] (current) avsetula |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | /* | + | /****************************************************************/ |
| - | *Popis uživatelských stylů a skriptů pro KB.Unipi od AVsetula | + | /* Popis uživatelských stylů a skriptů pro KB.Unipi od AVsetula */ |
| - | */ | + | /****************************************************************/ |
| + | |||
| + | /****************************************************************/ | ||
| + | /* CSS */ | ||
| + | /****************************************************************/ | ||
| <html> | <html> | ||
| <style> | <style> | ||
| - | /* Modry nadpis pro uroven H7 bez podtrzeni */ | + | /*********************************************/ |
| - | span.kbBlueLightText{ font-weight: bold; color: #00679a;} | + | /* Úpravy textu (nadpisy, zdůraznění, atd..) */ |
| + | /*********************************************/ | ||
| | | ||
| - | /* Modre zvýraznění textu */ | + | /* Modry nadpis pro uroven H7 bez bold */ |
| - | span.avBlueText{font-weight: bold; color: #2f5496;} | + | span.kbBlueLightText{ color: #00679a;} |
| | | ||
| - | /* Oranzove zvýraznění textu */ | + | /* Modre zvýraznění textu */ |
| - | span.avOrangeText{font-weight: bold; color: #c45911;} | + | span.avBlueText{font-weight: bold; color: #2f5496;} |
| | | ||
| - | /* Rude podbarveni textu */ | + | /* Oranzove zvýraznění textu */ |
| - | span.wrongTranslate{font-weight: bold; background: #bb2922; color: #fff;} | + | span.avOrangeText{font-weight: bold; color: #c45911;} |
| | | ||
| - | /* Modry nadpis pro uroven H7 */ | + | /* Rude podbarveni textu */ |
| - | span.kbBlueText{font-weight: bold; color: #00679a;} | + | span.wrongTranslate{font-weight: bold; background: #bb2922; color: #fff;} |
| | | ||
| - | /* Modry nadpis pro uroven H8 */ | + | /* Modry nadpis pro uroven H7 */ |
| - | span.kbBlue-H8{padding-left: 20px; font-weight: bold; color: #00679a;} | + | span.kbBlueText{font-size: 17px; font-weight: bold; color: #00679a;} |
| + | |||
| + | /* Modry nadpis pro uroven H7.5 */ | ||
| + | span.kbBlue-H75{font-weight: bold; color: #00679a;} | ||
| | | ||
| - | /* Alternativní modry nadpis pro uroven H4 bez horní čáry */ | + | /* Modry nadpis pro uroven H8 */ |
| - | span.kbBlue-H4alt{font-size: 25px; color: #00679a; margin-top: 10px; display: inline-block;} | + | span.kbBlue-H8{padding-left: 20px; font-weight: bold; color: #00679a;} |
| | | ||
| - | /* Tagovací div */ | + | /* Alternativní modry nadpis pro uroven H4 bez horní čáry */ |
| - | .errorTag{width: 0; height: 0; margin: 0;} | + | span.kbBlue-H4alt{font-size: 25px; color: #00679a; margin-top: 10px; display: inline-block;} |
| - | + | ||
| - | + | ||
| - | /* HW tagy článků */ | + | |
| - | .dev-axon {color: #fff; background-color: #222;} | + | |
| - | .dev-neuron {color: #fff; background-color: #017ebe;} | + | |
| - | .dev-unipi11 {color: #fff; background-color: #1a9368;} | + | |
| - | .dev-extens{color: #fff; background-color: #777;} | + | |
| | | ||
| - | span.dev-tag {border-radius: 25px; font-weight: bold; font-size: 12px; padding: 0.5px 10px 0 10px;} | + | /* Alternativní modry nadpis pro vypsaní web. adresy na školení */ |
| - | span.mini-tag {border-radius: 25px; font-weight: bold; font-size: 12px; padding: 0 4px;} | + | span.kbBlue-skoleni{font-size: 35px; color: #00679a; margin-top: 10px; display: inline-block;} |
| - | span.color-tag {border-radius: 25px; font-weight: bold; font-size: 12px; padding: 0 8px;} | + | |
| | | ||
| - | div.multi-tag {border-radius: 25px; width: 16px; height: 16px; display: inline-block; margin: 0; overflow: hidden;} | + | /* Alternativní modry nadpis pro uroven H5 bez horní čáry */ |
| - | div.multi-tag div {width: 8px; height: 8px; display: block; float: left;} | + | span.kbBlue-H5alt{font-size: 20px; color: #00679a; margin-top: 10px; display: inline-block; padding-bottom: 10px;} |
| + | |||
| + | /* Tagovací div */ | ||
| + | .errorTag{width: 0; height: 0; margin: 0;} | ||
| + | |||
| + | /* Package name - zelená */ | ||
| + | span.packageName{font-weight: bold; color: #0d9d60;} | ||
| + | |||
| + | /* Package version - magenta*/ | ||
| + | span.packageVersion{color: #e600e6;} | ||
| | | ||
| + | | ||
| + | | ||
| + | /******************/ | ||
| + | /* Tagy článků */ | ||
| + | /******************/ | ||
| | | ||
| + | /* obsolete - backward compatibility */ | ||
| + | span.dev-tag, span.tagging { | ||
| + | border-radius: 25px; | ||
| + | font-weight: bold; | ||
| + | font-size: 12px; | ||
| + | padding: 0.5px 10px 0 10px; | ||
| + | text-decoration: none; | ||
| + | } | ||
| + | | ||
| + | a:has(> span.dev-tag) {text-decoration: none!important;} | ||
| + | | ||
| + | .dev-iris {color: #fff; background-color: #222;} | ||
| + | .dev-patron {color: #fff; background-color: #222;} | ||
| + | .dev-axon {color: #fff; background-color: #222; opacity: .86} | ||
| + | .dev-neuron {color: #fff; background-color: #017ebe;} | ||
| + | .dev-gate {color: #fff; background-color: #005079;} | ||
| + | .dev-unipi11 {color: #fff; background-color: #1a9368;} | ||
| + | .dev-extens{color: #fff; background-color: #777;} | ||
| + | | ||
| + | /* tagsBox - custom download page */ | ||
| + | | ||
| + | div.tagsBox{ | ||
| + | font-size: 14px; | ||
| + | } | ||
| + | | ||
| + | div.tagsBox span{ | ||
| + | border-radius: 25px; | ||
| + | color: #fff; | ||
| + | padding: 0.5px 10px 0 10px; | ||
| + | text-decoration: none; | ||
| + | display: inline-block; | ||
| + | margin-top: 6px; | ||
| + | } | ||
| + | | ||
| + | div.upperTags{ | ||
| + | text-align: right; | ||
| + | } | ||
| + | | ||
| + | div.lowerTags{ | ||
| + | padding-top: 6px; | ||
| + | border-top: 2px solid #fff; | ||
| + | } | ||
| + | | ||
| + | div.lowerTags span{ | ||
| + | cursor: pointer; | ||
| + | } | ||
| + | | ||
| + | div.tagsBox span.green{ | ||
| + | background-color: #1a9368; | ||
| + | } | ||
| + | | ||
| + | div.lowerTags span.green:hover{ | ||
| + | background-color: #17845e; | ||
| + | } | ||
| + | | ||
| + | div.tagsBox span.black{ | ||
| + | background-color: #222; | ||
| + | opacity: .86; | ||
| + | } | ||
| + | | ||
| + | div.lowerTags span.black:hover{ | ||
| + | background-color: #444; | ||
| + | } | ||
| + | | ||
| + | div.tagsBox span.blue{ | ||
| + | background-color: #017ebe; | ||
| + | } | ||
| + | | ||
| + | div.lowerTags span.blue:hover{ | ||
| + | background-color: #016fa9; | ||
| + | } | ||
| + | | ||
| + | div.tagsBox span.darkblue{ | ||
| + | background-color: #005079; | ||
| + | } | ||
| + | | ||
| + | div.lowerTags span.darkblue:hover{ | ||
| + | background-color: #00689f; | ||
| + | } | ||
| + | | ||
| + | | ||
| + | /* tag skeleton */ | ||
| + | span.tag-skelet span , span.article-tag { | ||
| + | border-radius: 25px; | ||
| + | font-size: 12px; | ||
| + | padding: 0 10px; | ||
| + | text-decoration: none; | ||
| + | } | ||
| + | | ||
| + | span.tag-skelet a { | ||
| + | text-decoration: none; | ||
| + | } | ||
| + | | ||
| + | /* pouze pro kombinaci s třídou article-tag */ | ||
| + | a.tag-skelet { | ||
| + | text-decoration: none; | ||
| + | } | ||
| + | | ||
| + | | ||
| + | /* OS image page tags */ | ||
| + | span.wrap-tags { | ||
| + | width: 100%; | ||
| + | display: inline-block; | ||
| + | text-decoration: none; | ||
| + | line-height: 1.7; | ||
| + | } | ||
| + | |||
| + | span.upperTags { | ||
| + | padding-bottom: 12px; | ||
| + | border-bottom: 2px solid #fff; | ||
| + | text-align: left; | ||
| + | } | ||
| + | | ||
| + | span.lowerTags { | ||
| + | padding-top: 12px; | ||
| + | border-top: 2px solid #fff; | ||
| + | text-align: left; | ||
| + | } | ||
| + | |||
| + | span.wrap-tags span { | ||
| + | padding: 0.8px 10px; | ||
| + | font-size: 14px; | ||
| + | } | ||
| + | | ||
| + | span.linktags span { | ||
| + | cursor: pointer; | ||
| + | } | ||
| + | | ||
| + | p:has(> span.wrap-tags) {margin-bottom: 6px !important;} | ||
| + | | ||
| + | | ||
| + | /* inline page tags */ | ||
| + | span.inline-tags { | ||
| + | width: 100%; | ||
| + | display: inline-block; | ||
| + | font-weight: bold; | ||
| + | text-align: left; | ||
| + | } | ||
| + | | ||
| + | span.inline-tags span { | ||
| + | margin-left: 1px; | ||
| + | margin-right: 1px; | ||
| + | } | ||
| + | | ||
| + | span.inline-tags span:first-of-type {margin-left: 0} | ||
| + | | ||
| + | |||
| + | /* article tags with tooltip */ | ||
| + | span.article-tag { | ||
| + | position: relative; | ||
| + | font-weight: bold; | ||
| + | line-height: 1.42857143; | ||
| + | } | ||
| + | | ||
| + | span.article-tag:hover .tag-tooltip { | ||
| + | visibility: visible; | ||
| + | } | ||
| + | | ||
| + | .tag-tooltip { | ||
| + | visibility: hidden; | ||
| + | position: absolute; | ||
| + | z-index: 2; | ||
| + | width: 133px; | ||
| + | text-align: center; | ||
| + | color: white; | ||
| + | font-size: 12px; | ||
| + | background-color: #192733; | ||
| + | border-radius: 10px; | ||
| + | padding: 3px 5px 3px 5px; | ||
| + | | ||
| + | top: -35px; | ||
| + | left: calc(-64px + 50%); | ||
| + | } | ||
| + | |||
| + | .tag-tooltip::before { | ||
| + | content: ""; | ||
| + | position: absolute; | ||
| + | transform: rotate(45deg); | ||
| + | background-color: #192733; | ||
| + | padding: 5px; | ||
| + | z-index: 1; | ||
| + | | ||
| + | top: 73%; | ||
| + | left: 45%; | ||
| + | } | ||
| + | | ||
| + | | ||
| + | /* tag styles */ | ||
| + | .tag-black, .tag-patron {color: #fff; background-color: #222;} | ||
| + | span.linktags .tag-black:hover {background-color: #333;} | ||
| + | .tag-lightblack, .tag-axon {color: #fff; background-color: #222; opacity: .86} | ||
| + | span.linktags .tag-lightblack:hover {background-color: #444;} | ||
| + | .tag-lightblue, .tag-neuron {color: #fff; background-color: #017ebe;} | ||
| + | span.linktags .tag-lightblue:hover {background-color: #016fa9;} | ||
| + | .tag-darkblue, .tag-gate {color: #fff; background-color: #005079;} | ||
| + | span.linktags .tag-darkblue:hover {background-color: #00689f;} | ||
| + | .tag-green, .tag-unipi11 {color: #fff; background-color: #1a9368;} | ||
| + | span.linktags .tag-green:hover {background-color: #17845e;} | ||
| + | .tag-grey, .tag-extens {color: #fff; background-color: #777;} | ||
| + | span.linktags .tag-grey:hover {background-color: #888;} | ||
| + | | ||
| + | .tag-blue, .tag-revised {color: #fff; background-color: #2172cb;} | ||
| + | span.linktags .tag-blue:hover, .tag-revised:hover {background-color: #3284de;} | ||
| + | .tag-lightgreen, .tag-new {color: #fff; background-color: #17bb20;} | ||
| + | span.linktags .tag-lightgreen:hover, .tag-new:hover {background-color: #129c1a;} | ||
| + | | ||
| + | | ||
| + | /*******************/ | ||
| /* CSS pro JS lupu */ | /* CSS pro JS lupu */ | ||
| - | figure.zoom { | + | /*******************/ |
| - | background-position: 50% 50%; | + | |
| - | position: relative; | + | figure.zoom { |
| - | max-width: 100%; | + | background-position: 50% 50%; |
| + | position: relative; | ||
| + | max-width: 100%; | ||
| + | height: auto; | ||
| + | overflow: hidden; | ||
| + | display: inline-block; | ||
| + | cursor: zoom-in; | ||
| + | } | ||
| + | |||
| + | figure.zoom img { | ||
| + | display: block; | ||
| + | width: 100%; | ||
| + | height: auto; | ||
| + | } | ||
| + | |||
| + | .hide-opacity {opacity: 0;} | ||
| + | |||
| + | .mark {color: #eee; background-color: red} | ||
| + | |||
| + | |||
| + | /******************************/ | ||
| + | /* Úprava pluginu tab-include */ | ||
| + | /******************************/ | ||
| + | |||
| + | /* nastavení barvy pozadí */ | ||
| + | .dwpl-ti { | ||
| + | padding: 10px 0 0 0!important; | ||
| + | } | ||
| + | |||
| + | /* odebrání stímu kolem boxu */ | ||
| + | .dwpl-ti-tab { | ||
| + | box-shadow: none!important; | ||
| + | padding: 5px 10px!important; | ||
| + | } | ||
| + | |||
| + | /* odebrání značky před textem */ | ||
| + | .dwpl-ti-tab::before { | ||
| + | display: none!important; | ||
| + | } | ||
| + | |||
| + | |||
| + | .dwpl-ti-tab-embd-title { | ||
| + | font-size: 16px!important; | ||
| + | font-weight: 530; | ||
| + | } | ||
| + | |||
| + | .dwpl-ti-tab-embd-title.selected { | ||
| + | color: #fff!important; | ||
| + | } | ||
| + | |||
| + | /* Nastavení maximální šířky */ | ||
| + | .dwpl-ti-content-box { | ||
| + | padding: 0!important; | ||
| + | padding-top: 30px!important; | ||
| + | box-shadow: none!important; | ||
| + | overflow: auto!important; | ||
| + | } | ||
| + | |||
| + | /* Odebrání linků */ | ||
| + | .dwpl-ti-permalink-header { | ||
| + | display: none; | ||
| + | } | ||
| + | |||
| + | .dwpl-ti-permalink-footer { | ||
| + | display: none; | ||
| + | } | ||
| + | |||
| + | /* Centorvání menu | ||
| + | .dwpl-ti { | ||
| + | justify-content: center!important; | ||
| + | display: flex!important; | ||
| + | } | ||
| + | */ | ||
| + | |||
| + | /*******************************************/ | ||
| + | |||
| + | /* Úprava pro zobrazení záložkové varianty */ | ||
| + | /* nastavení barvy pozadí */ | ||
| + | .dwpl-ti { | ||
| + | background-color: #fff!important; | ||
| + | border-radius: 0px!important; | ||
| + | } | ||
| + | |||
| + | /* Ohraničení kolem boxu */ | ||
| + | .dwpl-ti-tab { | ||
| + | border-radius: 8px 8px 0 0!important; | ||
| + | margin-bottom: 0!important; | ||
| + | } | ||
| + | |||
| + | /* Odebrání ohraníčení obsahu */ | ||
| + | .dwpl-ti-content-box { | ||
| + | border: 0!important; | ||
| + | border-top: 1px solid #ccc!important; | ||
| + | } | ||
| + | |||
| + | |||
| + | /***************************/ | ||
| + | /* Přepínač verzí návodů */ | ||
| + | /***************************/ | ||
| + | .version-switch{ | ||
| + | width: 100%; | ||
| + | height: 40px; | ||
| + | |||
| + | border-bottom: 1px solid #ccc; | ||
| + | margin: 0; | ||
| + | padding: 0 5px; | ||
| + | } | ||
| + | |||
| + | .version-switch > a > div:hover{ | ||
| + | background-color: #f7f7f7; | ||
| + | } | ||
| + | |||
| + | .version-switch > a > div{ | ||
| + | width: auto; | ||
| height: auto; | height: auto; | ||
| - | overflow: hidden; | + | padding: 5px 10px; |
| + | font-size: 14px; /* 16px original */ | ||
| + | font-weight: bold; | ||
| + | |||
| + | border: 1px solid #ccc; | ||
| + | border-bottom: 0!important; | ||
| + | border-radius: 8px 8px 0 0; | ||
| + | float: left; | ||
| + | margin: 8px 2.5px 0 2.5px; | ||
| + | |||
| + | background-color: #fff; | ||
| + | color: #999; | ||
| + | } | ||
| + | |||
| + | .version-switch > a > div.actual-version{ | ||
| + | height: 32px; | ||
| + | |||
| + | background-color: #00679a; | ||
| + | color: #fff; | ||
| + | border: 1px solid #00679a; | ||
| + | } | ||
| + | |||
| + | .version-switch > div.title{ | ||
| + | width: auto; | ||
| + | height: 40px; | ||
| + | padding: 6px 15px; | ||
| + | font-size: 20px; | ||
| + | font-weight: bold; | ||
| + | |||
| + | border: 1px solid #00679a; | ||
| + | border-bottom: 0!important; | ||
| + | border-radius: 8px 8px 0 0; | ||
| + | float: left; | ||
| + | margin: 0 2.5px; | ||
| + | |||
| + | background-color: #00679a; | ||
| + | color: #fff; | ||
| + | } | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | /***************************/ | ||
| + | /* GIF loop */ | ||
| + | /***************************/ | ||
| + | .gif-loop{ | ||
| + | height: 50px; | ||
| + | |||
| + | margin: 0 auto; | ||
| + | color: #333; | ||
| + | background-color: #ddd; | ||
| + | border-radius: 8px; | ||
| + | font-weight: bold; | ||
| + | cursor: pointer; | ||
| + | |||
| + | text-align: center; | ||
| + | font-size: 16px; | ||
| + | padding-top: 12px; | ||
| + | } | ||
| + | |||
| + | |||
| + | .gif-loop:hover{ | ||
| + | color: #000; | ||
| + | background-color: #eee; | ||
| + | } | ||
| + | |||
| + | .gif-loop{ | ||
| + | -webkit-touch-callout: none; | ||
| + | -webkit-user-select: none; | ||
| + | -khtml-user-select: none; | ||
| + | -moz-user-select: none; | ||
| + | -ms-user-select: none; | ||
| + | user-select: none; | ||
| + | } | ||
| + | |||
| + | @media only screen and (max-width: 642px) { | ||
| + | .gif-loop{ | ||
| + | height: 35px; | ||
| + | font-size: .8em; | ||
| + | padding-top: 7.5px; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @media only screen and (min-width: 768px) and (max-width: 991px) { | ||
| + | .gif-loop{ | ||
| + | height: 40px; | ||
| + | font-size: 12px; | ||
| + | padding-top: 10px; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | /***************************/ | ||
| + | /* Tiles customization (úprava dlaždic) */ | ||
| + | /***************************/ | ||
| + | div.tiles{ | ||
| + | background: #fff!important; | ||
| + | } | ||
| + | |||
| + | div.tile{ | ||
| + | height: auto!important; | ||
| + | min-height: auto!important; | ||
| + | border: 2px solid #d5e6ee; | ||
| + | border-radius: 10px; | ||
| + | } | ||
| + | |||
| + | div.tile a{ | ||
| + | height: 100%; | ||
| display: inline-block; | display: inline-block; | ||
| - | cursor: zoom-in; | + | } |
| - | } | + | |
| + | |||
| + | @media only screen and (orientation: portrait) and (max-width: 410px) { | ||
| + | div.tile{ | ||
| + | width: 8.2em; | ||
| + | } | ||
| + | |||
| + | div.tile div.img{ | ||
| + | height: 7em; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | |||
| + | @media only screen and (orientation: portrait) and (max-width: 358px) { | ||
| + | div.tile{ | ||
| + | width: 6.3em; | ||
| + | } | ||
| + | |||
| + | div.tile div.img img{ | ||
| + | max-width: 4.8em; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | |||
| + | /***************************/ | ||
| + | /* Gallery plugin - BUGFIX */ | ||
| + | /***************************/ | ||
| + | .gallery_center{ | ||
| + | width: 100%!important; | ||
| + | } | ||
| + | |||
| + | |||
| + | /*********************************/ | ||
| + | /* All images max-width - BUGFIX */ | ||
| + | /*********************************/ | ||
| + | img{ | ||
| + | max-width: 100% !important; | ||
| + | } | ||
| + | |||
| + | |||
| + | /***************************/ | ||
| + | /* Header - BUGFIX */ | ||
| + | /***************************/ | ||
| + | .navbar-brand { | ||
| + | padding-right: 5px; | ||
| + | } | ||
| | | ||
| - | figure.zoom img { | + | .navbar-default .navbar-brand #dw__logo { |
| + | margin-right: 5px; | ||
| + | } | ||
| + | |||
| + | .navbar-collapse.collapse.in { | ||
| + | overflow: hidden; | ||
| + | } | ||
| + | |||
| + | button.navbar-toggle { | ||
| + | height: 42px; | ||
| + | } | ||
| + | |||
| + | |||
| + | |||
| + | /******************************/ | ||
| + | /* Definice vlastních fontů */ | ||
| + | /******************************/ | ||
| + | |||
| + | @font-face { | ||
| + | font-family: NeuzeitGrotesk; | ||
| + | src: url(/_media/files:neuzeitgrotesktot-reg.zip); | ||
| + | } | ||
| + | |||
| + | /***************************/ | ||
| + | /* Unipi e-shop button */ | ||
| + | /***************************/ | ||
| + | div#headerSepar{ | ||
| + | background-color: #fff; | ||
| + | width: 2px; | ||
| + | height: 38px; | ||
| + | margin: .2em auto; | ||
| + | float: left; | ||
| + | } | ||
| + | |||
| + | @media only screen and (max-width: 767px) { | ||
| + | header#dokuwiki__header div.container-fluid a#header_button{ | ||
| + | margin: auto; | ||
| + | height: 44px; | ||
| + | display: block; | ||
| + | margin-top: 5px; | ||
| + | padding-left: 47px; | ||
| + | } | ||
| + | |||
| + | header#dokuwiki__header div.navbar-right a#header_button{ | ||
| + | display: none; | ||
| + | } | ||
| + | |||
| + | div#headerSepar{ | ||
| + | display: none; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @media only screen and (min-width: 768px) { | ||
| + | header#dokuwiki__header div.container-fluid a#header_button{ | ||
| + | display: none; | ||
| + | } | ||
| + | |||
| + | header#dokuwiki__header div.navbar-right a#header_button { | ||
| + | margin: 0px; | ||
| + | float: left; | ||
| + | width: 50px; | ||
| + | height: 44px; | ||
| + | display: block; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @media only screen and (min-width: 992px) { | ||
| + | header#dokuwiki__header div.navbar-right a#header_button{ | ||
| + | width: auto; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | /***********************************/ | ||
| + | /* Custom download page ************/ | ||
| + | /***********************************/ | ||
| + | |||
| + | @media only screen and (max-width: 600px) { | ||
| + | div#downloadPageCover{ | ||
| + | align-items: strech !important; | ||
| + | flex-direction: column-reverse !important; | ||
| + | } | ||
| + | |||
| + | div#downloadPageCover > a, div#downloadPageCover > div.os-info{ | ||
| + | width: 100% !important; | ||
| + | } | ||
| + | |||
| + | div#downloadPageCover > div.os-info{ | ||
| + | padding-top: 10px; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @media only screen and (min-width: 992px) { | ||
| + | div#downloadPageCover > a{ | ||
| + | max-width: 185px; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | div#downloadPageCover{ | ||
| + | width: 100%; | ||
| + | min-height: 150px; | ||
| + | margin: 0; | ||
| + | padding: 8px 0; | ||
| + | |||
| + | border-top: 2px solid #fff; | ||
| + | // border-bottom: 2px solid #fff; | ||
| + | |||
| + | text-decoration: none; | ||
| + | color: #000; | ||
| + | |||
| + | display: flex; | ||
| + | align-items: center; | ||
| + | justify-content: space-between; | ||
| + | flex-direction: row; | ||
| + | } | ||
| + | |||
| + | div#downloadPageCover > a{ | ||
| + | width: 30%; | ||
| + | background-color: #fefefe; | ||
| + | |||
| + | border: 3px solid #ddd; | ||
| + | border-radius: 10px; | ||
| + | cursor: pointer; | ||
| + | text-decoration: none; | ||
| + | |||
| + | display: flex; | ||
| + | align-items: center; | ||
| + | justify-content: center; | ||
| + | flex-direction: column; | ||
| + | } | ||
| + | |||
| + | div#downloadPageCover > a:hover { | ||
| + | background-color: #fff; | ||
| + | border-color: #1b75bc; | ||
| + | } | ||
| + | |||
| + | div#downloadPageCover div.os-download{ | ||
| + | width: 100%; | ||
| + | margin: auto 0; | ||
| + | } | ||
| + | |||
| + | div#downloadPageCover div.os-download > div.download-label{ | ||
| + | width: 100%; | ||
| + | |||
| + | color: #1b75bc; | ||
| + | text-align: center; | ||
| + | margin-top: 10px; | ||
| + | font-size: 24px; | ||
| + | text-decoration: none; | ||
| + | font-weight: bold; | ||
| + | |||
| + | padding: 0 8px; | ||
| + | line-height: 1.2; | ||
| + | } | ||
| + | |||
| + | div#downloadPageCover div.os-download > img{ | ||
| + | height: auto; | ||
| + | width: auto; | ||
| + | max-height: 120px; | ||
| + | | ||
| display: block; | display: block; | ||
| + | margin-left: auto; | ||
| + | margin-right: auto; | ||
| + | filter: invert(36%) sepia(59%) saturate(655%) hue-rotate(163deg) brightness(100%) contrast(102%); // #1b75bc | ||
| + | } | ||
| + | | ||
| + | div#downloadPageCover > div.os-info{ | ||
| + | width: 75%; | ||
| + | | ||
| + | padding-left: 5px; | ||
| + | padding-right: 15px; | ||
| + | box-sizing: border-box; | ||
| + | } | ||
| + | |||
| + | div#downloadPageCover div.description{ | ||
| + | padding-top: 3px; | ||
| + | padding-bottom: 10px; | ||
| + | font-size: 1em; | ||
| + | } | ||
| + | |||
| + | div#downloadPageCover div.subdescription{ | ||
| + | padding-bottom: 10px; | ||
| + | } | ||
| + | | ||
| + | div#downloadPageCover div.parameter{ | ||
| + | font-size: 14px; | ||
| + | } | ||
| + | |||
| + | div#downloadPageCover div.parameter p{ | ||
| + | font-weight: bold; | ||
| + | color:#333; | ||
| + | font-size: 14px !important; | ||
| + | display: inline; | ||
| + | margin: 0; | ||
| + | } | ||
| + | |||
| + | |||
| + | |||
| + | /***********************************/ | ||
| + | /* Horizontální menu - avsetula ****/ | ||
| + | /***********************************/ | ||
| + | |||
| + | #lButton{ | ||
| + | width: 13px; | ||
| + | height: 28px; | ||
| + | | ||
| + | position: absolute; | ||
| + | left: 0px; | ||
| + | top: 12px; | ||
| + | z-index: 10; | ||
| + | | ||
| + | cursor: pointer; | ||
| + | display: block; | ||
| + | | ||
| + | background-image: url("/_media/user:avsetula:prototype:01-horizontal-menu:leftstep.png"); | ||
| + | background-size: cover; | ||
| + | background-repeat: no-repeat; | ||
| + | background-position: bottom left; | ||
| + | opacity: 0.5; | ||
| + | } | ||
| + | | ||
| + | #lButton-bg { | ||
| + | width: 15px; | ||
| + | height: 31px; | ||
| + | | ||
| + | position: absolute; | ||
| + | left: 0px; | ||
| + | top: 9px; | ||
| + | z-index: 8; | ||
| + | | ||
| + | background: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,0.7), rgba(255,255,255,1)); | ||
| + | } | ||
| + | | ||
| + | #rButton{ | ||
| + | width: 13px; | ||
| + | height: 28px; | ||
| + | | ||
| + | position: absolute; | ||
| + | right: 0; | ||
| + | top: 12px; | ||
| + | z-index: 10; | ||
| + | | ||
| + | cursor: pointer; | ||
| + | display: block; | ||
| + | | ||
| + | background-image: url("/_media/user:avsetula:prototype:01-horizontal-menu:rightstep.png"); | ||
| + | background-size: cover; | ||
| + | background-repeat: no-repeat; | ||
| + | background-position: bottom right; | ||
| + | opacity: 0.5; | ||
| + | } | ||
| + | | ||
| + | #rButton-bg { | ||
| + | width: 15px; | ||
| + | height: 31px; | ||
| + | | ||
| + | position: absolute; | ||
| + | right: 0px; | ||
| + | top: 9px; | ||
| + | z-index: 8; | ||
| + | | ||
| + | background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.7), rgba(255,255,255,1)); | ||
| + | } | ||
| + | | ||
| + | .version-switch1{ | ||
| width: 100%; | width: 100%; | ||
| + | height: 40px; | ||
| + | | ||
| + | margin: 0; | ||
| + | padding: 0 5px; | ||
| + | } | ||
| + | | ||
| + | #tabs { | ||
| + | overflow: hidden; | ||
| + | -webkit-overflow-scrolling: touch; | ||
| + | | ||
| + | width: auto; | ||
| + | height: 40px; | ||
| + | disply: block; | ||
| + | | ||
| + | position: relative; | ||
| + | } | ||
| + | | ||
| + | #tabs > div::-webkit-scrollbar { | ||
| + | display: none; | ||
| + | } | ||
| + | | ||
| + | #tabs-container { | ||
| + | width: 100%; | ||
| + | height: 99%; | ||
| + | | ||
| + | overflow-x: auto; | ||
| + | overflow-y: hidden; | ||
| + | box-sizing: border-box; | ||
| + | white-space: nowrap; | ||
| + | | ||
| + | -ms-overflow-style: none; | ||
| + | scrollbar-width: none; | ||
| + | scroll-behavior: smooth; | ||
| + | } | ||
| + | | ||
| + | #tabs-container > a { | ||
| + | display: inline-block; | ||
| + | } | ||
| + | | ||
| + | #tabs-container > a:first-child { | ||
| + | margin-left: 14px; | ||
| + | } | ||
| + | | ||
| + | #tabs-container > a:last-child { | ||
| + | margin-right: 14px; | ||
| + | } | ||
| + | | ||
| + | #tabs-container > a > span:hover{ | ||
| + | background-color: #f5f9fb; | ||
| + | color: #888; | ||
| + | } | ||
| + | | ||
| + | #tabs-container > a > span{ | ||
| + | width: auto; | ||
| height: auto; | height: auto; | ||
| - | } | + | padding: 5px 10px; |
| + | font-size: 14px; /* 16px original */ | ||
| + | font-weight: bold; | ||
| + | |||
| + | border: 1px solid #ccc; | ||
| + | border-bottom: 0!important; | ||
| + | border-radius: 8px 8px 0 0; | ||
| + | float: left; | ||
| + | margin: 9px 2.5px 0 2.5px; | ||
| + | |||
| + | background-color: #fff; | ||
| + | color: #999; | ||
| + | } | ||
| + | |||
| + | #tabs-container > a > span.actual-version{ | ||
| + | background-color: #00679a; | ||
| + | color: #fff; | ||
| + | border: 1px solid #00679a; | ||
| + | } | ||
| + | |||
| + | .version-switch1 > div.title{ | ||
| + | width: auto; | ||
| + | height: 41px; | ||
| + | padding: 6px 15px; | ||
| + | font-size: 20px; | ||
| + | font-weight: bold; | ||
| + | |||
| + | border: 1px solid #b7d4e3; /* #00679a; */ | ||
| + | border-bottom: 0!important; | ||
| + | border-radius: 8px 8px 0 0; | ||
| + | float: left; | ||
| + | margin: 0 2.5px; | ||
| + | |||
| + | background-color: #f5f9fb; /* #00679a; */ | ||
| + | color: #00679a; /* #fff; */ | ||
| + | } | ||
| + | |||
| + | |||
| + | /* Oprava odskoku od nadpisu */ | ||
| + | |||
| + | .dw-content > p:nth-of-type(1) { | ||
| + | margin: 0 !important; | ||
| + | } | ||
| | | ||
| - | .hide-opacity {opacity: 0;} | + | .dw-content > p:nth-of-type(2) { |
| + | margin: 0 !important; | ||
| + | } | ||
| + | |||
| + | |||
| + | /*********************************************/ | ||
| + | /* rozšíření Wrapu na 100% při malé šířce ****/ | ||
| + | /*********************************************/ | ||
| + | |||
| + | @media only screen and (max-width: 600px) { | ||
| + | .dokuwiki .wrap_twothirds, .dokuwiki .wrap_half, .dokuwiki .wrap_third, .dokuwiki .wrap_quarter { | ||
| + | width: 100% !important; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | |||
| </style> | </style> | ||
| - | | + | </html> |
| - | <!-- Lupa obrazku --> | + | |
| + | |||
| + | |||
| + | /****************************************************************/ | ||
| + | /* JavaScript */ | ||
| + | /****************************************************************/ | ||
| + | |||
| + | <html> | ||
| <script> | <script> | ||
| - | function zoom(e){ | + | /****************************/ |
| - | var zoomer = e.currentTarget; | + | /* Lupa obrázků */ |
| - | var fullView= zoomer.children[0]; | + | /****************************/ |
| - | if(fullView.className == "hide-opacity") | + | |
| - | fullView.classList.remove("hide-opacity") | + | function zoom(e){ |
| - | else | + | var zoomer = e.currentTarget; |
| - | fullView.classList.add("hide-opacity") | + | var fullView= zoomer.children[0]; |
| + | if(fullView.className == "hide-opacity") | ||
| + | fullView.classList.remove("hide-opacity") | ||
| + | else | ||
| + | fullView.classList.add("hide-opacity") | ||
| | | ||
| - | e.offsetX ? offsetX = e.offsetX : offsetX = e.touches[0].pageX | + | e.offsetX ? offsetX = e.offsetX : offsetX = e.touches[0].pageX |
| - | e.offsetY ? offsetY = e.offsetY : offsetX = e.touches[0].pageX | + | e.offsetY ? offsetY = e.offsetY : offsetX = e.touches[0].pageX |
| | | ||
| - | x = offsetX/zoomer.offsetWidth*100 | + | x = offsetX/zoomer.offsetWidth*100 |
| - | if(x>0.5) x = (x-50)*1.3+50 | + | if(x>0.5) x = (x-50)*1.3+50 |
| - | else x = 50-(50-x)*1.3 | + | else x = 50-(50-x)*1.3 |
| - | if(x<0) x = 0 | + | if(x<0) x = 0 |
| - | if(x>100) x = 100 | + | if(x>100) x = 100 |
| | | ||
| - | y = offsetY/zoomer.offsetHeight*100 | + | y = offsetY/zoomer.offsetHeight*100 |
| - | if(y>0.5) y = (y-50)*1.5+50 | + | if(y>0.5) y = (y-50)*1.5+50 |
| - | else y = 50-(50-y)*1.5 | + | else y = 50-(50-y)*1.5 |
| - | if(y<0) y = 0 | + | if(y<0) y = 0 |
| - | if(y>100) y = 100 | + | if(y>100) y = 100 |
| | | ||
| - | zoomer.style.backgroundPosition = x + '% ' + y + '%'; | + | zoomer.style.backgroundPosition = x + '% ' + y + '%'; |
| - | } | + | } |
| | | ||
| - | function redirectImg(e) { | + | function redirectImg(e) { |
| - | var url = e.style.backgroundImage; | + | var url = e.style.backgroundImage; |
| - | window.location.href = url.substring(5, url.length-2); | + | window.location.href = url.substring(5, url.length-2); |
| - | } | + | } |
| | | ||
| - | function setHeight(e) { | + | function setHeight(e) { |
| - | e.style.height = e.offsetWidth*0.5625+"px"; | + | e.style.height = e.offsetWidth*0.5625+"px"; |
| - | } | + | } |
| + | | ||
| + | |||
| + | |||
| + | /***************************************************/ | ||
| + | /* GIF repeat -> oneLoop() & permLoop(x) */ | ||
| + | /***************************************************/ | ||
| + | |||
| + | function permLoop(button) { | ||
| + | var address = button.getAttribute("data-address"); | ||
| + | var swapText = button.innerHTML; | ||
| + | var elem = button.previousElementSibling.firstElementChild.firstElementChild; | ||
| + | |||
| + | button.innerHTML = button.getAttribute("data-textswap"); | ||
| + | button.setAttribute("data-textswap", swapText); | ||
| + | button.setAttribute("data-address", elem.getAttribute("src")); | ||
| + | elem.setAttribute("src", address); | ||
| + | }; | ||
| + | |||
| + | function oneLoop(button, delayTime) { | ||
| + | var address = button.getAttribute("data-address"); | ||
| + | var elem = button.previousElementSibling.firstElementChild.firstElementChild; | ||
| + | var addressOld = elem.getAttribute("src"); | ||
| + | |||
| + | if(address != addressOld){ | ||
| + | elem.setAttribute("src", address); | ||
| + | |||
| + | setTimeout(function () { | ||
| + | elem.setAttribute("src", addressOld); | ||
| + | }, delayTime); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | function shiftLoop(button, delayTime) { | ||
| + | var address = button.getAttribute("data-address"); | ||
| + | var addressLoop = button.getAttribute("data-addressloop"); | ||
| + | var swapText = button.innerHTML; | ||
| + | |||
| + | var elem = button.previousElementSibling.firstElementChild.firstElementChild; | ||
| + | var addressOld = elem.getAttribute("src"); | ||
| + | |||
| + | if((address != addressOld) && (addressLoop != addressOld)){ | ||
| + | elem.setAttribute("src", address); | ||
| + | button.setAttribute("data-addressmem", addressOld); | ||
| + | button.innerHTML = button.getAttribute("data-textswap"); | ||
| + | button.setAttribute("data-textswap", swapText); | ||
| + | |||
| + | setTimeout(function () { | ||
| + | if (swapText != button.innerHTML) { | ||
| + | elem.setAttribute("src", addressLoop); | ||
| + | } | ||
| + | }, delayTime); | ||
| + | } else { | ||
| + | elem.setAttribute("src", button.getAttribute("data-addressmem")); | ||
| + | button.innerHTML = button.getAttribute("data-textswap"); | ||
| + | button.setAttribute("data-textswap", swapText); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | |||
| + | function imgPermLoop(button) { | ||
| + | var address = button.getAttribute("data-address"); | ||
| + | var elem = button.previousElementSibling.firstElementChild; | ||
| + | elem.setAttribute("src", address); | ||
| + | }; | ||
| + | |||
| + | |||
| + | /***************************************************/ | ||
| + | /* Funkce pro úpravu vzhledu horizontálního menu */ | ||
| + | /***************************************************/ | ||
| + | |||
| + | function setSelected() { | ||
| + | var x = document.getElementsByClassName("dwpl-ti-tab-embd-title"); | ||
| + | var y = document.getElementsByClassName("dwpl-ti-tab-embd-title selected"); | ||
| + | var i; | ||
| + | |||
| + | for (i = 0; i < x.length; i++) { | ||
| + | x[i].parentElement.style.backgroundColor = "#fff"; | ||
| + | } | ||
| + | |||
| + | for (i = 0; i < y.length; i++) { | ||
| + | y[i].parentElement.style.backgroundColor = "#00679a"; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | |||
| + | /****************************************************************/ | ||
| + | /* Funkce pro odebrání mezer před a za přepínačem verzí návodů */ | ||
| + | /****************************************************************/ | ||
| + | |||
| + | function removeSpaces() { | ||
| + | document.getElementsByClassName("version-switch")[0].previousElementSibling.style.display = "none"; | ||
| + | document.getElementsByClassName("version-switch")[0].nextElementSibling.style.display = "none"; | ||
| + | } | ||
| + | |||
| + | |||
| + | /******************************************************/ | ||
| + | /* Sidebar - Funkce k detekci otevřené úrovně menu */ | ||
| + | /******************************************************/ | ||
| + | |||
| + | function detectLevel(itemNum, itemGroup) { | ||
| + | var i=0; | ||
| + | while(i < itemNum) { | ||
| + | if(itemGroup[i].className == "level2" || itemGroup[i].className == "closed" || itemGroup[i].className == "closed level2") return 1; | ||
| + | i++; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | |||
| + | /****************************************************************************/ | ||
| + | /* Unipi e-shop - funkce se volá po načtení a vloží img odkaz do headeru */ | ||
| + | /****************************************************************************/ | ||
| + | |||
| + | function insertEshopButton() { | ||
| + | var pathname = window.location.pathname; | ||
| + | |||
| + | var shopUrl = 'https://www.unipi.technology/shop/'; | ||
| + | var shopTitle = 'Unipi e-shop'; | ||
| + | |||
| + | const leftHeader = document.querySelector("header#dokuwiki__header div.container-fluid"); | ||
| + | const rightHeader = document.querySelector("header#dokuwiki__header div.navbar-right"); | ||
| + | |||
| + | const imgElem = document.createElement("img"); | ||
| + | const linkElem = document.createElement("a"); | ||
| + | const separElem = document.createElement("div"); | ||
| + | |||
| + | const originalButton = document.querySelector("div.navbar-header > button.navbar-toggle"); | ||
| + | |||
| + | if (pathname.length >= 3){ | ||
| + | pathname = pathname.substr(1, 3); | ||
| + | |||
| + | if (pathname == 'cs:'){ | ||
| + | shopUrl = 'https://www.unipi.technology/cs/obchod/'; | ||
| + | shopTitle = 'Obchod Unipi'; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | imgElem.setAttribute("src", "/_media/files:unipi-shop.png"); | ||
| + | linkElem.setAttribute("href", shopUrl); | ||
| + | linkElem.setAttribute("title", shopTitle); | ||
| + | linkElem.setAttribute("target", "_tab"); | ||
| + | |||
| + | imgElem.classList.add("mediacenter"); | ||
| + | linkElem.classList.add("media"); | ||
| + | linkElem.setAttribute("id", "header_button"); | ||
| + | separElem.setAttribute("id", "headerSepar"); | ||
| + | linkElem.appendChild(imgElem); | ||
| + | |||
| + | |||
| + | leftHeader.insertBefore(linkElem.cloneNode(true), document.querySelector("div.navbar-collapse.collapse")); | ||
| + | rightHeader.insertBefore(separElem, rightHeader.firstChild); | ||
| + | rightHeader.insertBefore(linkElem, rightHeader.firstChild); | ||
| + | |||
| + | leftHeader.insertBefore(originalButton.cloneNode(true), document.querySelector("a#header_button")); | ||
| + | originalButton.remove(); | ||
| + | } | ||
| + | |||
| + | |||
| + | |||
| + | /***************************************************/ | ||
| + | /* Document onload function */ | ||
| + | /***************************************************/ | ||
| + | |||
| + | document.addEventListener("DOMContentLoaded", function(event) { | ||
| + | var i, y; | ||
| + | |||
| + | /**************************************/ | ||
| + | /* Nahraď ve footeru UniPi za Unipi */ | ||
| + | /**************************************/ | ||
| + | var foooterText = document.querySelector("div.small.text-right > span.docInfo > ul.list-inline > li"); | ||
| + | foooterText.textContent = foooterText.textContent.replace(/UniPi/g , "Unipi"); | ||
| + | |||
| + | /**************************************/ | ||
| + | /* Unipi e-shop button */ | ||
| + | /**************************************/ | ||
| + | insertEshopButton(); | ||
| + | |||
| + | /**************************************/ | ||
| + | /* Úprava vzhledu horizontálního menu */ | ||
| + | /**************************************/ | ||
| + | var x = document.getElementsByClassName("dwpl-ti-tab"); | ||
| + | |||
| + | for (i = 0; i < x.length; i++) { | ||
| + | x[i].setAttribute("onclick", "setSelected()"); | ||
| + | } | ||
| + | setSelected(); | ||
| + | |||
| + | /************************************************/ | ||
| + | /* Odebrání mezer před přepínačem verzí návodů */ | ||
| + | /************************************************/ | ||
| + | //removeSpaces(); | ||
| + | |||
| + | /**************************************/ | ||
| + | /* Sidebar - BUGFIX */ | ||
| + | /**************************************/ | ||
| + | var sidebar_elem = document.getElementsByClassName("curid")[0].parentElement.parentElement; | ||
| + | var allGroups, oneGroup, setGroupsClasses = 0; | ||
| + | |||
| + | allGroups = sidebar_elem.children; | ||
| + | |||
| + | for (i = 0; i < allGroups.length; i++) { | ||
| + | oneGroup = allGroups[i].children; | ||
| + | |||
| + | if(oneGroup[0].className == "curid") { | ||
| + | if(oneGroup[1]){ | ||
| + | oneGroup = allGroups[++i].children; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | if(allGroups.length > 0) { | ||
| + | allGroups[i].classList.remove("open"); | ||
| + | |||
| + | if(detectLevel(allGroups.length, allGroups)) { | ||
| + | allGroups[i].classList.add("level2"); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | if (oneGroup[1]) | ||
| + | oneGroup[1].style.display = "none"; | ||
| + | } | ||
| + | |||
| + | /************************************************/ | ||
| + | /* Odebrání mezer před přepínačem verzí návodů */ | ||
| + | /************************************************/ | ||
| + | //removeSpaces(); | ||
| + | }); | ||
| </script> | </script> | ||
| </html> | </html> | ||
| Line 109: | Line 1206: | ||
| + | /****************************************************************/ | ||
| + | /* Záloha starších verzí: */ | ||
| + | /****************************************************************/ | ||
| - | /* záloha starších verzí: | + | /* |
| - | Původní verze lupy (s pohybem podle myši): | + | Původní verze lupy JS (s pohybem podle myši): |
| - | function zoom(e){ | + | function zoom(e){ |
| - | var zoomer = e.currentTarget; | + | var zoomer = e.currentTarget; |
| - | e.offsetX ? offsetX = e.offsetX : offsetX = e.touches[0].pageX | + | e.offsetX ? offsetX = e.offsetX : offsetX = e.touches[0].pageX |
| - | e.offsetY ? offsetY = e.offsetY : offsetX = e.touches[0].pageX | + | e.offsetY ? offsetY = e.offsetY : offsetX = e.touches[0].pageX |
| | | ||
| - | x = offsetX/zoomer.offsetWidth*100 | + | x = offsetX/zoomer.offsetWidth*100 |
| - | if(x>0.5) x = (x-50)*1.3+50 | + | if(x>0.5) x = (x-50)*1.3+50 |
| - | else x = 50-(50-x)*1.3 | + | else x = 50-(50-x)*1.3 |
| - | if(x<0) x = 0 | + | if(x<0) x = 0 |
| - | if(x>100) x = 100 | + | if(x>100) x = 100 |
| | | ||
| - | y = offsetY/zoomer.offsetHeight*100 | + | y = offsetY/zoomer.offsetHeight*100 |
| - | if(y>0.5) y = (y-50)*1.5+50 | + | if(y>0.5) y = (y-50)*1.5+50 |
| - | else y = 50-(50-y)*1.5 | + | else y = 50-(50-y)*1.5 |
| - | if(y<0) y = 0 | + | if(y<0) y = 0 |
| - | if(y>100) y = 100 | + | if(y>100) y = 100 |
| | | ||
| - | zoomer.style.backgroundPosition = x + '% ' + y + '%'; | + | zoomer.style.backgroundPosition = x + '% ' + y + '%'; |
| - | } | + | } |
| CSS k původní lupě: | CSS k původní lupě: | ||
| - | figure.zoom img:hover { | + | figure.zoom img:hover { |
| - | opacity: 0; | + | opacity: 0; |
| - | } | + | } |
| */ | */ | ||
