Start making new theme
Isaiah Odhner
parent
2b0f0b2fb5
commit
6135471722
|
|
@ -68,12 +68,17 @@ html, body, .jspaint {
|
|||
}
|
||||
}
|
||||
.jspaint-component-area,
|
||||
.jspaint-menus {
|
||||
.jspaint-menus *,
|
||||
.jspaint-window-titlebar {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.jspaint-menus *,
|
||||
.jspaint-menu-popup * {
|
||||
cursor: default;
|
||||
}
|
||||
.jspaint-status-area,
|
||||
.jspaint-component-area,
|
||||
.jspaint-menus {
|
||||
|
|
@ -111,7 +116,7 @@ html, body, .jspaint {
|
|||
}
|
||||
.jspaint-menu-popup {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: 4;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -179,8 +184,12 @@ html, body, .jspaint {
|
|||
.jspaint-tools {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
height: 200px;
|
||||
width: 50px;
|
||||
}
|
||||
.jspaint-tool {
|
||||
display: block !important;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -241,8 +250,6 @@ html, body, .jspaint {
|
|||
.jspaint-window-close-button {
|
||||
display: inline-block !important;
|
||||
float: right;
|
||||
width: 13px;
|
||||
height: 11px;
|
||||
}
|
||||
.jspaint-window-close-button:before {
|
||||
content: '×';
|
||||
|
|
|
|||
|
|
@ -37,7 +37,6 @@
|
|||
.jspaint-menu-popup * {
|
||||
font-family: 'Segoe UI', sans-serif;
|
||||
font-size: 12px;
|
||||
cursor: default;
|
||||
}
|
||||
.jspaint-menu-container {
|
||||
margin-bottom: 1px;
|
||||
|
|
@ -204,17 +203,13 @@
|
|||
border-left-color: #7b7b7b;
|
||||
}
|
||||
.jspaint-tool {
|
||||
display: block !important;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border: 0;
|
||||
border-right: 1px solid black;
|
||||
border-bottom: 1px solid black;
|
||||
position: relative;
|
||||
background: transparent;
|
||||
outline: 0;
|
||||
}
|
||||
|
|
@ -242,6 +237,10 @@
|
|||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQMAAABIeJ9nAAAABlBMVEW9vb3///8EwsWUAAAADElEQVQI12NoYHAAAAHEAMFJRSpJAAAAAElFTkSuQmCC") repeat;
|
||||
}
|
||||
|
||||
.jspaint-tools {
|
||||
height: 200px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
|
||||
.jspaint-current-colors {
|
||||
|
|
@ -352,6 +351,10 @@
|
|||
.jspaint-window-title {
|
||||
padding-left: 2px;
|
||||
}
|
||||
.jspaint-window-close-button {
|
||||
width: 13px;
|
||||
height: 11px;
|
||||
}
|
||||
.jspaint-window-button {
|
||||
margin: 2px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,146 @@
|
|||
|
||||
body {
|
||||
font-family: Roboto, sans-serif;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.jspaint-window,
|
||||
.jspaint-menu-popup {
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
.jspaint-window,
|
||||
.jspaint-window-titlebar {
|
||||
/*border-top-left-radius: 2px;*/
|
||||
/*border-top-right-radius: 2px;*/
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
.jspaint-window-titlebar {
|
||||
background: #3f51b5;
|
||||
color: white;
|
||||
/*padding: 16px;*/
|
||||
/*height: 32px;*/
|
||||
padding: 8px;
|
||||
}
|
||||
.jspaint-window-content {
|
||||
padding: 16px;
|
||||
background: white;
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
.jspaint-component-window .jspaint-window-content {
|
||||
padding: 0;
|
||||
}
|
||||
.jspaint-component-window .jspaint-component {
|
||||
padding: 16px;
|
||||
}
|
||||
.jspaint-window-close-button {
|
||||
border: 0;
|
||||
background: none;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
.jspaint-menus {
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.jspaint-menu-button,
|
||||
.jspaint-menu-item {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.jspaint-menu-button {
|
||||
padding: 16px;
|
||||
}
|
||||
.jspaint-menu-button:hover {
|
||||
background: #eeeeee;
|
||||
}
|
||||
.jspaint-menu-button:active,
|
||||
.jspaint-menu-button.active {
|
||||
background: #e5e5e5;
|
||||
}
|
||||
|
||||
.jspaint-menu-item:hover {
|
||||
background: #eeeeee;
|
||||
}
|
||||
.jspaint-menu-item:active,
|
||||
.jspaint-menu-item.active {
|
||||
background: #e5e5e5;
|
||||
}
|
||||
|
||||
.jspaint-menu-popup {
|
||||
background: white;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.jspaint-menu-item td {
|
||||
height: 32px;
|
||||
}
|
||||
.jspaint-menu-item td:first-child {
|
||||
padding-left: 16px;
|
||||
}
|
||||
.jspaint-menu-item td:last-child {
|
||||
padding-right: 16px;
|
||||
}
|
||||
.jspaint-menu-item[disabled] {
|
||||
color: #bdbdbd;
|
||||
}
|
||||
.jspaint-menu-item.active {
|
||||
background: #eeeeee;
|
||||
}
|
||||
.jspaint-menu-hr {
|
||||
/*height: 32px;*/
|
||||
border: 0;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
.jspaint-menu-item-shortcut {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.jspaint-color-selection {
|
||||
/*border-radius: 50%; */
|
||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
/* border: 1px outset; */
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
.jspaint-color-button {
|
||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.jspaint-tools {
|
||||
width: 50px;
|
||||
}
|
||||
.jspaint-tool {
|
||||
border: 0;
|
||||
background: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.jspaint-tool.selected {
|
||||
background: rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
.jspaint-tool-options {
|
||||
/* the layout currently depends on the exact pixel width (specifically the brush tool options) */
|
||||
border: 1px solid rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
.jspaint-component-area,
|
||||
.jspaint-status-area {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
.jspaint-canvas-area {
|
||||
background: #7b7b7b;
|
||||
/*background: #e9e9e9;*/
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
|
||||
.help-window li ul {
|
||||
padding-left: 16px;
|
||||
}
|
||||
Loading…
Reference in New Issue