web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Creation page with mobile support

Browse Source
This commit is contained in:
yflory
2017-12-11 12:19:44 +01:00
parent e96d54e655
commit 1922dbfd75
5 changed files with 280 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
customize.dist/src/less2/include/creation.less
View File

@@ -1,35 +1,146 @@
@import (once) "./colortheme-all.less";
@import (once) "./tools.less";
.creation_main() {
#cp-creation {
position: fixed;
z-index: 10000000; // #loading
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
.tippy-popper {
z-index: 100000001 !important;
}
#cp-creation-container {
//position: fixed;
z-index: 100000000; // #loading * 10
//top: 0px;
//bottom: 0px;
//left: 0px;
//right: 0px;
background: @colortheme_loading-bg;
color: @colortheme_loading-color;
text-align: center;
font-size: 1.5em;
.cp-loading-container {
margin-top: 50vh;
transform: translateY(-50%);
display: flex;
align-items: center;
width: 100%;
height: 100%;
overflow: auto;
@media screen and (max-height: 600px), screen and (max-width: 500px) {
align-items: baseline;
}
.cp-loading-cryptofist {
margin-left: auto;
margin-right: auto;
height: 300px;
margin-bottom: 2em;
@media screen and (max-height: @browser_media-short-screen) {
display: none;
}
#cp-creation {
text-align: center;
font: @colortheme_app-font;
width: 100%;
& > div {
width: 60vw;
max-width: 100%;
margin: 40px auto;
text-align: left;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
h2, p {
width: 100%;
}
h2 {
display: flex;
justify-content: space-between;
.cp-creation-help {
display: none;
}
}
@media screen and (max-width: 500px) {
width: ~"calc(100% - 30px)";
}
@media screen and (max-height: 600px), screen and (max-width: 500px) {
h2 .cp-creation-help {
display: inline;
}
p {
display: none;
}
}
@media screen and (min-height: 601px) {
@media screen and (min-width: 501px) {
p {
display: block !important;
}
}
}
}
.cp-loading-spinner-container {
position: relative;
height: 100px;
> div {
height: 100px;
.cp-creation-create{
button {
.tools_unselectable();
padding: 15px;
background: darken(@colortheme_loading-bg, 10%);
color: @colortheme_loading-color;
margin: 3px 10px;
border: none;
cursor: pointer;
&:hover {
background: darken(@colortheme_loading-bg, 5%);
}
}
}
input[type="radio"] {
display: none;
&:checked {
& + label {
font-weight: bold;
background-color: lighten(@colortheme_loading-bg, 20%);
cursor: default;
border: 1px solid #c1158e;
&:hover {
background-color: lighten(@colortheme_loading-bg, 20%);
}
}
}
}
input[type="radio"] + label {
.tools_unselectable();
padding: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 200px;
height: 50px;
padding: 5px;
margin: 0 20px;
border: 1px solid @colortheme_loading-color;
cursor: pointer;
&:hover {
background-color: lighten(@colortheme_loading-bg, 10%);
}
}
.cp-creation-expire {
#cp-creation-expire-true {
display: none;
&:checked {
& + label {
height: 100px;
.cp-creation-expire-picker {
display: inline;
}
}
}
}
label[for="cp-creation-expire-true"] {
flex-wrap: wrap;
.cp-creation-expire-picker {
display: none;
}
input {
width: 70px;
}
select {
width: 100px;
}
input, select {
border: none;
height: 30px;
background: @colortheme_loading-bg;
color: @colortheme_loading-color;
border-radius: 3px;
}
}
}
}