mirror of
https://github.com/rmontanana/inventario2.git
synced 2025-08-16 07:56:00 +00:00
ref #13 Introducido el picker y los valores en el archivo de configuración. Falta que salga el colorpicker
This commit is contained in:
rmontanana
@@ -30,8 +30,8 @@
|
||||
private $confNueva="inc/configuracion.new";
|
||||
private $confAnterior="inc/configuracion.ant";
|
||||
private $plantilla;
|
||||
private $colorLat;
|
||||
private $colorCen;
|
||||
private $colorLateral;
|
||||
private $colorFondo;
|
||||
|
||||
public function ejecuta()
|
||||
{
|
||||
@@ -106,16 +106,16 @@
|
||||
}
|
||||
break;
|
||||
case 'COLORLAT':
|
||||
$this->colorLat=$valor;
|
||||
$this->colorLateral=$valor;
|
||||
if ($grabar) {
|
||||
$linea=str_replace($valor,$POST['COLORLAT'],$linea);
|
||||
$this->colorLat=$_POST['COLORLAT'];
|
||||
$linea=str_replace($valor,$POST['colorLat'],$linea);
|
||||
$this->colorLateral=$_POST['colorLat'];
|
||||
}
|
||||
case 'COLORCEN':
|
||||
$this->colorCen=$valor;
|
||||
case 'COLORFON':
|
||||
$this->colorFondo=$valor;
|
||||
if ($grabar) {
|
||||
$linea=str_replace($valor,$POST['COLORCEN'],$linea);
|
||||
$this->colorCen=$_POST['COLORCEN'];
|
||||
$linea=str_replace($valor,$POST['colorFon'],$linea);
|
||||
$this->colorFondo=$_POST['colorFon'];
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -148,14 +148,15 @@
|
||||
$salida.='<th colspan=2 class="info"><center><b>Preferencias</b></center></th>';
|
||||
$salida.='<tr><td>Nombre del Centro</td><td><input type="text" name="centro" value="'.$this->nombreCentro.'" size="30" /></td></tr>';
|
||||
$salida.='<tr><td>Número de filas</td><td><input type="text" name="filas" value="'.$this->numFilas.'" size="3" /></td></tr>';
|
||||
$salida.='<tr><td>Plantilla</td><td><select name="plantilla">';
|
||||
$salida.='<tr><td>Plantilla</td><td><select name="plantilla" class="form-control">';
|
||||
$salida.='<option value="normal" '.$normal.'>normal</option>';
|
||||
$salida.='<option '.$bootstrap.'>bootstrap</option></select></td></tr>';
|
||||
$salida.='<tr><td>Estilo</td><td><select name="estilo">';
|
||||
$salida.='<tr><td>Estilo</td><td><select name="estilo" class="form-control">';
|
||||
$salida.='<option value="personal" '.$personal.'>personal</option>';
|
||||
$salida.='<option '.$bluecurve.'>bluecurve</option>';
|
||||
$salida.='<option '.$cristal.'>cristal</option></select></td></tr>';
|
||||
$salida.='<select name="colorpicker-bootstrap3-form" id="colorpicker-bootstrap3-form" class="form-control">
|
||||
$salida.='<tr><td>Color Lateral</td><td><select name="colorLat" id="colorLat" class="form-control">
|
||||
<option value="#C4FAEC">Original</option>
|
||||
<option value="#7bd148">Green</option>
|
||||
<option value="#5484ed">Bold blue</option>
|
||||
<option value="#a4bdfc">Blue</option>
|
||||
@@ -168,7 +169,22 @@
|
||||
<option value="#dc2127">Bold red</option>
|
||||
<option value="#dbadff">Purple</option>
|
||||
<option value="#e1e1e1">Gray</option>
|
||||
</select>'
|
||||
</select></td></tr>';
|
||||
$salida.='<tr><td>Color Fondo</td><td><select name="colorFon" id="colorFon" class="form-control">
|
||||
<option value="#F3FEC8">Original</option>
|
||||
<option value="#7bd148">Green</option>
|
||||
<option value="#5484ed">Bold blue</option>
|
||||
<option value="#a4bdfc">Blue</option>
|
||||
<option value="#46d6db">Turquoise</option>
|
||||
<option value="#7ae7bf">Light green</option>
|
||||
<option value="#51b749">Bold green</option>
|
||||
<option value="#fbd75b">Yellow</option>
|
||||
<option value="#ffb878">Orange</option>
|
||||
<option value="#ff887c">Red</option>
|
||||
<option value="#dc2127">Bold red</option>
|
||||
<option value="#dbadff">Purple</option>
|
||||
<option value="#e1e1e1">Gray</option>
|
||||
</select></td></tr>';
|
||||
$salida.='<th colspan=2 class="danger"><center><b>Base de datos</b></center></th>';
|
||||
$salida.='<tr><td>Servidor</td><td><input type="text" name="servidor" value="'.$this->servidor.'" size="30" /></td></tr>';
|
||||
$salida.='<tr><td>Base de datos</td><td><input type="text" name="baseDatos" value="'.$this->baseDatos.'" size="30" /></td></tr>';
|
||||
@@ -176,101 +192,20 @@
|
||||
$salida.='<tr><td>Clave</td><td><input type="text" name="clave" value="'.$this->clave.'" size="30" /></td></tr>';
|
||||
$salida.='<tr align=center><td colspan=2><input type="submit" class="btn btn-primary" align="center" value="Aceptar" name="aceptar" /></td></tr></p>';
|
||||
$salida.='</form></div></center>';
|
||||
return $salida;
|
||||
}
|
||||
}
|
||||
?>
|
||||
<h3>Bootstrap 3 form</h3>
|
||||
<form class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label" for="input01">Text input</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="text" class="form-control" id="input01">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-offset-4 col-sm-6">
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox"> Option one
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label" for="colorpicker-bootstrap3-form">colorpicker-bootstrap3-form</label>
|
||||
<div class="col-sm-6">
|
||||
<select name="colorLat" id="colorLat" class="form-control">
|
||||
<option value="#7bd148">Green</option>
|
||||
<option value="#5484ed">Bold blue</option>
|
||||
<option value="#a4bdfc">Blue</option>
|
||||
<option value="#46d6db">Turquoise</option>
|
||||
<option value="#7ae7bf">Light green</option>
|
||||
<option value="#51b749">Bold green</option>
|
||||
<option value="#fbd75b">Yellow</option>
|
||||
<option value="#ffb878">Orange</option>
|
||||
<option value="#ff887c">Red</option>
|
||||
<option value="#dc2127">Bold red</option>
|
||||
<option value="#dbadff">Purple</option>
|
||||
<option value="#e1e1e1">Gray</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label" for="multiSelect">Multicon-select</label>
|
||||
<div class="col-sm-6">
|
||||
<select multiple id="multiSelect" class="form-control">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label" for="fileInput">File input</label>
|
||||
<div class="col-sm-6">
|
||||
<input id="fileInput" type="file">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-offset-4 col-sm-6">
|
||||
<button type="submit" class="btn btn-primary">Save changes</button>
|
||||
<button class="btn btn-default">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
|
||||
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.js"></script>
|
||||
<script src="jquery.simplecolorpicker.js"></script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('select[name="colorLat"]').on('change', function() {
|
||||
$(document.body).css('background-color', $('select[name="colorpicker-change-background-color"]').val());
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
$salida.="<script>
|
||||
$(document).ready(function() {
|
||||
$('#init').on('click', function() {
|
||||
|
||||
$('select[name="colorLat"]').simplecolorpicker({theme: 'glyphicons'});
|
||||
|
||||
$('#colorLat').simplecolorpicker({theme: 'glyphicons'});
|
||||
});
|
||||
|
||||
$('#destroy').on('click', function() {
|
||||
$('select').simplecolorpicker('destroy');
|
||||
});
|
||||
|
||||
// By default, activate simplecolorpicker plugin on HTML selects
|
||||
$('#init').trigger('click');
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
});
|
||||
</script>";
|
||||
return $salida;
|
||||
}
|
||||
}
|
||||
?>
|
||||
13
css/jquery.simplecolorpicker-glyphicons.css
Executable file
13
css/jquery.simplecolorpicker-glyphicons.css
Executable file
@@ -0,0 +1,13 @@
|
||||
.simplecolorpicker.glyphicons span.color[data-selected]:after {
|
||||
/* Taken from glyphicon class. */
|
||||
position: relative;
|
||||
top: 1px;
|
||||
font-family: 'Glyphicons Halflings';
|
||||
line-height: .9;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
content: '\e013'; /* Ok/check mark */
|
||||
|
||||
margin-right: 1px;
|
||||
margin-left: 1px;
|
||||
}
|
||||
87
css/jquery.simplecolorpicker.css
Executable file
87
css/jquery.simplecolorpicker.css
Executable file
@@ -0,0 +1,87 @@
|
||||
/*
|
||||
* Very simple jQuery Color Picker
|
||||
* https://github.com/tkrotoff/jquery-simplecolorpicker
|
||||
*
|
||||
* Copyright (C) 2012-2013 Tanguy Krotoff <tkrotoff@gmail.com>
|
||||
*
|
||||
* Licensed under the MIT license
|
||||
*/
|
||||
|
||||
/**
|
||||
* Inspired by Bootstrap Twitter.
|
||||
* See https://github.com/twbs/bootstrap/blob/master/less/navbar.less
|
||||
* See https://github.com/twbs/bootstrap/blob/master/less/dropdowns.less
|
||||
*/
|
||||
|
||||
.simplecolorpicker.picker {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: 1051; /* Above Bootstrap modal (@zindex-modal = 1050) */
|
||||
display: none;
|
||||
float: left;
|
||||
|
||||
min-width: 160px;
|
||||
max-width: 283px; /* @popover-max-width = 276px + 7 */
|
||||
|
||||
padding: 5px 0 0 5px;
|
||||
margin: 2px 0 0;
|
||||
list-style: none;
|
||||
background-color: #fff; /* @dropdown-bg */
|
||||
|
||||
border: 1px solid #ccc; /* @dropdown-fallback-border */
|
||||
border: 1px solid rgba(0, 0, 0, .15); /* @dropdown-border */
|
||||
|
||||
-webkit-border-radius: 4px; /* @border-radius-base */
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
|
||||
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
|
||||
-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
|
||||
|
||||
-webkit-background-clip: padding-box;
|
||||
-moz-background-clip: padding;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.simplecolorpicker.inline {
|
||||
display: inline-block;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.simplecolorpicker span {
|
||||
margin: 0 5px 5px 0;
|
||||
}
|
||||
|
||||
.simplecolorpicker.icon,
|
||||
.simplecolorpicker span.color {
|
||||
display: inline-block;
|
||||
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.simplecolorpicker.icon:after,
|
||||
.simplecolorpicker span.color:after {
|
||||
content: '\00a0\00a0\00a0\00a0'; /* Spaces */
|
||||
}
|
||||
|
||||
.simplecolorpicker span.color[data-disabled]:hover {
|
||||
cursor: not-allowed;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.simplecolorpicker span.color:hover,
|
||||
.simplecolorpicker span.color[data-selected],
|
||||
.simplecolorpicker span.color[data-selected]:hover {
|
||||
border: 1px solid #222; /* @gray-dark */
|
||||
}
|
||||
.simplecolorpicker span.color[data-selected]:after {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Vertical separator, replaces optgroup. */
|
||||
.simplecolorpicker span.vr {
|
||||
border-left: 1px solid #222; /* @gray-dark */
|
||||
}
|
||||
235
css/jquery.simplecolorpicker.js
Executable file
235
css/jquery.simplecolorpicker.js
Executable file
@@ -0,0 +1,235 @@
|
||||
/*
|
||||
* Very simple jQuery Color Picker
|
||||
* https://github.com/tkrotoff/jquery-simplecolorpicker
|
||||
*
|
||||
* Copyright (C) 2012-2013 Tanguy Krotoff <tkrotoff@gmail.com>
|
||||
*
|
||||
* Licensed under the MIT license
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Constructor.
|
||||
*/
|
||||
var SimpleColorPicker = function(select, options) {
|
||||
this.init('simplecolorpicker', select, options);
|
||||
};
|
||||
|
||||
/**
|
||||
* SimpleColorPicker class.
|
||||
*/
|
||||
SimpleColorPicker.prototype = {
|
||||
constructor: SimpleColorPicker,
|
||||
|
||||
init: function(type, select, options) {
|
||||
var self = this;
|
||||
|
||||
self.type = type;
|
||||
|
||||
self.$select = $(select);
|
||||
self.$select.hide();
|
||||
|
||||
self.options = $.extend({}, $.fn.simplecolorpicker.defaults, options);
|
||||
|
||||
self.$colorList = null;
|
||||
|
||||
if (self.options.picker === true) {
|
||||
var selectText = self.$select.find('> option:selected').text();
|
||||
self.$icon = $('<span class="simplecolorpicker icon"'
|
||||
+ ' title="' + selectText + '"'
|
||||
+ ' style="background-color: ' + self.$select.val() + ';"'
|
||||
+ ' role="button" tabindex="0">'
|
||||
+ '</span>').insertAfter(self.$select);
|
||||
self.$icon.on('click.' + self.type, $.proxy(self.showPicker, self));
|
||||
|
||||
self.$picker = $('<span class="simplecolorpicker picker ' + self.options.theme + '"></span>').appendTo(document.body);
|
||||
self.$colorList = self.$picker;
|
||||
|
||||
// Hide picker when clicking outside
|
||||
$(document).on('mousedown.' + self.type, $.proxy(self.hidePicker, self));
|
||||
self.$picker.on('mousedown.' + self.type, $.proxy(self.mousedown, self));
|
||||
} else {
|
||||
self.$inline = $('<span class="simplecolorpicker inline ' + self.options.theme + '"></span>').insertAfter(self.$select);
|
||||
self.$colorList = self.$inline;
|
||||
}
|
||||
|
||||
// Build the list of colors
|
||||
// <span class="color selected" title="Green" style="background-color: #7bd148;" role="button"></span>
|
||||
self.$select.find('> option').each(function() {
|
||||
var $option = $(this);
|
||||
var color = $option.val();
|
||||
|
||||
var isSelected = $option.is(':selected');
|
||||
var isDisabled = $option.is(':disabled');
|
||||
|
||||
var selected = '';
|
||||
if (isSelected === true) {
|
||||
selected = ' data-selected';
|
||||
}
|
||||
|
||||
var disabled = '';
|
||||
if (isDisabled === true) {
|
||||
disabled = ' data-disabled';
|
||||
}
|
||||
|
||||
var title = '';
|
||||
if (isDisabled === false) {
|
||||
title = ' title="' + $option.text() + '"';
|
||||
}
|
||||
|
||||
var role = '';
|
||||
if (isDisabled === false) {
|
||||
role = ' role="button" tabindex="0"';
|
||||
}
|
||||
|
||||
var $colorSpan = $('<span class="color"'
|
||||
+ title
|
||||
+ ' style="background-color: ' + color + ';"'
|
||||
+ ' data-color="' + color + '"'
|
||||
+ selected
|
||||
+ disabled
|
||||
+ role + '>'
|
||||
+ '</span>');
|
||||
|
||||
self.$colorList.append($colorSpan);
|
||||
$colorSpan.on('click.' + self.type, $.proxy(self.colorSpanClicked, self));
|
||||
|
||||
var $next = $option.next();
|
||||
if ($next.is('optgroup') === true) {
|
||||
// Vertical break, like hr
|
||||
self.$colorList.append('<span class="vr"></span>');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Changes the selected color.
|
||||
*
|
||||
* @param color the hexadecimal color to select, ex: '#fbd75b'
|
||||
*/
|
||||
selectColor: function(color) {
|
||||
var self = this;
|
||||
|
||||
var $colorSpan = self.$colorList.find('> span.color').filter(function() {
|
||||
return $(this).data('color').toLowerCase() === color.toLowerCase();
|
||||
});
|
||||
|
||||
if ($colorSpan.length > 0) {
|
||||
self.selectColorSpan($colorSpan);
|
||||
} else {
|
||||
console.error("The given color '" + color + "' could not be found");
|
||||
}
|
||||
},
|
||||
|
||||
showPicker: function() {
|
||||
var pos = this.$icon.offset();
|
||||
this.$picker.css({
|
||||
// Remove some pixels to align the picker icon with the icons inside the dropdown
|
||||
left: pos.left - 6,
|
||||
top: pos.top + this.$icon.outerHeight()
|
||||
});
|
||||
|
||||
this.$picker.show(this.options.pickerDelay);
|
||||
},
|
||||
|
||||
hidePicker: function() {
|
||||
this.$picker.hide(this.options.pickerDelay);
|
||||
},
|
||||
|
||||
/**
|
||||
* Selects the given span inside $colorList.
|
||||
*
|
||||
* The given span becomes the selected one.
|
||||
* It also changes the HTML select value, this will emit the 'change' event.
|
||||
*/
|
||||
selectColorSpan: function($colorSpan) {
|
||||
var color = $colorSpan.data('color');
|
||||
var title = $colorSpan.prop('title');
|
||||
|
||||
// Mark this span as the selected one
|
||||
$colorSpan.siblings().removeAttr('data-selected');
|
||||
$colorSpan.attr('data-selected', '');
|
||||
|
||||
if (this.options.picker === true) {
|
||||
this.$icon.css('background-color', color);
|
||||
this.$icon.prop('title', title);
|
||||
this.hidePicker();
|
||||
}
|
||||
|
||||
// Change HTML select value
|
||||
this.$select.val(color);
|
||||
},
|
||||
|
||||
/**
|
||||
* The user clicked on a color inside $colorList.
|
||||
*/
|
||||
colorSpanClicked: function(e) {
|
||||
// When a color is clicked, make it the new selected one (unless disabled)
|
||||
if ($(e.target).is('[data-disabled]') === false) {
|
||||
this.selectColorSpan($(e.target));
|
||||
this.$select.trigger('change');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Prevents the mousedown event from "eating" the click event.
|
||||
*/
|
||||
mousedown: function(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
if (this.options.picker === true) {
|
||||
this.$icon.off('.' + this.type);
|
||||
this.$icon.remove();
|
||||
$(document).off('.' + this.type);
|
||||
}
|
||||
|
||||
this.$colorList.off('.' + this.type);
|
||||
this.$colorList.remove();
|
||||
|
||||
this.$select.removeData(this.type);
|
||||
this.$select.show();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Plugin definition.
|
||||
* How to use: $('#id').simplecolorpicker()
|
||||
*/
|
||||
$.fn.simplecolorpicker = function(option) {
|
||||
var args = $.makeArray(arguments);
|
||||
args.shift();
|
||||
|
||||
// For HTML element passed to the plugin
|
||||
return this.each(function() {
|
||||
var $this = $(this),
|
||||
data = $this.data('simplecolorpicker'),
|
||||
options = typeof option === 'object' && option;
|
||||
if (data === undefined) {
|
||||
$this.data('simplecolorpicker', (data = new SimpleColorPicker(this, options)));
|
||||
}
|
||||
if (typeof option === 'string') {
|
||||
data[option].apply(data, args);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Default options.
|
||||
*/
|
||||
$.fn.simplecolorpicker.defaults = {
|
||||
// No theme by default
|
||||
theme: '',
|
||||
|
||||
// Show the picker or make it inline
|
||||
picker: false,
|
||||
|
||||
// Animation delay in milliseconds
|
||||
pickerDelay: 0
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
@@ -33,4 +33,6 @@ define('NUMFILAS',17); // Número de registros a mostrar en las pantallas de con
|
||||
define('PAUSA',2);//Nº segundos de pausa para mostrar mensaje id insertado
|
||||
define('ESTILO','personal'); //Estilo de los iconos de edición (personal, personal, personal)
|
||||
define('PLANTILLA','bootstrap'); //Estilo de la plantilla y recursos a utilizar
|
||||
define('COLORLAT', '#C4FAEC'); //Color de la barra de menú lateral
|
||||
define('COLORFON', '#F3FEC8'); //Color del fondo de la pantalla
|
||||
?>
|
||||
|
||||
@@ -15,8 +15,23 @@
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="css/dashboard.css" rel="stylesheet">
|
||||
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/jquery.simplecolorpicker.css">
|
||||
<link rel="stylesheet" href="css/jquery.simplecolorpicker-glyphicons.css">
|
||||
<style type="text/css"></style>
|
||||
<style id="clearly_highlighting_css" type="text/css">/* selection */ html.clearly_highlighting_enabled ::-moz-selection { background: rgba(246, 238, 150, 0.99); } html.clearly_highlighting_enabled ::selection { background: rgba(246, 238, 150, 0.99); } /* cursor */ html.clearly_highlighting_enabled { /* cursor and hot-spot position -- requires a default cursor, after the URL one */ cursor: url("chrome-extension://pioclpoplcdbaefihamjohnefbikjilc/clearly/images/highlight--cursor.png") 14 16, text; } /* highlight tag */ em.clearly_highlight_element { font-style: inherit !important; font-weight: inherit !important; background-image: url("chrome-extension://pioclpoplcdbaefihamjohnefbikjilc/clearly/images/highlight--yellow.png"); background-repeat: repeat-x; background-position: top left; background-size: 100% 100%; } /* the delete-buttons are positioned relative to this */ em.clearly_highlight_element.clearly_highlight_first { position: relative; } /* delete buttons */ em.clearly_highlight_element a.clearly_highlight_delete_element { display: none; cursor: pointer; padding: 0; margin: 0; line-height: 0; position: absolute; width: 34px; height: 34px; left: -17px; top: -17px; background-image: url("chrome-extension://pioclpoplcdbaefihamjohnefbikjilc/clearly/images/highlight--delete-sprite.png"); background-repeat: no-repeat; background-position: 0px 0px; } em.clearly_highlight_element a.clearly_highlight_delete_element:hover { background-position: -34px 0px; } /* retina */ @media (min--moz-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) { em.clearly_highlight_element { background-image: url("chrome-extension://pioclpoplcdbaefihamjohnefbikjilc/clearly/images/highlight--yellow@2x.png"); } em.clearly_highlight_element a.clearly_highlight_delete_element { background-image: url("chrome-extension://pioclpoplcdbaefihamjohnefbikjilc/clearly/images/highlight--delete-sprite@2x.png"); background-size: 68px 34px; } } </style><style id="holderjs-style" type="text/css"></style><style>[touch-action="none"]{ -ms-touch-action: none; touch-action: none; }[touch-action="pan-x"]{ -ms-touch-action: pan-x; touch-action: pan-x; }[touch-action="pan-y"]{ -ms-touch-action: pan-y; touch-action: pan-y; }[touch-action="scroll"],[touch-action="pan-x pan-y"],[touch-action="pan-y pan-x"]{ -ms-touch-action: pan-x pan-y; touch-action: pan-x pan-y; }
|
||||
<style id="clearly_highlighting_css" type="text/css">
|
||||
/* selection */
|
||||
html.clearly_highlighting_enabled ::-moz-selection { background: rgba(246, 238, 150, 0.99); }
|
||||
html.clearly_highlighting_enabled ::selection { background: rgba(246, 238, 150, 0.99); }
|
||||
/* cursor */
|
||||
html.clearly_highlighting_enabled {
|
||||
/* cursor and hot-spot position -- requires a default cursor, after the URL one */
|
||||
cursor: url("chrome-extension://pioclpoplcdbaefihamjohnefbikjilc/clearly/images/highlight--cursor.png") 14 16, text; }
|
||||
/* highlight tag */
|
||||
em.clearly_highlight_element { font-style: inherit !important; font-weight: inherit !important; background-image: url("chrome-extension://pioclpoplcdbaefihamjohnefbikjilc/clearly/images/highlight--yellow.png"); background-repeat: repeat-x; background-position: top left; background-size: 100% 100%; }
|
||||
/* the delete-buttons are positioned relative to this */
|
||||
em.clearly_highlight_element.clearly_highlight_first { position: relative; }
|
||||
/* delete buttons */
|
||||
em.clearly_highlight_element a.clearly_highlight_delete_element { display: none; cursor: pointer; padding: 0; margin: 0; line-height: 0; position: absolute; width: 34px; height: 34px; left: -17px; top: -17px; background-image: url("chrome-extension://pioclpoplcdbaefihamjohnefbikjilc/clearly/images/highlight--delete-sprite.png"); background-repeat: no-repeat; background-position: 0px 0px; } em.clearly_highlight_element a.clearly_highlight_delete_element:hover { background-position: -34px 0px; } /* retina */ @media (min--moz-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) { em.clearly_highlight_element { background-image: url("chrome-extension://pioclpoplcdbaefihamjohnefbikjilc/clearly/images/highlight--yellow@2x.png"); } em.clearly_highlight_element a.clearly_highlight_delete_element { background-image: url("chrome-extension://pioclpoplcdbaefihamjohnefbikjilc/clearly/images/highlight--delete-sprite@2x.png"); background-size: 68px 34px; } } </style><style id="holderjs-style" type="text/css"></style><style>[touch-action="none"]{ -ms-touch-action: none; touch-action: none; }[touch-action="pan-x"]{ -ms-touch-action: pan-x; touch-action: pan-x; }[touch-action="pan-y"]{ -ms-touch-action: pan-y; touch-action: pan-y; }[touch-action="scroll"],[touch-action="pan-x pan-y"],[touch-action="pan-y pan-x"]{ -ms-touch-action: pan-x pan-y; touch-action: pan-x pan-y; }
|
||||
</style>
|
||||
<script type="text/javascript" src="./css/jquery.min.js"></script>
|
||||
</head>
|
||||
@@ -88,5 +103,6 @@
|
||||
<script type="text/javascript" src="./css/moment.min.js"></script>
|
||||
<script type="text/javascript" src="./css/bootstrap-datetimepicker.min.js"></script>
|
||||
<script type="text/javascript" src="./css/bootstrap-datetimepicker.es.js"></script>
|
||||
<script type="text/javascript" src="./css/jquery.simplecolorpicker.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user