435 lines
6.7 KiB
SCSS
435 lines
6.7 KiB
SCSS
$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;
|
|
}
|
|
}
|
|
|
|
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
|
|
|
|
@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: 18pt;
|
|
|
|
padding-top: 0.5em;
|
|
padding-bottom: 0.5em;
|
|
padding-left: $padding;
|
|
padding-right: $padding;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
div.cardList.narrow {
|
|
&.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.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;
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
&.narrow {
|
|
.cardMenuOptions {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
.cardLabel {
|
|
@include user-select(text);
|
|
|
|
font-size: 24pt;
|
|
// width: 100%;
|
|
padding: $cardViewBasePadding;
|
|
// height: 52px;
|
|
// line-height: 32px;
|
|
border: 0px;
|
|
}
|
|
|
|
input.cardLabel {
|
|
width: 100%;
|
|
height: 52px;
|
|
}
|
|
|
|
.tagEditor {
|
|
padding: $cardViewBasePadding;
|
|
// background-color: cyan;
|
|
}
|
|
|
|
.cardNotes {
|
|
padding: $cardViewBasePadding;
|
|
width: 100%;
|
|
border: 0px;
|
|
|
|
font-size: 10pt;
|
|
font-style: italic;
|
|
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
|
|
// background-color: gold;
|
|
}
|
|
|
|
.dropArea {
|
|
// border: 3px dashed red;
|
|
background-color: #ccc;
|
|
width: 100%;
|
|
height: 40px;
|
|
}
|
|
|
|
.cardField {
|
|
@include flexbox;
|
|
@include flex-direction(row);
|
|
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 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;
|
|
cursor: pointer;
|
|
color: #ccc;
|
|
font-size: 20pt;
|
|
|
|
&:hover {
|
|
color: rgb(155, 0, 0);
|
|
};
|
|
}
|
|
|
|
.toggleLock {
|
|
@include align-self(flex-end);
|
|
@include icon-font();
|
|
|
|
display: block;
|
|
margin: $iconMargin;
|
|
margin-left: $iconMargin * 2;
|
|
cursor: pointer;
|
|
color: #ccc;
|
|
font-size: 20pt;
|
|
|
|
&:hover {
|
|
color: #888;
|
|
};
|
|
}
|
|
}
|
|
|
|
.fieldValues {
|
|
@include flex(1);
|
|
padding: $cardViewBasePadding;
|
|
|
|
.fieldLabel {
|
|
color: $labelColor;
|
|
border-bottom: 1px dotted #ddd;
|
|
padding-bottom: 4px;
|
|
margin-bottom: 4px;
|
|
|
|
input {
|
|
font-size: 12pt;
|
|
color: $labelColor;
|
|
border: 0px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.fieldValue {
|
|
font-size: 18pt;
|
|
line-height: 28px;
|
|
@include user-select(text);
|
|
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
|
|
border: 0px;
|
|
width: 100%;
|
|
|
|
&.hidden {
|
|
font-family: clipperz-password;
|
|
font-size: 23pt;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.fieldAction {
|
|
@include flex(none);
|
|
// @include align-self(center);
|
|
@include align-self(flex-start);
|
|
}
|
|
|
|
.action {
|
|
@include icon-font();
|
|
color: #aaa;
|
|
|
|
// width: 32px;
|
|
width: 20px;
|
|
// height: 32px;
|
|
height: 20px;
|
|
// font-size: 20pt;
|
|
font-size: 15pt;
|
|
margin: $iconMargin;
|
|
}
|
|
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|