clipperz/password-manager
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Applied most of the style suggestions from Frank, tentative fix for IE

Browse Source 
wide layout
This commit is contained in:
Dario Chiappetta 2015-11-27 16:16:58 +01:00
parent cc3ee3324e
commit ce0883a7f1
9 changed files with 119 additions and 456 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

487
frontend/delta/css/clipperz.css
View File

@ -1,4 +1,3 @@
@charset "UTF-8";
/* /*
Copyright 2008-2015 Clipperz Srl Copyright 2008-2015 Clipperz Srl
@ -21,6 +20,8 @@ refer to http://www.clipperz.com.
License along with Clipperz. If not, see http://www.gnu.org/licenses/. License along with Clipperz. If not, see http://www.gnu.org/licenses/.
*/ */
@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/ /* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126 v2.0 | 20110126
License: none (public domain) License: none (public domain)
@ -53,72 +54,6 @@ table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; } border-spacing: 0; }
/*
Copyright 2008-2015 Clipperz Srl
This file is part of Clipperz, the online password manager.
For further information about its features and functionalities please
refer to http://www.clipperz.com.
* Clipperz is free software: you can redistribute it and/or modify it
under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
* Clipperz is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
See the GNU Affero General Public License for more details.
* You should have received a copy of the GNU Affero General Public
License along with Clipperz. If not, see http://www.gnu.org/licenses/.
*/
/*
Copyright 2008-2015 Clipperz Srl
This file is part of Clipperz, the online password manager.
For further information about its features and functionalities please
refer to http://www.clipperz.com.
* Clipperz is free software: you can redistribute it and/or modify it
under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
* Clipperz is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
See the GNU Affero General Public License for more details.
* You should have received a copy of the GNU Affero General Public
License along with Clipperz. If not, see http://www.gnu.org/licenses/.
*/
/*
Copyright 2008-2015 Clipperz Srl
This file is part of Clipperz, the online password manager.
For further information about its features and functionalities please
refer to http://www.clipperz.com.
* Clipperz is free software: you can redistribute it and/or modify it
under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
* Clipperz is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
See the GNU Affero General Public License for more details.
* You should have received a copy of the GNU Affero General Public
License along with Clipperz. If not, see http://www.gnu.org/licenses/.
*/
@font-face { @font-face {
font-family: "clipperz-icons"; font-family: "clipperz-icons";
font-style: normal; font-style: normal;
@ -176,50 +111,6 @@ refer to http://www.clipperz.com.
http://css-tricks.com/snippets/css/a-guide-to-flexbox/ http://css-tricks.com/snippets/css/a-guide-to-flexbox/
http://jonibologna.com/flexbox-cheatsheet/ http://jonibologna.com/flexbox-cheatsheet/
*/
/*
Copyright 2008-2015 Clipperz Srl
This file is part of Clipperz, the online password manager.
For further information about its features and functionalities please
refer to http://www.clipperz.com.
* Clipperz is free software: you can redistribute it and/or modify it
under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
* Clipperz is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
See the GNU Affero General Public License for more details.
* You should have received a copy of the GNU Affero General Public
License along with Clipperz. If not, see http://www.gnu.org/licenses/.
*/
/*
Copyright 2008-2015 Clipperz Srl
This file is part of Clipperz, the online password manager.
For further information about its features and functionalities please
refer to http://www.clipperz.com.
* Clipperz is free software: you can redistribute it and/or modify it
under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
* Clipperz is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
See the GNU Affero General Public License for more details.
* You should have received a copy of the GNU Affero General Public
License along with Clipperz. If not, see http://www.gnu.org/licenses/.
*/ */
@-webkit-keyframes spin { @-webkit-keyframes spin {
0% { 0% {
@ -228,7 +119,6 @@ refer to http://www.clipperz.com.
-ms-transform: rotate(0deg) translate(0, 0); -ms-transform: rotate(0deg) translate(0, 0);
-o-transform: rotate(0deg) translate(0, 0); -o-transform: rotate(0deg) translate(0, 0);
transform: rotate(0deg) translate(0, 0); } transform: rotate(0deg) translate(0, 0); }
100% { 100% {
-webkit-transform: rotate(359deg) translate(0, 0); -webkit-transform: rotate(359deg) translate(0, 0);
-moz-transform: rotate(359deg) translate(0, 0); -moz-transform: rotate(359deg) translate(0, 0);
@ -242,7 +132,6 @@ refer to http://www.clipperz.com.
-ms-transform: rotate(0deg) translate(0, 0); -ms-transform: rotate(0deg) translate(0, 0);
-o-transform: rotate(0deg) translate(0, 0); -o-transform: rotate(0deg) translate(0, 0);
transform: rotate(0deg) translate(0, 0); } transform: rotate(0deg) translate(0, 0); }
100% { 100% {
-webkit-transform: rotate(359deg) translate(0, 0); -webkit-transform: rotate(359deg) translate(0, 0);
-moz-transform: rotate(359deg) translate(0, 0); -moz-transform: rotate(359deg) translate(0, 0);
@ -256,7 +145,6 @@ refer to http://www.clipperz.com.
-ms-transform: rotate(0deg) translate(0, 0); -ms-transform: rotate(0deg) translate(0, 0);
-o-transform: rotate(0deg) translate(0, 0); -o-transform: rotate(0deg) translate(0, 0);
transform: rotate(0deg) translate(0, 0); } transform: rotate(0deg) translate(0, 0); }
100% { 100% {
-webkit-transform: rotate(359deg) translate(0, 0); -webkit-transform: rotate(359deg) translate(0, 0);
-moz-transform: rotate(359deg) translate(0, 0); -moz-transform: rotate(359deg) translate(0, 0);
@ -270,7 +158,6 @@ refer to http://www.clipperz.com.
-ms-transform: rotate(0deg) translate(0, 0); -ms-transform: rotate(0deg) translate(0, 0);
-o-transform: rotate(0deg) translate(0, 0); -o-transform: rotate(0deg) translate(0, 0);
transform: rotate(0deg) translate(0, 0); } transform: rotate(0deg) translate(0, 0); }
100% { 100% {
-webkit-transform: rotate(359deg) translate(0, 0); -webkit-transform: rotate(359deg) translate(0, 0);
-moz-transform: rotate(359deg) translate(0, 0); -moz-transform: rotate(359deg) translate(0, 0);
@ -391,8 +278,8 @@ div.overlay {
position: relative; position: relative;
width: 100px; width: 100px;
height: 100px; height: 100px;
left: 50% !important; left: 50%;
top: 40% !important; top: 40%;
margin-left: -50px; margin-left: -50px;
margin-top: -50px; margin-top: -50px;
display: block; } display: block; }
@ -569,6 +456,8 @@ div.overlay {
-ms-animation-delay: -0.0833s; -ms-animation-delay: -0.0833s;
-o-animation-delay: -0.0833s; -o-animation-delay: -0.0833s;
animation-delay: -0.0833s; } animation-delay: -0.0833s; }
div.overlay.spinnerOnly .spinner {
top: 50%; }
div.overlay .progressBar { div.overlay .progressBar {
background-color: #222; background-color: #222;
height: 4px; height: 4px;
@ -589,98 +478,64 @@ div.overlay {
@-webkit-keyframes overlay-spin { @-webkit-keyframes overlay-spin {
from { from {
opacity: 1; } opacity: 1; }
to { to {
opacity: 0.25; } } opacity: 0.25; } }
@-moz-keyframes overlay-spin { @-moz-keyframes overlay-spin {
from { from {
opacity: 1; } opacity: 1; }
to { to {
opacity: 0.25; } } opacity: 0.25; } }
@-ms-keyframes overlay-spin { @-ms-keyframes overlay-spin {
from { from {
opacity: 1; } opacity: 1; }
to { to {
opacity: 0.25; } } opacity: 0.25; } }
@keyframes overlay-spin { @keyframes overlay-spin {
from { from {
opacity: 1; } opacity: 1; }
to { to {
opacity: 0.25; } } opacity: 0.25; } }
@-webkit-keyframes ios-overlay-show { @-webkit-keyframes ios-overlay-show {
0% { 0% {
opacity: 0; } opacity: 0; }
100% { 100% {
opacity: 1; } } opacity: 1; } }
@-moz-keyframes ios-overlay-show { @-moz-keyframes ios-overlay-show {
0% { 0% {
opacity: 0; } opacity: 0; }
100% { 100% {
opacity: 1; } } opacity: 1; } }
@-ms-keyframes ios-overlay-show { @-ms-keyframes ios-overlay-show {
0% { 0% {
opacity: 0; } opacity: 0; }
100% { 100% {
opacity: 1; } } opacity: 1; } }
@keyframes ios-overlay-show { @keyframes ios-overlay-show {
0% { 0% {
opacity: 0; } opacity: 0; }
100% { 100% {
opacity: 1; } } opacity: 1; } }
@-webkit-keyframes ios-overlay-hide { @-webkit-keyframes ios-overlay-hide {
0% { 0% {
opacity: 1; } opacity: 1; }
100% { 100% {
opacity: 0; } } opacity: 0; } }
@-moz-keyframes ios-overlay-hide { @-moz-keyframes ios-overlay-hide {
0% { 0% {
opacity: 1; } opacity: 1; }
100% { 100% {
opacity: 0; } } opacity: 0; } }
@-ms-keyframes ios-overlay-hide { @-ms-keyframes ios-overlay-hide {
0% { 0% {
opacity: 1; } opacity: 1; }
100% { 100% {
opacity: 0; } } opacity: 0; } }
@keyframes ios-overlay-hide { @keyframes ios-overlay-hide {
0% { 0% {
opacity: 1; } opacity: 1; }
100% { 100% {
opacity: 0; } } opacity: 0; } }
/* /*
Copyright 2008-2015 Clipperz Srl
This file is part of Clipperz, the online password manager.
For further information about its features and functionalities please
refer to http://www.clipperz.com.
* Clipperz is free software: you can redistribute it and/or modify it
under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
* Clipperz is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
See the GNU Affero General Public License for more details.
* You should have received a copy of the GNU Affero General Public
License along with Clipperz. If not, see http://www.gnu.org/licenses/.
*/
/*
.registrationForm { .registrationForm {
.steps { .steps {
.step { .step {
@ -728,50 +583,6 @@ refer to http://www.clipperz.com.
&.show-top { transform: translateZ( -100px ) rotateX( -90deg ); } &.show-top { transform: translateZ( -100px ) rotateX( -90deg ); }
&.show-bottom { transform: translateZ( -100px ) rotateX( 90deg ); } &.show-bottom { transform: translateZ( -100px ) rotateX( 90deg ); }
} }
*/
/*
Copyright 2008-2015 Clipperz Srl
This file is part of Clipperz, the online password manager.
For further information about its features and functionalities please
refer to http://www.clipperz.com.
* Clipperz is free software: you can redistribute it and/or modify it
under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
* Clipperz is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
See the GNU Affero General Public License for more details.
* You should have received a copy of the GNU Affero General Public
License along with Clipperz. If not, see http://www.gnu.org/licenses/.
*/
/*
Copyright 2008-2015 Clipperz Srl
This file is part of Clipperz, the online password manager.
For further information about its features and functionalities please
refer to http://www.clipperz.com.
* Clipperz is free software: you can redistribute it and/or modify it
under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
* Clipperz is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
See the GNU Affero General Public License for more details.
* You should have received a copy of the GNU Affero General Public
License along with Clipperz. If not, see http://www.gnu.org/licenses/.
*/ */
html { html {
position: fixed; position: fixed;
@ -992,7 +803,8 @@ input[type=text] {
#extraFeaturesPanel.open { #extraFeaturesPanel.open {
right: 0px; } right: 0px; }
#extraFeaturesPanel .extraFeatureContent { #extraFeaturesPanel .extraFeatureContent {
display: none; } display: none;
width: 100%; }
#extraFeaturesPanel.fullOpen { #extraFeaturesPanel.fullOpen {
width: 100%; } width: 100%; }
#extraFeaturesPanel.fullOpen .extraFeatureContent { #extraFeaturesPanel.fullOpen .extraFeatureContent {
@ -1115,6 +927,9 @@ input[type=text] {
height: 100%; height: 100%;
width: 100%; } width: 100%; }
/* IE fix for 'wide' mode. */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
position: absolute; }
.cardToolbarFrame { .cardToolbarFrame {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -1249,6 +1064,12 @@ div.cardToolbar header {
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
vertical-align: center; } vertical-align: center; }
/* IE fix for badges being shifted to left. */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.attachmentQueueToggleButton .badge .top {
margin-left: 37px; }
.attachmentQueueToggleButton .badge .bottom {
margin-left: 7px; } }
div.attachmentQueueStatus { div.attachmentQueueStatus {
position: fixed; position: fixed;
top: calc(48px - 8px); top: calc(48px - 8px);
@ -1562,6 +1383,8 @@ div.cardContent {
flex: none; flex: none;
height: 48px; height: 48px;
line-height: 48px; } line-height: 48px; }
.cardDetailToolbar li.enabled:hover {
background-color: #114875; }
.cardDetailToolbar.edit { .cardDetailToolbar.edit {
-webkit-box-ordinal-group: 2; -webkit-box-ordinal-group: 2;
-webkit-order: 1; -webkit-order: 1;
@ -1814,28 +1637,6 @@ div.help {
#loginPage .content footer .footerContent, #registrationPage .content footer .footerContent, #unlockPage .content footer .footerContent { #loginPage .content footer .footerContent, #registrationPage .content footer .footerContent, #unlockPage .content footer .footerContent {
width: 100%; } width: 100%; }
/*
Copyright 2008-2015 Clipperz Srl
This file is part of Clipperz, the online password manager.
For further information about its features and functionalities please
refer to http://www.clipperz.com.
* Clipperz is free software: you can redistribute it and/or modify it
under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
* Clipperz is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
See the GNU Affero General Public License for more details.
* You should have received a copy of the GNU Affero General Public
License along with Clipperz. If not, see http://www.gnu.org/licenses/.
*/
.tagEditor { .tagEditor {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
@ -1941,28 +1742,6 @@ refer to http://www.clipperz.com.
line-height: 24px; line-height: 24px;
border: 0px; } border: 0px; }
/*
Copyright 2008-2015 Clipperz Srl
This file is part of Clipperz, the online password manager.
For further information about its features and functionalities please
refer to http://www.clipperz.com.
* Clipperz is free software: you can redistribute it and/or modify it
under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
* Clipperz is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
See the GNU Affero General Public License for more details.
* You should have received a copy of the GNU Affero General Public
License along with Clipperz. If not, see http://www.gnu.org/licenses/.
*/
#loadingPage { #loadingPage {
background-color: #ff9900; } background-color: #ff9900; }
#loadingPage div { #loadingPage div {
@ -1980,28 +1759,6 @@ refer to http://www.clipperz.com.
color: white; color: white;
margin: 0px; } margin: 0px; }
/*
Copyright 2008-2015 Clipperz Srl
This file is part of Clipperz, the online password manager.
For further information about its features and functionalities please
refer to http://www.clipperz.com.
* Clipperz is free software: you can redistribute it and/or modify it
under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
* Clipperz is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
See the GNU Affero General Public License for more details.
* You should have received a copy of the GNU Affero General Public
License along with Clipperz. If not, see http://www.gnu.org/licenses/.
*/
#loginPage .content, #unlockPage .content { #loginPage .content, #unlockPage .content {
background-color: #ff9900; } background-color: #ff9900; }
#loginPage .content .body, #unlockPage .content .body { #loginPage .content .body, #unlockPage .content .body {
@ -2303,28 +2060,6 @@ refer to http://www.clipperz.com.
padding-left: 5px; padding-left: 5px;
font-weight: bold; } font-weight: bold; }
/*
Copyright 2008-2015 Clipperz Srl
This file is part of Clipperz, the online password manager.
For further information about its features and functionalities please
refer to http://www.clipperz.com.
* Clipperz is free software: you can redistribute it and/or modify it
under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
* Clipperz is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
See the GNU Affero General Public License for more details.
* You should have received a copy of the GNU Affero General Public
License along with Clipperz. If not, see http://www.gnu.org/licenses/.
*/
#selections { #selections {
background-color: black; background-color: black;
color: white; color: white;
@ -2515,7 +2250,7 @@ refer to http://www.clipperz.com.
-moz-flex-direction: row; -moz-flex-direction: row;
-ms-flex-direction: row; -ms-flex-direction: row;
flex-direction: row; } flex-direction: row; }
#selections ul.tagList li:before { #selections ul.tagList li.title:before {
content: "tag"; } content: "tag"; }
#selections ul.tagList li span.label { #selections ul.tagList li span.label {
font-size: 14pt; font-size: 14pt;
@ -2524,7 +2259,8 @@ refer to http://www.clipperz.com.
-moz-box-flex: auto; -moz-box-flex: auto;
-moz-flex: auto; -moz-flex: auto;
-ms-flex: auto; -ms-flex: auto;
flex: auto; } flex: auto;
padding-left: 35px; }
#selections ul.tagList li span.count { #selections ul.tagList li span.count {
-webkit-box-flex: none; -webkit-box-flex: none;
-webkit-flex: none; -webkit-flex: none;
@ -2599,14 +2335,14 @@ refer to http://www.clipperz.com.
margin-right: 2px; } margin-right: 2px; }
span.count { span.count {
background-color: gray; background-color: white;
font-size: 10pt; font-size: 10pt;
margin-right: 12px; margin-right: 12px;
padding: 3px 5px; padding: 3px 5px;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
color: white; color: black;
font-weight: 300; font-weight: 300;
vertical-align: middle; } vertical-align: middle; }
@ -2642,28 +2378,6 @@ span.count {
#selections.TAG ul.tagList li.selected:before { #selections.TAG ul.tagList li.selected:before {
color: white; } color: white; }
/*
Copyright 2008-2015 Clipperz Srl
This file is part of Clipperz, the online password manager.
For further information about its features and functionalities please
refer to http://www.clipperz.com.
* Clipperz is free software: you can redistribute it and/or modify it
under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
* Clipperz is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
See the GNU Affero General Public License for more details.
* You should have received a copy of the GNU Affero General Public
License along with Clipperz. If not, see http://www.gnu.org/licenses/.
*/
#extraFeaturesPanel .extraFeatureIndex { #extraFeaturesPanel .extraFeatureIndex {
background-color: black; background-color: black;
color: white; } color: white; }
@ -2780,13 +2494,13 @@ refer to http://www.clipperz.com.
#extraFeaturesPanel .extraFeatureIndex footer { #extraFeaturesPanel .extraFeatureIndex footer {
font-size: 8pt; font-size: 8pt;
padding: 5px 5px 5px 5px; padding: 5px 5px 5px 5px;
border-top: 1px solid #999999; } border-top: 1px solid #999; }
#extraFeaturesPanel .extraFeatureIndex footer span { #extraFeaturesPanel .extraFeatureIndex footer span {
color: #999999; } color: #999; }
#extraFeaturesPanel .extraFeatureIndex footer span:after { #extraFeaturesPanel .extraFeatureIndex footer span:after {
content: ":"; } content: ":"; }
#extraFeaturesPanel .extraFeatureIndex footer a { #extraFeaturesPanel .extraFeatureIndex footer a {
color: #999999; color: #999;
text-decoration: none; text-decoration: none;
padding-left: 5px; padding-left: 5px;
font-weight: bold; } font-weight: bold; }
@ -3519,28 +3233,6 @@ refer to http://www.clipperz.com.
padding-top: 15px; padding-top: 15px;
padding-left: 10px; } padding-left: 10px; }
/*
Copyright 2008-2015 Clipperz Srl
This file is part of Clipperz, the online password manager.
For further information about its features and functionalities please
refer to http://www.clipperz.com.
* Clipperz is free software: you can redistribute it and/or modify it
under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
* Clipperz is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
See the GNU Affero General Public License for more details.
* You should have received a copy of the GNU Affero General Public
License along with Clipperz. If not, see http://www.gnu.org/licenses/.
*/
.miscInfo .proxyInfo { .miscInfo .proxyInfo {
border-bottom: 1px solid white; border-bottom: 1px solid white;
display: none; display: none;
@ -3578,28 +3270,6 @@ refer to http://www.clipperz.com.
.miscInfo .accountStatus.EXPIRED { .miscInfo .accountStatus.EXPIRED {
background-color: red; } background-color: red; }
/*
Copyright 2008-2015 Clipperz Srl
This file is part of Clipperz, the online password manager.
For further information about its features and functionalities please
refer to http://www.clipperz.com.
* Clipperz is free software: you can redistribute it and/or modify it
under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
* Clipperz is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
See the GNU Affero General Public License for more details.
* You should have received a copy of the GNU Affero General Public
License along with Clipperz. If not, see http://www.gnu.org/licenses/.
*/
div.cardList.loadingCard li.selected { div.cardList.loadingCard li.selected {
background-color: gray; background-color: gray;
border-bottom: 1px solid gray; } border-bottom: 1px solid gray; }
@ -3628,7 +3298,7 @@ div.cardList ul {
padding-right: 0px; padding-right: 0px;
box-shadow: -4px 0px 3px -1px rgba(0, 0, 0, 0.2); } box-shadow: -4px 0px 3px -1px rgba(0, 0, 0, 0.2); }
div.cardList ul li.archived { div.cardList ul li.archived {
background-color: #eeeeee; background-color: #eee;
color: #999; } color: #999; }
div.cardList ul li .favicon { div.cardList ul li .favicon {
width: 48px; width: 48px;
@ -3728,7 +3398,7 @@ div.cardList.narrow {
content: ""; } content: ""; }
#cardDetailPage .view.archived, .cardDetail .view.archived { #cardDetailPage .view.archived, .cardDetail .view.archived {
background-color: #eeeeee; } background-color: #eee; }
#cardDetailPage .view .cardDetailToolbar, .cardDetail .view .cardDetailToolbar { #cardDetailPage .view .cardDetailToolbar, .cardDetail .view .cardDetailToolbar {
background-color: #1863a1; background-color: #1863a1;
color: white; } color: white; }
@ -4178,7 +3848,7 @@ div.cardList.narrow {
cursor: grab; cursor: grab;
cursor: -moz-grab; cursor: -moz-grab;
cursor: -webkit-grab; cursor: -webkit-grab;
background: repeating-linear-gradient(0deg, white, white 2px, #dddddd 2px, #dddddd 3px); background: repeating-linear-gradient(0deg, white, white 2px, #ddd 2px, #ddd 3px);
width: 28px; width: 28px;
height: 20px; height: 20px;
margin-left: 6px; margin-left: 6px;
@ -4425,7 +4095,7 @@ div.cardList.narrow {
min-width: 220px; min-width: 220px;
width: 80%; width: 80%;
max-width: 400px; max-width: 400px;
background-color: #333333; background-color: #333;
color: #fff; color: #fff;
-webkit-border-radius: 6px; -webkit-border-radius: 6px;
-moz-border-radius: 6px; -moz-border-radius: 6px;
@ -4440,7 +4110,7 @@ div.cardList.narrow {
margin-left: 0px; margin-left: 0px;
width: 0; width: 0;
height: 0; height: 0;
border-top: 5px solid #333333; border-top: 5px solid #333;
border-left: 5px solid transparent; border-left: 5px solid transparent;
border-right: 5px solid transparent; } border-right: 5px solid transparent; }
.passwordGenerator .passwordGeneratorBaloon form span { .passwordGenerator .passwordGeneratorBaloon form span {
@ -4452,7 +4122,7 @@ div.cardList.narrow {
word-wrap: break-word; word-wrap: break-word;
width: 100%; } width: 100%; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper header { .passwordGenerator .passwordGeneratorBaloon form .optionsWrapper header {
height: 12px; height: 30px;
border-bottom: 1px solid #666; } border-bottom: 1px solid #666; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper header div { .passwordGenerator .passwordGeneratorBaloon form .optionsWrapper header div {
content: "options"; content: "options";
@ -4464,14 +4134,15 @@ div.cardList.narrow {
font-feature-settings: "liga" 1, "dlig" 1; font-feature-settings: "liga" 1, "dlig" 1;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
font-size: 8pt; text-align: center;
line-height: 14px; font-size: 28px;
line-height: 30px;
color: #999; color: #999;
padding-left: 5px; } padding-left: 5px; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper header div:hover { .passwordGenerator .passwordGeneratorBaloon form .optionsWrapper header div:hover {
color: white; } color: white; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options { .passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options {
background-color: #888; background-color: white;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
padding-bottom: 3px; padding-bottom: 3px;
@ -4482,6 +4153,8 @@ div.cardList.narrow {
border-bottom: 0px; } border-bottom: 0px; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options.closed div { .passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options.closed div {
visibility: hidden; } visibility: hidden; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options span {
color: black; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .length { .passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .length {
padding-top: 2px; } padding-top: 2px; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .length span { .passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .length span {
@ -4510,12 +4183,13 @@ div.cardList.narrow {
cursor: pointer; } cursor: pointer; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList .charsetSets label span { .passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList .charsetSets label span {
font-size: 10pt; font-size: 10pt;
color: #eee; } color: black; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList .charsetSets label span:after { .passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList .charsetSets label span:after {
content: ''; } content: ''; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList textarea { .passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList textarea {
color: gray; color: gray;
min-height: 34px; } min-height: 34px;
border: 1px solid black; }
.passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList textarea:focus { .passwordGenerator .passwordGeneratorBaloon form .optionsWrapper .options .charList textarea:focus {
outline: 0; } outline: 0; }
.passwordGenerator .passwordGeneratorBaloon form .passwordValue { .passwordGenerator .passwordGeneratorBaloon form .passwordValue {
@ -4536,7 +4210,8 @@ div.cardList.narrow {
align-content: stretch; align-content: stretch;
padding: 10px; padding: 10px;
padding-top: 3px; padding-top: 3px;
padding-right: 0px; } padding-right: 0px;
padding-left: 0; }
.passwordGenerator .passwordGeneratorBaloon form .passwordValue .passwordWrapper { .passwordGenerator .passwordGeneratorBaloon form .passwordValue .passwordWrapper {
-webkit-box-flex: auto; -webkit-box-flex: auto;
-webkit-flex: auto; -webkit-flex: auto;
@ -4574,37 +4249,17 @@ div.cardList.narrow {
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
font-size: 14pt; font-size: 14pt;
font-weight: bold; font-weight: bold;
text-align: center; text-align: left;
padding-left: .5em;
color: #999; color: #999;
width: 40px; width: 30px;
height: inherit; } height: inherit;
line-height: 35px; }
.passwordGenerator .passwordGeneratorBaloon form .passwordValue .button.setPasswordValue { .passwordGenerator .passwordGeneratorBaloon form .passwordValue .button.setPasswordValue {
background-color: #404040; } background-color: #404040; }
.passwordGenerator .passwordGeneratorBaloon form .passwordValue .button:hover { .passwordGenerator .passwordGeneratorBaloon form .passwordValue .button:hover {
color: white; } color: white; }
/*
Copyright 2008-2015 Clipperz Srl
This file is part of Clipperz, the online password manager.
For further information about its features and functionalities please
refer to http://www.clipperz.com.
* Clipperz is free software: you can redistribute it and/or modify it
under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
* Clipperz is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
See the GNU Affero General Public License for more details.
* You should have received a copy of the GNU Affero General Public
License along with Clipperz. If not, see http://www.gnu.org/licenses/.
*/
div.dialog { div.dialog {
-webkit-box-shadow: 0px 2px 5px rgba(50, 50, 50, 0.75); -webkit-box-shadow: 0px 2px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 2px 5px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 2px 5px rgba(50, 50, 50, 0.75);
@ -4637,28 +4292,6 @@ div.dialog {
color: white; color: white;
background-color: #666; } background-color: #666; }
/*
Copyright 2008-2015 Clipperz Srl
This file is part of Clipperz, the online password manager.
For further information about its features and functionalities please
refer to http://www.clipperz.com.
* Clipperz is free software: you can redistribute it and/or modify it
under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
* Clipperz is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
See the GNU Affero General Public License for more details.
* You should have received a copy of the GNU Affero General Public
License along with Clipperz. If not, see http://www.gnu.org/licenses/.
*/
.helpBox { .helpBox {
color: white; color: white;
margin: 20px; margin: 20px;
@ -4748,28 +4381,6 @@ textarea {
/* /*
Copyright 2008-2015 Clipperz Srl
This file is part of Clipperz, the online password manager.
For further information about its features and functionalities please
refer to http://www.clipperz.com.
* Clipperz is free software: you can redistribute it and/or modify it
under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
* Clipperz is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
See the GNU Affero General Public License for more details.
* You should have received a copy of the GNU Affero General Public
License along with Clipperz. If not, see http://www.gnu.org/licenses/.
*/
/*
Bootstrap CSS suggests these size breakpoints: Bootstrap CSS suggests these size breakpoints:
- Extra small devices Phones (<768px) - Extra small devices Phones (<768px)

4
frontend/delta/css/clipperz.css.map
View File

File diff suppressed because one or more lines are too long

2
frontend/delta/js/Clipperz/PM/UI/Components/Cards/PasswordGenerator.js
View File

@ -202,12 +202,12 @@ Clipperz.PM.UI.Components.Cards.PasswordGeneratorClass = React.createClass({
]) ])
]), ]),
React.DOM.div({'className':'passwordValue'}, [ React.DOM.div({'className':'passwordValue'}, [
React.DOM.div({'className':'button generatePassword', 'onClick':this.refreshPasswordValue}, "generate password"),
React.DOM.div({'className':'passwordWrapper'}, [ React.DOM.div({'className':'passwordWrapper'}, [
Clipperz.PM.UI.Components.Cards.TextArea({'rows':'1', 'value':this.state['password'], 'onChange':this.changeStateWithTargetValue('password', false)}), Clipperz.PM.UI.Components.Cards.TextArea({'rows':'1', 'value':this.state['password'], 'onChange':this.changeStateWithTargetValue('password', false)}),
React.DOM.div({'className':'entropyWrapper', 'style':{'backgroundColor':entropyColor}}, [ React.DOM.div({'className':'entropy', 'style':{'width': entropyWidth}})]) React.DOM.div({'className':'entropyWrapper', 'style':{'backgroundColor':entropyColor}}, [ React.DOM.div({'className':'entropy', 'style':{'width': entropyWidth}})])
]), ]),
React.DOM.div({'className':'button setPasswordValue', 'onClick':this.setPasswordValue}, "set password"), React.DOM.div({'className':'button setPasswordValue', 'onClick':this.setPasswordValue}, "set password"),
React.DOM.div({'className':'button generatePassword', 'onClick':this.refreshPasswordValue}, "generate password"),
]), ]),
]) ])
]) ])

6
frontend/delta/js/Clipperz/PM/UI/Components/Overlay.js
View File

@ -62,6 +62,12 @@ Clipperz.Base.extend(Clipperz.PM.UI.Components.Overlay, Object, {
this.showProgressBar(); this.showProgressBar();
} }
if (! aMessage && ! showProgress) {
MochiKit.DOM.addElementClass(this.element(), 'spinnerOnly');
} else {
MochiKit.DOM.removeElementClass(this.element(), 'spinnerOnly');
}
this.resetStatus(); this.resetStatus();
this.setMessage(aMessage); this.setMessage(aMessage);
MochiKit.DOM.removeElementClass(this.element(), 'ios-overlay-hide'); MochiKit.DOM.removeElementClass(this.element(), 'ios-overlay-hide');

7
frontend/delta/js/Clipperz/PM/UI/Components/Selections.js
View File

@ -141,7 +141,12 @@ Clipperz.PM.UI.Components.SelectionsClass = React.createClass({
]), ]),
]), ]),
React.DOM.ul({'className':'tagList'}, MochiKit.Base.map(function (aTag) {return Clipperz.PM.UI.Components.TagIndexItem({'label':aTag, 'count':tagInfo[aTag], 'selected':aTag == filterValue}); }, tags)), React.DOM.ul({'className':'tagList'}, [
React.DOM.li({'className': 'title'}, "Tags"),
MochiKit.Base.map(function (aTag) {
return Clipperz.PM.UI.Components.TagIndexItem({'label':aTag, 'count':tagInfo[aTag], 'selected':aTag == filterValue});
}, tags)
]),
React.DOM.div({'className':'showArchivedCards', 'onClick':this.handleCheckboxChanges}, [ React.DOM.div({'className':'showArchivedCards', 'onClick':this.handleCheckboxChanges}, [
React.DOM.input({'type':'checkbox', 'checked':this.props['shouldIncludeArchivedCards'] ? 'checked' : null}), React.DOM.input({'type':'checkbox', 'checked':this.props['shouldIncludeArchivedCards'] ? 'checked' : null}),
React.DOM.span({'className':'label'}, "Show archived cards"), React.DOM.span({'className':'label'}, "Show archived cards"),

25
frontend/delta/scss/core/layout.scss
View File

@ -180,6 +180,7 @@ input[type=text] {
.extraFeatureContent { .extraFeatureContent {
display: none; display: none;
width: 100%;
} }
&.fullOpen { &.fullOpen {
@ -280,6 +281,11 @@ input[type=text] {
width: 100%; width: 100%;
} }
/* IE fix for 'wide' mode. */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
position: absolute;
}
.cardToolbarFrame { .cardToolbarFrame {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -410,6 +416,21 @@ div.cardToolbar {
} }
} }
/* IE fix for badges being shifted to left. */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.attachmentQueueToggleButton {
.badge {
.top {
margin-left: 37px;
}
.bottom {
margin-left: 7px;
}
}
}
}
$arrow-size: 8px; $arrow-size: 8px;
div.attachmentQueueStatus { div.attachmentQueueStatus {
position: fixed; position: fixed;
@ -731,6 +752,10 @@ div.cardContent {
height: $mainCardToolbarHeight; height: $mainCardToolbarHeight;
line-height: $mainCardToolbarHeight; line-height: $mainCardToolbarHeight;
li.enabled:hover {
background-color: #114875;
}
&.edit { &.edit {
@include order(1); @include order(1);

10
frontend/delta/scss/core/overlay.scss
View File

@ -91,8 +91,8 @@ div.overlay {
position: relative; position: relative;
width: 100px; width: 100px;
height: 100px; height: 100px;
left: 50% !important; left: 50%;
top: 40% !important; top: 40%;
margin-left: -50px; margin-left: -50px;
margin-top: -50px; margin-top: -50px;
@ -127,6 +127,12 @@ div.overlay {
div.bar12 {@include transform(330deg, 0, -142%); @include animation-delay(-0.08330s);} div.bar12 {@include transform(330deg, 0, -142%); @include animation-delay(-0.08330s);}
} }
&.spinnerOnly {
.spinner {
top: 50%;
}
}
.progressBar { .progressBar {
// display: block; // display: block;
// width: 100%; // width: 100%;

25
frontend/delta/scss/style/card.scss
View File

@ -1099,15 +1099,15 @@ $cardViewBasePadding: 10px;
.optionsWrapper { .optionsWrapper {
header { header {
height: 12px; height: 30px;
border-bottom: 1px solid #666; border-bottom: 1px solid #666;
div { div {
content: "options"; content: "options";
@include icon-font(); @include icon-font();
// text-align: right; text-align: center;
font-size: 8pt; font-size: 28px;
line-height: 14px; line-height: 30px;
color: #999; color: #999;
padding-left: 5px; padding-left: 5px;
@ -1119,7 +1119,8 @@ $cardViewBasePadding: 10px;
.options { .options {
// height: inherit; // height: inherit;
background-color: #888; // background-color: #888;
background-color: white;
padding-left: $passwordBaloonBorder; padding-left: $passwordBaloonBorder;
padding-right: $passwordBaloonBorder /* + 30px */; padding-right: $passwordBaloonBorder /* + 30px */;
padding-bottom: 3px; padding-bottom: 3px;
@ -1136,6 +1137,10 @@ $cardViewBasePadding: 10px;
} }
} }
span {
color:black;
}
.length { .length {
padding-top: 2px; padding-top: 2px;
@ -1182,7 +1187,7 @@ $cardViewBasePadding: 10px;
label { label {
span { span {
font-size: 10pt; font-size: 10pt;
color: #eee; color: black;
&:after { &:after {
content: ''; content: '';
@ -1197,6 +1202,7 @@ $cardViewBasePadding: 10px;
textarea { textarea {
color: gray; color: gray;
min-height: 34px; min-height: 34px;
border:1px solid black;
&:focus { &:focus {
outline: 0; outline: 0;
@ -1214,6 +1220,7 @@ $cardViewBasePadding: 10px;
padding: $passwordBaloonBorder; padding: $passwordBaloonBorder;
padding-top: 3px; padding-top: 3px;
padding-right: 0px; padding-right: 0px;
padding-left: 0;
.passwordWrapper { .passwordWrapper {
@include flex(auto); @include flex(auto);
@ -1245,10 +1252,12 @@ $cardViewBasePadding: 10px;
@include icon-font(); @include icon-font();
font-size: 14pt; font-size: 14pt;
font-weight: bold; font-weight: bold;
text-align: center; text-align: left;
padding-left: .5em;
color: #999; color: #999;
width: 40px; width: 30px;
height: inherit; height: inherit;
line-height: 35px;
&.setPasswordValue { &.setPasswordValue {
background-color: lighten($passwordBaloonColor, 5%); background-color: lighten($passwordBaloonColor, 5%);

7
frontend/delta/scss/style/selectionPanel.scss
View File

@ -171,13 +171,14 @@ refer to http://www.clipperz.com.
@include flexbox(); @include flexbox();
@include flex-direction(row); @include flex-direction(row);
&:before { &.title:before {
content: "tag"; content: "tag";
} }
span.label { span.label {
font-size: 14pt; font-size: 14pt;
@include flex(auto); @include flex(auto);
padding-left: 35px;
} }
span.count { span.count {
@ -241,13 +242,13 @@ refer to http://www.clipperz.com.
} }
span.count { span.count {
background-color: gray; background-color: white;
font-size: 10pt; font-size: 10pt;
margin-right: 12px; margin-right: 12px;
padding: 3px 5px; padding: 3px 5px;
@include border-radius(4px); @include border-radius(4px);
color: white; color: black;
font-weight: 300; font-weight: 300;
vertical-align: middle; vertical-align: middle;
} }