mirror of
https://github.com/AvengeMedia/DankMaterialShell.git
synced 2025-12-08 06:25:37 -05:00
fix gtk3 colors and clean media player
This commit is contained in:
bbedward
@@ -16,19 +16,6 @@ Item {
|
||||
property MprisPlayer activePlayer: MprisController.activePlayer
|
||||
property var allPlayers: MprisController.availablePlayers
|
||||
|
||||
onActivePlayerChanged: {
|
||||
if (activePlayer) {
|
||||
lastValidTitle = ""
|
||||
lastValidArtist = ""
|
||||
lastValidAlbum = ""
|
||||
lastValidArtUrl = ""
|
||||
}
|
||||
}
|
||||
|
||||
property string lastValidTitle: ""
|
||||
property string lastValidArtist: ""
|
||||
property string lastValidAlbum: ""
|
||||
property string lastValidArtUrl: ""
|
||||
|
||||
property var defaultSink: AudioService.sink
|
||||
|
||||
@@ -36,11 +23,6 @@ Item {
|
||||
property color extractedAccentColor: Theme.primary
|
||||
property bool colorsExtracted: false
|
||||
|
||||
readonly property color primaryTransparent12: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12)
|
||||
readonly property color primaryTransparent20: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2)
|
||||
readonly property color surfaceVariantTransparent80: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.8)
|
||||
readonly property color outlineTransparent30: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
|
||||
|
||||
readonly property real ratio: {
|
||||
if (!activePlayer || activePlayer.length <= 0) {
|
||||
return 0
|
||||
@@ -81,105 +63,41 @@ Item {
|
||||
return "volume_up"
|
||||
}
|
||||
|
||||
function adjustVolume(step) {
|
||||
if (!defaultSink?.audio) return
|
||||
|
||||
readonly property var dropdownStyle: ({
|
||||
backgroundColor: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.98),
|
||||
borderColor: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.6),
|
||||
borderWidth: 2,
|
||||
cornerRadius: Theme.cornerRadius * 2,
|
||||
shadowOffset: 8,
|
||||
shadowBlur: 1.0,
|
||||
shadowColor: Qt.rgba(0, 0, 0, 0.4),
|
||||
shadowOpacity: 0.7,
|
||||
animationDuration: Anims.durShort
|
||||
})
|
||||
const currentVolume = Math.round(defaultSink.audio.volume * 100)
|
||||
const newVolume = Math.min(100, Math.max(0, currentVolume + step))
|
||||
|
||||
property bool isSeeking: false
|
||||
|
||||
Timer {
|
||||
id: cleanupTimer
|
||||
interval: 2000
|
||||
running: !activePlayer
|
||||
onTriggered: {
|
||||
lastValidTitle = ""
|
||||
lastValidArtist = ""
|
||||
lastValidAlbum = ""
|
||||
lastValidArtUrl = ""
|
||||
extractedDominantColor = Theme.surface
|
||||
extractedAccentColor = Theme.primary
|
||||
colorsExtracted = false
|
||||
stop()
|
||||
defaultSink.audio.volume = newVolume / 100
|
||||
if (newVolume > 0 && defaultSink.audio.muted) {
|
||||
defaultSink.audio.muted = false
|
||||
}
|
||||
}
|
||||
|
||||
ColorQuantizer {
|
||||
id: colorQuantizer
|
||||
source: (root.activePlayer?.trackArtUrl) || root.lastValidArtUrl || ""
|
||||
source: activePlayer?.trackArtUrl || ""
|
||||
depth: 6
|
||||
|
||||
onSourceChanged: {
|
||||
if (source) {
|
||||
root.colorsExtracted = false
|
||||
colorFallbackTimer.restart()
|
||||
}
|
||||
}
|
||||
|
||||
onColorsChanged: {
|
||||
if (colors.length > 0) {
|
||||
colorFallbackTimer.stop()
|
||||
root.extractedDominantColor = enhanceColorForBackground(colors[0])
|
||||
root.extractedAccentColor = enhanceColorForBackground(colors.length > 2 ? colors[2] : colors[0])
|
||||
root.colorsExtracted = true
|
||||
extractedDominantColor = colors[0]
|
||||
extractedAccentColor = colors.length > 2 ? colors[2] : colors[0]
|
||||
colorsExtracted = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function enhanceColorForBackground(color) {
|
||||
const luminance = 0.299 * color.r + 0.587 * color.g + 0.114 * color.b
|
||||
|
||||
if (luminance < 0.2) {
|
||||
const boost = 0.4 / Math.max(luminance, 0.05)
|
||||
return Qt.rgba(
|
||||
Math.min(1.0, color.r * boost),
|
||||
Math.min(1.0, color.g * boost),
|
||||
Math.min(1.0, color.b * boost),
|
||||
color.a
|
||||
)
|
||||
}
|
||||
property bool isSeeking: false
|
||||
|
||||
return color
|
||||
}
|
||||
|
||||
Timer {
|
||||
id: colorFallbackTimer
|
||||
interval: 3000
|
||||
onTriggered: {
|
||||
if (!root.colorsExtracted) {
|
||||
root.extractedDominantColor = Qt.rgba(
|
||||
Theme.primary.r * 0.7 + 0.3 * 0.5,
|
||||
Theme.primary.g * 0.7 + 0.3 * 0.5,
|
||||
Theme.primary.b * 0.7 + 0.3 * 0.5,
|
||||
Theme.primary.a
|
||||
)
|
||||
root.extractedAccentColor = Qt.rgba(
|
||||
Theme.secondary.r * 0.8 + 0.2 * 0.4,
|
||||
Theme.secondary.g * 0.8 + 0.2 * 0.4,
|
||||
Theme.secondary.b * 0.8 + 0.2 * 0.4,
|
||||
Theme.secondary.a
|
||||
)
|
||||
root.colorsExtracted = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: dynamicBackground
|
||||
anchors.fill: parent
|
||||
radius: Theme.cornerRadius
|
||||
visible: true
|
||||
opacity: colorsExtracted ? 1.0 : 0.3
|
||||
|
||||
gradient: Gradient {
|
||||
GradientStop {
|
||||
position: 0.0
|
||||
@@ -193,75 +111,17 @@ Item {
|
||||
Qt.rgba(extractedAccentColor.r, extractedAccentColor.g, extractedAccentColor.b, 0.3) :
|
||||
Qt.rgba(Theme.secondary.r, Theme.secondary.g, Theme.secondary.b, 0.15)
|
||||
}
|
||||
GradientStop {
|
||||
position: 0.7
|
||||
color: colorsExtracted ?
|
||||
Qt.rgba(extractedDominantColor.r, extractedDominantColor.g, extractedDominantColor.b, 0.2) :
|
||||
Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.1)
|
||||
}
|
||||
GradientStop {
|
||||
position: 1.0
|
||||
color: Qt.rgba(Theme.surface.r, Theme.surface.g, Theme.surface.b, 0.85)
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on visible {
|
||||
NumberAnimation {
|
||||
duration: Anims.durShort
|
||||
easing.type: Easing.BezierSpline
|
||||
easing.bezierCurve: Anims.standard
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: dynamicOverlay
|
||||
anchors.fill: parent
|
||||
radius: Theme.cornerRadius
|
||||
visible: colorsExtracted && ((activePlayer && activePlayer.trackTitle !== "") || lastValidTitle !== "")
|
||||
color: "transparent"
|
||||
|
||||
Rectangle {
|
||||
width: parent.width * 0.8
|
||||
height: parent.height * 0.4
|
||||
x: parent.width * 0.1
|
||||
y: parent.height * 0.1
|
||||
radius: Theme.cornerRadius * 2
|
||||
opacity: 0.15
|
||||
|
||||
gradient: Gradient {
|
||||
GradientStop {
|
||||
position: 0.0
|
||||
color: Qt.rgba(extractedAccentColor.r, extractedAccentColor.g, extractedAccentColor.b, 0.6)
|
||||
}
|
||||
GradientStop {
|
||||
position: 1.0
|
||||
color: "transparent"
|
||||
}
|
||||
}
|
||||
|
||||
layer.enabled: true
|
||||
layer.effect: MultiEffect {
|
||||
blurEnabled: true
|
||||
blur: 1.0
|
||||
blurMax: 64
|
||||
blurMultiplier: 1.0
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on visible {
|
||||
NumberAnimation {
|
||||
duration: Anims.durShort
|
||||
easing.type: Easing.BezierSpline
|
||||
easing.bezierCurve: Anims.standard
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
anchors.centerIn: parent
|
||||
spacing: Theme.spacingM
|
||||
visible: (!activePlayer && !lastValidTitle) || (activePlayer && activePlayer.trackTitle === "" && lastValidTitle === "")
|
||||
visible: !activePlayer || activePlayer.trackTitle === ""
|
||||
|
||||
DankIcon {
|
||||
name: "music_note"
|
||||
@@ -281,7 +141,7 @@ Item {
|
||||
Item {
|
||||
anchors.fill: parent
|
||||
clip: false
|
||||
visible: (activePlayer && activePlayer.trackTitle !== "") || lastValidTitle !== ""
|
||||
visible: activePlayer && activePlayer.trackTitle !== ""
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
@@ -318,10 +178,10 @@ Item {
|
||||
return node.audio && node.isSink && !node.isStream
|
||||
})
|
||||
|
||||
color: dropdownStyle.backgroundColor
|
||||
border.color: dropdownStyle.borderColor
|
||||
border.width: dropdownStyle.borderWidth
|
||||
radius: dropdownStyle.cornerRadius
|
||||
color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.98)
|
||||
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.6)
|
||||
border.width: 2
|
||||
radius: Theme.cornerRadius * 2
|
||||
|
||||
opacity: audioDevicesButton.devicesExpanded ? 1 : 0
|
||||
|
||||
@@ -330,15 +190,15 @@ Item {
|
||||
layer.effect: MultiEffect {
|
||||
shadowEnabled: true
|
||||
shadowHorizontalOffset: 0
|
||||
shadowVerticalOffset: dropdownStyle.shadowOffset
|
||||
shadowBlur: dropdownStyle.shadowBlur
|
||||
shadowColor: dropdownStyle.shadowColor
|
||||
shadowOpacity: dropdownStyle.shadowOpacity
|
||||
shadowVerticalOffset: 8
|
||||
shadowBlur: 1.0
|
||||
shadowColor: Qt.rgba(0, 0, 0, 0.4)
|
||||
shadowOpacity: 0.7
|
||||
}
|
||||
|
||||
Behavior on height {
|
||||
NumberAnimation {
|
||||
duration: dropdownStyle.animationDuration
|
||||
duration: Anims.durShort
|
||||
easing.type: Easing.BezierSpline
|
||||
easing.bezierCurve: Anims.emphasizedDecel
|
||||
}
|
||||
@@ -346,7 +206,7 @@ Item {
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation {
|
||||
duration: dropdownStyle.animationDuration
|
||||
duration: Anims.durShort
|
||||
easing.type: Easing.BezierSpline
|
||||
easing.bezierCurve: Anims.standard
|
||||
}
|
||||
@@ -386,7 +246,7 @@ Item {
|
||||
width: parent.width
|
||||
height: 48
|
||||
radius: Theme.cornerRadius
|
||||
color: deviceMouseAreaLeft.containsMouse ? primaryTransparent12 : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, index % 2 === 0 ? 0.3 : 0.2)
|
||||
color: deviceMouseAreaLeft.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, index % 2 === 0 ? 0.3 : 0.2)
|
||||
border.color: modelData === AudioService.sink ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
|
||||
border.width: modelData === AudioService.sink ? 2 : 1
|
||||
|
||||
@@ -443,21 +303,8 @@ Item {
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on color {
|
||||
ColorAnimation {
|
||||
duration: Anims.durShort
|
||||
easing.type: Easing.BezierSpline
|
||||
easing.bezierCurve: Anims.standard
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on border.color {
|
||||
ColorAnimation {
|
||||
duration: Anims.durShort
|
||||
easing.type: Easing.BezierSpline
|
||||
easing.bezierCurve: Anims.standard
|
||||
}
|
||||
}
|
||||
Behavior on color { ColorAnimation { duration: Anims.durShort } }
|
||||
Behavior on border.color { ColorAnimation { duration: Anims.durShort } }
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -475,10 +322,10 @@ Item {
|
||||
clip: true
|
||||
z: 150
|
||||
|
||||
color: dropdownStyle.backgroundColor
|
||||
border.color: dropdownStyle.borderColor
|
||||
border.width: dropdownStyle.borderWidth
|
||||
radius: dropdownStyle.cornerRadius
|
||||
color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.98)
|
||||
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.6)
|
||||
border.width: 2
|
||||
radius: Theme.cornerRadius * 2
|
||||
|
||||
opacity: playerSelectorButton.playersExpanded ? 1 : 0
|
||||
|
||||
@@ -486,15 +333,15 @@ Item {
|
||||
layer.effect: MultiEffect {
|
||||
shadowEnabled: true
|
||||
shadowHorizontalOffset: 0
|
||||
shadowVerticalOffset: dropdownStyle.shadowOffset
|
||||
shadowBlur: dropdownStyle.shadowBlur
|
||||
shadowColor: dropdownStyle.shadowColor
|
||||
shadowOpacity: dropdownStyle.shadowOpacity
|
||||
shadowVerticalOffset: 8
|
||||
shadowBlur: 1.0
|
||||
shadowColor: Qt.rgba(0, 0, 0, 0.4)
|
||||
shadowOpacity: 0.7
|
||||
}
|
||||
|
||||
Behavior on height {
|
||||
NumberAnimation {
|
||||
duration: dropdownStyle.animationDuration
|
||||
duration: Anims.durShort
|
||||
easing.type: Easing.BezierSpline
|
||||
easing.bezierCurve: Anims.emphasizedDecel
|
||||
}
|
||||
@@ -502,7 +349,7 @@ Item {
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation {
|
||||
duration: dropdownStyle.animationDuration
|
||||
duration: Anims.durShort
|
||||
easing.type: Easing.BezierSpline
|
||||
easing.bezierCurve: Anims.standard
|
||||
}
|
||||
@@ -640,8 +487,6 @@ Item {
|
||||
height: width
|
||||
anchors.centerIn: parent
|
||||
activePlayer: root.activePlayer
|
||||
lastValidArtUrl: root.lastValidArtUrl
|
||||
onLastValidArtUrlChanged: root.lastValidArtUrl = lastValidArtUrl
|
||||
}
|
||||
}
|
||||
|
||||
@@ -658,13 +503,7 @@ Item {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
StyledText {
|
||||
text: {
|
||||
if (activePlayer && activePlayer.trackTitle) {
|
||||
lastValidTitle = activePlayer.trackTitle
|
||||
return activePlayer.trackTitle
|
||||
}
|
||||
return lastValidTitle || "Unknown Track"
|
||||
}
|
||||
text: activePlayer?.trackTitle || "Unknown Track"
|
||||
font.pixelSize: Theme.fontSizeLarge
|
||||
font.weight: Font.Bold
|
||||
color: Theme.surfaceText
|
||||
@@ -676,13 +515,7 @@ Item {
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: {
|
||||
if (activePlayer && activePlayer.trackArtist) {
|
||||
lastValidArtist = activePlayer.trackArtist
|
||||
return activePlayer.trackArtist
|
||||
}
|
||||
return lastValidArtist || "Unknown Artist"
|
||||
}
|
||||
text: activePlayer?.trackArtist || "Unknown Artist"
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.8)
|
||||
width: parent.width
|
||||
@@ -693,13 +526,7 @@ Item {
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: {
|
||||
if (activePlayer && activePlayer.trackAlbum) {
|
||||
lastValidAlbum = activePlayer.trackAlbum
|
||||
return activePlayer.trackAlbum
|
||||
}
|
||||
return lastValidAlbum || ""
|
||||
}
|
||||
text: activePlayer?.trackAlbum || ""
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6)
|
||||
width: parent.width
|
||||
@@ -963,7 +790,7 @@ Item {
|
||||
x: parent.width - 40 - Theme.spacingM
|
||||
y: 235
|
||||
color: playerSelectorArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2) : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.8)
|
||||
border.color: outlineTransparent30
|
||||
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
|
||||
border.width: 1
|
||||
z: 100
|
||||
visible: (allPlayers?.length || 0) >= 1
|
||||
@@ -996,8 +823,8 @@ Item {
|
||||
radius: 20
|
||||
x: parent.width - 40 - Theme.spacingM
|
||||
y: 180
|
||||
color: volumeButtonArea.containsMouse ? primaryTransparent20 : surfaceVariantTransparent80
|
||||
border.color: outlineTransparent30
|
||||
color: volumeButtonArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2) : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.8)
|
||||
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
|
||||
border.width: 1
|
||||
z: 100
|
||||
|
||||
@@ -1034,21 +861,9 @@ Item {
|
||||
}
|
||||
}
|
||||
onWheel: wheelEvent => {
|
||||
if (defaultSink?.audio) {
|
||||
const step = 3
|
||||
const currentVolume = Math.round(defaultSink.audio.volume * 100)
|
||||
const newVolume = wheelEvent.angleDelta.y > 0 ?
|
||||
Math.min(100, currentVolume + step) :
|
||||
Math.max(0, currentVolume - step)
|
||||
|
||||
defaultSink.audio.volume = newVolume / 100
|
||||
if (newVolume > 0 && defaultSink.audio.muted) {
|
||||
defaultSink.audio.muted = false
|
||||
}
|
||||
|
||||
volumeButton.volumeExpanded = true
|
||||
wheelEvent.accepted = true
|
||||
}
|
||||
adjustVolume(wheelEvent.angleDelta.y > 0 ? 3 : -3)
|
||||
volumeButton.volumeExpanded = true
|
||||
wheelEvent.accepted = true
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1062,7 +877,7 @@ Item {
|
||||
x: parent.width + Theme.spacingS
|
||||
y: 130
|
||||
color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.95)
|
||||
border.color: outlineTransparent30
|
||||
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
|
||||
border.width: 1
|
||||
visible: volumeButton.volumeExpanded
|
||||
clip: true
|
||||
@@ -1145,20 +960,7 @@ Item {
|
||||
updateVolume(mouse)
|
||||
}
|
||||
|
||||
onWheel: function(wheel) {
|
||||
if (defaultSink) {
|
||||
const step = 3
|
||||
const currentVolume = Math.round(defaultSink.audio.volume * 100)
|
||||
const newVolume = wheel.angleDelta.y > 0 ?
|
||||
Math.min(100, currentVolume + step) :
|
||||
Math.max(0, currentVolume - step)
|
||||
|
||||
defaultSink.audio.volume = newVolume / 100
|
||||
if (newVolume > 0 && defaultSink.audio.muted) {
|
||||
defaultSink.audio.muted = false
|
||||
}
|
||||
}
|
||||
}
|
||||
onWheel: wheel => adjustVolume(wheel.angleDelta.y > 0 ? 3 : -3)
|
||||
|
||||
function updateVolume(mouse) {
|
||||
if (defaultSink) {
|
||||
@@ -1192,8 +994,8 @@ Item {
|
||||
radius: 20
|
||||
x: parent.width - 40 - Theme.spacingM
|
||||
y: 290
|
||||
color: audioDevicesArea.containsMouse ? primaryTransparent20 : surfaceVariantTransparent80
|
||||
border.color: outlineTransparent30
|
||||
color: audioDevicesArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2) : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.8)
|
||||
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
|
||||
border.width: 1
|
||||
z: 100
|
||||
|
||||
|
||||
@@ -76,8 +76,8 @@
|
||||
@define-color scrollbar_hover_color {{colors.primary.default.hex}};
|
||||
|
||||
/* Selection and highlight colors */
|
||||
@define-color selection_bg_color {{colors.primary_container.default.hex}};
|
||||
@define-color selection_fg_color {{colors.on_primary_container.default.hex}};
|
||||
@define-color selection_bg_color {{colors.primary.default.hex}};
|
||||
@define-color selection_fg_color {{colors.on_primary.default.hex}};
|
||||
|
||||
/* Tooltip colors */
|
||||
@define-color tooltip_bg_color {{colors.inverse_surface.default.hex}};
|
||||
|
||||
@@ -1,975 +0,0 @@
|
||||
@keyframes ripple {
|
||||
to {
|
||||
background-size: 1000% 1000%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ripple-on-slider {
|
||||
to {
|
||||
background-size: auto, 1000% 1000%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ripple-on-headerbar {
|
||||
from {
|
||||
background-image: radial-gradient(circle, {{colors.primary.default.hex}} 0%, transparent 0%);
|
||||
}
|
||||
to {
|
||||
background-image: radial-gradient(circle, {{colors.primary.default.hex}} 100%, transparent 0%);
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
background-clip: padding-box;
|
||||
-GtkToolButton-icon-spacing: 0;
|
||||
-GtkTextView-error-underline-color: #E53935;
|
||||
-GtkScrolledWindow-scrollbar-spacing: 0;
|
||||
-GtkToolItemGroup-expander-size: 11;
|
||||
-GtkWidget-text-handle-width: 24;
|
||||
-GtkWidget-text-handle-height: 24;
|
||||
-GtkDialog-button-spacing: 6;
|
||||
-GtkDialog-action-area-border: 6;
|
||||
outline-style: solid;
|
||||
outline-width: 2px;
|
||||
outline-color: transparent;
|
||||
outline-offset: -4px;
|
||||
-gtk-outline-radius: 6px;
|
||||
-gtk-secondary-caret-color: {{colors.primary.default.hex}};
|
||||
}
|
||||
|
||||
*:focus {
|
||||
outline-color: alpha(currentColor, 0.1);
|
||||
}
|
||||
|
||||
XfdesktopIconView.view:active, calendar.raven-calendar:selected, box.vertical > widget > widget:selected, calendar:selected, popover.background modelbutton.flat:selected,
|
||||
popover.background .menuitem.button.flat:selected, .csd treeview.view:selected, .background.csd .view:selected {
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
background-color: alpha(currentColor, 0.1);
|
||||
}
|
||||
|
||||
.nemo-window .view selection, .nemo-window .view:selected, .nautilus-window notebook .view:not(treeview) selection, .nautilus-window notebook .view:not(treeview):selected, .nautilus-window flowboxchild:selected .icon-item-background, label selection, flowbox flowboxchild:selected {
|
||||
color: {{colors.primary.default.hex}};
|
||||
background-color: {{colors.primary_container.default.hex}};
|
||||
}
|
||||
|
||||
.nemo-window .nemo-window-pane widget.entry:selected, window.background.csd evview.view.content-view:selected, window.background.csd evview.view.content-view:selected:backdrop, .nautilus-window.background.csd notebook widget.view:selected, entry selection, textview text selection:focus, textview text selection, widget.view:selected, .view:selected {
|
||||
color: {{colors.on_primary.default.hex}};
|
||||
background-color: {{colors.primary.default.hex}};
|
||||
}
|
||||
|
||||
.linked:not(.vertical) > button, .linked:not(.vertical) > entry {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.linked:not(.vertical) > button:first-child, .linked:not(.vertical) > entry:first-child {
|
||||
border-top-left-radius: 6px;
|
||||
border-bottom-left-radius: 6px;
|
||||
}
|
||||
|
||||
.linked:not(.vertical) > button:last-child, .linked:not(.vertical) > entry:last-child {
|
||||
border-top-right-radius: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
|
||||
.linked:not(.vertical) > button:only-child, .linked:not(.vertical) > entry:only-child {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.linked.vertical > button, .linked.vertical > entry {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.linked.vertical > button:first-child, .linked.vertical > entry:first-child {
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
}
|
||||
|
||||
.linked.vertical > button:last-child, .linked.vertical > entry:last-child {
|
||||
border-bottom-left-radius: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
|
||||
.linked.vertical > button:only-child, .linked.vertical > entry:only-child {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/***************
|
||||
* Base States *
|
||||
***************/
|
||||
.background {
|
||||
background-color: {{colors.surface.default.hex}};
|
||||
color: {{colors.on_surface.default.hex}};
|
||||
}
|
||||
|
||||
dnd {
|
||||
color: {{colors.on_surface.default.hex}};
|
||||
}
|
||||
|
||||
.background:backdrop {
|
||||
background-color: {{colors.surface_dim.default.hex}};
|
||||
color: {{colors.on_surface_variant.default.hex}};
|
||||
}
|
||||
|
||||
.csd.background {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/*************
|
||||
* Scrolling *
|
||||
*************/
|
||||
scrollbar {
|
||||
background-color: {{colors.surface.default.hex}};
|
||||
transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
* {
|
||||
-GtkScrollbar-has-backward-stepper: false;
|
||||
-GtkScrollbar-has-forward-stepper: false;
|
||||
}
|
||||
|
||||
scrollbar.top {
|
||||
border-bottom: 1px solid alpha({{colors.outline.default.hex}}, 0.3);
|
||||
}
|
||||
|
||||
scrollbar.bottom {
|
||||
border-top: 1px solid alpha({{colors.outline.default.hex}}, 0.3);
|
||||
}
|
||||
|
||||
scrollbar.left {
|
||||
border-right: 1px solid alpha({{colors.outline.default.hex}}, 0.3);
|
||||
}
|
||||
|
||||
scrollbar.right {
|
||||
border-left: 1px solid alpha({{colors.outline.default.hex}}, 0.3);
|
||||
}
|
||||
|
||||
scrollbar:backdrop {
|
||||
background-color: {{colors.surface_container_low.default.hex}};
|
||||
border-color: alpha({{colors.outline.default.hex}}, 0.3);
|
||||
transition: 200ms ease-out;
|
||||
}
|
||||
|
||||
scrollbar slider {
|
||||
min-width: 6px;
|
||||
min-height: 6px;
|
||||
margin: -1px;
|
||||
border: 4px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-clip: padding-box;
|
||||
background-color: alpha({{colors.on_surface_variant.default.hex}}, 0.5);
|
||||
}
|
||||
|
||||
scrollbar slider:hover {
|
||||
background-color: alpha({{colors.on_surface_variant.default.hex}}, 0.7);
|
||||
}
|
||||
|
||||
scrollbar slider:hover:active {
|
||||
background-color: {{colors.on_surface_variant.default.hex}};
|
||||
}
|
||||
|
||||
scrollbar slider:backdrop {
|
||||
background-color: alpha({{colors.on_surface_variant.default.hex}}, 0.4);
|
||||
}
|
||||
|
||||
scrollbar slider:disabled {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
scrollbar.fine-tune slider {
|
||||
min-width: 4px;
|
||||
min-height: 4px;
|
||||
}
|
||||
|
||||
scrollbar.fine-tune.horizontal slider {
|
||||
border-width: 2px 4px;
|
||||
}
|
||||
|
||||
scrollbar.fine-tune.vertical slider {
|
||||
border-width: 4px 2px;
|
||||
}
|
||||
|
||||
scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
|
||||
border-color: transparent;
|
||||
opacity: 0.4;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
|
||||
margin: 0;
|
||||
min-width: 3px;
|
||||
min-height: 3px;
|
||||
background-color: {{colors.on_surface.default.hex}};
|
||||
border: 1px solid {{colors.surface.default.hex}};
|
||||
}
|
||||
|
||||
scrollbar.overlay-indicator:not(.dragging):not(.hovering) button {
|
||||
min-width: 5px;
|
||||
min-height: 5px;
|
||||
background-color: {{colors.on_surface.default.hex}};
|
||||
background-clip: padding-box;
|
||||
border-radius: 100px;
|
||||
border: 1px solid {{colors.surface.default.hex}};
|
||||
-gtk-icon-source: none;
|
||||
}
|
||||
|
||||
scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
|
||||
margin: 0 2px;
|
||||
min-width: 40px;
|
||||
}
|
||||
|
||||
scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal button {
|
||||
margin: 1px 2px;
|
||||
min-width: 5px;
|
||||
}
|
||||
|
||||
scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
|
||||
margin: 2px 0;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical button {
|
||||
margin: 2px 1px;
|
||||
min-height: 5px;
|
||||
}
|
||||
|
||||
scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
scrollbar.horizontal slider {
|
||||
min-width: 40px;
|
||||
}
|
||||
|
||||
scrollbar.vertical slider {
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
scrollbar button {
|
||||
padding: 0;
|
||||
min-width: 12px;
|
||||
min-height: 12px;
|
||||
border-style: none;
|
||||
border-radius: 0;
|
||||
transition-property: min-height, min-width, color;
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px alpha({{colors.surface.default.hex}}, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
color: alpha({{colors.on_surface_variant.default.hex}}, 0.5);
|
||||
}
|
||||
|
||||
scrollbar button:hover {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px alpha({{colors.surface.default.hex}}, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
color: alpha({{colors.on_surface_variant.default.hex}}, 0.7);
|
||||
}
|
||||
|
||||
scrollbar button:active, scrollbar button:checked {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px alpha({{colors.surface.default.hex}}, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
color: {{colors.on_surface_variant.default.hex}};
|
||||
}
|
||||
|
||||
scrollbar button:disabled {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px alpha({{colors.surface.default.hex}}, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
color: alpha({{colors.on_surface.default.hex}}, 0.3);
|
||||
}
|
||||
|
||||
scrollbar button:backdrop {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px alpha({{colors.surface.default.hex}}, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
color: alpha({{colors.on_surface_variant.default.hex}}, 0.4);
|
||||
}
|
||||
|
||||
scrollbar button:backdrop:disabled {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px alpha({{colors.surface.default.hex}}, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
color: alpha({{colors.on_surface.default.hex}}, 0.3);
|
||||
}
|
||||
|
||||
scrollbar.vertical button.down {
|
||||
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
|
||||
}
|
||||
|
||||
scrollbar.vertical button.up {
|
||||
-gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
|
||||
}
|
||||
|
||||
scrollbar.horizontal button.down {
|
||||
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
|
||||
}
|
||||
|
||||
scrollbar.horizontal button.up {
|
||||
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
|
||||
}
|
||||
|
||||
/***********
|
||||
* Buttons *
|
||||
***********/
|
||||
@keyframes needs_attention {
|
||||
from {
|
||||
background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to({{colors.primary.default.hex}}), to(transparent));
|
||||
}
|
||||
to {
|
||||
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to({{colors.primary.default.hex}}), to(transparent));
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
min-height: 24px;
|
||||
min-width: 16px;
|
||||
padding: 8px 16px;
|
||||
border: 1px solid;
|
||||
border-radius: 6px;
|
||||
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
border-color: alpha({{colors.outline.default.hex}}, 0.5);
|
||||
background-color: {{colors.surface.default.hex}};
|
||||
color: {{colors.on_surface.default.hex}};
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
border-color: alpha({{colors.outline.default.hex}}, 0.5);
|
||||
background-color: alpha({{colors.on_surface.default.hex}}, 0.08);
|
||||
color: {{colors.on_surface.default.hex}};
|
||||
}
|
||||
|
||||
button:active, button:checked {
|
||||
border-color: alpha({{colors.outline.default.hex}}, 0.5);
|
||||
background-color: alpha({{colors.on_surface.default.hex}}, 0.12);
|
||||
color: {{colors.on_surface.default.hex}};
|
||||
box-shadow: none;
|
||||
transition-duration: 50ms;
|
||||
}
|
||||
|
||||
button:backdrop {
|
||||
border-color: alpha({{colors.outline.default.hex}}, 0.3);
|
||||
background-color: {{colors.surface_dim.default.hex}};
|
||||
color: {{colors.on_surface_variant.default.hex}};
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
}
|
||||
|
||||
button:backdrop:active, button:backdrop:checked {
|
||||
border-color: alpha({{colors.outline.default.hex}}, 0.3);
|
||||
background-color: alpha({{colors.on_surface_variant.default.hex}}, 0.08);
|
||||
color: {{colors.on_surface_variant.default.hex}};
|
||||
}
|
||||
|
||||
button:backdrop:disabled {
|
||||
border-color: alpha({{colors.outline.default.hex}}, 0.12);
|
||||
background-color: alpha({{colors.on_surface.default.hex}}, 0.04);
|
||||
color: alpha({{colors.on_surface.default.hex}}, 0.38);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
}
|
||||
|
||||
button:backdrop:disabled:active, button:backdrop:disabled:checked {
|
||||
border-color: alpha({{colors.outline.default.hex}}, 0.12);
|
||||
background-color: alpha({{colors.on_surface.default.hex}}, 0.04);
|
||||
color: alpha({{colors.on_surface.default.hex}}, 0.38);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
border-color: alpha({{colors.outline.default.hex}}, 0.12);
|
||||
background-color: alpha({{colors.on_surface.default.hex}}, 0.04);
|
||||
color: alpha({{colors.on_surface.default.hex}}, 0.38);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
}
|
||||
|
||||
button:disabled:active, button:disabled:checked {
|
||||
border-color: alpha({{colors.outline.default.hex}}, 0.12);
|
||||
background-color: alpha({{colors.on_surface.default.hex}}, 0.04);
|
||||
color: alpha({{colors.on_surface.default.hex}}, 0.38);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
button.suggested-action {
|
||||
border-color: {{colors.primary.default.hex}};
|
||||
background-color: {{colors.primary.default.hex}};
|
||||
color: {{colors.on_primary.default.hex}};
|
||||
}
|
||||
|
||||
button.suggested-action.flat {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
color: {{colors.primary.default.hex}};
|
||||
}
|
||||
|
||||
button.suggested-action:hover {
|
||||
border-color: {{colors.primary.default.hex}};
|
||||
background-color: alpha({{colors.on_primary.default.hex}}, 0.08);
|
||||
color: {{colors.on_primary.default.hex}};
|
||||
}
|
||||
|
||||
button.suggested-action:active, button.suggested-action:checked {
|
||||
border-color: {{colors.primary.default.hex}};
|
||||
background-color: alpha({{colors.on_primary.default.hex}}, 0.12);
|
||||
color: {{colors.on_primary.default.hex}};
|
||||
}
|
||||
|
||||
button.suggested-action:backdrop {
|
||||
border-color: {{colors.primary.default.hex}};
|
||||
background-color: {{colors.primary.default.hex}};
|
||||
color: {{colors.on_primary.default.hex}};
|
||||
}
|
||||
|
||||
button.suggested-action:backdrop:disabled {
|
||||
border-color: alpha({{colors.outline.default.hex}}, 0.12);
|
||||
background-color: alpha({{colors.on_surface.default.hex}}, 0.04);
|
||||
color: alpha({{colors.on_surface.default.hex}}, 0.38);
|
||||
}
|
||||
|
||||
button.suggested-action:disabled {
|
||||
border-color: alpha({{colors.outline.default.hex}}, 0.12);
|
||||
background-color: alpha({{colors.on_surface.default.hex}}, 0.04);
|
||||
color: alpha({{colors.on_surface.default.hex}}, 0.38);
|
||||
}
|
||||
|
||||
button.destructive-action {
|
||||
border-color: {{colors.error.default.hex}};
|
||||
background-color: {{colors.error.default.hex}};
|
||||
color: {{colors.on_error.default.hex}};
|
||||
}
|
||||
|
||||
button.destructive-action.flat {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
color: {{colors.error.default.hex}};
|
||||
}
|
||||
|
||||
button.destructive-action:hover {
|
||||
border-color: {{colors.error.default.hex}};
|
||||
background-color: alpha({{colors.on_error.default.hex}}, 0.08);
|
||||
color: {{colors.on_error.default.hex}};
|
||||
}
|
||||
|
||||
button.destructive-action:active, button.destructive-action:checked {
|
||||
border-color: {{colors.error.default.hex}};
|
||||
background-color: alpha({{colors.on_error.default.hex}}, 0.12);
|
||||
color: {{colors.on_error.default.hex}};
|
||||
}
|
||||
|
||||
button.destructive-action:backdrop {
|
||||
border-color: {{colors.error.default.hex}};
|
||||
background-color: {{colors.error.default.hex}};
|
||||
color: {{colors.on_error.default.hex}};
|
||||
}
|
||||
|
||||
button.destructive-action:backdrop:disabled {
|
||||
border-color: alpha({{colors.outline.default.hex}}, 0.12);
|
||||
background-color: alpha({{colors.on_surface.default.hex}}, 0.04);
|
||||
color: alpha({{colors.on_surface.default.hex}}, 0.38);
|
||||
}
|
||||
|
||||
button.destructive-action:disabled {
|
||||
border-color: alpha({{colors.outline.default.hex}}, 0.12);
|
||||
background-color: alpha({{colors.on_surface.default.hex}}, 0.04);
|
||||
color: alpha({{colors.on_surface.default.hex}}, 0.38);
|
||||
}
|
||||
|
||||
button.flat {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px alpha({{colors.surface.default.hex}}, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
button.flat:hover {
|
||||
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
transition-duration: 500ms;
|
||||
border-color: transparent;
|
||||
background-color: alpha({{colors.on_surface.default.hex}}, 0.08);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
button.flat:hover:active {
|
||||
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
button.flat:backdrop {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px alpha({{colors.surface.default.hex}}, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
color: {{colors.on_surface_variant.default.hex}};
|
||||
}
|
||||
|
||||
button.flat:disabled {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px alpha({{colors.surface.default.hex}}, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
color: alpha({{colors.on_surface.default.hex}}, 0.38);
|
||||
}
|
||||
|
||||
button.flat:backdrop:disabled {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px alpha({{colors.surface.default.hex}}, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
color: alpha({{colors.on_surface.default.hex}}, 0.38);
|
||||
}
|
||||
|
||||
button.flat:active, button.flat:checked {
|
||||
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
border-color: transparent;
|
||||
background-color: alpha({{colors.on_surface.default.hex}}, 0.12);
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px alpha({{colors.surface.default.hex}}, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
}
|
||||
|
||||
button.flat:backdrop:active, button.flat:backdrop:checked {
|
||||
border-color: transparent;
|
||||
background-color: alpha({{colors.on_surface_variant.default.hex}}, 0.08);
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px alpha({{colors.surface.default.hex}}, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
color: {{colors.on_surface_variant.default.hex}};
|
||||
}
|
||||
|
||||
button.flat:disabled:active, button.flat:disabled:checked {
|
||||
border-color: transparent;
|
||||
background-color: alpha({{colors.on_surface.default.hex}}, 0.04);
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px alpha({{colors.surface.default.hex}}, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
color: alpha({{colors.on_surface.default.hex}}, 0.38);
|
||||
}
|
||||
|
||||
button.flat.suggested-action {
|
||||
color: {{colors.primary.default.hex}};
|
||||
}
|
||||
|
||||
button.flat.suggested-action:hover {
|
||||
border-color: transparent;
|
||||
background-color: alpha({{colors.primary.default.hex}}, 0.08);
|
||||
background-image: none;
|
||||
color: {{colors.primary.default.hex}};
|
||||
}
|
||||
|
||||
button.flat.suggested-action:active, button.flat.suggested-action:checked {
|
||||
border-color: transparent;
|
||||
background-color: alpha({{colors.primary.default.hex}}, 0.12);
|
||||
background-image: none;
|
||||
color: {{colors.primary.default.hex}};
|
||||
}
|
||||
|
||||
button.flat.suggested-action:backdrop {
|
||||
color: {{colors.primary.default.hex}};
|
||||
}
|
||||
|
||||
button.flat.suggested-action:disabled, button.flat.suggested-action:backdrop:disabled {
|
||||
color: alpha({{colors.on_surface.default.hex}}, 0.38);
|
||||
}
|
||||
|
||||
button.flat.destructive-action {
|
||||
color: {{colors.error.default.hex}};
|
||||
}
|
||||
|
||||
button.flat.destructive-action:hover {
|
||||
border-color: transparent;
|
||||
background-color: alpha({{colors.error.default.hex}}, 0.08);
|
||||
background-image: none;
|
||||
color: {{colors.error.default.hex}};
|
||||
}
|
||||
|
||||
button.flat.destructive-action:active, button.flat.destructive-action:checked {
|
||||
border-color: transparent;
|
||||
background-color: alpha({{colors.error.default.hex}}, 0.12);
|
||||
background-image: none;
|
||||
color: {{colors.error.default.hex}};
|
||||
}
|
||||
|
||||
button.flat.destructive-action:backdrop {
|
||||
color: {{colors.error.default.hex}};
|
||||
}
|
||||
|
||||
button.flat.destructive-action:disabled, button.flat.destructive-action:backdrop:disabled {
|
||||
color: alpha({{colors.on_surface.default.hex}}, 0.38);
|
||||
}
|
||||
|
||||
button.image-button {
|
||||
min-width: 24px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
button.text-button {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
button.text-button.image-button {
|
||||
padding-left: 12px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
button.text-button.image-button label {
|
||||
padding-left: 8px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
button.text-button.image-button label:dir(rtl) {
|
||||
padding-left: 0px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
menubutton.circular button, button.circular {
|
||||
border-radius: 9999px;
|
||||
-gtk-outline-radius: 9999px;
|
||||
}
|
||||
|
||||
menubutton.circular button label, button.circular label {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button:drop(active) {
|
||||
border-color: {{colors.primary.default.hex}};
|
||||
box-shadow: inset 0 0 0 1px {{colors.primary.default.hex}};
|
||||
}
|
||||
|
||||
/***************
|
||||
* Header bars *
|
||||
***************/
|
||||
.nemo-window .primary-toolbar button:not(.text-button), headerbar button:not(.suggested-action):not(.destructive-action) {
|
||||
color: {{colors.on_surface_variant.default.hex}};
|
||||
}
|
||||
|
||||
.nemo-window .primary-toolbar .linked:not(.vertical) > button:not(.text-button), headerbar .linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action) {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.nemo-window .primary-toolbar button:focus:not(.text-button), headerbar button:focus:not(.suggested-action):not(.destructive-action), .nemo-window .primary-toolbar button:hover:not(.text-button), headerbar button:hover:not(.suggested-action):not(.destructive-action), .nemo-window .primary-toolbar button:active:not(.text-button), headerbar button:active:not(.suggested-action):not(.destructive-action), .nemo-window .primary-toolbar button:checked:not(.text-button), headerbar button:checked:not(.suggested-action):not(.destructive-action) {
|
||||
color: {{colors.on_surface.default.hex}};
|
||||
}
|
||||
|
||||
.nemo-window .primary-toolbar button:disabled:not(.text-button), headerbar button:disabled:not(.suggested-action):not(.destructive-action) {
|
||||
color: alpha({{colors.on_surface.default.hex}}, 0.3);
|
||||
}
|
||||
|
||||
.nemo-window .primary-toolbar button:checked:disabled:not(.text-button), headerbar button:checked:disabled:not(.suggested-action):not(.destructive-action) {
|
||||
background-color: transparent;
|
||||
color: alpha({{colors.on_surface.default.hex}}, 0.38);
|
||||
}
|
||||
|
||||
.nemo-window .primary-toolbar button:backdrop:not(.text-button), headerbar button:backdrop:not(.suggested-action):not(.destructive-action) {
|
||||
color: alpha({{colors.on_surface.default.hex}}, 0.38);
|
||||
}
|
||||
|
||||
.nemo-window .primary-toolbar button:backdrop:focus:not(.text-button), headerbar button:backdrop:focus:not(.suggested-action):not(.destructive-action), .nemo-window .primary-toolbar button:backdrop:hover:not(.text-button), headerbar button:backdrop:hover:not(.suggested-action):not(.destructive-action), .nemo-window .primary-toolbar button:backdrop:active:not(.text-button), headerbar button:backdrop:active:not(.suggested-action):not(.destructive-action) {
|
||||
color: {{colors.on_surface_variant.default.hex}};
|
||||
}
|
||||
|
||||
.nemo-window .primary-toolbar button:backdrop:disabled:not(.text-button), headerbar button:backdrop:disabled:not(.suggested-action):not(.destructive-action) {
|
||||
color: alpha({{colors.on_surface.default.hex}}, 0.3);
|
||||
}
|
||||
|
||||
.nemo-window .primary-toolbar button:backdrop:checked:not(.text-button), headerbar button:backdrop:checked:not(.suggested-action):not(.destructive-action) {
|
||||
color: {{colors.on_surface_variant.default.hex}};
|
||||
}
|
||||
|
||||
.nemo-window .primary-toolbar button:backdrop:checked:disabled:not(.text-button), headerbar button:backdrop:checked:disabled:not(.suggested-action):not(.destructive-action) {
|
||||
color: alpha({{colors.on_surface.default.hex}}, 0.3);
|
||||
}
|
||||
|
||||
.nemo-window .primary-toolbar entry, .titlebar entry {
|
||||
background-color: alpha({{colors.on_surface.default.hex}}, 0.04);
|
||||
color: {{colors.on_surface.default.hex}};
|
||||
}
|
||||
|
||||
.nemo-window .primary-toolbar entry:disabled, .titlebar entry:disabled {
|
||||
background-color: alpha({{colors.on_surface.default.hex}}, 0.04);
|
||||
color: alpha({{colors.on_surface.default.hex}}, 0.38);
|
||||
}
|
||||
|
||||
.nemo-window .primary-toolbar entry image, .titlebar entry image {
|
||||
color: {{colors.on_surface_variant.default.hex}};
|
||||
}
|
||||
|
||||
.nemo-window .primary-toolbar entry image:hover, .titlebar entry image:hover, .nemo-window .primary-toolbar entry image:active, .titlebar entry image:active {
|
||||
color: {{colors.on_surface.default.hex}};
|
||||
}
|
||||
|
||||
.nemo-window .primary-toolbar entry image:disabled, .titlebar entry image:disabled {
|
||||
color: alpha({{colors.on_surface.default.hex}}, 0.38);
|
||||
}
|
||||
|
||||
.titlebar {
|
||||
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
background-color: {{colors.surface_container_low.default.hex}};
|
||||
color: {{colors.on_surface.default.hex}};
|
||||
border-radius: 12px 12px 0 0;
|
||||
box-shadow: inset 0 -1px alpha({{colors.outline.default.hex}}, 0.12), inset 0 1px alpha({{colors.surface_bright.default.hex}}, 0.15);
|
||||
}
|
||||
|
||||
.titlebar:disabled {
|
||||
color: alpha({{colors.on_surface.default.hex}}, 0.38);
|
||||
}
|
||||
|
||||
.titlebar:backdrop {
|
||||
color: {{colors.on_surface_variant.default.hex}};
|
||||
}
|
||||
|
||||
.titlebar:backdrop:disabled {
|
||||
color: alpha({{colors.on_surface.default.hex}}, 0.3);
|
||||
}
|
||||
|
||||
.csd .titlebar:backdrop {
|
||||
background-color: {{colors.surface_container_lowest.default.hex}};
|
||||
}
|
||||
|
||||
.titlebar .title {
|
||||
padding: 0 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.titlebar .subtitle {
|
||||
padding: 0 12px;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.titlebar .subtitle,
|
||||
.titlebar .dim-label {
|
||||
transition: color 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
color: {{colors.on_surface_variant.default.hex}};
|
||||
}
|
||||
|
||||
.titlebar .subtitle:backdrop,
|
||||
.titlebar .dim-label:backdrop {
|
||||
color: alpha({{colors.on_surface.default.hex}}, 0.38);
|
||||
}
|
||||
|
||||
.titlebar .titlebar {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.titlebar + separator, .titlebar + separator.sidebar {
|
||||
background-color: {{colors.surface_container_low.default.hex}};
|
||||
background-image: none;
|
||||
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
box-shadow: inset 0 -1px alpha({{colors.outline.default.hex}}, 0.12), inset 0 1px alpha({{colors.surface_bright.default.hex}}, 0.15);
|
||||
}
|
||||
|
||||
.titlebar + separator:backdrop, .titlebar + separator.sidebar:backdrop {
|
||||
background-color: {{colors.surface_container_lowest.default.hex}};
|
||||
}
|
||||
|
||||
.titlebar.selection-mode + separator, .titlebar.selection-mode + separator.sidebar, .selection-mode .titlebar + separator, .selection-mode .titlebar + separator.sidebar {
|
||||
background-color: {{colors.primary.default.hex}};
|
||||
}
|
||||
|
||||
.titlebar.selection-mode + separator:backdrop, .titlebar.selection-mode + separator.sidebar:backdrop, .selection-mode .titlebar + separator:backdrop, .selection-mode .titlebar + separator.sidebar:backdrop {
|
||||
background-color: {{colors.primary.default.hex}};
|
||||
}
|
||||
|
||||
.background.csd.unified .titlebar + separator, .background.csd.unified .titlebar + separator.sidebar {
|
||||
box-shadow: inset 0 -1px alpha({{colors.outline.default.hex}}, 0.12);
|
||||
}
|
||||
|
||||
.titlebar .linked:not(.vertical) > entry {
|
||||
border-radius: 6px;
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.titlebar button.suggested-action:disabled, .titlebar button.destructive-action:disabled {
|
||||
background-color: alpha({{colors.on_surface.default.hex}}, 0.04);
|
||||
color: alpha({{colors.on_surface.default.hex}}, 0.38);
|
||||
}
|
||||
|
||||
.titlebar .path-bar button:not(.suggested-action):not(.destructive-action).text-button {
|
||||
min-width: 0;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.titlebar.selection-mode {
|
||||
transition: background-color 0.1ms 225ms, color 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
animation: ripple-on-headerbar 225ms cubic-bezier(0, 0, 0.2, 1);
|
||||
background-color: {{colors.primary.default.hex}};
|
||||
color: {{colors.on_primary.default.hex}};
|
||||
box-shadow: inset 0 -1px alpha({{colors.outline.default.hex}}, 0.12), inset 0 1px alpha({{colors.surface_bright.default.hex}}, 0.2);
|
||||
}
|
||||
|
||||
.titlebar.selection-mode:backdrop {
|
||||
color: alpha({{colors.on_primary.default.hex}}, 0.7);
|
||||
background-color: {{colors.primary.default.hex}};
|
||||
}
|
||||
|
||||
.titlebar.selection-mode .subtitle:link {
|
||||
color: {{colors.on_primary.default.hex}};
|
||||
}
|
||||
|
||||
.titlebar.selection-mode button:not(.suggested-action):not(.destructive-action) {
|
||||
color: {{colors.on_primary.default.hex}};
|
||||
}
|
||||
|
||||
.titlebar.selection-mode button:not(.suggested-action):not(.destructive-action):disabled {
|
||||
color: alpha({{colors.on_primary.default.hex}}, 0.5);
|
||||
}
|
||||
|
||||
.titlebar.selection-mode button:not(.suggested-action):not(.destructive-action):checked {
|
||||
color: {{colors.on_primary.default.hex}};
|
||||
}
|
||||
|
||||
.titlebar.selection-mode button:not(.suggested-action):not(.destructive-action):checked:disabled {
|
||||
color: alpha({{colors.on_primary.default.hex}}, 0.5);
|
||||
}
|
||||
|
||||
.titlebar.selection-mode button:not(.suggested-action):not(.destructive-action):backdrop:not(.titlebutton) {
|
||||
color: alpha({{colors.on_primary.default.hex}}, 0.7);
|
||||
}
|
||||
|
||||
.titlebar.selection-mode button:not(.suggested-action):not(.destructive-action):backdrop:disabled {
|
||||
color: alpha({{colors.on_primary.default.hex}}, 0.32);
|
||||
}
|
||||
|
||||
.titlebar.selection-mode button:not(.suggested-action):not(.destructive-action):backdrop:checked {
|
||||
color: alpha({{colors.on_primary.default.hex}}, 0.7);
|
||||
}
|
||||
|
||||
.titlebar.selection-mode button:not(.suggested-action):not(.destructive-action):backdrop:checked:disabled {
|
||||
color: alpha({{colors.on_primary.default.hex}}, 0.32);
|
||||
}
|
||||
|
||||
.titlebar.selection-mode .selection-menu {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.titlebar.selection-mode .selection-menu arrow {
|
||||
-GtkArrow-arrow-scaling: 1;
|
||||
}
|
||||
|
||||
.titlebar.selection-mode .selection-menu .arrow {
|
||||
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
|
||||
}
|
||||
|
||||
.tiled .titlebar, .tiled-top .titlebar, .tiled-right .titlebar, .tiled-bottom .titlebar, .tiled-left .titlebar, .maximized .titlebar, .fullscreen .titlebar {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.titlebar.default-decoration {
|
||||
min-height: 24px;
|
||||
padding: 6px 12px;
|
||||
border-radius: 12px 12px 0 0;
|
||||
border: none;
|
||||
background-color: {{colors.surface_container_low.default.hex}};
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px alpha({{colors.surface_bright.default.hex}}, 0.15);
|
||||
}
|
||||
|
||||
.titlebar.default-decoration:backdrop {
|
||||
background-color: {{colors.surface_container_lowest.default.hex}};
|
||||
}
|
||||
|
||||
.tiled .titlebar.default-decoration, .maximized .titlebar.default-decoration, .fullscreen .titlebar.default-decoration {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.titlebar.default-decoration button.titlebutton {
|
||||
min-height: 24px;
|
||||
min-width: 24px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.background.csd .titlebar.default-decoration {
|
||||
padding: 6px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.background:not(.csd) .titlebar.default-decoration button.titlebutton:active {
|
||||
background-size: 1000% 1000%;
|
||||
}
|
||||
|
||||
.solid-csd .titlebar:dir(rtl), .solid-csd .titlebar:dir(ltr) {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
headerbar {
|
||||
min-height: 46px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
box.vertical headerbar {
|
||||
background-color: {{colors.surface_container_low.default.hex}};
|
||||
}
|
||||
|
||||
headerbar entry,
|
||||
headerbar spinbutton,
|
||||
headerbar button,
|
||||
headerbar stackswitcher {
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
headerbar button, headerbar button.image-button {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
headerbar > box.left,
|
||||
headerbar > box.right {
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
headerbar separator.titlebutton, headerbar separator.sidebar {
|
||||
margin-top: 11.5px;
|
||||
margin-bottom: 11.5px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
headerbar switch {
|
||||
margin-top: 11px;
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
|
||||
headerbar spinbutton button {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -81,11 +81,8 @@ build_once() {
|
||||
echo "" >> "$TMP_CFG"
|
||||
fi
|
||||
|
||||
if [ "$mode" = "light" ]; then
|
||||
COLLOID_TEMPLATE="$SHELL_DIR/matugen/templates/gtk3-colloid-light.css"
|
||||
else
|
||||
COLLOID_TEMPLATE="$SHELL_DIR/matugen/templates/gtk3-colloid-dark.css"
|
||||
fi
|
||||
# GTK3 colors based on colloid
|
||||
COLLOID_TEMPLATE="$SHELL_DIR/matugen/templates/gtk3-colors.css"
|
||||
|
||||
sed -i "/\[templates\.gtk3\]/,/^$/ s|input_path = './matugen/templates/gtk-colors.css'|input_path = '$COLLOID_TEMPLATE'|" "$TMP_CFG"
|
||||
sed -i "s|input_path = './matugen/templates/|input_path = '$SHELL_DIR/matugen/templates/|g" "$TMP_CFG"
|
||||
|
||||
Reference in New Issue
Block a user