diff Applications/StoneWebViewer/Resources/Styles/_toolbar.scss @ 1538:d1806b4e4839

moving OrthancStone/Samples/ as Applications/Samples/
author Sebastien Jodogne <s.jodogne@gmail.com>
date Tue, 11 Aug 2020 13:24:38 +0200
parents StoneWebViewer/Resources/Styles/_toolbar.scss@fb74ed5d8c22
children
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/Applications/StoneWebViewer/Resources/Styles/_toolbar.scss	Tue Aug 11 13:24:38 2020 +0200
@@ -0,0 +1,178 @@
+.wvToolbar {
+    position: absolute;
+}
+
+.wvToolbar--top {
+    top: 0;
+    height: $toolbarHeight;
+
+    // Position the toolbar to the right (even if it's positioned
+    // horizontally).
+    right: 0;
+    text-align: right;
+
+    // Allow user to scroll through the toolbar if screen is too small. Note we
+    // can't use z-index properly to show buttons on top of the viewer, as any
+    // popover will appear behind them (even with higher z-index) due to an
+    // overflow property hidden somewhere.
+    // overflow-y: auto;
+    white-space: nowrap;
+    max-width: 100%;
+}
+
+.wvToolbar--right {
+    right: 0;
+    width: 42px; // != $toolbarHeight since we're in the reverse order.
+
+    // Allow user to scroll through the toolbar if screen is too small.
+    // overflow-x: auto;
+    height: 100%;
+    z-index: 2;
+    &.wvToolbar--big{
+        width: 68px;
+    }
+}
+
+/* Splitpane Grid Configuration */
+
+.wvToolbar__splitpaneConfigPopover {
+    // Prevent white space between buttons.
+    font-size: 0;
+}
+
+.wvToolbar__splitpaneConfigNotice {
+    font-size: 1.25rem;
+    font-style: italic;
+    text-align: center;
+
+    color: #333;
+}
+
+input[type="radio"].wvToolbar__splitpaneConfigButtonInput {
+    // Hide the radio input, but make it fit the label, so we can rely on its
+    // html caracteristics without having to suffer from its design.
+    position: absolute;
+    width: 0;
+    height: 0;
+    left: 0;
+    top: 0;
+    bottom: 2px;
+    right: 0;
+    opacity: 0;
+}
+
+/* Windowing Preset */
+
+.wvToolbar__windowingPresetConfigPopover {
+
+}
+.wvToolbar__windowingPresetConfigNotice {
+    font-size: 1.25rem;
+    font-style: italic;
+    text-align: center;
+
+    color: #333;
+}
+
+.wvToolbar__windowingPresetList {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    font-size: 1.5rem;
+}
+.wvToolbar__windowingPresetListItem {
+    // Remove <a> default styles. Take care - this class may either be used
+    // with <a> or <button>.
+    &:hover {
+        text-decoration: none;
+        color: white;
+    }
+
+    // Remove <button> default styles.
+    outline: none;
+    background-color: transparent;
+    border: none;
+
+    // Set relative to position button absolutely
+    position: relative;
+
+    // Style button
+    display: inline-block;
+    cursor: pointer;
+    font-variant: small-caps;
+    text-transform: lowercase;
+    text-align: center;
+    font-size: 1.3rem;
+    font-weight: 400;
+    line-height: 2.2rem;
+    color: hsl(0, 0%, 85%);
+    transition: 0.3s text-decoration ease, 0.3s border ease, 0.3s opacity ease;
+
+    // Position button
+    margin: 0;
+    min-width: 3rem;
+    padding: 0 10px;
+    line-height: 3.6rem;
+
+
+
+    // Prevent multi line buttons.
+    max-height: 2.8rem;
+    max-width: 100%;
+    overflow: hidden;
+
+    // Set margin
+    margin: 0.6rem;
+    margin-left: 0rem;
+    margin-right: 0rem;
+    & + & {
+        margin-left: 0.7rem;
+    }
+
+    // Set button size
+    line-height: 2rem;
+
+    // Align text
+    padding-top: 0.1rem;
+    padding-bottom: 0.5rem;
+
+    // Style button
+    font-size: 1.4rem;
+    border: 1px solid hsl(0, 0%, 27%);
+
+    // Set best looking font with small-caps.
+    font-family: Arial;
+
+    // Change background on hover
+    background-color: hsl(0, 0%, 0%);
+    &:hover {
+        background-color: hsl(0, 0%, 10%);
+    }
+
+    & > .glyphicon { // used with the same element as glyphicons
+        // Position button
+        position: relative;
+        display: inline-block;
+        top: 3px;
+        margin-right: 4px;
+    }
+
+    // Text color
+    color: hsl(0, 0%, 10%);
+    border: 1px solid hsl(0, 0%, 73%);
+
+    // Change background on hover
+    background-color: hsl(0, 0%, 100%);
+    &:hover {
+        color: hsl(0, 0%, 10%);
+        background-color: hsl(0, 0%, 90%);
+    }
+
+
+    width: 100%;
+    margin: 0;
+    margin-left: 0 !important;
+    border-top: none;
+    border-bottom: none;
+}