diff --git a/dotfiles/.config/quickshell/modules/bar/TailscaleIndicator.qml b/dotfiles/.config/quickshell/modules/bar/TailscaleIndicator.qml index 5b9f47d..ed70c8d 100644 --- a/dotfiles/.config/quickshell/modules/bar/TailscaleIndicator.qml +++ b/dotfiles/.config/quickshell/modules/bar/TailscaleIndicator.qml @@ -551,6 +551,28 @@ Item { ? Qt.rgba(Colors.primary.r, Colors.primary.g, Colors.primary.b, 0.18) : (rowMouse.containsMouse ? Colors.primary : "transparent") + // Colors.primaryText (used below whenever hovered) assumes a solid + // Colors.primary fill behind it — true for a hovered *inactive* row, + // but an *active* row's background stays the translucent tint above + // even while hovered, so primaryText (dark, meant for a bright solid + // fill) reads poorly against it. This hardcoded near-white (same one + // used for TailscaleLogo's bright dots, for the same "needs to be + // reliably visible" reason) is used instead for that one case. + readonly property color activeHoverColor: "#c9f0f0f0" + + // Hover-only outline, offset outside the row rather than drawn on + // its own edge — same treatment as NetworkIndicator.qml's NetworkRow. + // listColumn below is inset by 3px to give this room without being + // cropped by listFlick's clip. + Rectangle { + anchors.fill: parent + anchors.margins: -3 + radius: 0 + color: "transparent" + border.color: Colors.foreground + border.width: rowMouse.containsMouse ? 1 : 0 + } + RowLayout { id: rowContent anchors.left: parent.left @@ -568,7 +590,7 @@ Item { font.family: Appearance.iconFontFamilyRounded font.variableAxes: Appearance.iconFontAxes font.pixelSize: 14 - color: rowMouse.containsMouse ? Colors.primaryText : Colors.foreground + color: rowMouse.containsMouse ? (exitRow.active ? exitRow.activeHoverColor : Colors.primaryText) : Colors.foreground } Text { Layout.fillWidth: true @@ -577,7 +599,7 @@ Item { font.family: Appearance.fontFamily font.pixelSize: Appearance.fontSize font.bold: exitRow.active - color: rowMouse.containsMouse ? Colors.primaryText : Colors.foreground + color: rowMouse.containsMouse ? (exitRow.active ? exitRow.activeHoverColor : Colors.primaryText) : Colors.foreground } Text { visible: exitRow.active @@ -585,7 +607,7 @@ Item { font.family: Appearance.iconFontFamilyRounded font.variableAxes: Appearance.iconFontAxes font.pixelSize: 14 - color: rowMouse.containsMouse ? Colors.primaryText : Colors.primary + color: rowMouse.containsMouse ? exitRow.activeHoverColor : Colors.primary } } @@ -613,6 +635,18 @@ Item { ? Qt.rgba(Colors.primary.r, Colors.primary.g, Colors.primary.b, 0.18) : (accountMouse.containsMouse ? Colors.primary : "transparent") + // Hover-only outline, offset outside the row — same treatment as + // ExitNodeRow/NetworkRow. Not inside a clipped Flickable, so no + // inset needed on its container. + Rectangle { + anchors.fill: parent + anchors.margins: -3 + radius: 0 + color: "transparent" + border.color: Colors.foreground + border.width: accountMouse.containsMouse ? 1 : 0 + } + RowLayout { id: accountContent anchors.left: parent.left @@ -694,6 +728,18 @@ Item { : (peerRow.expanded ? Qt.rgba(Colors.primary.r, Colors.primary.g, Colors.primary.b, 0.18) : "transparent") implicitHeight: peerContent.implicitHeight + 12 + // Hover-only outline, offset outside the row — same treatment as + // ExitNodeRow/NetworkRow. listColumn is inset by 3px to give this + // room without being cropped by listFlick's clip. + Rectangle { + anchors.fill: parent + anchors.margins: -3 + radius: 0 + color: "transparent" + border.color: Colors.foreground + border.width: summaryMouse.containsMouse ? 1 : 0 + } + RowLayout { id: peerContent anchors.left: parent.left @@ -753,6 +799,17 @@ Item { color: optionMouse.containsMouse ? Colors.primary : "transparent" implicitHeight: optionRow.implicitHeight + 8 + // Hover-only outline, offset outside the row — same + // treatment as the rest of this file's selectable rows. + Rectangle { + anchors.fill: parent + anchors.margins: -3 + radius: 0 + color: "transparent" + border.color: Colors.foreground + border.width: optionMouse.containsMouse ? 1 : 0 + } + RowLayout { id: optionRow anchors.left: parent.left @@ -1040,7 +1097,11 @@ Item { Column { id: listColumn - width: listFlick.width + // Inset 3px on each side so ExitNodeRow/PeerRow's + // hover halo has room without being cropped by + // listFlick's clip. + x: 3 + width: listFlick.width - 6 spacing: 6 Column {