287 lines
8.1 KiB
QML
287 lines
8.1 KiB
QML
// vim: syntax=qml
|
|
|
|
// Base variables
|
|
|
|
real uiScale: 1.0 /* TODO: Implement correctly, do not change for now */
|
|
real fontScale: uiScale
|
|
|
|
Behavior on uiScale { HNumberAnimation {} }
|
|
Behavior on fontScale { HNumberAnimation {} }
|
|
|
|
int minimumSupportedWidth: 240 * uiScale
|
|
int minimumSupportedHeight: 120 * uiScale
|
|
int contentIsWideAbove: 439 * uiScale
|
|
|
|
int minimumSupportedWidthPlusSpacing: minimumSupportedWidth + spacing * 2
|
|
int minimumSupportedHeightPlusSpacing: minimumSupportedHeight + spacing * 2
|
|
|
|
int baseElementsHeight: 36 * uiScale
|
|
int spacing: 12 * uiScale
|
|
int radius: 5
|
|
int animationDuration: 100
|
|
real loadingElementsOpacity: 0.8
|
|
real disabledElementsOpacity: 0.3
|
|
|
|
string preferredIconPack: "light-thin"
|
|
|
|
fontSize:
|
|
int smaller: 13 * fontScale
|
|
int small: 13 * fontScale
|
|
int normal: 16 * fontScale
|
|
int big: 22 * fontScale
|
|
int bigger: 32 * fontScale
|
|
int biggest: 48 * fontScale
|
|
|
|
fontFamily:
|
|
string sans: "Roboto"
|
|
string serif: "Roboto Slab"
|
|
string mono: "Hack"
|
|
|
|
colors:
|
|
int hue: 260
|
|
int saturation: 40
|
|
real intensity: 1.0
|
|
real opacity: 1.0
|
|
|
|
color weakBackground: hsluv(hue, saturation, intensity * 12, opacity)
|
|
color mediumBackground: hsluv(hue, saturation, intensity * 9, opacity)
|
|
color strongBackground: hsluv(hue, saturation, intensity * 6, opacity)
|
|
|
|
color inputBackground:
|
|
hsluv(hue, saturation, intensity * 2, Math.max(0.6, opacity))
|
|
|
|
color accentBackground:
|
|
hsluv(hue, saturation * 1.25, intensity * 42, Math.max(0.6, opacity))
|
|
|
|
color strongAccentBackground:
|
|
hsluv(hue, saturation * 2, intensity * 52, Math.max(0.6, opacity))
|
|
|
|
color brightText: hsluv(0, 0, intensity * 100)
|
|
color text: hsluv(0, 0, intensity * 80)
|
|
color halfDimText: hsluv(0, 0, intensity * 70)
|
|
color dimText: hsluv(0, 0, intensity * 55)
|
|
color dimmerText: hsluv(0, 0, intensity * 30)
|
|
|
|
color errorText: hsluv(0, saturation * 2.25, 50)
|
|
color accentText: hsluv(hue, saturation * 2.25, 60)
|
|
color link: accentText
|
|
color code: hsluv(hue + 5, saturation * 1.5, intensity * 60)
|
|
|
|
// Example of an animation, set running: true to enable
|
|
NumberAnimation on hue
|
|
running: false
|
|
from: 0
|
|
to: 360
|
|
duration: 10000
|
|
loops: Animation.Infinite
|
|
|
|
|
|
// Generic UI controls
|
|
|
|
controls:
|
|
loader:
|
|
int defaultDimension: 80
|
|
color colorize: "white"
|
|
|
|
box:
|
|
color background: colors.strongBackground
|
|
int radius: theme.radius
|
|
|
|
popup:
|
|
color background: colors.strongBackground
|
|
|
|
header:
|
|
color background: colors.strongBackground
|
|
|
|
button:
|
|
color background: colors.inputBackground
|
|
color text: colors.text
|
|
|
|
color hoveredOverlay: hsluv(0, 0, 50, 0.3)
|
|
color pressedOverlay: hsluv(0, 0, 50, 0.6)
|
|
color checkedOverlay: colors.accentBackground
|
|
|
|
menu:
|
|
color border: "black"
|
|
real borderWidth: 2
|
|
|
|
menuItem:
|
|
color background: controls.button.background
|
|
color text: controls.button.text
|
|
|
|
color hoveredOverlay: controls.button.hoveredOverlay
|
|
color pressedOverlay: controls.button.hoveredOverlay
|
|
color checkedOverlay: controls.button.hoveredOverlay
|
|
|
|
checkBox:
|
|
color checkIconColor: colors.accentBackground
|
|
color boxBackground: controls.button.background
|
|
|
|
color boxBorder: hsluv(0, 0, 50, 0.3)
|
|
color boxHoveredBorder: colors.accentBackground
|
|
color boxPressedBorder: colors.strongAccentBackground
|
|
|
|
color text: controls.button.text
|
|
|
|
listView:
|
|
color highlight: hsluv(0, 0, 50, 0.3)
|
|
|
|
textField:
|
|
color background: colors.inputBackground
|
|
color focusedBackground: background
|
|
|
|
int borderWidth: 1
|
|
color border: "transparent"
|
|
color focusedBorder: colors.accentBackground
|
|
color errorBorder: colors.errorText
|
|
|
|
color text: colors.text
|
|
color focusedText: colors.text
|
|
|
|
textArea:
|
|
color background: colors.inputBackground
|
|
color text: colors.text
|
|
|
|
toolTip:
|
|
int delay: 500
|
|
color background: colors.inputBackground
|
|
color text: colors.text
|
|
color border: "black"
|
|
int borderWidth: 2
|
|
|
|
avatar:
|
|
int size: baseElementsHeight
|
|
int radius: theme.radius
|
|
|
|
background:
|
|
int saturation: colors.saturation + 10
|
|
int lightness: Math.min(50, colors.intensity * 20)
|
|
real opacity: 1.0
|
|
|
|
letter:
|
|
int saturation: 10 + colors.saturation * 1.5
|
|
int lightness: colors.intensity * 60
|
|
real opacity: 1.0
|
|
|
|
displayName:
|
|
int saturation: colors.saturation + 25
|
|
int lightness: Math.min(60, colors.intensity * 60)
|
|
|
|
|
|
// Special UI parts
|
|
|
|
ui:
|
|
// Supported: local file path or web URL
|
|
url image: ""
|
|
color background: colors.weakBackground
|
|
|
|
|
|
sidePane:
|
|
real autoWidthRatio: 0.33 * uiScale
|
|
int maximumAutoWidth: 320 * uiScale
|
|
|
|
int autoCollapseBelowWidth: 128 * uiScale
|
|
int collapsedWidth: controls.avatar.size
|
|
|
|
int autoReduceBelowWindowWidth:
|
|
minimumSupportedWidthPlusSpacing + collapsedWidth
|
|
|
|
color background: colors.strongBackground
|
|
|
|
account:
|
|
real collapsedOpacity: 0.3
|
|
color background: "transparent"
|
|
color name: colors.text
|
|
|
|
room:
|
|
real leftRoomOpacity: 0.65
|
|
|
|
color background: "transparent"
|
|
color name: colors.text
|
|
color subtitle: colors.dimText
|
|
color lastEventDate: colors.halfDimText
|
|
|
|
settingsButton:
|
|
color background: colors.inputBackground
|
|
|
|
filterRooms:
|
|
color background: colors.inputBackground
|
|
|
|
|
|
chat:
|
|
roomHeader:
|
|
color background: colors.strongBackground
|
|
color name: colors.text
|
|
color topic: colors.dimText
|
|
|
|
roomSidePane:
|
|
color background: colors.mediumBackground
|
|
|
|
member:
|
|
color background: "transparent"
|
|
color name: colors.text
|
|
color subtitle: colors.dimText
|
|
|
|
inviteButton:
|
|
color background: colors.inputBackground
|
|
|
|
filterMembers:
|
|
color background: colors.inputBackground
|
|
|
|
eventList:
|
|
int ownEventsOnRightUnderWidth: 768
|
|
color background: "transparent"
|
|
|
|
message:
|
|
int radius: theme.radius
|
|
color background: colors.strongBackground
|
|
color ownBackground: hsluv(
|
|
colors.hue, colors.saturation + 30, colors.intensity * 6, opacity
|
|
)
|
|
|
|
color body: colors.text
|
|
color date: colors.dimText
|
|
|
|
color greenText: hsluv(135, colors.saturation * 2.25, 80)
|
|
color link: colors.link
|
|
color code: colors.code
|
|
|
|
string styleSheet:
|
|
"a { color: " + link + " }" +
|
|
|
|
"code { font-family: " + fontFamily.mono + "; " +
|
|
"color: " + code + " }" +
|
|
|
|
"h1, h2, h3 { font-weight: normal }" +
|
|
"h1 { font-size: " + fontSize.biggest + "px }" +
|
|
"h2 { font-size: " + fontSize.bigger + "px }" +
|
|
"h3 { font-size: " + fontSize.big + "px }" +
|
|
"h4 { font-size: " + fontSize.normal + "px }" +
|
|
"h5 { font-size: " + fontSize.small + "px }" +
|
|
"h6 { font-size: " + fontSize.smaller + "px }" +
|
|
|
|
".greentext { color: " + greenText + " }"
|
|
|
|
string styleInclude:
|
|
'<style type"text/css">\n' + styleSheet + '\n</style>\n'
|
|
|
|
daybreak:
|
|
color background: colors.strongBackground
|
|
color text: colors.text
|
|
int radius: theme.radius
|
|
|
|
inviteBanner:
|
|
color background: colors.mediumBackground
|
|
|
|
leftBanner:
|
|
color background: colors.mediumBackground
|
|
|
|
unknownDevices:
|
|
color background: colors.mediumBackground
|
|
|
|
typingMembers:
|
|
color background: colors.mediumBackground
|
|
|
|
composer:
|
|
color background: colors.strongBackground
|