piskel/src/css/dialogs-create-palette.css

169 lines
2.7 KiB
CSS

#dialog-container.create-palette {
width: 500px;
height: 600px;
top : 50%;
left : 50%;
position : absolute;
margin-left: -250px;
}
.show #dialog-container.create-palette {
margin-top: -300px;
}
.create-palette-section {
position: absolute;
left: 10px;
top: 50px;
}
.create-palette-import-section {
display : inline-block;
}
.colors-container {
position: absolute;
left: 10px;
right: 10px;
top: 85px;
height: 460px;
border: 1px solid black;
background: #333;
}
.color-picker-container {
position:absolute;
left : 280px;
top:0;
bottom:0;
right:0;
background: #222;
}
.create-palette-actions {
position: absolute;
box-sizing: border-box;
width:100%;
height: 45px;
left: 0;
right: 0;
bottom: 0;
padding:10px;
text-align:right;
}
.color-preview {
width: 170px;
height: 76px;
margin: 11px;
}
.colors-list {
overflow: auto;
width: 280px;
box-sizing: border-box;
height: 100%;
padding-bottom: 10px;
}
.create-palette-color, .create-palette-new-color, .colors-list-drop-proxy{
position:relative;
float : left;
width : 44px;
height : 44px;
margin : 10px 0 0 10px;
box-sizing : border-box;
cursor : pointer;
}
@-moz-document url-prefix() {
.create-palette-color, .create-palette-new-color, .colors-list-drop-proxy{
margin : 7px 0 0 7px;
}
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.create-palette-color, .create-palette-new-color, .colors-list-drop-proxy{
margin : 7px 0 0 7px;
}
}
.create-palette-color {
border:1px solid #2c2c2c;
transition : border-color 0.2s;
}
.create-palette-color:hover {
border:1px solid gold;
}
.colors-list-drop-proxy {
border:2px dotted #eee;
}
.create-palette-new-color {
border:2px dotted gold;
border-radius: 2px;
line-height: 40px;
text-align: center;
font-size: 20px;
color: gold;
}
.create-palette-color.selected {
border:2px solid gold;
}
.create-palette-remove-color {
position: absolute;
top: 0;
right: 0;
padding: 2px 4px 0 0;
opacity : 0.2;
font-weight: bold;
color: rgb(255,255,255);
text-shadow : 0 0 1px rgb(0,0,0);
transition : opacity 0.3s, color 0.1s;
}
.light-color .create-palette-remove-color {
color: rgb(0,0,0);
text-shadow : 0 0 1px rgb(255,255,255);
}
.selected .create-palette-remove-color {
top: -1px;
right: -1px;
}
.create-palette-color:hover .create-palette-remove-color {
opacity: 0.6;
}
.create-palette-color .create-palette-remove-color:hover {
opacity: 1;
color: rgb(240,80,80);
text-shadow : 0 0 1px rgb(0,0,0);
}
/*SPECTRUM OVERRIDES*/
.create-palette .sp-container{
background-color: transparent;
border: none;
box-shadow : none;
border-radius:0;
padding:5px;
}