diff --git a/ui (gen4)/css/layout.css b/ui (gen4)/css/layout.css deleted file mode 100644 index 2a8d0e7a..00000000 --- a/ui (gen4)/css/layout.css +++ /dev/null @@ -1,1921 +0,0 @@ -/********************************************************************** -* -**********************************************************************/ -/******************************************************** Settings ***/ -/********************************************************** Mixins ***/ -/********************************************************* utility ***/ -.expanding-text .hidden { - display: none; -} -.expanding-text:hover .shown { - display: none; -} -.expanding-text .shown, -.expanding-text:hover .hidden { - display: inline; -} -/* XXX cleanup and style... - - make the arrow exact (like in .tooltip-right) - - need to align correctly for really narrow elements... -*/ -[tooltip] { - position: relative; - text-decoration: none; -} -[tooltip]:after { - display: none; - content: attr(tooltip); - position: absolute; - bottom: 130%; - left: 20%; - background: #ffcb66; - padding: 5px 15px; - color: black; - border-radius: 10px; - white-space: pre; - text-align: left; - font-size: 10px; - opacity: 0; - -webkit-transition: all 0.4s ease; - -moz-transition: all 0.4s ease; - transition: all 0.4s ease; -} -[tooltip]:before { - display: none; - content: ""; - position: absolute; - width: 0; - height: 0; - border-top: 20px solid #ffcb66; - border-left: 20px solid transparent; - border-right: 20px solid transparent; - -webkit-transition: all 0.4s ease; - -moz-transition: all 0.4s ease; - transition: all 0.4s ease; - opacity: 0; - left: 30%; - bottom: 90%; -} -[tooltip]:hover:after { - display: block; - bottom: 100%; -} -[tooltip]:hover:before { - display: block; - bottom: 70%; -} -[tooltip]:hover:after, -[tooltip]:hover:before { - opacity: 1; -} -/* make this above everything else... -* XXX not sure if this is the best way... -*/ -[tooltip]:hover { - z-index: 1000; -} -.tooltip-right[tooltip]:after { - min-height: 30px; - bottom: auto; - top: -50%; - left: 15px; -} -.tooltip-right[tooltip]:before { - border-left: 5px solid transparent; - border-right: 5px solid #ffcb66; - border-bottom: 5px solid transparent; - border-top: 5px solid transparent; - bottom: auto; - left: 5px; - top: 25%; -} -.tooltip-right[tooltip]:hover:after { - bottom: auto; -} -.tooltip-right[tooltip]:hover:before { - bottom: auto; -} -/* XXX might be good to move this to forms... */ -.tooltip-icon { - font-size: small; - opacity: 0.9; -} -.cursor-hidden { - cursor: none; -} -.cursor-hidden-r, -.cursor-hidden-r * { - cursor: none !important; -} -/*********************************************************************/ -body { - font-family: opensans, sans-serif; - padding: 0px; - margin: 0px; -} -input, -button { - border: solid silver 1px; - border-radius: 3px; -} -button:hover { - box-shadow: 0px 0px 7px 0px black; -} -/************************************************************** UI ***/ -.title-bar { - display: block; - position: fixed; - content: ""; - top: 0px; - left: 0px; - height: 20px; - width: 100%; - color: white; - background: black; - overflow: hidden; - opacity: 0; - z-index: 10000; - /* node-webkit */ - -webkit-app-region: drag; -} -.title-bar:hover { - opacity: 1; -} -.title-bar .title { - display: inline-block; - float: left; - height: 20px; - width: auto; - color: white; - background: transparent; - font-size: 11px; - font-style: italic; - font-weight: bold; - vertical-align: middle; - text-align: left; - margin: 2px; - margin-left: 10px; -} -.title-bar .button { - display: inline-block; - float: right; - width: 20px; - height: 20px; - color: white; - background: transparent; - font-size: 18px; - vertical-align: middle; - /* node-webkit */ - -webkit-app-region: no-drag; -} -.title-bar .button:hover { - cursor: pointer; -} -.title-bar .close:hover { - color: red; -} -/* -.full-screen-mode .title-bar { - display: none; -} -*/ -/********************************************************** Viewer ***/ -.viewer { - position: relative; - width: 100vw; - height: 100vh; - overflow: hidden; - /*border: solid blue 1px;*/ - box-sizing: border-box; - -moz-user-select: none; - -webkit-user-select: none; - -o-user-select: none; - -ms-user-select: none; - user-select: none; -} -/* XXX this is a stub for printing help/docs... */ -@media print { - .viewer { - display: none; - } -} -/****************************************************** Ribbon set ***/ -.ribbon-set { - position: absolute; - display: block; - /* NOTE: this needs for scaling/zooming to behave correctly and not - shift the element, when its dimensions change... - ...this is because .ribbon-set will both be used for scaling - and aligning... */ - -webkit-transform-origin: top left; - -ms-transform-origin: top left; - transform-origin: top left; -} -/* empty ribbon set... */ -.ribbon-set:empty { - width: 100% !important; - height: 100% !important; - top: 0px !important; - left: 0px !important; - -webkit-transform: none !important; - -moz-transform: none !important; - -o-transform: none !important; - -ms-transform: none !important; - transform: none !important; -} -.viewer:empty:before, -.viewer:empty:after, -.ribbon-set:empty:before, -.ribbon-set:empty:after { - display: block; - position: absolute; - content: attr(empty-msg); - top: 50%; - left: 0px; - width: 100%; - height: 20px; - margin-top: -20px; - text-align: center; - vertical-align: middle; - font-size: 18px; - font-weight: bold; - color: silver; - opacity: 0.9; - cursor: pointer; -} -.viewer:empty:after, -.ribbon-set:empty:after { - content: attr(empty-help); - margin-top: 5px; - font-weight: normal; - font-size: 16px; - opacity: 0.5; -} -/********************************************************** Ribbon ***/ -/* XXX for some reason setting image size in vmin stops this from -stretching in width... */ -.shadow, -.ribbon { - position: relative; - display: block; - /* XXX BUG: setting this will mess up new ribbon creation.... - display: inline-block;*/ - height: auto; - /*min-width: 0px;*/ - width: auto; - overflow: visible; - white-space: nowrap; - font-size: 0; - float: left; - clear: both; - background: black; - margin-top: 10px; - margin-bottom: 10px; -} -.ribbon:empty { - display: none; -} -.ribbon:first-child { - margin-top: 0px; -} -.ribbon:last-child { - margin-bottom: 0px; -} -.base-ribbon-marker { - position: absolute; - height: 100%; - color: transparent; - font-size: 20pt; - font-weight: bold; -} -.base-ribbon-marker:after { - content: "base ribbon"; - display: block; - position: absolute; - width: 300px; - bottom: 0px; - left: 0px; - padding: 5px; - box-sizing: border-box; - z-index: 1000; - color: white; - background: black; - opacity: 0.2; - font-size: 20pt; - font-weight: bold; - transform-origin: bottom left; - transform: rotate(-90deg); -} -.single-image-mode.viewer .base-ribbon-marker { - display: none; -} -/*********************************************************** Image ***/ -.marker, -.current-marker, -.mark, -.image { - position: relative; - display: inline-block; - vertical-align: middle; - text-align: left; - width: 300px; - height: 300px; - font-size: 12pt; - overflow: hidden; - box-sizing: border-box; - color: white; - text-shadow: black 0.1em 0.1em 0.4em, black 0.1em 0.1em; - /* NOTE: we can't set the bg color here because it will get - affected by filters... */ - background: no-repeat 50% transparent; - background-size: contain; - border: solid 3.75px transparent; -} -/* -.current.image { - border: solid 5px red; -} -*/ -/* NOTE: this is essentially a ribbon... */ -.shadow { - position: absolute; - overflow: visible; - width: auto; - height: auto; - margin: 0px; - background: black; - -webkit-transition: all 0.1s ease-in; - -moz-transition: all 0.1s ease-in; - -ms-transition: all 0.1s ease-in; - -o-transition: all 0.1s ease-in; - transition: all 0.1s ease-in; -} -.shadow { - -webkit-transform-origin: 0 0; - -moz-transform-origin: 0 0; - -ms-transform-origin: 0 0; - -o-transform-origin: 0 0; - transform-origin: 0 0; -} -.image.moving { - visibility: hidden; -} -.current-marker { - position: absolute; - border: solid 5px red; - background: none; - z-index: 100; - /* pass events through... (do we need IE10-?) */ - pointer-events: none; -} -.marker { - width: 50px; - border: none; - background: no-repeat 50% transparent; - background-color: transparent; - color: white; -} -.marker:after { - display: block; - position: absolute; - content: "marker"; - font-size: 32px; - font-weight: bold; - text-align: center; - overflow: visible; - width: 200px; - height: 32px; - top: 50%; - margin-top: -16px; - left: 50%; - margin-left: -100px; - -webkit-transform-origin: center center; - -ms-transform-origin: center center; - transform-origin: center center; - -webkit-transform: rotate(270deg) scaleY(1) scaleX(1); - -moz-transform: rotate(270deg) scaleY(1) scaleX(1); - -o-transform: rotate(270deg) scaleY(1) scaleX(1); - -ms-transform: rotate(270deg) scaleY(1) scaleX(1); - transform: rotate(270deg) scaleY(1) scaleX(1); - /* This prevents elements from aligning to sub-pixels...*/ - /* - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - */ - opacity: 0.5; -} -.single-image-mode.viewer .marker { - display: none; -} -/* single image mode transitions */ -/* XXX still buggy and not too needed... -.single-image-mode.viewer .image { - position: absolute; - top: 0px; - left: 0px; - - opacity: 0; - - .transition(opacity); -} -.single-image-mode.viewer .current.image { - opacity: 1; -} -*/ -/* image turning... */ -/* NOTE: need to account for proportions after turning... */ -.image[orientation="90"] { - -webkit-transform: rotate(90deg) scaleY(1) scaleX(1); - -moz-transform: rotate(90deg) scaleY(1) scaleX(1); - -o-transform: rotate(90deg) scaleY(1) scaleX(1); - -ms-transform: rotate(90deg) scaleY(1) scaleX(1); - transform: rotate(90deg) scaleY(1) scaleX(1); - /* This prevents elements from aligning to sub-pixels...*/ - /* - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - */ -} -.image[orientation="180"] { - -webkit-transform: rotate(180deg) scaleY(1) scaleX(1); - -moz-transform: rotate(180deg) scaleY(1) scaleX(1); - -o-transform: rotate(180deg) scaleY(1) scaleX(1); - -ms-transform: rotate(180deg) scaleY(1) scaleX(1); - transform: rotate(180deg) scaleY(1) scaleX(1); - /* This prevents elements from aligning to sub-pixels...*/ - /* - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - */ -} -.image[orientation="270"] { - -webkit-transform: rotate(270deg) scaleY(1) scaleX(1); - -moz-transform: rotate(270deg) scaleY(1) scaleX(1); - -o-transform: rotate(270deg) scaleY(1) scaleX(1); - -ms-transform: rotate(270deg) scaleY(1) scaleX(1); - transform: rotate(270deg) scaleY(1) scaleX(1); - /* This prevents elements from aligning to sub-pixels...*/ - /* - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - */ -} -/* Flipped vertically only... */ -/* NOTE: wee need to do all possible combinations here as we can't - combine different parts of a transform attr from different - classes */ -.image[flipped*="vertical"] { - -webkit-transform: rotate(0deg) scaleY(-1) scaleX(1); - -moz-transform: rotate(0deg) scaleY(-1) scaleX(1); - -o-transform: rotate(0deg) scaleY(-1) scaleX(1); - -ms-transform: rotate(0deg) scaleY(-1) scaleX(1); - transform: rotate(0deg) scaleY(-1) scaleX(1); - /* This prevents elements from aligning to sub-pixels...*/ - /* - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - */ -} -.image[orientation="90"][flipped="vertical"] { - -webkit-transform: rotate(90deg) scaleY(-1) scaleX(1); - -moz-transform: rotate(90deg) scaleY(-1) scaleX(1); - -o-transform: rotate(90deg) scaleY(-1) scaleX(1); - -ms-transform: rotate(90deg) scaleY(-1) scaleX(1); - transform: rotate(90deg) scaleY(-1) scaleX(1); - /* This prevents elements from aligning to sub-pixels...*/ - /* - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - */ -} -.image[orientation="180"][flipped="vertical"] { - -webkit-transform: rotate(180deg) scaleY(-1) scaleX(1); - -moz-transform: rotate(180deg) scaleY(-1) scaleX(1); - -o-transform: rotate(180deg) scaleY(-1) scaleX(1); - -ms-transform: rotate(180deg) scaleY(-1) scaleX(1); - transform: rotate(180deg) scaleY(-1) scaleX(1); - /* This prevents elements from aligning to sub-pixels...*/ - /* - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - */ -} -.image[orientation="270"][flipped="vertical"] { - -webkit-transform: rotate(270deg) scaleY(-1) scaleX(1); - -moz-transform: rotate(270deg) scaleY(-1) scaleX(1); - -o-transform: rotate(270deg) scaleY(-1) scaleX(1); - -ms-transform: rotate(270deg) scaleY(-1) scaleX(1); - transform: rotate(270deg) scaleY(-1) scaleX(1); - /* This prevents elements from aligning to sub-pixels...*/ - /* - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - */ -} -/* Flipped horizontally only... */ -.image[flipped*="horizontal"] { - -webkit-transform: rotate(0deg) scaleY(1) scaleX(-1); - -moz-transform: rotate(0deg) scaleY(1) scaleX(-1); - -o-transform: rotate(0deg) scaleY(1) scaleX(-1); - -ms-transform: rotate(0deg) scaleY(1) scaleX(-1); - transform: rotate(0deg) scaleY(1) scaleX(-1); - /* This prevents elements from aligning to sub-pixels...*/ - /* - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - */ -} -.image[orientation="90"][flipped="horizontal"] { - -webkit-transform: rotate(90deg) scaleY(1) scaleX(-1); - -moz-transform: rotate(90deg) scaleY(1) scaleX(-1); - -o-transform: rotate(90deg) scaleY(1) scaleX(-1); - -ms-transform: rotate(90deg) scaleY(1) scaleX(-1); - transform: rotate(90deg) scaleY(1) scaleX(-1); - /* This prevents elements from aligning to sub-pixels...*/ - /* - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - */ -} -.image[orientation="180"][flipped="horizontal"] { - -webkit-transform: rotate(180deg) scaleY(1) scaleX(-1); - -moz-transform: rotate(180deg) scaleY(1) scaleX(-1); - -o-transform: rotate(180deg) scaleY(1) scaleX(-1); - -ms-transform: rotate(180deg) scaleY(1) scaleX(-1); - transform: rotate(180deg) scaleY(1) scaleX(-1); - /* This prevents elements from aligning to sub-pixels...*/ - /* - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - */ -} -.image[orientation="270"][flipped="horizontal"] { - -webkit-transform: rotate(270deg) scaleY(1) scaleX(-1); - -moz-transform: rotate(270deg) scaleY(1) scaleX(-1); - -o-transform: rotate(270deg) scaleY(1) scaleX(-1); - -ms-transform: rotate(270deg) scaleY(1) scaleX(-1); - transform: rotate(270deg) scaleY(1) scaleX(-1); - /* This prevents elements from aligning to sub-pixels...*/ - /* - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - */ -} -/* Flipped vertically and horizontally... */ -.image[flipped*="vertical"][flipped*="horizontal"] { - -webkit-transform: rotate(0deg) scaleY(-1) scaleX(-1); - -moz-transform: rotate(0deg) scaleY(-1) scaleX(-1); - -o-transform: rotate(0deg) scaleY(-1) scaleX(-1); - -ms-transform: rotate(0deg) scaleY(-1) scaleX(-1); - transform: rotate(0deg) scaleY(-1) scaleX(-1); - /* This prevents elements from aligning to sub-pixels...*/ - /* - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - */ -} -.image[orientation="90"][flipped*="vertical"][flipped*="horizontal"] { - -webkit-transform: rotate(90deg) scaleY(-1) scaleX(-1); - -moz-transform: rotate(90deg) scaleY(-1) scaleX(-1); - -o-transform: rotate(90deg) scaleY(-1) scaleX(-1); - -ms-transform: rotate(90deg) scaleY(-1) scaleX(-1); - transform: rotate(90deg) scaleY(-1) scaleX(-1); - /* This prevents elements from aligning to sub-pixels...*/ - /* - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - */ -} -.image[orientation="180"][flipped*="vertical"][flipped*="horizontal"] { - -webkit-transform: rotate(180deg) scaleY(-1) scaleX(-1); - -moz-transform: rotate(180deg) scaleY(-1) scaleX(-1); - -o-transform: rotate(180deg) scaleY(-1) scaleX(-1); - -ms-transform: rotate(180deg) scaleY(-1) scaleX(-1); - transform: rotate(180deg) scaleY(-1) scaleX(-1); - /* This prevents elements from aligning to sub-pixels...*/ - /* - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - */ -} -.image[orientation="270"][flipped*="vertical"][flipped*="horizontal"] { - -webkit-transform: rotate(270deg) scaleY(-1) scaleX(-1); - -moz-transform: rotate(270deg) scaleY(-1) scaleX(-1); - -o-transform: rotate(270deg) scaleY(-1) scaleX(-1); - -ms-transform: rotate(270deg) scaleY(-1) scaleX(-1); - transform: rotate(270deg) scaleY(-1) scaleX(-1); - /* This prevents elements from aligning to sub-pixels...*/ - /* - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - */ -} -/* default backgrounds */ -/* XXX not sure if we need these... -.image { - background-image: url(images/loading.gif); -} -.image[orientation="90"] { - background-image: url(images/loading-90deg.gif); -} -.image[orientation="180"] { - background-image: url(images/loading-180deg.gif); -} -.image[orientation="270"] { - background-image: url(images/loading-270deg.gif); -} -*/ -/* separator test */ -/* -.image.red+.image:not(.red):before { - display: inline-block; - position: relative; - content: ""; - top:0px; - left: -50px; - width: 100px; - height: 100%; - - background-color: yellow; -} -*/ -/***************************************************** Image marks ***/ -/* -.marks-visible.single-image-mode.viewer .marker { - display: inline-block; - opacity: 0.5; -} -*/ -/* -.marks-visible.viewer .marked.image:after { - display: block; - position: absolute; - content: ""; - font-size: 0pt; - border: none; - - width: @ribbon-mark-size; - height: @ribbon-mark-size; - - top: auto; - bottom: @ribbon-mark-offset; - left: auto; - right: @ribbon-mark-offset; - - border-radius: 50%; - background: blue; - - box-shadow: 0px 0px 7px 0px black; -} -.marks-visible.viewer .marked.image[orientation="270"][flipped*="vertical"][flipped*="horizontal"]:after, -.marks-visible.viewer .marked.image:not([orientation])[flipped*="vertical"]:after, -.marks-visible.viewer .marked.image[orientation="0"][flipped*="vertical"]:after, -.marks-visible.viewer .marked.image[orientation="180"][flipped="horizontal"]:after, -.marks-visible.viewer .marked.image[orientation="90"]:not([flipped]):after { - top: @ribbon-mark-offset; - bottom: auto; - left: auto; - right: @ribbon-mark-offset; -} -.marks-visible.viewer .marked.image:not([orientation])[flipped*="vertical"][flipped*="horizontal"]:after, -.marks-visible.viewer .marked.image[orientation="0"][flipped*="vertical"][flipped*="horizontal"]:after, -.marks-visible.viewer .marked.image[orientation="270"][flipped="vertical"]:after, -.marks-visible.viewer .marked.image[orientation="90"][flipped="horizontal"]:after, -.marks-visible.viewer .marked.image[orientation="180"]:not([flipped]):after { - top: @ribbon-mark-offset; - bottom: auto; - left: @ribbon-mark-offset; - right: auto; -} -.marks-visible.viewer .marked.image[orientation="90"][flipped*="vertical"][flipped*="horizontal"]:after, -.marks-visible.viewer .marked.image[orientation="180"][flipped="vertical"]:after, -.marks-visible.viewer .marked.image:not([orientation])[flipped*="horizontal"]:after, -.marks-visible.viewer .marked.image[orientation="0"][flipped*="horizontal"]:after, -.marks-visible.viewer .marked.image[orientation="270"]:not([flipped]):after { - top: auto; - bottom: @ribbon-mark-offset; - left: @ribbon-mark-offset; - right: auto; -} -*/ -/* NOTE: we use a different mark representation for single image mode... */ -/* -.marks-visible.single-image-mode.viewer .marked.image:after { - display: none; -} -*/ -/* corner mark... (a-la bookmarks in PortableMag) - * XXX account for flipping... */ -/* -@ribbon-mark-offset: -15px; - -.marks-visible.viewer .marked.image:after { - display: block; - position: absolute; - content: ""; - font-size: 0pt; - border: none; - - width: 30px; - height: 30px; - - top: @ribbon-mark-offset; - right: @ribbon-mark-offset; - - background: blue; - - .rotate(45deg) -} -.marks-visible.viewer .marked.image[orientation="90"]:after { - top: @ribbon-mark-offset; - left: @ribbon-mark-offset; -} -.marks-visible.viewer .marked.image[orientation="180"]:after { - bottom: @ribbon-mark-offset; - left: @ribbon-mark-offset; -} -.marks-visible.viewer .marked.image[orientation="270"]:after { - bottom: @ribbon-mark-offset; - right: @ribbon-mark-offset; -} - - -.marked-only-view.viewer:not(.marks-visible) .image:not(.marked) { - opacity: 0.3; -} -*/ -/* new gen marks... */ -.mark { - /* this fully covers the image to simplify positioning of actual marks */ - margin-left: -300px; - border: none; -} -.viewer:not(.marks-visible) .mark { - display: none; -} -.mark.bookmark, -.mark.selected { - width: 0px; - margin-left: 0px; - border: none; - overflow: visible; -} -.mark.bookmark:after, -.mark.selected:before, -.mark.selected:after { - display: block; - position: absolute; - content: ""; - font-size: 0pt; - border: none; - width: 5px; - height: 5px; - top: auto; - bottom: 10px; - left: auto; - right: 10px; - box-shadow: 1px 1px 7px -1.3px rgba(0, 0, 0, 0.8); - box-sizing: border-box; - border-radius: 50%; - background: blue; - left: -25px; -} -.marks-visible.single-image-mode.viewer .mark:before, -.marks-visible.single-image-mode.viewer .mark:after { - display: none; -} -.mark.bookmark:after { - background: yellow; - left: -15px; -} -/* the selected tick... */ -.mark.selected:before, -.mark.selected:after { - top: 10px; - left: -20px; - bottom: auto; - border-radius: 3px; - -webkit-transform: rotate(-45deg) scaleY(1) scaleX(1); - -moz-transform: rotate(-45deg) scaleY(1) scaleX(1); - -o-transform: rotate(-45deg) scaleY(1) scaleX(1); - -ms-transform: rotate(-45deg) scaleY(1) scaleX(1); - transform: rotate(-45deg) scaleY(1) scaleX(1); - /* This prevents elements from aligning to sub-pixels...*/ - /* - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - */ -} -.mark.selected:before { - width: 3px; - height: 6px; -} -.mark.selected:after { - width: 12px; - height: 3px; -} -/* XXX these are still experimental... */ -.mark.brace-opening { - width: 20px; - height: 310px; - border-top: solid 5px yellow; - border-left: solid 5px yellow; - border-bottom: solid 5px yellow; - margin-top: -10px; - margin-bottom: -10px; - margin-right: -15px; -} -.mark.brace-closing { - width: 20px; - height: 310px; - border-top: solid 5px yellow; - border-right: solid 5px yellow; - border-bottom: solid 5px yellow; - margin-top: -10px; - margin-bottom: -10px; - margin-left: -15px; -} -/****************************************************** Image info ***/ -.inline-image-info { - display: none; - position: absolute; - bottom: 0px; - width: 100%; - background: black; - opacity: 0.7; - overflow: hidden; - white-space: nowrap; -} -.inline-image-info:hover { - -moz-user-select: auto; - -webkit-user-select: auto; - -o-user-select: auto; - -ms-user-select: auto; - user-select: auto; -} -.inline-image-info::selection { - color: white; - background: red; -} -.image-info-visible.viewer .global-image-info, -.image-info-visible.viewer .current-marker:hover .inline-image-info, -.image-info-visible.viewer .image:hover .inline-image-info { - display: block; -} -.single-image-mode.viewer .current-marker:hover .inline-image-info, -.single-image-mode.viewer .image:hover .inline-image-info { - display: none; -} -.image[orientation="90"] .inline-image-info { - top: auto; - left: 100%; - -webkit-transform-origin: bottom left; - -ms-transform-origin: bottom left; - transform-origin: bottom left; - -webkit-transform: rotate(-90deg) scaleY(1) scaleX(1); - -moz-transform: rotate(-90deg) scaleY(1) scaleX(1); - -o-transform: rotate(-90deg) scaleY(1) scaleX(1); - -ms-transform: rotate(-90deg) scaleY(1) scaleX(1); - transform: rotate(-90deg) scaleY(1) scaleX(1); - /* This prevents elements from aligning to sub-pixels...*/ - /* - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - */ -} -.image[orientation="180"] .inline-image-info { - top: 0px; - bottom: auto; - -webkit-transform: rotate(180deg) scaleY(1) scaleX(1); - -moz-transform: rotate(180deg) scaleY(1) scaleX(1); - -o-transform: rotate(180deg) scaleY(1) scaleX(1); - -ms-transform: rotate(180deg) scaleY(1) scaleX(1); - transform: rotate(180deg) scaleY(1) scaleX(1); - /* This prevents elements from aligning to sub-pixels...*/ - /* - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - */ -} -.image[orientation="270"] .inline-image-info { - top: auto; - left: auto; - right: 100%; - -webkit-transform-origin: bottom right; - -ms-transform-origin: bottom right; - transform-origin: bottom right; - -webkit-transform: rotate(90deg) scaleY(1) scaleX(1); - -moz-transform: rotate(90deg) scaleY(1) scaleX(1); - -o-transform: rotate(90deg) scaleY(1) scaleX(1); - -ms-transform: rotate(90deg) scaleY(1) scaleX(1); - transform: rotate(90deg) scaleY(1) scaleX(1); - /* This prevents elements from aligning to sub-pixels...*/ - /* - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - */ -} -/* compensate for flipping... */ -/* XXX START: I hate this code, will think if a better way to do this... */ -.image:not([orientation="90"])[flipped*="horizontal"] .inline-image-info { - -webkit-transform: rotate(0deg) scaleY(1) scaleX(-1); - -moz-transform: rotate(0deg) scaleY(1) scaleX(-1); - -o-transform: rotate(0deg) scaleY(1) scaleX(-1); - -ms-transform: rotate(0deg) scaleY(1) scaleX(-1); - transform: rotate(0deg) scaleY(1) scaleX(-1); - /* This prevents elements from aligning to sub-pixels...*/ - /* - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - */ -} -.image[orientation="90"][flipped*="horizontal"] .inline-image-info { - top: auto; - bottom: 100%; - left: -100%; - right: auto; - -webkit-transform-origin: bottom right; - -ms-transform-origin: bottom right; - transform-origin: bottom right; - -webkit-transform: rotate(90deg) scaleY(1) scaleX(-1); - -moz-transform: rotate(90deg) scaleY(1) scaleX(-1); - -o-transform: rotate(90deg) scaleY(1) scaleX(-1); - -ms-transform: rotate(90deg) scaleY(1) scaleX(-1); - transform: rotate(90deg) scaleY(1) scaleX(-1); - /* This prevents elements from aligning to sub-pixels...*/ - /* - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - */ -} -.image[orientation="180"][flipped*="horizontal"] .inline-image-info { - top: auto; - bottom: 100%; - left: 0px; - right: auto; - -webkit-transform-origin: bottom right; - -ms-transform-origin: bottom right; - transform-origin: bottom right; - -webkit-transform: rotate(180deg) scaleY(1) scaleX(-1); - -moz-transform: rotate(180deg) scaleY(1) scaleX(-1); - -o-transform: rotate(180deg) scaleY(1) scaleX(-1); - -ms-transform: rotate(180deg) scaleY(1) scaleX(-1); - transform: rotate(180deg) scaleY(1) scaleX(-1); - /* This prevents elements from aligning to sub-pixels...*/ - /* - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - */ -} -.image[orientation="270"][flipped*="horizontal"] .inline-image-info { - top: auto; - bottom: 0px; - left: 0px; - right: auto; - -webkit-transform-origin: bottom right; - -ms-transform-origin: bottom right; - transform-origin: bottom right; - -webkit-transform: rotate(270deg) scaleY(1) scaleX(-1); - -moz-transform: rotate(270deg) scaleY(1) scaleX(-1); - -o-transform: rotate(270deg) scaleY(1) scaleX(-1); - -ms-transform: rotate(270deg) scaleY(1) scaleX(-1); - transform: rotate(270deg) scaleY(1) scaleX(-1); - /* This prevents elements from aligning to sub-pixels...*/ - /* - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - */ -} -.image[flipped*="vertical"] .inline-image-info { - top: 0px; - bottom: auto; - -webkit-transform: rotate(0deg) scaleY(-1) scaleX(1); - -moz-transform: rotate(0deg) scaleY(-1) scaleX(1); - -o-transform: rotate(0deg) scaleY(-1) scaleX(1); - -ms-transform: rotate(0deg) scaleY(-1) scaleX(1); - transform: rotate(0deg) scaleY(-1) scaleX(1); - /* This prevents elements from aligning to sub-pixels...*/ - /* - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - */ -} -.image[orientation="90"][flipped*="vertical"] .inline-image-info { - top: auto; - bottom: 100%; - left: 100%; - right: auto; - -webkit-transform-origin: bottom left; - -ms-transform-origin: bottom left; - transform-origin: bottom left; - -webkit-transform: rotate(-270deg) scaleY(-1) scaleX(1); - -moz-transform: rotate(-270deg) scaleY(-1) scaleX(1); - -o-transform: rotate(-270deg) scaleY(-1) scaleX(1); - -ms-transform: rotate(-270deg) scaleY(-1) scaleX(1); - transform: rotate(-270deg) scaleY(-1) scaleX(1); - /* This prevents elements from aligning to sub-pixels...*/ - /* - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - */ -} -.image[orientation="180"][flipped*="vertical"] .inline-image-info { - top: auto; - bottom: 0px; - left: -100%; - right: auto; - -webkit-transform-origin: bottom right; - -ms-transform-origin: bottom right; - transform-origin: bottom right; - -webkit-transform: rotate(180deg) scaleY(-1) scaleX(1); - -moz-transform: rotate(180deg) scaleY(-1) scaleX(1); - -o-transform: rotate(180deg) scaleY(-1) scaleX(1); - -ms-transform: rotate(180deg) scaleY(-1) scaleX(1); - transform: rotate(180deg) scaleY(-1) scaleX(1); - /* This prevents elements from aligning to sub-pixels...*/ - /* - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - */ -} -.image[orientation="270"][flipped*="vertical"] .inline-image-info { - top: auto; - bottom: 100%; - left: -100%; - right: auto; - -webkit-transform-origin: bottom right; - -ms-transform-origin: bottom right; - transform-origin: bottom right; - -webkit-transform: rotate(270deg) scaleY(-1) scaleX(1); - -moz-transform: rotate(270deg) scaleY(-1) scaleX(1); - -o-transform: rotate(270deg) scaleY(-1) scaleX(1); - -ms-transform: rotate(270deg) scaleY(-1) scaleX(1); - transform: rotate(270deg) scaleY(-1) scaleX(1); - /* This prevents elements from aligning to sub-pixels...*/ - /* - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - */ -} -.image[flipped*="vertical"][flipped*="horizontal"] .inline-image-info { - top: 0px; - bottom: auto; - -webkit-transform: rotate(0deg) scaleY(-1) scaleX(-1); - -moz-transform: rotate(0deg) scaleY(-1) scaleX(-1); - -o-transform: rotate(0deg) scaleY(-1) scaleX(-1); - -ms-transform: rotate(0deg) scaleY(-1) scaleX(-1); - transform: rotate(0deg) scaleY(-1) scaleX(-1); - /* This prevents elements from aligning to sub-pixels...*/ - /* - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - */ -} -.image[orientation="90"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info { - top: auto; - bottom: 0px; - left: -100%; - right: auto; - -webkit-transform-origin: bottom right; - -ms-transform-origin: bottom right; - transform-origin: bottom right; - -webkit-transform: rotate(-90deg) scaleY(-1) scaleX(-1); - -moz-transform: rotate(-90deg) scaleY(-1) scaleX(-1); - -o-transform: rotate(-90deg) scaleY(-1) scaleX(-1); - -ms-transform: rotate(-90deg) scaleY(-1) scaleX(-1); - transform: rotate(-90deg) scaleY(-1) scaleX(-1); - /* This prevents elements from aligning to sub-pixels...*/ - /* - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - */ -} -.image[orientation="180"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info { - top: auto; - bottom: 0px; - left: auto; - right: auto; - -webkit-transform-origin: bottom right; - -ms-transform-origin: bottom right; - transform-origin: bottom right; - -webkit-transform: rotate(180deg) scaleY(-1) scaleX(-1); - -moz-transform: rotate(180deg) scaleY(-1) scaleX(-1); - -o-transform: rotate(180deg) scaleY(-1) scaleX(-1); - -ms-transform: rotate(180deg) scaleY(-1) scaleX(-1); - transform: rotate(180deg) scaleY(-1) scaleX(-1); - /* This prevents elements from aligning to sub-pixels...*/ - /* - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - */ -} -.image[orientation="270"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info { - top: auto; - bottom: 100%; - left: auto; - right: auto; - -webkit-transform-origin: bottom right; - -ms-transform-origin: bottom right; - transform-origin: bottom right; - -webkit-transform: rotate(90deg) scaleY(-1) scaleX(-1); - -moz-transform: rotate(90deg) scaleY(-1) scaleX(-1); - -o-transform: rotate(90deg) scaleY(-1) scaleX(-1); - -ms-transform: rotate(90deg) scaleY(-1) scaleX(-1); - transform: rotate(90deg) scaleY(-1) scaleX(-1); - /* This prevents elements from aligning to sub-pixels...*/ - /* - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - */ -} -/* XXX END */ -.overlay-info { - display: none; - position: absolute; - bottom: 0px; - left: 0px; - width: 100%; - padding: 2px; - padding-left: 10px; - padding-right: 10px; - box-sizing: border-box; - background: black; - color: silver; - opacity: 0.6; -} -.overlay-info:hover { - -moz-user-select: auto; - -webkit-user-select: auto; - -o-user-select: auto; - -ms-user-select: auto; - user-select: auto; -} -.overlay-info .spacer ~ * { - float: right; -} -.overlay-info .secondary { - font-style: italic; - font-size: small; - color: silver; -} -.overlay-info::selection, -.overlay-info ::selection { - color: white; - background: red; -} -.overlay-info.full, -.overlay-info.minimal { - display: block; - /* XXX is this correct??? */ - z-index: 1000; -} -.overlay-info.minimal { - background: transparent; -} -.overlay-info.minimal .full-only { - display: none; -} -/* space elements... */ -.overlay-info > :not(:first-child) { - margin-left: 10px; -} -.overlay-info .info { - font-style: italic; -} -/* XXX REUSE: this is the same as selected/bookmarked image markers... */ -.overlay-info .marked, -.overlay-info .marked:after, -.overlay-info .marked:before, -.overlay-info .bookmarked:after { - display: block; - position: relative; - content: ""; - font-size: 0pt; - border: none; - margin-top: 4px; - margin-bottom: 4px; - width: 10px; - height: 10px; - box-sizing: border-box; - border-radius: 50%; - background: blue; - cursor: pointer; -} -/* tick... */ -.overlay-info .marked { - background: transparent; -} -.overlay-info .marked:before, -.overlay-info .marked:after { - position: absolute; - bottom: auto; - border-radius: 3px; - -webkit-transform: rotate(-45deg) scaleY(1) scaleX(1); - -moz-transform: rotate(-45deg) scaleY(1) scaleX(1); - -o-transform: rotate(-45deg) scaleY(1) scaleX(1); - -ms-transform: rotate(-45deg) scaleY(1) scaleX(1); - transform: rotate(-45deg) scaleY(1) scaleX(1); - /* This prevents elements from aligning to sub-pixels...*/ - /* - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - */ -} -.overlay-info .marked:before { - width: 3px; - height: 6px; -} -.overlay-info .marked:after { - width: 12px; - height: 3px; -} -.overlay-info .bookmarked:after { - background: yellow; -} -.overlay-info .marked:not(.on), -.overlay-info .bookmarked:not(.on) { - opacity: 0.5; -} -.overlay-info .marked:not(.on):before, -.overlay-info .marked:not(.on):after, -.overlay-info .bookmarked:not(.on):after { - background: gray; -} -/* image index status element */ -.overlay-info .index { - cursor: pointer; -} -.overlay-info .index .position { - cursor: text; -} -.overlay-info .index.global:after { - content: "G"; - opacity: 0.7; - font-size: small; -} -.overlay-info .index.global:hover:after { - content: "Global"; -} -/*************************************************** Global status ***/ -.global-status { - display: block; - opacity: 1; - z-index: 1000; -} -/****************************************************** Indicators ***/ -.up-indicator, -.down-indicator, -.start-indicator, -.end-indicator, -.top-indicator, -.bottom-indicator { - display: block; - position: absolute; - content: ""; - top: 0px; - left: 50%; - height: 50px; - width: 100px; - margin-left: -50px; - overflow: hidden; - cursor: pointer; -} -.up-indicator:after, -.down-indicator:after { - display: inline-block; - position: absolute; - content: ""; - width: 50px; - height: 50px; - bottom: -25px; - left: 25px; - background: yellow; - -webkit-transform: rotate(45deg) scaleY(1) scaleX(1); - -moz-transform: rotate(45deg) scaleY(1) scaleX(1); - -o-transform: rotate(45deg) scaleY(1) scaleX(1); - -ms-transform: rotate(45deg) scaleY(1) scaleX(1); - transform: rotate(45deg) scaleY(1) scaleX(1); - /* This prevents elements from aligning to sub-pixels...*/ - /* - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - */ -} -.down-indicator { - top: auto; - bottom: 0px; -} -.down-indicator:after { - top: -25px; - bottom: auto; -} -.start-indicator, -.end-indicator { - left: 0px; - width: 10px; - height: 100%; - margin: 0px; - background: yellow; -} -.end-indicator { - left: auto; - right: 0px; -} -.top-indicator, -.bottom-indicator { - left: 0px; - height: 10px; - width: 100%; - margin: 0px; - background: yellow; -} -.bottom-indicator { - top: auto; - bottom: 0px; -} -/* default state */ -.up-indicator, -.down-indicator, -.start-indicator, -.end-indicator, -.top-indicator, -.bottom-indicator { - display: none; -} -/* these are generic containers for indicators */ -.global-mode-indicators, -.context-mode-indicators { - position: absolute; - height: 20px; - width: auto; - min-width: 300px; - text-align: right; - color: transparent; -} -.global-mode-indicators { - top: 20px; - right: 20px; -} -.context-mode-indicators { - right: 20px; - bottom: 20px; -} -.global-mode-indicators .mode-tip, -.context-mode-indicators .mode-tip { - display: none; - opacity: 0.5; - font-weight: bold; - color: gray; -} -.global-mode-indicators:hover .mode-tip, -.context-mode-indicators:hover .mode-tip { - display: inline-block; -} -.global-mode-indicators > *, -.context-mode-indicators > * { - font-size: small; - vertical-align: middle; - margin-left: 10px; -} -.global-mode-indicators .circle, -.context-mode-indicators .circle { - display: inline-block; - width: 10px; - height: 10px; - border-radius: 50%; -} -/* hide indicators in single image mode */ -.single-image-mode.viewer .global-mode-indicators { - opacity: 0.5; -} -.light.single-image-mode.viewer .global-mode-indicators { - opacity: 0.1; -} -.dark.single-image-mode.viewer .global-mode-indicators { - opacity: 0.6; -} -.single-image-mode.viewer .global-mode-indicators:hover { - opacity: 1; -} -.global-mode-indicators .indicator, -.context-mode-indicators .indicator { - display: none; - height: 20px; - vertical-align: middle; -} -/* actual indicators */ -/* marks... */ -.global-mode-indicators .marked-only-visible, -.global-mode-indicators .marks-visible, -.context-mode-indicators .current-image-marked { - color: blue; - cursor: pointer; - text-shadow: rgba(0, 0, 0, 0.5) 0.1em 0.1em 0.4em, rgba(0, 0, 0, 0.5) 0.1em 0.1em; -} -.context-mode-indicators .current-image-bookmarked { - color: yellow; - cursor: pointer; - text-shadow: rgba(0, 0, 0, 0.5) 0.1em 0.1em 0.4em, rgba(0, 0, 0, 0.5) 0.1em 0.1em; -} -.global-mode-indicators .marked-only-visible .shown, -.global-mode-indicators .marks-visible .shown, -.context-mode-indicators .current-image-bookmarked .shown, -.context-mode-indicators .current-image-marked .shown { - display: none; -} -.global-mode-indicators .marked-only-visible:after, -.global-mode-indicators .marks-visible:after, -.context-mode-indicators .current-image-bookmarked:after, -.context-mode-indicators .current-image-marked:after { - display: inline-block; - width: 6px; - height: 6px; - border-radius: 50%; - content: ""; - background-color: blue; - border: solid 2px blue; - margin-left: 5px; - margin-top: 3px; - top: 50%; - box-shadow: 1px 1px 10px -2px rgba(0, 0, 0, 0.7); -} -.global-mode-indicators .marked-only-visible:after, -.global-mode-indicators .marks-visible:after, -.context-mode-indicators .current-image-marked:after { - color: blue; -} -.context-mode-indicators .current-image-bookmarked:after { - color: yellow; - background-color: yellow; - border: solid 2px yellow; -} -.marks-visible.viewer .global-mode-indicators .marks-visible { - display: inline-block; -} -/* image mark in single image mode... */ -.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-bookmarked, -.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-marked { - /*display: none;*/ - display: inline-block; - text-decoration: line-through; - opacity: 0.3; -} -.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-bookmarked.shown, -.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-marked.shown { - display: inline-block; - text-decoration: none; - opacity: 1; -} -.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-bookmarked:not(.shown):after, -.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-marked:not(.shown):after { - background-color: transparent; -} -.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-bookmarked:not(.shown):hover, -.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-marked:not(.shown):hover { - opacity: 0.8; -} -.cropped-view.marks-visible.viewer .global-mode-indicators .cropped-view { - color: gray; - display: inline-block; -} -.ribbon-indicator { - display: none; - position: absolute; - top: 10px; - left: 15px; - color: white; - font-size: 42px; - font-weight: bold; - font-style: italic; - text-shadow: black 0.1em 0.1em 0.6em; - opacity: 0.1; -} -.flashing-ribbon-indicator { - display: inline-block; -} -.single-image-mode.marks-visible.viewer .ribbon-indicator { - display: inline-block; -} -.ribbon-indicator:hover:after { - display: inline-block; - content: "ribbon number"; - font-size: 14px; - opacity: 0.8; -} -.show-passive-base-ribbon-indicator:not(.single-image-mode) .base.ribbon:after { - content: ""; - position: absolute; - display: block; - width: 100%; - height: 6px; - top: 101%; - background: yellow; - opacity: 0.8; -} -/*************************************************** Progress bars ***/ -progress { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - height: 8px; -} -progress::-webkit-progress-bar { - background: transparent; - border: solid 1px gray; - border-radius: 3px; - padding: 1px; - box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2) inset; -} -progress::-webkit-progress-value { - background: yellow; - border-radius: 2px; - box-shadow: -1px -1px 5px -2px rgba(0, 0, 0, 0.8) inset; -} -/* -progress:not(value)::-webkit-progress-bar { - background: transparent; - background-image: - -webkit-linear-gradient(-45deg, transparent 33%, rgba(0,0,0,0.2) 33%, - rgba(0,0,0,0.2) 66%, transparent 66%), - -webkit-linear-gradient(left, yellow, orange, yellow); - background-size: 50px 50px; - - -webkit-animation: animate-progress 5s linear infinite; - animation: animate-progress 5s linear infinite; -} - -@-webkit-keyframes animate-progress { - 100% { - background-position: -100% 0px; - } -} -@keyframes animate-progress { - 100% { - background-position: -100% 0px; - } -} -*/ -.progress-container { - position: absolute; - top: 20px; - margin: 5px; - padding: 2px; - border-radius: 5px; - background: rgba(0, 0, 0, 0.1); -} -.progress-container:hover { - background: rgba(0, 0, 0, 0.8); -} -.progress-container:empty { - display: none; -} -.progress-bar { - color: silver; - font-size: 10px; - margin: 10px; -} -.progress-bar .close { - display: none; -} -.progress-bar:hover .close { - position: absolute; - display: inline-block; - right: 10px; -} -.progress-bar .close:hover { - position: absolute; - display: inline-block; - color: red; - cursor: pointer; -} -.progress-bar progress { - display: block; - width: 300px; -} -/********************************************** Mode: single image ***/ -.single-image-mode.viewer .ribbon { - background-color: transparent; -} -.single-image-mode.viewer .current-marker { - display: none; -} -.single-image-mode.viewer .image { - background-color: transparent; - /* NOTE: need to keep a distance from screen borders... */ - border: solid transparent 2px; -} -.single-image-mode.viewer .image:not(.current) { - /* XXX for some reason this breaks the alignment on large magnifications... - display: none; - */ - /* XXX this makes images pass through the :visible filter... - opacity: 0; - */ - visibility: hidden; -} -/************************************ Ribbon Themes (experimental) ***/ -/* XXX should these be merged with general themes?? */ -.viewer:not(.single-image-mode).gray-ribbon .ribbon { - background-color: rgba(0, 0, 0, 0.6); -} -.viewer:not(.single-image-mode).light-gray-ribbon .ribbon { - background-color: rgba(0, 0, 0, 0.2); -} -.viewer:not(.single-image-mode).transparent-ribbon .ribbon { - background-color: transparent; -} -/********************************************************** Themes ***/ -/* XXX this is by no means final... */ -/*@import "theme-light";*/ -.viewer, -.light.viewer, -.light.viewer .overlay-block .background { - background: white; -} -.light.viewer .overlay-block:hover .background:after { - color: black; -} -.light.viewer .ribbon-set:empty:before, -.light.viewer .ribbon-set:empty:after { - color: gray; -} -.light.viewer .ribbon-indicator { - color: silver; - text-shadow: none; - opacity: 0.3; -} -.light.viewer .ribbon-indicator:hover:after { - color: gray; - text-shadow: none; - opacity: 0.8; -} -.light.viewer progress::-webkit-progress-bar { - border: solid 1px silver; -} -.light.viewer .progress-container { - background: rgba(0, 0, 0, 0.05); -} -.light.viewer .progress-container:hover { - background: rgba(0, 0, 0, 0.5); -} -.light.viewer .progress-bar { - color: silver; -} -/*@import "theme-gray";*/ -.gray.viewer, -.gray.viewer .overlay-block .background { - background: #333; -} -.gray.viewer .overlay-block .dialog { - background: #555; -} -.gray.viewer .overlay-block:hover .background:after { - color: silver; - opacity: 0.4; -} -/*@import "theme-dark";*/ -.dark.viewer, -.dark.viewer .overlay-block .background { - background: #0a0a0a; -} -.dark.viewer .overlay-block .dialog { - background: #333; -} -.dark.viewer .overlay-block:hover .background:after { - color: gray; - opacity: 0.4; -} -.dark.viewer .ribbon-indicator { - opacity: 0.2; -} -.dark.viewer .ribbon-indicator:hover:after { - opacity: 0.8; -} -.large.viewer:not(.single-image-mode) .current-marker { - border-width: 2px; -} -.large.viewer:not(.single-image-mode) .mark:after, -.large.viewer:not(.single-image-mode) .marked.image:after { - -webkit-transform: rotate(0deg) scaleY(0.7) scaleX(0.7); - -moz-transform: rotate(0deg) scaleY(0.7) scaleX(0.7); - -o-transform: rotate(0deg) scaleY(0.7) scaleX(0.7); - -ms-transform: rotate(0deg) scaleY(0.7) scaleX(0.7); - transform: rotate(0deg) scaleY(0.7) scaleX(0.7); - /* This prevents elements from aligning to sub-pixels...*/ - /* - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - */ -} -.small.viewer:not(.single-image-mode) .mark:after, -.small.viewer:not(.single-image-mode) .marked.image:after { - -webkit-transform: rotate(0deg) scaleY(1.5) scaleX(1.5); - -moz-transform: rotate(0deg) scaleY(1.5) scaleX(1.5); - -o-transform: rotate(0deg) scaleY(1.5) scaleX(1.5); - -ms-transform: rotate(0deg) scaleY(1.5) scaleX(1.5); - transform: rotate(0deg) scaleY(1.5) scaleX(1.5); - /* This prevents elements from aligning to sub-pixels...*/ - /* - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - */ -} -/********************************************************* Overlay ***/ -.overlay-block { - display: none; - position: absolute; - top: 0px; - left: 0px; - height: 100%; - width: 100%; -} -.viewer.overlay .overlay-block { - display: block; -} -/* XXX this is experimental... */ -.viewer.overlay .ribbon-set { - /* XXX blur makes things slow with transparency... */ - -webkit-filter: grayscale(0.5); - filter: grayscale(0.5); - /* - -webkit-animation-name: testAnim; - -webkit-animation-duration: .2s; - -webkit-animation-iteration-count: 1; - -webkit-animation-direction: alternate; - -webkit-animation-timing-function: ease-out; - -webkit-animation-fill-mode: forwards; - -webkit-animation-delay: 0s; - */ -} -.overlay-block .content, -.overlay-block .background { - /* XXX for some magical reason position and top are overwritten - with 'static' and 'auto' values respectively */ - position: absolute !important; - top: 0px !important; - left: 0px; - height: 100%; - width: 100%; - cursor: auto; - opacity: 0.9; -} -.overlay-block .content, -.overlay-block .content table { - background: transparent; -} -.overlay-block .background { - opacity: 0.7; -} -.overlay-block:hover .background:after { - display: inline-block; - position: absolute; - content: 'Click background to close.'; - height: auto; - width: auto; - bottom: 20px; - right: 20px; - color: white; - opacity: 0.7; -} -.overlay-block .dialog { - display: inline-block; - min-height: 50px; - min-width: 300px; - /* XXX for some reason this is not sized correctly... */ - max-height: 90%; - max-width: 90%; - /* XXX this needs to be lower priority than max-height... */ - /*overflow-y: auto;*/ - color: white; - border: solid silver 1px; - border-radius: 3px; - background: gray; - padding: 20px; - vertical-align: middle; - box-shadow: 0px 5px 50px 0px black; -} -/* tables in dialogs... */ -.overlay-block .dialog table { - color: white; - font-size: small; - -moz-user-select: auto; - -webkit-user-select: auto; - -o-user-select: auto; - -ms-user-select: auto; - user-select: auto; -} -.overlay-block .dialog table tr td:first-child { - text-align: right; - font-weight: bold; -} -.overlay-block .dialog table tr td:last-child { - color: silver; -} -.overlay-block .dialog .choice .item { - text-align: left; -} -.field :focus { - box-shadow: 0px 0px 3px 0px red; -} -/* XXX this is a hack -- hide the radio button itself... */ -.field.choice input[type=radio] { - opacity: 0; - position: absolute; -} -.field.choice input ~ span { - display: block; - padding: 1px; - padding-left: 5px; - padding-right: 5px; -} -.field.choice :checked ~ span { - color: white; - background: gray; -} -.field.choice :focus ~ span { - box-shadow: 0px 0px 3px 0px red; -} -.light.viewer .field.choice :checked ~ span { - color: white; - background: silver; -} -.field .disabled-text { - opacity: 0.5; -} -/************************************************************ Help ***/ -/* XXX make this more generic, and not just for the keyboard... */ -/* this is for sliding stuff */ -.viewer.drawer-mode { - box-shadow: 0px 0px 50px 0px silver; -} -/* help */ -.keyboard-help { - width: 80%; - margin-top: 20px; - margin-left: 15%; - margin-right: 5%; - margin-bottom: 100px; -} -.keyboard-help .section-doc { - font-size: small; - vertical-align: top; - font-style: italic; -} -.keyboard-help th { - text-align: left; - height: 50px; - vertical-align: bottom; - border-bottom: solid gray 1px; -} -.keyboard-help tr:hover { - background: #eee; - vertical-align: top; -} -.keyboard-help tr td:first-child { - color: gray; - font-style: italic; - padding-right: 20px; - padding-left: 10px; -} -.keyboard-help .section-doc td:only-child { - padding-right: 0px; - padding-left: 0px; -} -/********************************************************************** -* vim:set spell ft=css : */ diff --git a/ui (gen4)/features/ui-status.js b/ui (gen4)/features/ui-status.js index ecbd8417..4eb46785 100755 --- a/ui (gen4)/features/ui-status.js +++ b/ui (gen4)/features/ui-status.js @@ -49,7 +49,7 @@ var StatusBarActions = actions.Actions({ 'status-bar-modes': [ 'none', 'minimal', - 'full' + 'full', ], 'status-bar-items': [ 'index', diff --git a/ui (gen4)/features/ui.js b/ui (gen4)/features/ui.js index c62e2c6f..d7b6fef8 100755 --- a/ui (gen4)/features/ui.js +++ b/ui (gen4)/features/ui.js @@ -3043,6 +3043,7 @@ var UIScaleActions = actions.Actions({ // XXX need to account for scale in PartialRibbons // XXX should this be browser API??? + // XXX this does not re-scale the ribbons correctly in nw0.13 toggleInterfaceScale: ['Interface/Toggle interface modes', base.makeConfigToggler('ui-scale-mode', function(){ return Object.keys(this.config['ui-scale-modes']) }, @@ -3055,10 +3056,8 @@ var UIScaleActions = actions.Actions({ var w = this.screenwidth - // XXX need to compensate for external size change... - //this.ribbons.viewer[0].style.transform = 'scale(' - // + (this.config['ui-scale-modes'][state] || 1) - // +')' + // NOTE: scale = Math.pow(1.2, zoomLevel) + // XXX in nw0.13 this appears to be async... win.zoomLevel = this.config['ui-scale-modes'][state] || 0 this.screenwidth = w