mirror of
https://github.com/ether/etherpad-lite.git
synced 2025-02-08 03:02:03 +01:00
0d61d6bb13
Before this change there was always a single toolbar on the top, with both Colibris and the legacy skin. When the screen size was reduced: - the legacy skin would compact the icons in the toolbar (this was fine, indeed); - Colibris would hide some formatting icons. This would hamper the functionality for mobile users. After this change both the skins work in the same way, which is the following: - when the screen gets smaller the right toolbar (the one with "export", "timeslider", and other buttons) goes to the bottom of the screen; - when there are many icons, the toolbar keeps all of them, and to see them the user must drag the toolbar. This behaviour will probably be changed before release, opting instead to show a "+" button when there is an overflow, since this appears to be more discoverable (see the discusison in #3697). Do not tested with custom toolbar elements (toolbar.left and toolbar.right configuration items in settings.json). Fixes #3697.
1353 lines
26 KiB
CSS
1353 lines
26 KiB
CSS
*,
|
|
html,
|
|
body,
|
|
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;
|
|
}
|
|
|
|
.buttontext:focus{
|
|
/* Not sure why important is required here but it is */
|
|
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;
|
|
font-style: italic;
|
|
font-size: 10px;
|
|
margin-left: 3px;
|
|
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;
|
|
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
|
|
}
|
|
#chattext p {
|
|
word-wrap: break-word
|
|
}
|
|
/* fix for misaligned checkboxes */
|
|
input[type=checkbox] {
|
|
vertical-align: -1px
|
|
}
|
|
.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%;
|
|
}
|
|
.row + .row {
|
|
margin-top: 15px;
|
|
}
|
|
.column {
|
|
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{
|
|
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;
|
|
}
|