Merge branch 'staging' of github.com:xwiki-labs/cryptpad into staging
commit
1c526feffb
|
@ -39,6 +39,7 @@
|
|||
"require-css": "0.1.10",
|
||||
"less": "^2.7.2",
|
||||
"bootstrap": "#v4.0.0-alpha.6",
|
||||
"diff-dom": "2.1.1"
|
||||
"diff-dom": "2.1.1",
|
||||
"open-sans-fontface": "^1.4.2"
|
||||
}
|
||||
}
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 17 KiB |
|
@ -0,0 +1,133 @@
|
|||
/* Open Sans @font-face kit */
|
||||
|
||||
@OpenSansPath: "/bower_components/open-sans-fontface/fonts";
|
||||
|
||||
/* BEGIN Light */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url('@{OpenSansPath}/Light/OpenSans-Light.eot');
|
||||
src: url('@{OpenSansPath}/Light/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
|
||||
url('@{OpenSansPath}/Light/OpenSans-Light.woff') format('woff'),
|
||||
url('@{OpenSansPath}/Light/OpenSans-Light.ttf') format('truetype'),
|
||||
url('@{OpenSansPath}/Light/OpenSans-Light.svg#OpenSansLight') format('svg');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
/* END Light */
|
||||
|
||||
/* BEGIN Light Italic */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url('@{OpenSansPath}/LightItalic/OpenSans-LightItalic.eot');
|
||||
src: url('@{OpenSansPath}/LightItalic/OpenSans-LightItalic.eot?#iefix') format('embedded-opentype'),
|
||||
url('@{OpenSansPath}/LightItalic/OpenSans-LightItalic.woff') format('woff'),
|
||||
url('@{OpenSansPath}/LightItalic/OpenSans-LightItalic.ttf') format('truetype'),
|
||||
url('@{OpenSansPath}/LightItalic/OpenSans-LightItalic.svg#OpenSansLightItalic') format('svg');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}
|
||||
/* END Light Italic */
|
||||
|
||||
/* BEGIN Regular */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url('@{OpenSansPath}/Regular/OpenSans-Regular.eot');
|
||||
src: url('@{OpenSansPath}/Regular/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
|
||||
url('@{OpenSansPath}/Regular/OpenSans-Regular.woff') format('woff'),
|
||||
url('@{OpenSansPath}/Regular/OpenSans-Regular.ttf') format('truetype'),
|
||||
url('@{OpenSansPath}/Regular/OpenSans-Regular.svg#OpenSansRegular') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
/* END Regular */
|
||||
|
||||
/* BEGIN Italic */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url('@{OpenSansPath}/Italic/OpenSans-Italic.eot');
|
||||
src: url('@{OpenSansPath}/Italic/OpenSans-Italic.eot?#iefix') format('embedded-opentype'),
|
||||
url('@{OpenSansPath}/Italic/OpenSans-Italic.woff') format('woff'),
|
||||
url('@{OpenSansPath}/Italic/OpenSans-Italic.ttf') format('truetype'),
|
||||
url('@{OpenSansPath}/Italic/OpenSans-Italic.svg#OpenSansItalic') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
/* END Italic */
|
||||
|
||||
/* BEGIN Semibold */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url('@{OpenSansPath}/Semibold/OpenSans-Semibold.eot');
|
||||
src: url('@{OpenSansPath}/Semibold/OpenSans-Semibold.eot?#iefix') format('embedded-opentype'),
|
||||
url('@{OpenSansPath}/Semibold/OpenSans-Semibold.woff') format('woff'),
|
||||
url('@{OpenSansPath}/Semibold/OpenSans-Semibold.ttf') format('truetype'),
|
||||
url('@{OpenSansPath}/Semibold/OpenSans-Semibold.svg#OpenSansSemibold') format('svg');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
/* END Semibold */
|
||||
|
||||
/* BEGIN Semibold Italic */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url('@{OpenSansPath}/SemiboldItalic/OpenSans-SemiboldItalic.eot');
|
||||
src: url('@{OpenSansPath}/SemiboldItalic/OpenSans-SemiboldItalic.eot?#iefix') format('embedded-opentype'),
|
||||
url('@{OpenSansPath}/SemiboldItalic/OpenSans-SemiboldItalic.woff') format('woff'),
|
||||
url('@{OpenSansPath}/SemiboldItalic/OpenSans-SemiboldItalic.ttf') format('truetype'),
|
||||
url('@{OpenSansPath}/SemiboldItalic/OpenSans-SemiboldItalic.svg#OpenSansSemiboldItalic') format('svg');
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
/* END Semibold Italic */
|
||||
|
||||
/* BEGIN Bold */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url('@{OpenSansPath}/Bold/OpenSans-Bold.eot');
|
||||
src: url('@{OpenSansPath}/Bold/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
|
||||
url('@{OpenSansPath}/Bold/OpenSans-Bold.woff') format('woff'),
|
||||
url('@{OpenSansPath}/Bold/OpenSans-Bold.ttf') format('truetype'),
|
||||
url('@{OpenSansPath}/Bold/OpenSans-Bold.svg#OpenSansBold') format('svg');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
/* END Bold */
|
||||
|
||||
/* BEGIN Bold Italic */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url('@{OpenSansPath}/BoldItalic/OpenSans-BoldItalic.eot');
|
||||
src: url('@{OpenSansPath}/BoldItalic/OpenSans-BoldItalic.eot?#iefix') format('embedded-opentype'),
|
||||
url('@{OpenSansPath}/BoldItalic/OpenSans-BoldItalic.woff') format('woff'),
|
||||
url('@{OpenSansPath}/BoldItalic/OpenSans-BoldItalic.ttf') format('truetype'),
|
||||
url('@{OpenSansPath}/BoldItalic/OpenSans-BoldItalic.svg#OpenSansBoldItalic') format('svg');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
/* END Bold Italic */
|
||||
|
||||
/* BEGIN Extrabold */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url('@{OpenSansPath}/ExtraBold/OpenSans-ExtraBold.eot');
|
||||
src: url('@{OpenSansPath}/ExtraBold/OpenSans-ExtraBold.eot?#iefix') format('embedded-opentype'),
|
||||
url('@{OpenSansPath}/ExtraBold/OpenSans-ExtraBold.woff') format('woff'),
|
||||
url('@{OpenSansPath}/ExtraBold/OpenSans-ExtraBold.ttf') format('truetype'),
|
||||
url('@{OpenSansPath}/ExtraBold/OpenSans-ExtraBold.svg#OpenSansExtrabold') format('svg');
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
}
|
||||
/* END Extrabold */
|
||||
|
||||
/* BEGIN Extrabold Italic */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url('@{OpenSansPath}/ExtraBoldItalic/OpenSans-ExtraBoldItalic.eot');
|
||||
src: url('@{OpenSansPath}/ExtraBoldItalic/OpenSans-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
|
||||
url('@{OpenSansPath}/ExtraBoldItalic/OpenSans-ExtraBoldItalic.woff') format('woff'),
|
||||
url('@{OpenSansPath}/ExtraBoldItalic/OpenSans-ExtraBoldItalic.ttf') format('truetype'),
|
||||
url('@{OpenSansPath}/ExtraBoldItalic/OpenSans-ExtraBoldItalic.svg#OpenSansExtraboldItalic') format('svg');
|
||||
font-weight: 800;
|
||||
font-style: italic;
|
||||
}
|
||||
/* END Extrabold Italic */
|
Binary file not shown.
After Width: | Height: | Size: 9.6 KiB |
|
@ -14,7 +14,7 @@ define([
|
|||
};
|
||||
|
||||
var footerCol = function (title, L, literal) {
|
||||
return h('div.col', [
|
||||
return h('div.col-6.col-sm-3', [
|
||||
h('ul.list-unstyled', [
|
||||
h('li.footer-title', {
|
||||
'data-localization': title,
|
||||
|
@ -46,10 +46,13 @@ define([
|
|||
h('div.container', [
|
||||
h('div.row', [
|
||||
footerCol(null, [
|
||||
setHTML(h('div.cp-bio-foot'), '<p>With CryptPad, you can make quick collaborative documents for taking notes and writing down ideas together.</p>'),
|
||||
], ''),
|
||||
/* footerCol(null, [
|
||||
footLink('/about.html', 'about'),
|
||||
footLink('/terms.html', 'terms'),
|
||||
footLink('/privacy.html', 'privacy'),
|
||||
], 'CryptPad'),
|
||||
], 'CryptPad'),*/
|
||||
footerCol('footer_applications', [
|
||||
footLink('/drive/', 'main_drive'),
|
||||
footLink('/pad/', 'main_richText'),
|
||||
|
@ -109,13 +112,21 @@ define([
|
|||
Pages['/about.html'] = function () {
|
||||
return h('div#cp-main', [
|
||||
infopageTopbar(),
|
||||
h('div.container-fluid.cp-about-intro', [
|
||||
h('div.container', [
|
||||
h('center', [
|
||||
h('h1', Msg.about),
|
||||
setHTML(h('p'), 'CryptPad is created inside of the Research Team at <a href="http://xwiki.com">XWiki SAS</a>, a small business located in Paris France and Iasi Romania. There are 3 core team members working on CryptPad plus a number of contributors both inside and outside of XWiki SAS.'),
|
||||
]),
|
||||
]),
|
||||
]),
|
||||
h('div.container.cp-container', [
|
||||
h('center', [
|
||||
/*h('center', [
|
||||
h('h1', Msg.about)
|
||||
]),
|
||||
setHTML(h('p'), 'CryptPad is created inside of the Research Team at <a href="http://xwiki.com">XWiki SAS</a>, a small business located in Paris France and Iasi Romania. There are 3 core team members working on CryptPad plus a number of contributors both inside and outside of XWiki SAS.'),
|
||||
h('h2', 'Core Developers'),
|
||||
setHTML(h('p'), 'CryptPad is created inside of the Research Team at <a href="http://xwiki.com">XWiki SAS</a>, a small business located in Paris France and Iasi Romania. There are 3 core team members working on CryptPad plus a number of contributors both inside and outside of XWiki SAS.'),*/
|
||||
h('div.row', [
|
||||
h('h2.col-12', 'Core Developers'),
|
||||
h('div.col-md-4', [
|
||||
h('img.bio-avatar', {'src': '/customize/images/aaron.jpg'}),
|
||||
h('h3', "Aaron MacSween"),
|
||||
|
@ -427,33 +438,43 @@ define([
|
|||
display: 'block',
|
||||
}
|
||||
}, [
|
||||
h('button#clear', Msg.canvas_clear), ' ',
|
||||
h('button#toggleDraw', Msg.canvas_disable),
|
||||
h('button#delete', {
|
||||
h('button#clear.btn.btn-danger', Msg.canvas_clear), ' ',
|
||||
h('button#toggleDraw.btn.btn-secondary', Msg.canvas_disable),
|
||||
h('button#delete.btn.btn-secondary', {
|
||||
style: {
|
||||
display: 'none',
|
||||
}
|
||||
}),
|
||||
h('input#width', {
|
||||
type: 'range',
|
||||
value: "5",
|
||||
min: "1",
|
||||
max: "100"
|
||||
}),
|
||||
h('label', {
|
||||
'for': 'width'
|
||||
}, Msg.canvas_width),
|
||||
h('input#opacity', {
|
||||
type: 'range',
|
||||
value: "1",
|
||||
min: "0.1",
|
||||
max: "1",
|
||||
step: "0.1"
|
||||
}),
|
||||
h('label', {
|
||||
'for': 'width',
|
||||
}),
|
||||
h('span.selected')
|
||||
}, Msg.canvas_delete),
|
||||
h('div.range-group', [
|
||||
h('label', {
|
||||
'for': 'width'
|
||||
}, Msg.canvas_width),
|
||||
h('input#width', {
|
||||
type: 'range',
|
||||
value: "5",
|
||||
min: "1",
|
||||
max: "100"
|
||||
}),
|
||||
h('span#width-val', '5px')
|
||||
]),
|
||||
h('div.range-group', [
|
||||
h('label', {
|
||||
'for': 'opacity',
|
||||
}, Msg.canvas_opacity),
|
||||
h('input#opacity', {
|
||||
type: 'range',
|
||||
value: "1",
|
||||
min: "0.1",
|
||||
max: "1",
|
||||
step: "0.1"
|
||||
}),
|
||||
h('span#opacity-val', '100%')
|
||||
]),
|
||||
h('span.selected', [
|
||||
h('img', {
|
||||
title: Msg.canvas_currentBrush
|
||||
})
|
||||
])
|
||||
]),
|
||||
setHTML(h('div#colors'), ' '),
|
||||
loadingScreen(),
|
||||
|
@ -480,16 +501,15 @@ define([
|
|||
h('p', Msg.poll_p_encryption)
|
||||
]),
|
||||
h('div.upper', [
|
||||
h('button#publish', {
|
||||
h('button#publish.btn.btn-success', {
|
||||
style: { display: 'none' }
|
||||
}, Msg.poll_publish_button),
|
||||
h('button#admin', {
|
||||
h('button#admin.btn.btn-primary', {
|
||||
style: { display: 'none' },
|
||||
title: Msg.poll_admin_button
|
||||
}, Msg.poll_admin_button),
|
||||
h('button#help', {
|
||||
title: Msg.poll_show_help_button,
|
||||
style: { display: 'none' }
|
||||
h('button#help.btn.btn-secondary', {
|
||||
title: Msg.poll_show_help_button
|
||||
}, Msg.poll_show_help_button)
|
||||
]),
|
||||
h('div.realtime', [
|
||||
|
@ -504,13 +524,13 @@ define([
|
|||
]),
|
||||
h('div#tableContainer', [
|
||||
h('div#tableScroll'),
|
||||
h('button#create-user', {
|
||||
h('button#create-user.btn.btn-secondary', {
|
||||
title: Msg.poll_create_user
|
||||
}, h('span.fa.fa-plus')),
|
||||
h('button#create-option', {
|
||||
h('button#create-option.btn.btn-secondary', {
|
||||
title: Msg.poll_create_option
|
||||
}, h('span.fa.fa-plus')),
|
||||
h('button#commit', {
|
||||
h('button#commit.btn.btn-secondary', {
|
||||
title: Msg.poll_commit
|
||||
}, h('span.fa.fa-check'))
|
||||
])
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
|
||||
@import "../less2/include/alertify.less";
|
||||
@import "../less2/include/colortheme.less";
|
||||
@import "../less2/include/modal.less";
|
||||
@import "./bar.less";
|
||||
@import "./loading.less";
|
||||
@import "./dropdown.less";
|
||||
|
@ -633,29 +634,29 @@ noscript {
|
|||
|
||||
/* Upload status table */
|
||||
#uploadStatusContainer {
|
||||
.modal_base();
|
||||
position: absolute;
|
||||
left: 10vw; right: 10vw;
|
||||
bottom: 100px;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
color: white;
|
||||
opacity: 0.7;
|
||||
bottom: 10vh;
|
||||
opacity: 0.9;
|
||||
box-sizing: border-box;
|
||||
z-index:10000;
|
||||
z-index: 10000;
|
||||
display: none;
|
||||
font-family: @colortheme_font;
|
||||
#uploadStatus {
|
||||
width: 80vw;
|
||||
border: 1px solid black;
|
||||
border-collapse: collapse;
|
||||
tr:nth-child(1) {
|
||||
background-color: #888;
|
||||
border: 1px solid #999;
|
||||
td { text-align: center; }
|
||||
background-color: darken(@colortheme_modal-bg, 20%);
|
||||
td {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
padding: 0.25em;
|
||||
}
|
||||
}
|
||||
@upload_pad_h: 0.25em;
|
||||
@upload_pad_v: 0.5em;
|
||||
|
||||
td {
|
||||
border-left: 1px solid #BBB;
|
||||
border-right: 1px solid #BBB;
|
||||
padding: 0 10px;
|
||||
padding: @upload_pad_h @upload_pad_v;
|
||||
}
|
||||
.upProgress {
|
||||
width: 200px;
|
||||
|
@ -666,9 +667,10 @@ noscript {
|
|||
.progressContainer {
|
||||
position: absolute;
|
||||
width: 0px;
|
||||
left: 5px;
|
||||
top: 1px; bottom: 1px;
|
||||
left: @upload_pad_v;
|
||||
top: @upload_pad_h; bottom: @upload_pad_h;
|
||||
background-color: rgba(0,0,255,0.3);
|
||||
z-index: -1;
|
||||
}
|
||||
.upCancel { text-align: center; }
|
||||
.fa.cancel {
|
||||
|
|
|
@ -114,8 +114,7 @@
|
|||
text-align: left;
|
||||
padding: @alertify_padding-base;
|
||||
background: #fff;
|
||||
// FIXME
|
||||
box-shadow: 0 2px 4px -1px rgba(0,0,0,.14), 0 4px 5px 0 rgba(0,0,0,.098), 0 1px 10px 0 rgba(0,0,0,.084);
|
||||
box-shadow: @alertify_box-shadow;
|
||||
}
|
||||
|
||||
.msg {
|
||||
|
|
|
@ -15,6 +15,8 @@
|
|||
|
||||
@colortheme_modal-bg: #222;
|
||||
@colortheme_modal-fg: #fff;
|
||||
@colortheme_modal-link: #eee;
|
||||
@colortheme_modal-link-visited: lighten(@colortheme_modal-link, 10%);
|
||||
@colortheme_modal-dim: rgba(0, 0, 0, 0.4);
|
||||
@colortheme_modal-padding: 12px;
|
||||
@colortheme_modal-shadow: 0 8px 32px 0 rgba(0,0,0,.4);
|
||||
|
|
|
@ -74,7 +74,7 @@
|
|||
}
|
||||
|
||||
footer {
|
||||
background-color: @cryptpad_color_grey;
|
||||
background-color: @cryptpad_color_blue;
|
||||
.container {
|
||||
.col {
|
||||
margin-top: 1em;
|
||||
|
@ -82,20 +82,33 @@
|
|||
a {
|
||||
color: #fff;
|
||||
&:visited {
|
||||
color: darken(#fff, 20%);
|
||||
color: darken(#fff, 10%);
|
||||
};
|
||||
}
|
||||
margin-bottom: 1em;
|
||||
ul.list-unstyled {
|
||||
margin: 0;
|
||||
margin-top: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.cp-bio-foot {
|
||||
background-image: url(/customize/CryptPad-white-logo.svg);
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
p {
|
||||
color: #fff;
|
||||
padding-top: 30%;
|
||||
margin-bottom: 0;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
.cp-version-footer {
|
||||
background-color: #6C6C6C;
|
||||
background-color: @cryptpad_color_blue;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 0.5em;
|
||||
border-top: 2px solid #fff;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
@ -0,0 +1,17 @@
|
|||
@import (once) "./colortheme.less";
|
||||
|
||||
.modal_base() {
|
||||
font-family: @colortheme_font;
|
||||
|
||||
background-color: @colortheme_modal-bg;
|
||||
color: @colortheme_modal-fg;
|
||||
box-shadow: @colortheme_modal-shadow;
|
||||
|
||||
a {
|
||||
color: @colortheme_modal-link;
|
||||
|
||||
&:visited {
|
||||
color: @colortheme_modal-link-visited;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -2,6 +2,8 @@
|
|||
font-family: Neuropolitical;
|
||||
src: url(./customize/fonts/neuropolitical.ttf)
|
||||
}
|
||||
@import (once) '/customize/fonts/open-sans.less';
|
||||
|
||||
body.cp-page-index { @import "./pages/page-index.less"; }
|
||||
body.cp-page-contact { @import "./pages/page-contact.less"; }
|
||||
body.cp-page-login { @import "./pages/page-login.less"; }
|
||||
|
|
|
@ -9,4 +9,27 @@
|
|||
margin: 1em 0;
|
||||
max-width: 300px;
|
||||
max-height: 300px;
|
||||
}
|
||||
.cp-about-intro {
|
||||
padding-top: 3em;
|
||||
padding-bottom: 3em;
|
||||
background-image: url(/customize/bkabout.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
.container {
|
||||
color: #fff;
|
||||
font-family: "Open Sans";
|
||||
h1 {
|
||||
font-weight: bold;
|
||||
}
|
||||
a {
|
||||
color: #fff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
p {
|
||||
padding-top: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
|
@ -291,7 +291,7 @@ define(function () {
|
|||
out.blog = "Blog";
|
||||
|
||||
out.initialState = [
|
||||
'<span style="font-size:18px;"><p>',
|
||||
'<p>',
|
||||
'Esto es <strong>CryptPad</strong>, el editor colaborativo en tiempo real Zero Knowledge. Todo está guardado cuando escribes.',
|
||||
'<br>',
|
||||
'Comparte el enlace a este pad para editar con amigos o utiliza el botón <span class="fa fa-share-alt" style="border: 1px solid black;color:#000;"> Compartir </span> para obtener un <em>enlace sólo lectura</em> que permite leer pero no escribir.',
|
||||
|
@ -299,7 +299,7 @@ define(function () {
|
|||
|
||||
'<p><em>',
|
||||
'Vamos, empieza a escribir...',
|
||||
'</em></p></span>',
|
||||
'</em></p>',
|
||||
'<p> <br></p>'
|
||||
].join('');
|
||||
|
||||
|
|
|
@ -566,7 +566,7 @@ define(function () {
|
|||
// Initial states
|
||||
|
||||
out.initialState = [
|
||||
'<span style="font-size:16px;"><p>',
|
||||
'<p>',
|
||||
'Voici <strong>CryptPad</strong>, l\'éditeur collaboratif en temps-réel Zero Knowledge. Tout est sauvegardé dés que vous le tapez.',
|
||||
'<br>',
|
||||
'Partagez le lien vers ce pad avec des amis ou utilisez le bouton <span class="fa fa-share-alt" style="border: 1px solid black;color:#000;"> Partager </span> pour obtenir le <em>lien de lecture-seule</em>, qui permet la lecture mais non la modification.',
|
||||
|
@ -574,7 +574,7 @@ define(function () {
|
|||
'<p>',
|
||||
'<em>',
|
||||
'Lancez-vous, commencez à taper...',
|
||||
'</em></p></span>',
|
||||
'</em></p>',
|
||||
'<p> <br></p>'
|
||||
].join('');
|
||||
|
||||
|
|
|
@ -118,6 +118,10 @@ define(function () {
|
|||
out.shareButton = 'Share';
|
||||
out.shareSuccess = 'Copied link to clipboard';
|
||||
|
||||
out.userListButton = "User list";
|
||||
|
||||
out.userAccountButton = "Your account";
|
||||
|
||||
out.newButton = 'New';
|
||||
out.newButtonTitle = 'Create a new pad';
|
||||
out.uploadButton = 'Upload files';
|
||||
|
@ -244,9 +248,11 @@ define(function () {
|
|||
out.canvas_enable = "Enable draw";
|
||||
out.canvas_width = "Width";
|
||||
out.canvas_opacity = "Opacity";
|
||||
out.canvas_opacityLabel = "opacity: {0}";
|
||||
out.canvas_opacityLabel = "Opacity: {0}";
|
||||
out.canvas_widthLabel = "Width: {0}";
|
||||
out.canvas_saveToDrive = "Save this image as a file in your CryptDrive";
|
||||
out.canvas_currentBrush = "Current brush";
|
||||
out.canvas_chooseColor = "Choose a color";
|
||||
|
||||
// Profile
|
||||
out.profileButton = "Profile"; // dropdown menu
|
||||
|
@ -343,6 +349,8 @@ define(function () {
|
|||
out.fm_backup_title = 'Backup link';
|
||||
out.fm_nameFile = 'How would you like to name that file?';
|
||||
out.fm_error_cantPin = "Internal server error. Please reload the page and try again.";
|
||||
out.fm_viewListButton = "List view";
|
||||
out.fm_viewGridButton = "Grid view";
|
||||
// File - Context menu
|
||||
out.fc_newfolder = "New folder";
|
||||
out.fc_rename = "Rename";
|
||||
|
@ -483,6 +491,10 @@ define(function () {
|
|||
out.todo_markAsIncompleteTitle = "Mark this task as incomplete";
|
||||
out.todo_removeTaskTitle = "Remove this task from your todo list";
|
||||
|
||||
// pad
|
||||
out.pad_showToolbar = "Show toolbar";
|
||||
out.pad_hideToolbar = "Hide toolbar";
|
||||
|
||||
// general warnings
|
||||
out.warn_notPinned = "This pad is not in anyone's CryptDrive. It will expire after 3 months. <a href='/about.html#pinning'>Learn more...</a>";
|
||||
|
||||
|
@ -599,11 +611,12 @@ define(function () {
|
|||
out.header_support = '<a href="http://ng.open-paas.org/" title="OpenPaaS::ng" target="_blank" rel="noopener noreferrer"> <img src="/customize/openpaasng.png" alt="OpenPaaS-ng" class="bottom-bar-openpaas" /></a>';
|
||||
out.updated_0_header_logoTitle = 'Go to your CryptDrive';
|
||||
out.header_logoTitle = out.updated_0_header_logoTitle;
|
||||
out.header_homeTitle = 'Go to CryptPad homepage';
|
||||
|
||||
// Initial states
|
||||
|
||||
out.initialState = [
|
||||
'<span style="font-size:16px;"><p>',
|
||||
'<p>',
|
||||
'This is <strong>CryptPad</strong>, the Zero Knowledge realtime collaborative editor. Everything is saved as you type.',
|
||||
'<br>',
|
||||
'Share the link to this pad to edit with friends or use the <span class="fa fa-share-alt" style="border: 1px solid black;color:#000;"> Share </span> button to share a <em>read-only link</em> which allows viewing but not editing.',
|
||||
|
@ -611,7 +624,7 @@ define(function () {
|
|||
|
||||
'<p><em>',
|
||||
'Go ahead, just start typing...',
|
||||
'</em></p></span>',
|
||||
'</em></p>',
|
||||
'<p> <br></p>'
|
||||
].join('');
|
||||
|
||||
|
|
|
@ -484,7 +484,7 @@ define(function () {
|
|||
// Initial states
|
||||
|
||||
out.initialState = [
|
||||
'<span style="font-size:16px;"><p>',
|
||||
'<p>',
|
||||
'This is <strong>CryptPad</strong>, the Zero Knowledge realtime collaborative editor. Everything is saved as you type.',
|
||||
'<br>',
|
||||
'Share the link to this pad to edit with friends or use the <span style="background-color:#5cb85c;color:#ffffff;"> Share </span> button to share a <em>read-only link</em> which allows viewing but not editing.',
|
||||
|
@ -492,7 +492,7 @@ define(function () {
|
|||
|
||||
'<p><span style="color:#808080;"><em>',
|
||||
'Go ahead, just start typing...',
|
||||
'</em></span></p></span>',
|
||||
'</em></span></p>',
|
||||
'<p> <br></p>'
|
||||
].join('');
|
||||
|
||||
|
|
|
@ -331,7 +331,7 @@ define(function () {
|
|||
out.header_france = "<a href=\"http://www.xwiki.com/\" target=\"_blank\" rel=\"noopener noreferrer\">With <img class=\"bottom-bar-heart\" src=\"/customize/heart.png\" alt=\"love\" /> from <img class=\"bottom-bar-fr\" src=\"/customize/fr.png\" title=\"Franța\" alt=\"Franța\"/> by <img src=\"/customize/logo-xwiki.png\" alt=\"XWiki SAS\" class=\"bottom-bar-xwiki\"/></a>";
|
||||
out.header_support = "<a href=\"http://ng.open-paas.org/\" title=\"OpenPaaS::ng\" target=\"_blank\" rel=\"noopener noreferrer\"> <img src=\"/customize/openpaasng.png\" alt=\"OpenPaaS-ng\" class=\"bottom-bar-openpaas\" /></a>";
|
||||
out.header_logoTitle = "Mergi la pagina principală";
|
||||
out.initialState = "<span style=\"font-size:16px;\"><p>Acesta este <strong>CryptPad</strong>, editorul colaborativ bazat pe tehnologia Zero Knowledge în timp real. Totul este salvat pe măsură ce scrii.<br>Partajează link-ul către acest pad pentru a edita cu prieteni sau folosește <span class=\"fa fa-share-alt\" style=\"border:1px solid black;color:#000;\"> Share </span> butonul pentru a partaja <em>read-only link</em> permițând vizualizarea dar nu și editarea.</p><p><em>Îndrăznește, începe să scrii...</em></p></span><p> <br></p>";
|
||||
out.initialState = "<p>Acesta este <strong>CryptPad</strong>, editorul colaborativ bazat pe tehnologia Zero Knowledge în timp real. Totul este salvat pe măsură ce scrii.<br>Partajează link-ul către acest pad pentru a edita cu prieteni sau folosește <span class=\"fa fa-share-alt\" style=\"border:1px solid black;color:#000;\"> Share </span> butonul pentru a partaja <em>read-only link</em> permițând vizualizarea dar nu și editarea.</p><p><em>Îndrăznește, începe să scrii...</em></p><p> <br></p>";
|
||||
out.codeInitialState = "/*\n Acesta este editorul colaborativ de cod bazat pe tehnologia Zero Knowledge CryptPad.\n Ce scrii aici este criptat, așa că doar oamenii care au link-ul pot să-l acceseze.\n Poți să alegi ce limbaj de programare pus n evidență și schema de culori UI n dreapta sus.\n*/";
|
||||
out.slideInitialState = "# CryptSlide\n* Acesta este un editor colaborativ bazat pe tehnologia Zero Knowledge.\n* Ce scrii aici este criptat, așa că doar oamenii care au link-ul pot să-l acceseze.\n* Nici măcar serverele nu au acces la ce scrii tu.\n* Ce vezi aici, ce auzi aici, atunci când pleci, lași aici.\n\n-\n# Cum se folosește\n1. Scrie-ți conținutul slide-urilor folosind sintaxa markdown\n - Află mai multe despre sintaxa markdown [aici](http://www.markdowntutorial.com/)\n2. Separă-ți slide-urile cu -\n3. Click pe butonul \"Play\" pentru a vedea rezultatele - Slide-urile tale sunt actualizate în timp real.";
|
||||
out.driveReadmeTitle = "Ce este CryptDrive?";
|
||||
|
|
|
@ -467,7 +467,7 @@ define(function () {
|
|||
// Initial states
|
||||
|
||||
out.initialState = [
|
||||
'<span style="font-size:16px;"><p>',
|
||||
'<p>',
|
||||
'這是 <strong>CryptPad</strong>, 零知識即時協作編輯平台,當你輸入時一切已即存好。',
|
||||
'<br>',
|
||||
'分享這個工作檔案的網址連結給友人或是使用、 <span class="fa fa-share-alt" style="border: 1px solid black;color:#000;"> 分享 </span> 按鈕分享<em>唯讀的連結</em> 其只能看不能編寫。',
|
||||
|
@ -475,7 +475,7 @@ define(function () {
|
|||
|
||||
'<p><em>',
|
||||
'來吧, 開始打字輸入吧...',
|
||||
'</em></p></span>',
|
||||
'</em></p>',
|
||||
'<p> <br></p>'
|
||||
].join('');
|
||||
|
||||
|
|
|
@ -72,7 +72,7 @@ body {
|
|||
|
||||
#preview {
|
||||
max-width: 40vw;
|
||||
margin: auto;
|
||||
margin: 1em auto;
|
||||
|
||||
.markdown_preformatted-code;
|
||||
.markdown_gfm-table(black);
|
||||
|
|
|
@ -402,24 +402,32 @@ define([
|
|||
});
|
||||
|
||||
// add the splitter
|
||||
var splitter = $('<div>', {
|
||||
'class': 'cp-splitter'
|
||||
}).appendTo($iframe.find('#previewContainer'));
|
||||
if (!$iframe.has('.cp-splitter').length) {
|
||||
var $preview = $iframe.find('#previewContainer');
|
||||
var splitter = $('<div>', {
|
||||
'class': 'cp-splitter'
|
||||
}).appendTo($preview);
|
||||
|
||||
var $target = $iframe.find('.CodeMirror');
|
||||
splitter.on('mousedown', function (e) {
|
||||
e.preventDefault();
|
||||
var x = e.pageX;
|
||||
var w = $target.width();
|
||||
|
||||
$iframe.on('mouseup mousemove', function handler(evt) {
|
||||
if (evt.type === 'mouseup') {
|
||||
$iframe.off('mouseup mousemove', handler);
|
||||
return;
|
||||
}
|
||||
$target.css('width', (w - x + evt.pageX) + 'px');
|
||||
$preview.on('scroll', function() {
|
||||
splitter.css('top', $preview.scrollTop() + 'px');
|
||||
});
|
||||
});
|
||||
|
||||
var $target = $iframe.find('.CodeMirror');
|
||||
|
||||
splitter.on('mousedown', function (e) {
|
||||
e.preventDefault();
|
||||
var x = e.pageX;
|
||||
var w = $target.width();
|
||||
|
||||
$iframe.on('mouseup mousemove', function handler(evt) {
|
||||
if (evt.type === 'mouseup') {
|
||||
$iframe.off('mouseup mousemove', handler);
|
||||
return;
|
||||
}
|
||||
$target.css('width', (w - x + evt.pageX) + 'px');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
Cryptpad.removeLoadingScreen();
|
||||
setEditable(true);
|
||||
|
|
|
@ -56,12 +56,13 @@ define([
|
|||
$row.find('.upCancel').html('-');
|
||||
var $pv = $row.find('.progressValue');
|
||||
var $pb = $row.find('.progressContainer');
|
||||
var $pc = $row.find('.upProgress');
|
||||
var $link = $row.find('.upLink');
|
||||
|
||||
var updateProgress = function (progressValue) {
|
||||
$pv.text(Math.round(progressValue*100)/100 + '%');
|
||||
$pb.css({
|
||||
width: (progressValue/100)*188+'px'
|
||||
width: (progressValue/100)*$pc.width()+'px'
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
@ -313,6 +313,7 @@ define([
|
|||
position: 'bottom',
|
||||
distance: 0,
|
||||
performance: true,
|
||||
dynamicTitle: true,
|
||||
delay: [delay, 0]
|
||||
});
|
||||
};
|
||||
|
|
|
@ -44,6 +44,7 @@
|
|||
border: 0;
|
||||
padding: 8px 12px;
|
||||
margin: 1em;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.close {
|
||||
|
@ -60,6 +61,7 @@
|
|||
.fileContainer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -308,7 +308,7 @@ define([
|
|||
|
||||
toolbar.userlistContent = $content;
|
||||
|
||||
var $container = $('<span>', {id: 'userButtons'});
|
||||
var $container = $('<span>', {id: 'userButtons', title: Messages.userListButton});
|
||||
|
||||
var $button = $('<button>').appendTo($container);
|
||||
$('<span>',{'class': 'buttonTitle'}).appendTo($button);
|
||||
|
@ -446,6 +446,7 @@ define([
|
|||
//$shareBlock.find('button').attr('id', 'shareButton');
|
||||
$shareBlock.find('.dropdown-bar-content').addClass(SHARE_CLS).addClass(EDITSHARE_CLS).addClass(VIEWSHARE_CLS);
|
||||
$shareBlock.addClass('shareButton');
|
||||
$shareBlock.find('button').attr('title', Messages.shareButton);
|
||||
|
||||
if (hashes.editHash) {
|
||||
$shareBlock.find('a.editShare').click(function () {
|
||||
|
@ -623,20 +624,25 @@ define([
|
|||
}).appendTo(toolbar.$top);
|
||||
|
||||
// We need to override the "a" tag action here because it is inside the iframe!
|
||||
var inDrive = /^\/drive/;
|
||||
|
||||
var href = inDrive ? '/index.html' : '/drive/';
|
||||
var buttonTitle = inDrive ? Messages.header_homeTitle : Messages.header_logoTitle;
|
||||
|
||||
var $aTag = $('<a>', {
|
||||
href: "/drive/",
|
||||
title: Messages.header_logoTitle,
|
||||
href: href,
|
||||
title: buttonTitle,
|
||||
'class': "cryptpad-logo"
|
||||
}).append($('<img>', {
|
||||
src: '/customize/images/logo_white.svg'
|
||||
src: '/customize/images/logo_white.png'
|
||||
}));
|
||||
var onClick = function (e) {
|
||||
e.preventDefault();
|
||||
if (e.ctrlKey) {
|
||||
window.open('/drive/');
|
||||
window.open(href);
|
||||
return;
|
||||
}
|
||||
window.location = "/drive/";
|
||||
window.location = href;
|
||||
};
|
||||
|
||||
var onContext = function (e) { e.stopPropagation(); };
|
||||
|
@ -774,6 +780,7 @@ define([
|
|||
userMenuCfg.displayChangeName = 1;
|
||||
}
|
||||
Cryptpad.createUserAdminMenu(userMenuCfg);
|
||||
$userAdmin.find('button').attr('title', Messages.userAccountButton);
|
||||
|
||||
var $userButton = toolbar.$userNameButton = $userAdmin.find('a.' + USERBUTTON_CLS);
|
||||
$userButton.click(function (e) {
|
||||
|
|
|
@ -1374,6 +1374,8 @@ define([
|
|||
} else {
|
||||
$gridButton.addClass('active');
|
||||
}
|
||||
$listButton.attr('title', Messages.fm_viewListButton);
|
||||
$gridButton.attr('title', Messages.fm_viewGridButton);
|
||||
$container.append($listButton).append($gridButton);
|
||||
};
|
||||
|
||||
|
|
|
@ -128,9 +128,3 @@ media-tag {
|
|||
z-index: 10000;
|
||||
display: block;
|
||||
}
|
||||
|
||||
body #uploadStatusContainer {
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
color: black;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
|
|
@ -520,14 +520,17 @@ define([
|
|||
$collapse.removeClass('fa-question');
|
||||
var updateIcon = function () {
|
||||
$collapse.removeClass('fa-caret-down').removeClass('fa-caret-up');
|
||||
$collapse.attr('title', '');
|
||||
var isCollapsed = !$bar.find('.cke_toolbox_main').is(':visible');
|
||||
if (isCollapsed) {
|
||||
if (!initializing) { Cryptpad.feedback('HIDETOOLBAR_PAD'); }
|
||||
$collapse.addClass('fa-caret-down');
|
||||
$collapse.attr('title', Messages.pad_showToolbar);
|
||||
}
|
||||
else {
|
||||
if (!initializing) { Cryptpad.feedback('SHOWTOOLBAR_PAD'); }
|
||||
$collapse.addClass('fa-caret-up');
|
||||
$collapse.attr('title', Messages.pad_hideToolbar);
|
||||
}
|
||||
};
|
||||
updateIcon();
|
||||
|
|
|
@ -11,6 +11,7 @@ define([
|
|||
'/bower_components/file-saver/FileSaver.min.js',
|
||||
|
||||
'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
|
||||
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
|
||||
'less!/customize/src/less/toolbar.less',
|
||||
'less!/customize/src/less/cryptpad.less',
|
||||
'less!/poll/poll.less',
|
||||
|
@ -135,7 +136,7 @@ define([
|
|||
var $commitCell = APP.$table.find('tfoot tr td:nth-child(2)');
|
||||
$createOption.append(APP.$createRow);
|
||||
$commitCell.append(APP.$commit);
|
||||
$('#create-user, #create-option').css('display', 'inline-block');
|
||||
$('#create-user, #create-option').css('display', 'inline-flex');
|
||||
if (!APP.proxy || !APP.proxy.table.rowsOrder || APP.proxy.table.rowsOrder.length === 0) { $('#create-user').hide(); }
|
||||
var width = $('#table').outerWidth();
|
||||
if (width) {
|
||||
|
@ -458,7 +459,7 @@ define([
|
|||
var msg = (help ? Messages.poll_hide_help_button : Messages.poll_show_help_button);
|
||||
|
||||
$('#howItWorks').toggle(help);
|
||||
$('#help').text(msg).attr('title', msg);
|
||||
$('#help').text(msg);
|
||||
};
|
||||
|
||||
var Title;
|
||||
|
|
|
@ -55,9 +55,14 @@ body {
|
|||
width: 400px;
|
||||
}
|
||||
|
||||
input[type="text"], textarea {
|
||||
background-color: white;
|
||||
color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
input[type="text"][disabled], textarea[disabled] {
|
||||
background-color: transparent;
|
||||
font: white;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
|
@ -114,6 +119,7 @@ table#table {
|
|||
min-height: 5em;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
border: 1px solid black;
|
||||
|
||||
}
|
||||
#description[disabled] {
|
||||
|
@ -132,6 +138,10 @@ table#table {
|
|||
div.upper {
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
|
||||
& > * {
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
// from cryptpad.less
|
||||
|
@ -329,7 +339,6 @@ form.realtime, div.realtime {
|
|||
input {
|
||||
&[type="text"] {
|
||||
height: auto;
|
||||
border: 1px solid @base;
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
@ -375,6 +384,7 @@ form.realtime, div.realtime {
|
|||
//border-radius: 20px 0 0 20px;
|
||||
input[type="text"] {
|
||||
width: ~"calc(100% - 50px)";
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
.edit {
|
||||
float:right;
|
||||
|
@ -460,3 +470,10 @@ form.realtime, div.realtime {
|
|||
#adduser { .top-left; }
|
||||
#addoption { .bottom-left; }
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
|
|
@ -15,6 +15,7 @@ define([
|
|||
'/bower_components/file-saver/FileSaver.min.js',
|
||||
|
||||
'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
|
||||
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
|
||||
'less!/customize/src/less/cryptpad.less',
|
||||
'less!/whiteboard/whiteboard.less',
|
||||
'less!/customize/src/less/toolbar.less',
|
||||
|
@ -89,13 +90,8 @@ window.canvas = canvas;
|
|||
ctx.strokeStyle = '#000000';
|
||||
ctx.stroke();
|
||||
|
||||
|
||||
var img = ccanvas.toDataURL("image/png");
|
||||
var $img = $('<img>', {
|
||||
src: img,
|
||||
title: 'Current brush'
|
||||
});
|
||||
$controls.find('.selected').html('').append($img);
|
||||
$controls.find('.selected > img').attr('src', img);
|
||||
canvas.freeDrawingCursor = 'url('+img+') '+size/2+' '+size/2+', crosshair';
|
||||
};
|
||||
|
||||
|
@ -103,6 +99,7 @@ window.canvas = canvas;
|
|||
var val = $width.val();
|
||||
canvas.freeDrawingBrush.width = Number(val);
|
||||
$widthLabel.text(Cryptpad.Messages._getKey("canvas_widthLabel", [val]));
|
||||
$('#width-val').text(val + 'px');
|
||||
createCursor();
|
||||
};
|
||||
updateBrushWidth();
|
||||
|
@ -114,6 +111,7 @@ window.canvas = canvas;
|
|||
brush.opacity = Number(val);
|
||||
canvas.freeDrawingBrush.color = Colors.hex2rgba(brush.color, brush.opacity);
|
||||
$opacityLabel.text(Cryptpad.Messages._getKey("canvas_opacityLabel", [val]));
|
||||
$('#opacity-val').text((Number(val) * 100) + '%');
|
||||
createCursor();
|
||||
};
|
||||
updateBrushOpacity();
|
||||
|
@ -188,7 +186,7 @@ window.canvas = canvas;
|
|||
|
||||
var setEditable = function (bool) {
|
||||
if (readOnly && bool) { return; }
|
||||
if (bool) { $controls.show(); }
|
||||
if (bool) { $controls.css('display', 'flex'); }
|
||||
else { $controls.hide(); }
|
||||
|
||||
canvas.isDrawingMode = bool ? module.draw : false;
|
||||
|
@ -199,7 +197,7 @@ window.canvas = canvas;
|
|||
canvas.forEachObject(function (object) {
|
||||
object.selectable = bool;
|
||||
});
|
||||
$canvasContainer.css('border-color', bool? 'black': 'red');
|
||||
$canvasContainer.find('canvas').css('border-color', bool? 'black': 'red');
|
||||
};
|
||||
|
||||
var saveImage = module.saveImage = function () {
|
||||
|
@ -289,7 +287,7 @@ window.canvas = canvas;
|
|||
|
||||
var $color = module.$color = $('<button>', {
|
||||
id: "color-picker",
|
||||
title: "choose a color",
|
||||
title: Messages.canvas_chooseColor,
|
||||
'class': "fa fa-square rightside-button",
|
||||
})
|
||||
.on('click', function () {
|
||||
|
|
|
@ -27,20 +27,29 @@ body {
|
|||
}
|
||||
// created by fabricjs. styled so defaults don't break anything
|
||||
.canvas-container {
|
||||
border: 1px solid black;
|
||||
margin: auto;
|
||||
background: white;
|
||||
& > canvas {
|
||||
border: 1px solid black;
|
||||
}
|
||||
}
|
||||
|
||||
// contains user tools
|
||||
#controls {
|
||||
display: block;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
position: relative;
|
||||
border-top: 1px solid black;
|
||||
background: white;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
padding-bottom: 5px;
|
||||
|
||||
padding: 1em;
|
||||
|
||||
& > * + * {
|
||||
margin: 0;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
#width, #opacity {
|
||||
.middle;
|
||||
|
@ -50,15 +59,36 @@ body {
|
|||
vertical-align: middle;
|
||||
}
|
||||
.selected {
|
||||
margin-left: 20px;
|
||||
display: inline-block;
|
||||
height: 135px;
|
||||
width: 135px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9001;
|
||||
text-align: center;
|
||||
img {
|
||||
vertical-align: middle;
|
||||
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.range-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
input[type="range"] {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
& > span {
|
||||
cursor: default;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
.range-group:first-of-type {
|
||||
margin-left: 2em;
|
||||
}
|
||||
.range-group:last-of-type {
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -70,13 +100,21 @@ body {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
padding: 1em;
|
||||
|
||||
span.palette-color {
|
||||
height: 4vw;
|
||||
width: 4vw;
|
||||
display: inline-block;
|
||||
display: block;
|
||||
margin: 5px;
|
||||
border: 1px solid black;
|
||||
vertical-align: top;
|
||||
border-radius: 50%;
|
||||
transition: transform 0.1s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -87,6 +125,7 @@ body {
|
|||
|
||||
// input[type=color] must exist in the dom to work correctly
|
||||
// styled so that they don't break layouts
|
||||
|
||||
#pickers {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
|
@ -94,4 +133,3 @@ body {
|
|||
height: 0;
|
||||
z-index: -5;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue