Skip to content

Commit

Permalink
themes support
Browse files Browse the repository at this point in the history
  • Loading branch information
@viliusle
viliusle committed Jul 23, 2018
1 parent 048e423 commit 7dac8c1
Show file tree
Hide file tree
Showing 8 changed files with 160 additions and 56 deletions.
75 changes: 39 additions & 36 deletions src/css/layout.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,36 +53,35 @@
user-select: none; /* Non-prefixed version */
}
.block{
position: relative;
background-color: rgba(255, 255, 255, 0.2);
background-color: var(--background-color-medium);
background-color: var(--background-color-area);
border: 1px solid rgba(0, 0, 0, 0.5);
border: 1px solid var(--background-color-border);
padding:5px;
border: 1px solid var(--border-color);
margin-bottom: 10px;
user-select: none;
}
.sidebar_right .block{
background-color: #68727b;
background-color: var(--background-color-section);
}
.block:last-child{
margin-bottom: 0;
}
.block h2{
position: relative;
margin: -5px -5px 10px -5px;
padding: 2px 5px;
margin: 0;
font-size: 110%;
background-color: rgba(255, 255, 255, 0.3);
background-color: var(--background-color-light);
background-color: var(--background-color-header);
border-bottom: #555;
}
.block h2:after{
position:absolute;
content:'';
height:0;
left:0;
right:0;
bottom: -2px;
border-top: 1px solid #aaa;
.block.toggled h2, .block h2.toggled:after{
border: none;
}
.block h2.toggle:before{
/* icon */
position:absolute;
content:'';
width: 0;
Expand All @@ -94,9 +93,13 @@
border-color: transparent transparent #333333 transparent;
}
.block h2.toggled:before{
/* icon */
border-width: 6px 5px 0 5px;
border-color: #333333 transparent transparent transparent;
}
.block .content{
padding:5px;
}
.error{
padding:20px;
margin:10px;
Expand All @@ -113,11 +116,14 @@
display: inline-block;
float: left;
height: 30px;
width: 110px;
padding: 5px 5px 5px 36px;
margin: 5px;
font-size: 14px;
text-decoration: none;
font-weight: bold;
color: #ffffff;
color: var(--text-color);
}
.logo:after{
position:absolute;
Expand Down Expand Up @@ -148,7 +154,7 @@
transform: translate(5px 0px);
}
30%, 50%, 70%{
transform: translate(0px 0px;);
transform: translate(0px 0px);
}
40%, 60%{
transform: translate(6px 0px);
Expand All @@ -159,12 +165,12 @@
.submenu{
height:40px;
background-color: rgba(255, 255, 255, 0.2);
background-color: var(--background-color-medium);
background-color: var(--background-color-section);
overflow: hidden;
}
.attributes{
float: left;
width: calc(100% - 115px);
width: calc(100% - 125px);
height: 30px;
margin-top: 5px;
padding: 3px 10px 0 10px;
Expand All @@ -182,12 +188,13 @@
display: inline-block;
padding: 3px 10px;
border: 1px solid #444;
background-color: transparent;
border-color: var(--border-color);
background-color: var(--background-color-button);
margin-right: 5px;
}
.attributes button:hover{
background-color: rgba(255, 255, 255, 0.3);
background-color: var(--background-color-light);
background-color: var(--background-color-hover);
}
.attributes button.active{
background-color: #419147;
Expand All @@ -202,23 +209,22 @@
top: 45px;
width: 40px;
padding: 0 5px;
background-color: var(--background-color-medium);
background-color: var(--background-color-section);
}
.sidebar_left .item{
display:block;
background-color: rgba(255, 255, 255, 0.2);
background-color: var(--background-color-medium);
background-color: var(--background-color-area);
background-image: url(images/sprites.png);
background-repeat: no-repeat;
height: 25px;
margin: 5px 0 5px 0;
overflow: hidden;
cursor: pointer;
/*filter: grayscale(1);*/
}
.sidebar_left .item:hover{
background-color: rgba(255, 255, 255, 0.5);
background-color: var(--background-color-lightest);
background-color: var(--background-color-hover);
}
.sidebar_left .item.active{
background-color: #419147;
Expand Down Expand Up @@ -282,6 +288,9 @@
height:100px;
margin-bottom:10px;
}
.canvas_preview_details{
padding: 0 5px;
}
.preview canvas{
cursor: pointer;
}
Expand All @@ -292,9 +301,10 @@
/* color */
.color_area{
border: 1px solid #444;
width: 100%;
width: calc(100% - 10px);
height: 40px;
cursor: pointer;
margin: 5px;
}
.colors .content{
margin-top: 10px;
Expand Down Expand Up @@ -343,9 +353,8 @@
float:right;
margin-left:5px;
padding:1px 8px;
background-color: rgba(255, 255, 255, 0.2);
background-color: var(--background-color-medium);
border:1px solid #444;
border-color: var(--border-color);
text-decoration:none;
color:#000000;
font-size:12px;
Expand All @@ -356,6 +365,7 @@
background-color: #419147;
background-color: var(--background-color-active);
border:1px solid #444;
border-color: var(--border-color);
cursor:pointer;
text-decoration:none;
}
Expand All @@ -368,7 +378,9 @@
height:19px;
overflow:hidden;
background-color:#989898;
background-color: var(--background-color-area);
border:1px solid #393939;
border-color: var(--border-color);
border-radius:3px;
cursor:pointer;
overflow:hidden;
Expand Down Expand Up @@ -420,21 +432,13 @@
bottom:0;
width: 20px;
}

.sidebar_right .label{
display: inline-block;
width: 60px;
}
.sidebar_right button.extra{
border: 1px solid #444;
background-color: var(--background-color-medium);
}
.info .toggle.toggled{
margin-bottom: -3px;
}
.toggle-full.toggle.toggled{
margin-bottom: -3px;
}
.block.details .row{
clear:both;
margin-bottom: 2px;
Expand All @@ -450,7 +454,6 @@
.block.details button{
height: 23px;
border: 1px solid #444;
background-color: var(--background-color-medium);
}
.block.details button.reset{
width: 25px;
Expand Down Expand Up @@ -486,7 +489,7 @@
}
.canvas_wrapper canvas{
position: absolute;
border: 1px solid #393939;
border: 1px solid var(--border-color);
box-sizing: content-box;
}
#mouse{
Expand Down Expand Up @@ -541,7 +544,7 @@ canvas{
pointer-events:none;
}
.group{
border:1px solid #888888;
border:1px solid #999999;
margin: 5px 0px 5px 0px;
padding:5px 8px;
}
Expand Down
9 changes: 5 additions & 4 deletions src/css/popup.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@
top: 20vh;
left: calc(50% - 500px / 2);
background-color: #7A838B;
background-color: var(--background-color-section);
border: 1px solid rgba(0, 0, 0, 0.5);
border: 1px solid var(--background-color-border);
border: 1px solid var(--border-color);
width:500px;
max-width: 100%;
max-height: calc(80vh);
Expand All @@ -30,7 +31,7 @@
padding: 6px 10px;
font-size: 18px;
background-color: rgba(255, 255, 255, 0.3);
background-color: var(--background-color-light);
background-color: var(--background-color-header);
/*cursor:move;*/
}
#popup .buttons{
Expand Down Expand Up @@ -58,10 +59,10 @@
#popup .button{
margin: 0 3px;
background-color: rgba(255, 255, 255, 0.2);
background-color: var(--background-color-medium);
background-color: var(--background-color-button);
min-width:60px;
border:1px solid rgba(0, 0, 0, 0.5);
border:1px solid var(--background-color-border);
border:1px solid var(--border-color);
padding: 5px 10px;
}
#popup input[type="text"], #popup input[type="number"], #popup textarea{
Expand Down
45 changes: 37 additions & 8 deletions src/css/reset.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,47 @@
background-repeat: no-repeat;
}
:root {
/* default */
--background-color: #424F5A;
--background-color-medium: rgba(255, 255, 255, 0.2);
--background-color-light: rgba(255, 255, 255, 0.3);
--background-color-lightest: rgba(255, 255, 255, 0.5);
--background-color-border: rgba(0, 0, 0, 0.5);
--background-color-active: #419147;
/* original - default */
--background: #424F5A;
--text-color: #000000;
--background-color-section: #68727b;
--background-color-area: #868e95;
--background-color-header: #a2a8ae;
--background-color-button: #959ca2;
--background-color-active: #419147;
--background-color-hover: #b4b9bd;
--border-color: #3c3c3c;
}
body.theme-light{
/* light */
--background: #f9f9fa;
--text-color: #0c0c0d;
--background-color-section: #f1f1f1;
--background-color-area: #ccc;
--background-color-header: #dcdcdc;
--background-color-button: #f9f9fa;
--background-color-active: #0a84ff;
--background-color-hover: #e1e1e2;
--border-color: #c1c1c1;
}
body.theme-green{
/* green */
--background: #050702;
--text-color: #acc3a9;
--background-color-section: #1c2e04;
--background-color-area: #3b5f11;
--background-color-header: #2b460f;
--background-color-button: #2e4a0d;
--background-color-active: #58960e;
--background-color-hover: #58960e;
--border-color: #4d6b1e;
}
body{
margin: 0px;
padding: 0px;
padding-top: 30px;
background-color: #424F5A;
background-color: var(--background-color);
background: var(--background);
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
Expand Down Expand Up @@ -65,6 +91,7 @@ hr{
}
input[type="text"], input[type="button"], select, input[type="number"], textarea{
border:1px solid #393939;
border-color: var(--border-color);
padding: 3px 5px;
font-size: 13px;
}
Expand All @@ -87,6 +114,8 @@ input[type="button"]:disabled{
button{
border-radius: 0;
cursor: pointer;
background-color: var(--background-color-button);
color: var(--color-text);
}
label{
display: inline-block;
Expand Down
7 changes: 7 additions & 0 deletions src/js/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,13 @@ config.layer = null;
config.need_render = false;
config.mouse = {};

//requires styles in reset.css
config.themes = [
'dark',
'light',
'green',
];

config.TOOLS = [
{
name: 'select',
Expand Down
Loading

0 comments on commit 7dac8c1

Please sign in to comment.