flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-29 18:30:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

minor tweaks to side-panels...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-12-23 04:56:28 +04:00
parent c1ed1198c0
commit c4c81887da
2 changed files with 45 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
ui/css/editor.css
View File

@ -76,29 +76,30 @@
bottom: 0px; bottom: 0px;
min-width: 10px; min-width: 10px;
background: gray; background: white;
box-shadow: 5px 5px 30px -5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 30px -5px rgba(0, 0, 0, 0.3);
} }
.side-panel.left { .side-panel.left {
left: 0px; left: 0px;
border-right: solid 1px black; border-right: solid 1px silver;
} }
.side-panel.right { .side-panel.right {
right: 0px; right: 0px;
border-left: solid 1px black; border-left: solid 1px silver;
} }
/* main controls */ /* main controls */
.panel .control { .sub-panel .control {
white-space:nowrap; white-space:nowrap;
} }
.panel .control .title { .sub-panel .control .title {
display: inline-block; display: inline-block;
width: 60px; width: 60px;
cursor: move; cursor: move;
} }
.panel .control .slider { .sub-panel .control .slider {
-webkit-appearance: none !important; -webkit-appearance: none !important;
width: 150px; width: 150px;
height: 3px; height: 3px;
@ -106,9 +107,9 @@
border-radius: 2px; border-radius: 2px;
background: white; background: white;
} }
.panel .control.at-default .slider { .sub-panel .control.at-default .slider {
} }
.panel .control .slider::-webkit-slider-thumb { .sub-panel .control .slider::-webkit-slider-thumb {
-webkit-appearance: none !important; -webkit-appearance: none !important;
height: 13px; height: 13px;
width: 13px; width: 13px;
@ -118,10 +119,10 @@
background: white; background: white;
box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.3);
} }
.panel .control.at-default .slider::-webkit-slider-thumb { .sub-panel .control.at-default .slider::-webkit-slider-thumb {
opacity: 0.5; opacity: 0.5;
} }
.panel .control .value { .sub-panel .control .value {
-webkit-appearance: none !important; -webkit-appearance: none !important;
display: inline-block; display: inline-block;
width: 25px; width: 25px;
@ -133,39 +134,39 @@
border-radius: 2px; border-radius: 2px;
background: transparent; background: transparent;
} }
.panel .control input::-webkit-outer-spin-button, .sub-panel .control input::-webkit-outer-spin-button,
.panel .control input::-webkit-inner-spin-button { .sub-panel .control input::-webkit-inner-spin-button {
-webkit-appearance: none !important; -webkit-appearance: none !important;
} }
.panel .control .reset { .sub-panel .control .reset {
visibility: hidden; visibility: hidden;
border: solid 1px transparent; border: solid 1px transparent;
} }
.panel .control:hover button.reset { .sub-panel .control:hover button.reset {
visibility: visible; visibility: visible;
} }
.panel .control .reset:hover { .sub-panel .control .reset:hover {
border: solid 1px silver; border: solid 1px silver;
} }
/* Snapshots */ /* Snapshots */
.panel .state { .sub-panel .state {
display: inline-block; display: inline-block;
margin: 1px; margin: 1px;
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
} }
.panel .state.ui-draggable-dragging { .sub-panel .state.ui-draggable-dragging {
box-shadow: 2px 2px 10px -2px rgba(0, 0, 0, 0.4); box-shadow: 2px 2px 10px -2px rgba(0, 0, 0, 0.4);
} }
.panel .states { .sub-panel .states {
min-height: 30px; min-height: 30px;
} }
/* misc */ /* misc */
.panel hr { .sub-panel hr {
border: none; border: none;
border-top: solid 1px silver; border-top: solid 1px silver;
} }
@ -185,8 +186,8 @@
.dark .panel summary::-webkit-details-marker { .dark .panel summary::-webkit-details-marker {
color: #555; color: #555;
} }
.dark .panel button, .dark .sub-panel button,
.dark .panel .state, .dark .sub-panel .state,
.dark .sub-panel { .dark .sub-panel {
border: solid 1px #333; border: solid 1px #333;
/* needed for dragging */ /* needed for dragging */
@ -200,34 +201,34 @@
background: #333; background: #333;
color: silver; color: silver;
} }
.dark .panel .state:active, .dark .sub-panel .state:active,
.dark .panel button:active { .dark .sub-panel button:active {
background: #222; background: #222;
} }
.dark .panel .control .slider { .dark .sub-panel .control .slider {
border: solid 1px #555; border: solid 1px #555;
background: black; background: black;
} }
.dark .panel .control.at-default .slider { .dark .sub-panel .control.at-default .slider {
} }
.dark .panel .control .slider::-webkit-slider-thumb { .dark .sub-panel .control .slider::-webkit-slider-thumb {
border: solid 2px #aaa; border: solid 2px #aaa;
background: black; background: black;
box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.5); box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.5);
} }
.dark .panel .control.at-default .slider::-webkit-slider-thumb { .dark .sub-panel .control.at-default .slider::-webkit-slider-thumb {
border: solid 1px gray; border: solid 1px gray;
opacity: 0.5; opacity: 0.5;
} }
.dark .panel .control .value { .dark .sub-panel .control .value {
border: none; border: none;
background: transparent; background: transparent;
color: gray; color: gray;
} }
.dark .panel .control .reset:hover { .dark .sub-panel .control .reset:hover {
border: solid 1px #333; border: solid 1px #333;
} }
.dark .panel hr { .dark .sub-panel hr {
border: none; border: none;
border-top: solid 1px #333; border-top: solid 1px #333;
} }
@ -259,8 +260,8 @@
.gray .panel summary::-webkit-details-marker { .gray .panel summary::-webkit-details-marker {
color: #555; color: #555;
} }
.gray .panel button, .gray .sub-panel button,
.gray .panel .state, .gray .sub-panel .state,
.gray .sub-panel { .gray .sub-panel {
border: solid 1px #444; border: solid 1px #444;
/* needed for dragging */ /* needed for dragging */
@ -274,33 +275,33 @@
background: #444; background: #444;
color: silver; color: silver;
} }
.gray .panel .state:active, .gray .sub-panel .state:active,
.gray .panel button:active { .gray .sub-panel button:active {
background: #444; background: #444;
} }
.gray .panel .control .slider { .gray .sub-panel .control .slider {
border: solid 1px #555; border: solid 1px #555;
background: #222; background: #222;
} }
.gray .panel .control.at-default .slider { .gray .sub-panel .control.at-default .slider {
} }
.gray .panel .control .slider::-webkit-slider-thumb { .gray .sub-panel .control .slider::-webkit-slider-thumb {
border: solid 2px #aaa; border: solid 2px #aaa;
background: #333; background: #333;
} }
.gray .panel .control.at-default .slider::-webkit-slider-thumb { .gray .sub-panel .control.at-default .slider::-webkit-slider-thumb {
border: solid 1px gray; border: solid 1px gray;
opacity: 0.5; opacity: 0.5;
} }
.gray .panel .control .value { .gray .sub-panel .control .value {
border: none; border: none;
background: transparent; background: transparent;
color: gray; color: gray;
} }
.gray .panel .control .reset:hover { .gray .sub-panel .control .reset:hover {
border: solid 1px #444; border: solid 1px #444;
} }
.gray .panel hr { .gray .sub-panel hr {
border: none; border: none;
border-top: solid 1px #444; border-top: solid 1px #444;
} }

3
ui/experiments/editor.html
View File

@ -52,7 +52,8 @@ $(function(){
var panel = makeControls(target).hide() var panel = makeControls(target).hide()
$('body').append(panel) $('body')
.append(panel)
reloadControls(target) reloadControls(target)