libretic/etherpad-lite
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

colibris: improve colibris responsive

Browse source
This commit is contained in:
Sebastian Castro 2018-11-08 21:56:15 +01:00
parent 6cc499bcce
commit 3f761121b2
7 changed files with 102 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/static/skins/colibris/pad.css
View file

@ -5,7 +5,7 @@
@import url("src/components/popup.css");
@import url("src/components/chat.css");
@import url("src/components/editor-sidediv.css");
@import url("src/components/sidediv.css");
@import url("src/components/gritter.css");
@import url("src/components/table-of-content.css");
@import url("src/components/toolbar.css");
@ -52,4 +52,4 @@ h1,
#titlelabel,
#chatlabel,
.btn
{ font-family: opendyslexic !important; }
{ font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important; }

14
src/static/skins/colibris/src/components/chat.css
View file

@ -87,4 +87,18 @@
border: none;
padding: 10px 20px;
right: 30px;
}
@media (max-width: 720px) {
#chaticon {
right: 0;
bottom: 44px;
}
#chatbox {
width: 100%;
right: 0;
}
#titlesticky { display: none; }
}

1
src/static/skins/colibris/src/components/editor-sidediv.css → src/static/skins/colibris/src/components/sidediv.css
View file

@ -2,6 +2,7 @@
background-color: transparent;
border: none;
font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
display: block;
}
#sidedivinner>div:before {

52
src/static/skins/colibris/src/components/toolbar.css
View file

@ -66,7 +66,7 @@
padding: 0;
}
.toolbar ul li a[data-l10n-id="pad.toolbar.showusers.title"] {
.toolbar ul li[data-key=showusers] a {
margin: 0;
height: 59px;
line-height: 25px;
@ -75,7 +75,19 @@
border-radius: 0;
}
@media (max-width: 800px) {
@media (max-width: 1000px) {
.toolbar ul li.separator {
margin: 0 2px;
background: none;
display: block;
}
.toolbar ul li[data-key=showusers] a {
margin-left: 0 !important;
}
}
@media (max-width: 720px) {
.toolbar ul {
height: 39px;
background: none;
@ -83,21 +95,41 @@
border: none !important;
padding: 0 !important;
}
.toolbar ul.menu_left {
padding-top: 2px !important;
}
.toolbar ul.menu_right {
left: 0;
padding-left: 8px !important;
padding-top: 8px !important;
height: 35px !important;
border-top: 1px solid #d2d2d2 !important;
background-color: white;
}
.toolbar ul li a {
padding: 4px 5px !important;
}
}
@media (max-width: 1000px) {
.toolbar ul li.separator {
margin: 0 2px;
background: none;
.toolbar ul li[data-key=showusers] {
position: absolute;
right: 0;
top: 0;
}
.toolbar ul li[data-key=showusers] a {
padding-top: 9px !important;
}
.toolbar ul li a:hover { background-color: transparent; }
#connectivity, #embed, #import_export, #settings { bottom: 42px; }
li.superscript,
li.subscript,
li[data-key="undo"],
li[data-key="redo"] {
display: none;
}
.toolbar ul li a[data-l10n-id="pad.toolbar.showusers.title"] {
margin-left: 0 !important;
}
.toolbar ul li.separator { margin: 0; }
}

17
src/static/skins/colibris/src/components/users.css
View file

@ -63,4 +63,21 @@ table#otheruserstable {
border-radius: 50%;
height: 20px;
width: 20px;
}
@media (max-width: 720px) {
#users {
bottom: 42px;
top: initial !important;
height: auto !important;
}
#mycolorpicker {
width: auto;
height: auto;
right: 0;
bottom: 42px;
left: initial;
top: initial !important;
}
}

65
src/static/skins/colibris/src/layout.css
View file

@ -30,7 +30,7 @@
left: 0 !important;
top: 0;
width: calc(100% - 110px) !important; /* 100% - padding */
padding: 45px 55px;
padding: 55px;
box-shadow: 0 0 0 0.5px rgba(209, 209, 209, 0.32), 0 0 7pt 0pt rgba(204, 204, 204, 0.52);
border: 0;
border-radius: 5px;
@ -41,7 +41,7 @@
position: absolute;
right: calc(100% - 35px);
left: initial;
top: 64px !important;
top: 74px !important;
padding: 0;
}
@ -60,59 +60,16 @@
}
}
/*
@media (min-width:800px) and (max-width:1200px) {
@media (max-width:600px) {
html { overflow: scroll; }
#outerdocbody {
width: 100%;
}
#outerdocbody iframe {
width: calc(100% - 60px) !important;
padding: 30px !important;
top: 0 !important;
border-radius: 0 !important;
padding: 15px !important;
width: calc(100% - 30px) !important; /* 100% - padding */
}
#outerdocbody {
position: relative !important;
padding-left: 120px !important;
right: 0 !important;
left: 0 !important;
width: calc(100% - 320px) !important;
margin: 0;
max-width: none;
padding-top: 0 !important;
}
#outerdocbody #sidediv {
padding: 33px 0 0 !important;
right: calc(100% - 105px);
}
#comments {
right: 0px;
left: auto !important;
#sidediv {
display: block;
}
}
@media (min-width: 800px) and (max-width:955px) {
#outerdocbody {
padding-right: 0 !important;
width: calc(100% - 110px) !important;
}
}
@media (max-width: 800px) {
#outerdocbody iframe {
width: calc(100% - 12px) !important;
padding: 10px !important;
top: 0 !important;
border-radius: 0 !important;
}
#outerdocbody #sidediv,
#chaticon,
li.superscript,
li.subscript,
li[data-key="undo"],
li[data-key="redo"] {
display: none;
}
#outerdocbody {
padding-top: 0 !important;
}
}
*/

18
src/static/skins/colibris/src/pad-editor.css
View file

@ -1,6 +1,15 @@
#innerdocbody {
font-size: 15px;
line-height: 20px; /* increase this line-height to 25px when no background color for text */
line-height: 25px;
padding: 0;
}
#innerdocbody span {
padding: 4px 0 !important;
}
#innerdocbody h1 span {
padding: 0;
}
body {
@ -12,8 +21,7 @@ option {
}
h1 {
font-size: 2.5em;
padding: 9px 0; /* need when coloring background text because it overlap previous and next line */
font-size: 2.5em !important;
}
h3 {
@ -21,5 +29,9 @@ h3 {
letter-spacing: 1px;
}
a {
color: #3f51b5;
}