Backup_Repos/jsketcher
1
0
Fork 0
mirror of https://github.com/xibyte/jsketcher synced 2026-01-09 09:12:37 +01:00
Code Issues Projects Releases Wiki Activity

work on color, make different levels of background

Browse source
This commit is contained in:
Val Erastov (xibyte) 2020-05-22 01:17:37 -07:00
parent b6fde5e983
commit 69617e317a
15 changed files with 59 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
modules/ui/components/AuxWidget.less
View file

@ -1,10 +1,12 @@
@import "./flatEdges.less";
@import "~ui/styles/theme.less";
@border-radius: 3px;
.root {
color: #fff;
background-color: rgba(40, 40, 40, 0.95);
border: solid 1px #000;
color: @font-color;
background-color: @bg-color-3;
border: solid 1px @bg-color-1;
border-radius: @border-radius;
}

4
modules/ui/components/Folder.less
View file

@ -1,12 +1,12 @@
@import "~ui/styles/theme.less";
.root {
background-color: @bg-color-alt;
background-color: @bg-color-2;
}
.title {
border-bottom: 1px solid @border-color;
background-color: @bg-color;
background-color: @bg-base-color;
padding: 3px 6px;
line-height: 1.7;
}

2
modules/ui/components/Menu.less
View file

@ -39,7 +39,7 @@
}
.separator {
border-top: solid 1px #777;
border-top: solid 1px @bg-color-8;
}
.disabled {

2
modules/ui/components/TabSwitcher.less
View file

@ -15,7 +15,7 @@
color: @font-color;
}
&.active {
background-color: @bg-color-alt;
background-color: @bg-color-2;
color: @font-color;
}
&:first-child {

2
modules/ui/components/ToolButton.jsx
View file

@ -3,5 +3,5 @@ import ls from './ToolButton.less';
import cx from 'classnames';
export default function ToolButton({pressed, type, className, ...props}) {
return <button tabIndex="-1" className={cx(ls.root, ls[type], pressed && ls.pressed, className)} {...props}/>;
return <button tabIndex="-1" className={cx(ls.root, ls[type], pressed && ls.pressed, className, 'small-typography')} {...props}/>;
}

16
modules/ui/components/ToolButton.less
View file

@ -2,25 +2,25 @@
.root {
border: 1px solid @bg-color;
//border: 1px solid @bg-color-6;
margin: 3px;
border-radius: 3px;
padding: 5px 2px;
padding: 0.4em 0.3em;
cursor: pointer;
background-color: @bg-color;
background-color: @bg-color-6;
color: @font-color-empph;
outline: none;
&:hover {
background-color: #9c9c9c !important;
}
background-color: @bg-color-5 !important;
}
&:active {
transition: 200ms;
background-color: #BFBFBF !important;
background-color: @bg-color-7 !important;
}
&.pressed {
background-color: #7d7d7d;
background-color: @color-btn-selected !important;
}
}

7
modules/ui/components/Window.less
View file

@ -4,7 +4,7 @@
.root {
position: absolute;
z-index: 1;
background-color: @bg-color-alt;
background-color: @bg-color-4;
display: flex;
flex-direction: column;
min-width: 100px;
@ -13,16 +13,15 @@
}
.mandatoryBorder {
border: 5px solid #444444;
border: 5px solid @bg-color-4;
}
.bar {
display: flex;
align-items: stretch;
justify-content: space-between;
background-color: @bg-color;
background-color: @bg-color-3;
cursor: default;
border-bottom: 1px solid @border-color;
}
.title {

8
modules/ui/styles/global/form.less
View file

@ -4,13 +4,13 @@ button, input, select, textarea {
}
button {
padding: 4px 8px;
padding: 6px 10px;
border: 0;
background-color: darken(@color-neutral, 10%);
background-color: @bg-color-9;
font-weight: bold;
color: @font-color;
white-space: nowrap;
.button-behavior(@color-neutral);
border-radius: 1px;
&.icon-button {
display: inline-flex;

2
modules/ui/styles/global/main.less
View file

@ -4,7 +4,7 @@ html, pre {
}
body {
background-color: @bg-color;
background-color: @bg-base-color;
color: @font-color;
}

4
modules/ui/styles/global/tables.less
View file

@ -4,10 +4,10 @@ table {
table.striped {
& tr:nth-child(even), & th {
background-color: @bg-color
background-color: @bg-base-color
}
& tr:nth-child(odd) {
background-color: @bg-color-alt
background-color: @bg-color-2
}
& tr:hover {
background-color: @color-highlight;

34
modules/ui/styles/theme.less
View file

@ -1,13 +1,27 @@
@bg-color: #000;
@bg-color-alt: #1a1a1a;
@font-color: #eee;
@font-color-minor: #ccc;
@hue-prim: 200;
@saturation: 6%;
@font-color-suppressed: #aaa;
@font-color-disabled: #888;
@bg-color-0: hsl(@hue-prim, @saturation, 7%);
@bg-color-1: hsl(@hue-prim, @saturation, 12%);
@bg-color-2: hsl(@hue-prim, @saturation, 17%);
@bg-color-3: hsl(@hue-prim, @saturation, 23%);
@bg-color-4: hsl(@hue-prim, @saturation, 28%);
@bg-color-5: hsl(@hue-prim, @saturation, 33%);
@bg-color-6: hsl(@hue-prim, @saturation, 38%);
@bg-color-7: hsl(@hue-prim, @saturation, 43%);
@bg-color-8: hsl(@hue-prim, @saturation, 48%);
@bg-color-9: hsl(@hue-prim, @saturation, 53%);
@border-color: #2c2c2c;
@bg-base-color: @bg-color-1;
@font-color-empph: #fff;
@font-color: hsl(0, 0, 90%);
@font-color-minor: hsl(0, 0, 80%);
@font-color-suppressed: hsl(0, 0, 65%);
@font-color-disabled: hsl(0, 0, 55%);
@border-color: @bg-color-6;
@control-color-number: #2fa1d6;
@control-color-text: #9cdaf7;
@ -21,11 +35,11 @@
@color-danger: #b00;
@color-accent: #2B7D2B;
@color-neutral: #66727d;
@color-highlight: #003f5d;
@color-text-highlight: #9cdaf7;
@color-btn-selected: hsl(@hue-prim, 55%, 46%);
@color-text-highlight: hsl(@hue-prim, 85%, 85%);
//@work-area-toolbar-bg-color: ;
//@work-area-toolbar-font-color: ;

2
web/app/cad/dom/components/AppTabs.jsx
View file

@ -40,7 +40,7 @@ export default function AppTabs({}) {
</Card>)}
</div>
<TabSwitcher className={ls.contentSwitcher}>
<TabSwitcher className={ls.contentSwitcher + ' small-typography'}>
<Tab label='3D View' active={activeTab < 0} readOnly={true} onSwitch={switchTo.bind(null, -1)}/>

2
web/app/cad/dom/components/FloatView.less
View file

@ -14,7 +14,7 @@
.tabs {
position: relative;
border-right: 1px solid @border-color;
background-color: @bg-color-alt;
background-color: @bg-color-2;
font-size: 13px;
}

2
web/app/cad/dom/components/View3d.jsx
View file

@ -39,7 +39,7 @@ export default class View3d extends React.Component {
<HeadsUpHelper/>
</div>
<div className={ls.middleSection}>
<div className={ls.middleSection + ' small-typography'}>
<SketcherMode>
<InplaceSketcher>
<div className={ls.overlayingPanel} >

5
web/app/cad/expressions/Expressions.less
View file

@ -14,7 +14,7 @@ textarea.script {
color: #C4E1A4;
padding: 2px;
outline: none;
line-height: 1.8;
font-family: Monaco, monospace;
&:focus {
border: none;
background: inherit;
@ -30,6 +30,9 @@ textarea.script {
.switcher {
border-bottom: 1px solid @border-color;
width: 100%;
button {
padding: 0.3em 1em 0.3em 0.8em !important;
}
}
.toolBar {