Clean up styles now that are part of the editor

This commit is contained in:
Paulo Gustavo Veiga 2022-02-20 21:55:40 -08:00
parent 93f3e91cc1
commit 859c3dd927
6 changed files with 103 additions and 668 deletions

View File

@ -1,191 +0,0 @@
html {
overflow: hidden;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,
img {
border: 0;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
font-style: normal;
font-weight: normal;
}
ol,
ul {
list-style: none;
}
caption,
th {
text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
}
q:before,
q:after {
content: '';
}
abbr,
acronym {
border: 0;
}
/**
* Percents could work for IE, but for backCompat purposes, we are using keywords.
* x-small is for IE6/7 quirks mode.
*
*/
body {
font-size: 13px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: small;
font: x-small;
}
table {
font-size: inherit;
font-size: 100%;
}
/**
* 99% for safari; 100% is too large
*/
select,
input,
textarea {
font: 99% arial, helvetica, clean, sans-serif;
}
/**
* Bump up !IE to get to 13px equivalent
*/
pre,
code {
font: 115% monospace;
font-size: 100%;
}
/**
* Default line-height based on font-size rather than "computed-value"
* see: http://www.w3.org/TR/CSS21/visudet.html#line-height
*/
body * {
line-height: 1.22em;
}
* {
margin: 0;
padding: 0;
}
body {
// font: normal 80% "Helvetica Neue",Helvetica,Arial,sans-serif;
background-color: #fff;
}
img {
border: 0;
}
form {
padding: 0;
margin: 0;
}
p {
margin: 5px 0 5px 0;
}
ul {
list-style-position: inside;
}
a:hover,
a:active {
font: bold 100%;
text-decoration: underline;
color: black;
}
h2 {
font-size: 160%;
color: #8e9181;
}
h1 {
font-style: normal;
font-size: 180%;
color: white;
padding-bottom: 2px;
}
h3 {
/* use as subhead on main body */
clear: left;
font-style: normal;
font-size: 130%;
color: #6b6f5b;
}
h4 {
/* use as headers in footer */
font-weight: bold;
font-size: 120%;
border-bottom: 1px solid #8e9181;
color: #e2e3dd;
padding-bottom: 10px;
width: 400px;
}

View File

@ -1,243 +0,0 @@
@import "compatibility.css";
/********************************************************************************/
/* Header & Toolbar Styles */
/********************************************************************************/
@import "header.css";
@import "../bootstrap/css/bootstrap.min.css";
html {
/* avoid bootstrap overriding font-size and breaking Mui */
font-size: initial;
}
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
}
div#mindplot {
position: relative;
top: 50px;
left: 0;
width: 100%;
height: 100%;
border: 0;
overflow: hidden;
opacity: 1;
background-color: #f2f2f2;
background-image: linear-gradient(#ebe9e7 1px, transparent 1px), linear-gradient(to right, #ebe9e7 1px, #f2f2f2 1px);
background-size: 50px 50px;
}
.notesTip {
background-color: #dfcf3c;
padding: 5px 15px;
color: #666666;
/*font-weight: bold;*/
/*width: 100px;*/
font-size: 13px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}
.linkTip {
background-color: #dfcf3c;
padding: 5px 15px;
color: #666666;
/*font-weight: bold;*/
/*width: 100px;*/
font-size: 13px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}
.keyboardShortcutTip {
background-color: black;
padding: 5px 15px;
color: white;
font-weight: bold;
font-size: 11px;
}
/** */
/* Modal dialogs definitions */
div.modalDialog {
position: fixed;
top: 50%;
left: 50%;
z-index: 11000;
width: 500px;
margin: -250px 0 0 -250px;
background-color: #ffffff;
border: 1px solid #999;
padding: 10px;
overflow: auto;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
div.modalDialog .content {
padding: 5px 5px;
}
div.modalDialog .title {
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
border-bottom: 1px solid #eee;
padding: 5px 15px;
font-size: 18px;
}
/*--- End Modal Dialog Form ---*/
.publishModalDialog .content {
height: 420px;
}
.exportModalDialog .content {
height: 400px;
}
.shareModalDialog .content {
height: 440px;
}
div.shareModalDialog {
width: 550px;
}
.panelIcon {
width: 20px;
height: 20px;
margin-left: 4px;
margin-top: 3px;
cursor: pointer
}
.panelIcon:hover {
background-color: #efefef;
}
.popover {
font-size: 13px;
max-width: none;
}
#floating-panel {
position: fixed;
display: flex;
flex-direction: column;
align-items: flex-end;
bottom: 20px;
right: 20px;
align-items: stretch;
}
div#bottom-logo {
position: fixed;
left: 20px;
bottom: 10px;
background: url(../../images/editor/logo-text-black.svg) no-repeat;
width: 90px;
height: 40px;
}
div#position {
margin-top: 5px;
}
#position-button {
cursor: pointer;
border: solid black 1px;
width: 40px;
height: 40px;
background-position: center;
background-repeat: no-repeat;
background-size: 40px 40px;
background-color: #FFF;
border-radius: 8px;
}
#zoom-button {
width: 40px;
border: 0;
}
#zoom-plus,
#zoom-minus {
border: solid black 1px;
height: 40px;
width: 40px;
background-repeat: no-repeat;
background-size: 40px 40px;
background-position: center;
cursor: pointer;
background-color: #FFF;
}
#zoom-plus {
border-radius: 8px 8px 0 0;
}
#zoom-minus {
border-radius: 0 0 8px 8px;
}
div#shotcuts > img{
margin: 20px 0;
width: 40px;
height: 40px;
}
#keyboardTable {
font-family: Arial, verdana, serif;
font-size: 13px;
width: 100%;
}
#keyboardTable td {
padding: 3px;
white-space: nowrap;
}
#keyboardTable th {
padding: 5px;
white-space: nowrap;
}
#keyboardTable th {
background-color: #000000;
color: #ffffff;
}
div#tryInfoPanel {
position: absolute;
margin: auto;
text-align: center;
top: 80px;
right: 20px;
width: 200px;
height: 300px;
padding: 20px;
font-size: 15px;
border-radius: 9px;
background-color: white;
border: solid 2px #ffa800;
}
#tryInfoPanel > p {
justify-content: center;
padding-bottom: 20px;
}

View File

@ -1,70 +0,0 @@
@import "toolbar.css";
div#header {
width: 100%;
height:50px;
position: absolute;
top: 0;
z-index:1000;
}
div#headerNotifier {
border: 1px solid rgb(241, 163, 39);
background-color: rgb(252, 235, 192);
border-radius: 3px;
position: fixed;
padding: 5px 9px;
color: back;
white-space: nowrap;
margin-top: 5px;
display: none;
bottom: 10px;
}
div#toolbarRight {
float: right;
white-space: nowrap;
vertical-align: middle;
justify-content: center;
margin: 6px 10px;
height: 100%;
}
#account {
float: right;
display: inline;
}
#account >img {
width: 36x;
height: 36px;
}
#accountSettingsPanel{
padding:10px 10px;
}
#share {
margin: 0 30px;
float: right;
}
.actionButton {
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
user-select: none;
vertical-align: middle;
justify-content: center;
padding: 10px 25px;
font-size: 15px;
min-width: 64px;
box-sizing: border-box;
font-weight: 600;
border-radius: 9px;
color: white;
background-color: #ffa800;
}
.actionButton:hover {
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

View File

@ -1,158 +0,0 @@
div#toolbar {
width: 100%;
height: 50px;
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
background-color: #fff;
min-width: 900px;
overflow: hidden;
}
div#toolbar .buttonContainer {
height: 50px;
padding-top: 8px;
padding-right: 10px;
padding-left: 10px;
float: left;
border-left: 1px solid lightgray;
}
div#mapName >span {
border-radius: 4px;
float: left;
padding: 8px;
min-width: 30px;
font-weight: bold;
}
div#backToList {
height: 24px;
width: 24px;
float: left;
margin: 13px 20px;
}
/******************************************************************************************/
/* Buttons*/
/******************************************************************************************/
div#toolbar .buttonOn,
div#toolbar .buttonOff,
div#toolbar .buttonActive,
div#toolbar .buttonOn:hover {
width: 28px;
height: 28px;
float: left;
text-align: center;
z-index: 4;
margin-top: 3px;
padding-top: 2px;
padding-left: 2px;
margin-left: 3px;
}
div#toolbar .buttonOn:hover {
cursor: pointer;
opacity: 1;
}
div#toolbar .buttonOn {
opacity: 0.8;
}
div#toolbar .buttonOff {
opacity: 0.4;
}
div#exportAnchor {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
div#toolbar .buttonExtOn,
div#toolbar .buttonExtOff,
div#toolbar .buttonExtActive,
div#toolbar .buttonExtOn:hover {
width: 40px;
height: 28px;
float: left;
text-align: left;
z-index: 4;
margin-top: 3px;
padding-top: 2px;
padding-left: 5px;
margin-left: 3px;
}
div#toolbar .buttonExtOn:hover {
opacity: 1;
}
div#toolbar .buttonExtActive {
opacity: 1;
}
div#toolbar .buttonExtOn {
opacity: 0.8;
cursor: pointer
}
div#toolbar .buttonExtOff {
opacity: 0.4;
}
div#exportAnchor {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
/***************************************************************************************************/
/* Other toolbar styles */
/***************************************************************************************************/
.toolbarTip {
background-color: #000000;
padding: 5px 5px;
color: #f5f5f5;
font-size: 11px;
}
div#colorPalette {
border: 1px solid #bbb4d6;
display: none;
position: absolute;
z-index: 4;
width: 160px;
top: 89px;
}
div.toolbarPanelLink,
div.toolbarPanelLinkSelectedLink {
cursor: pointer;
color: black;
margin: 1px;
cursor: pointer;
font-size: 12px;
padding: 5px 10px;
font-weight: bold;
}
div.toolbarPanelLink:hover,
div.toolbarPanelLinkSelectedLink {
cursor: pointer;
background-color: #efefef;
}
.toolbarPaneTip {
background-color: rgb(228, 226, 210);
padding: 5px 5px;
color: #f5f5f5;
font-size: 11px;
border-radius: 6px;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
border: 3px double rgb(190, 190, 190);
}

View File

@ -1,8 +1,106 @@
@import "editor.css"; /********************************************************************************/
/* Header & Toolbar Styles */
/********************************************************************************/
@import "../bootstrap/css/bootstrap.min.css";
/* Overwrite some styles */ div#mindplot {
body{ position: relative;
position: inherit; top: 50px;
left: 0;
width: 100%;
height: 100%;
border: 0;
overflow: hidden;
opacity: 1;
background-color: #f2f2f2;
background-image: linear-gradient(#ebe9e7 1px, transparent 1px), linear-gradient(to right, #ebe9e7 1px, #f2f2f2 1px);
background-size: 50px 50px;
}
.notesTip {
background-color: #dfcf3c;
padding: 5px 15px;
color: #666666;
font-size: 13px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}
.linkTip {
background-color: #dfcf3c;
padding: 5px 15px;
color: #666666;
/*font-weight: bold;*/
/*width: 100px;*/
font-size: 13px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}
#floating-panel {
position: fixed;
display: flex;
flex-direction: column;
align-items: flex-end;
bottom: 20px;
right: 20px;
align-items: stretch;
}
div#bottom-logo {
position: fixed;
left: 20px;
bottom: 10px;
background: url(../../images/editor/logo-text-black.svg) no-repeat;
width: 90px;
height: 40px;
}
div#position {
margin-top: 5px;
}
#position-button {
cursor: pointer;
border: solid black 1px;
width: 40px;
height: 40px;
background-position: center;
background-repeat: no-repeat;
background-size: 40px 40px;
background-color: #FFF;
border-radius: 8px;
}
#zoom-button {
width: 40px;
border: 0;
}
#zoom-plus,
#zoom-minus {
border: solid black 1px;
height: 40px;
width: 40px;
background-repeat: no-repeat;
background-size: 40px 40px;
background-position: center;
cursor: pointer;
background-color: #FFF;
}
#zoom-plus {
border-radius: 8px 8px 0 0;
}
#zoom-minus {
border-radius: 0 0 8px 8px;
} }
div#footerLogo { div#footerLogo {

View File

@ -16,8 +16,7 @@
<base href="${requestScope['site.baseurl']}/static/webapp/"> <base href="${requestScope['site.baseurl']}/static/webapp/">
<link rel="preconnect" href="https://fonts.gstatic.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;600&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="../../css/editor.css"/>
<%@ include file="/jsp/pageHeaders.jsf" %> <%@ include file="/jsp/pageHeaders.jsf" %>
<title>Loading ... | WiseMapping</title> <title>Loading ... | WiseMapping</title>