blackhighlighter
Version:
Client and server for widget implementing secure and committed web redaction
155 lines (129 loc) • 13.4 kB
CSS
/*
jquery-blackhighlighter.css
CSS particular to the read/write/verify widgets.
Copyright (C) 2009-2014 HostileFork.com
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
See http://blackhighlighter.hostilefork.com for documentation.
*/
/*
* http://css-tricks.com/overriding-the-default-text-selection-color-with-css/
*
* Text nodes in the protection area itself are intentionally not marked with
* the black highlighter selection style. This is because of the poor handling
* of custom selection colors in webkit for such nodes. The protection area
* must clean up *any* direct children and convert them into divs before
* running the protect process! So don't add .protection-area::selection here
* to try and solve a problem; fix the canonization before the protect instead.
*
* Note: It appears that trying to set the selection color to black on black
* will fail in Chrome...it ends up choosing black on white, which means you
* can't see the highlighter mark as you drag because it's the same as non
* selected text. Using a dark gray foreground color helps the user see
* what they are redacting anyway, so maybe it's for the best.
*/
.blackhighlighter-ink *::selection { /* Safari, Chrome, etc... */
color: #bbbbbb ; /* See note: black/black fails in chrome! */
background: #000000 ;
}
.blackhighlighter-ink *::-moz-selection {
color: #bbbbbb ; /* See note: black/black fails in chrome! */
background: #000000 ; /* Firefox */
}
/*
* Blackhighlighter has 3 modes, current names: 'compose', 'protect', 'show'
* must use span.protected as .protected does not seem to work in Firefox
*/
/* COMPOSE */
div.blackhighlighter-compose span.placeholder.protected {
background-color: gray;
color: black;
}
/* PROTECT */
.blackhighlighter-protect {
/* fallback if the other cursors don't work... */
cursor: crosshair;
/* pen-cursor.cur as a Data URI, for IE - embeds hotspot */
cursor: url(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Jf/w8PD///////39/ZAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA+/v7Tf//////////dnZ1/wAAAP8DAwD/CAgF/wcHBP8HBwT/BwcE/wcHBP8HBwP/AAAA/ycnJf/v7+////////39/ZAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA+/v7Tv//////////dnZ1/wAAAP8DAwH/CAgF/wcHBP8HBwT/BwcE/wcHBP8HBwT/AAAA/yYmJP/v7+////////39/ZEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA+/v7Tv//////////d3d0/wAAAP8DAwH/CAgF/wcHBP8HBwT/BwcE/wcHBP8HBwT/AAAA/yUlJP/w8PD///////39/ZEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA+/v7Tf//////////d3d1/wAAAP8CAgD/CAgF/wcHBP8HBwT/BwcE/wcHBP8HBwP/AAAA/yYmJf/v7+////////39/ZAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA+/v7Tv//////////d3d2/wAAAP8CAgD/CAgF/wcHBP8HBwT/BwcE/wcHBP8HBwP/AAAA/ycnJv/v7+////////39/ZAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA+/v7Tv//////////dnZ1/wAAAP8DAwH/CAgF/wcHBP8HBwT/BwcE/wcHBP8HBwT/AAAA/xMTEf/g4N////////39/X0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA+/v7Tf//////////d3d1/wAAAP8DAwD/CAgF/wcH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);
/* pen-cursor.png as a Data URI, for everything else - hotspot parameter */
cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozOEE0RTRGOUE5Q0MxMUUzODY3M0U0NUNGNEVENTI4NSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozOEE0RTRGQUE5Q0MxMUUzODY3M0U0NUNGNEVENTI4NSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjM4QTRFNEY3QTlDQzExRTM4NjczRTQ1Q0Y0RUQ1Mjg1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjM4QTRFNEY4QTlDQzExRTM4NjczRTQ1Q0Y0RUQ1Mjg1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+/MIj4QAABCRJREFUeNrcV1tIVFEU3aMzomaNUjO+QE3z0YcakhiCgUqCSEEfRkRa9vgIMye0rJ8+7KuHhKY9qAyasAf2UAgSKswe6AxFQQmWhIRoIUFNqKnzaO07907X24yPcSTowHbOvd6Ztc7ae+1zrsrhcNC/HH6L+Nt5iAeIZ4gORIy7h1RyBZ52dZHVaiWdTkd2u53MZjMFBASQSqWaFc1ms5Faraa83FyKjo7ehFttQ0ND1NHRQUVFRaTX67/h3tp95eUDCfHxVF1VtTgKAHwjg/P8TH097dq9m263tvLlcoT5fFNT3KKloGT79hx8tPP8gMFAp0+eJILCFeXl1HTuHN9egTBh9TE+J1C2cyfL/pjnLS0tdBarV/n7kyYoSPj/fpBoaGzkqQ7xCrHaZwRKS0qEnFssFs34+DgVFxfTyoQEcqAuuJY0gYHCc5UVFXTh4kUaGxtjJa76hADAXTmvqq6m4OBgoZA/9fdTYlIS2SYmnCREJQ4iNXV1dTxVL5iAuHIh54draujypUvC/YioKJoA8Ie+PlrFJCYnyQ41eCSnpNCGggKehi2IgCS7BH4KBSfl3PL9O+n0eoHER5BITE4WSMTBfk87O2ldVhZ/7bbXBOSyS+AEcLVGQw7IrUbOf1osFB4RIZDoffeOcvPz6Tn6jFar5a/VI456RUAEd8p+5IgLXMPgUlPDJ5P4ASVCQ0NpZGSEnjx6xD1CADeZTAavbKjM+akTJ5yyy8GlIV4HLVlCE5BfHMdu3rplkHdWP29yXiOt3M/PKbsCnK+skD4JuWc3xMXGCiu/0tx8XPm76nnnnMGxcgbXYJ9wB87WYwv2dHcLKWDwa0ajwd2+OyuBHaWlrpUfAvhpUXZ3KycRfFViIplNJqngGhjcq+14754906w2GzjLzr5XgFd6dR5Yk57u2Woecs5+N/f0yGWvnE1htylIS03dOK3a3VlNIbsELvl8Jtk9EmB75Oflccm2cz/fUVZGLdevz032P+ANcwX/60SEEYl4iYgbHR2lkJAQJ0vezTxUO1tNWe2ewCanpigEfYFPRJmZmW5rYDODt965Q1N4GNumc5W/frE8f1sN4KbpOTfMt7MqCazlP0ajkcLCwigQK5eTkDqYy2peyu6JgD8ilw8Ub96+deYDvVtOYgokrGKTmY/V5kogg+V/39tLnwcGhKr/OjxMUQoS4ZGRStm9Ble6IEc6ivPgNmuDE76AhBZgg4ODNIw5E1lIzmdSoIi3zbb79132sqMQg5cuFQqwtraWIrC/x6OCF5LzmRRI5ZeIThwaAmGVrVu2UGFhIWVkZFBsTIzQhMSxDeA3fHWalhOYTEtPp3t371J2djZply2T7o8iXiO6Ea1t7e0mX75LyBvRepYWESBedyFeIB4iRhbrBVL1P78dz2n8FmAAttr0aJ28aX8AAAAASUVORK5CYII=)
5 28, auto;
}
div.blackhighlighter-protect span.placeholder.protected {
background-color: black;
color: black;
/*
* We don't set the word-break here because we're not using dummy text
* in the span... it's the right text, so things don't "jump" when you
* redact/unredact. Can't do this in the show/reveal phase though.
*/
}
div.blackhighlighter-protect span.placeholder.protected:hover {
background-color: gray;
cursor: pointer; cursor: hand;
/* See above notes on word-break */
}
div.blackhighlighter-protect span.placeholder.suggested {
background-color: #FFA500; /* Orange */
cursor: pointer; cursor: hand;
}
div.blackhighlighter-protect span.placeholder.suggested:hover {
background-color: #FF4500; /* OrangeRed */
cursor: pointer; cursor: hand;
}
/* SHOW */
div.blackhighlighter-show span.placeholder-sha256 {
display: none;
}
div.blackhighlighter-show span.placeholder.protected {
background-color: black;
color: black;
word-break: break-all; /* let long redaction spans be split across lines */
}
div.blackhighlighter-show span.placeholder.verified {
background-color: yellow;
cursor: pointer; cursor: hand;
}
div.blackhighlighter-show span.placeholder.verified.masked {
background-color: yellow;
color: yellow;
cursor: pointer; cursor: hand;
}
div.blackhighlighter-show span.placeholder.revealed {
background-color: #90EE90; /* Lightgreen */
}
/* REVEAL */
div.blackhighlighter-reveal span.placeholder-sha256 {
display: none;
}
div.blackhighlighter-reveal span.placeholder.protected {
background-color: black;
color: black;
word-break: break-all; /* let long redaction spans be split across lines */
}
div.blackhighlighter-reveal span.placeholder.verified {
background-color: red;
}
div.blackhighlighter-reveal span.placeholder.verified.masked {
background-color: black;
color: black;
}
div.blackhighlighter-reveal span.placeholder.revealed {
background-color: #90EE90; /* Lightgreen */
}
/* INPUT PROMPTING */
/* Use CSS2 compatible "title" attribute */
/* http://stackoverflow.com/a/18368683/211160 */
div.blackhighlighter-compose[data-ph]:empty:before {
content: attr(data-ph);
/* font-style: italic; */
color: #aaa;
}