2014-02-23 20:17:11 +00:00
|
|
|
|
|
|
|
|
|
html, body, .jspaint {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
border: 0;
|
2014-02-24 20:39:36 +00:00
|
|
|
|
overflow: hidden;
|
2014-02-23 20:17:11 +00:00
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.choose-shape-style {
|
2014-05-17 03:14:49 +00:00
|
|
|
|
flex-flow: column;
|
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.choose-eraser,
|
|
|
|
|
.choose-magnification,
|
|
|
|
|
.choose-stroke-size,
|
|
|
|
|
.choose-transparency {
|
2014-05-17 03:14:49 +00:00
|
|
|
|
flex-flow: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.choose-brush,
|
|
|
|
|
.choose-airbrush-size {
|
2014-05-17 01:43:50 +00:00
|
|
|
|
flex-flow: row wrap;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
align-content: space-around;
|
|
|
|
|
}
|
2018-01-25 00:06:38 +00:00
|
|
|
|
.tool-options canvas {
|
|
|
|
|
flex: 0 0 auto;
|
2014-05-17 01:43:50 +00:00
|
|
|
|
}
|
2014-05-24 04:40:04 +00:00
|
|
|
|
.jspaint :not(table):not(tbody):not(tr):not(td) {
|
2014-02-23 20:17:11 +00:00
|
|
|
|
display: flex;
|
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.component-window .window-content,
|
|
|
|
|
.component-window .window-content :not(table):not(tbody):not(tr):not(td) {
|
2014-06-08 20:38:37 +00:00
|
|
|
|
display: flex;
|
|
|
|
|
}
|
2014-02-23 20:17:11 +00:00
|
|
|
|
.jspaint {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-flow: column;
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.horizontal {
|
2014-02-23 20:17:11 +00:00
|
|
|
|
flex-flow: row;
|
2016-05-04 22:37:54 +00:00
|
|
|
|
flex: 1 1 0;
|
2015-09-20 17:43:33 +00:00
|
|
|
|
overflow: hidden;
|
2014-02-24 05:57:52 +00:00
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.vertical {
|
2014-02-24 05:57:52 +00:00
|
|
|
|
flex-flow: column;
|
|
|
|
|
flex: 1;
|
2014-02-23 20:17:11 +00:00
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.jspaint > .vertical {
|
2016-01-05 14:02:31 +00:00
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
2015-06-19 19:52:31 +00:00
|
|
|
|
@media (max-width: 300px) {
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.horizontal > .component-area {
|
2015-06-19 19:52:31 +00:00
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media (max-height: 340px) {
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.vertical > .component-area {
|
2015-06-19 19:52:31 +00:00
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media (max-height: 370px) {
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.vertical > .status-area {
|
2015-06-19 19:52:31 +00:00
|
|
|
|
display: none !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
2018-01-25 09:15:03 +00:00
|
|
|
|
.menus {
|
|
|
|
|
z-index: 5000; /*
|
|
|
|
|
really high so the menu popups go over subwindows (which dynamically increase z-index)
|
|
|
|
|
and also over other-user cursors in multi-user mode
|
|
|
|
|
also at least 2 so popups go over the canvas handles,
|
|
|
|
|
and at least 1 so that the modern theme's menubar can have a shadow
|
|
|
|
|
*/
|
|
|
|
|
/* TODO: put the menu popups in their own container, separate from the menubar */
|
|
|
|
|
/* FIXME: ..especially since now the text of the buttons goes over windows */
|
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.component-area,
|
|
|
|
|
.menus *,
|
|
|
|
|
.window-titlebar {
|
2015-06-22 00:01:12 +00:00
|
|
|
|
-webkit-user-select: none;
|
|
|
|
|
-moz-user-select: none;
|
|
|
|
|
-ms-user-select: none;
|
|
|
|
|
user-select: none;
|
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.menus *,
|
|
|
|
|
.menu-popup * {
|
2017-01-29 01:31:32 +00:00
|
|
|
|
cursor: default;
|
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.status-area,
|
|
|
|
|
.component-area,
|
|
|
|
|
.menus {
|
2015-06-14 21:47:31 +00:00
|
|
|
|
flex: 0 0 auto;
|
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.selection,
|
|
|
|
|
.textbox {
|
2017-01-28 21:16:28 +00:00
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
-moz-box-sizing: border-box;
|
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.selection > img,
|
|
|
|
|
.selection > canvas {
|
2014-11-28 02:53:34 +00:00
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.resize-ghost,
|
|
|
|
|
.selection:not(.instantiated),
|
|
|
|
|
.component-ghost {
|
2014-03-13 19:12:30 +00:00
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.component-ghost {
|
2017-01-28 21:16:28 +00:00
|
|
|
|
z-index: 500;
|
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.textbox-editor {
|
2014-08-10 05:23:28 +00:00
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
border: 0;
|
|
|
|
|
resize: none;
|
|
|
|
|
}
|
2014-02-25 06:09:55 +00:00
|
|
|
|
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.menu-container {
|
2014-05-23 21:49:55 +00:00
|
|
|
|
position: relative;
|
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.menu-popup {
|
2014-05-23 21:49:55 +00:00
|
|
|
|
position: absolute;
|
2017-01-29 01:31:32 +00:00
|
|
|
|
top: 100%;
|
2014-05-23 21:49:55 +00:00
|
|
|
|
left: 0;
|
|
|
|
|
z-index: 4;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.menu-popup-table {
|
2014-05-24 04:40:04 +00:00
|
|
|
|
border-collapse: collapse;
|
2014-05-23 23:44:26 +00:00
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.menu-item {
|
2014-05-24 04:40:04 +00:00
|
|
|
|
white-space: nowrap;
|
2014-05-23 21:49:55 +00:00
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.menu-hr {
|
2017-01-28 21:16:28 +00:00
|
|
|
|
display: block !important;
|
|
|
|
|
height: 0;
|
|
|
|
|
width: auto;
|
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.menu-hotkey {
|
2014-05-23 21:49:55 +00:00
|
|
|
|
display: inline !important;
|
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.menu-item-checkbox-area,
|
|
|
|
|
.menu-item-submenu-area {
|
2014-05-24 04:40:04 +00:00
|
|
|
|
min-width: 16px;
|
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.menu-item-checkbox-area,
|
|
|
|
|
.menu-item-submenu-area {
|
2017-01-28 21:16:28 +00:00
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
2014-05-23 21:49:55 +00:00
|
|
|
|
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.status-area {
|
2014-10-28 03:07:46 +00:00
|
|
|
|
overflow: hidden;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
cursor: default;
|
|
|
|
|
height: 1.25em;
|
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.status-text {
|
2015-06-19 19:52:31 +00:00
|
|
|
|
flex-basis: auto;
|
|
|
|
|
flex-grow: 1;
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
padding-right: 2px;
|
2014-10-28 03:07:46 +00:00
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.status-coordinates {
|
2015-06-19 19:52:31 +00:00
|
|
|
|
flex: 0 0 114px;
|
2014-10-28 03:07:46 +00:00
|
|
|
|
min-width: 0px;
|
|
|
|
|
padding-left: 3px;
|
|
|
|
|
border-left: 1px solid #7b7b7b;
|
|
|
|
|
}
|
|
|
|
|
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.Tools-component {
|
2014-02-25 07:29:22 +00:00
|
|
|
|
height: 273px;
|
2014-02-24 22:26:51 +00:00
|
|
|
|
align-items: center;
|
2014-02-24 05:57:52 +00:00
|
|
|
|
padding-left: 4px;
|
|
|
|
|
padding-right: 2px;
|
2014-02-24 22:26:51 +00:00
|
|
|
|
flex-flow: column;
|
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.tool-options {
|
2014-02-24 22:26:51 +00:00
|
|
|
|
margin-top: 3px;
|
|
|
|
|
width: 41px;
|
|
|
|
|
height: 66px;
|
|
|
|
|
box-sizing: border-box;
|
2014-05-10 20:48:33 +00:00
|
|
|
|
-moz-box-sizing: border-box;
|
2014-02-24 05:57:52 +00:00
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.tool-options > div {
|
2014-05-16 18:55:15 +00:00
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.tools {
|
2014-02-23 20:17:11 +00:00
|
|
|
|
display: flex;
|
|
|
|
|
flex-flow: row wrap;
|
2017-01-29 01:31:32 +00:00
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.tool {
|
2017-01-29 01:31:32 +00:00
|
|
|
|
display: block !important;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
-moz-box-sizing: border-box;
|
|
|
|
|
position: relative;
|
2014-02-23 20:17:11 +00:00
|
|
|
|
}
|
2014-02-25 02:56:34 +00:00
|
|
|
|
|
2014-02-25 06:09:55 +00:00
|
|
|
|
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.Colors-component {
|
2014-02-25 06:09:55 +00:00
|
|
|
|
height: 47px;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.palette {
|
2014-02-25 02:56:34 +00:00
|
|
|
|
display: flex;
|
|
|
|
|
flex-flow: row wrap;
|
2014-02-25 03:41:08 +00:00
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.color-box,
|
|
|
|
|
.palette {
|
2014-02-25 03:41:08 +00:00
|
|
|
|
height: 32px;
|
2014-02-25 02:56:34 +00:00
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.current-colors {
|
2014-02-25 07:10:57 +00:00
|
|
|
|
width: 30px;
|
2014-02-25 06:30:28 +00:00
|
|
|
|
height: 31px;
|
|
|
|
|
}
|
2017-06-29 04:35:46 +00:00
|
|
|
|
.current-colors,
|
|
|
|
|
.color-button {
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.color-button,
|
|
|
|
|
.color-selection {
|
2014-02-25 07:10:57 +00:00
|
|
|
|
margin-left: 1px;
|
2014-02-25 06:30:28 +00:00
|
|
|
|
padding: 0;
|
|
|
|
|
box-sizing: border-box;
|
2014-05-10 20:48:33 +00:00
|
|
|
|
-moz-box-sizing: border-box;
|
2014-02-25 07:10:57 +00:00
|
|
|
|
width: 15px;
|
|
|
|
|
height: 15px;
|
2014-02-25 06:30:28 +00:00
|
|
|
|
border: 0;
|
2014-02-25 02:56:34 +00:00
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.color-button input {
|
2014-05-18 05:21:45 +00:00
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
2017-06-24 19:58:51 +00:00
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
2014-05-18 05:21:45 +00:00
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
2014-02-25 02:56:34 +00:00
|
|
|
|
|
2014-02-25 20:42:00 +00:00
|
|
|
|
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.canvas-area {
|
2014-02-23 20:17:11 +00:00
|
|
|
|
flex: 1;
|
2014-05-24 04:40:04 +00:00
|
|
|
|
display: block !important;
|
2014-03-13 19:12:30 +00:00
|
|
|
|
position: relative;
|
2014-02-25 20:42:00 +00:00
|
|
|
|
overflow: auto;
|
2014-02-26 04:24:41 +00:00
|
|
|
|
padding: 3px;
|
2014-02-26 06:25:06 +00:00
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.handle {
|
2014-02-26 06:25:06 +00:00
|
|
|
|
position: absolute;
|
|
|
|
|
width: 3px;
|
|
|
|
|
height: 3px;
|
2018-01-25 09:15:03 +00:00
|
|
|
|
z-index: 1;
|
2014-03-03 03:03:40 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.window-title {
|
2014-05-24 04:40:04 +00:00
|
|
|
|
display: inline-block !important;
|
2014-03-03 03:03:40 +00:00
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
cursor: default;
|
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.window-close-button {
|
2014-05-24 04:40:04 +00:00
|
|
|
|
display: inline-block !important;
|
2014-03-03 03:03:40 +00:00
|
|
|
|
float: right;
|
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.window-close-button:before {
|
2014-03-03 03:03:40 +00:00
|
|
|
|
content: '×';
|
|
|
|
|
position: relative;
|
2014-04-06 06:46:53 +00:00
|
|
|
|
}
|
|
|
|
|
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.window-content .button-group {
|
2015-06-19 01:11:40 +00:00
|
|
|
|
display: flex;
|
|
|
|
|
flex: 0 0 auto;
|
|
|
|
|
flex-flow: column;
|
2014-09-23 16:22:01 +00:00
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.window-content .button-group > button {
|
2015-10-14 23:30:46 +00:00
|
|
|
|
min-width: 80px;
|
2014-09-23 16:22:01 +00:00
|
|
|
|
padding: 3px 5px;
|
2015-10-14 23:30:46 +00:00
|
|
|
|
white-space: nowrap;
|
2014-09-23 16:22:01 +00:00
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.window-content > form {
|
2015-06-19 01:11:40 +00:00
|
|
|
|
display: flex;
|
|
|
|
|
flex-flow: row;
|
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.dialogue-window .window-content > form {
|
2015-06-19 01:11:40 +00:00
|
|
|
|
flex-flow: column;
|
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.dialogue-window .window-content > form > .button-group {
|
2015-06-19 01:11:40 +00:00
|
|
|
|
flex-flow: row;
|
2016-11-03 02:02:05 +00:00
|
|
|
|
justify-content: flex-end;
|
2015-06-19 01:11:40 +00:00
|
|
|
|
}
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.dialogue-window .window-content > form > div:first-child {
|
2015-06-19 01:11:40 +00:00
|
|
|
|
padding: 5px;
|
|
|
|
|
}
|
2014-09-23 16:22:01 +00:00
|
|
|
|
|
2018-01-27 23:26:10 +00:00
|
|
|
|
.version-number {
|
|
|
|
|
/* TODO: separate into a shared.css? (not really layout!) */
|
|
|
|
|
font-size: 0.6em;
|
|
|
|
|
color: #7b7b7b;
|
|
|
|
|
}
|
|
|
|
|
|
2017-05-23 06:04:23 +00:00
|
|
|
|
.help-window .window-content {
|
2015-10-13 18:56:42 +00:00
|
|
|
|
display: flex;
|
|
|
|
|
flex-flow: row;
|
|
|
|
|
}
|
|
|
|
|
.help-window .contents {
|
|
|
|
|
background: white;
|
2015-10-18 00:43:21 +00:00
|
|
|
|
flex-basis: 300px; /* normally the default is 200px, but that leaves a scrollbar and we don't have rollover viewing of longer titles (@TODO) */
|
|
|
|
|
flex-grow: 0;
|
|
|
|
|
flex-shrink: 0;
|
2015-10-13 18:56:42 +00:00
|
|
|
|
overflow: auto;
|
|
|
|
|
}
|
|
|
|
|
.help-window ul {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
.help-window li {
|
|
|
|
|
display: block;
|
2015-10-18 00:43:21 +00:00
|
|
|
|
white-space: nowrap;
|
2015-10-13 18:56:42 +00:00
|
|
|
|
}
|
2017-01-28 21:16:28 +00:00
|
|
|
|
.help-window .item {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
2015-10-13 18:56:42 +00:00
|
|
|
|
.help-window .folder:not(.expanded) ul {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
.help-window iframe {
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
2018-01-11 22:46:28 +00:00
|
|
|
|
.help-window li ul {
|
|
|
|
|
padding-left: 16px;
|
|
|
|
|
}
|
|
|
|
|
.help-window li:before {
|
|
|
|
|
content: "";
|
|
|
|
|
display: inline-block;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
width: 16px;
|
|
|
|
|
height: 16px;
|
|
|
|
|
background-position: 0 0;
|
|
|
|
|
margin-right: 2px;
|
|
|
|
|
}
|
|
|
|
|
.help-window .folder.expanded:before {
|
|
|
|
|
background-position: -16px 0;
|
|
|
|
|
}
|
|
|
|
|
.help-window .page:before {
|
|
|
|
|
background-position: -32px 0;
|
|
|
|
|
}
|
2015-10-13 18:56:42 +00:00
|
|
|
|
|
|
|
|
|
.dragging iframe {
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
|
2015-10-16 02:08:49 +00:00
|
|
|
|
.storage-manager table {
|
|
|
|
|
max-height: 400px;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
2018-01-22 06:29:52 +00:00
|
|
|
|
.storage-manager .thumbnail-container {
|
|
|
|
|
width: 64px;
|
|
|
|
|
height: 64px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
2016-11-03 02:02:05 +00:00
|
|
|
|
}
|
2018-01-22 06:29:52 +00:00
|
|
|
|
.storage-manager .thumbnail-container > img {
|
|
|
|
|
max-width: 64px;
|
|
|
|
|
max-height: 64px;
|
|
|
|
|
flex: 0 0 auto;
|
|
|
|
|
}
|
|
|
|
|
.storage-manager .thumbnail-container,
|
2016-11-03 02:02:05 +00:00
|
|
|
|
.storage-manager p {
|
|
|
|
|
margin: 5px;
|
2018-01-10 03:42:38 +00:00
|
|
|
|
}
|
2018-01-22 06:29:52 +00:00
|
|
|
|
.storage-manager .remove-button {
|
|
|
|
|
margin-left: 15px;
|
|
|
|
|
}
|
2018-01-10 03:42:38 +00:00
|
|
|
|
|
2014-04-06 06:46:53 +00:00
|
|
|
|
::before, ::after {
|
|
|
|
|
pointer-events: none;
|
2014-06-08 19:55:37 +00:00
|
|
|
|
}
|
2018-01-10 23:18:26 +00:00
|
|
|
|
|
|
|
|
|
.cursor-bully * {
|
|
|
|
|
cursor: inherit !important;
|
|
|
|
|
}
|