1275 lines
20 KiB
SCSS
1275 lines
20 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;
|
|
$lightRed: #dd1111;
|
|
$darkRed: #aa2222;
|
|
|
|
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;
|
|
}
|
|
|
|
.attachmentsCount {
|
|
@include icon-font();
|
|
color: #aaa;
|
|
padding-right: 8px;
|
|
padding-left: 6px;
|
|
padding-top: 18px;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
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;
|
|
|
|
&.top {
|
|
display: none; /* Issue #203 */
|
|
}
|
|
|
|
&.narrow {
|
|
@include transition(height, 2.5s, ease-in);
|
|
|
|
&.commands {
|
|
height: 12px;
|
|
|
|
div {
|
|
display: none;
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.cardDirectLogin {
|
|
.removeDirectLogin {
|
|
@include icon-font();
|
|
|
|
display: inline-block;
|
|
margin-left: $iconMargin;
|
|
// margin-top: 12px;
|
|
cursor: pointer;
|
|
color: white;
|
|
width: 40px;
|
|
font-size: 20pt;
|
|
|
|
&:hover {
|
|
color: rgb(155, 0, 0);
|
|
};
|
|
}
|
|
|
|
.directLoginLabel {
|
|
vertical-align: bottom;
|
|
// padding-left: 17px;
|
|
padding-left: 0px;
|
|
}
|
|
}
|
|
|
|
.cardUploadAttachments {
|
|
border: 2px dashed #ccc;
|
|
margin: 0 1em 1em 1em;
|
|
padding: 1em;
|
|
text-align: center;
|
|
margin-left: 44px;
|
|
|
|
p {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.attachmentInput {
|
|
display: none;
|
|
}
|
|
|
|
.button {
|
|
display: inline-block;
|
|
color: white;
|
|
background-color: #ff9900;
|
|
font-size: 14pt;
|
|
padding: 10px 14px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.cardAttachmentWrapper {
|
|
border-bottom: 3px double #eee;
|
|
}
|
|
|
|
.cardAttachments {
|
|
|
|
padding-bottom: 10px;
|
|
|
|
h3 {
|
|
padding-top: 14px;
|
|
padding-bottom: 14px;
|
|
color: gray;
|
|
font-size: 12pt;
|
|
|
|
&:before {
|
|
@include icon-font();
|
|
content: "attachment";
|
|
padding-left: 13px;
|
|
padding-right: 13px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
font-weight: bold;
|
|
font-size: 14pt;
|
|
display: inline-block;
|
|
|
|
transform: scaleX(-1);
|
|
};
|
|
}
|
|
|
|
.skippedFiles {
|
|
margin: 1em 1em 1em 44px;
|
|
color: white;
|
|
background: $clipperz-orange;
|
|
padding: 1em;
|
|
font-size: .8em;
|
|
|
|
ul {
|
|
padding: 1em 1em 1em 0;
|
|
list-style-type: none;
|
|
|
|
li {
|
|
.filename {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
a {
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.attachmentList {
|
|
margin-left: 44px;
|
|
padding-right: 8px;
|
|
|
|
li {
|
|
@include flexbox();
|
|
@include flex-direction(row);
|
|
padding-bottom: 6px;
|
|
|
|
&.broken {
|
|
span {
|
|
color: $lightRed !important;
|
|
}
|
|
}
|
|
|
|
/*cursor: pointer;*/
|
|
|
|
.contentType {
|
|
@include flex(none);
|
|
width: 30px;
|
|
@include icon-font();
|
|
color: gray;
|
|
}
|
|
|
|
span {
|
|
/*border:1px solid black;*/
|
|
line-height: 30px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.meta {
|
|
@include flex(auto);
|
|
text-align: left;
|
|
font-size: 14pt;
|
|
|
|
width: 100%; /* Hack to fix long names behaviour */
|
|
overflow: hidden;
|
|
|
|
.name {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
width: 100%;
|
|
white-space: pre;
|
|
}
|
|
|
|
.size {
|
|
display: block;
|
|
color: #aaa;
|
|
font-size: 8pt;
|
|
line-height: 8pt;
|
|
}
|
|
}
|
|
|
|
.status {
|
|
width: 100px;
|
|
text-align: right;
|
|
|
|
.waiting {
|
|
white-space: pre;
|
|
font-size: 10pt;
|
|
color: grey;
|
|
}
|
|
}
|
|
|
|
.actions {
|
|
@include userSelectNone();
|
|
|
|
display: inline-block;
|
|
width:30px;
|
|
|
|
a {
|
|
display: inline-block;
|
|
width: 30px;
|
|
cursor:pointer;
|
|
font-size: 20pt;
|
|
color: #aaa;
|
|
margin-top:1px;
|
|
|
|
&.cancel, &.remove {
|
|
@include icon-font();
|
|
&:hover {
|
|
color: $lightRed;
|
|
};
|
|
}
|
|
|
|
&.download {
|
|
&:hover {
|
|
color: $clipperz-blue;
|
|
};
|
|
}
|
|
}
|
|
}
|
|
|
|
.progress {
|
|
width: 50px;
|
|
text-align: center;
|
|
|
|
.radialProgressIndicator {
|
|
width: 25px;
|
|
height: 30px;
|
|
|
|
.background {
|
|
fill: white;
|
|
}
|
|
|
|
.progress {
|
|
fill: black;
|
|
}
|
|
|
|
.border {
|
|
fill: black;
|
|
}
|
|
|
|
&.waiting {
|
|
.border {
|
|
fill: #aaa;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.edit {
|
|
width:100%;
|
|
|
|
.cardDetailToolbar {
|
|
&.commands {
|
|
div, ul {
|
|
display: none;
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
padding: 13px 20px 13px 42px;
|
|
// height: 52px;
|
|
}
|
|
|
|
.tagEditor {
|
|
padding: $cardViewBasePadding;
|
|
// background-color: cyan;
|
|
flex-wrap: wrap;
|
|
|
|
/* I considered this specific to the card View/Edit page: should it go in tagEditor.scss instead? */
|
|
ul {
|
|
width: calc(100% - 31px);
|
|
flex-wrap: wrap;
|
|
padding-left: 31px;
|
|
|
|
&:before {
|
|
margin-left: -32px;
|
|
}
|
|
|
|
li {
|
|
.tagLabel {
|
|
max-width: 500px; // Hack: length computation breaks when the content is very long
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: pre;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.readOnly {
|
|
ul {
|
|
li {
|
|
display: inline-block;
|
|
max-width: 30%;
|
|
|
|
.tagLabel {
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.readWrite {
|
|
ul {
|
|
li {
|
|
// Uniform size
|
|
/*display: inline-flex;*/
|
|
/*width: 30%;*/
|
|
|
|
// Variable size
|
|
display: inline-block;
|
|
max-width: 30%;
|
|
|
|
.tagLabel {
|
|
width: calc(100% - 30px);
|
|
width: 100%;
|
|
display: inline-block;
|
|
}
|
|
|
|
input {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
&.draggedTouch {
|
|
position: absolute;
|
|
width: 100%;
|
|
background-color: white;
|
|
opacity: .8;
|
|
}
|
|
|
|
.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: $lightRed;
|
|
};
|
|
}
|
|
|
|
|
|
|
|
.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;
|
|
|
|
.dragHandlerContainer {
|
|
width: 40px;
|
|
height: 25px;
|
|
display: block;
|
|
|
|
.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: 21px;
|
|
height: 20px;
|
|
font-size: 15pt;
|
|
margin: $iconMargin;
|
|
|
|
margin-right: 16px;
|
|
|
|
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 {
|
|
height: 115px;
|
|
border-bottom: 3px double #eee;
|
|
cursor: pointer;
|
|
|
|
.fieldGhostShadow {
|
|
// width: 100%;
|
|
|
|
padding-top: 11px;
|
|
padding-bottom: 11px;
|
|
padding-left: 42px;
|
|
padding-right: 49px;
|
|
|
|
// float: left;
|
|
// clear: both;
|
|
|
|
.label {
|
|
background-color: white;
|
|
height: 25px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.value {
|
|
background-color: white;
|
|
height: 58px;
|
|
}
|
|
}
|
|
|
|
.addNewFieldButton {
|
|
margin-top: -90px;
|
|
|
|
width: 70px;
|
|
font-size: 50pt;
|
|
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
|
|
@include icon-font();
|
|
// margin: $iconMargin;
|
|
color: #eee;
|
|
// border-radius: 30px;
|
|
|
|
}
|
|
|
|
&:hover {
|
|
background-color: #f5f5f5;
|
|
|
|
.fieldGhostShadow {
|
|
}
|
|
|
|
.addNewFieldButton {
|
|
color: #7c7;
|
|
}
|
|
};
|
|
|
|
}
|
|
|
|
.cardDirectLogin {
|
|
font-size: 18pt;
|
|
padding: $cardViewBasePadding;
|
|
padding-left: 0px;
|
|
// background-color: pink;
|
|
background-color: $clipperz-orange;
|
|
color: white;
|
|
cursor: pointer;
|
|
|
|
.directLoginLabel {
|
|
padding-left: 42px;
|
|
}
|
|
}
|
|
}
|
|
|
|
//=============================================================================
|
|
|
|
.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);
|
|
bottom: 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;
|
|
|
|
$arrowSize: 5px;
|
|
&:after {
|
|
content:'';
|
|
position:absolute;
|
|
top:100%;
|
|
left:10%;
|
|
margin-left: 0px;
|
|
width:0;
|
|
height:0;
|
|
border-top:$arrowSize solid $passwordBaloonColor;
|
|
border-left:$arrowSize solid transparent;
|
|
border-right:$arrowSize solid transparent;
|
|
}
|
|
|
|
span {
|
|
font-size: 8pt;
|
|
color: #ccc;
|
|
}
|
|
|
|
textarea {
|
|
resize: none;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
width: 100%;
|
|
}
|
|
|
|
.optionsWrapper {
|
|
header {
|
|
height: 30px;
|
|
border-bottom: 1px solid #666;
|
|
|
|
div {
|
|
content: "options";
|
|
@include icon-font();
|
|
text-align: center;
|
|
font-size: 28px;
|
|
line-height: 30px;
|
|
color: #999;
|
|
padding-left: 5px;
|
|
|
|
&:hover {
|
|
color: white;
|
|
}
|
|
};
|
|
}
|
|
|
|
.options {
|
|
// height: inherit;
|
|
// background-color: #888;
|
|
background-color: white;
|
|
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;
|
|
}
|
|
}
|
|
|
|
span {
|
|
color:black;
|
|
}
|
|
|
|
.length {
|
|
padding-top: 2px;
|
|
|
|
span {
|
|
margin-right: 3px;
|
|
|
|
&:after {
|
|
content: ':';
|
|
}
|
|
}
|
|
|
|
input {
|
|
// background-color: #888;
|
|
// color: white;
|
|
|
|
font-weight: bold;
|
|
font-size: 10pt;
|
|
// border: 0px;
|
|
text-align: right;
|
|
max-width: 50px;
|
|
|
|
&::-webkit-outer-spin-button {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.charList {
|
|
padding-top: 2px;
|
|
|
|
span {
|
|
display: inline-block;
|
|
line-height: 10px;
|
|
|
|
&:after {
|
|
content: ':';
|
|
}
|
|
}
|
|
|
|
.charsetSets {
|
|
display: inline-block;
|
|
align: right;
|
|
|
|
label {
|
|
span {
|
|
font-size: 10pt;
|
|
color: black;
|
|
|
|
&:after {
|
|
content: '';
|
|
}
|
|
}
|
|
|
|
padding-right: 5px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
textarea {
|
|
color: gray;
|
|
min-height: 34px;
|
|
border:1px solid black;
|
|
|
|
&:focus {
|
|
outline: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.passwordValue {
|
|
@include flexbox();
|
|
@include flex-direction(row);
|
|
@include align-content(stretch);
|
|
|
|
padding: $passwordBaloonBorder;
|
|
padding-top: 3px;
|
|
padding-right: 0px;
|
|
padding-left: 0;
|
|
|
|
.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();
|
|
font-size: 14pt;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
padding-left: .5em;
|
|
color: #999;
|
|
width: 30px;
|
|
height: inherit;
|
|
line-height: 35px;
|
|
|
|
&.setPasswordValue {
|
|
background-color: lighten($passwordBaloonColor, 5%);
|
|
}
|
|
|
|
&:hover {
|
|
color: white;
|
|
};
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|