// The signature: a one-pixel hairline along the top edge of a glass surface, // running blue on the left to orchid on the right and fading out before it // reaches either corner. // // It reads as light catching the bevel of a pane of glass, which is why it sits // at the very top edge and nowhere else — put it on all four sides and it stops // being light and becomes a border. // // Every glass surface in the shell carries one, so the bar, dock, popovers and // notification cards all read as the same material. // // Usage — anchor it to the top of the surface and inset it past the corner // radius so it doesn't overhang the curve: // // PrismEdge { // anchors { top: parent.top; left: parent.left; right: parent.right } // inset: parent.radius // } import QtQuick import qs.config Rectangle { id: root // Horizontal inset, normally the parent's corner radius. Below that the // line runs out onto the curve and looks like a rendering artefact. property real inset: Theme.popoverRadius anchors.leftMargin: root.inset anchors.rightMargin: root.inset implicitHeight: 1 height: 1 // The colour stops are the only place the two accents touch. gradient: Gradient { orientation: Gradient.Horizontal GradientStop { position: 0.0 color: Theme.alpha(Theme.accent, 0) } GradientStop { position: Theme.prismStart color: Theme.alpha(Theme.accent, Theme.prismEdgeAlpha) } GradientStop { position: Theme.prismEnd color: Theme.alpha(Theme.accentSecondary, Theme.prismEdgeAlpha) } GradientStop { position: 1.0 color: Theme.alpha(Theme.accentSecondary, 0) } } }