/* Copyright © 2019–2020, Stewart Smith. See LICENSE for details. */ @charset "utf-8"; /* This file is in the process of being separated in to “essential global Q.js styles” which will remain here in Q.css, and “documentation-specific” styles which will be removed from here and placed within the /other/documentation.css file instead. The goal is for a developer to be able to place this Q.css file into their own web app with little to no interference with their app. All variables and styles here will ultimately be prefaced with a capital Q, eg. --Q-color-base, or .Q-text-input and so on. */ :root{ --bg:#0e1117; /* page background */ --ink:#ffffff; /* glyph color */ --opacity:0.06; /* how faint the glyphs look (0–1) */ --tile:320px; /* pattern tile size */ --blur:0px; /* add 0–1px if you want softer look */ } body{ background: var(--bg); } /* Attach to or a wrapper like .app */ .quantum-wallpaper{ position: relative; min-height: 100dvh; isolation: isolate; } .quantum-wallpaper::before{ content:""; position: fixed; /* covers viewport regardless of scroll */ inset:0; pointer-events:none; z-index:-1; background-image: url('data:image/svg+xml;charset=UTF-8,\ '); background-size: var(--tile) var(--tile); background-repeat: repeat; opacity: var(--opacity); filter: blur(var(--blur)); } /* optional gentle drift for a living feel */ @media (prefers-reduced-motion:no-preference){ .quantum-wallpaper::before{ animation: drift 60s linear infinite; will-change: background-position; } @keyframes drift{ 0% { background-position: 0 0; } 100% { background-position: var(--tile) var(--tile); } } } svg, :root { /**************/ /* */ /* Colors */ /* */ /**************/ /* Base color (blue) */ --Q-color-base-hue: 210; --Q-color-base-saturation: 85%; --Q-color-base-lightness: 40%; /* Red */ --Q-color-red-hue: calc( var( --Q-color-base-hue ) + 180 - 30 ); --Q-color-red-saturation: 85%; --Q-color-red-lightness: 45%; --Q-color-red: hsl( var( --Q-color-red-hue ), var( --Q-color-red-saturation ), var( --Q-color-red-lightness ) ); /* Orange */ --Q-color-orange-hue: calc( var( --Q-color-base-hue ) + 180 - 15 ); --Q-color-orange-saturation: 85%; --Q-color-orange-lightness: 50%; --Q-color-orange: hsl( var( --Q-color-orange-hue ), var( --Q-color-orange-saturation ), var( --Q-color-orange-lightness ) ); /* Yellow */ --Q-color-yellow-hue: calc( var( --Q-color-base-hue ) + 180 + 15 ); --Q-color-yellow-saturation: 90%; --Q-color-yellow-lightness: 50%; --Q-color-yellow: hsl( var( --Q-color-yellow-hue ), var( --Q-color-yellow-saturation ), var( --Q-color-yellow-lightness ) ); /* Green */ --Q-color-green-hue: calc( var( --Q-color-base-hue ) + 180 + 60 ); --Q-color-green-saturation: 80%; --Q-color-green-lightness: 35%; --Q-color-green: hsl( var( --Q-color-green-hue ), var( --Q-color-green-saturation ), var( --Q-color-green-lightness ) ); /* Blue */ --Q-color-blue-hue: var( --Q-color-base-hue ); --Q-color-blue-saturation: var( --Q-color-base-saturation ); --Q-color-blue-lightness: var( --Q-color-base-lightness ); --Q-color-blue: hsl( var( --Q-color-blue-hue ), var( --Q-color-blue-saturation ), var( --Q-color-blue-lightness ) ); /* Grayscale */ --Q-color-white: #FFFFFF; --Q-color-chalk: #F9F9F9; --Q-color-newsprint: #F3F3F3; --Q-color-titanium: #CCCCCC; --Q-color-slate: #777777; --Q-color-charcoal: #333333; --Q-color-black: #000000; /* Background */ --Q-color-background-hue: var( --Q-color-base-hue ); --Q-color-background-saturation: 15%; --Q-color-background-lightness: 98%; --Q-color-background: hsl( var( --Q-color-background-hue ), var( --Q-color-background-saturation ), var( --Q-color-background-lightness ) ); /*--Q-color-background: white;*/ /* Misc */ --Q-text-color: hsl( var( --Q-color-base-hue ), 5%, 35% ); --Q-text-code-comment-color: rgba( 0, 0, 0, 0.4 ); --Q-text-code-output-color: rgba( 0, 0, 0, 1 ); --Q-selection-color: var( --Q-color-black ); --Q-selection-background-color: var( --Q-color-yellow ); --Q-hyperlink-internal-color: var( --Q-color-red ); --Q-hyperlink-external-color: var( --Q-color-red ); --Q-background-callout-color: var( --Q-color-white ); --Q-svg-fill-color: var( --Q-text-color ); /* Fonts */ --Q-font-family-serif: 'Source Serif Pro', 'Roboto Slab', 'Georgia', serif; --Q-font-family-sans: 'SF Pro Text', system-ui, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; --Q-font-family-mono: 'Roboto Mono', 'Source Code Pro', 'Menlo', 'Courier New', monospace; --Q-font-family-symbols: 'Georgia', serif; } /*******************/ /* */ /* Interactive */ /* */ /*******************/ .Q-input, .Q-circuit-text-input { margin: 1.5rem 0 0 0 !important; outline: none !important; border: none !important; border-radius: 1.2rem !important; box-shadow: 0.2rem 0.2rem 0.2rem rgba( 0, 0, 0, 0.15 ) inset, -0.2rem -0.2rem 0.2rem rgba( 255, 255, 255, 1 ) inset; background: linear-gradient( 0.375turn, rgba( 255, 255, 255, 1.0 ), rgba( 255, 255, 255, 0.2 ) ) !important; } .Q-input, .Q-circuit-text-input { padding: 1.5rem !important; color: #555 !important; font-size: 0.9rem !important; line-height: 1.2rem !important; } .Q-circuit-text-input { /*min-width: 18rem;*/ width: 100%; min-height: 8rem; /*margin: 1rem 0 2rem 0;*/ margin: 1rem 0 0 0; border: 1px solid var( --Q-color-blue ); border-radius: 0.5rem; background-color: var( --Q-color-chalk ); padding: 1rem 0 0 2rem; color: var( --Q-color-blue ); font-family: var( --Q-font-family-mono ); font-size: 1.0rem; line-height: 1.2rem; white-space: pre; word-wrap: normal;/* OMFG, iOS you make me sad. */ } .Q-button { position: relative; text-align: right; margin: 0.5rem 1rem 0 0; border-radius: 3rem; box-shadow: -0.1rem -0.1rem 0 rgba( 255, 255, 255, 1 ), 0.1rem 0.1rem 0.2rem rgba( 0, 0, 0, 0.3 ); height: 3rem; background: var( --Q-color-blue ) linear-gradient( 0.4turn, rgba( 255, 255, 255, 0.2 ), rgba( 0, 0, 0, 0.08 ) ); padding: 0.8rem 1.8rem; color: var( --Q-color-white ); font-family: var( --Q-font-family-sans ); font-size: 1rem; line-height: 1rem; font-weight: 500; letter-spacing: 0; text-shadow: -1px -1px 0 rgba( 0, 0, 0, 0.1 ); cursor: pointer; } .Q-button:hover { background: hsl( var( --Q-color-blue-hue ), var( --Q-color-blue-saturation ), calc( var( --Q-color-blue-lightness ) * 1.2 ) ) linear-gradient( 0.4turn, rgba( 255, 255, 255, 0.2 ), rgba( 0, 0, 0, 0.08 ) ); } .Q-button:focus { margin-top: 0.7rem; margin-bottom: -0.2rem; margin-right: 0.9rem; outline: none; box-shadow: -0.1rem -0.1rem 0 rgba( 255, 255, 255, 1 ) inset, 0.1rem 0.1rem 0.2rem rgba( 0, 0, 0, 0.3 ) inset; background: var( --Q-color-blue ) linear-gradient( 0.4turn, rgba( 0, 0, 0, 0.08 ), rgba( 255, 255, 255, 0.2 ) ); } .Q-button[disabled] { box-shadow: -0.1rem -0.1rem 0 rgba( 255, 255, 255, 1 ), 0.1rem 0.1rem 0.2rem rgba( 0, 0, 0, 0.3 ); background: var( --Q-color-background ) linear-gradient( 0.45turn, rgba( 255, 255, 255, 0.1 ), rgba( 0, 0, 0, 0.05 ) ); color: rgba( 0, 0, 0, 0.3 ); text-shadow: 1px 1px 0 rgba( 255, 255, 255, 1 ); cursor: default; } /* The below still need to be prefaced with “Q-” and for the HTML pages to be updated accordingly. */ /*************/ /* */ /* Maths */ /* */ /*************/ .maths { max-width: 100%; overflow-x: auto; font-family: var( --Q-font-family-sans ); } dd .maths { margin-top: 0; margin-left: 0; } .symbol { font-size: 1.1em; padding: 0 0.1em; font-family: var( --Q-font-family-symbols ); font-style: italic; font-weight: 900; letter-spacing: 0.05em; } .division { display: inline-block; vertical-align: middle; margin: 10px; } .division td { padding: 5px; } .dividend { border-bottom: 1px solid #CCC; text-align: center; } .divisor { text-align: center; } .matrix { display: inline-block; vertical-align: middle; position: relative; align: middle; margin: 1em; padding: 1em; font-family: var( --Q-font-family-mono ); font-weight: 300; line-height: 1em; text-align: right; } .matrix td { padding: 5px 10px; } .matrix-bracket-left, .matrix-bracket-right { position: absolute; top: 0; width: 5px; height: 100%; border: 1px solid #CCC; } .matrix-bracket-left { left: 0; border-right: none; } .matrix-bracket-right { right: 0; border-left: none; } /*.matrix.qubit tr:first-child td { color: #BBB; }*/ .Q-state-vector, .complex-vector { font-family: var( --Q-font-family-mono ); } .Q-state-vector.bra::before, .complex-vector.bra::before { content: '⟨'; color: #BBB; } .Q-state-vector.bra::after, .complex-vector.bra::after { content: '|'; color: #BBB; } .Q-state-vector.ket::before, .complex-vector.ket::before { content: '|'; color: #BBB; } .Q-state-vector.ket::after, .complex-vector.ket::after { content: '⟩'; color: #BBB; } .Q-state-vector.bra + .Q-state-vector.ket::before, .complex-vector.bra + .complex-vector.ket::before { content: ''; } /* Copyright © 2019–2020, Stewart Smith. See LICENSE for details. */ @charset "utf-8"; /* Z indices: Clipboard =100 Selected op 10 Operation 0 Shadow -10 Background -20 Circuit Menu Moments ╭───────┬───┬───┬───┬───╮ │ ≡ ↘ │ 1 │ 2 │ 3 │ + │ Add moment ├───┬───┼───┼───┼───┼───╯ R │ 0 │|0⟩│ H │ C0│ X │ - e ├───┼───┼───┼───┼───┤ g │ 1 │|0⟩│ I │ C1│ X │ - s ├───┼───┴───┴───┴───┘ │ + │ - - - - ╰───╯ Add register Circuit Palette ╭───────────────────┬───╮ │ H X Y Z S T π M … │ @ │ ╰───────────────────┴───╯ Circuit clipboard ┌───────────────┐ ▟│ ┌───┬───────┐ │ █│ │ H │ X#0.0 │ │ █│ ├───┼───────┤ │ █│ │ I │ X#0.1 │ │ █│ └───┴───────┘ │ █└───────────────┘ ███████████████▛ ◢◣ ◢■■■■◣ ◢■■■■■■■■◣ ◥■■■■■■■■◤ ◥■■■■◤ ◥◤ ◢■■■■■■◤ ◢◤ ◢◤ ◢■■■■■■◤ ─────────── ╲ ╱ ╱ ╱ ╳ ╱ ╱ ╱ ╲╱ ╱ ─────── ─────⦢ ╱ ╱ ⦣───── */ .Q-circuit, .Q-circuit-palette { position: relative; width: 100%; } .Q-circuit-palette { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; line-height: 0; } .Q-circuit-palette > div { display: inline-block; position: relative; width: 4rem; height: 4rem; } .Q-circuit { margin: 1rem 0 2rem 0; /*border-top: 2px solid hsl( 0, 0%, 50% );*/ } .Q-circuit-board-foreground { line-height: 3.85rem; width: auto; } /***************/ /* */ /* Toolbar */ /* */ /***************/ .Q-circuit-toolbar { display: block; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; margin-bottom: 0.5rem; box-sizing: border-box; display: grid; grid-auto-columns: 3.6rem; grid-auto-rows: 3.0rem; grid-auto-flow: column; } .Q-circuit-button { position: relative; display: inline-block; /*margin: 0 0.5rem 0.5rem 0;*/ width: 3.6rem; height: 3rem; /* box-shadow: -0.1rem -0.1rem 0 rgba( 255, 255, 255, 0.8 ), 0.1rem 0.1rem 0.1rem rgba( 0, 0, 0, 0.35 );*/ border-top: 1px solid hsl( var( --Q-color-background-hue ), var( --Q-color-background-saturation ), 100% ); border-right: 1px solid hsl( var( --Q-color-background-hue ), var( --Q-color-background-saturation ), 90% ); border-bottom: 1px solid hsl( var( --Q-color-background-hue ), var( --Q-color-background-saturation ), 85% ); border-left: 1px solid hsl( var( --Q-color-background-hue ), var( --Q-color-background-saturation ), 97% ); background: var( --Q-color-background ); /* background: var( --Q-color-background ) linear-gradient( 0.4turn, rgba( 0, 0, 0, 0.02 ), rgba( 255, 255, 255, 0.1 ) );*/ color: hsl( var( --Q-color-background-hue ), var( --Q-color-background-saturation ), 30% ); text-shadow: 1px 1px 0 rgba( 255, 255, 255, 1 ); /*border-radius: 0.5rem;*/ /*border-radius: 100%;*/ line-height: 2.9rem; text-align: center; cursor: pointer; overflow: hidden; font-weight: 900; } .Q-circuit-toolbar .Q-circuit-button:first-child { border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; } .Q-circuit-toolbar .Q-circuit-button:last-child { border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } .Q-circuit-locked .Q-circuit-button, .Q-circuit-button[Q-disabled] { color: hsl( var( --Q-color-background-hue ), var( --Q-color-background-saturation ), 85% ); cursor: not-allowed; } .Q-circuit-locked .Q-circuit-toggle-lock { color: inherit; cursor: pointer; } .Q-circuit-board-container { position: relative; margin: 0 0 2rem 0; margin: 0; width: 100%; max-height: 60vh; overflow: scroll; } .Q-circuit-board { position: relative; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } /*.Q-circuit-palette,*/ .Q-circuit-board-foreground, .Q-circuit-board-background, .Q-circuit-clipboard { box-sizing: border-box; display: grid; grid-auto-rows: 4rem; grid-auto-columns: 4rem; grid-auto-flow: column; } /*.Q-circuit-palette,*/ .Q-circuit-board-foreground, .Q-circuit-board-background { position: relative; top: 0; left: 0; width: 100%; height: 100%; } .Q-circuit-clipboard { position: absolute; z-index: 100; min-width: 4rem; min-height: 4rem; transform: scale( 1.05 ); } .Q-circuit-clipboard, .Q-circuit-clipboard > div { cursor: grabbing; } .Q-circuit-clipboard-danger .Q-circuit-operation { background-color: var( --Q-color-yellow ); } .Q-circuit-clipboard-destroy { animation-name: Q-circuit-clipboard-poof; animation-fill-mode: forwards; animation-duration: 0.3s; animation-iteration-count: 1; } @keyframes Q-circuit-clipboard-poof { 100% { transform: scale( 1.5 ); opacity: 0; } } .Q-circuit-board-background { /* Clipboard: 100 Operation: 0 Shadow: -10 Background: -20 */ position: absolute; z-index: -20; color: rgba( 0, 0, 0, 0.2 ); } .Q-circuit-board-background > div { /* transition: background-color 0.2s, color 0.2s;*/ } .Q-circuit-board-background .Q-circuit-cell-highlighted { background-color: hsl( var( --Q-color-background-hue ), var( --Q-color-background-saturation ), 95% ); /*transition: none;*/ } .Q-circuit-register-wire { position: absolute; top: calc( 50% - 0.5px ); width: 100%; height: 1px; background-color: hsl( var( --Q-color-background-hue ), var( --Q-color-background-saturation ), 50% ); } .Q-circuit-palette > div, .Q-circuit-clipboard > div, .Q-circuit-board-foreground > div { text-align: center; } /***************/ /* */ /* Headers */ /* */ /***************/ .Q-circuit-header { position: sticky; z-index: 2; margin: 0; /*background-color: var( --Q-color-background );*/ background-color: white; color: hsl( var( --Q-color-background-hue ), var( --Q-color-background-saturation ), 75% ); font-family: var( --Q-font-family-mono ); } .Q-circuit-input.Q-circuit-cell-highlighted, .Q-circuit-header.Q-circuit-cell-highlighted { background-color: hsl( var( --Q-color-background-hue ), var( --Q-color-background-saturation ), 95% ); color: black; } .Q-circuit-selectall { z-index: 3; margin: 0; top: 0; /*left: 4rem;*/ /*grid-column: 2;*/ left: 0; grid-column-start: 1; grid-column-end: 3; grid-row: 1; cursor: se-resize; } .Q-circuit-moment-label, .Q-circuit-moment-add { grid-row: 1; top: 0; cursor: s-resize; } .Q-circuit-register-label, .Q-circuit-register-add { grid-column: 2; left: 4rem; cursor: e-resize; } .Q-circuit-moment-add, .Q-circuit-register-add { cursor: pointer; } .Q-circuit-moment-add, .Q-circuit-register-add { display: none; } .Q-circuit-selectall, .Q-circuit-moment-label, .Q-circuit-moment-add { border-bottom: 1px solid hsl( var( --Q-color-background-hue ), var( --Q-color-background-saturation ), 95% ); } .Q-circuit-selectall, .Q-circuit-register-label, .Q-circuit-register-add { border-right: 1px solid hsl( var( --Q-color-background-hue ), var( --Q-color-background-saturation ), 95% ); } .Q-circuit-input { position: sticky; z-index: 2; grid-column: 1; left: 0; /*background-color: var( --Q-color-background );*/ background-color: white; font-size: 1.5rem; font-weight: 900; font-family: var( --Q-font-family-mono ); } .Q-circuit-operation-link-container { --Q-link-stroke: 3px; --Q-link-radius: 100%; display: block; position: relative; left: calc( 50% - ( var( --Q-link-stroke ) / 2 )); width: 50%; height: 100%; overflow: hidden; } .Q-circuit-operation-link-container.Q-circuit-cell-highlighted { background-color: transparent; } .Q-circuit-operation-link { display: block; position: absolute; width: calc( var( --Q-link-stroke ) * 2 ); height: calc( 100% - 4rem + var( --Q-link-stroke )); /*border: var( --Q-link-stroke ) solid hsl( 0, 0%, 50% );*/ border: var( --Q-link-stroke ) solid hsl( var( --Q-color-background-hue ), 10%, 30% ); /*border: var( --Q-link-stroke ) solid var( --Q-color-orange );*/ transform: translate( -50%, calc( 2rem - ( var( --Q-link-stroke ) / 2 ))); transform-origin: center; } .Q-circuit-operation-link.Q-circuit-operation-link-curved { width: calc( var( --Q-link-radius ) - var( --Q-link-stroke )); width: 200%; border-radius: 100%; } /******************/ /* */ /* Operations */ /* */ /******************/ .Q-circuit-operation { position: relative; /*--Q-operation-color-hue: var( --Q-color-green-hue ); --Q-operation-color-main: var( --Q-color-green );*/ --Q-operation-color-hue: var( --Q-color-blue-hue ); --Q-operation-color-main: hsl( var( --Q-operation-color-hue ), 10%, 35% ); --Q-operation-color-light: hsl( var( --Q-operation-color-hue ), 10%, 50% ); --Q-operation-color-dark: hsl( var( --Q-operation-color-hue ), 10%, 25% ); color: white; text-shadow: -0.05rem -0.05rem 0 rgba( 0, 0, 0, 0.1 ); font-size: 1.5rem; line-height: 2.9rem; font-weight: 900; cursor: grab; } .Q-circuit-locked .Q-circuit-operation { cursor: not-allowed; } .Q-circuit-operation-tile { position: absolute; top: 0.5rem; left: 0.5rem; right: 0.5rem; bottom: 0.5rem; /*margin: 0.5rem;*/ /*padding: 0.5rem;*/ /*box-shadow: 0.1rem 0.1rem 0.2rem rgba( 0, 0, 0, 0.2 );*/ border-radius: 0.2rem; /* border-top: 0.1rem solid var( --Q-operation-color-light ); border-left: 0.1rem solid var( --Q-operation-color-light ); border-right: 0.1rem solid var( --Q-operation-color-dark ); border-bottom: 0.1rem solid var( --Q-operation-color-dark ); */ background: var( --Q-operation-color-main ) /*linear-gradient( 0.45turn, rgba( 255, 255, 255, 0.1 ), rgba( 0, 0, 0, 0.05 ) )*/; } .Q-circuit-palette .Q-circuit-operation:hover { /*background-color: rgba( 255, 255, 255, 0.6 );*/ background-color: white; } .Q-circuit-palette .Q-circuit-operation-tile { --Q-before-rotation: 12deg; --Q-before-x: 1px; --Q-before-y: -2px; --Q-after-rotation: -7deg; --Q-after-x: -2px; --Q-after-y: 3px; box-shadow: 0.2rem 0.2rem 0.2rem rgba( 0, 0, 0, 0.2 ); } .Q-circuit-palette .Q-circuit-operation-tile:before, .Q-circuit-palette .Q-circuit-operation-tile:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 0.2rem; /*background-color: hsl( 0, 0%, 60% );*/ background-color: var( --Q-operation-color-dark ); transform: translate( var( --Q-before-x ), var( --Q-before-y )) rotate( var( --Q-before-rotation )); z-index: -10; /*z-index: 10;*/ display: block; box-shadow: 0.2rem 0.2rem 0.2rem rgba( 0, 0, 0, 0.2 ); } .Q-circuit-palette .Q-circuit-operation-tile:after { transform: translate( var( --Q-after-x ), var( --Q-after-y )) rotate( var( --Q-after-rotation )); box-shadow: 0.2rem 0.2rem 0.2rem rgba( 0, 0, 0, 0.2 ); } .Q-circuit-operation:hover .Q-circuit-operation-tile { color: white; } .Q-circuit-operation-hadamard .Q-circuit-operation-tile { /*--Q-operation-color-hue: var( --Q-color-red-hue );*/ /*--Q-operation-color-main: var( --Q-color-red );*/ /*--Q-operation-color-hue: 0; --Q-operation-color-main: hsl( 0, 0%, 10% );*/ /* background: linear-gradient( -33deg, var( --Q-color-blue ) 20%, #6f3c69 50%, var( --Q-color-red ) 80% );*/ } .Q-circuit-operation-identity .Q-circuit-operation-tile, .Q-circuit-operation-control .Q-circuit-operation-tile, .Q-circuit-operation-target .Q-circuit-operation-tile { /*--Q-operation-color-hue: var( --Q-color-orange-hue );*/ /*--Q-operation-color-main: var( --Q-color-orange );*/ border-radius: 100%; } .Q-circuit-operation-identity .Q-circuit-operation-tile, .Q-circuit-operation-control .Q-circuit-operation-tile { top: calc( 50% - 0.7rem ); left: calc( 50% - 0.7rem ); width: 1.4rem; height: 1.4rem; overflow: hidden; /* --Q-operation-color-hue: 0; --Q-operation-color-main: hsl( 0, 0%, 10% );*/ } .Q-circuit-operation-pauli-x, .Q-circuit-operation-pauli-y, .Q-circuit-operation-pauli-z { /*--Q-operation-color-hue: var( --Q-color-red-hue );*/ /*--Q-operation-color-main: var( --Q-color-red );*/ /* --Q-operation-color-hue: 0; --Q-operation-color-main: hsl( 0, 0%, 30% );*/ } .Q-circuit-operation-swap .Q-circuit-operation-tile { top: calc( 50% - 0.55rem ); left: calc( 50% - 0.55rem ); width: 1.2rem; height: 1.2rem; border-radius: 0; transform-origin: center; transform: rotate( 45deg ); font-size: 0; } /********************/ /* */ /* Other states */ /* */ /********************/ .Q-circuit-palette > div:hover, .Q-circuit-board-foreground > div:hover { outline: 2px solid var( --Q-hyperlink-internal-color ); outline-offset: -2px; } .Q-circuit-palette > div:hover .Q-circuit-operation-tile { box-shadow: none; } /*.Q-circuit-palette > div:hover,*/ .Q-circuit-board-foreground > div:hover { background-color: white; color: black; } .Q-circuit-clipboard > div, .Q-circuit-cell-selected { background-color: white; } .Q-circuit-clipboard > div:before, .Q-circuit-cell-selected:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; z-index: -10; box-shadow: 0 0 1rem rgba( 0, 0, 0, 0.2 ), 0.4rem 0.4rem 0.2rem rgba( 0, 0, 0, 0.2 ); outline: 1px solid hsl( var( --Q-color-background-hue ), var( --Q-color-background-saturation ), 50% ); /*outline-offset: -1px;*/ } .Q-circuit-clipboard > div { background-color: white; } .Q-circuit-clipboard > div:before { /* This was very helpful! https://blog.dudak.me/2014/css-shadows-under-adjacent-elements/ */ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -10; display: block; box-shadow: 0.4rem 0.4rem 0.3rem rgba( 0, 0, 0, 0.2 ); } /***************/ /* */ /* Buttons */ /* */ /***************/ .Q-circuit-locked .Q-circuit-toggle-lock, .Q-circuit-locked .Q-circuit-toggle-lock:hover { background-color: var( --Q-color-red ); } .Q-circuit-toggle-lock { z-index: 3; left: 0; top: 0; grid-column: 1; grid-row: 1; cursor: pointer; font-size: 1.1rem; text-shadow: none; font-weight: normal; } .Q-circuit-button-undo, .Q-circuit-button-redo { font-size: 1.2rem; line-height: 2.6rem; font-weight: normal; } .Q-circuit p { padding: 1rem; color: hsl( var( --Q-color-background-hue ), var( --Q-color-background-saturation ), 66% ); }