diff --git a/frontend/delta/css/clipperz.css b/frontend/delta/css/clipperz.css index f57fbe9..67ec84d 100644 --- a/frontend/delta/css/clipperz.css +++ b/frontend/delta/css/clipperz.css @@ -1,26 +1,3 @@ -/* - -Copyright 2008-2013 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/. - -*/ - @charset "UTF-8"; /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 @@ -614,7 +591,7 @@ div.overlay { .mainPage > #selectionPanel { position: fixed; z-index: 20; - overflow-y: auto; + overflow: scroll; -webkit-overflow-scrolling: touch; width: 300px; height: 100%; @@ -635,9 +612,7 @@ div.overlay { -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - min-height: 100%; - overflow-y: auto; - -webkit-overflow-scrolling: touch; } + min-height: 100%; } #selections ul.defaultSet { -webkit-box-flex: none; -webkit-flex: none; @@ -659,7 +634,8 @@ div.overlay { -moz-flex: auto; -ms-flex: auto; flex: auto; - margin-left: 0px; } + margin-left: 0px; + overflow: auto; } #selections .showArchivedCards { -webkit-box-flex: none; -webkit-flex: none; @@ -685,8 +661,7 @@ div.overlay { -moz-box-flex: 300px; -moz-flex: 300px 0; -ms-flex: 300px 0; - flex: 300px 0; - height: 100%; } + flex: 300px 0; } #mainPanel.extra-wide .subpanel.cardContent { -webkit-box-flex: 4; -webkit-flex: 4; @@ -761,7 +736,7 @@ div.overlay { #extraFeaturesPanel { position: fixed; z-index: 20; - overflow-y: auto; + overflow: scroll; -webkit-overflow-scrolling: touch; width: 300px; height: 100%; @@ -888,7 +863,7 @@ div.cardContent { -moz-flex: 1 0; -ms-flex: 1 0; flex: 1 0; - overflow-y: auto; + overflow: auto; z-index: 5; box-shadow: 2px 0 6px 0 rgba(0, 0, 0, 0.1); } div.cardContent div.cardListColumn.column div.cardList { @@ -906,12 +881,22 @@ div.cardContent { -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; - box-shadow: 0 0 50px 20px rgba(255, 255, 255, 0.9); + background-image: -ms-radial-gradient(center, circle farthest-corner, white 0%, transparent 100%); + /* IE10 */ + background-image: -moz-radial-gradient(center, circle farthest-corner, white 0%, transparent 100%); + /* Mozilla Firefox */ + background-image: -o-radial-gradient(center, circle farthest-corner, white 0%, transparent 100%); + /* Opera */ + background-image: -webkit-radial-gradient(center, circle farthest-corner, white 0%, transparent 100%); + /* Webkit (Chrome 11+) */ + background-image: radial-gradient(center, circle farthest-corner, white 0%, transparent 100%); + /* Proposed W3C Markup */ + background-image: -webkit-gradient(radial, center center, 0, center center, 495, color-stop(0, white), color-stop(1, transparent)); + /* Webkit (Safari/Chrome 10) */ position: relative; bottom: 0px; font-size: 75pt; color: #aaa; - background-color: white; width: 100px; height: 100px; float: right; @@ -920,7 +905,7 @@ div.cardContent { margin-bottom: 10px; cursor: pointer; } div.cardContent div.cardListColumn.column div.addCardButton:hover { - color: #1863a1; } + color: green; } div.cardContent div.cardDetail.column { -webkit-box-flex: 2; -webkit-flex: 2; @@ -1002,7 +987,7 @@ div.cardContent { -moz-flex: auto; -ms-flex: auto; flex: auto; - overflow-y: auto; } + overflow: auto; } #cardDetailPage > .view, #cardDetailPage > .editWrapper > .edit { display: -webkit-box; @@ -1058,8 +1043,7 @@ div.cardContent { -moz-box-flex: auto; -moz-flex: auto; -ms-flex: auto; - flex: auto; - overflow-y: auto; } + flex: auto; } .cardDetailToolbar { -webkit-box-flex: none; @@ -1261,7 +1245,7 @@ div.dialogBox { margin: 0px; } #loginPage { - overflow-y: auto; + overflow: scroll; -webkit-overflow-scrolling: touch; } #loginPage div.loginForm { display: -webkit-box; @@ -1467,7 +1451,9 @@ div.dialogBox { #selections { background-color: black; color: white; - font-size: 18pt; } + font-size: 18pt; + overflow: scroll; + -webkit-overflow-scrolling: touch; } #selections ul.defaultSet { font-weight: bold; padding-top: 10px; @@ -1508,50 +1494,58 @@ div.dialogBox { content: "recent"; } #selections ul.defaultSet li.untaggedCards { padding-left: 35px; } - #selections .search form input { - font-family: "clipperz-font"; - color: #999; - font-size: 18pt; - padding: 0px 30px; - margin: 0px 5px; - width: 290px; - vertical-align: middle; } - #selections .search form label { - font-family: 'clipperz-icons'; - -webkit-font-feature-settings: "$foo","$bar"; - -moz-font-feature-settings: "$foo=1, $bar=1"; - -moz-font-feature-settings: "$foo","$bar"; - -ms-font-feature-settings: "$foo","$bar"; - -o-font-feature-settings: "$foo","$bar"; - font-feature-settings: "$foo","$bar"; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; - font-size: 18pt; - padding-left: 5px; - margin-left: -295px; - color: #666; - vertical-align: sub; } - #selections .search form .searchClear { - font-family: 'clipperz-icons'; - -webkit-font-feature-settings: "$foo","$bar"; - -moz-font-feature-settings: "$foo=1, $bar=1"; - -moz-font-feature-settings: "$foo","$bar"; - -ms-font-feature-settings: "$foo","$bar"; - -o-font-feature-settings: "$foo","$bar"; - font-feature-settings: "$foo","$bar"; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - background-color: #aaa; - color: white; - margin-left: 230px; - cursor: pointer; - padding: 5px; - font-size: 10pt; } - #selections .search form .searchClear:hover { - background-color: #666; } + #selections .search form { + padding: 2px; + position: relative; + box-sizing: border-box; + width: 95%; } + #selections .search form input { + font-family: "clipperz-font"; + color: #999; + font-size: 18pt; + padding: 0px 30px; + margin: 0px 5px; + width: 100%; + box-sizing: border-box; } + #selections .search form label { + font-family: 'clipperz-icons'; + -webkit-font-feature-settings: "$foo","$bar"; + -moz-font-feature-settings: "$foo=1, $bar=1"; + -moz-font-feature-settings: "$foo","$bar"; + -ms-font-feature-settings: "$foo","$bar"; + -o-font-feature-settings: "$foo","$bar"; + font-feature-settings: "$foo","$bar"; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + font-size: 18pt; + padding-left: 5px; + position: absolute; + top: 9px; + left: 9px; + color: #666; } + #selections .search form .searchClear { + font-family: 'clipperz-icons'; + -webkit-font-feature-settings: "$foo","$bar"; + -moz-font-feature-settings: "$foo=1, $bar=1"; + -moz-font-feature-settings: "$foo","$bar"; + -ms-font-feature-settings: "$foo","$bar"; + -o-font-feature-settings: "$foo","$bar"; + font-feature-settings: "$foo","$bar"; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; + background-color: #aaa; + color: white; + position: absolute; + right: 9px; + top: 9px; + cursor: pointer; + padding: 5px; + font-size: 10pt; } + #selections .search form .searchClear:hover { + background-color: #666; } #selections .search .searchResultInfo { font-size: 10pt; padding: 2px 6px; @@ -1741,7 +1735,7 @@ div.cardList ul { cursor: pointer; border-bottom: 1px solid #eee; background-color: white; - transition: margin-left 0.3s ease-in-out; + transition: margin-left 0.1s ease-in-out, padding-right 0.1s ease-in-out; white-space: pre-wrap; word-wrap: break-word; display: -webkit-box; @@ -1756,8 +1750,9 @@ div.cardList ul { -ms-flex-direction: row; flex-direction: row; } div.cardList ul li.selected { - margin-left: 50px; - box-shadow: -3px 1px 3px 0 rgba(0, 0, 0, 0.2); } + margin-left: 40px; + padding-right: 0px; + box-shadow: -4px 0px 3px -1px rgba(0, 0, 0, 0.2); } div.cardList ul li.archived { background-color: #eeeeee; color: #999; } @@ -1787,7 +1782,7 @@ div.cardList ul { padding-right: 8px; } div.cardList.narrow { - overflow-y: auto; + overflow: scroll; -webkit-overflow-scrolling: touch; } div.cardList.narrow.loadingCard li.selected:after { color: white; @@ -2125,16 +2120,13 @@ div.dialog { font-weight: bold; padding-bottom: 20px; } div.dialog div.answers div.button { - -webkit-border-radius: 4; - -moz-border-radius: 4; - border-radius: 4; + border: 1px solid black; margin-left: 10px; - padding: 5px 15px; - background-color: #ddd; } + padding: 5px 10px; } div.dialog div.answers div.button.isDefault { font-weight: bold; color: white; - background-color: #666; } + background-color: blue; } body { font-family: "clipperz-font"; @@ -2193,5 +2185,3 @@ This configuration is now located in the first script included in the index_temp } } */ - -/*# sourceMappingURL=clipperz.css.map */ diff --git a/frontend/delta/scss/core/layout.scss b/frontend/delta/scss/core/layout.scss index 68290b5..1f1ffb8 100644 --- a/frontend/delta/scss/core/layout.scss +++ b/frontend/delta/scss/core/layout.scss @@ -21,7 +21,6 @@ @include flexbox(); @include flex-direction(column); min-height: 100%; - @include overflow-scroll; ul.defaultSet { @include flex(none); @@ -34,9 +33,8 @@ ul.tagList { @include flex(auto); margin-left: 0px; - -// min-height: 100%; -// @include overflow-scroll; +// overflow-y: scroll; + overflow:auto; li { // @include flexbox(); @@ -72,9 +70,8 @@ &.selection { @include flex($selectionPanelWidth, 0); - height: 100%; +// height: 100%; // overflow-y: scroll; -// @include overflow-scroll; } &.cardContent { @@ -231,7 +228,7 @@ div.cardContent { div.cardListColumn.column { @include flex($cardListWidth, 0); // overflow-y: scroll; - overflow-y: auto; + overflow:auto; z-index: 5; box-shadow: 2px 0 6px 0 rgba(0,0,0, 0.1); @@ -240,6 +237,7 @@ div.cardContent { } div.cardList { +// overflow-y: scroll; padding-bottom: 120px; ul { @@ -249,15 +247,13 @@ div.cardContent { div.addCardButton { @include icon-font(); @include border-radius(50px); -// @include radial-gradient (white, rgba(0, 0, 0, 0)); - box-shadow: 0 0 50px 20px rgba(255, 255, 255, 0.9); + @include radial-gradient (white, rgba(0, 0, 0, 0)); position: relative; bottom: 0px; font-size: 75pt; // color: blue; color: #aaa; - background-color: white; width: 100px; height: 100px; @@ -271,8 +267,7 @@ div.cardContent { &:hover { // color: $clipperz-orange; - color: $clipperz-blue; -// color: green; + color: green; // color: brown; }; } @@ -325,7 +320,7 @@ div.cardContent { .content { @include flex(auto); // overflow-y: scroll; - overflow-y: auto; + overflow:auto; } } } @@ -374,7 +369,6 @@ div.cardContent { .content { @include flex(auto); // overflow-y: scroll; - overflow-y: auto; } } } diff --git a/frontend/delta/scss/core/mixin.scss b/frontend/delta/scss/core/mixin.scss index de0a1a0..b36956f 100644 --- a/frontend/delta/scss/core/mixin.scss +++ b/frontend/delta/scss/core/mixin.scss @@ -155,8 +155,7 @@ } @mixin overflow-scroll () { -// overflow-y: scroll; - overflow-y: auto; + overflow: scroll; -webkit-overflow-scrolling: touch; } diff --git a/frontend/delta/scss/style/card.scss b/frontend/delta/scss/style/card.scss index 06030fc..b74c3ef 100644 --- a/frontend/delta/scss/style/card.scss +++ b/frontend/delta/scss/style/card.scss @@ -31,7 +31,8 @@ div.cardList { border-bottom: 1px solid #eee; background-color: white; - transition: margin-left 0.3s ease-in-out; + 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; @@ -44,8 +45,9 @@ div.cardList { // background-color: brown; // background-color: $clipperz-blue; // color: white; - margin-left: 50px; - box-shadow: -3px 1px 3px 0 rgba(0, 0, 0, 0.2); + margin-left: 40px; + padding-right: 0px; // prevent new lines on selection + box-shadow: -4px 0px 3px -1px rgba(0, 0, 0, 0.2); } &.archived { @@ -225,8 +227,8 @@ $cardViewBasePadding: 10px; .cardField { &:hover { background-color: #eee; - } - } + } +} } } diff --git a/frontend/delta/scss/style/dialogBox.scss b/frontend/delta/scss/style/dialogBox.scss index b2d8a2d..42b4492 100644 --- a/frontend/delta/scss/style/dialogBox.scss +++ b/frontend/delta/scss/style/dialogBox.scss @@ -14,16 +14,14 @@ div.dialog { div.answers { div.button { - @include border-radius(4); -// border: 1px solid black; + border: 1px solid black; margin-left: 10px; - padding: 5px 15px; - background-color: #ddd; + padding: 5px 10px; &.isDefault { font-weight: bold; color: white; - background-color: #666; + background-color: blue; } } } diff --git a/frontend/delta/scss/style/selectionPanel.scss b/frontend/delta/scss/style/selectionPanel.scss index 28d1eef..21a1733 100644 --- a/frontend/delta/scss/style/selectionPanel.scss +++ b/frontend/delta/scss/style/selectionPanel.scss @@ -2,7 +2,7 @@ background-color: $main-alternate-color; color: $main-alternate-text-color; font-size: 18pt; -// @include overflow-scroll; + @include overflow-scroll; // height: 100%; $iconColumnWidth: 40px; @@ -43,15 +43,19 @@ .search { form { + padding:2px; + position:relative; + box-sizing:border-box; + width:95%; + input { font-family: "clipperz-font"; color: #999; font-size: 18pt; padding: 0px 30px; margin: 0px 5px; -// width: $selectionPanelWidth - $iconColumnWidth - 10px; - width: $selectionPanelWidth - ($spacing * 2); - vertical-align: middle; + width: 100%; + box-sizing:border-box; } label { @@ -59,17 +63,20 @@ font-size: 18pt; padding-left: $spacing; // padding-right:5px; - margin-left: -$selectionPanelWidth + $spacing; + position:absolute; + top:9px; + left:9px; color: #666; - vertical-align: sub; } .searchClear { @include icon-font(); - @include border-radius(4px); + @include border-radius(50%); background-color: #aaa; color: white; - margin-left: $selectionPanelWidth - $iconColumnWidth - 30px; + position:absolute; + right:9px; + top:9px; cursor: pointer; padding: 5px; font-size: 10pt; @@ -138,7 +145,7 @@ padding: 10px; font-size: 12pt; - + input { @include flex(none); } @@ -156,17 +163,17 @@ } } -span.count { - background-color: gray; - font-size: 10pt; + span.count { + background-color: gray; + font-size: 10pt; margin-right: 12px; padding: 3px 5px; - @include border-radius(4px); + @include border-radius(4px); color: white; font-weight: 300; vertical-align: middle; -} + } //$selectionColor: yellow;