diff --git a/Dockerfile b/Dockerfile index 4d8cd87..0c4cc63 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,4 +1,4 @@ -FROM golang:1.23.6-alpine3.21 AS builder +FROM golang:1.24.2-alpine3.21 AS builder WORKDIR /app COPY . /app diff --git a/README.md b/README.md index 127a7d4..85047d3 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,7 @@

What if you could see everything at a...

Glance

-

InstallConfigurationPreconfigured pagesThemesDiscord

+

InstallConfigurationDiscordSponsor

+

Community widgetsPreconfigured pagesThemes

![](docs/images/readme-main-image.png) diff --git a/docs/configuration.md b/docs/configuration.md index f67261a..adb73c4 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -2006,7 +2006,7 @@ Whether to hide the swap usage. | Name | Type | Required | Default | | ---- | ---- | -------- | ------- | | cpu-temp-sensor | string | no | | -| hide-mointpoints-by-default | boolean | no | false | +| hide-mountpoints-by-default | boolean | no | false | | mountpoints | map\[string\]object | no | | ###### `cpu-temp-sensor` diff --git a/docs/images/themes/dracula.png b/docs/images/themes/dracula.png new file mode 100644 index 0000000..8dba452 Binary files /dev/null and b/docs/images/themes/dracula.png differ diff --git a/docs/themes.md b/docs/themes.md index 285b032..fdc10b2 100644 --- a/docs/themes.md +++ b/docs/themes.md @@ -82,6 +82,17 @@ theme: negative-color: 209 88 54 ``` +### Dracula +![screenshot](images/themes/dracula.png) +```yaml +theme: + background-color: 231 15 21 + primary-color: 265 89 79 + contrast-multiplier: 1.2 + positive-color: 135 94 66 + negative-color: 0 100 67 +``` + ## Light ### Catppuccin Latte diff --git a/go.mod b/go.mod index 0ded337..4c19477 100644 --- a/go.mod +++ b/go.mod @@ -1,32 +1,32 @@ module github.com/glanceapp/glance -go 1.23.6 +go 1.24.2 require ( - github.com/fsnotify/fsnotify v1.8.0 + github.com/fsnotify/fsnotify v1.9.0 github.com/mmcdole/gofeed v1.3.0 - github.com/shirou/gopsutil/v4 v4.25.1 + github.com/shirou/gopsutil/v4 v4.25.3 github.com/tidwall/gjson v1.18.0 - golang.org/x/text v0.22.0 + golang.org/x/text v0.24.0 gopkg.in/yaml.v3 v3.0.1 ) require ( - github.com/PuerkitoBio/goquery v1.10.1 // indirect + github.com/PuerkitoBio/goquery v1.10.2 // indirect github.com/andybalholm/cascadia v1.3.3 // indirect github.com/ebitengine/purego v0.8.2 // indirect github.com/go-ole/go-ole v1.3.0 // indirect github.com/json-iterator/go v1.1.12 // indirect - github.com/lufia/plan9stats v0.0.0-20240909124753-873cd0166683 // indirect + github.com/lufia/plan9stats v0.0.0-20250317134145-8bc96cf8fc35 // indirect github.com/mmcdole/goxpp v1.1.1 // indirect github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd // indirect github.com/modern-go/reflect2 v1.0.2 // indirect github.com/power-devops/perfstat v0.0.0-20240221224432-82ca36839d55 // indirect github.com/tidwall/match v1.1.1 // indirect github.com/tidwall/pretty v1.2.1 // indirect - github.com/tklauser/go-sysconf v0.3.14 // indirect - github.com/tklauser/numcpus v0.9.0 // indirect + github.com/tklauser/go-sysconf v0.3.15 // indirect + github.com/tklauser/numcpus v0.10.0 // indirect github.com/yusufpapurcu/wmi v1.2.4 // indirect - golang.org/x/net v0.34.0 // indirect - golang.org/x/sys v0.30.0 // indirect + golang.org/x/net v0.39.0 // indirect + golang.org/x/sys v0.32.0 // indirect ) diff --git a/go.sum b/go.sum index 97af31d..9a79559 100644 --- a/go.sum +++ b/go.sum @@ -1,5 +1,7 @@ github.com/PuerkitoBio/goquery v1.10.1 h1:Y8JGYUkXWTGRB6Ars3+j3kN0xg1YqqlwvdTV8WTFQcU= github.com/PuerkitoBio/goquery v1.10.1/go.mod h1:IYiHrOMps66ag56LEH7QYDDupKXyo5A8qrjIx3ZtujY= +github.com/PuerkitoBio/goquery v1.10.2 h1:7fh2BdHcG6VFZsK7toXBT/Bh1z5Wmy8Q9MV9HqT2AM8= +github.com/PuerkitoBio/goquery v1.10.2/go.mod h1:0guWGjcLu9AYC7C1GHnpysHy056u9aEkUHwhdnePMCU= github.com/andybalholm/cascadia v1.3.3 h1:AG2YHrzJIm4BZ19iwJ/DAua6Btl3IwJX+VI4kktS1LM= github.com/andybalholm/cascadia v1.3.3/go.mod h1:xNd9bqTn98Ln4DwST8/nG+H0yuB8Hmgu1YHNnWw0GeA= github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38= @@ -9,16 +11,21 @@ github.com/ebitengine/purego v0.8.2 h1:jPPGWs2sZ1UgOSgD2bClL0MJIqu58nOmIcBuXr62z github.com/ebitengine/purego v0.8.2/go.mod h1:iIjxzd6CiRiOG0UyXP+V1+jWqUXVjPKLAI0mRfJZTmQ= github.com/fsnotify/fsnotify v1.8.0 h1:dAwr6QBTBZIkG8roQaJjGof0pp0EeF+tNV7YBP3F/8M= github.com/fsnotify/fsnotify v1.8.0/go.mod h1:8jBTzvmWwFyi3Pb8djgCCO5IBqzKJ/Jwo8TRcHyHii0= +github.com/fsnotify/fsnotify v1.9.0 h1:2Ml+OJNzbYCTzsxtv8vKSFD9PbJjmhYF14k/jKC7S9k= +github.com/fsnotify/fsnotify v1.9.0/go.mod h1:8jBTzvmWwFyi3Pb8djgCCO5IBqzKJ/Jwo8TRcHyHii0= github.com/go-ole/go-ole v1.2.6/go.mod h1:pprOEPIfldk/42T2oK7lQ4v4JSDwmV0As9GaiUsvbm0= github.com/go-ole/go-ole v1.3.0 h1:Dt6ye7+vXGIKZ7Xtk4s6/xVdGDQynvom7xCFEdWr6uE= github.com/go-ole/go-ole v1.3.0/go.mod h1:5LS6F96DhAwUc7C+1HLexzMXY1xGRSryjyPPKW6zv78= github.com/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI= github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY= +github.com/google/go-cmp v0.7.0 h1:wk8382ETsv4JYUZwIsn6YpYiWiBsYLSJiTsyBybVuN8= github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg= github.com/json-iterator/go v1.1.12 h1:PV8peI4a0ysnczrg+LtxykD8LfKY9ML6u2jnxaEnrnM= github.com/json-iterator/go v1.1.12/go.mod h1:e30LSqwooZae/UwlEbR2852Gd8hjQvJoHmT4TnhNGBo= github.com/lufia/plan9stats v0.0.0-20240909124753-873cd0166683 h1:7UMa6KCCMjZEMDtTVdcGu0B1GmmC7QJKiCCjyTAWQy0= github.com/lufia/plan9stats v0.0.0-20240909124753-873cd0166683/go.mod h1:ilwx/Dta8jXAgpFYFvSWEMwxmbWXyiUHkd5FwyKhb5k= +github.com/lufia/plan9stats v0.0.0-20250317134145-8bc96cf8fc35 h1:PpXWgLPs+Fqr325bN2FD2ISlRRztXibcX6e8f5FR5Dc= +github.com/lufia/plan9stats v0.0.0-20250317134145-8bc96cf8fc35/go.mod h1:autxFIvghDt3jPTLoqZ9OZ7s9qTGNAWmYCjVFWPX/zg= github.com/mmcdole/gofeed v1.3.0 h1:5yn+HeqlcvjMeAI4gu6T+crm7d0anY85+M+v6fIFNG4= github.com/mmcdole/gofeed v1.3.0/go.mod h1:9TGv2LcJhdXePDzxiuMnukhV2/zb6VtnZt1mS+SjkLE= github.com/mmcdole/goxpp v1.1.1 h1:RGIX+D6iQRIunGHrKqnA2+700XMCnNv0bAOOv5MUhx8= @@ -34,6 +41,8 @@ github.com/power-devops/perfstat v0.0.0-20240221224432-82ca36839d55 h1:o4JXh1EVt github.com/power-devops/perfstat v0.0.0-20240221224432-82ca36839d55/go.mod h1:OmDBASR4679mdNQnz2pUhc2G8CO2JrUAVFDRBDP/hJE= github.com/shirou/gopsutil/v4 v4.25.1 h1:QSWkTc+fu9LTAWfkZwZ6j8MSUk4A2LV7rbH0ZqmLjXs= github.com/shirou/gopsutil/v4 v4.25.1/go.mod h1:RoUCUpndaJFtT+2zsZzzmhvbfGoDCJ7nFXKJf8GqJbI= +github.com/shirou/gopsutil/v4 v4.25.3 h1:SeA68lsu8gLggyMbmCn8cmp97V1TI9ld9sVzAUcKcKE= +github.com/shirou/gopsutil/v4 v4.25.3/go.mod h1:xbuxyoZj+UsgnZrENu3lQivsngRR5BdjbJwf2fv4szA= github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME= github.com/stretchr/testify v1.3.0/go.mod h1:M5WIy9Dh21IEIfnGCwXGc5bZfKNJtfHm1UVUgZn+9EI= github.com/stretchr/testify v1.10.0 h1:Xv5erBjTwe/5IxqUQTdXv5kgmIvbHo3QQyRwhJsOfJA= @@ -47,8 +56,12 @@ github.com/tidwall/pretty v1.2.1 h1:qjsOFOWWQl+N3RsoF5/ssm1pHmJJwhjlSbZ51I6wMl4= github.com/tidwall/pretty v1.2.1/go.mod h1:ITEVvHYasfjBbM0u2Pg8T2nJnzm8xPwvNhhsoaGGjNU= github.com/tklauser/go-sysconf v0.3.14 h1:g5vzr9iPFFz24v2KZXs/pvpvh8/V9Fw6vQK5ZZb78yU= github.com/tklauser/go-sysconf v0.3.14/go.mod h1:1ym4lWMLUOhuBOPGtRcJm7tEGX4SCYNEEEtghGG/8uY= +github.com/tklauser/go-sysconf v0.3.15 h1:VE89k0criAymJ/Os65CSn1IXaol+1wrsFHEB8Ol49K4= +github.com/tklauser/go-sysconf v0.3.15/go.mod h1:Dmjwr6tYFIseJw7a3dRLJfsHAMXZ3nEnL/aZY+0IuI4= github.com/tklauser/numcpus v0.9.0 h1:lmyCHtANi8aRUgkckBgoDk1nHCux3n2cgkJLXdQGPDo= github.com/tklauser/numcpus v0.9.0/go.mod h1:SN6Nq1O3VychhC1npsWostA+oW+VOQTxZrS604NSRyI= +github.com/tklauser/numcpus v0.10.0 h1:18njr6LDBk1zuna922MgdjQuJFjrdppsZG60sHGfjso= +github.com/tklauser/numcpus v0.10.0/go.mod h1:BiTKazU708GQTYF4mB+cmlpT2Is1gLk7XVuEeem8LsQ= github.com/yuin/goldmark v1.4.13/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY= github.com/yusufpapurcu/wmi v1.2.4 h1:zFUKzehAFReQwLys1b/iSMl+JQGSCSjtVqQn9bBrPo0= github.com/yusufpapurcu/wmi v1.2.4/go.mod h1:SBZ9tNy3G9/m5Oi98Zks0QjeHVDvuK0qfxQmPyzfmi0= @@ -74,6 +87,8 @@ golang.org/x/net v0.25.0/go.mod h1:JkAGAh7GEvH74S6FOH42FLoXpXbE/aqXSrIQjXgsiwM= golang.org/x/net v0.33.0/go.mod h1:HXLR5J+9DxmrqMwG9qjGCxZ+zKXxBru04zlTvWlWuN4= golang.org/x/net v0.34.0 h1:Mb7Mrk043xzHgnRM88suvJFwzVrRfHEHJEl5/71CKw0= golang.org/x/net v0.34.0/go.mod h1:di0qlW3YNM5oh6GqDGQr92MyTozJPmybPK4Ev/Gm31k= +golang.org/x/net v0.39.0 h1:ZCu7HMWDxpXpaiKdhzIfaltL9Lp31x/3fCP11bc6/fY= +golang.org/x/net v0.39.0/go.mod h1:X7NRbYVEA+ewNkCNyJ513WmMdQ3BineSwVtN2zD/d+E= golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM= golang.org/x/sync v0.0.0-20220722155255-886fb9371eb4/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM= golang.org/x/sync v0.1.0/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM= @@ -97,6 +112,8 @@ golang.org/x/sys v0.20.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA= golang.org/x/sys v0.28.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA= golang.org/x/sys v0.30.0 h1:QjkSwP/36a20jFYWkSue1YwXzLmsV5Gfq7Eiy72C1uc= golang.org/x/sys v0.30.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA= +golang.org/x/sys v0.32.0 h1:s77OFDvIQeibCmezSnk/q6iAfkdiQaJi4VzroCFrN20= +golang.org/x/sys v0.32.0/go.mod h1:BJP2sWEmIv4KK5OTEluFJCKSidICx8ciO85XgH3Ak8k= golang.org/x/telemetry v0.0.0-20240228155512-f48c80bd79b2/go.mod h1:TeRTkGYfJXctD9OcfyVLyj2J3IxLnKwHJR8f4D8a3YE= golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo= golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8= @@ -117,6 +134,8 @@ golang.org/x/text v0.15.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU= golang.org/x/text v0.21.0/go.mod h1:4IBbMaMmOPCJ8SecivzSH54+73PCFmPWxNTLm+vZkEQ= golang.org/x/text v0.22.0 h1:bofq7m3/HAFvbF51jz3Q9wLg3jkvSPuiZu/pD1XwgtM= golang.org/x/text v0.22.0/go.mod h1:YRoo4H8PVmsu+E3Ou7cqLVH8oXWIHVoX0jqUWALQhfY= +golang.org/x/text v0.24.0 h1:dd5Bzh4yt5KYA8f9CJHCP4FB4D51c2c6JvN37xJJkJ0= +golang.org/x/text v0.24.0/go.mod h1:L8rBsPeo2pSS+xqN0d5u2ikmjtmoJbDBT1b7nHvFCdU= golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ= golang.org/x/tools v0.0.0-20191119224855-298f0cb1881e/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo= golang.org/x/tools v0.1.12/go.mod h1:hNGJHUnrk76NpqgfD5Aqm5Crs+Hm0VOH/i9J2+nxYbc= diff --git a/internal/glance/cli.go b/internal/glance/cli.go index e231706..a071e24 100644 --- a/internal/glance/cli.go +++ b/internal/glance/cli.go @@ -5,15 +5,19 @@ import ( "fmt" "os" "strings" + + "github.com/shirou/gopsutil/v4/sensors" ) type cliIntent uint8 const ( - cliIntentServe cliIntent = iota - cliIntentConfigValidate = iota - cliIntentConfigPrint = iota - cliIntentDiagnose = iota + cliIntentVersionPrint cliIntent = iota + cliIntentServe + cliIntentConfigValidate + cliIntentConfigPrint + cliIntentDiagnose + cliIntentSensorsPrint ) type cliOptions struct { @@ -22,6 +26,15 @@ type cliOptions struct { } func parseCliOptions() (*cliOptions, error) { + var args []string + + args = os.Args[1:] + if len(args) == 1 && (args[0] == "--version" || args[0] == "-v" || args[0] == "version") { + return &cliOptions{ + intent: cliIntentVersionPrint, + }, nil + } + flags := flag.NewFlagSet("", flag.ExitOnError) flags.Usage = func() { fmt.Println("Usage: glance [options] command") @@ -32,6 +45,7 @@ func parseCliOptions() (*cliOptions, error) { fmt.Println("\nCommands:") fmt.Println(" config:validate Validate the config file") fmt.Println(" config:print Print the parsed config file with embedded includes") + fmt.Println(" sensors:print List all sensors") fmt.Println(" diagnose Run diagnostic checks") } configPath := flags.String("config", "glance.yml", "Set config path") @@ -41,7 +55,7 @@ func parseCliOptions() (*cliOptions, error) { } var intent cliIntent - var args = flags.Args() + args = flags.Args() unknownCommandErr := fmt.Errorf("unknown command: %s", strings.Join(args, " ")) if len(args) == 0 { @@ -51,6 +65,8 @@ func parseCliOptions() (*cliOptions, error) { intent = cliIntentConfigValidate } else if args[0] == "config:print" { intent = cliIntentConfigPrint + } else if args[0] == "sensors:print" { + intent = cliIntentSensorsPrint } else if args[0] == "diagnose" { intent = cliIntentDiagnose } else { @@ -65,3 +81,22 @@ func parseCliOptions() (*cliOptions, error) { configPath: *configPath, }, nil } + +func cliSensorsPrint() int { + tempSensors, err := sensors.SensorsTemperatures() + if err != nil { + fmt.Printf("Failed to retrieve list of sensors: %v\n", err) + return 1 + } + + if len(tempSensors) == 0 { + fmt.Println("No sensors found") + return 0 + } + + for _, sensor := range tempSensors { + fmt.Printf("%s: %.1f°C\n", sensor.SensorKey, sensor.Temperature) + } + + return 0 +} diff --git a/internal/glance/diagnose.go b/internal/glance/diagnose.go index 27d0e19..1ee1bc3 100644 --- a/internal/glance/diagnose.go +++ b/internal/glance/diagnose.go @@ -81,7 +81,9 @@ var diagnosticSteps = []diagnosticStep{ { name: "fetch data from Yahoo finance API", fn: func() (string, error) { - return testHttpRequest("GET", "https://query1.finance.yahoo.com/v8/finance/chart/NVDA", 200) + return testHttpRequestWithHeaders("GET", "https://query1.finance.yahoo.com/v8/finance/chart/NVDA", map[string]string{ + "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:137.0) Gecko/20100101 Firefox/137.0", + }, 200) }, }, { diff --git a/internal/glance/main.go b/internal/glance/main.go index baac315..3dd43dc 100644 --- a/internal/glance/main.go +++ b/internal/glance/main.go @@ -18,6 +18,8 @@ func Main() int { } switch options.intent { + case cliIntentVersionPrint: + fmt.Println(buildVersion) case cliIntentServe: // remove in v0.10.0 if serveUpdateNoticeIfConfigLocationNotMigrated(options.configPath) { @@ -47,6 +49,8 @@ func Main() int { } fmt.Println(string(contents)) + case cliIntentSensorsPrint: + return cliSensorsPrint() case cliIntentDiagnose: runDiagnostic() } diff --git a/internal/glance/static/main.css b/internal/glance/static/main.css new file mode 100644 index 0000000..a715565 --- /dev/null +++ b/internal/glance/static/main.css @@ -0,0 +1,2115 @@ +@font-face { + font-family: 'JetBrains Mono'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2'); +} + +:root { + font-size: 10px; + + --scheme: ; + --bgh: 240; + --bgs: 8%; + --bgl: 9%; + --bghs: var(--bgh), var(--bgs); + --cm: 1; + --tsm: 1; + + --widget-gap: 23px; + --widget-content-vertical-padding: 15px; + --widget-content-horizontal-padding: 17px; + --widget-content-padding: var(--widget-content-vertical-padding) var(--widget-content-horizontal-padding); + --content-bounds-padding: 15px; + --border-radius: 5px; + --mobile-navigation-height: 50px; + + --color-primary: hsl(43, 50%, 70%); + --color-positive: var(--color-primary); + --color-negative: hsl(0, 70%, 70%); + --color-background: hsl(var(--bghs), var(--bgl)); + --color-widget-background-hsl-values: var(--bghs), calc(var(--bgl) + 1%); + --color-widget-background: hsl(var(--color-widget-background-hsl-values)); + --color-separator: hsl(var(--bghs), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 4% * var(--cm)))); + --color-widget-content-border: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 4%))); + --color-widget-background-highlight: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 4%))); + --color-popover-background: hsl(var(--bgh), calc(var(--bgs) + 3%), calc(var(--bgl) + 3%)); + --color-popover-border: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 12%))); + --color-progress-border: hsl(var(--bghs), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 10% * var(--cm)))); + --color-progress-value: hsl(var(--bgh), calc(var(--bgs) * var(--tsm)), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 30% * var(--cm)))); + --color-graph-gridlines: hsl(var(--bghs), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 6% * var(--cm)))); + + --ths: var(--bgh), calc(var(--bgs) * var(--tsm)); + --color-text-highlight: hsl(var(--ths), calc(var(--scheme) var(--cm) * 85%)); + --color-text-paragraph: hsl(var(--ths), calc(var(--scheme) var(--cm) * 73%)); + --color-text-base: hsl(var(--ths), calc(var(--scheme) var(--cm) * 58%)); + --color-text-base-muted: hsl(var(--ths), calc(var(--scheme) var(--cm) * 52%)); + --color-text-subdue: hsl(var(--ths), calc(var(--scheme) var(--cm) * 35%)); + + --font-size-h1: 1.7rem; + --font-size-h2: 1.6rem; + --font-size-h3: 1.5rem; + --font-size-h4: 1.4rem; + --font-size-base: 1.3rem; + --font-size-h5: 1.2rem; + --font-size-h6: 1.1rem; +} + +.light-scheme { + --scheme: 100% -; +} + +.page { + height: 100%; + padding-block: var(--widget-gap); +} + +.page-content, .page.content-ready .page-loading-container { + display: none; +} + +.page.content-ready > .page-content { + display: block; +} + +.page-column-small .size-title-dynamic { + font-size: var(--font-size-h4); +} + +.page-column-full .size-title-dynamic { + font-size: var(--font-size-h3); +} + +.color-primary-if-not-visited:not(:visited) { + color: var(--color-primary); +} + +.text-truncate, +.single-line-titles .title +{ + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.single-line-titles .title { + display: block; +} + +.text-truncate-2-lines, .text-truncate-3-lines { + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-box-orient: vertical; +} + +.text-truncate-3-lines { line-clamp: 3; -webkit-line-clamp: 3; } +.text-truncate-2-lines { line-clamp: 2; -webkit-line-clamp: 2; } + +.visited-indicator:not(.text-truncate)::after, +.visited-indicator.text-truncate::before, +.bookmarks-link:not(.bookmarks-link-no-arrow)::after { + content: '↗' / ""; + margin-left: 0.5em; + display: inline-block; + position: relative; + top: 0.15em; + color: var(--color-text-base); +} + +.visited-indicator.text-truncate { + direction: rtl; + text-align: left; +} + +.visited-indicator:not(:visited)::before, .visited-indicator:not(:visited)::after { + color: var(--color-primary); +} + +.page-columns-transitioned .list-with-transition > * { animation: collapsibleItemReveal .25s backwards; } +.list-with-transition > *:nth-child(2) { animation-delay: 30ms; } +.list-with-transition > *:nth-child(3) { animation-delay: 60ms; } +.list-with-transition > *:nth-child(4) { animation-delay: 90ms; } +.list-with-transition > *:nth-child(5) { animation-delay: 120ms; } +.list-with-transition > *:nth-child(6) { animation-delay: 150ms; } +.list-with-transition > *:nth-child(7) { animation-delay: 180ms; } +.list-with-transition > *:nth-child(8) { animation-delay: 210ms; } + +.list > *:not(:first-child) { + margin-top: calc(var(--list-half-gap) * 2); +} + +.list.list-with-separator > *:not(:first-child) { + margin-top: var(--list-half-gap); + border-top: 1px solid var(--color-separator); + padding-top: var(--list-half-gap); +} + +.collapsible-container:not(.container-expanded) > .collapsible-item { + display: none; +} + +.collapsible-item { + animation: collapsibleItemReveal .25s backwards; +} + +@keyframes collapsibleItemReveal { + from { + opacity: 0; + transform: translateY(10px); + } +} + +.expand-toggle-button { + font: inherit; + border: 0; + cursor: pointer; + display: block; + width: 100%; + text-align: left; + color: var(--color-text-base); + text-transform: uppercase; + font-size: var(--font-size-h4); + padding: var(--widget-content-vertical-padding) 0; + background: var(--color-widget-background); +} + +.expand-toggle-button.container-expanded { + position: sticky; + /* -1px to hide 1px gap on chrome */ + bottom: -1px; +} + +.expand-toggle-button-icon { + display: inline-block; + margin-left: 1rem; + position: relative; + top: -.2rem; +} + +.expand-toggle-button-icon::before { + content: '' / ""; + font-size: 0.8rem; + transform: rotate(90deg); + line-height: 1; + display: inline-block; + transition: transform 0.3s; +} + +.expand-toggle-button.container-expanded .expand-toggle-button-icon::before { + transform: rotate(-90deg); +} + +.widget-group-header { + overflow-x: auto; + scrollbar-width: thin; +} + +.widget-group-title { + background: none; + font: inherit; + border: none; + text-transform: uppercase; + border-bottom: 1px dotted transparent; + cursor: pointer; + flex-shrink: 0; + transition: color .3s, border-color .3s; + color: var(--color-text-subdue); + line-height: calc(1.6em - 1px); +} + +.widget-group-title:hover:not(.widget-group-title-current) { + color: var(--color-text-base); +} + +.widget-group-title-current { + border-bottom-color: var(--color-text-base-muted); + color: var(--color-text-base); +} + +.widget-group-content { + animation: widgetGroupContentEntrance .3s cubic-bezier(0.25, 1, 0.5, 1) backwards; +} + +.widget-group-content[data-direction="right"] { + --direction: 5px; +} + +.widget-group-content[data-direction="left"] { + --direction: -5px; +} + +@keyframes widgetGroupContentEntrance { + from { + opacity: 0; + transform: translateX(var(--direction)); + } +} + +.widget-group-content:not(.widget-group-content-current) { + display: none; +} + +.widget-content:has(.expand-toggle-button:last-child) { + padding-bottom: 0; +} + +.cards-grid.collapsible-container + .expand-toggle-button { + text-align: center; + margin-top: 0.5rem; + background-color: var(--color-background); +} + +.attachments { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} + +.attachments > * { + border-radius: var(--border-radius); + padding: 0.1rem 0.5rem; + font-size: var(--font-size-h6); + background-color: var(--color-separator); +} + +pre { + font: inherit; +} + +::selection { + background-color: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 20%))); + color: var(--color-text-highlight); +} + +::-webkit-scrollbar-thumb { + background: var(--color-text-subdue); + border-radius: var(--border-radius); +} + +::-webkit-scrollbar { + background: var(--color-background); + height: 5px; + width: 10px; +} + +*:focus-visible { + outline: 2px solid var(--color-primary); + outline-offset: 0.1rem; + border-radius: var(--border-radius); +} + +*, *::before, *::after { + box-sizing: border-box; +} + +* { + padding: 0; + margin: 0; +} + +hr { + border: 0; + height: 1px; + background-color: var(--color-separator); +} + +img, svg { + display: block; + max-width: 100%; +} + +img[loading=lazy].loaded:not(.finished-transition) { + transition: opacity .4s; +} + +img[loading=lazy].cached:not(.finished-transition) { + transition: none; +} + +img[loading=lazy]:not(.loaded, .cached) { + opacity: 0; +} + +html { + scrollbar-color: var(--color-text-subdue) transparent; + scroll-behavior: smooth; +} + +html, body, .body-content { + height: 100%; +} + +h1, h2, h3, h4, h5 { + font: inherit; +} + +.visually-hidden { + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +a { + text-decoration: none; + color: inherit; + overflow-wrap: break-word; +} + +ul { + list-style: none; +} + +body { + font-size: 1.3rem; + font-family: 'JetBrains Mono', monospace; + font-variant-ligatures: none; + line-height: 1.6; + color: var(--color-text-base); + background-color: var(--color-background); + overflow-y: scroll; +} + +.page-column-small { + width: 300px; + flex-shrink: 0; +} + +.page-column-full { + width: 100%; + min-width: 0; +} + +.page-columns { + display: flex; + gap: var(--widget-gap); + animation: pageColumnsEntrance .3s cubic-bezier(0.25, 1, 0.5, 1) backwards; +} + +@keyframes pageColumnsEntrance { + from { + opacity: 0; + transform: translateY(10px); + } +} + +.page-loading-container { + height: 100%; + display: flex; + align-items: center; + justify-content: center; + animation: loadingContainerEntrance 200ms backwards; + animation-delay: 150ms; + font-size: 2rem; +} + +.page-loading-container > .loading-icon { + translate: 0 -250%; +} + +@keyframes loadingContainerEntrance { + from { + opacity: 0; + } +} + +.loading-icon { + min-width: 1.5em; + width: 1.5em; + height: 1.5em; + border: 0.25em solid hsl(var(--bghs), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 12%))); + border-top-color: hsl(var(--bghs), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 40%))); + border-radius: 50%; + animation: loadingIconSpin 800ms infinite linear; +} + +@keyframes loadingIconSpin { + to { + transform: rotate(360deg); + } +} + +.notice-icon { + width: 0.7rem; + height: 0.7rem; + border-radius: 50%; +} + +.notice-icon-major { + background: var(--color-negative); +} + +.notice-icon-minor { + border: 1px solid var(--color-negative); +} + +kbd { + font: inherit; + padding: 0.1rem 0.8rem; + border-radius: var(--border-radius); + border: 2px solid var(--color-widget-background-highlight); + box-shadow: 0 2px 0 var(--color-widget-background-highlight); + user-select: none; + transition: transform .1s, box-shadow .1s; + font-size: var(--font-size-h5); + cursor: pointer; +} + +kbd:active { + transform: translateY(2px); + box-shadow: 0 0 0 0 var(--color-widget-background-highlight); +} + +.masonry { + display: flex; + gap: var(--widget-gap); +} + +.masonry-column { + flex: 1; + display: flex; + flex-direction: column; +} + +.popover-container, [data-popover-html] { + display: none; +} + +.popover-container { + --triangle-size: 10px; + --triangle-offset: 50%; + --triangle-margin: calc(var(--triangle-size) + 3px); + --entrance-y-offset: 8px; + --entrance-direction: calc(var(--entrance-y-offset) * -1); + + z-index: 20; + position: absolute; + padding-top: var(--triangle-margin); + padding-inline: var(--content-bounds-padding); +} + +.popover-container.position-above { + --entrance-direction: var(--entrance-y-offset); + padding-top: 0; + padding-bottom: var(--triangle-margin); +} + +.popover-frame { + --shadow-properties: 0 15px 20px -10px; + --shadow-color: hsla(var(--bghs), calc(var(--bgl) * 0.2), 0.5); + position: relative; + padding: 10px; + background: var(--color-popover-background); + border: 1px solid var(--color-popover-border); + border-radius: 5px; + animation: popoverFrameEntrance 0.3s backwards cubic-bezier(0.16, 1, 0.3, 1); + box-shadow: var(--shadow-properties) var(--shadow-color); +} + +.popover-frame::before { + content: ''; + position: absolute; + width: var(--triangle-size); + height: var(--triangle-size); + transform: rotate(45deg); + background-color: var(--color-popover-background); + border-top-left-radius: 2px; + border-left: 1px solid var(--color-popover-border); + border-top: 1px solid var(--color-popover-border); + left: calc(var(--triangle-offset) - (var(--triangle-size) / 2)); + top: calc(var(--triangle-size) / 2 * -1 - 1px); +} + +.popover-container.position-above .popover-frame::before { + transform: rotate(-135deg); + top: auto; + bottom: calc(var(--triangle-size) / 2 * -1 - 1px); +} + +.popover-container.position-above .popover-frame { + --shadow-properties: 0 10px 20px -10px; +} + +@keyframes popoverFrameEntrance { + from { + opacity: 0; + transform: translateY(var(--entrance-direction)); + } +} + +.summary { + width: 100%; + cursor: pointer; + word-spacing: -0.18em; + user-select: none; + list-style: none; + position: relative; + display: flex; + z-index: 1; +} + +.summary::-webkit-details-marker { + display: none; +} + +.details[open] .summary { + margin-bottom: .8rem; +} + +.summary::before { + content: ""; + position: absolute; + inset: -.3rem -.8rem; + border-radius: var(--border-radius); + background-color: var(--color-widget-background-highlight); + opacity: 0; + transition: opacity 0.2s; + z-index: -1; +} + +.details[open] .summary::before, .summary:hover::before { + opacity: 1; +} + +.details:not([open]) .list-with-transition { + display: none; +} + +.summary::after { + content: "◀" / ""; + font-size: 1.2em; + position: absolute; + top: 0; + bottom: 0; + line-height: 1.3em; + right: 0; + transition: rotate .5s cubic-bezier(0.22, 1, 0.36, 1); +} + +details[open] .summary::after { + rotate: -90deg; +} + +.content-bounds { + max-width: 1600px; + width: 100%; + margin-inline: auto; + padding: 0 var(--content-bounds-padding); +} + +.page-width-wide .content-bounds { + max-width: 1920px; +} + +.page-width-slim .content-bounds { + max-width: 1100px; +} + +.page-center-vertically .page { + display: flex; + justify-content: center; + flex-direction: column; +} + +/* TODO: refactor, otherwise I hope I never have to change dynamic columns again */ +.dynamic-columns { + --list-half-gap: 0.5rem; + gap: var(--widget-content-vertical-padding) var(--widget-content-horizontal-padding); + display: grid; + grid-template-columns: repeat(var(--columns-per-row), 1fr); +} + +.dynamic-columns > * { + padding-left: var(--widget-content-horizontal-padding); + border-left: 1px solid var(--color-separator); + min-width: 0; +} + +.dynamic-columns > *:first-child { + padding-top: 0; + border-top: none; + border-left: none; +} + +.dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; } +.dynamic-columns:has(> :nth-child(2)) { --columns-per-row: 2; } +.dynamic-columns:has(> :nth-child(3)) { --columns-per-row: 3; } +.dynamic-columns:has(> :nth-child(4)) { --columns-per-row: 4; } +.dynamic-columns:has(> :nth-child(5)) { --columns-per-row: 5; } + +@container widget (max-width: 599px) { + .dynamic-columns { gap: 0; } + .dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; } + .dynamic-columns > * { + border-left: none; + padding-left: 0; + } + .dynamic-columns > *:not(:first-child) { + margin-top: calc(var(--list-half-gap) * 2); + } + .dynamic-columns.list-with-separator > *:not(:first-child) { + margin-top: var(--list-half-gap); + border-top: 1px solid var(--color-separator); + padding-top: var(--list-half-gap); + } +} +@container widget (min-width: 600px) and (max-width: 849px) { + .dynamic-columns:has(> :nth-child(2)) { --columns-per-row: 2; } + .dynamic-columns > :nth-child(2n-1) { + border-left: none; + padding-left: 0; + } +} +@container widget (min-width: 850px) and (max-width: 1249px) { + .dynamic-columns:has(> :nth-child(3)) { --columns-per-row: 3; } + .dynamic-columns > :nth-child(3n+1) { + border-left: none; + padding-left: 0; + } +} +@container widget (min-width: 1250px) and (max-width: 1499px) { + .dynamic-columns:has(> :nth-child(4)) { --columns-per-row: 4; } + .dynamic-columns > :nth-child(4n+1) { + border-left: none; + padding-left: 0; + } +} +@container widget (min-width: 1500px) { + .dynamic-columns:has(> :nth-child(5)) { --columns-per-row: 5; } + .dynamic-columns > :nth-child(5n+1) { + border-left: none; + padding-left: 0; + } +} + +.cards-vertical { + flex-direction: column; +} + +.cards-horizontal { + --cards-per-row: 6.5; +} + +.cards-horizontal, .cards-vertical { + --cards-gap: calc(var(--widget-content-vertical-padding) * 0.7); + display: flex; + gap: var(--cards-gap); +} + +.card { + display: flex; + flex-direction: column; +} + +.cards-horizontal .card { + flex-shrink: 0; + width: calc(100% / var(--cards-per-row) - var(--cards-gap) * (var(--cards-per-row) - 1) / var(--cards-per-row)); +} + +.cards-grid .card { + min-width: 0; +} + +.cards-horizontal { + overflow-x: auto; + scrollbar-width: thin; + padding-bottom: 1rem; +} + +.cards-grid { + --cards-per-row: 6; + display: grid; + grid-template-columns: repeat(var(--cards-per-row), 1fr); + gap: calc(var(--widget-content-vertical-padding) * 0.7); +} + +@container widget (max-width: 1300px) { .cards-horizontal { --cards-per-row: 5.5; } } +@container widget (max-width: 1100px) { .cards-horizontal { --cards-per-row: 4.5; } } +@container widget (max-width: 850px) { .cards-horizontal { --cards-per-row: 3.5; } } +@container widget (max-width: 750px) { .cards-horizontal { --cards-per-row: 3.5; } } +@container widget (max-width: 650px) { .cards-horizontal { --cards-per-row: 2.5; } } +@container widget (max-width: 450px) { .cards-horizontal { --cards-per-row: 2.3; } } + +@container widget (max-width: 1300px) { .cards-grid { --cards-per-row: 5; } } +@container widget (max-width: 1100px) { .cards-grid { --cards-per-row: 4; } } +@container widget (max-width: 850px) { .cards-grid { --cards-per-row: 3; } } +@container widget (max-width: 750px) { .cards-grid { --cards-per-row: 3; } } +@container widget (max-width: 650px) { .cards-grid { --cards-per-row: 2; } } + +.widget-small-content-bounds { + max-width: 350px; + margin: 0 auto; +} + +.widget-error-header { + display: flex; + align-items: center; + justify-content: space-between; + position: relative; + margin-bottom: 1.8rem; + z-index: 1; +} + +.widget-error-header::before { + content: ''; + position: absolute; + inset: calc(0rem - (var(--widget-content-vertical-padding) / 2)) calc(0rem - (var(--widget-content-horizontal-padding) / 2)); + background: var(--color-negative); + opacity: 0.05; + border-radius: var(--border-radius); + z-index: -1; +} + +.widget-error-icon { + width: 2.4rem; + height: 2.4rem; + flex-shrink: 0; + stroke: var(--color-negative); + opacity: 0.6; +} + +.widget-content { + container-type: inline-size; + container-name: widget; +} + +.widget-content:not(.widget-content-frameless) { + padding: var(--widget-content-padding); +} + +.widget-content:not(.widget-content-frameless), .widget-content-frame { + background: var(--color-widget-background); + border-radius: var(--border-radius); + border: 1px solid var(--color-widget-content-border); + box-shadow: 0px 3px 0px 0px hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl)) - 0.5%)); +} + +.padding-widget { + padding: var(--widget-content-padding); +} + +.margin-bottom-widget { + margin-bottom: var(--widget-content-vertical-padding); +} + +.padding-block-widget { + padding-block: var(--widget-content-vertical-padding); +} + +.padding-inline-widget { + padding-inline: var(--widget-content-horizontal-padding); +} + +.widget-header { + padding: 0 calc(var(--widget-content-horizontal-padding) + 1px); + font-size: var(--font-size-h4); + margin-bottom: 0.9rem; + display: flex; + align-items: center; + gap: 1rem; +} + +.widget-beta-icon { + width: 1.6rem; + height: 1.6rem; + flex-shrink: 0; + transition: transform .45s, opacity .45s, stroke .45s; + opacity: 0.7; +} + +.widget-beta-icon:hover, .widget-header .popover-active > .widget-beta-icon { + fill: var(--color-text-highlight); + transform: translateY(-10%) scale(1.3); + opacity: 1; +} + +.widget + .widget { + margin-top: var(--widget-gap); +} + +.list-horizontal-text { + display: flex; + list-style: none; + flex-wrap: wrap; + align-items: center; +} + +.list-horizontal-text > *:not(:last-child)::after { + content: '•' / ""; + color: var(--color-text-subdue); + margin: 0 0.4rem; + position: relative; + top: 0.1rem; +} + +.header-container { + margin-top: calc(var(--widget-gap) / 2); + --header-height: 45px; + --header-items-gap: 2.5rem; +} + +.header { + display: flex; + height: var(--header-height); + gap: var(--header-items-gap); +} + +.logo { + height: 100%; + line-height: var(--header-height); + font-size: 2rem; + color: var(--color-text-highlight); + border-right: 1px solid var(--color-widget-content-border); + padding-right: var(--widget-content-horizontal-padding); +} + +.logo:has(img) { + display: flex; + align-items: center; +} + +.logo img { + max-height: 2.7rem; +} + +.nav { + height: 100%; + gap: var(--header-items-gap); +} + +.nav .nav-item { + line-height: var(--header-height); +} + +.footer { + padding-bottom: calc(var(--widget-gap) * 1.5); + padding-top: calc(var(--widget-gap) / 2); + animation: loadingContainerEntrance 200ms backwards; + animation-delay: 150ms; +} + +.mobile-navigation, .mobile-reachability-header { + display: none; +} + +.nav-item { + display: block; + height: 100%; + border-bottom: 2px solid transparent; + transition: color .3s, border-color .3s; + font-size: var(--font-size-h3); + flex-shrink: 0; +} + +.nav-item:not(.nav-item-current):hover { + border-bottom-color: var(--color-text-subdue); + color: var(--color-text-highlight); +} + +.nav-item.nav-item-current { + border-bottom-color: var(--color-primary); + color: var(--color-text-highlight); +} + +.release-source-icon { + width: 16px; + height: 16px; + flex-shrink: 0; + opacity: 0.4; +} + +.market-chart { + margin-left: auto; + width: 6.5rem; + flex-shrink: 0; +} + +.market-chart svg { + width: 100%; +} + +.market-values { + min-width: 8rem; +} + +.carousel-container { + position: relative; +} + +.carousel-container::before, .carousel-container::after { + content: ''; + position: absolute; + width: 2rem; + top: 0; + bottom: 1rem; + z-index: 10; + opacity: 0; + pointer-events: none; + transition-duration: 0.2s; +} + +.carousel-container::before { + left: 0; + background: linear-gradient(to right, var(--color-background), transparent); +} + +.carousel-container::after { + right: 0; + background: linear-gradient(to left, var(--color-background), transparent); +} + +.carousel-container.show-left-cutoff::before, .carousel-container.show-right-cutoff::after { + opacity: 1; +} + +.video-thumbnail { + width: 100%; + aspect-ratio: 16 / 8.9; + object-fit: cover; + border-radius: var(--border-radius) var(--border-radius) 0 0; +} + +.video-horizontal-list-thumbnail { + height: 4rem; + aspect-ratio: 16 / 8.9; + object-fit: cover; + border-radius: var(--border-radius); +} + +.search-icon { + width: 2.3rem; +} + +.search-icon-container { + position: relative; + flex-shrink: 0; +} + +/* gives a wider hit area for the 3 people that will notice the animation : ) */ +.search-icon-container::before { + content: ''; + position: absolute; + inset: -1rem; +} + +.search-icon-container:hover > .search-icon { + animation: searchIconHover 2.9s forwards; +} + +@keyframes searchIconHover { + 0%, 39% { translate: 0 0; } + 20% { scale: 1.3; } + 40% { scale: 1; } + 50% { translate: -30% 30%; } + 70% { translate: 30% -30%; } + 90% { translate: -30% -30%; } + 100% { translate: 0 0; } +} + +.search { + transition: border-color .2s; + position: relative; +} + +.search:hover { + border-color: var(--color-text-subdue); +} + +.search:focus-within { + border-color: var(--color-primary); +} + +.search-input { + border: 0; + background: none; + width: 100%; + height: 6rem; + font: inherit; + outline: none; + color: var(--color-text-highlight); +} + +.search-input::placeholder { + color: var(--color-text-base-muted); + opacity: 1; +} + +.search-bangs { display: none; } + +.search-bang { + border-radius: calc(var(--border-radius) * 2); + background: var(--color-widget-background-highlight); + padding: 0.3rem 1rem; + flex-shrink: 0; + font-size: var(--font-size-h5); + animation: searchBangsEntrance .3s cubic-bezier(0.25, 1, 0.5, 1) backwards; +} + +@keyframes searchBangsEntrance { + 0% { + opacity: 0; + transform: translateX(-10px); + } +} + +.search-bang:empty { + display: none; +} + +.forum-post-list-thumbnail { + flex-shrink: 0; + width: 6rem; + height: 4.1rem; + border-radius: var(--border-radius); + object-fit: cover; + border: 1px solid var(--color-separator); + margin-top: 0.1rem; +} + +.forum-post-tags-container { + transform: translateY(-0.15rem); +} + +@container widget (max-width: 550px) { + .forum-post-autohide { + display: none; + } +} + +.bookmarks-group { + --bookmarks-group-color: var(--color-primary); +} + +.bookmarks-group-title { + color: var(--bookmarks-group-color); +} + +.bookmarks-group .bookmarks-link::after { + color: var(--bookmarks-group-color); +} + +.bookmarks-icon-container { + margin-block: 0.1rem; + background-color: var(--color-widget-background-highlight); + border-radius: var(--border-radius); + padding: 0.5rem; + opacity: 0.7; + flex-shrink: 0; +} + +.bookmarks-icon { + width: 20px; + height: 20px; + opacity: 0.8; +} + +:root:not(.light-scheme) .flat-icon { + filter: invert(1); +} + +.old-calendar-day { + width: calc(100% / 7); + text-align: center; + padding: 0.6rem 0; +} + +.old-calendar-day-today { + border-radius: var(--border-radius); + background-color: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) (var(--bgl)) + 6%))); + color: var(--color-text-highlight); +} + +.calendar-dates { + text-align: center; + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 2px; +} + +.calendar-date { + padding: 0.4rem 0; + color: var(--color-text-base); + position: relative; + border-radius: var(--border-radius); + background: none; + border: none; + font: inherit; +} + +.calendar-current-date { + border-radius: var(--border-radius); + background-color: var(--color-popover-border); + color: var(--color-text-highlight); +} + +.calendar-spillover-date { + color: var(--color-text-subdue); +} + +.calendar-header-button { + position: relative; + cursor: pointer; + width: 2rem; + height: 2rem; + z-index: 1; + background: none; + border: none; +} + +.calendar-header-button::before { + content: ''; + position: absolute; + inset: -0.2rem; + border-radius: var(--border-radius); + background-color: var(--color-text-subdue); + opacity: 0; + transition: opacity 0.2s; + z-index: -1; +} + +.calendar-header-button:hover::before { + opacity: 0.4; +} + +.calendar-undo-button { + display: inline-block; + vertical-align: text-top; + width: 2rem; + height: 2rem; + margin-left: 0.7rem; +} + +.dns-stats-totals { + transition: opacity .3s; + transition-delay: 50ms; +} + +.dns-stats:has(.dns-stats-graph .popover-active) .dns-stats-totals { + opacity: 0.1; + transition-delay: 0s; +} + +.dns-stats-graph { + --graph-height: 70px; + height: var(--graph-height); + position: relative; + margin-bottom: 2.5rem; +} + +.dns-stats-graph-gridlines-container { + position: absolute; + inset: 0; +} + +.dns-stats-graph-gridlines { + height: 100%; + width: 100%; +} + +.dns-stats-graph-columns { + display: flex; + height: 100%; +} + +.dns-stats-graph-column { + display: flex; + justify-content: flex-end; + align-items: center; + flex-direction: column; + width: calc(100% / 8); + position: relative; +} + +.dns-stats-graph-column::before { + content: ''; + position: absolute; + inset: 1px 0; + opacity: 0; + background: var(--color-text-base); + transition: opacity .2s; +} + +.dns-stats-graph-column:hover::before { + opacity: 0.05; +} + +.dns-stats-graph-bar { + width: 14px; + height: calc((var(--bar-height) / 100) * var(--graph-height)); + border: 1px solid var(--color-progress-border); + border-radius: var(--border-radius) var(--border-radius) 0 0; + display: flex; + background: var(--color-widget-background); + padding: 2px 2px 0 2px; + flex-direction: column; + gap: 2px; + transition: border-color .2s; + min-height: 10px; +} + +.dns-stats-graph-column.popover-active .dns-stats-graph-bar { + border-color: var(--color-text-subdue); + border-bottom-color: var(--color-progress-border); +} + +.dns-stats-graph-bar > * { + border-radius: 2px; + background: var(--color-progress-value); + min-height: 1px; +} + +.dns-stats-graph-bar > .queries { + flex-grow: 1; +} + +.dns-stats-graph-bar > *:last-child { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} + +.dns-stats-graph-bar > .blocked { + background-color: var(--color-negative); + flex-basis: calc(var(--percent) - 1px); +} + +.dns-stats-graph-column:nth-child(even) .dns-stats-graph-time { + opacity: 1; + transform: translateY(0); +} + +.dns-stats-graph-time, .dns-stats-graph-columns:hover .dns-stats-graph-time { + position: absolute; + font-size: var(--font-size-h6); + inset-inline: 0; + text-align: center; + height: 2.5rem; + line-height: 2.5rem; + top: 100%; + user-select: none; + opacity: 0; + transform: translateY(-0.5rem); + transition: opacity .2s, transform .2s; +} + +.dns-stats-graph-column:hover .dns-stats-graph-time { + opacity: 1; + transform: translateY(0); +} + +.dns-stats-graph-columns:hover .dns-stats-graph-column:not(:hover) .dns-stats-graph-time { + opacity: 0; +} + +.weather-column { + position: relative; + display: flex; + align-items: center; + justify-content: end; + flex-direction: column; + width: calc(100% / 12); + padding-top: 3px; +} + +.weather-column-value, .weather-columns:hover .weather-column-value { + font-size: 13px; + color: var(--color-text-highlight); + letter-spacing: -0.1rem; + margin-right: 0.1rem; + position: relative; + margin-bottom: 0.3rem; + opacity: 0; + transform: translateY(0.5rem); + transition: opacity .2s, transform .2s; + user-select: none; +} + +.weather-column-current .weather-column-value, .weather-column:hover .weather-column-value { + opacity: 1; + transform: translateY(0); +} + +.weather-column-value::after { + position: absolute; + content: '°'; + left: 100%; + color: var(--color-text-subdue); +} + +.weather-column-value.weather-column-value-negative::before { + position: absolute; + content: '-'; + right: 100%; +} + +.weather-bar, .weather-columns:hover .weather-bar { + height: calc(20px + var(--weather-bar-height) * 40px); + width: 6px; + background-color: hsl(var(--ths), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 18%))); + border: 1px solid hsl(var(--ths), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 24%))); + border-bottom: 0; + border-radius: 6px 6px 0 0; + mask-image: linear-gradient(0deg, transparent 0, #000 10px); + -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 10px); + transition: background-color .2s, border-color .2s, width .2s; +} + +.weather-column-current .weather-bar, .weather-column:hover .weather-bar { + width: 10px; + background-color: hsl(var(--ths), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 40%))); + border: 1px solid hsl(var(--ths), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 50%))); +} + +.weather-column-rain { + position: absolute; + inset: 0; + bottom: 20%; + overflow: hidden; + mask-image: linear-gradient(0deg, transparent 40%, #000); + -webkit-mask-image: linear-gradient(0deg, transparent 40%, #000); +} + +.weather-column-rain::before { + content: ''; + position: absolute; + /* TODO: figure out a way to make it look continuous between columns, right now + depending on the width of the page the rain inside two columns next to each other + can overlap and look bad */ + background: radial-gradient(circle at 4px 4px, hsl(200, 90%, 70%, 0.4) 1px, transparent 0); + background-size: 8px 8px; + transform: rotate(45deg) translate(-50%, 25%); + height: 130%; + aspect-ratio: 1; + left: 55%; +} + +.weather-column:nth-child(3) .weather-column-time, +.weather-column:nth-child(7) .weather-column-time, +.weather-column:nth-child(11) .weather-column-time { + opacity: 1; + transform: translateY(0); +} + +.weather-column-time, .weather-columns:hover .weather-column-time { + margin-top: 0.3rem; + font-size: var(--font-size-h6); + opacity: 0; + transform: translateY(-0.5rem); + transition: opacity .2s, transform .2s; + user-select: none; +} + +.weather-column:hover .weather-column-time { + opacity: 1; + transform: translateY(0); +} + +.weather-column-daylight { + position: absolute; + inset: 0; + background: linear-gradient(0deg, transparent 30px, hsl(50, 50%, 30%, 0.2)); +} + +.weather-column-daylight-sunrise { + border-radius: 20px 0 0 0; +} + +.weather-column-daylight-sunset { + border-radius: 0 20px 0 0; +} + +.location-icon { + width: 0.8em; + height: 0.8em; + border-radius: 0 50% 50% 50%; + background-color: currentColor; + transform: rotate(225deg) translate(.1em, .1em); + position: relative; + flex-shrink: 0; +} + +.location-icon::after { + content: ''; + position: absolute; + z-index: 2; + width: .4em; + height: .4em; + border-radius: 50%; + background-color: var(--color-widget-background); + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.clock-time { + min-width: 8ch; +} + +.clock-time span { + color: var(--color-text-highlight); +} + +.monitor-site-icon { + display: block; + opacity: 0.8; + filter: grayscale(0.4); + object-fit: contain; + aspect-ratio: 1 / 1; + width: 3.2rem; + position: relative; + top: -0.1rem; + transition: filter 0.3s, opacity 0.3s; +} + +.monitor-site-icon.flat-icon { + opacity: 0.7; +} + +.monitor-site:hover .monitor-site-icon { + opacity: 1; +} + +.monitor-site:hover .monitor-site-icon:not(.flat-icon) { + filter: grayscale(0); +} + +.monitor-site-status-icon { + flex-shrink: 0; + margin-left: auto; + width: 2rem; + height: 2rem; +} + +.monitor-site-status-icon-compact { + width: 1.8rem; + height: 1.8rem; + flex-shrink: 0; +} + +.docker-container-icon { + display: block; + filter: grayscale(0.4); + object-fit: contain; + aspect-ratio: 1 / 1; + width: 2.7rem; + opacity: 0.8; + transition: filter 0.3s, opacity 0.3s; +} + +.docker-container-icon.flat-icon { + opacity: 0.7; +} + +.docker-container:hover .docker-container-icon { + opacity: 1; +} + +.docker-container:hover .docker-container-icon:not(.flat-icon) { + filter: grayscale(0); +} + +.docker-container-status-icon { + width: 2rem; + height: 2rem; +} + +.widget-type-server-info { + position: relative; +} + +.server + .server { + margin-top: 3rem; +} + +.server { + gap: 1rem; + display: flex; + flex-direction: column; +} + +.server-info { + align-items: center; + display: flex; + justify-content: space-between; + gap: 1.5rem; + flex-shrink: 1; + min-width: 0; +} + +.server-details { + min-width: 0; +} + +.server-icon { + height: 3rem; + width: 3rem; +} + +.server-spicy-cpu-icon { + height: 1em; + align-self: center; + margin-left: 0.4em; + margin-bottom: 0.2rem; +} + +.server-stats { + display: flex; + gap: 1.5rem; + margin-top: 0.5rem; +} + +.server-stat-unavailable { + opacity: 0.5; +} + +.progress-bar { + border: 1px solid var(--color-progress-border); + border-radius: var(--border-radius); + display: flex; + flex-direction: column; + gap: 2px; + padding: 2px; + height: 1.5rem; + margin-inline: -3px; /* naughty, but oh so beautiful */ +} + +.progress-bar-combined { + height: 3rem; +} + +.popover-active > .progress-bar { + transition: border-color .3s; + border-color: var(--color-text-subdue); +} + +.progress-value { + --half-border-radius: calc(var(--border-radius) / 2); + border-radius: 0 var(--half-border-radius) var(--half-border-radius) 0; + background: var(--color-progress-value); + width: calc(var(--percent) * 1%); + min-width: 1px; + flex: 1; +} + +.progress-value:first-child { + border-top-left-radius: var(--half-border-radius); +} + +.progress-value:last-child { + border-bottom-left-radius: var(--half-border-radius); +} + +.progress-value-notice { + background: linear-gradient(to right, var(--color-progress-value) 65%, var(--color-negative)); +} + +.value-separator { + min-width: 2rem; + margin-inline: 0.8rem; + flex: 1; + height: calc(1em * 1.1); + border-bottom: 1px dotted var(--color-text-subdue); +} + +@container widget (min-width: 650px) { + .server { + gap: 2rem; + flex-direction: row; + align-items: center; + } + + .server + .server { + margin-top: 1rem; + } + + .server-info { + flex-direction: row-reverse; + justify-content: unset; + margin-right: auto; + z-index: 1; + } + + .server-stats { + flex-direction: row; + justify-content: right; + min-width: 450px; + margin-top: 0; + gap: 2rem; + padding-bottom: 0.8rem; + z-index: 1; + } + + .server-stats > * { + max-width: 200px; + } +} + +.thumbnail { + filter: grayscale(0.2) contrast(0.9); + opacity: 0.8; + transition: filter 0.2s, opacity .2s; +} + +.thumbnail-container { + flex-shrink: 0; + border: 1px solid var(--color-separator); + border-radius: var(--border-radius); +} + +.thumbnail-container > * { + border-radius: var(--border-radius); + object-fit: cover; +} + +.thumbnail-parent:hover .thumbnail { + opacity: 1; + filter: none; +} + +.rss-card-image { + height: var(--rss-thumbnail-height, 10rem); + object-fit: cover; + border-radius: var(--border-radius) var(--border-radius) 0 0; +} + +.rss-card-2 { + position: relative; + height: var(--rss-card-height, 27rem); + overflow: hidden; +} + +.rss-card-2::before { + content: ''; + position: absolute; + inset: 0; + pointer-events: none; + background-image: linear-gradient( + 0deg, + var(--color-widget-background), + hsla(var(--color-widget-background-hsl-values), 0.8) 6rem, transparent 14rem + ); + z-index: 2; +} + +.rss-card-2-image { + position: absolute; + width: 100%; + height: 100%; + object-fit: cover; + /* +1px is required to fix some weird graphical bug where the image overflows on the bottom in firefox */ + border-radius: calc(var(--border-radius) + 1px); + opacity: 0.9; + z-index: 1; +} + +.rss-card-2-content { + position: absolute; + inset-inline: 0; + bottom: var(--widget-content-vertical-padding); + z-index: 3; +} + +.rss-detailed-description { + max-width: 55rem; + color: var(--color-text-base-muted); +} + +.rss-detailed-thumbnail { + margin-top: 0.3rem; +} + +.rss-detailed-thumbnail > * { + aspect-ratio: 3 / 2; + height: 8.7rem; +} + +.twitch-category-thumbnail { + width: 5rem; + aspect-ratio: 3 / 4; + border-radius: var(--border-radius); +} + +.twitch-channel-avatar { + aspect-ratio: 1; + border-radius: 50%; +} + +.twitch-channel-avatar-container { + width: 4.4rem; + height: 4.4rem; + border: 2px solid var(--color-text-subdue); + padding: 2px; + border-radius: 50%; + position: relative; + flex-shrink: 0; +} + +.twitch-channel-live .twitch-channel-avatar-container { + border: 2px solid var(--color-positive); + margin-bottom: 1rem; +} + +.twitch-channel-live .twitch-channel-avatar-container::after { + content: 'LIVE'; + position: absolute; + background: var(--color-positive); + color: var(--color-widget-background); + font-size: var(--font-size-h6); + left: 50%; + bottom: -35%; + border-radius: var(--border-radius); + padding-inline: 0.3rem; + transform: translate(-50%); + border: 2px solid var(--color-widget-background); +} + +.twitch-stream-preview { + max-width: 100%; + width: 400px; + aspect-ratio: 16 / 9; + border-radius: var(--border-radius); + object-fit: cover; +} + +.reddit-card-thumbnail { + width: 100%; + height: 100%; + object-fit: cover; + object-position: 0% 20%; + opacity: 0.15; + filter: blur(1px); +} + +.reddit-card-thumbnail-container { + position: absolute; + inset: 0; + overflow: hidden; + border-radius: var(--border-radius); +} + +.reddit-card-thumbnail-container::after { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient(0deg, var(--color-widget-background) 10%, transparent); +} + +@media (max-width: 1190px) { + .header-container { + display: none; + } + + .page-column-small .size-title-dynamic { + font-size: var(--font-size-h3); + } + + .page-column-small { + width: 100%; + flex-shrink: 1; + } + + .page-column { + display: none; + animation: columnEntrance .0s cubic-bezier(0.25, 1, 0.5, 1) backwards; + } + + .page-columns-transitioned .page-column { + animation-duration: .3s; + } + + @keyframes columnEntrance { + from { + opacity: 0; + transform: scaleX(0.95); + } + } + + .mobile-navigation-offset { + height: var(--mobile-navigation-height); + flex-shrink: 0; + } + + .mobile-navigation { + display: block; + position: fixed; + bottom: 0; + transform: translateY(calc(100% - var(--mobile-navigation-height))); + left: var(--content-bounds-padding); + right: var(--content-bounds-padding); + z-index: 11; + background-color: var(--color-widget-background); + border: 1px solid var(--color-widget-content-border); + border-bottom: 0; + border-radius: var(--border-radius) var(--border-radius) 0 0; + transition: transform .3s; + } + + .mobile-navigation:has(.mobile-navigation-page-links-input:checked) .hamburger-icon { + --spacing: 7px; + color: var(--color-primary); + height: 2px; + } + + .mobile-navigation:has(.mobile-navigation-page-links-input:checked) { + transform: translateY(0); + } + + .mobile-navigation-page-links { + border-top: 1px solid var(--color-widget-content-border); + padding: 15px var(--content-bounds-padding); + display: flex; + align-items: center; + overflow-x: auto; + scrollbar-width: thin; + gap: 2.5rem; + } + + .mobile-navigation-icons { + display: flex; + justify-content: space-around; + align-items: center; + } + + body:has(.mobile-navigation-input[value="0"]:checked) .page-columns > :nth-child(1), + body:has(.mobile-navigation-input[value="1"]:checked) .page-columns > :nth-child(2), + body:has(.mobile-navigation-input[value="2"]:checked) .page-columns > :nth-child(3) { + display: block; + } + + .mobile-navigation-label { + display: flex; + flex: 1; + max-width: 50px; + height: var(--mobile-navigation-height); + justify-content: center; + align-items: center; + cursor: pointer; + font-size: 15px; + line-height: var(--mobile-navigation-height); + } + + .mobile-navigation-pill { + display: block; + background: var(--color-text-base); + height: 10px; + width: 10px; + border-radius: 10px; + transition: width .3s, background-color .3s; + } + + .mobile-navigation-label:hover > .mobile-navigation-pill { + background-color: var(--color-text-highlight); + } + + .mobile-navigation-label:hover { + color: var(--color-text-highlight); + } + + .mobile-navigation-input:checked + .mobile-navigation-pill { + background: var(--color-primary); + width: 30px; + } + + .mobile-navigation-input, .mobile-navigation-page-links-input { + display: none; + } + + .hamburger-icon { + --spacing: 4px; + width: 1em; + height: 1px; + background-color: currentColor; + transition: color .3s, box-shadow .3s; + box-shadow: 0 calc(var(--spacing) * -1) 0 0 currentColor, 0 var(--spacing) 0 0 currentColor; + } + + .expand-toggle-button.container-expanded { + bottom: var(--mobile-navigation-height); + } + + .cards-grid + .expand-toggle-button.container-expanded { + /* hides content that peeks through the rounded borders of the mobile navigation */ + box-shadow: 0 var(--border-radius) 0 0 var(--color-background); + } + + .weather-column-rain::before { + background-size: 7px 7px; + } + + .ios .search-input { + /* so that iOS Safari does not zoom the page when the input is focused */ + font-size: 16px; + } +} + +@media (max-width: 1190px) and (display-mode: standalone) { + :root { + --safe-area-inset-bottom: env(safe-area-inset-bottom, 0); + } + + .ios .body-content { + height: 100dvh; + } + + .expand-toggle-button.container-expanded { + bottom: calc(var(--mobile-navigation-height) + var(--safe-area-inset-bottom)); + } + + .mobile-navigation { + transform: translateY(calc(100% - var(--mobile-navigation-height) - var(--safe-area-inset-bottom))); + padding-bottom: var(--safe-area-inset-bottom); + } + + .mobile-navigation-icons { + padding-bottom: var(--safe-area-inset-bottom); + transition: padding-bottom .3s; + } + + .mobile-navigation-offset { + height: calc(var(--mobile-navigation-height) + var(--safe-area-inset-bottom)); + } + + .mobile-navigation-icons:has(.mobile-navigation-page-links-input:checked) { + padding-bottom: 0; + } +} + +@media (display-mode: standalone) { + body { + padding-top: env(safe-area-inset-top, 0); + } +} + +@media (max-width: 550px) { + :root { + font-size: 9.4px; + --widget-gap: 15px; + --widget-content-vertical-padding: 10px; + --widget-content-horizontal-padding: 10px; + --content-bounds-padding: 10px; + } + + .dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; } + + .row-reverse-on-mobile { + flex-direction: row-reverse; + } + + .hide-on-mobile, .thumbnail-container:has(> .hide-on-mobile) { + display: none + } + + .mobile-reachability-header { + display: block; + font-size: 3rem; + padding: 10vh 1rem; + text-align: center; + color: var(--color-text-highlight); + animation: pageColumnsEntrance .3s cubic-bezier(0.25, 1, 0.5, 1) backwards; + } + + .rss-detailed-thumbnail > * { + height: 6rem; + } + + .rss-detailed-description { + line-clamp: 3; + -webkit-line-clamp: 3; + } +} + +.size-h1 { font-size: var(--font-size-h1); } +.size-h2 { font-size: var(--font-size-h2); } +.size-h3 { font-size: var(--font-size-h3); } +.size-h4 { font-size: var(--font-size-h4); } +.size-base { font-size: var(--font-size-base); } +.size-h5 { font-size: var(--font-size-h5); } +.size-h6 { font-size: var(--font-size-h6); } + +.color-highlight { color: var(--color-text-highlight); } +.color-paragraph { color: var(--color-text-paragraph); } +.color-base { color: var(--color-text-base); } +.color-subdue { color: var(--color-text-subdue); } +.color-negative { color: var(--color-negative); } +.color-positive { color: var(--color-positive); } +.color-primary { color: var(--color-primary); } + +.cursor-help { cursor: help; } +.break-all { word-break: break-all; } +.text-left { text-align: left; } +.text-right { text-align: right; } +.text-center { text-align: center; } +.text-elevate { margin-top: -0.2em; } +.text-compact { word-spacing: -0.18em; } +.text-very-compact { word-spacing: -0.35em; } +.rtl { direction: rtl; } +.shrink { flex-shrink: 1; } +.shrink-0 { flex-shrink: 0; } +.min-width-0 { min-width: 0; } +.max-width-100 { max-width: 100%; } +.block { display: block; } +.inline-block { display: inline-block; } +.overflow-hidden { overflow: hidden; } +.relative { position: relative; } +.flex { display: flex; } +.flex-1 { flex: 1; } +.flex-wrap { flex-wrap: wrap; } +.flex-nowrap { flex-wrap: nowrap; } +.justify-between { justify-content: space-between; } +.justify-stretch { justify-content: stretch; } +.justify-evenly { justify-content: space-evenly; } +.justify-center { justify-content: center; } +.justify-end { justify-content: end; } +.uppercase { text-transform: uppercase; } +.grow { flex-grow: 1; } +.flex-column { flex-direction: column; } +.items-center { align-items: center; } +.items-start { align-items: start; } +.items-end { align-items: end; } +.gap-5 { gap: 0.5rem; } +.gap-7 { gap: 0.7rem; } +.gap-10 { gap: 1rem; } +.gap-12 { gap: 1.2rem; } +.gap-15 { gap: 1.5rem; } +.gap-20 { gap: 2rem; } +.gap-25 { gap: 2.5rem; } +.gap-35 { gap: 3.5rem; } +.gap-45 { gap: 4.5rem; } +.gap-55 { gap: 5.5rem; } +.margin-left-auto { margin-left: auto; } +.margin-top-3 { margin-top: 0.3rem; } +.margin-top-5 { margin-top: 0.5rem; } +.margin-top-7 { margin-top: 0.7rem; } +.margin-top-10 { margin-top: 1rem; } +.margin-top-15 { margin-top: 1.5rem; } +.margin-top-20 { margin-top: 2rem; } +.margin-top-25 { margin-top: 2.5rem; } +.margin-top-35 { margin-top: 3.5rem; } +.margin-top-40 { margin-top: 4rem; } +.margin-top-auto { margin-top: auto; } +.margin-block-3 { margin-block: 0.3rem; } +.margin-block-5 { margin-block: 0.5rem; } +.margin-block-7 { margin-block: 0.7rem; } +.margin-block-8 { margin-block: 0.8rem; } +.margin-block-10 { margin-block: 1rem; } +.margin-block-15 { margin-block: 1.5rem; } +.margin-bottom-3 { margin-bottom: 0.3rem; } +.margin-bottom-5 { margin-bottom: 0.5rem; } +.margin-bottom-7 { margin-bottom: 0.7rem; } +.margin-bottom-10 { margin-bottom: 1rem; } +.margin-bottom-15 { margin-bottom: 1.5rem; } +.margin-bottom-auto { margin-bottom: auto; } +.padding-block-5 { padding-block: 0.5rem; } +.scale-half { transform: scale(0.5); } +.list { --list-half-gap: 0rem; } +.list-gap-2 { --list-half-gap: 0.1rem; } +.list-gap-4 { --list-half-gap: 0.2rem; } +.list-gap-8 { --list-half-gap: 0.4rem; } +.list-gap-10 { --list-half-gap: 0.5rem; } +.list-gap-14 { --list-half-gap: 0.7rem; } +.list-gap-20 { --list-half-gap: 1rem; } +.list-gap-24 { --list-half-gap: 1.2rem; } +.list-gap-34 { --list-half-gap: 1.7rem; } diff --git a/internal/glance/templates/docker-containers.html b/internal/glance/templates/docker-containers.html index aeb2f0f..d84e9a6 100644 --- a/internal/glance/templates/docker-containers.html +++ b/internal/glance/templates/docker-containers.html @@ -22,7 +22,7 @@ -
+
{{- if .URL }} {{ .Title }} {{- else }}