919 lines
16 KiB
SCSS
919 lines
16 KiB
SCSS
/*
|
|
|
|
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/.
|
|
|
|
*/
|
|
|
|
// ARCHIVE - RESTORE
|
|
//
|
|
// background-color: #800;
|
|
// box-shadow: inset 0 2px 3px 0 rgba(0,0,0,0.3);
|
|
// color: #ccc;
|
|
//
|
|
|
|
$cardListHeight: 48px;
|
|
$faviconSize: 32px;
|
|
$padding: ($cardListHeight - $faviconSize) / 2;
|
|
$cardArchivedColor: #eee;
|
|
//$cardToolbarBackgroundColor: #e38800;
|
|
$cardToolbarBackgroundColor: $clipperz-blue;
|
|
$iconMargin: 6px;
|
|
$labelColor: gray;
|
|
|
|
div.cardList {
|
|
// background-color: $yellow;
|
|
|
|
&.loadingCard {
|
|
li.selected {
|
|
background-color: gray;
|
|
border-bottom: 1px solid gray;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
background-color: $cardToolbarBackgroundColor;
|
|
|
|
li {
|
|
cursor: pointer;
|
|
|
|
border-bottom: 1px solid #eee;
|
|
background-color: white;
|
|
transition: margin-left 0.1s ease-in-out, padding-right 0.1s ease-in-out;
|
|
// padding-right:40px; // prevent new lines on selection
|
|
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
|
|
@include flexbox();
|
|
@include flex-direction(row);
|
|
|
|
&.selected {
|
|
// background-color: yellow;
|
|
// background-color: brown;
|
|
// background-color: $clipperz-blue;
|
|
// color: white;
|
|
margin-left: 40px;
|
|
padding-right: 0px; // prevent new lines on selection
|
|
box-shadow: -4px 0px 3px -1px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
&.archived {
|
|
// background-color: pink;
|
|
background-color: $cardArchivedColor;
|
|
color: #999;
|
|
|
|
}
|
|
|
|
.favicon {
|
|
width: $cardListHeight;
|
|
@include flex(none);
|
|
|
|
img {
|
|
width: $faviconSize;
|
|
height: $faviconSize;
|
|
padding: $padding;
|
|
}
|
|
}
|
|
|
|
.label {
|
|
@include flex(auto);
|
|
|
|
font-size: 14pt;
|
|
|
|
// padding-top: 0.8em;
|
|
padding-top: 16px;
|
|
// padding-bottom: 0.8em;
|
|
padding-bottom: 14px;
|
|
padding-left: $padding * 2;
|
|
padding-right: $padding;
|
|
line-height: 1.2em;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
div.cardList.narrow {
|
|
@include overflow-auto;
|
|
|
|
&.loadingCard {
|
|
li.selected {
|
|
// background-color: gray;
|
|
|
|
&:after {
|
|
color: white;
|
|
margin-right: 10px;
|
|
content: "loading";
|
|
@include animation(spin, 1s, linear, infinite);
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
ul {
|
|
li {
|
|
|
|
&:after {
|
|
content: "show detail";
|
|
@include flex(none);
|
|
@include icon-font();
|
|
height: 48px;
|
|
font-size: 24pt;
|
|
line-height: 48px;
|
|
margin-right: 25px;
|
|
color: #ccc;
|
|
|
|
}
|
|
|
|
&:hover {
|
|
&:after {
|
|
color: $clipperz-blue;
|
|
}
|
|
};
|
|
}
|
|
}
|
|
|
|
&.EXPIRED {
|
|
ul {
|
|
li {
|
|
&:after {
|
|
content: "";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
$cardViewBasePadding: 10px;
|
|
|
|
#cardDetailPage, .cardDetail {
|
|
.loading {
|
|
// height: 100%;
|
|
// width: 100%;
|
|
// background-color: rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.view {
|
|
|
|
&.archived {
|
|
// background-color: pink;
|
|
background-color: $cardArchivedColor;
|
|
}
|
|
|
|
.cardDetailToolbar {
|
|
background-color: $cardToolbarBackgroundColor;
|
|
color: white;
|
|
|
|
&.narrow {
|
|
font-size: 24pt;
|
|
|
|
.back {
|
|
@include icon-font();
|
|
}
|
|
|
|
.cardMenuOptions {
|
|
@include icon-font();
|
|
text-align: right;
|
|
font-size: 18pt;
|
|
padding-right: 10px;
|
|
|
|
}
|
|
|
|
.commandMenu {
|
|
// display: none;
|
|
.commandMenuMask {
|
|
display: none;
|
|
}
|
|
|
|
.commandMenu {
|
|
display: none;
|
|
}
|
|
|
|
&.show {
|
|
|
|
.commandMenuMask {
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
.commandMenu {
|
|
display: block;
|
|
float: right;
|
|
position: absolute;
|
|
min-width: 200px;
|
|
top: 48px;
|
|
right: 5px;
|
|
color: black;
|
|
background-color: white;
|
|
@include box-shadow(0px, 2px, 5px, rgba(50, 50, 50, 0.75));
|
|
|
|
ul {
|
|
@include flex-direction(column);
|
|
|
|
li {
|
|
text-align: left;
|
|
font-size: 18pt;
|
|
padding: 5px 10px;
|
|
border-bottom: 1px solid black;
|
|
|
|
&.disabled {
|
|
color: #ddd;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.cardField {
|
|
textarea.fieldValue {
|
|
// line-height: 1em;
|
|
// height: 1.3em;
|
|
outline: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.edit {
|
|
// box-shadow: inset 2px 0 6px 0 rgba(0,0,0, 0.1);
|
|
|
|
.cardDetailToolbar {
|
|
background-color: $cardToolbarBackgroundColor;
|
|
color: white;
|
|
|
|
// box-shadow: inset 2px 0 6px 0 rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.cardField {
|
|
border-top: 1px solid #eee;
|
|
|
|
&:last-child {
|
|
border-bottom: 1px solid #eee;
|
|
};
|
|
|
|
&:hover {
|
|
background-color: #eee;
|
|
}
|
|
}
|
|
|
|
input, textarea {
|
|
@include placeholder {
|
|
font-style: italic;
|
|
color: #ccc;
|
|
// font-weight:100;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.cardDetailToolbar {
|
|
&.edit {
|
|
li {
|
|
font-weight: 100;
|
|
// color: #aaa;
|
|
|
|
&:hover {
|
|
color: white;
|
|
};
|
|
}
|
|
li.save {
|
|
// color: yellow;
|
|
}
|
|
|
|
&.hasPendingChanges {
|
|
li {
|
|
// color: #ccc;
|
|
font-weight: 500;
|
|
}
|
|
li.save {
|
|
// color: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
ul {
|
|
li {
|
|
text-align: center;
|
|
|
|
&.disabled {
|
|
color: #333;
|
|
cursor: default;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.narrow {
|
|
.cardMenuOptions {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
// @include user-select(none);
|
|
|
|
.cardLabel {
|
|
@include user-select(text);
|
|
|
|
font-size: 24pt;
|
|
// width: 100%;
|
|
// padding: $cardViewBasePadding;
|
|
padding: 20px 20px 20px 42px;
|
|
// height: 52px;
|
|
// line-height: 32px;
|
|
border: 0px;
|
|
}
|
|
|
|
input.cardLabel {
|
|
width: 100%;
|
|
padding: 20px 20px 20px 42px;
|
|
// height: 52px;
|
|
}
|
|
|
|
.tagEditor {
|
|
padding: $cardViewBasePadding;
|
|
// background-color: cyan;
|
|
}
|
|
|
|
.cardNotes {
|
|
// width: 100%;
|
|
border: 0px;
|
|
|
|
font-size: 10pt;
|
|
// font-style: italic;
|
|
|
|
padding: 10px 42px 10px 42px;
|
|
|
|
// background-color: gold;
|
|
div {
|
|
@include user-select(text);
|
|
line-height: 1.5em;
|
|
white-space: pre-wrap;
|
|
// padding: $cardViewBasePadding;
|
|
}
|
|
|
|
textarea {
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
width: 100%;
|
|
border: 0px;
|
|
}
|
|
}
|
|
|
|
.dropArea {
|
|
// border: 3px dashed red;
|
|
background-color: #ccc;
|
|
width: 100%;
|
|
height: 40px;
|
|
}
|
|
|
|
.cardField {
|
|
@include flexbox();
|
|
@include flex-direction(row);
|
|
// @include user-select(none);
|
|
// background-color: rgba(255, 255, 255, 0.75);
|
|
// border-bottom: 1px solid #eee;
|
|
|
|
// background-color: lightgreen;
|
|
|
|
&.dragged {
|
|
// border: 4px dotted red;
|
|
display: none;
|
|
}
|
|
|
|
.fieldEditAction {
|
|
@include user-select(text);
|
|
@include flex(none);
|
|
width: 32px;
|
|
// background-color: pink;
|
|
|
|
// @include flexbox();
|
|
// @include flex-direction(column);
|
|
|
|
.removeField {
|
|
@include align-self(flex-start);
|
|
@include icon-font();
|
|
|
|
display: block;
|
|
margin: $iconMargin;
|
|
margin-top: 12px;
|
|
cursor: pointer;
|
|
color: #ccc;
|
|
width: 40px;
|
|
font-size: 20pt;
|
|
|
|
&:hover {
|
|
color: rgb(155, 0, 0);
|
|
};
|
|
}
|
|
|
|
|
|
|
|
.dragHandler3 {
|
|
// @include dotted-background();
|
|
@include cursor-grab();
|
|
|
|
background: repeating-linear-gradient(
|
|
0deg,
|
|
white,
|
|
white 2px,
|
|
#ddd 2px,
|
|
#ddd 3px
|
|
);
|
|
|
|
width: 28px;
|
|
height: 20px;
|
|
margin-left: 6px;
|
|
display: block;
|
|
|
|
&:active {
|
|
@include cursor-grabbing();
|
|
};
|
|
}
|
|
|
|
$dragHandlerHeight: 24px;
|
|
$dragHandlerWidth: 4px;
|
|
.dragHandler {
|
|
display: block;
|
|
box-sizing: border-box;
|
|
width: $dragHandlerWidth;
|
|
height: $dragHandlerHeight;
|
|
|
|
margin-left: 15px;
|
|
border:1px solid #E8E8E8;
|
|
// border:1px solid red;
|
|
border-top:0;
|
|
border-bottom:0;
|
|
@include cursor-grab();
|
|
|
|
&:active {
|
|
@include cursor-grabbing();
|
|
}
|
|
|
|
&:before {
|
|
display: block;
|
|
box-sizing: border-box;
|
|
content:'';
|
|
position: relative;
|
|
left:-1px;
|
|
// right:-2px;
|
|
height: 100%;
|
|
width: $dragHandlerWidth;
|
|
border:2px dotted #FFF;
|
|
// border:2px dotted blue;
|
|
border-top:0;
|
|
border-bottom:0;
|
|
z-index:2;
|
|
}
|
|
&:after {
|
|
display: block;
|
|
box-sizing: border-box;
|
|
content:'';
|
|
position: relative;
|
|
top: -$dragHandlerHeight;
|
|
left:0px;
|
|
right:0px;
|
|
height:100%;
|
|
border:1px solid #EEE;
|
|
// border:1px solid green;
|
|
border-top:0;
|
|
border-bottom:0;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.fieldValues {
|
|
@include flex(1);
|
|
padding: $cardViewBasePadding;
|
|
|
|
.fieldLabel {
|
|
@include user-select(text);
|
|
color: $labelColor;
|
|
// border-bottom: 1px dotted #ddd;
|
|
padding-bottom: 4px;
|
|
margin-bottom: 4px;
|
|
@include user-select(text);
|
|
|
|
input {
|
|
font-size: 12pt;
|
|
color: $labelColor;
|
|
border: 0px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.fieldValue {
|
|
font-size: 18pt;
|
|
line-height: 1.2em;
|
|
line-height: 28px;
|
|
// height: 1.3em;
|
|
// outline: none;
|
|
@include user-select(text);
|
|
|
|
resize: none;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
|
|
border: 0px;
|
|
width: 100%;
|
|
|
|
&.hidden {
|
|
font-family: clipperz-password;
|
|
font-size: 22pt;
|
|
line-height: 28px;
|
|
margin-top: -2px;
|
|
|
|
&.visible {
|
|
font-family: "clipperz-font";
|
|
font-size: 18pt;
|
|
line-height: 28px;
|
|
margin-top: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.fieldAction {
|
|
@include flex(none);
|
|
// @include align-self(center);
|
|
@include align-self(flex-start);
|
|
@include user-select(text);
|
|
|
|
span {
|
|
display: block;
|
|
|
|
&.action {
|
|
@include icon-font();
|
|
color: #aaa;
|
|
|
|
width: 20px;
|
|
height: 20px;
|
|
font-size: 15pt;
|
|
margin: $iconMargin;
|
|
|
|
cursor: default;
|
|
|
|
&.URL {
|
|
cursor: pointer;
|
|
}
|
|
|
|
&.PASSWORD {
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
color: #888;
|
|
};
|
|
|
|
&.active {
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.toggleLock {
|
|
@include align-self(flex-end);
|
|
@include icon-font();
|
|
|
|
display: block;
|
|
margin: $iconMargin;
|
|
margin-left: 9px;
|
|
padding-top: 10px;
|
|
cursor: pointer;
|
|
color: #ccc;
|
|
font-size: 18pt;
|
|
|
|
&:hover {
|
|
color: #888;
|
|
};
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.newCardField {
|
|
@include icon-font();
|
|
margin: $iconMargin;
|
|
cursor: pointer;
|
|
color: #ccc;
|
|
font-size: 20pt;
|
|
|
|
&:hover {
|
|
color: green;
|
|
};
|
|
}
|
|
|
|
.cardDirectLogin {
|
|
font-size: 18pt;
|
|
padding: $cardViewBasePadding;
|
|
// background-color: pink;
|
|
background-color: $clipperz-orange;
|
|
color: white;
|
|
cursor: pointer;
|
|
|
|
.directLoginLabel {
|
|
padding-left: 42px - $iconMargin;
|
|
}
|
|
}
|
|
}
|
|
|
|
//=============================================================================
|
|
|
|
.passwordGenerator {
|
|
.passwordGeneratorMask {
|
|
position: fixed;
|
|
top: 0px;
|
|
left: 0px;
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
z-index: 100;
|
|
|
|
}
|
|
|
|
.passwordGeneratorBaloon {
|
|
position: relative;
|
|
$passwordBaloonColor: #333;
|
|
$passwordBaloonBorder: 10px;
|
|
$borderRadius: 6px;
|
|
z-index: 101;
|
|
|
|
form {
|
|
position: absolute;
|
|
bottom: calc(100% + 4px);
|
|
left: 0;
|
|
min-width: 220px;
|
|
width: 80%;
|
|
max-width: 400px;
|
|
// padding: 10px;
|
|
background-color: $passwordBaloonColor;
|
|
color: #fff;
|
|
@include border-radius($borderRadius);
|
|
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .2);
|
|
font-size: 9pt;
|
|
|
|
span {
|
|
font-size: 8pt;
|
|
color: #ccc;
|
|
}
|
|
|
|
textarea {
|
|
resize: none;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
width: 100%;
|
|
}
|
|
|
|
.optionsWrapper {
|
|
header {
|
|
height: 12px;
|
|
border-bottom: 1px solid #666;
|
|
|
|
div {
|
|
content: "options";
|
|
@include icon-font();
|
|
// text-align: right;
|
|
font-size: 8pt;
|
|
line-height: 14px;
|
|
color: #999;
|
|
padding-left: 5px;
|
|
|
|
&:hover {
|
|
color: white;
|
|
}
|
|
};
|
|
}
|
|
|
|
.options {
|
|
// height: inherit;
|
|
background-color: #888;
|
|
padding-left: $passwordBaloonBorder;
|
|
padding-right: $passwordBaloonBorder /* + 30px */;
|
|
padding-bottom: 3px;
|
|
border-bottom: 1px solid #aaa;
|
|
// @include transition(height, 0.5s, ease-in);
|
|
|
|
&.closed {
|
|
height: 0px;
|
|
padding-bottom: 0px;
|
|
border-bottom: 0px;
|
|
|
|
div {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
.length {
|
|
span {
|
|
margin-right: 3px;
|
|
|
|
&:after {
|
|
content: ':';
|
|
}
|
|
}
|
|
|
|
input {
|
|
background-color: #888;
|
|
color: white;
|
|
font-weight: bold;
|
|
font-size: 12pt;
|
|
border: 0px;
|
|
text-align: right;
|
|
|
|
&::-webkit-outer-spin-button {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.charList {
|
|
span {
|
|
display: inline-block;
|
|
line-height: 10px;
|
|
|
|
&:after {
|
|
content: ':';
|
|
}
|
|
}
|
|
|
|
.charsetSets {
|
|
display: inline-block;
|
|
align: right;
|
|
|
|
// div {
|
|
// font-size: 8pt;
|
|
// display: inline-block;
|
|
// border: 1px solid gray;
|
|
// height: 20px;
|
|
// line-height: 20px;
|
|
// padding: 0px 4px;
|
|
// margin: 0px 2px;
|
|
// @include border-radius(5px);
|
|
//
|
|
// &.selected {
|
|
// border: 1px solid #aaa;
|
|
// background-color: gray;
|
|
// }
|
|
// }
|
|
|
|
label {
|
|
span {
|
|
font-size: 10pt;
|
|
color: #eee;
|
|
|
|
&:after {
|
|
content: '';
|
|
}
|
|
}
|
|
|
|
padding-right: 5px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
textarea {
|
|
color: gray;
|
|
min-height: 34px;
|
|
|
|
&:focus {
|
|
outline: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.passwordValue {
|
|
@include flexbox();
|
|
@include flex-direction(row);
|
|
padding: $passwordBaloonBorder;
|
|
padding-top: 3px;
|
|
// padding-bottom: $passwordBaloonBorder - $borderRadius;
|
|
padding-bottom: 0px;
|
|
padding-right: 0px;
|
|
|
|
.passwordWrapper {
|
|
@include flex(auto);
|
|
|
|
textarea {
|
|
font-size: 12pt;
|
|
font-weight: bold;
|
|
border: 0px;
|
|
|
|
&:focus {
|
|
outline: 0;
|
|
}
|
|
}
|
|
|
|
.entropyWrapper {
|
|
width: 100%;
|
|
height: 2px;
|
|
|
|
.entropy {
|
|
height: 100%;
|
|
background-color: white;
|
|
float: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
.button {
|
|
@include flex(none);
|
|
@include icon-font();
|
|
// @include align-self(flex-end);
|
|
// @include align-content(center);
|
|
// padding-left: 10px;
|
|
font-size: 14pt;
|
|
font-weight: bold;
|
|
// overflow: hidden;
|
|
text-align: center;
|
|
padding-left: 5px;
|
|
// background-color: green;
|
|
color: #999;
|
|
width: 40px;
|
|
height: 30px;
|
|
|
|
&:hover {
|
|
color: white;
|
|
};
|
|
}
|
|
}
|
|
|
|
$setValueColor: lighten($passwordBaloonColor, 10%);
|
|
$setValueHoverColor: lighten($passwordBaloonColor, 40%);
|
|
.setValue {
|
|
background-color: $passwordBaloonColor;
|
|
// height: $borderRadius;
|
|
height: 10px - $borderRadius;
|
|
border-bottom: $borderRadius solid $setValueColor;
|
|
border-bottom-left-radius: $borderRadius;
|
|
border-bottom-right-radius: $borderRadius;
|
|
|
|
$arrowSize: 6px;
|
|
$hoverArrowSize: 10px;
|
|
&:after {
|
|
content:'';
|
|
position:absolute;
|
|
top:100%;
|
|
// left:10px;
|
|
left:10%;
|
|
margin-left: 0px;
|
|
width:0;
|
|
height:0;
|
|
border-top:$arrowSize solid $setValueColor;
|
|
border-left:$arrowSize solid transparent;
|
|
border-right:$arrowSize solid transparent;
|
|
}
|
|
|
|
&:hover {
|
|
border-color: $setValueHoverColor;
|
|
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .4);
|
|
|
|
&:after {
|
|
border-top:$hoverArrowSize solid $setValueHoverColor;
|
|
border-left:$hoverArrowSize solid transparent;
|
|
border-right:$hoverArrowSize solid transparent;
|
|
margin-left: -($hoverArrowSize - $arrowSize) / 2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|