diff --git a/customize.dist/Header.html b/customize.dist/Header.html index 6548f9075..6d7e2a370 100644 --- a/customize.dist/Header.html +++ b/customize.dist/Header.html @@ -8,14 +8,16 @@ -
+
diff --git a/customize.dist/cryptofist_mini.png b/customize.dist/cryptofist_mini.png new file mode 100644 index 000000000..82a5218ef Binary files /dev/null and b/customize.dist/cryptofist_mini.png differ diff --git a/customize.dist/main.css b/customize.dist/main.css index 0c063e6e8..2455aa465 100644 --- a/customize.dist/main.css +++ b/customize.dist/main.css @@ -146,6 +146,7 @@ tr { .buttons { margin-bottom: 50px; margin-top: 20px; + line-height: 2.5em; } .button { padding: 4px 12px 4px 12px; @@ -242,6 +243,34 @@ tbody td:last-child { margin-right: 4px; position: relative; } +@media screen and (max-width: 800px) { + .top-bar .big, + .bottom-bar .big { + display: none; + } +} +@media screen and (min-width: 801px) { + .top-bar .big, + .bottom-bar .big { + display: inline-block; + } +} +@media screen and (max-width: 800px) { + .top-bar .small, + .bottom-bar .small { + display: inline-block; + } +} +@media screen and (min-width: 801px) { + .top-bar .small, + .bottom-bar .small { + display: none; + } +} +.top-bar .small img, +.bottom-bar .small img { + height: 1.25em; +} .bottom-bar { bottom: 0px; right: 0px; diff --git a/customize.dist/src/cryptpad.less b/customize.dist/src/cryptpad.less index c41af4de9..7492114e9 100644 --- a/customize.dist/src/cryptpad.less +++ b/customize.dist/src/cryptpad.less @@ -175,6 +175,7 @@ p, pre, td, a, table, tr { .buttons { margin-bottom: 50px; margin-top: 20px; + line-height: 2.5em; } .button { @@ -278,6 +279,27 @@ tbody { margin-right: 4px; position: relative; } + + .big { + @media screen and (max-width: 800px) { + display: none; + } + @media screen and (min-width: 801px) { + display: inline-block; + } + } + .small { + @media screen and (max-width: 800px) { + display: inline-block; + } + @media screen and (min-width: 801px) { + display: none; + } + img { + height: 1.25em; + } + } + } .bottom-bar { bottom: 0px; diff --git a/customize.dist/src/toolbar.less b/customize.dist/src/toolbar.less index 0d83775a0..17e25c232 100644 --- a/customize.dist/src/toolbar.less +++ b/customize.dist/src/toolbar.less @@ -25,16 +25,18 @@ } div { - padding: 0 3px; - height: 1.5em; - line-height: 25px; - height: 100%; + white-space: normal; &.cryptpad-back { padding: 0; font-weight: bold; cursor: pointer; color: #000; } + &.cryptpad-lag { + float: right; + line-height: 26px; + margin: 2px 0px 2px 4px; + } } button, .rightside-element { @@ -71,6 +73,10 @@ } } + .cryptpad-state { + line-height: 30px; /* equivalent to 26px + 2*2px margin used for buttons */ + } + .rightside-button { float: right; cursor: pointer; @@ -84,7 +90,9 @@ .rightside-element { vertical-align: middle; white-space: nowrap; - //float: right; + &.float { + float: right; + } } select { @@ -99,7 +107,7 @@ .cryptpad-toolbar-leftside { float: left; - max-width: 35%; + margin-bottom: -1px; .cryptpad-dropdown-container { position: relative; display: inline-block; @@ -113,28 +121,55 @@ overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); height: auto; + padding: 5px; + white-space: normal; p { width: 210px; padding: 0; margin: 0; + white-space: normal; + &.cryptpad-dropdown-users { + text-align:baseline; + .yourself { + font-style: italic; + } + .anonymous { + font-style: italic; + } + } + h2 { + font-weight: bold; + text-align: center; + background-color: #EEEEEE; + padding: 5px 0px; + margin: 5px 0px; + font-size: 16px; + } + } + button { + margin: 2px 0px; } } } + button { + margin: 2px 4px 2px 0px; + } .cryptpad-userbuttons-container { display: none; } - } .cryptpad-toolbar-rightside { text-align: right; + margin-right: 30px; //float: right; } -.cryptpad-lag { - float: right; -} .cryptpad-spinner { float: left; display: inline-block; + height: 26px; + margin: 2px; + line-height: 26px; + font-size: 20px; } .cryptpad-readonly { margin-right: 20px; diff --git a/customize.dist/toolbar.css b/customize.dist/toolbar.css index 34758d2d0..930a17eaf 100644 --- a/customize.dist/toolbar.css +++ b/customize.dist/toolbar.css @@ -24,10 +24,7 @@ float: right; } .cryptpad-toolbar div { - padding: 0 3px; - height: 1.5em; - line-height: 25px; - height: 100%; + white-space: normal; } .cryptpad-toolbar div.cryptpad-back { padding: 0; @@ -35,6 +32,11 @@ cursor: pointer; color: #000; } +.cryptpad-toolbar div.cryptpad-lag { + float: right; + line-height: 26px; + margin: 2px 0px 2px 4px; +} .cryptpad-toolbar button, .cryptpad-toolbar .rightside-element { height: 26px; @@ -72,6 +74,10 @@ display: none; } } +.cryptpad-toolbar .cryptpad-state { + line-height: 30px; + /* equivalent to 26px + 2*2px margin used for buttons */ +} .cryptpad-toolbar .rightside-button { float: right; cursor: pointer; @@ -84,6 +90,9 @@ vertical-align: middle; white-space: nowrap; } +.cryptpad-toolbar .rightside-element.float { + float: right; +} .cryptpad-toolbar select { border: 0px; margin-left: 5px; @@ -94,7 +103,7 @@ } .cryptpad-toolbar-leftside { float: left; - max-width: 35%; + margin-bottom: -1px; } .cryptpad-toolbar-leftside .cryptpad-dropdown-container { position: relative; @@ -110,24 +119,52 @@ overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); height: auto; + padding: 5px; + white-space: normal; } .cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p { width: 210px; padding: 0; margin: 0; + white-space: normal; +} +.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p.cryptpad-dropdown-users { + text-align: baseline; +} +.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p.cryptpad-dropdown-users .yourself { + font-style: italic; +} +.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p.cryptpad-dropdown-users .anonymous { + font-style: italic; +} +.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p h2 { + font-weight: bold; + text-align: center; + background-color: #EEEEEE; + padding: 5px 0px; + margin: 5px 0px; + font-size: 16px; +} +.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown button { + margin: 2px 0px; +} +.cryptpad-toolbar-leftside button { + margin: 2px 4px 2px 0px; } .cryptpad-toolbar-leftside .cryptpad-userbuttons-container { display: none; } .cryptpad-toolbar-rightside { text-align: right; -} -.cryptpad-lag { - float: right; + margin-right: 30px; } .cryptpad-spinner { float: left; display: inline-block; + height: 26px; + margin: 2px; + line-height: 26px; + font-size: 20px; } .cryptpad-readonly { margin-right: 20px; diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js index 6243bf9dc..a1c60e990 100644 --- a/customize.dist/translations/messages.fr.js +++ b/customize.dist/translations/messages.fr.js @@ -22,12 +22,12 @@ define(function () { out.reconnecting = 'Reconnexion...'; out.lag = 'Latence'; out.readonly = 'Lecture seule'; - out.anonymous = "nonyme"; + out.anonymous = "Anonyme"; out.yourself = "Vous-même"; out.anonymousUsers = "utilisateurs anonymes"; out.anonymousUser = "utilisateur anonyme"; - out.viewUsersIcon = "UTILISATEURS EN LECTURE SEULE"; - out.editUsersIcon = "UTILISATEURS ÉDITANT LE DOCUMENT"; + out.share = "Partage"; + out.users = "Utilisateurs"; out.greenLight = "Tout fonctionne bien"; out.orangeLight = "Votre connexion est lente, ce qui réduit la qualité de l'éditeur"; @@ -202,6 +202,7 @@ define(function () { // Header.html out.header_france = 'Fait avec