Browse Source

P4TB-213: Extract all sizes into CSS and use em sizes throughout to adapt to different fonts and font sizes.

1.1.101
Jorg Knobloch 2 years ago
parent
commit
9b404a9633
5 changed files with 40 additions and 23 deletions
  1. +2
    -2
      addon/content/tutorial/tutorial-1.html
  2. +3
    -3
      addon/content/tutorial/tutorial-2.html
  3. +4
    -4
      addon/content/tutorial/tutorial-3.html
  4. +3
    -3
      addon/content/tutorial/tutorial-4.html
  5. +28
    -11
      addon/content/tutorial/tutorial.css

+ 2
- 2
addon/content/tutorial/tutorial-1.html View File

@ -9,9 +9,9 @@
<b><span data-localekey="tutorial-1-1"></span></b><br><br>
<span data-localekey="tutorial-1-2"></span><br><br>
<span data-localekey="tutorial-1-3"></span><br><br>
<img class="padImage" src="../resources/images/green-shield.svg" width=20 height=20><span class="padText" data-localekey="privacyTextSecureAndTrusted"></span>
<img class="padImage" src="../resources/images/green-shield.svg"><span class="padText" data-localekey="privacyTextSecureAndTrusted"></span>
<div style="background: #E3D02E;">
<img class="padImage" src="../resources/images/yellow-shield-white.svg" width=20 height=20><span class="padText" data-localekey="privacyTextSecure"></span>
<img class="padImage" src="../resources/images/yellow-shield-white.svg"><span class="padText" data-localekey="privacyTextSecure"></span>
</div>
</body>
</html>

+ 3
- 3
addon/content/tutorial/tutorial-2.html View File

@ -6,11 +6,11 @@
<link href="tutorial.css" rel="stylesheet" type="text/css"></head>
</head>
<body>
<img class="padImage2" src="../resources/images/green-shield.svg" width=16 height=16><b><span class="padText2" data-localekey="privacyTextSecureAndTrusted"></span></b><br>
<img class="padImage2" src="../resources/images/green-shield.svg"><b><span class="padText2" data-localekey="privacyTextSecureAndTrusted"></span></b><br>
<span data-localekey="tutorial-2-1"></span><br><br>
<img class="padImage2" src="../resources/images/yellow-shield.svg" width=16 height=16><b><span class="padText2" data-localekey="privacyTextSecure"></span></b><br>
<img class="padImage2" src="../resources/images/yellow-shield.svg"><b><span class="padText2" data-localekey="privacyTextSecure"></span></b><br>
<span data-localekey="tutorial-2-2"></span><br><br>
<img class="padImage2" src="../resources/images/red-shield.svg" width=16 height=16><b><span class="padText2" data-localekey="privacyTextMistrusted"></span></b><br>
<img class="padImage2" src="../resources/images/red-shield.svg"><b><span class="padText2" data-localekey="privacyTextMistrusted"></span></b><br>
<span data-localekey="tutorial-2-3"></span>
</body>
</html>

+ 4
- 4
addon/content/tutorial/tutorial-3.html View File

@ -10,14 +10,14 @@
<table>
<tr><td>
<span data-localekey="tutorial-3-1"></span>
</td><td width=100>
</td><td class="sizeTd">
<div style="background: #E3D02E;">
<img class="padImage" src="../resources/images/yellow-shield-white.svg" width=20 height=20><span
<img class="padImage" src="../resources/images/yellow-shield-white.svg"><span
class="padText" data-localekey="privacyTextSecure"></span></div>
</td></tr>
</table>
<div style="width: 450px; min-height: 70px; background-color: #f0f0f0; padding: 8px 8px 0; margin: 10px 0;">
<div style="margin: 0 auto; background-color: #fff; border: 1px solid #d3d3d3; padding: 3px;">
<div class="trustwords-tutorial">
<div style="margin: 0 auto; background-color: #fff; border: 1px solid #d3d3d3; padding: 0.2em;">
<span data-localekey="tutorial-3-2"></span>
</div>
<div class="actions">


+ 3
- 3
addon/content/tutorial/tutorial-4.html View File

@ -9,12 +9,12 @@
<span data-localekey="tutorial-4-1"></span><br><br>
<table>
<tr><td align="center">
<img src="../resources/images/yellow-shield.svg" width=20 height=20><br>
<img class="sizeImage" src="../resources/images/yellow-shield.svg"><br>
<span data-localekey="privacyTextSecure"></span>
</td><td width=15>
</td><td>
<img class="padImage2" src="../resources/images/yellow-shield.svg" width=16 height=16><span class="padText2" data-localekey="tutorial-4-2"></span><br>
<img class="padImage2" src="../resources/images/green-shield.svg" width=16 height=16><span class="padText2" data-localekey="tutorial-4-3"></span><br>
<img class="padImage2" src="../resources/images/yellow-shield.svg"><span class="padText2" data-localekey="tutorial-4-2"></span><br>
<img class="padImage2" src="../resources/images/green-shield.svg"><span class="padText2" data-localekey="tutorial-4-3"></span><br>
</td></tr>
</table>
<br>


+ 28
- 11
addon/content/tutorial/tutorial.css View File

@ -1,23 +1,40 @@
.pEpGreen {
color: #00A748;
}
.sizeImage {
width: 1.25em;
height: 1.25em;
}
.padImage {
padding-top: 3px;
padding-right: 4px;
padding-left: 3px;
padding-top: 0.2em;
padding-right: 0.2em;
padding-left: 0.2em;
width: 1.25em;
height: 1.25em;
}
.padImage2 {
padding-right: 4px;
padding-right: 0.2em;
width: 1em;
height: 1em;
}
.padText {
position: relative;
left: 3px;
bottom: 4px;
left: 0.2em;
bottom: 0.2em;
}
.padText2 {
position: relative;
left: 3px;
bottom: 2px;
left: 0.2em;
bottom: 0.1em;
}
.trustwords-tutorial {
min-height: 4em;
background-color: #f0f0f0;
padding: 0.5em 0.5em 0;
margin: 0.75em 0;
}
.sizeTd {
width: 8em;
}
#outer {
@ -25,11 +42,11 @@
}
#buttons {
margin: 0 auto;
width: 500px;
width: 32em;
}
#theIframe {
display: block;
margin: 0 auto;
width: 500px;
height: 280px;
width: 32em;
height: 18em;
}

Loading…
Cancel
Save