Abolish terrible overly general CSS rule
parent
6bb28998fe
commit
84e36f7d4d
|
@ -7,19 +7,25 @@ html, body, .jspaint {
|
||||||
border: 0;
|
border: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
.chooser-option {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
.choose-shape-style {
|
.choose-shape-style {
|
||||||
|
display: flex;
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
}
|
}
|
||||||
.choose-eraser,
|
.choose-eraser,
|
||||||
.choose-magnification,
|
.choose-magnification,
|
||||||
.choose-stroke-size,
|
.choose-stroke-size,
|
||||||
.choose-transparent-mode {
|
.choose-transparent-mode {
|
||||||
|
display: flex;
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
}
|
}
|
||||||
.choose-brush,
|
.choose-brush,
|
||||||
.choose-airbrush-size {
|
.choose-airbrush-size {
|
||||||
|
display: flex;
|
||||||
flex-flow: row wrap;
|
flex-flow: row wrap;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
align-content: space-around;
|
align-content: space-around;
|
||||||
|
@ -27,9 +33,6 @@ html, body, .jspaint {
|
||||||
.tool-options canvas {
|
.tool-options canvas {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
}
|
}
|
||||||
.jspaint :not(table):not(tbody):not(tr):not(td) {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.component-window .window-content,
|
.component-window .window-content,
|
||||||
.component-window .window-content :not(table):not(tbody):not(tr):not(td) {
|
.component-window .window-content :not(table):not(tbody):not(tr):not(td) {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -40,11 +43,13 @@ html, body, .jspaint {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
.horizontal {
|
.horizontal {
|
||||||
|
display: flex;
|
||||||
flex-flow: row;
|
flex-flow: row;
|
||||||
flex: 1 1 0;
|
flex: 1 1 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.vertical {
|
.vertical {
|
||||||
|
display: flex;
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
@ -288,9 +293,11 @@ html, body, .jspaint {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-left: 4px;
|
padding-left: 4px;
|
||||||
padding-right: 2px;
|
padding-right: 2px;
|
||||||
|
display: flex;
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
}
|
}
|
||||||
.tool-options {
|
.tool-options {
|
||||||
|
display: flex;
|
||||||
margin-top: 3px;
|
margin-top: 3px;
|
||||||
width: 41px;
|
width: 41px;
|
||||||
height: 66px;
|
height: 66px;
|
||||||
|
@ -311,9 +318,15 @@ html, body, .jspaint {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.component-area {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
.horizontal .component-area {
|
.horizontal .component-area {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
.component {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
.colors-component {
|
.colors-component {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
@ -335,11 +348,13 @@ html, body, .jspaint {
|
||||||
}
|
}
|
||||||
.colors-component.wide .color-box,
|
.colors-component.wide .color-box,
|
||||||
.colors-component.wide .palette {
|
.colors-component.wide .palette {
|
||||||
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
}
|
}
|
||||||
.colors-component.tall .color-box,
|
.colors-component.tall .color-box,
|
||||||
.colors-component.tall .palette {
|
.colors-component.tall .palette {
|
||||||
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 32px;
|
width: 32px;
|
||||||
}
|
}
|
||||||
|
@ -384,6 +399,7 @@ html, body, .jspaint {
|
||||||
}
|
}
|
||||||
.color-button,
|
.color-button,
|
||||||
.color-selection {
|
.color-selection {
|
||||||
|
display: flex;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 15px;
|
width: 15px;
|
||||||
|
@ -431,13 +447,12 @@ html, body, .jspaint {
|
||||||
flex-flow: row;
|
flex-flow: row;
|
||||||
}
|
}
|
||||||
.edit-colors-window .window-content .left-side {
|
.edit-colors-window .window-content .left-side {
|
||||||
display: flex;
|
/* display: flex;
|
||||||
flex-flow: column;
|
flex-flow: column; */
|
||||||
width: 217px;
|
width: 217px;
|
||||||
height: 298px;
|
height: 298px;
|
||||||
}
|
}
|
||||||
.edit-colors-window .window-content .right-side {
|
.edit-colors-window .window-content .right-side {
|
||||||
flex-flow: column;
|
|
||||||
width: 218px;
|
width: 218px;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-top: 7px;
|
padding-top: 7px;
|
||||||
|
@ -581,6 +596,7 @@ html, body, .jspaint {
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
}
|
}
|
||||||
.dialogue-window .window-content > form > .button-group {
|
.dialogue-window .window-content > form > .button-group {
|
||||||
|
display: flex;
|
||||||
flex-flow: row;
|
flex-flow: row;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue