From 264ea0ba7e3f82e77a1def8008eaba85ce2c415d Mon Sep 17 00:00:00 2001 From: Sebastian Castro Date: Sun, 22 Mar 2020 10:17:54 +0100 Subject: [PATCH 01/70] css: split base CSS code into subfiles (without modifications) --- src/static/css/pad.css | 1287 +------------------- src/static/css/pad/chat.css | 201 +++ src/static/css/pad/fonts.css | 34 + src/static/css/pad/gritter.css | 131 ++ src/static/css/pad/icons.css | 108 ++ src/static/css/pad/layout.css | 41 + src/static/css/pad/loadingbox.css | 58 + src/static/css/pad/popup.css | 114 ++ src/static/css/pad/popup_connectivity.css | 28 + src/static/css/pad/popup_import_export.css | 59 + src/static/css/pad/popup_users.css | 196 +++ src/static/css/pad/toolbar.css | 253 ++++ src/static/css/timeslider.css | 23 + 13 files changed, 1262 insertions(+), 1271 deletions(-) create mode 100644 src/static/css/pad/chat.css create mode 100644 src/static/css/pad/fonts.css create mode 100644 src/static/css/pad/gritter.css create mode 100644 src/static/css/pad/icons.css create mode 100644 src/static/css/pad/layout.css create mode 100644 src/static/css/pad/loadingbox.css create mode 100644 src/static/css/pad/popup.css create mode 100644 src/static/css/pad/popup_connectivity.css create mode 100644 src/static/css/pad/popup_import_export.css create mode 100644 src/static/css/pad/popup_users.css create mode 100644 src/static/css/pad/toolbar.css diff --git a/src/static/css/pad.css b/src/static/css/pad.css index 10dd69eaaec..d57b469860e 100644 --- a/src/static/css/pad.css +++ b/src/static/css/pad.css @@ -1,3 +1,15 @@ +@import url("pad/layout.css"); +@import url("pad/fonts.css"); +@import url("pad/toolbar.css"); +@import url("pad/popup.css"); +@import url("pad/popup_connectivity.css"); +@import url("pad/popup_import_export.css"); +@import url("pad/popup_users.css"); +@import url("pad/icons.css"); +@import url("pad/chat.css"); +@import url("pad/gritter.css"); +@import url("pad/loadingbox.css"); + *, html, body, @@ -5,147 +17,19 @@ p { margin: 0; padding: 0px; } - .clear { clear: both } -html { - font-size: 62.5%; - width: 100%; -} body, textarea { font-family: Helvetica, Arial, sans-serif } -iframe { - position: absolute -} .readonly .acl-write { display: none; } - -#users { - background: #f7f7f7; - background: -webkit-linear-gradient( #F7F7F7,#EEE); - background: -moz-linear-gradient( #F7F7F7,#EEE); - background: -ms-linear-gradient( #F7F7F7,#EEE); - background: -o-linear-gradient( #F7F7F7,#EEE); - background: linear-gradient( #F7F7F7,#EEE); - width: 160px; - color: #fff; - padding: 5px; - border-radius: 0 0 6px 6px; - border: 1px solid #ccc; -} -#otherusers { - max-height: 400px; - overflow: auto; -} a img { border: 0 } -/* menu */ -.toolbar { - background: #f7f7f7; - background: -webkit-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: -moz-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: -o-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: -ms-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: linear-gradient(#f7f7f7, #f1f1f1 80%); - border-bottom: 1px solid #ccc; - overflow: hidden; - padding-top: 4px; - width: 100%; - white-space: nowrap; - height: 32px; -} -.toolbar ul { - position: absolute; - list-style: none; - padding-right: 3px; - padding-left: 1px; - z-index: 2; - overflow: hidden; - float: left -} -.toolbar ul li { - float: left; - margin-left: 2px; - height:32px; -} -.toolbar ul li.separator { - border: inherit; - background: inherit; - visibility: hidden; - width: 0px; - padding: 5px; - height:22px; -} -.toolbar ul li a:hover { - text-decoration: none; -} -.toolbar ul li a:hover { - background: #fff; - background: -webkit-linear-gradient(#f4f4f4, #e4e4e4); - background: -moz-linear-gradient(#f4f4f4, #e4e4e4); - background: -o-linear-gradient(#f4f4f4, #e4e4e4); - background: -ms-linear-gradient(#f4f4f4, #e4e4e4); - background: linear-gradient(#f4f4f4, #e4e4e4); -} -.toolbar ul li a:active { - background: #eee; - background: -webkit-linear-gradient(#ddd, #fff); - background: -moz-linear-gradient(#ddd, #fff); - background: -o-linear-gradient(#ddd, #fff); - background: -ms-linear-gradient(#ddd, #fff); - background: linear-gradient(#ddd, #fff); - -webkit-box-shadow: 0 0 8px rgba(0,0,0,.1) inset; - -moz-box-shadow: 0 0 8px rgba(0,0,0,.1) inset; - box-shadow: 0 0 8px rgba(0,0,0,.1) inset; -} -.toolbar ul li .activeButton { - background: #eee; - background: -webkit-linear-gradient(#ddd, #fff); - background: -moz-linear-gradient(#ddd, #fff); - background: -o-linear-gradient(#ddd, #fff); - background: -ms-linear-gradient(#ddd, #fff); - background: linear-gradient(#ddd, #fff); - -webkit-box-shadow: 0 0 8px rgba(0,0,0,.1) inset; - -moz-box-shadow: 0 0 8px rgba(0,0,0,.1) inset; - box-shadow: 0 0 8px rgba(0,0,0,.1) inset; -} -.toolbar ul li a { - background: #fff; - background: -webkit-linear-gradient(#fff, #f0f0f0); - background: -moz-linear-gradient(#fff, #f0f0f0); - background: -o-linear-gradient(#fff, #f0f0f0); - background: -ms-linear-gradient(#fff, #f0f0f0); - background: linear-gradient(#fff, #f0f0f0); - border: 1px solid #ccc; - border-radius: 3px; - color: #ccc; - cursor: pointer; - display: inline-block; - min-height: 18px; - overflow: hidden; - padding: 4px 5px; - text-align: center; - text-decoration: none; - min-width: 18px; -} -.toolbar ul li a .buttonicon { - position: relative; - top: 1px; -} -.toolbar ul li a .buttontext { - color: #666; - font-size: 14px; - border:none; - background:none; - margin-top:1px; - color:#666; -} - .buttontext::-moz-focus-inner { padding: 0; border: 0; @@ -156,532 +40,6 @@ a img { border: 1px solid #666 !important; } -.toolbar ul li a.grouped-left { - border-radius: 3px 0 0 3px; -} -.toolbar ul li a.grouped-middle { - border-radius: 0; - margin-left: -2px; - border-left: 0; -} -.toolbar ul li a.grouped-right { - border-radius: 0 3px 3px 0; - margin-left: -2px; - border-left: 0; -} -.toolbar ul li a.selected { - background: #eee !important; - background: -webkit-linear-gradient(#EEE, #F0F0F0) !important; - background: -moz-linear-gradient(#EEE, #F0F0F0) !important; - background: -o-linear-gradient(#EEE, #F0F0F0) !important; - background: -ms-linear-gradient(#EEE, #F0F0F0) !important; - background: linear-gradient(#EEE, #F0F0F0) !important; -} -.toolbar ul li select { - background: #fff; - padding: 4px; - line-height: 22px; /* fix for safari (win/mac) */ - height: 28px; /* fix for chrome (mac) */ - border-radius: 3px; - border: 1px solid #ccc; - outline: none; -} -.toolbar ul.menu_left { - left:0px; - right:250px; -} - -.toolbar ul.menu_right { - right:0px; -} - -li[data-key=showusers] > a { - min-width: 30px; - text-align: left; -} -li[data-key=showusers] > a #online_count { - color: #777; - font-size: 11px; - position: relative; - top: 2px; - padding-left: 2px; -} -#editbar{ - display:none; -} - -#editorcontainer { - position: absolute; - top: 37px; /* + 1px border */ - left: 0px; - right: 0px; - bottom: 0px; - z-index: 1; - - /* Required to be able to scroll on iOS: */ - -webkit-overflow-scrolling: touch; -} -#editorcontainer iframe { - height: 100%; - width: 100%; - padding: 0; - margin: 0; - left: 0; /* Required for safari fixes RTL */ -} -#editorloadingbox { - padding-top: 100px; - padding-bottom: 100px; - font-size: 2.5em; - color: #aaa; - text-align: center; - position: absolute; - width: 100%; - height: 30px; - z-index: 100; -} - -#editorloadingbox .passForm{ - padding:10px; -} - -#editorloadingbox input{ - padding:10px; -} - -#editorloadingbox button{ - padding:10px; -} - -.loadingAnimation{ - -webkit-animation: loadingAnimation 2s infinite linear; - animation: loadingAnimation 2s infinite linear; - font-family: "fontawesome-etherpad"; - font-size:24px; - z-index:150; - width:25px; - height:25px; -} - -.loadingAnimation:before{ - content: "\e80e"; -} - -@-webkit-keyframes loadingAnimation { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); - } -} -@keyframes loadingAnimation { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); - } -} - -#editorcontainerbox { - position: absolute; - bottom: 0; - top: 0; - width: 100%; -} -#padpage { - position: absolute; - top: 0px; - bottom: 0px; - width: 100%; -} -#padmain { - margin-top: 0px; - position: absolute; - top: 63px !important; - left: 0px; - right: 0px; - bottom: 0px; - zoom: 1; -} -#padeditor { - bottom: 0px; - left: 0; - position: absolute; - right: 0px; - top: 0; - zoom: 1; -} -#myswatchbox { - position: absolute; - left: 5px; - top: 5px; - width: 24px; - height: 24px; - border: 1px solid #000; - background: transparent; - cursor: pointer; -} -#myswatch { - width: 100%; - height: 100%; - background: transparent; /*...initially*/ -} -#mycolorpicker { - width: 232px; - height: 265px; - position: absolute; - left: -250px; - top: 0px; - z-index: 101; - display: none; - border-radius: 0 0 6px 6px; - background: #f7f7f7; - border: 1px solid #ccc; - border-top: 0; - padding-left: 10px; - padding-top: 10px; -} -#mycolorpickersave { - left: 10px; - font-weight: bold; -} -#mycolorpickercancel { - left: 85px -} -#mycolorpickersave, -#mycolorpickercancel { - background: #fff; - background: -webkit-linear-gradient(#fff, #ccc); - background: -moz-linear-gradient(#fff, #ccc); - background: -o-linear-gradient(#fff, #ccc); - background: -ms-linear-gradient(#fff, #ccc); - background: linear-gradient(#fff, #ccc); - border: 1px solid #ccc; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - font-size: 12px; - cursor: pointer; - color: #000; - overflow: hidden; - padding: 4px; - top: 240px; - text-align: center; - position: absolute; - width: 60px; -} -#mycolorpickerpreview { - position: absolute; - left: 207px; - top: 240px; - width: 16px; - height: 16px; - padding: 4px; - overflow: hidden; - color: #fff; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; -} -#myusernameform { - margin-left: 30px -} -#myusernameedit { - font-size: 1.3em; - color: #fff; - padding: 3px; - height: 18px; - margin: 0; - border: 0; - width: 122px; - background: transparent; -} -#myusernameform input.editable { - border: 1px solid #444 -} -#myuser .myusernameedithoverable:hover { - background: white; - color: black; -} -#mystatusform { - margin-left: 35px; - margin-top: 5px; -} -#mystatusedit { - font-size: 1.2em; - color: #777; - font-style: italic; - display: none; - padding: 2px; - height: 14px; - margin: 0; - border: 1px solid #bbb; - width: 199px; - background: transparent; -} -#myusernameform .editactive, -#myusernameform .editempty { - background: white; - border-left: 1px solid #c3c3c3; - border-top: 1px solid #c3c3c3; - border-right: 1px solid #e6e6e6; - border-bottom: 1px solid #e6e6e6; - color: #000; -} -#myusernameform .editempty { - color: #333 -} -#myswatchbox, #myusernameedit, #otheruserstable .swatch { - border: 1px solid #ccc !important; - color: #333; -} -table#otheruserstable { - display: none -} -#nootherusers { - padding: 10px; - font-size: 1.2em; - color: #eee; - font-weight: bold; -} -#nootherusers a { - color: #3C88FF -} -#otheruserstable td { - height: 26px; - vertical-align: middle; - padding: 0 2px; - color: #333; -} -#otheruserstable .swatch { - border: 1px solid #000; - width: 13px; - height: 13px; - overflow: hidden; - margin: 0 4px; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -.usertdswatch { - width: 1% -} -.usertdname { - font-size: 1.3em; - color: #444; -} -.usertdstatus { - font-size: 1.1em; - font-style: italic; - color: #999; -} -.usertdactivity { - font-size: 1.1em; - color: #777; -} -.usertdname input { - border: 1px solid #bbb; - width: 80px; - padding: 2px; -} -.usertdname input.editactive, -.usertdname input.editempty { - background: white; - border-left: 1px solid #c3c3c3; - border-top: 1px solid #c3c3c3; - border-right: 1px solid #e6e6e6; - border-bottom: 1px solid #e6e6e6; -} -.usertdname input.editempty { - color: #888; - font-style: italic; -} - -#connectivity { - z-index: 600 !important; -} - -#connectivity * { - display: none; -} - -#connectivity .visible, -#connectivity .visible * { - display: block; -} - -/* styles for the automatic reconnection timer: */ -#connectivity .visible.with_reconnect_timer button, -#connectivity .visible.with_reconnect_timer .reconnecttimer * { - display: inline-block; -} - -#connectivity .with_reconnect_timer .hidden, -#connectivity .with_reconnect_timer #defaulttext.hidden, -#connectivity .with_reconnect_timer button.hidden { - display: none; -} - -#connectivity .with_reconnect_timer #cancelreconnect { - margin-left: 10px; -} -/* end of styles for the automatic reconnection timer */ - -#reconnect_form button { - font-size: 12pt; - padding: 5px; -} - -.toolbar #overlay { - z-index: 500; - display: none; - background-repeat: repeat-both; - width: 100%; - position: absolute; - height: inherit; - left: 0; - top: 0; -} -* html #overlay { - /* for IE 6+ */ - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - filter: alpha(opacity=100); - opacity: 1; /* in case this is looked at */ - background-image: none; - background-repeat: no-repeat; /* scale the image */ -} - -#chatbox { - position: absolute; - bottom: 0px; - right: 20px; - width: 180px; - height: 200px; - z-index: 400; - background-color: #f7f7f7; - border-left: 1px solid #999; - border-right: 1px solid #999; - border-top: 1px solid #999; - padding: 3px; - padding-bottom: 10px; - border-top-left-radius: 5px; - border-top-right-radius: 5px; - display: none; -} -#chattext { - background-color: white; - border: 1px solid white; - -ms-overflow-y: scroll; - overflow-y: scroll; - font-size: 12px; - position: absolute; - right: 0px; - left: 0px; - top: 25px; - bottom: 25px; - z-index: 1002; -} -#chattext p { - padding: 3px; - -ms-overflow-x: hidden; - overflow-x: hidden; -} -.chatloadmessages -{ - margin-bottom: 5px; - margin-top: 5px; - margin-left: auto; - margin-right: auto; - display: block; -} -#chatloadmessagesbutton -{ - line-height: 1.8em; -} -#chatloadmessagesball -{ - display: none; -} -#chatinputbox { - padding: 3px 2px; - position: absolute; - bottom: 0px; - right: 0px; - left: 3px; -} -#chatlabel { - font-size: 13px; - font-weight: bold; - color: #555; - text-decoration: none; - margin-right: 3px; - vertical-align: middle; -} -#chatinput { - border: 1px solid #BBBBBB; - width: 100%; - float: right; -} -#chaticon { - z-index: 400; - position: fixed; - bottom: 0px; - right: 20px; - padding: 5px; - border-left: 1px solid #999; - border-right: 1px solid #999; - border-top: 1px solid #999; - border-top-left-radius: 5px; - border-top-right-radius: 5px; - background-color: #fff; - cursor: pointer; - display: none; -} -#chaticon a { - text-decoration: none -} -#chatcounter { - color: #777; - font-size: 10px; - vertical-align: middle; -} -#titlebar { - line-height: 16px; - font-weight: bold; - color: #555; - position: relative; - bottom: 2px; -} -#titlelabel { - font-size: 13px; - margin: 4px 0 0 4px; - position: absolute; -} -#titlesticky{ - font-size: 10px; - padding-top:2px; - float: right; - text-align: right; - text-decoration: none; - cursor: pointer; - color: #555; -} -#titlecross { - font-size: 25px; - float: right; - text-align: right; - text-decoration: none; - cursor: pointer; - color: #555; -} .time { float: right; color: #333; @@ -691,168 +49,6 @@ table#otheruserstable { margin-right: 3px; margin-top: 2px; } -#exportColumn{ - margin-top:20px; -} -.exporttype { - margin-top: 4px; - background-repeat: no-repeat; - padding-left: 25px; - color: #333; - text-decoration: none; - padding-bottom:2px; - display:inline; - padding-left:5px; - font-family: "Arial"; -} -.exportlink{ - font-family: "fontawesome-etherpad"; - display:block; - margin:5px; - color:#666; -} -#exporthtmla:before { - content: "\e826"; -} -#exportplaina:before { - content: "\e802"; -} -#exportworda:before { - content: "\e804"; -} -#exportpdfa:before { - content: "\e803"; -} -#exportetherpada:before { - content: "\e806"; -} -#exportopena:before { - content: "\e805"; -} - -/* hidden element */ -#importstatusball, -#importmessagesuccess, -#importmessageabiword { - display: none; -} - -.throbbold{ - font-weight:bold; -} - -#importmessageabiword { - color: #900; - font-size: small; -} - -#importsubmitinput { - margin-top: 12px; - padding:2px 4px 2px 4px; -} -#chatthrob { - display: none; - position: absolute; - bottom: 40px; - font-size: 14px; - width: 150px; - height: 40px; - right: 20px; - z-index: 200; - background-color: #000; - color: white; - background-color: rgb(0,0,0); - background-color: rgba(0,0,0,0.7); - padding: 10px; - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; - filter: alpha(opacity=80); - opacity: .8; -} -.buttonicon { - width: 16px; - height: 16px; - display: inline-block; - vertical-align: middle; - border: none; - padding: 0; - background: none; - font-family: "fontawesome-etherpad"; - font-size: 15px; - font-style: normal; - font-weight: normal; - color: #666; - cursor: pointer; -} - -.buttonicon::-moz-focus-inner { - padding: 0; - border: 0 -} - -.buttonicon:before { - font-family: "fontawesome-etherpad"; -} - -.buttonicon:focus{ - border: 1px solid #666; -} -.buttonicon-bold:before { - content: "\e81c"; -} -.buttonicon-italic:before { - content: "\e81d"; -} -.buttonicon-underline:before { - content: "\e817"; -} -.buttonicon-strikethrough:before { - content: "\e818"; -} -.buttonicon-insertorderedlist:before { - content: "\e816"; -} -.buttonicon-insertunorderedlist:before { - content: "\e815"; -} -.buttonicon-indent:before { - content: "\e814"; -} -.buttonicon-outdent:before { - content: "\e813"; -} -.buttonicon-undo:before { - content: "\e823"; -} -.buttonicon-redo:before { - content: "\e824"; -} -.buttonicon-clearauthorship:before { - content: "\e80d"; -} -.buttonicon-settings:before { - content: "\e833"; -} -.buttonicon-import_export:before { - content: "\e834"; -} -.buttonicon-embed:before { - content: "\e827"; -} -.buttonicon-history:before { - content: "\e837"; -} -.buttonicon-chat:before { - content: "\e829"; -} -.buttonicon-showusers:before { - content: "\e808"; -} -.buttonicon-savedRevision:before { - content: "\e835"; -} #focusprotector { z-index: 100; position: absolute; @@ -869,9 +65,7 @@ table#otheruserstable { .rtl { direction: RTL } -#chattext p { - word-wrap: break-word -} + /* fix for misaligned checkboxes */ input[type=checkbox] { vertical-align: -1px @@ -879,65 +73,7 @@ input[type=checkbox] { .right { float: right } -.popup { - font-size: 12px; - width: 80%; - max-width: 500px; - padding: 10px; - border-radius: 0 0 6px 6px; - border: 1px solid #ccc; - border-top: none; - background: #f7f7f7; - background: -webkit-linear-gradient(#F7F7F7, #EEE); - background: -moz-linear-gradient(#F7F7F7, #EEE); - background: -ms-linear-gradient(#F7F7F7, #EEE); - background: -o-linear-gradient(#F7F7F7, #EEE); - background: linear-gradient(#F7F7F7, #EEE); - -webkit-box-shadow: 0 0 8px #888; - -moz-box-shadow: 0 0 8px #888; - box-shadow: 0 2px 4px #ddd; - color: #222; -} -.popup input[type=text] { - width: 100%; - padding: 5px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; - display: block; - margin-top: 10px; -} -.popup input[type=text], #users input[type=text] { - outline: none; -} -.popup button { - padding: 5px; - font-size: 14px; -} -.popup a { - text-decoration: none -} -.popup h1 { - color: #555; - font-size: 18px -} -.popup h2 { - color: #777; - font-size: 15px -} -.popup p { - margin: 5px 0 -} -.popup select { - background: #fff; - padding: 2px; - height: 24px; - border-radius: 3px; - border: 1px solid #ccc; - outline: none; - width: 120px; -} + .row { float: left; width: 100%; @@ -949,405 +85,14 @@ input[type=checkbox] { float: left; width:50%; } -#settings, -#import_export, -#embed, -#connectivity, -#users { - position: absolute; - top: 38px; - right: 20px; - display: none; - z-index: 500; -} -.stickyChat { - background-color: #f1f1f1 !important; - right: 0px !important; - top: 37px; - -webkit-border-radius: 0px !important; - -moz-border-radius: 0px !important; - border-radius: 0px !important; - height: auto !important; - border: none !important; - border-left: 1px solid #ccc !important; - width: 185px !important; -} -.chatAndUsers{ - display:block !important; - right:0px !important; - border-radius:0px !important; - width:182px !important; -/* Below makes UI look weird when X makes editbar flow onto two lines */ -/* margin:2px 0 0 0 !important;*/ - border: none !important; - border-bottom: 1px solid #ccc !important; - height:155px !important; - border-left: 1px solid #ccc !important; -} -.chatAndUsers > #otherusers{ - max-height: 100px; - overflow-y: auto; -} -.chatAndUsersChat > div > #titlecross{ - display:none; -} -.chatAndUsersChat{ - bottom:0px !important; - padding:0 !important; - margin: 165px 0px 0px 0px; - right:0 !important; - width:182px !important; - border: none !important; - padding:5px !important; - border-left: 1px solid #ccc !important; -} -@media screen and (max-width: 600px) { - .toolbar ul li.separator { - display: none; - } - .toolbar ul li a { - padding: 4px 1px - } - .toolbar ul.menu_left { - left:0px; - right:150px; - } -} -@media all and (max-width: 400px){ - #gritter-notice-wrapper{ - max-height:172px; - overflow:hidden; - width:100% !important; - background-color: #ccc; - bottom:20px; - left:0px; - right:0px; - color:#000; - } - .gritter-close { - display:block !important; - left: auto !important; - right:5px; - } - #gritter-notice-wrapper.bottom-right{ - left:0px !important; - bottom:30px !important; - right:0px !important; - } - .gritter-item p{ - color:black; - font-size:16px; - } - .gritter-title{ - text-shadow: none !important; - color:black; - } - .gritter-item{ - padding:2px 11px 8px 4px; - } - .gritter-item-wrapper{ - margin:0; - } - .gritter-item-wrapper > div{ - background: none; - } - #editorcontainer { - top: 68px; - } - #editbar { - height: 62px; - } - .toolbar ul.menu_left { - left:0px; - right:100px; - } - - .popup { - width:100%; - max-width:300px; - top: 72px !important; - } -} - -/* Mobile devices */ -@media only screen and (max-width: 720px) { - #users { - top: auto; - right:0px !important; - bottom: 33px; - border-radius: 0px !important; - height: 55px !important; - overflow: auto; - } - #mycolorpicker { - left: 0px; - top:37px !important; - position:fixed; - /* #mycolorpicker: width -#users: width */; - } - #editorcontainer { - margin-bottom: 33px - } - /* cancel non-mobile border (will be defined on ".toolbar ul.menu_left" bellow) */ - .toolbar { - border-bottom: 0; - } - .toolbar ul { - background: #f7f7f7; - background: -webkit-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: -moz-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: -o-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: -ms-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: linear-gradient(#f7f7f7, #f1f1f1 80%); - width: 100%; - overflow: hidden; - } - .toolbar ul.menu_left { - right:0px; - position: relative; - display: flex; - top: 0; - overflow-x: auto; - padding: 4px 0 0 0; - border-bottom: 1px solid #ccc; - z-index: 10; - } - .toolbar ul.menu_right { - right:0px !important; - height: 32px; - position: fixed; - bottom: 0; - border-top: 1px solid #ccc; - } - .toolbar ul.menu_right > li:last-child { - float: right; - } - .toolbar ul.menu_right > li a { - border-radius: 0; - border: none; - background: none; - margin: 0; - padding: 8px; - } - .toolbar ul li a.selected { - background: none !important - } - li[data-key="showusers"] > a { - - margin-top:-10px; - padding-top:2px !important; - line-height:20px; - vertical-align:top !important; - } - #chaticon { - position:fixed; - right:48px; - } - .popup { - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; - width: 100%; - } - #settings, - #import_export, - #connectivity, - #embed { - top:auto; - left: 0; - bottom: 33px; - right: 0; - } - .toolbar ul li .separator { - display: none - } - #online_count { - line-height: 24px - } - #chatbox{ - position:fixed; - bottom:33px !important; - margin: 65px 0 0 0; - } - #gritter-notice-wrapper{ - bottom:43px !important; - right:10px !important; - } -} - -#passwordRequired{ +#passwordRequired, #permissionDenied, #wrongPassword, #noCookie { display:none; } -#permissionDenied{ - display:none; -} - -#wrongPassword{ - display:none; -} - -#noCookie{ - display:none; -} - -/* gritter stuff */ -#gritter-notice-wrapper { - position:fixed; - top:20px; - right:20px; - width:301px; - z-index:9999; - background-color:#666; -} -#gritter-notice-wrapper.bottom-right { - top: auto; - left: auto; - bottom: 20px; - right: 20px; -} -.gritter-item-wrapper { - position:relative; - margin:0 0 10px 0; -} - -.gritter-top { - height:10px; -} -.hover .gritter-top { - background-position:right -30px; -} -.gritter-bottom { - height:8px; - margin:0; -} -.hover .gritter-bottom { - background-position: bottom right; -} -.gritter-item { - display:block; - color:#eee; - padding:2px 11px 8px 11px; - font-size: 11px; - font-family:verdana; -} -.hover .gritter-item { - background-position:right -40px; -} -.gritter-item p { - padding:0; - margin:0; -} -.gritter-close { - display:none; - position:absolute; - top:5px; - left:3px; - cursor:pointer; - width:30px; - height:30px; -} -.gritter-title { - font-size:14px; - font-weight:bold; - padding:0 0 7px 0; - display:block; - text-shadow:1px 1px 0 #000; /* Not supported by IE :( */ -} -.gritter-image { - width:48px; - height:48px; - float:left; -} -.gritter-with-image, -.gritter-without-image { - padding:0 0 5px 0; -} -.gritter-with-image { - width:220px; - float:right; -} -/* for the light (white) version of the gritter notice */ -.gritter-light .gritter-item, -.gritter-light .gritter-bottom, -.gritter-light .gritter-top, -.gritter-close { - color: #222; -} -.gritter-light .gritter-title { - text-shadow: none; -} -/* End of gritter stuff */ - -/* Montserrat Font */ -@font-face { - font-family: "Montserrat"; - src: url("../../static/font/Montserrat-Light.otf") format("opentype"); - font-weight: normal; - font-style: normal; -} -@font-face { - font-family: "Montserrat"; - src: url("../../static/font/Montserrat-Regular.otf") format("opentype"); - font-weight: bold; - font-style: normal; -} -/* End of Monterrat Font */ - -@font-face { - font-family: opendyslexic; - src: url("../../static/font/opendyslexic.otf") format("opentype"); -} - -/* Roboto Mono */ -@font-face { - font-family: "RobotoMono"; - src: url("../../static/font/RobotoMono-Regular.ttf") format("truetype"); - font-weight: normal; - font-style: normal; -} -@font-face { - font-family: "RobotoMono"; - src: url("../../static/font/RobotoMono-Bold.ttf") format("truetype"); - font-weight: bold; - font-style: normal; -} -/* End of Roboto Mono */ - -@font-face { - font-family: "fontawesome-etherpad"; - src:url("../../static/font/fontawesome-etherpad.eot"); - src:url("../../static/font/fontawesome-etherpad.eot?#iefix") format("embedded-opentype"), - url("../../static/font/fontawesome-etherpad.woff") format("woff"), - url("../../static/font/fontawesome-etherpad.ttf") format("truetype"), - url("../../static/font/fontawesome-etherpad.svg#fontawesome-etherpad") format("svg"); - font-weight: normal; - font-style: normal; - -} - -[data-icon]:before, -[class^="icon-"]:before, -[class*=" icon-"]:before { - font-family: "fontawesome-etherpad" !important; - font-style: normal !important; - font-weight: normal !important; - font-variant: normal !important; - text-transform: none !important; - speak: none; - line-height: 1; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - .hideControlsEditor{ top:0px !important; } .hideControlsEditbar{ display:none !important; -} +} \ No newline at end of file diff --git a/src/static/css/pad/chat.css b/src/static/css/pad/chat.css new file mode 100644 index 00000000000..b8757f5f3c8 --- /dev/null +++ b/src/static/css/pad/chat.css @@ -0,0 +1,201 @@ +#chatbox { + position: absolute; + bottom: 0px; + right: 20px; + width: 180px; + height: 200px; + z-index: 400; + background-color: #f7f7f7; + border-left: 1px solid #999; + border-right: 1px solid #999; + border-top: 1px solid #999; + padding: 3px; + padding-bottom: 10px; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + display: none; +} +#chattext { + background-color: white; + border: 1px solid white; + -ms-overflow-y: scroll; + overflow-y: scroll; + font-size: 12px; + position: absolute; + right: 0px; + left: 0px; + top: 25px; + bottom: 25px; + z-index: 1002; +} +#chattext p { + padding: 3px; + -ms-overflow-x: hidden; + overflow-x: hidden; +} +.chatloadmessages +{ + margin-bottom: 5px; + margin-top: 5px; + margin-left: auto; + margin-right: auto; + display: block; +} +#chatloadmessagesbutton +{ + line-height: 1.8em; +} +#chatloadmessagesball +{ + display: none; +} +#chatinputbox { + padding: 3px 2px; + position: absolute; + bottom: 0px; + right: 0px; + left: 3px; +} +#chatlabel { + font-size: 13px; + font-weight: bold; + color: #555; + text-decoration: none; + margin-right: 3px; + vertical-align: middle; +} +#chatinput { + border: 1px solid #BBBBBB; + width: 100%; + float: right; +} +#chaticon { + z-index: 400; + position: fixed; + bottom: 0px; + right: 20px; + padding: 5px; + border-left: 1px solid #999; + border-right: 1px solid #999; + border-top: 1px solid #999; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + background-color: #fff; + cursor: pointer; + display: none; +} +#chaticon a { + text-decoration: none +} +#chatcounter { + color: #777; + font-size: 10px; + vertical-align: middle; +} +#chattext p { + word-wrap: break-word +} + +#titlebar { + line-height: 16px; + font-weight: bold; + color: #555; + position: relative; + bottom: 2px; +} +#titlelabel { + font-size: 13px; + margin: 4px 0 0 4px; + position: absolute; +} +#titlesticky{ + font-size: 10px; + padding-top:2px; + float: right; + text-align: right; + text-decoration: none; + cursor: pointer; + color: #555; +} +#titlecross { + font-size: 25px; + float: right; + text-align: right; + text-decoration: none; + cursor: pointer; + color: #555; +} + +.stickyChat { + background-color: #f1f1f1 !important; + right: 0px !important; + top: 37px; + -webkit-border-radius: 0px !important; + -moz-border-radius: 0px !important; + border-radius: 0px !important; + height: auto !important; + border: none !important; + border-left: 1px solid #ccc !important; + width: 185px !important; +} +.chatAndUsers{ + display:block !important; + right:0px !important; + border-radius:0px !important; + width:182px !important; +/* Below makes UI look weird when X makes editbar flow onto two lines */ +/* margin:2px 0 0 0 !important;*/ + border: none !important; + border-bottom: 1px solid #ccc !important; + height:155px !important; + border-left: 1px solid #ccc !important; +} +.chatAndUsers > #otherusers{ + max-height: 100px; + overflow-y: auto; +} +.chatAndUsersChat > div > #titlecross{ + display:none; +} +.chatAndUsersChat{ + bottom:0px !important; + padding:0 !important; + margin: 165px 0px 0px 0px; + right:0 !important; + width:182px !important; + border: none !important; + padding:5px !important; + border-left: 1px solid #ccc !important; +} +#chatthrob { + display: none; + position: absolute; + bottom: 40px; + font-size: 14px; + width: 150px; + height: 40px; + right: 20px; + z-index: 200; + background-color: #000; + color: white; + background-color: rgb(0,0,0); + background-color: rgba(0,0,0,0.7); + padding: 10px; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; + filter: alpha(opacity=80); + opacity: .8; +} +@media only screen and (max-width: 720px) { + #chaticon { + position:fixed; + right:48px; + } + #chatbox { + position:fixed; + bottom:33px !important; + margin: 65px 0 0 0; + } +} diff --git a/src/static/css/pad/fonts.css b/src/static/css/pad/fonts.css new file mode 100644 index 00000000000..f4c6e6f335a --- /dev/null +++ b/src/static/css/pad/fonts.css @@ -0,0 +1,34 @@ +/* Montserrat Font */ +@font-face { + font-family: "Montserrat"; + src: url("../../../static/font/Montserrat-Light.otf") format("opentype"); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: "Montserrat"; + src: url("../../../static/font/Montserrat-Regular.otf") format("opentype"); + font-weight: bold; + font-style: normal; +} +/* End of Monterrat Font */ + +@font-face { + font-family: opendyslexic; + src: url("../../../static/font/opendyslexic.otf") format("opentype"); +} + +/* Roboto Mono */ +@font-face { + font-family: "RobotoMono"; + src: url("../../../static/font/RobotoMono-Regular.ttf") format("truetype"); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: "RobotoMono"; + src: url("../../../static/font/RobotoMono-Bold.ttf") format("truetype"); + font-weight: bold; + font-style: normal; +} +/* End of Roboto Mono */ \ No newline at end of file diff --git a/src/static/css/pad/gritter.css b/src/static/css/pad/gritter.css new file mode 100644 index 00000000000..6344f35f37b --- /dev/null +++ b/src/static/css/pad/gritter.css @@ -0,0 +1,131 @@ +#gritter-notice-wrapper { + position:fixed; + top:20px; + right:20px; + width:301px; + z-index:9999; + background-color:#666; +} +#gritter-notice-wrapper.bottom-right { + top: auto; + left: auto; + bottom: 20px; + right: 20px; +} +.gritter-item-wrapper { + position:relative; + margin:0 0 10px 0; +} + +.gritter-top { + height:10px; +} +.hover .gritter-top { + background-position:right -30px; +} +.gritter-bottom { + height:8px; + margin:0; +} +.hover .gritter-bottom { + background-position: bottom right; +} +.gritter-item { + display:block; + color:#eee; + padding:2px 11px 8px 11px; + font-size: 11px; + font-family:verdana; +} +.hover .gritter-item { + background-position:right -40px; +} +.gritter-item p { + padding:0; + margin:0; +} +.gritter-close { + display:none; + position:absolute; + top:5px; + left:3px; + cursor:pointer; + width:30px; + height:30px; +} +.gritter-title { + font-size:14px; + font-weight:bold; + padding:0 0 7px 0; + display:block; + text-shadow:1px 1px 0 #000; /* Not supported by IE :( */ +} +.gritter-image { + width:48px; + height:48px; + float:left; +} +.gritter-with-image, +.gritter-without-image { + padding:0 0 5px 0; +} +.gritter-with-image { + width:220px; + float:right; +} +/* for the light (white) version of the gritter notice */ +.gritter-light .gritter-item, +.gritter-light .gritter-bottom, +.gritter-light .gritter-top, +.gritter-close { + color: #222; +} +.gritter-light .gritter-title { + text-shadow: none; +} + +@media all and (max-width: 400px){ + #gritter-notice-wrapper{ + max-height:172px; + overflow:hidden; + width:100% !important; + background-color: #ccc; + bottom:20px; + left:0px; + right:0px; + color:#000; + } + .gritter-close { + display:block !important; + left: auto !important; + right:5px; + } + #gritter-notice-wrapper.bottom-right{ + left:0px !important; + bottom:30px !important; + right:0px !important; + } + .gritter-item p{ + color:black; + font-size:16px; + } + .gritter-title{ + text-shadow: none !important; + color:black; + } + .gritter-item{ + padding:2px 11px 8px 4px; + } + .gritter-item-wrapper{ + margin:0; + } + .gritter-item-wrapper > div{ + background: none; + } +} +@media only screen and (max-width: 720px) { + #gritter-notice-wrapper{ + bottom:43px !important; + right:10px !important; + } +} \ No newline at end of file diff --git a/src/static/css/pad/icons.css b/src/static/css/pad/icons.css new file mode 100644 index 00000000000..08bc6426708 --- /dev/null +++ b/src/static/css/pad/icons.css @@ -0,0 +1,108 @@ +@font-face { + font-family: "fontawesome-etherpad"; + src:url("../../../static/font/fontawesome-etherpad.eot"); + src:url("../../../static/font/fontawesome-etherpad.eot?#iefix") format("embedded-opentype"), + url("../../../static/font/fontawesome-etherpad.woff") format("woff"), + url("../../../static/font/fontawesome-etherpad.ttf") format("truetype"), + url("../../../static/font/fontawesome-etherpad.svg#fontawesome-etherpad") format("svg"); + font-weight: normal; + font-style: normal; + +} + +[data-icon]:before, +[class^="icon-"]:before, +[class*=" icon-"]:before { + font-family: "fontawesome-etherpad" !important; + font-style: normal !important; + font-weight: normal !important; + font-variant: normal !important; + text-transform: none !important; + speak: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.buttonicon { + width: 16px; + height: 16px; + display: inline-block; + vertical-align: middle; + border: none; + padding: 0; + background: none; + font-family: "fontawesome-etherpad"; + font-size: 15px; + font-style: normal; + font-weight: normal; + color: #666; + cursor: pointer; +} + +.buttonicon::-moz-focus-inner { + padding: 0; + border: 0 +} + +.buttonicon:before { + font-family: "fontawesome-etherpad"; +} + +.buttonicon:focus{ + border: 1px solid #666; +} +.buttonicon-bold:before { + content: "\e81c"; +} +.buttonicon-italic:before { + content: "\e81d"; +} +.buttonicon-underline:before { + content: "\e817"; +} +.buttonicon-strikethrough:before { + content: "\e818"; +} +.buttonicon-insertorderedlist:before { + content: "\e816"; +} +.buttonicon-insertunorderedlist:before { + content: "\e815"; +} +.buttonicon-indent:before { + content: "\e814"; +} +.buttonicon-outdent:before { + content: "\e813"; +} +.buttonicon-undo:before { + content: "\e823"; +} +.buttonicon-redo:before { + content: "\e824"; +} +.buttonicon-clearauthorship:before { + content: "\e80d"; +} +.buttonicon-settings:before { + content: "\e833"; +} +.buttonicon-import_export:before { + content: "\e834"; +} +.buttonicon-embed:before { + content: "\e827"; +} +.buttonicon-history:before { + content: "\e837"; +} +.buttonicon-chat:before { + content: "\e829"; +} +.buttonicon-showusers:before { + content: "\e808"; +} +.buttonicon-savedRevision:before { + content: "\e835"; +} \ No newline at end of file diff --git a/src/static/css/pad/layout.css b/src/static/css/pad/layout.css new file mode 100644 index 00000000000..4245353ef65 --- /dev/null +++ b/src/static/css/pad/layout.css @@ -0,0 +1,41 @@ +html { + font-size: 62.5%; + width: 100%; +} +#editorcontainerbox { + position: absolute; + bottom: 0; + top: 0; + width: 100%; +} +#editorcontainer { + position: absolute; + top: 37px; /* + 1px border */ + left: 0px; + right: 0px; + bottom: 0px; + z-index: 1; + + /* Required to be able to scroll on iOS: */ + -webkit-overflow-scrolling: touch; +} +#editorcontainer iframe { + height: 100%; + width: 100%; + padding: 0; + margin: 0; + left: 0; /* Required for safari fixes RTL */ +} +iframe { + position: absolute +} +@media all and (max-width: 400px) { + #editorcontainer { + top: 68px; + } +} +@media only screen and (max-width: 720px) { + #editorcontainer { + margin-bottom: 33px + } +} \ No newline at end of file diff --git a/src/static/css/pad/loadingbox.css b/src/static/css/pad/loadingbox.css new file mode 100644 index 00000000000..47d740b3153 --- /dev/null +++ b/src/static/css/pad/loadingbox.css @@ -0,0 +1,58 @@ +#editorloadingbox { + padding-top: 100px; + padding-bottom: 100px; + font-size: 2.5em; + color: #aaa; + text-align: center; + position: absolute; + width: 100%; + height: 30px; + z-index: 100; +} + +#editorloadingbox .passForm{ + padding:10px; +} + +#editorloadingbox input{ + padding:10px; +} + +#editorloadingbox button{ + padding:10px; +} + +.loadingAnimation{ + -webkit-animation: loadingAnimation 2s infinite linear; + animation: loadingAnimation 2s infinite linear; + font-family: "fontawesome-etherpad"; + font-size:24px; + z-index:150; + width:25px; + height:25px; +} + +.loadingAnimation:before{ + content: "\e80e"; +} + +@-webkit-keyframes loadingAnimation { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} +@keyframes loadingAnimation { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} \ No newline at end of file diff --git a/src/static/css/pad/popup.css b/src/static/css/pad/popup.css new file mode 100644 index 00000000000..f312f7de59e --- /dev/null +++ b/src/static/css/pad/popup.css @@ -0,0 +1,114 @@ +.popup { + font-size: 12px; + width: 80%; + max-width: 500px; + padding: 10px; + border-radius: 0 0 6px 6px; + border: 1px solid #ccc; + border-top: none; + background: #f7f7f7; + background: -webkit-linear-gradient(#F7F7F7, #EEE); + background: -moz-linear-gradient(#F7F7F7, #EEE); + background: -ms-linear-gradient(#F7F7F7, #EEE); + background: -o-linear-gradient(#F7F7F7, #EEE); + background: linear-gradient(#F7F7F7, #EEE); + -webkit-box-shadow: 0 0 8px #888; + -moz-box-shadow: 0 0 8px #888; + box-shadow: 0 2px 4px #ddd; + color: #222; +} +.popup input[type=text] { + width: 100%; + padding: 5px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + display: block; + margin-top: 10px; +} +.popup input[type=text], #users input[type=text] { + outline: none; +} +.popup button { + padding: 5px; + font-size: 14px; +} +.popup a { + text-decoration: none +} +.popup h1 { + color: #555; + font-size: 18px +} +.popup h2 { + color: #777; + font-size: 15px +} +.popup p { + margin: 5px 0 +} +.popup select { + background: #fff; + padding: 2px; + height: 24px; + border-radius: 3px; + border: 1px solid #ccc; + outline: none; + width: 120px; +} +#settings, +#import_export, +#embed, +#connectivity, +#users { + position: absolute; + top: 38px; + right: 20px; + display: none; + z-index: 500; +} + +@media all and (max-width: 400px){ + .popup { + width:100%; + max-width:300px; + top: 72px !important; + } +} + +/* Mobile devices */ +@media only screen and (max-width: 720px) { + #users { + top: auto; + right:0px !important; + bottom: 33px; + border-radius: 0px !important; + height: 55px !important; + overflow: auto; + } + #mycolorpicker { + left: 0px; + top:37px !important; + position:fixed; + } + .popup { + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + width: 100%; + } + #settings, + #import_export, + #connectivity, + #embed { + top:auto; + left: 0; + bottom: 33px; + right: 0; + } +} \ No newline at end of file diff --git a/src/static/css/pad/popup_connectivity.css b/src/static/css/pad/popup_connectivity.css new file mode 100644 index 00000000000..d0196ec4254 --- /dev/null +++ b/src/static/css/pad/popup_connectivity.css @@ -0,0 +1,28 @@ +#connectivity { + z-index: 600 !important; +} + +#connectivity * { + display: none; +} + +#connectivity .visible, +#connectivity .visible * { + display: block; +} + +/* styles for the automatic reconnection timer: */ +#connectivity .visible.with_reconnect_timer button, +#connectivity .visible.with_reconnect_timer .reconnecttimer * { + display: inline-block; +} + +#connectivity .with_reconnect_timer .hidden, +#connectivity .with_reconnect_timer #defaulttext.hidden, +#connectivity .with_reconnect_timer button.hidden { + display: none; +} + +#connectivity .with_reconnect_timer #cancelreconnect { + margin-left: 10px; +} \ No newline at end of file diff --git a/src/static/css/pad/popup_import_export.css b/src/static/css/pad/popup_import_export.css new file mode 100644 index 00000000000..2bac0d21935 --- /dev/null +++ b/src/static/css/pad/popup_import_export.css @@ -0,0 +1,59 @@ +#exportColumn{ + margin-top:20px; +} +.exporttype { + margin-top: 4px; + background-repeat: no-repeat; + padding-left: 25px; + color: #333; + text-decoration: none; + padding-bottom:2px; + display:inline; + padding-left:5px; + font-family: "Arial"; +} +.exportlink{ + font-family: "fontawesome-etherpad"; + display:block; + margin:5px; + color:#666; +} +#exporthtmla:before { + content: "\e826"; +} +#exportplaina:before { + content: "\e802"; +} +#exportworda:before { + content: "\e804"; +} +#exportpdfa:before { + content: "\e803"; +} +#exportetherpada:before { + content: "\e806"; +} +#exportopena:before { + content: "\e805"; +} + +/* hidden element */ +#importstatusball, +#importmessagesuccess, +#importmessageabiword { + display: none; +} + +#importsubmitinput.throbbold{ + font-weight:bold; +} + +#importmessageabiword { + color: #900; + font-size: small; +} + +#importsubmitinput { + margin-top: 12px; + padding:2px 4px 2px 4px; +} \ No newline at end of file diff --git a/src/static/css/pad/popup_users.css b/src/static/css/pad/popup_users.css new file mode 100644 index 00000000000..4e12c3eafda --- /dev/null +++ b/src/static/css/pad/popup_users.css @@ -0,0 +1,196 @@ +#users { + background: #f7f7f7; + background: -webkit-linear-gradient( #F7F7F7,#EEE); + background: -moz-linear-gradient( #F7F7F7,#EEE); + background: -ms-linear-gradient( #F7F7F7,#EEE); + background: -o-linear-gradient( #F7F7F7,#EEE); + background: linear-gradient( #F7F7F7,#EEE); + width: 160px; + color: #fff; + padding: 5px; + border-radius: 0 0 6px 6px; + border: 1px solid #ccc; +} +#otherusers { + max-height: 400px; + overflow: auto; +} +#myswatchbox { + position: absolute; + left: 5px; + top: 5px; + width: 24px; + height: 24px; + border: 1px solid #000; + background: transparent; + cursor: pointer; +} +#myswatch { + width: 100%; + height: 100%; + background: transparent; /*...initially*/ +} +#mycolorpicker { + width: 232px; + height: 265px; + position: absolute; + left: -250px; + top: 0px; + z-index: 101; + display: none; + border-radius: 0 0 6px 6px; + background: #f7f7f7; + border: 1px solid #ccc; + border-top: 0; + padding-left: 10px; + padding-top: 10px; +} +#mycolorpickersave { + left: 10px; + font-weight: bold; +} +#mycolorpickercancel { + left: 85px +} +#mycolorpickersave, +#mycolorpickercancel { + background: #fff; + background: -webkit-linear-gradient(#fff, #ccc); + background: -moz-linear-gradient(#fff, #ccc); + background: -o-linear-gradient(#fff, #ccc); + background: -ms-linear-gradient(#fff, #ccc); + background: linear-gradient(#fff, #ccc); + border: 1px solid #ccc; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + font-size: 12px; + cursor: pointer; + color: #000; + overflow: hidden; + padding: 4px; + top: 240px; + text-align: center; + position: absolute; + width: 60px; +} +#mycolorpickerpreview { + position: absolute; + left: 207px; + top: 240px; + width: 16px; + height: 16px; + padding: 4px; + overflow: hidden; + color: #fff; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} +#myusernameform { + margin-left: 30px +} +#myusernameedit { + font-size: 1.3em; + color: #fff; + padding: 3px; + height: 18px; + margin: 0; + border: 0; + width: 122px; + background: transparent; +} +#myusernameform input.editable { + border: 1px solid #444 +} +#myuser .myusernameedithoverable:hover { + background: white; + color: black; +} +#mystatusform { + margin-left: 35px; + margin-top: 5px; +} +#mystatusedit { + font-size: 1.2em; + color: #777; + font-style: italic; + display: none; + padding: 2px; + height: 14px; + margin: 0; + border: 1px solid #bbb; + width: 199px; + background: transparent; +} +#myusernameform .editactive, +#myusernameform .editempty { + background: white; + border-left: 1px solid #c3c3c3; + border-top: 1px solid #c3c3c3; + border-right: 1px solid #e6e6e6; + border-bottom: 1px solid #e6e6e6; + color: #000; +} +#myusernameform .editempty { + color: #333 +} +#myswatchbox, #myusernameedit, #otheruserstable .swatch { + border: 1px solid #ccc !important; + color: #333; +} +table#otheruserstable { + display: none +} +#otheruserstable td { + height: 26px; + vertical-align: middle; + padding: 0 2px; + color: #333; +} +#otheruserstable .swatch { + border: 1px solid #000; + width: 13px; + height: 13px; + overflow: hidden; + margin: 0 4px; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.usertdswatch { + width: 1% +} +.usertdname { + font-size: 1.3em; + color: #444; +} +.usertdstatus { + font-size: 1.1em; + font-style: italic; + color: #999; +} +.usertdactivity { + font-size: 1.1em; + color: #777; +} +.usertdname input { + border: 1px solid #bbb; + width: 80px; + padding: 2px; +} +.usertdname input.editactive, +.usertdname input.editempty { + background: white; + border-left: 1px solid #c3c3c3; + border-top: 1px solid #c3c3c3; + border-right: 1px solid #e6e6e6; + border-bottom: 1px solid #e6e6e6; +} +.usertdname input.editempty { + color: #888; + font-style: italic; +} \ No newline at end of file diff --git a/src/static/css/pad/toolbar.css b/src/static/css/pad/toolbar.css new file mode 100644 index 00000000000..f07b5cc2fd1 --- /dev/null +++ b/src/static/css/pad/toolbar.css @@ -0,0 +1,253 @@ +/* menu */ +.toolbar { + display:none; /* hidden by default */ +} +.toolbar { + background: #f7f7f7; + background: -webkit-linear-gradient(#f7f7f7, #f1f1f1 80%); + background: -moz-linear-gradient(#f7f7f7, #f1f1f1 80%); + background: -o-linear-gradient(#f7f7f7, #f1f1f1 80%); + background: -ms-linear-gradient(#f7f7f7, #f1f1f1 80%); + background: linear-gradient(#f7f7f7, #f1f1f1 80%); + border-bottom: 1px solid #ccc; + overflow: hidden; + padding-top: 4px; + width: 100%; + white-space: nowrap; + height: 32px; +} +.toolbar ul { + position: absolute; + list-style: none; + padding-right: 3px; + padding-left: 1px; + z-index: 2; + overflow: hidden; + float: left +} +.toolbar ul li { + float: left; + margin-left: 2px; + height:32px; + cursor: pointer; +} +.toolbar ul li.separator { + border: inherit; + background: inherit; + visibility: hidden; + width: 0px; + padding: 5px; + height:22px; +} +.toolbar ul li a:hover { + text-decoration: none; +} +.toolbar ul li a:hover { + background: #fff; + background: -webkit-linear-gradient(#f4f4f4, #e4e4e4); + background: -moz-linear-gradient(#f4f4f4, #e4e4e4); + background: -o-linear-gradient(#f4f4f4, #e4e4e4); + background: -ms-linear-gradient(#f4f4f4, #e4e4e4); + background: linear-gradient(#f4f4f4, #e4e4e4); +} +.toolbar ul li a:active { + background: #eee; + background: -webkit-linear-gradient(#ddd, #fff); + background: -moz-linear-gradient(#ddd, #fff); + background: -o-linear-gradient(#ddd, #fff); + background: -ms-linear-gradient(#ddd, #fff); + background: linear-gradient(#ddd, #fff); + -webkit-box-shadow: 0 0 8px rgba(0,0,0,.1) inset; + -moz-box-shadow: 0 0 8px rgba(0,0,0,.1) inset; + box-shadow: 0 0 8px rgba(0,0,0,.1) inset; +} +.toolbar ul li .activeButton { + background: #eee; + background: -webkit-linear-gradient(#ddd, #fff); + background: -moz-linear-gradient(#ddd, #fff); + background: -o-linear-gradient(#ddd, #fff); + background: -ms-linear-gradient(#ddd, #fff); + background: linear-gradient(#ddd, #fff); + -webkit-box-shadow: 0 0 8px rgba(0,0,0,.1) inset; + -moz-box-shadow: 0 0 8px rgba(0,0,0,.1) inset; + box-shadow: 0 0 8px rgba(0,0,0,.1) inset; +} +.toolbar ul li a { + background: #fff; + background: -webkit-linear-gradient(#fff, #f0f0f0); + background: -moz-linear-gradient(#fff, #f0f0f0); + background: -o-linear-gradient(#fff, #f0f0f0); + background: -ms-linear-gradient(#fff, #f0f0f0); + background: linear-gradient(#fff, #f0f0f0); + border: 1px solid #ccc; + border-radius: 3px; + color: #ccc; + cursor: pointer; + display: inline-block; + min-height: 18px; + overflow: hidden; + padding: 4px 5px; + text-align: center; + text-decoration: none; + min-width: 18px; +} +.toolbar ul li a .buttonicon { + position: relative; + top: 1px; +} +.toolbar ul li a .buttontext { + color: #666; + font-size: 14px; + border:none; + background:none; + margin-top:1px; + color:#666; +} +.toolbar ul li a.grouped-left { + border-radius: 3px 0 0 3px; +} +.toolbar ul li a.grouped-middle { + border-radius: 0; + margin-left: -2px; + border-left: 0; +} +.toolbar ul li a.grouped-right { + border-radius: 0 3px 3px 0; + margin-left: -2px; + border-left: 0; +} +.toolbar ul li a.selected { + background: #eee !important; + background: -webkit-linear-gradient(#EEE, #F0F0F0) !important; + background: -moz-linear-gradient(#EEE, #F0F0F0) !important; + background: -o-linear-gradient(#EEE, #F0F0F0) !important; + background: -ms-linear-gradient(#EEE, #F0F0F0) !important; + background: linear-gradient(#EEE, #F0F0F0) !important; +} +.toolbar ul li select { + background: #fff; + padding: 4px; + line-height: 22px; /* fix for safari (win/mac) */ + height: 28px; /* fix for chrome (mac) */ + border-radius: 3px; + border: 1px solid #ccc; + outline: none; +} +.toolbar ul.menu_left { + left: 0px; + right: 210px; +} + +.toolbar ul.menu_right { + right:0px; +} +li[data-key=showusers] > a { + min-width: 30px; + text-align: left; +} +li[data-key=showusers] > a #online_count { + color: #777; + font-size: 11px; + position: relative; + top: 2px; + padding-left: 2px; +} +.toolbar #overlay { + z-index: 500; + display: none; + background-repeat: repeat-both; + width: 100%; + position: absolute; + height: inherit; + left: 0; + top: 0; +} +* html #overlay { + /* for IE 6+ */ + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + filter: alpha(opacity=100); + opacity: 1; /* in case this is looked at */ + background-image: none; + background-repeat: no-repeat; /* scale the image */ +} + +@media all and (max-width: 400px){ + .toolbar { + height: 62px; + } + .toolbar ul.menu_left { + left:0px; + right:100px; + } +} +@media screen and (max-width: 600px) { + .toolbar ul li.separator { + display: none; + } + .toolbar ul li a { + padding: 4px 1px + } + .toolbar ul.menu_left { + left:0px; + right:150px; + } +} +@media only screen and (max-width: 720px) { + /* cancel non-mobile border (will be defined on ".toolbar ul.menu_left" bellow) */ + .toolbar { + border-bottom: 0; + } + .toolbar ul { + background: #f7f7f7; + background: -webkit-linear-gradient(#f7f7f7, #f1f1f1 80%); + background: -moz-linear-gradient(#f7f7f7, #f1f1f1 80%); + background: -o-linear-gradient(#f7f7f7, #f1f1f1 80%); + background: -ms-linear-gradient(#f7f7f7, #f1f1f1 80%); + background: linear-gradient(#f7f7f7, #f1f1f1 80%); + width: 100%; + overflow: hidden; + } + .toolbar ul.menu_left { + right:0px; + position: relative; + display: flex; + top: 0; + overflow-x: auto; + padding: 4px 0 0 0; + border-bottom: 1px solid #ccc; + z-index: 10; + } + .toolbar ul.menu_right, .timeslider-bar .editbarright { + right:0px !important; + height: 32px; + position: fixed; + bottom: 0; + border-top: 1px solid #ccc; + } + .toolbar ul.menu_right > li:last-child { + float: right; + } + .toolbar ul.menu_right > li a { + border-radius: 0; + border: none; + background: none; + margin: 0; + padding: 8px; + } + .toolbar ul li a.selected { + background: none !important + } + li[data-key="showusers"] > a { + + margin-top:-10px; + padding-top:2px !important; + line-height:20px; + vertical-align:top !important; + } + .toolbar ul li .separator { + display: none + } + .toolbar #online_count { + line-height: 24px + } +} \ No newline at end of file diff --git a/src/static/css/timeslider.css b/src/static/css/timeslider.css index 0311b10eeb8..c1942240f98 100644 --- a/src/static/css/timeslider.css +++ b/src/static/css/timeslider.css @@ -9,6 +9,29 @@ p.pblort { top: 40px; position: static; } +#padpage { + position: absolute; + top: 0px; + bottom: 0px; + width: 100%; +} +#padmain { + margin-top: 0px; + position: absolute; + top: 63px !important; + left: 0px; + right: 0px; + bottom: 0px; + zoom: 1; +} +#padeditor { + bottom: 0px; + left: 0; + position: absolute; + right: 0px; + top: 0; + zoom: 1; +} #padcontent { font-size: 12px; padding: 10px; From 51174c45773e0c278d3e071bed6d6abb0068694a Mon Sep 17 00:00:00 2001 From: Sebastian Castro Date: Sat, 21 Mar 2020 11:19:58 +0100 Subject: [PATCH 02/70] css: remove no more used element #nootherusers, #chatthrob, #focusprotector, #mystatusform, .hotrect, .throbbold --- src/static/css/iframe_editor.css | 5 ----- src/static/css/pad.css | 14 ------------ src/static/css/pad/chat.css | 22 +------------------ src/static/css/pad/popup_import_export.css | 4 ---- src/static/js/pad_userlist.js | 18 --------------- .../skins/colibris/src/components/users.css | 4 ---- src/templates/pad.html | 7 +----- 7 files changed, 2 insertions(+), 72 deletions(-) diff --git a/src/static/css/iframe_editor.css b/src/static/css/iframe_editor.css index 9aa003aaf73..715cf07f886 100644 --- a/src/static/css/iframe_editor.css +++ b/src/static/css/iframe_editor.css @@ -110,11 +110,6 @@ body.doesWrap:not(.noprewrap) > div{ height: 1px; /* changed programmatically */ } -#outerdocbody .hotrect { - border: 1px solid #999; - position: absolute; -} - /* cause "body" area (e.g. where clicks are heard) to grow horizontally with text */ body.mozilla, body.safari { display: table-cell; diff --git a/src/static/css/pad.css b/src/static/css/pad.css index d57b469860e..18d3be02d3b 100644 --- a/src/static/css/pad.css +++ b/src/static/css/pad.css @@ -39,7 +39,6 @@ a img { /* Not sure why important is required here but it is */ border: 1px solid #666 !important; } - .time { float: right; color: #333; @@ -49,19 +48,6 @@ a img { margin-right: 3px; margin-top: 2px; } -#focusprotector { - z-index: 100; - position: absolute; - bottom: 0px; - top: 0px; - left: 0px; - right: 0px; - background-color: white; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)"; - filter: alpha(opacity=1); - opacity: 0.01; - display: none; -} .rtl { direction: RTL } diff --git a/src/static/css/pad/chat.css b/src/static/css/pad/chat.css index b8757f5f3c8..3e22b94c53a 100644 --- a/src/static/css/pad/chat.css +++ b/src/static/css/pad/chat.css @@ -167,27 +167,7 @@ padding:5px !important; border-left: 1px solid #ccc !important; } -#chatthrob { - display: none; - position: absolute; - bottom: 40px; - font-size: 14px; - width: 150px; - height: 40px; - right: 20px; - z-index: 200; - background-color: #000; - color: white; - background-color: rgb(0,0,0); - background-color: rgba(0,0,0,0.7); - padding: 10px; - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; - filter: alpha(opacity=80); - opacity: .8; -} + @media only screen and (max-width: 720px) { #chaticon { position:fixed; diff --git a/src/static/css/pad/popup_import_export.css b/src/static/css/pad/popup_import_export.css index 2bac0d21935..ba9a73fa852 100644 --- a/src/static/css/pad/popup_import_export.css +++ b/src/static/css/pad/popup_import_export.css @@ -44,10 +44,6 @@ display: none; } -#importsubmitinput.throbbold{ - font-weight:bold; -} - #importmessageabiword { color: #900; font-size: small; diff --git a/src/static/js/pad_userlist.js b/src/static/js/pad_userlist.js index 11b95880ac7..abf1620cb0c 100644 --- a/src/static/js/pad_userlist.js +++ b/src/static/js/pad_userlist.js @@ -421,20 +421,6 @@ var paduserlist = (function() jqueryNode.removeAttr('disabled').addClass('editable'); } - function updateInviteNotice() - { - if (otherUsersInfo.length == 0) - { - $("#otheruserstable").hide(); - $("#nootherusers").show(); - } - else - { - $("#nootherusers").hide(); - $("#otheruserstable").show(); - } - } - var knocksToIgnore = {}; var guestPromptFlashState = 0; var guestPromptFlash = padutils.makeAnimationScheduler( @@ -619,8 +605,6 @@ var paduserlist = (function() rowManager.insertRow(newIndex, userData); } - updateInviteNotice(); - self.updateNumberOfOnlineUsers(); }, updateNumberOfOnlineUsers: function() @@ -668,13 +652,11 @@ var paduserlist = (function() hooks.callAll('userLeave', { userInfo: info }); - updateInviteNotice(); } } }, 8000); // how long to wait userData.leaveTimer = thisLeaveTimer; } - updateInviteNotice(); self.updateNumberOfOnlineUsers(); }, diff --git a/src/static/skins/colibris/src/components/users.css b/src/static/skins/colibris/src/components/users.css index bb5fbb49500..f0d023905e3 100644 --- a/src/static/skins/colibris/src/components/users.css +++ b/src/static/skins/colibris/src/components/users.css @@ -33,10 +33,6 @@ table#otheruserstable { border-radius: 50%; } -#nootherusers { - padding: 0; -} - #mycolorpicker { width: auto; height: auto; diff --git a/src/templates/pad.html b/src/templates/pad.html index ceda1d00e02..23bd2d62d66 100644 --- a/src/templates/pad.html +++ b/src/templates/pad.html @@ -87,14 +87,12 @@
-
-
<% e.end_block(); %> @@ -199,9 +197,6 @@

- <% e.begin_block("globalSettings"); %> -

- <% e.end_block(); %>
@@ -355,7 +350,7 @@

-
 
+ <% e.end_block(); %> <% e.end_block(); %> From b1ec65e31cfd3c0eccb5e4a643eecb9048016a5b Mon Sep 17 00:00:00 2001 From: Sebastian Castro Date: Thu, 2 Apr 2020 14:36:49 +0200 Subject: [PATCH 03/70] css: refactor element positioning No more javascript to change css properties Remove a number of useless tables Try to stop positioning elements with absolute, but use flex-boxes instead Adds comment to pad template, and move popups and chatbox inside editorcontainerbox (so absolute positioning is straightforward) Make the design more consistent: always use base color, font-family and font-size. USe relative font size if necessary (.9rem instead of 11px for example) Remove two columns in the popups, just use one column Remove css meant to support old browser (like -webkit-box-shadow, -moz-box-shadow). Those css rules are quite common now, and If we want to support very old browser, we should use clean-css or other tools to add them automatically --- src/static/css/iframe_editor.css | 172 ++-- src/static/css/pad.css | 58 +- src/static/css/pad/chat.css | 234 ++--- src/static/css/pad/gritter.css | 5 +- src/static/css/pad/layout.css | 62 +- src/static/css/pad/loadingbox.css | 4 + src/static/css/pad/popup.css | 89 +- src/static/css/pad/popup_import_export.css | 36 +- src/static/css/pad/popup_users.css | 219 ++--- src/static/css/pad/toolbar.css | 234 ++--- src/static/css/timeslider.css | 1 - src/static/js/ace.js | 4 +- src/static/js/ace2_inner.js | 78 +- src/static/js/chat.js | 34 +- src/static/js/pad.js | 2 +- src/static/js/pad_editbar.js | 64 +- src/static/js/pad_modals.js | 4 +- .../skins/colibris/src/components/chat.css | 2 +- src/static/skins/no-skin/pad.css | 5 - src/templates/pad.html | 810 +++++++++--------- 20 files changed, 866 insertions(+), 1251 deletions(-) diff --git a/src/static/css/iframe_editor.css b/src/static/css/iframe_editor.css index 715cf07f886..54258cb69bc 100644 --- a/src/static/css/iframe_editor.css +++ b/src/static/css/iframe_editor.css @@ -1,46 +1,61 @@ -/* These CSS rules are included in both the outer and inner ACE iframe. - Also see inner.css, included only in the inner one. +/* + These CSS rules are included in both the outer and inner ACE iframe (pad editor) */ @import url('./lists_and_indents.css'); -html { cursor: text; } /* in Safari, produces text cursor for whole doc (inc. below body) */ -span { cursor: auto; } +html.inner-editor { + height: auto !important; +} +#outerdocbody { + display: flex; + flex-direction: row; + min-height: 100vh; /* take at least full height */ +} +#outerdocbody iframe { + flex: 1 auto; + display: flex; +} +#outerdocbody #sidediv { + order: -1; /* display it on the first row positionning, i.e. on the left */ +} -::selection { - background: #acf; +/* ACE-PAD Container (i.e. where the text is displayed) */ +#innerdocbody { + padding: 10px; + overflow: hidden; + box-sizing: border-box; } -::-moz-selection { - background: #acf; +#innerdocbody, #sidediv { + padding-top: 10px; /* Both must have same top padding, so line number are aligned with the rows */ + padding-bottom: 10px; /* some space when we scroll to the bottom */ } -a { - cursor: pointer !important; - white-space:pre-wrap; +/* --------------------- */ +/* -- BROWSER SUPPORT -- */ +/* --------------------- */ + +body.mozilla, body.safari { + display: table-cell; /* cause "body" area (e.g. where clicks are heard) to grow horizontally with text */ } +.safari div { + padding-right: 1px; /* prevents the caret from disappearing on the longest line of the doc */ +} +html { cursor: text; } /* in Safari, produces text cursor for whole doc (inc. below body) */ +span { cursor: auto; } + + +/* -------------- */ +/* -- WRAPPING -- */ +/* -------------- */ body { - margin: 0; white-space: nowrap; word-wrap: normal; } - -#outerdocbody { - background-color: #fff; -} -body.grayedout { background-color: #eee !important } - -#innerdocbody { - font-size: 12px; /* overridden by body.style */ - font-family:Arial, sans-serif; /* overridden by body.style */ - line-height: 16px; /* overridden by body.style */ - background-color: white; - color: black; -} - body.doesWrap { + display: block !important; /* white-space: pre-wrap; */ - /* Must be pre-wrap to keep trailing spaces. Otherwise you get a zombie caret, walking around your screen (see #1766). @@ -53,81 +68,37 @@ body.doesWrap { */ word-wrap: break-word; /* fix for issue #1648 - firefox not wrapping long lines (without spaces) correctly */ } - .noprewrap{ white-space: normal; } - -body.doesWrap:not(.noprewrap) > div{ +body.doesWrap:not(.noprewrap) > div { /* Related to #1766 */ white-space: pre-wrap; } -#innerdocbody { - padding-top: 1px; /* important for some reason? */ - padding-right: 10px; - padding-bottom: 8px; - padding-left: 1px /* prevents characters from looking chopped off in FF3 -- Removed because it added too much whitespace */; - overflow: hidden; - /* blank 1x1 gif, so that IE8 doesn't consider the body transparent */ - background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==); -} + +/* ------------------------------------------ */ +/* -- SIDEDIV (line number, text author..) -- */ +/* ------------------------------------------ */ #sidediv { font-size: 11px; font-family: monospace; - line-height: 16px; /* overridden by sideDiv.style */ - padding-top: 8px; /* EDIT_BODY_PADDING_TOP */ - padding-right: 3px; /* LINE_NUMBER_PADDING_RIGHT - 1 */ - position: absolute; - width: 20px; /* MIN_LINEDIV_WIDTH */ - top: 0; - left: 0; - cursor: default; - color: white; + padding-right: 5px; + padding-left: 5px; + background-color: #eee; + border-right: 1px solid #ccc; } - #sidedivinner { text-align: right; + opacity: .7; } - -.sidedivdelayed { /* class set after sizes are set */ - background-color: #eee; - color: #888 !important; - border-right: 1px solid #ccc; +#sidediv:not(.sidedivdelayed) { /* before sidediv get initialized, hide text */ + color: transparent; } .sidedivhidden { display: none; } - -#outerdocbody iframe { - display: block; /* codemirror says it suppresses bugs */ - position: relative; - left: 32px; /* MIN_LINEDIV_WIDTH + LINE_NUMBER_PADDING_RIGHT + EDIT_BODY_PADDING_LEFT */ - top: 7px; /* EDIT_BODY_PADDING_TOP - 1*/ - border: 0; - width: 1px; /* changed programmatically */ - height: 1px; /* changed programmatically */ -} - -/* cause "body" area (e.g. where clicks are heard) to grow horizontally with text */ -body.mozilla, body.safari { - display: table-cell; -} - -body.doesWrap { - display: block !important; -} - -.safari div { - /* prevents the caret from disappearing on the longest line of the doc */ - padding-right: 1px; -} - -p { - margin: 0; -} - #linemetricsdiv { position: absolute; left: -1000px; @@ -137,11 +108,34 @@ p { font-size: 12px; /* overridden by lineMetricsDiv.style */ font-family: monospace; /* overridden by lineMetricsDiv.style */ } +@media (max-width: 720px) { + #sidediv { + /* Do not use display: none to hide the sidediv, otherwise the parent container does not + get its height properly calculated by flexboxes */ + visibility: hidden; + width: 0; + padding: 0; + box-sizing: border-box; + } +} -/* Stops super long lines without being spaces such as aaaaaaaaaaaaaa*100 breaking the editor - Commented out because it stops IE from being able to render the document, crazy IE bug is crazy. */ -/* -.ace-line{ - overflow:hidden; + + + +/* ----------- */ +/* -- OTHER -- */ +/* ----------- */ + +::selection { + background: #acf; } -*/ +::-moz-selection { + background: #acf; +} +a { + cursor: pointer !important; + white-space:pre-wrap; +} +body.grayedout { + background-color: #eee !important +} \ No newline at end of file diff --git a/src/static/css/pad.css b/src/static/css/pad.css index 18d3be02d3b..85fbd329365 100644 --- a/src/static/css/pad.css +++ b/src/static/css/pad.css @@ -10,22 +10,22 @@ @import url("pad/gritter.css"); @import url("pad/loadingbox.css"); -*, -html, -body, -p { +html { + font-size: 13px; + font-family: Arial, sans-serif; + line-height: 16px; + background-color: white; + color: #3e3e3e; +} +*, p { margin: 0; - padding: 0px; + padding: 0; } .clear { clear: both } -body, -textarea { - font-family: Helvetica, Arial, sans-serif -} -.readonly .acl-write { - display: none; +a { + color: inherit; } a img { border: 0 @@ -34,20 +34,10 @@ a img { padding: 0; border: 0; } - .buttontext:focus{ /* Not sure why important is required here but it is */ border: 1px solid #666 !important; } -.time { - float: right; - color: #333; - font-style: italic; - font-size: 10px; - margin-left: 3px; - margin-right: 3px; - margin-top: 2px; -} .rtl { direction: RTL } @@ -56,29 +46,9 @@ a img { input[type=checkbox] { vertical-align: -1px } +input { + color: inherit; +} .right { float: right -} - -.row { - float: left; - width: 100%; -} -.row + .row { - margin-top: 15px; -} -.column { - float: left; - width:50%; -} - -#passwordRequired, #permissionDenied, #wrongPassword, #noCookie { - display:none; -} - -.hideControlsEditor{ - top:0px !important; -} -.hideControlsEditbar{ - display:none !important; } \ No newline at end of file diff --git a/src/static/css/pad/chat.css b/src/static/css/pad/chat.css index 3e22b94c53a..7c79ade5747 100644 --- a/src/static/css/pad/chat.css +++ b/src/static/css/pad/chat.css @@ -1,181 +1,133 @@ -#chatbox { +#chaticon, #chatbox { + z-index: 400; position: absolute; bottom: 0px; right: 20px; - width: 180px; - height: 200px; - z-index: 400; - background-color: #f7f7f7; - border-left: 1px solid #999; - border-right: 1px solid #999; - border-top: 1px solid #999; - padding: 3px; - padding-bottom: 10px; border-top-left-radius: 5px; border-top-right-radius: 5px; display: none; + border: 1px solid #ccc; + border-bottom: none; +} +#chatbox { + width: 400px; + height: 300px; + z-index: 401; + background-color: #f7f7f7; + flex-direction: column; +} + +#chatbox.stickyChat { + position: relative; + width: auto; + flex: 1 auto; /* take reminaning vertical space */ + height: auto; + right: 0; + background-color: #f1f1f1; + border-radius: 0; + border: none; + border-left: 1px solid #ccc; +} +#chatbox.stickyChat .stick-to-screen-btn { + display: none; +} +#chatbox.stickyChat.chatAndUsersChat .hide-reduce-btn { + display:none; +} + +/* -- TITLE BAR -- */ +#titlebar { + font-weight: bold; + padding: 5px; +} +#titlebar #titlelabel { + margin: 4px 0 0 4px; +} +#titlebar .stick-to-screen-btn, +#titlebar .hide-reduce-btn { + font-size: 25px; + float: right; + text-align: right; + text-decoration: none; + cursor: pointer; } +#titlebar .stick-to-screen-btn { + font-size: 10px; + padding-top: 2px; +} + +/* -- MESSAGES -- */ #chattext { background-color: white; - border: 1px solid white; - -ms-overflow-y: scroll; - overflow-y: scroll; - font-size: 12px; - position: absolute; - right: 0px; - left: 0px; - top: 25px; - bottom: 25px; - z-index: 1002; + overflow-y: auto; + flex: 1 auto; } #chattext p { padding: 3px; - -ms-overflow-x: hidden; overflow-x: hidden; + word-wrap: break-word; } -.chatloadmessages -{ - margin-bottom: 5px; - margin-top: 5px; - margin-left: auto; - margin-right: auto; - display: block; -} -#chatloadmessagesbutton -{ - line-height: 1.8em; -} -#chatloadmessagesball -{ - display: none; +#chattext .time { + float: right; + font-style: italic; + font-size: .85rem; + opacity: .8; + margin-left: 3px; + margin-right: 2px; } + +/* -- INPUT BOX -- */ #chatinputbox { - padding: 3px 2px; - position: absolute; - bottom: 0px; - right: 0px; - left: 3px; -} -#chatlabel { - font-size: 13px; - font-weight: bold; - color: #555; - text-decoration: none; - margin-right: 3px; - vertical-align: middle; + padding: 5px; } -#chatinput { - border: 1px solid #BBBBBB; +#chatinputbox #chatinput { + border: 1px solid #ccc; width: 100%; - float: right; } + + +/* -- CHAT ICON -- */ #chaticon { - z-index: 400; - position: fixed; - bottom: 0px; - right: 20px; - padding: 5px; - border-left: 1px solid #999; - border-right: 1px solid #999; - border-top: 1px solid #999; - border-top-left-radius: 5px; - border-top-right-radius: 5px; background-color: #fff; cursor: pointer; display: none; + padding: 5px; } #chaticon a { text-decoration: none } -#chatcounter { - color: #777; - font-size: 10px; - vertical-align: middle; -} -#chattext p { - word-wrap: break-word -} - -#titlebar { - line-height: 16px; +#chaticon #chatlabel { font-weight: bold; - color: #555; - position: relative; - bottom: 2px; -} -#titlelabel { - font-size: 13px; - margin: 4px 0 0 4px; - position: absolute; -} -#titlesticky{ - font-size: 10px; - padding-top:2px; - float: right; - text-align: right; text-decoration: none; - cursor: pointer; - color: #555; + margin-right: 3px; + vertical-align: middle; } -#titlecross { - font-size: 25px; - float: right; - text-align: right; - text-decoration: none; - cursor: pointer; - color: #555; +#chaticon #chatcounter { + font-size: .8rem; + vertical-align: middle; } -.stickyChat { - background-color: #f1f1f1 !important; - right: 0px !important; - top: 37px; - -webkit-border-radius: 0px !important; - -moz-border-radius: 0px !important; - border-radius: 0px !important; - height: auto !important; - border: none !important; - border-left: 1px solid #ccc !important; - width: 185px !important; -} -.chatAndUsers{ - display:block !important; - right:0px !important; - border-radius:0px !important; - width:182px !important; -/* Below makes UI look weird when X makes editbar flow onto two lines */ -/* margin:2px 0 0 0 !important;*/ - border: none !important; - border-bottom: 1px solid #ccc !important; - height:155px !important; - border-left: 1px solid #ccc !important; -} -.chatAndUsers > #otherusers{ - max-height: 100px; - overflow-y: auto; +/* -- LOAD MESSAGES -- */ +.chatloadmessages +{ + margin-bottom: 5px; + margin-top: 5px; + margin-left: auto; + margin-right: auto; + display: block; } -.chatAndUsersChat > div > #titlecross{ - display:none; +#chatloadmessagesbutton +{ + line-height: 1.8em; } -.chatAndUsersChat{ - bottom:0px !important; - padding:0 !important; - margin: 165px 0px 0px 0px; - right:0 !important; - width:182px !important; - border: none !important; - padding:5px !important; - border-left: 1px solid #ccc !important; +#chatloadmessagesball +{ + display: none; } @media only screen and (max-width: 720px) { - #chaticon { - position:fixed; - right:48px; - } #chatbox { - position:fixed; - bottom:33px !important; - margin: 65px 0 0 0; + right: 0; + width: 80%; } } diff --git a/src/static/css/pad/gritter.css b/src/static/css/pad/gritter.css index 6344f35f37b..6a88b1dae11 100644 --- a/src/static/css/pad/gritter.css +++ b/src/static/css/pad/gritter.css @@ -32,10 +32,9 @@ } .gritter-item { display:block; - color:#eee; - padding:2px 11px 8px 11px; + color: #eee; + padding: 2px 11px 8px 11px; font-size: 11px; - font-family:verdana; } .hover .gritter-item { background-position:right -40px; diff --git a/src/static/css/pad/layout.css b/src/static/css/pad/layout.css index 4245353ef65..3ef921d3ab1 100644 --- a/src/static/css/pad/layout.css +++ b/src/static/css/pad/layout.css @@ -1,41 +1,45 @@ -html { - font-size: 62.5%; +html, body { width: 100%; + height: 100%; + margin: 0; + padding: 0; } -#editorcontainerbox { - position: absolute; - bottom: 0; - top: 0; - width: 100%; +body { + display: flex; + flex-direction: column; +} +#editbar { + height: auto; } -#editorcontainer { - position: absolute; - top: 37px; /* + 1px border */ - left: 0px; - right: 0px; - bottom: 0px; - z-index: 1; +#editorcontainerbox { + flex: 1 auto; + position: relative; /* for nested popup to use absolute positionning */ - /* Required to be able to scroll on iOS: */ - -webkit-overflow-scrolling: touch; + /* For sticky chat */ + display: flex; + flex-direction: row; } -#editorcontainer iframe { +#editorcontainerbox #editorcontainer { + display: flex; /* transfer flex properties to nested elements, here the iframe */ height: 100%; + flex: 1 auto; +} +#editorcontainerbox #editorcontainer iframe { width: 100%; - padding: 0; - margin: 0; - left: 0; /* Required for safari fixes RTL */ } -iframe { - position: absolute +#editorcontainerbox .sticky-container { /* container for #users, #chat, #toc (table of content) and so on... */ + display: flex; + flex-direction: column; + width: 200px; + max-width: 40%; + flex-shrink: 0; } -@media all and (max-width: 400px) { - #editorcontainer { - top: 68px; - } +#editorcontainerbox .sticky-container:not(.stikyUsers):not(.stickyChat) { + width: 0; /* hide when the container is empty */ } + @media only screen and (max-width: 720px) { - #editorcontainer { - margin-bottom: 33px + #editorcontainerbox { + margin-bottom: 37px; /* Leave space for the bottom toolbar on mobile */ } -} \ No newline at end of file +} diff --git a/src/static/css/pad/loadingbox.css b/src/static/css/pad/loadingbox.css index 47d740b3153..e7499a7cc16 100644 --- a/src/static/css/pad/loadingbox.css +++ b/src/static/css/pad/loadingbox.css @@ -55,4 +55,8 @@ -webkit-transform: rotate(359deg); transform: rotate(359deg); } +} + +#passwordRequired, #permissionDenied, #wrongPassword, #noCookie { + display:none; } \ No newline at end of file diff --git a/src/static/css/pad/popup.css b/src/static/css/pad/popup.css index f312f7de59e..130886ca408 100644 --- a/src/static/css/pad/popup.css +++ b/src/static/css/pad/popup.css @@ -1,28 +1,21 @@ .popup { - font-size: 12px; - width: 80%; - max-width: 500px; + position: absolute; + top: 0; + right: 20px; + display: none; + z-index: 500; + min-width: 300px; + max-width: 600px; padding: 10px; border-radius: 0 0 6px 6px; border: 1px solid #ccc; border-top: none; - background: #f7f7f7; - background: -webkit-linear-gradient(#F7F7F7, #EEE); - background: -moz-linear-gradient(#F7F7F7, #EEE); - background: -ms-linear-gradient(#F7F7F7, #EEE); - background: -o-linear-gradient(#F7F7F7, #EEE); - background: linear-gradient(#F7F7F7, #EEE); - -webkit-box-shadow: 0 0 8px #888; - -moz-box-shadow: 0 0 8px #888; box-shadow: 0 2px 4px #ddd; - color: #222; + background: #f7f7f7; } .popup input[type=text] { width: 100%; padding: 5px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; box-sizing: border-box; display: block; margin-top: 10px; @@ -38,15 +31,16 @@ text-decoration: none } .popup h1 { - color: #555; - font-size: 18px + font-size: 1.4rem; + margin-bottom: 10px; } .popup h2 { - color: #777; - font-size: 15px + opacity: .7; + margin: 10px 0; + font-size: 1.2rem; } .popup p { - margin: 5px 0 + margin: 5px 0; } .popup select { background: #fff; @@ -57,58 +51,21 @@ outline: none; width: 120px; } -#settings, -#import_export, -#embed, -#connectivity, -#users { - position: absolute; - top: 38px; - right: 20px; - display: none; - z-index: 500; -} - -@media all and (max-width: 400px){ - .popup { - width:100%; - max-width:300px; - top: 72px !important; - } -} /* Mobile devices */ @media only screen and (max-width: 720px) { - #users { - top: auto; - right:0px !important; - bottom: 33px; - border-radius: 0px !important; - height: 55px !important; - overflow: auto; - } - #mycolorpicker { - left: 0px; - top:37px !important; - position:fixed; - } .popup { - -webkit-border-radius: 0; - -moz-border-radius: 0; border-radius: 0; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; - width: 100%; - } - #settings, - #import_export, - #connectivity, - #embed { - top:auto; + top: auto; left: 0; - bottom: 33px; + bottom: 0; right: 0; + max-height: 80vh; + max-width: none; + + border-radius: 6px 6px 0 0; + border: 1px solid #ccc; + border-bottom: none; + box-shadow: 0 -2px 4px #ddd; } } \ No newline at end of file diff --git a/src/static/css/pad/popup_import_export.css b/src/static/css/pad/popup_import_export.css index ba9a73fa852..2e836b0d391 100644 --- a/src/static/css/pad/popup_import_export.css +++ b/src/static/css/pad/popup_import_export.css @@ -1,39 +1,29 @@ -#exportColumn{ - margin-top:20px; +.readonly .acl-write { + display: none; } .exporttype { - margin-top: 4px; - background-repeat: no-repeat; - padding-left: 25px; - color: #333; - text-decoration: none; - padding-bottom:2px; - display:inline; - padding-left:5px; - font-family: "Arial"; -} -.exportlink{ + margin-bottom: 5px; +} +.exporttype:before{ font-family: "fontawesome-etherpad"; - display:block; - margin:5px; - color:#666; + margin-right: 5px; } -#exporthtmla:before { +#exporthtmla .exporttype:before { content: "\e826"; } -#exportplaina:before { +#exportplaina .exporttype:before { content: "\e802"; } -#exportworda:before { +#exportworda .exporttype:before { content: "\e804"; } -#exportpdfa:before { +#exportpdfa .exporttype:before { content: "\e803"; } -#exportetherpada:before { +#exportetherpada .exporttype:before { content: "\e806"; } -#exportopena:before { +#exportopena .exporttype:before { content: "\e805"; } @@ -51,5 +41,5 @@ #importsubmitinput { margin-top: 12px; - padding:2px 4px 2px 4px; + padding: 2px 4px 2px 4px; } \ No newline at end of file diff --git a/src/static/css/pad/popup_users.css b/src/static/css/pad/popup_users.css index 4e12c3eafda..954a48c51d8 100644 --- a/src/static/css/pad/popup_users.css +++ b/src/static/css/pad/popup_users.css @@ -1,27 +1,50 @@ -#users { - background: #f7f7f7; - background: -webkit-linear-gradient( #F7F7F7,#EEE); - background: -moz-linear-gradient( #F7F7F7,#EEE); - background: -ms-linear-gradient( #F7F7F7,#EEE); - background: -o-linear-gradient( #F7F7F7,#EEE); - background: linear-gradient( #F7F7F7,#EEE); - width: 160px; - color: #fff; - padding: 5px; - border-radius: 0 0 6px 6px; - border: 1px solid #ccc; -} -#otherusers { - max-height: 400px; +/* --------------- */ +/* --- LAYOUT ---- */ +/* --------------- */ + +.popup#users { + flex-direction: column; + max-height: 500px; + height: auto; +} +.popup#users #myuser { + flex-shrink: 0; +} +.popup#users #otherusers { + flex: 1 auto; overflow: auto; + max-height: 200px; +} + +.popup#users.chatAndUsers { + display: flex !important; /* always visible */ + position: relative; + z-index: 1; + top: 0; + right: 0; + left: auto; + border: none; + border-bottom: 1px solid #ccc; + border-left: 1px solid #ccc; + border-right: 0; + border-radius: 0; + box-shadow: none; + height: 200px; + min-width: 0; + box-sizing: border-box; + padding: 5px; } + + +/* --------------- */ +/* --- MY USER --- */ +/* --------------- */ + #myswatchbox { - position: absolute; - left: 5px; - top: 5px; + float: left; width: 24px; height: 24px; - border: 1px solid #000; + border: 1px solid #ccc background: transparent; cursor: pointer; } @@ -30,18 +53,53 @@ height: 100%; background: transparent; /*...initially*/ } + +#myusernameform { + margin-left: 30px; +} +input#myusernameedit { + height: 26px; + font-size: 1.3em; + padding: 3px; + border: 1px solid #ccc; + background-color: transparent; + margin: 0; +} +input#myusernameedit:not(.editable) { + color: grey; +} +#myuser .myusernameedithoverable:hover { + background: white; +} +#myusernameform .editactive, +#myusernameform .editempty { + background: white; + border-left: 1px solid #c3c3c3; + border-top: 1px solid #c3c3c3; + border-right: 1px solid #e6e6e6; + border-bottom: 1px solid #e6e6e6; + color: #000; +} +#myusernameform .editempty { + color: #333 +} +#myusernameedit, #otheruserstable .swatch { + border: 1px solid #ccc; +} + + +/* --------------------------- */ +/* --- MY USER COLORPICKER --- */ +/* --------------------------- */ + #mycolorpicker { + display: none; width: 232px; height: 265px; position: absolute; - left: -250px; - top: 0px; + right: calc(100% + 15px); + top: 0; z-index: 101; - display: none; - border-radius: 0 0 6px 6px; - background: #f7f7f7; - border: 1px solid #ccc; - border-top: 0; padding-left: 10px; padding-top: 10px; } @@ -55,14 +113,7 @@ #mycolorpickersave, #mycolorpickercancel { background: #fff; - background: -webkit-linear-gradient(#fff, #ccc); - background: -moz-linear-gradient(#fff, #ccc); - background: -o-linear-gradient(#fff, #ccc); - background: -ms-linear-gradient(#fff, #ccc); - background: linear-gradient(#fff, #ccc); border: 1px solid #ccc; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; border-radius: 4px; font-size: 12px; cursor: pointer; @@ -87,110 +138,24 @@ -moz-border-radius: 5px; border-radius: 5px; } -#myusernameform { - margin-left: 30px -} -#myusernameedit { - font-size: 1.3em; - color: #fff; - padding: 3px; - height: 18px; - margin: 0; - border: 0; - width: 122px; - background: transparent; -} -#myusernameform input.editable { - border: 1px solid #444 -} -#myuser .myusernameedithoverable:hover { - background: white; - color: black; -} -#mystatusform { - margin-left: 35px; - margin-top: 5px; -} -#mystatusedit { - font-size: 1.2em; - color: #777; - font-style: italic; - display: none; - padding: 2px; - height: 14px; - margin: 0; - border: 1px solid #bbb; - width: 199px; - background: transparent; -} -#myusernameform .editactive, -#myusernameform .editempty { - background: white; - border-left: 1px solid #c3c3c3; - border-top: 1px solid #c3c3c3; - border-right: 1px solid #e6e6e6; - border-bottom: 1px solid #e6e6e6; - color: #000; -} -#myusernameform .editempty { - color: #333 -} -#myswatchbox, #myusernameedit, #otheruserstable .swatch { - border: 1px solid #ccc !important; - color: #333; -} -table#otheruserstable { - display: none -} + + +/* ------------------- */ +/* --- OTHER USERS --- */ +/* ------------------- */ + #otheruserstable td { height: 26px; - vertical-align: middle; padding: 0 2px; - color: #333; } #otheruserstable .swatch { - border: 1px solid #000; + border: 1px solid #ccc; width: 13px; height: 13px; overflow: hidden; margin: 0 4px; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; } -.usertdswatch { - width: 1% -} .usertdname { - font-size: 1.3em; - color: #444; -} -.usertdstatus { - font-size: 1.1em; - font-style: italic; - color: #999; -} -.usertdactivity { - font-size: 1.1em; - color: #777; -} -.usertdname input { - border: 1px solid #bbb; - width: 80px; - padding: 2px; -} -.usertdname input.editactive, -.usertdname input.editempty { - background: white; - border-left: 1px solid #c3c3c3; - border-top: 1px solid #c3c3c3; - border-right: 1px solid #e6e6e6; - border-bottom: 1px solid #e6e6e6; -} -.usertdname input.editempty { - color: #888; - font-style: italic; + font-size: 1.2rem; } \ No newline at end of file diff --git a/src/static/css/pad/toolbar.css b/src/static/css/pad/toolbar.css index f07b5cc2fd1..e3f76d97fb3 100644 --- a/src/static/css/pad/toolbar.css +++ b/src/static/css/pad/toolbar.css @@ -1,129 +1,78 @@ -/* menu */ .toolbar { - display:none; /* hidden by default */ -} -.toolbar { - background: #f7f7f7; - background: -webkit-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: -moz-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: -o-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: -ms-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: linear-gradient(#f7f7f7, #f1f1f1 80%); + display: none; + background-color: #f4f4f4; border-bottom: 1px solid #ccc; overflow: hidden; - padding-top: 4px; - width: 100%; - white-space: nowrap; - height: 32px; + justify-content: space-between; + padding: 0px 5px 5px 5px; + flex-shrink: 0; } .toolbar ul { - position: absolute; list-style: none; - padding-right: 3px; - padding-left: 1px; z-index: 2; overflow: hidden; - float: left + display: flex; + flex-direction: row; + align-items: flex-start; +} +.toolbar ul.menu_left { + flex-wrap: wrap; /* wrap left toolbar so if a lot of icons are present it goes on multiple lines */ +} +.toolbar ul.menu_right { + flex-shrink: 0; /* prevent from shrinking */ +} +.toolbar ul li, .toolbar ul > div { + display: flex; /* transfer flexbox positionning to children */ } .toolbar ul li { - float: left; - margin-left: 2px; - height:32px; - cursor: pointer; + margin-top: 5px; /* when icons goes multi rows, have space betwwen each row */ } .toolbar ul li.separator { - border: inherit; - background: inherit; visibility: hidden; - width: 0px; - padding: 5px; - height:22px; -} -.toolbar ul li a:hover { - text-decoration: none; -} -.toolbar ul li a:hover { - background: #fff; - background: -webkit-linear-gradient(#f4f4f4, #e4e4e4); - background: -moz-linear-gradient(#f4f4f4, #e4e4e4); - background: -o-linear-gradient(#f4f4f4, #e4e4e4); - background: -ms-linear-gradient(#f4f4f4, #e4e4e4); - background: linear-gradient(#f4f4f4, #e4e4e4); -} -.toolbar ul li a:active { - background: #eee; - background: -webkit-linear-gradient(#ddd, #fff); - background: -moz-linear-gradient(#ddd, #fff); - background: -o-linear-gradient(#ddd, #fff); - background: -ms-linear-gradient(#ddd, #fff); - background: linear-gradient(#ddd, #fff); - -webkit-box-shadow: 0 0 8px rgba(0,0,0,.1) inset; - -moz-box-shadow: 0 0 8px rgba(0,0,0,.1) inset; - box-shadow: 0 0 8px rgba(0,0,0,.1) inset; -} -.toolbar ul li .activeButton { - background: #eee; - background: -webkit-linear-gradient(#ddd, #fff); - background: -moz-linear-gradient(#ddd, #fff); - background: -o-linear-gradient(#ddd, #fff); - background: -ms-linear-gradient(#ddd, #fff); - background: linear-gradient(#ddd, #fff); - -webkit-box-shadow: 0 0 8px rgba(0,0,0,.1) inset; - -moz-box-shadow: 0 0 8px rgba(0,0,0,.1) inset; - box-shadow: 0 0 8px rgba(0,0,0,.1) inset; + width: 10px; } .toolbar ul li a { - background: #fff; - background: -webkit-linear-gradient(#fff, #f0f0f0); - background: -moz-linear-gradient(#fff, #f0f0f0); - background: -o-linear-gradient(#fff, #f0f0f0); - background: -ms-linear-gradient(#fff, #f0f0f0); - background: linear-gradient(#fff, #f0f0f0); border: 1px solid #ccc; + cursor: pointer; border-radius: 3px; + background: #fff; color: #ccc; cursor: pointer; - display: inline-block; min-height: 18px; overflow: hidden; padding: 4px 5px; text-align: center; text-decoration: none; min-width: 18px; + transition: background-color .1s; } -.toolbar ul li a .buttonicon { - position: relative; - top: 1px; +.toolbar ul li button:active, .toolbar ul li button:focus { + outline: 0; + border: none; +} +.toolbar ul li a:hover { + text-decoration: none; + background-color: #f2f2f2; } -.toolbar ul li a .buttontext { - color: #666; - font-size: 14px; - border:none; - background:none; - margin-top:1px; - color:#666; +.toolbar ul li a:active, .toolbar ul li a:focus { + background: #ddd; +} +.toolbar ul li a.selected { + background: #dadada !important; } + .toolbar ul li a.grouped-left { border-radius: 3px 0 0 3px; } .toolbar ul li a.grouped-middle { border-radius: 0; - margin-left: -2px; border-left: 0; } .toolbar ul li a.grouped-right { border-radius: 0 3px 3px 0; - margin-left: -2px; border-left: 0; } -.toolbar ul li a.selected { - background: #eee !important; - background: -webkit-linear-gradient(#EEE, #F0F0F0) !important; - background: -moz-linear-gradient(#EEE, #F0F0F0) !important; - background: -o-linear-gradient(#EEE, #F0F0F0) !important; - background: -ms-linear-gradient(#EEE, #F0F0F0) !important; - background: linear-gradient(#EEE, #F0F0F0) !important; -} + .toolbar ul li select { background: #fff; padding: 4px; @@ -133,121 +82,58 @@ border: 1px solid #ccc; outline: none; } -.toolbar ul.menu_left { - left: 0px; - right: 210px; -} -.toolbar ul.menu_right { - right:0px; -} -li[data-key=showusers] > a { +.toolbar ul li[data-key=showusers] > a { min-width: 30px; - text-align: left; } -li[data-key=showusers] > a #online_count { +.toolbar ul li[data-key=showusers] > a #online_count { color: #777; font-size: 11px; position: relative; top: 2px; padding-left: 2px; } -.toolbar #overlay { + +.toolbar #toolbar-overlay { z-index: 500; display: none; - background-repeat: repeat-both; width: 100%; position: absolute; height: inherit; left: 0; top: 0; -} -* html #overlay { - /* for IE 6+ */ - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - filter: alpha(opacity=100); - opacity: 1; /* in case this is looked at */ - background-image: none; - background-repeat: no-repeat; /* scale the image */ + bottom: 0; + right: 0; } -@media all and (max-width: 400px){ - .toolbar { - height: 62px; - } - .toolbar ul.menu_left { - left:0px; - right:100px; - } -} -@media screen and (max-width: 600px) { - .toolbar ul li.separator { - display: none; - } - .toolbar ul li a { - padding: 4px 1px - } - .toolbar ul.menu_left { - left:0px; - right:150px; - } -} @media only screen and (max-width: 720px) { - /* cancel non-mobile border (will be defined on ".toolbar ul.menu_left" bellow) */ - .toolbar { - border-bottom: 0; - } - .toolbar ul { - background: #f7f7f7; - background: -webkit-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: -moz-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: -o-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: -ms-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: linear-gradient(#f7f7f7, #f1f1f1 80%); - width: 100%; - overflow: hidden; - } - .toolbar ul.menu_left { - right:0px; - position: relative; - display: flex; - top: 0; - overflow-x: auto; - padding: 4px 0 0 0; - border-bottom: 1px solid #ccc; - z-index: 10; + .toolbar ul li.separator { + width: 5px; } + /* menu_right act like a new toolbar on the bottom of the screen */ .toolbar ul.menu_right, .timeslider-bar .editbarright { - right:0px !important; - height: 32px; position: fixed; bottom: 0; + right: 0; + left: 0; border-top: 1px solid #ccc; - } - .toolbar ul.menu_right > li:last-child { - float: right; + background-color: #f4f4f4; + padding: 0 5px 5px 5px; } .toolbar ul.menu_right > li a { - border-radius: 0; border: none; - background: none; - margin: 0; - padding: 8px; + background-color: transparent; + margin-left: 5px; } - .toolbar ul li a.selected { - background: none !important - } - li[data-key="showusers"] > a { - - margin-top:-10px; - padding-top:2px !important; - line-height:20px; - vertical-align:top !important; - } - .toolbar ul li .separator { - display: none + .toolbar ul.menu_right > li[data-key="showusers"] { + position: absolute; + right: 0; + top: 0; + bottom: 0; + margin: 0; } - .toolbar #online_count { - line-height: 24px + .toolbar ul.menu_right > li[data-key="showusers"] a { + padding-top: 10px; + border-radius: 0; } } \ No newline at end of file diff --git a/src/static/css/timeslider.css b/src/static/css/timeslider.css index c1942240f98..574091f1700 100644 --- a/src/static/css/timeslider.css +++ b/src/static/css/timeslider.css @@ -201,7 +201,6 @@ stepper:active{ background: linear-gradient(#F7F7F7, #F1F1F1 80%) repeat scroll 0% 0% transparent; padding:2px; border-radius:2px; - font-family: Arial, sans-serif; font-size: 11px; left: 7px; position: absolute; diff --git a/src/static/js/ace.js b/src/static/js/ace.js index 0b9862070e3..b64c3e22675 100644 --- a/src/static/js/ace.js +++ b/src/static/js/ace.js @@ -225,7 +225,7 @@ function Ace2Editor() var iframeHTML = []; iframeHTML.push(doctype); - iframeHTML.push(""); + iframeHTML.push(""); // calls to these functions ($$INCLUDE_...) are replaced when this file is processed // and compressed, putting the compressed code from the named file directly into the @@ -316,7 +316,7 @@ window.onload = function () {\n\ }, 0);\n\ }'; - var outerHTML = [doctype, ''] + var outerHTML = [doctype, ''] var includedCSS = []; var $$INCLUDE_CSS = function(filename) {includedCSS.push(filename)}; diff --git a/src/static/js/ace2_inner.js b/src/static/js/ace2_inner.js index 2bd93fcf7b6..e4c833bdd67 100644 --- a/src/static/js/ace2_inner.js +++ b/src/static/js/ace2_inner.js @@ -69,12 +69,6 @@ function Ace2Inner(){ var THE_TAB = ' '; //4 var MAX_LIST_LEVEL = 16; - var LINE_NUMBER_PADDING_RIGHT = 4; - var LINE_NUMBER_PADDING_LEFT = 4; - var MIN_LINEDIV_WIDTH = 20; - var EDIT_BODY_PADDING_TOP = 8; - var EDIT_BODY_PADDING_LEFT = 8; - var FORMATTING_STYLES = ['bold', 'italic', 'underline', 'strikethrough']; var SELECT_BUTTON_CLASS = 'selected'; @@ -127,12 +121,6 @@ function Ace2Inner(){ var hasLineNumbers = true; var isStyled = true; - // space around the innermost iframe element - var iframePadLeft = MIN_LINEDIV_WIDTH + LINE_NUMBER_PADDING_RIGHT + EDIT_BODY_PADDING_LEFT; - var iframePadTop = EDIT_BODY_PADDING_TOP; - var iframePadBottom = 0, - iframePadRight = 0; - var console = (DEBUG && window.console); var documentAttributeManager; @@ -4766,70 +4754,7 @@ function Ace2Inner(){ return; } - function setIfNecessary(obj, prop, value) - { - if (obj[prop] != value) - { - obj[prop] = value; - } - } - - var lineNumberWidth = sideDiv.firstChild.offsetWidth; - var newSideDivWidth = lineNumberWidth + LINE_NUMBER_PADDING_LEFT; - if (newSideDivWidth < MIN_LINEDIV_WIDTH) newSideDivWidth = MIN_LINEDIV_WIDTH; - iframePadLeft = EDIT_BODY_PADDING_LEFT; - if (hasLineNumbers) iframePadLeft += newSideDivWidth + LINE_NUMBER_PADDING_RIGHT; - setIfNecessary(iframe.style, "left", iframePadLeft + "px"); - setIfNecessary(sideDiv.style, "width", newSideDivWidth + "px"); - - for (var i = 0; i < 2; i++) - { - var newHeight = root.clientHeight; - var newWidth = (browser.msie ? root.createTextRange().boundingWidth : root.clientWidth); - var viewHeight = getInnerHeight() - iframePadBottom - iframePadTop; - var viewWidth = getInnerWidth() - iframePadLeft - iframePadRight; - if (newHeight < viewHeight) - { - newHeight = viewHeight; - if (browser.msie) setIfNecessary(outerWin.document.documentElement.style, 'overflowY', 'auto'); - } - else - { - if (browser.msie) setIfNecessary(outerWin.document.documentElement.style, 'overflowY', 'scroll'); - } - if (doesWrap) - { - newWidth = viewWidth; - } - else - { - if (newWidth < viewWidth) newWidth = viewWidth; - } - setIfNecessary(iframe.style, "height", newHeight + "px"); - setIfNecessary(iframe.style, "width", newWidth + "px"); - setIfNecessary(sideDiv.style, "height", newHeight + "px"); - } - if (browser.firefox) - { - if (!doesWrap) - { - // the body:display:table-cell hack makes mozilla do scrolling - // correctly by shrinking the to fit around its content, - // but mozilla won't act on clicks below the body. We keep the - // style.height property set to the viewport height (editor height - // not including scrollbar), so it will never shrink so that part of - // the editor isn't clickable. - var body = root; - var styleHeight = viewHeight + "px"; - setIfNecessary(body.style, "height", styleHeight); - } - else - { - setIfNecessary(root.style, "height", ""); - } - } var win = outerWin; - var r = 20; enforceEditability(); @@ -5160,7 +5085,6 @@ function Ace2Inner(){ { var win = outerWin; var odoc = outerWin.document; - pixelX += iframePadLeft; var distInsideLeft = pixelX - win.scrollX; var distInsideRight = win.scrollX + getInnerWidth() - pixelX; if (distInsideLeft < 0) @@ -5358,7 +5282,7 @@ function Ace2Inner(){ function initLineNumbers() { lineNumbersShown = 1; - sideDiv.innerHTML = '
1
'; + sideDiv.innerHTML = '
1
'; sideDivInner = outerWin.document.getElementById("sidedivinner"); $(sideDiv).addClass("sidediv"); } diff --git a/src/static/js/chat.js b/src/static/js/chat.js index 0b31428b636..531109ef189 100755 --- a/src/static/js/chat.js +++ b/src/static/js/chat.js @@ -31,7 +31,7 @@ var chat = (function() show: function () { $("#chaticon").hide(); - $("#chatbox").show(); + $("#chatbox").css('display', 'flex'); $("#gritter-notice-wrapper").hide(); self.scrollDown(); chatMentions = 0; @@ -46,42 +46,28 @@ var chat = (function() stickToScreen: function(fromInitialCall) // Make chat stick to right hand side of screen { chat.show(); - if(!isStuck || fromInitialCall) { // Stick it to - padcookie.setPref("chatAlwaysVisible", true); - $('#chatbox').addClass("stickyChat"); - $('#titlesticky').hide(); - $('#editorcontainer').css({"right":"192px"}); - $('.stickyChat').css("top",$('#editorcontainer').offset().top+"px"); - isStuck = true; - } else { // Unstick it - padcookie.setPref("chatAlwaysVisible", false); - $('.stickyChat').css("top", "auto"); - $('#chatbox').removeClass("stickyChat"); - $('#titlesticky').show(); - $('#editorcontainer').css({"right":"0px"}); - isStuck = false; - } + isStuck = (!isStuck || fromInitialCall); + + $('#chatbox, .sticky-container').toggleClass("stickyChat", isStuck); + padcookie.setPref("chatAlwaysVisible", isStuck); + $('#options-stickychat').prop('checked', isStuck); }, chatAndUsers: function(fromInitialCall) { var toEnable = $('#options-chatandusers').is(":checked"); if(toEnable || !userAndChat || fromInitialCall){ - padcookie.setPref("chatAndUsers", true); chat.stickToScreen(true); $('#options-stickychat').prop('checked', true) $('#options-chatandusers').prop('checked', true) $('#options-stickychat').prop("disabled", "disabled"); - $('#users').addClass("chatAndUsers"); - $("#chatbox").addClass("chatAndUsersChat"); - // redraw userAndChat = true; - padeditbar.redrawHeight() }else{ - padcookie.setPref("chatAndUsers", false); $('#options-stickychat').prop("disabled", false); - $('#users').removeClass("chatAndUsers"); - $("#chatbox").removeClass("chatAndUsersChat"); + userAndChat = false; } + padcookie.setPref("chatAndUsers", userAndChat); + $('#users, .sticky-container').toggleClass("chatAndUsers stickyUsers", userAndChat); + $("#chatbox").toggleClass("chatAndUsersChat", userAndChat); }, hide: function () { diff --git a/src/static/js/pad.js b/src/static/js/pad.js index 69fa659026c..f0860c59081 100644 --- a/src/static/js/pad.js +++ b/src/static/js/pad.js @@ -73,7 +73,7 @@ function randomString() // callback: the function to call when all above succeeds, `val` is the value supplied by the user var getParameters = [ { name: "noColors", checkVal: "true", callback: function(val) { settings.noColors = true; $('#clearAuthorship').hide(); } }, - { name: "showControls", checkVal: "false", callback: function(val) { $('#editbar').addClass('hideControlsEditbar'); $('#editorcontainer').addClass('hideControlsEditor'); } }, + { name: "showControls", checkVal: "true", callback: function(val) { $('#editbar').css('display', 'flex') } }, { name: "showChat", checkVal: "true", callback: function(val) { $('#chaticon').show(); } }, { name: "showLineNumbers", checkVal: "false", callback: function(val) { settings.LineNumbersDisabled = true; } }, { name: "useMonospaceFont", checkVal: "true", callback: function(val) { settings.useMonospaceFontGlobal = true; } }, diff --git a/src/static/js/pad_editbar.js b/src/static/js/pad_editbar.js index 9cf357aadd5..33aa0ff1de0 100644 --- a/src/static/js/pad_editbar.js +++ b/src/static/js/pad_editbar.js @@ -141,11 +141,6 @@ var padeditbar = (function() init: function() { var self = this; self.dropdowns = []; - // Listen for resize events (sucks but needed as iFrame ace_inner has to be position absolute - // A CSS fix for this would be nice but I'm not sure how we'd do it. - $(window).resize(function(){ - self.redrawHeight(); - }); $("#editbar .editbarbutton").attr("unselectable", "on"); // for IE $("#editbar").removeClass("disabledtoolbar").addClass("enabledtoolbar"); @@ -160,10 +155,6 @@ var padeditbar = (function() bodyKeyEvent(evt); }); - $('#editbar').show(); - - this.redrawHeight(); - registerDefaultCommands(self); hooks.callAll("postToolbarInit", { @@ -173,7 +164,6 @@ var padeditbar = (function() }, isEnabled: function() { -// return !$("#editbar").hasClass('disabledtoolbar'); return true; }, disable: function() @@ -185,55 +175,6 @@ var padeditbar = (function() this.commands[cmd] = callback; return this; }, - calculateEditbarHeight: function() { - // if we're on timeslider, there is nothing on editbar, so we just use zero - var onTimeslider = $('.menu_left').length === 0; - if (onTimeslider) return 0; - - // if editbar has both menu left and right, its height must be - // the max between the height of these two parts - var leftMenuPosition = $('.menu_left').offset().top; - var rightMenuPosition = $('.menu_right').offset().top; - var editbarHasMenuLeftAndRight = (leftMenuPosition === rightMenuPosition); - - var height; - if (editbarHasMenuLeftAndRight) { - height = Math.max($('.menu_left').height(), $('.menu_right').height()); - } - else { - height = $('.menu_left').height(); - } - - return height; - }, - redrawHeight: function(){ - var minimunEditbarHeight = self.calculateEditbarHeight(); - var editbarHeight = minimunEditbarHeight + 1 + "px"; - var containerTop = minimunEditbarHeight + 6 + "px"; - $('#editbar').css("height", editbarHeight); - - $('#editorcontainer').css("top", containerTop); - - // make sure pop ups are in the right place - if($('#editorcontainer').offset()){ - $('.popup').css("top", $('#editorcontainer').offset().top + "px"); - } - - // If sticky chat is enabled.. - if($('#options-stickychat').is(":checked")){ - if($('#editorcontainer').offset()){ - $('#chatbox').css("top", $('#editorcontainer').offset().top + "px"); - } - }; - - // If chat and Users is enabled.. - if($('#options-chatandusers').is(":checked")){ - if($('#editorcontainer').offset()){ - $('#users').css("top", $('#editorcontainer').offset().top + "px"); - } - } - - }, registerDropdownCommand: function (cmd, dropdown) { dropdown = dropdown || cmd; self.dropdowns.push(dropdown) @@ -256,6 +197,11 @@ var padeditbar = (function() }, toggleDropDown: function(moduleName, cb) { + // do nothing if users are sticked + if (moduleName === "users" && $('#users').hasClass('stickyUsers')) { + return; + } + // hide all modules and remove highlighting of all buttons if(moduleName == "none") { diff --git a/src/static/js/pad_modals.js b/src/static/js/pad_modals.js index 2fc621dc4b6..18bda08da55 100644 --- a/src/static/js/pad_modals.js +++ b/src/static/js/pad_modals.js @@ -44,10 +44,10 @@ var padmodals = (function() }); }, showOverlay: function() { - $("#overlay").show(); + $("#toolbar-overlay").show(); }, hideOverlay: function() { - $("#overlay").hide(); + $("#toolbar-overlay").hide(); } }; return self; diff --git a/src/static/skins/colibris/src/components/chat.css b/src/static/skins/colibris/src/components/chat.css index 7a2979e02c1..b11a5425256 100644 --- a/src/static/skins/colibris/src/components/chat.css +++ b/src/static/skins/colibris/src/components/chat.css @@ -110,5 +110,5 @@ right: 0; } - #titlesticky { display: none; } + .stick-to-screen-btn { display: none; } } \ No newline at end of file diff --git a/src/static/skins/no-skin/pad.css b/src/static/skins/no-skin/pad.css index b8cdb4642b6..e69de29bb2d 100644 --- a/src/static/skins/no-skin/pad.css +++ b/src/static/skins/no-skin/pad.css @@ -1,5 +0,0 @@ -@media (max-width:600px) { - #sidediv { - display: none !important; - } -} \ No newline at end of file diff --git a/src/templates/pad.html b/src/templates/pad.html index 23bd2d62d66..b81e2ab72ba 100644 --- a/src/templates/pad.html +++ b/src/templates/pad.html @@ -5,88 +5,348 @@ ; %> + <% e.begin_block("htmlHead"); %> <% e.end_block(); %> - <%=settings.title%> - - - - - - - - - <% e.begin_block("styles"); %> - - - <% e.begin_block("customStyles"); %> - - <% e.end_block(); %> - - - <% e.end_block(); %> - - - - - - - - <% e.begin_block("body"); %> -
-
-
-
- - - + <%=settings.title%> + + + + + + + + + <% e.begin_block("styles"); %> + + + <% e.begin_block("customStyles"); %> + + <% e.end_block(); %> + + + <% e.end_block(); %> + + + + + + + + <% e.begin_block("body"); %> + + + + +
+
+ + + +
+ + <% e.begin_block("afterEditbar"); %><% e.end_block(); %> + +
+ + <% e.begin_block("editorContainerBox"); %> + + + + +
+ +
+
+

You need a password to access this pad

+
+ +
- <% e.begin_block("afterEditbar"); %><% e.end_block(); %> - -
+
+

You do not have permission to access this pad

+
+
+

Your password was wrong

+
+
+

Cookie could not be found. Please allow cookies in your browser!

+
+ <% e.begin_block("loading"); %> +

Loading...

+ <% e.end_block(); %> + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +