mirror of
http://git.whoc.org.uk/git/password-manager.git
synced 2025-10-29 10:27:35 +01:00
Interim synchronization with internal repository
This is an intermir commit to share what is going on with the development of the new /delta version.
This commit is contained in:
Giulio Cesare Solaroli
27
frontend/delta/scss/style/accountStatus.scss
Normal file
27
frontend/delta/scss/style/accountStatus.scss
Normal file
@@ -0,0 +1,27 @@
|
||||
.accountStatus {
|
||||
background-color: green;
|
||||
|
||||
&.FULL {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
|
||||
&.isExpiring {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
|
||||
background-color: yellow;
|
||||
}
|
||||
}
|
||||
|
||||
&.TRIAL {
|
||||
background-color: orange;
|
||||
|
||||
&.isExpiring {
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
|
||||
&.EXPIRED {
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
270
frontend/delta/scss/style/card.scss
Normal file
270
frontend/delta/scss/style/card.scss
Normal file
@@ -0,0 +1,270 @@
|
||||
$cardListHeight: 48px;
|
||||
$faviconSize: 32px;
|
||||
$padding: ($cardListHeight - $faviconSize) / 2;
|
||||
|
||||
$cardToolbarBackgroundColor: brown;
|
||||
|
||||
div.cardList {
|
||||
// background-color: $yellow;
|
||||
|
||||
&.loadingCard {
|
||||
li.selected {
|
||||
background-color: gray;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
li.selected {
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
li {
|
||||
cursor: pointer;
|
||||
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
@include flexbox();
|
||||
@include flex-direction(row);
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$cardViewBasePadding: 10px;
|
||||
|
||||
#cardDetailPage, .cardDetail {
|
||||
.loading {
|
||||
// height: 100%;
|
||||
// width: 100%;
|
||||
// background-color: rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.view {
|
||||
|
||||
.cardDetailToolbar {
|
||||
|
||||
ul {
|
||||
@include flexbox();
|
||||
@include flex-direction(row);
|
||||
|
||||
li {
|
||||
@include flex(auto);
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.narrow {
|
||||
.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;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.cardDetailToolbar {
|
||||
background-color: $cardToolbarBackgroundColor;
|
||||
color: white;
|
||||
|
||||
&.narrow {
|
||||
|
||||
.cardMenuOptions {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.cardLabel {
|
||||
font-size: 24pt;
|
||||
padding: $cardViewBasePadding;
|
||||
}
|
||||
|
||||
.cardTags {
|
||||
@include flexbox();
|
||||
@include flex-direction(row);
|
||||
@include align-items(flex-start);
|
||||
|
||||
padding: $cardViewBasePadding;
|
||||
|
||||
.cardTag {
|
||||
@include flex(none);
|
||||
font-size: 14pt;
|
||||
padding-right: 10px;
|
||||
|
||||
&:before {
|
||||
content: 'tag';
|
||||
@include icon-font();
|
||||
font-size: 10pt;
|
||||
padding-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cardNotes {
|
||||
padding: $cardViewBasePadding;
|
||||
}
|
||||
|
||||
.cardField {
|
||||
@include flexbox;
|
||||
@include flex-direction(row);
|
||||
|
||||
.fieldValues {
|
||||
@include flex(1);
|
||||
padding: $cardViewBasePadding;
|
||||
|
||||
.fieldLabel {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.fieldValue {
|
||||
font-size: 18pt;
|
||||
|
||||
&.hidden {
|
||||
font-family: clipperz-password;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.fieldAction {
|
||||
@include flex(none);
|
||||
@include align-self(center);
|
||||
}
|
||||
|
||||
.action {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
@include icon-font();
|
||||
font-size: 20pt;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.cardDirectLogin {
|
||||
font-size: 18pt;
|
||||
padding: $cardViewBasePadding;
|
||||
background-color: pink;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
32
frontend/delta/scss/style/loadingPage.scss
Normal file
32
frontend/delta/scss/style/loadingPage.scss
Normal file
@@ -0,0 +1,32 @@
|
||||
// $Loading_outer_color: $main-color;
|
||||
// $Loading_inner-color: lighten($Loading_outer-color, 30%);
|
||||
//
|
||||
// $Loading_h1-color: lighten($Loading_inner-color, 70%);
|
||||
// $Loading_h3-color: darken($Loading_outer-color, 20%);
|
||||
|
||||
#loadingPage {
|
||||
// @include radial-gradient($Loading_inner-color, $Loading_outer-color);
|
||||
background-color: $main-color;
|
||||
|
||||
div {
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
font-size: 40pt;
|
||||
font-weight: bold;
|
||||
// color: $Loading_h1-color;
|
||||
color: $main-alternate-text-color;
|
||||
margin-top: 10%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 18pt;
|
||||
// color: $Loading_h3-color;
|
||||
color: $main-text-color;
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
151
frontend/delta/scss/style/loginPage.scss
Normal file
151
frontend/delta/scss/style/loginPage.scss
Normal file
@@ -0,0 +1,151 @@
|
||||
#loginPage {
|
||||
overflow: scroll;
|
||||
|
||||
div.loginForm {
|
||||
@include flexbox;
|
||||
@include flex-direction(column);
|
||||
@include align-items(stretch);
|
||||
|
||||
height: 100%;
|
||||
|
||||
text-align: center;
|
||||
background-color: $main-color;
|
||||
|
||||
header {
|
||||
@include flex(1);
|
||||
@include icon-font();
|
||||
|
||||
font-size: 48pt;
|
||||
color: $main-alternate-text-color;
|
||||
}
|
||||
|
||||
div.form {
|
||||
@include flex(4);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
form {
|
||||
position: relative;
|
||||
background: $main-alternate-text-color;
|
||||
|
||||
// @include border-radius(10px);
|
||||
padding: 20px;
|
||||
margin-bottom: 50px;
|
||||
/*
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
margin-left: 50%;
|
||||
left: -15px;
|
||||
border-style: solid;
|
||||
border-width: 0 15px 15px;
|
||||
border-color: $main-alternate-text-color transparent;
|
||||
display: block;
|
||||
width: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
*/
|
||||
label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input {
|
||||
font-family: "clipperz-font";
|
||||
display: block;
|
||||
// @include border-radius(4px);
|
||||
padding: 5px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 100%;
|
||||
// box-shadow:inset 0 0 0;
|
||||
font-size: 24pt;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: "clipperz-font";
|
||||
min-height: 48px;
|
||||
min-width: 48px;
|
||||
|
||||
color: white;
|
||||
font-size: 24pt;
|
||||
font-weight: 500;
|
||||
border: 0px;
|
||||
|
||||
padding: 10px 25px;
|
||||
|
||||
border: 1px solid white;
|
||||
background-color: $main-color;
|
||||
@include transition(background-color font-weight, 0.2s, linear);
|
||||
|
||||
&:hover {
|
||||
};
|
||||
|
||||
&:disabled {
|
||||
font-weight: 100;
|
||||
background-color: #c0c0c0;
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
div.registrationLink {
|
||||
@include flex(1);
|
||||
|
||||
color: $main-alternate-text-color;
|
||||
background-color: $main-alternate-color;
|
||||
cursor: pointer;
|
||||
font-size: 24pt;
|
||||
|
||||
&:before {
|
||||
content: "> ";
|
||||
};
|
||||
|
||||
a {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
div.loginForm.extra-short {
|
||||
header {
|
||||
// @include flex(1);
|
||||
font-size: 18pt;
|
||||
}
|
||||
|
||||
div.form {
|
||||
// @include flex(6);
|
||||
form {
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
input {
|
||||
padding: 3px;
|
||||
margin-top: 3px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 16pt;
|
||||
}
|
||||
|
||||
button {
|
||||
min-height: 20px;
|
||||
|
||||
font-size: 12pt;
|
||||
padding: 3px 10px;
|
||||
border: 1px solid white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.registrationLink {
|
||||
// @include flex(2);
|
||||
font-size: 14pt;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
111
frontend/delta/scss/style/registrationPage.scss
Normal file
111
frontend/delta/scss/style/registrationPage.scss
Normal file
@@ -0,0 +1,111 @@
|
||||
#registrationPage {
|
||||
background-color: $main-alternate-color;
|
||||
color: $main-alternate-text-color;
|
||||
|
||||
label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input {
|
||||
display: block;
|
||||
border: 1px solid $solarize-Background-92;
|
||||
@include border-radius(6px);
|
||||
padding: 5px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 100%;
|
||||
box-shadow:inset 0 0 0;
|
||||
}
|
||||
|
||||
|
||||
.steps {
|
||||
.step {
|
||||
display: none;
|
||||
|
||||
&.center {
|
||||
display: block;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: $solarize-Accent-Blue;
|
||||
font-size: 24pt;
|
||||
font-weight: 700;
|
||||
margin: 0px;
|
||||
}
|
||||
p {
|
||||
color: $solarize-Content-50;
|
||||
font-size: 14pt;
|
||||
font-weight: 100;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
&.TERMS_OF_SERVICE {
|
||||
.checkboxBlock {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
clear: both;
|
||||
|
||||
input {
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 12pt;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
|
||||
a {
|
||||
color: $solarize-Accent-Red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.stepIndex {
|
||||
text-align: center;
|
||||
.stepIndexItem {
|
||||
font-weight: 900;
|
||||
font-size: 28pt;
|
||||
display: inline;
|
||||
color: lightgrey;
|
||||
|
||||
&.center {
|
||||
color: gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
.buttons {
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
|
||||
.button {
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
|
||||
font-weight: 900;
|
||||
line-height: 45px;
|
||||
font-size: 24px;
|
||||
|
||||
&.back {
|
||||
|
||||
background-color: lightgrey;
|
||||
|
||||
// &.step_-1 {
|
||||
// visibility: hidden;
|
||||
// }
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background-color: #c0c0c0;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
69
frontend/delta/scss/style/selectionPanel.scss
Normal file
69
frontend/delta/scss/style/selectionPanel.scss
Normal file
@@ -0,0 +1,69 @@
|
||||
#selections {
|
||||
background-color: $main-alternate-color;
|
||||
color: $main-alternate-text-color;
|
||||
font-size: 18pt;
|
||||
overflow: scroll;
|
||||
height: 100%;
|
||||
|
||||
$iconColumnWidth: 40px;
|
||||
|
||||
ul.defaultSet {
|
||||
font-weight: bold;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
|
||||
li {
|
||||
&.allCards:before {
|
||||
content: "clipperz";
|
||||
}
|
||||
|
||||
&.recentCards:before {
|
||||
content: "recent";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
label {
|
||||
@include icon-font();
|
||||
font-size: 18pt;
|
||||
padding-left: 5px;
|
||||
padding-right:5px;
|
||||
}
|
||||
|
||||
input {
|
||||
font-family: "clipperz-font";
|
||||
color: #999;
|
||||
font-size: 18pt;
|
||||
width: $selectionPanelWidth - $iconColumnWidth - 10px;
|
||||
}
|
||||
}
|
||||
|
||||
ul.tagList {
|
||||
padding-top: 10px;
|
||||
|
||||
li {
|
||||
&:before {
|
||||
content: "tag";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
padding-left: 35px;
|
||||
text-indent: -35px;
|
||||
|
||||
padding-top: 7px;
|
||||
padding-bottom: 7px;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&:before {
|
||||
@include icon-font();
|
||||
font-weight: normal;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
font-size: 14pt;
|
||||
}
|
||||
}
|
||||
}
|
||||
19
frontend/delta/scss/style/settingsPanel.scss
Normal file
19
frontend/delta/scss/style/settingsPanel.scss
Normal file
@@ -0,0 +1,19 @@
|
||||
#extraFeaturesPanel {
|
||||
background-color: $main-alternate-color;
|
||||
color: $main-alternate-text-color;
|
||||
|
||||
header {
|
||||
text-align: right;
|
||||
height: 48px;
|
||||
font-size: 24pt;
|
||||
|
||||
.button {
|
||||
@include icon-font();
|
||||
|
||||
.label {
|
||||
padding-top: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user