Fixed OTP rendering

This commit is contained in:
Giulio Cesare Solaroli 2015-09-23 17:48:35 +02:00
parent e32f30f3ba
commit 4710a571e7
No known key found for this signature in database
GPG Key ID: 22E34C908F02CBA2
3 changed files with 141 additions and 116 deletions

View File

@ -2410,7 +2410,7 @@ span.count {
margin-bottom: 0px; margin-bottom: 0px;
padding-bottom: 0px; } padding-bottom: 0px; }
#extraFeaturesPanel .extraFeatureContent .OTP .actions { #extraFeaturesPanel .extraFeatureContent .OTP .actions {
padding-left: 6px; padding-left: 5px;
padding-top: 6px; } padding-top: 6px; }
#extraFeaturesPanel .extraFeatureContent .OTP .actions a { #extraFeaturesPanel .extraFeatureContent .OTP .actions a {
font-family: 'clipperz-icons'; font-family: 'clipperz-icons';
@ -2422,7 +2422,7 @@ span.count {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
cursor: pointer; cursor: pointer;
font-size: 18pt; font-size: 22pt;
line-height: 1.1em; } line-height: 1.1em; }
#extraFeaturesPanel .extraFeatureContent .OTP .actions a:hover { #extraFeaturesPanel .extraFeatureContent .OTP .actions a:hover {
color: green; } color: green; }
@ -2432,54 +2432,9 @@ span.count {
display: inline-block; display: inline-block;
margin-right: 1em; margin-right: 1em;
padding: 1em 0; } padding: 1em 0; }
#extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail { #extraFeaturesPanel .extraFeatureContent .OTP .otpList {
display: -webkit-box; padding-top: 10px; }
display: -webkit-flex; #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail {
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
border: 1px solid #222;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 5px 0;
margin: 4px 0; }
#extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpAction {
width: 40px;
text-align: center; }
#extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpAction a {
font-family: 'clipperz-icons';
-webkit-font-feature-settings: "liga" 1, "dlig" 1;
-moz-font-feature-settings: "liga" 1, "dlig" 1;
-ms-font-feature-settings: "liga" 1, "dlig" 1;
-o-font-feature-settings: "liga" 1, "dlig" 1;
font-feature-settings: "liga" 1, "dlig" 1;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
cursor: pointer;
font-size: 16pt;
line-height: 1.1em; }
#extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpAction a:hover {
color: red; }
#extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpPassword {
font-size: 14pt;
line-height: 1.3em;
-webkit-user-select: text;
/* Chrome all / Safari all */
-moz-user-select: text;
/* Firefox all */
-ms-user-select: text;
/* IE 10+ */
/* No support for these yet, use at own risk */
-o-user-select: text;
user-select: text; }
#extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpLabel {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -moz-flex; display: -moz-flex;
@ -2491,78 +2446,140 @@ span.count {
-moz-flex-direction: row; -moz-flex-direction: row;
-ms-flex-direction: row; -ms-flex-direction: row;
flex-direction: row; flex-direction: row;
margin-right: 5px; } border: 1px solid #222;
#extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpLabel:before { -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 5px 0;
margin: 4px 0; }
#extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpAction {
-webkit-box-flex: none; -webkit-box-flex: none;
-webkit-flex: none; -webkit-flex: none;
-moz-box-flex: none; -moz-box-flex: none;
-moz-flex: none; -moz-flex: none;
-ms-flex: none; -ms-flex: none;
flex: none; flex: none;
content: 'label'; width: 36px; }
font-family: 'clipperz-icons'; #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpAction a {
-webkit-font-feature-settings: "liga" 1, "dlig" 1; font-family: 'clipperz-icons';
-moz-font-feature-settings: "liga" 1, "dlig" 1; -webkit-font-feature-settings: "liga" 1, "dlig" 1;
-ms-font-feature-settings: "liga" 1, "dlig" 1; -moz-font-feature-settings: "liga" 1, "dlig" 1;
-o-font-feature-settings: "liga" 1, "dlig" 1; -ms-font-feature-settings: "liga" 1, "dlig" 1;
font-feature-settings: "liga" 1, "dlig" 1; -o-font-feature-settings: "liga" 1, "dlig" 1;
-webkit-font-smoothing: antialiased; font-feature-settings: "liga" 1, "dlig" 1;
text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
font-style: normal; text-rendering: optimizeLegibility;
padding-right: 4px; cursor: pointer;
color: gray; font-size: 16pt;
line-height: 20pt; } line-height: 1.1em;
#extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpLabel span { display: inline-block;
padding-left: 7px;
width: inherit; }
#extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpAction a:hover {
color: red; }
#extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo {
-webkit-box-flex: auto; -webkit-box-flex: auto;
-webkit-flex: auto; -webkit-flex: auto;
-moz-box-flex: auto; -moz-box-flex: auto;
-moz-flex: auto; -moz-flex: auto;
-ms-flex: auto; -ms-flex: auto;
flex: auto; flex: auto; }
font-size: 12pt; #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpPassword {
color: #333; font-size: 14pt;
padding: 4px 0px 4px 0px; line-height: 1.3em;
line-height: 1.3em; -webkit-user-select: text;
cursor: pointer; /* Chrome all / Safari all */
font-style: italic; } -moz-user-select: text;
#extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpLabel span.customLabel { /* Firefox all */
color: gray; -ms-user-select: text;
font-style: normal; } /* IE 10+ */
#extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpLabel input { /* No support for these yet, use at own risk */
-webkit-box-flex: auto; -o-user-select: text;
-webkit-flex: auto; user-select: text; }
-moz-box-flex: auto; #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpLabel {
-moz-flex: auto; display: -webkit-box;
-ms-flex: auto; display: -webkit-flex;
flex: auto; display: -moz-flex;
font-size: 12pt; display: -ms-flexbox;
color: gray; display: flex;
width: 100%; -webkit-box-direction: normal;
border: 0px; -webkit-box-orient: horizontal;
padding: 2px; -webkit-flex-direction: row;
padding-left: 0px; -moz-flex-direction: row;
margin: 0px; -ms-flex-direction: row;
margin-bottom: 1px; flex-direction: row;
background-color: #333; } margin-right: 5px; }
#extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpLabel input::-webkit-input-placeholder { #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpLabel:before {
font-style: italic; -webkit-box-flex: none;
color: #444; } -webkit-flex: none;
#extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpLabel input:-moz-placeholder { -moz-box-flex: none;
font-style: italic; -moz-flex: none;
color: #444; } -ms-flex: none;
#extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpLabel input::-moz-placeholder { flex: none;
font-style: italic; content: 'label';
color: #444; } font-family: 'clipperz-icons';
#extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpLabel input:-ms-input-placeholder { -webkit-font-feature-settings: "liga" 1, "dlig" 1;
font-style: italic; -moz-font-feature-settings: "liga" 1, "dlig" 1;
color: #444; } -ms-font-feature-settings: "liga" 1, "dlig" 1;
#extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpStatusInfo { -o-font-feature-settings: "liga" 1, "dlig" 1;
font-size: 8pt; font-feature-settings: "liga" 1, "dlig" 1;
color: gray; } -webkit-font-smoothing: antialiased;
#extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpStatusInfo span { text-rendering: optimizeLegibility;
padding-right: 10px; } font-style: normal;
#extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail.REQUESTED, #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail.USED { padding-right: 4px;
background-color: #222; } color: gray;
line-height: 20pt; }
#extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpLabel span {
-webkit-box-flex: auto;
-webkit-flex: auto;
-moz-box-flex: auto;
-moz-flex: auto;
-ms-flex: auto;
flex: auto;
font-size: 12pt;
color: #333;
padding: 4px 0px 4px 0px;
line-height: 1.3em;
cursor: pointer;
font-style: italic; }
#extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpLabel span.customLabel {
color: gray;
font-style: normal; }
#extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpLabel input {
-webkit-box-flex: auto;
-webkit-flex: auto;
-moz-box-flex: auto;
-moz-flex: auto;
-ms-flex: auto;
flex: auto;
font-size: 12pt;
color: gray;
width: 100%;
border: 0px;
padding: 2px;
padding-left: 0px;
margin: 0px;
margin-bottom: 1px;
background-color: #333; }
#extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpLabel input::-webkit-input-placeholder {
font-style: italic;
color: #444; }
#extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpLabel input:-moz-placeholder {
font-style: italic;
color: #444; }
#extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpLabel input::-moz-placeholder {
font-style: italic;
color: #444; }
#extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpLabel input:-ms-input-placeholder {
font-style: italic;
color: #444; }
#extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpStatusInfo {
font-size: 8pt;
color: gray; }
#extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpStatusInfo span {
padding-right: 10px; }
#extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail.REQUESTED, #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail.USED {
background-color: #222; }
#extraFeaturesPanel .extraFeatureContent .OTP table tr td a { #extraFeaturesPanel .extraFeatureContent .OTP table tr td a {
font-size: small; font-size: small;
padding: 0 1em; padding: 0 1em;

File diff suppressed because one or more lines are too long

View File

@ -533,13 +533,13 @@ refer to http://www.clipperz.com.
} }
.actions { .actions {
padding-left: 6px; padding-left: 5px;
padding-top: 6px; padding-top: 6px;
a { a {
@include icon-font(); @include icon-font();
cursor: pointer; cursor: pointer;
font-size: 18pt; font-size: 22pt;
line-height: 1.1em; line-height: 1.1em;
&:hover { &:hover {
@ -564,6 +564,7 @@ refer to http://www.clipperz.com.
} }
.otpList { .otpList {
padding-top: 10px;
.otpDetail { .otpDetail {
$detailPadding: 5px; $detailPadding: 5px;
@ -580,8 +581,10 @@ refer to http://www.clipperz.com.
margin: $detailMargin 0; margin: $detailMargin 0;
.otpAction { .otpAction {
width: 40px; @include flex(none);
text-align: center;
width: 36px;
// text-align: center;
// @include align-self(center); // @include align-self(center);
a { a {
@ -589,6 +592,9 @@ refer to http://www.clipperz.com.
cursor: pointer; cursor: pointer;
font-size: 16pt; font-size: 16pt;
line-height: 1.1em; line-height: 1.1em;
display: inline-block;
padding-left: 7px;
width: inherit;
&:hover { &:hover {
color: red; color: red;
@ -597,6 +603,8 @@ refer to http://www.clipperz.com.
} }
.otpInfo { .otpInfo {
@include flex(auto);
.otpPassword { .otpPassword {
font-size: 14pt; font-size: 14pt;
line-height: 1.3em; line-height: 1.3em;