Extension:Fotonotes/css

/* fotonotes */

/* The overall canvas: added in fnclient-0.5.0 to provide a canvas works space to be able to place controls outside of image, and also one of: container-inactive container-active

.fn-canvas { position: relative; border: 0px solid #ddd; /*background-color: #eef5f9; border-left: 1px solid #d5e6ee; border-top: 1px solid #d5e6ee; border-right: 1px solid #d5e6ee; */ }

/* The overall container: always has class="fn-container", and also one of: container-inactive container-active

.fn-container { position: absolute; }

.fn-container img { border-width: 0; }

.fn-view-image-link { display: block; margin-top: 10px; text-align: left; }

position: absolute; background-color: #fddddd; height: 20px; width: 150px; right: 0px; top: 0px; color: black; padding-left: 4px; }
 * 1) fn-modaldialog {

/* Note areas - a separate class is applied to those being edited. */

.fn-area { position: absolute; background: url(../common/images/fotonotes/transparent.gif); border: 1px solid #222; cursor: crosshair; }

border: 1px dotted #ff0; }
 * 1) fn-area-new{

.fn-container-active .fn-area { visibility: inherit; }

.fn-container-inactive .fn-area { visibility: hidden; }

.fn-area-editing { position: absolute; visibility: visible; background: url(../common/images/fotonotes/transparent.gif); border: 1px dashed #FFFFFF; cursor: crosshair; }

.fn-area-innerborder-left { position: absolute; top: 0xp; left: 0px; border-left:1px solid #fff; width: 0px; height: 100%; }

.fn-area-innerborder-top { position: absolute; top: 0xp; left: 0px; border-top: 1px solid #fff; width: 100%; height: 1px; }

.fn-area-innerborder-right { position: absolute; top: 0xp; right: 0px; border-right:1px solid #fff; width: 0px; height: 100%; }

.fn-area-innerborder-bottom { position: absolute; top: 0xp; bottom: 0px; border-bottom: 1px solid #fff; width: 100%; }

/* Notes themselves. */

.fn-note { position: absolute; left: 0%; top: 100%; width: 150px; visibility: hidden; padding: 4px; background-color: #FFEECC; border: 1px solid #000; -moz-border-radius: 7px; /* Non-standard */ } .fn-note span { display: block; margin-top: 2px; text-align: left; line-height: 1em; } .fn-note-title { margin-bottom: 1px; font-size: 110%; font-weight: bold; color: #666633; } .fn-note-content { color: #000000; } .fn-note-author { font-size: 80%; font-style: italic; text-align: right; color: #333300; }

/* Note drag/resize UI */

.dragresize { position: absolute; width: 5px; height: 5px; font-size: 1px; background: white; border: 1px solid black; }

.dragresize-tl { top: -8px; left: -8px; cursor: nw-resize; } .dragresize-tm { top: -8px; left: 50%; margin-left: -4px; cursor: n-resize; } .dragresize-tr { top: -8px; right: -8px; cursor: ne-resize; }

.dragresize-ml { top: 50%; margin-top: -4px; left: -8px; cursor: w-resize; } .dragresize-mr { top: 50%; margin-top: -4px; right: -8px; cursor: e-resize; }

.dragresize-bl { bottom: -8px; left: -8px; cursor: sw-resize; } .dragresize-bm { bottom: -8px; left: 50%; margin-left: -4px; cursor: s-resize; } .dragresize-br { bottom: -8px; right: -8px; cursor: se-resize; }

/* Control buttons. */

.fn-controlbar { position: absolute; right: 0px; top: -18px; height: 15px; z-index: 50; } .fn-controlbar-inactive { background: transparent; width:100%; } .fn-controlbar-active { width: 100%; }

.fn-controlbar span { position: absolute; visibility: hidden; bottom: 2px; height: 11px; font-size: 1px; line-height: 1px; cursor: pointer; } .fn-controlbar-active span { visibility: inherit; }

span.fn-controlbar-toggle-inactive { left: 0px; top: -5px; width: 62px; height: 20px; background-image: url(../common/images/fotonotes/toggle-inactive.gif); } span.fn-controlbar-toggle-active { left: 0px; top: -4px; width: 62px; height: 20px; background-image: url(../common/images/fotonotes/toggle-active.gif); }

span.fn-controlbar-add-inactive { left: 0px; top: -5px; width: 52px; height: 20px; background-image: url(../common/images/fotonotes/add-inactive.gif); }

span.fn-controlbar-add-active { left: 0px; top: -5px; width: 20px; height: 20px; background-image: url(../common/images/fotonotes/add-active.gif); }

span.fn-controlbar-edit-inactive { left: 60px; top: -5px; width: 52px; height: 20px; background-image: url(../common/images/fotonotes/edit-inactive.gif); }

span.fn-controlbar-edit-active { left: 60px; top: -5px; width: 52px; height: 20px; background-image: url(../common/images/fotonotes/edit-active.gif); }

span.fn-controlbar-del-inactive { left: 120px; top: -5px; width: 62px; height: 20px; background-image: url(../common/images/fotonotes/del-inactive.gif); }

span.fn-controlbar-del-active { left: 121px; top: -5px; width: 62px; height: 20px; background-image: url(../common/images/fotonotes/del-active.gif); }

span.fn-controlbar-credits { left: 233px; top: -1px; width: 77px; height: 20px; background-image: url(../common/images/fotonotes/fncredits.gif); }

span.fn-controlbar-logo { visibility: visible; right: 2px; width: 20px; background-image: url(../common/images/fotonotes/fnlogo.gif); }

/* Editing UI */

.fn-editbar { position: absolute; left: 0px; top: 100%; z-index: 100; width: 100%; background-color: #ddd; padding-left: 5px; padding-bottom: 5px; font-size: 12px; border: 1px solid black; }

.fn-editbar-inactive { visibility: hidden; }

.fn-editbar-active { visibility: inherit; padding-bottom: 30px; }

.fn-editbar-fields { left: 0px; top: 100%; z-index: 100; width: 100%; padding: 5px 0; font-size: 12px; border: 0px solid green; }

.fn-editbar label { margin-left: 5px; font-weight: bold; }

.fn-editbar-fields p { font-weight: bold; text-align: left; display: block; }

.fn-editbar input { font-weight: normal; width: 90%; font-family: arial, helvetica, sans-serif; font-size: 9pt; font-weight: bold; cursor: text; border: 0px solid #ddd;

}

.fn-editbar-content { width: 90%; height: 3em; font-family: arial, helvetica, sans-serif; font-size: 9pt; cursor: text; border: 0px solid #ddd; }

.fn-editbar span { position: absolute; visibility: visible; top: 2px; height: 11px; font-size: 1px; line-height: 1px; cursor: pointer; }

.fn-editbar-active span { visibility: inherit; }

span.fn-editbar-ok { right: 70px; width: 28px; height: 18px; background-image: url(../common/images/fotonotes/ok.gif); border: 1px solid #bbb; visibility: inherit; padding:0px; }

span.fn-editbar-cancel { right: 6px; width: 55px; height: 18px; background-image: url(../common/images/fotonotes/cancel.gif); border: 1px solid #bbb; visibility: inherit; }