gui: native libadwaita-free UI backend + dark shell; packaging/iso updates
- gui/ui: native GTK4 widget vocabulary (.tn-*) behind the ui.* seam, default backend now native; style_apple.css design language - shell: sidebar/topbar/content all #0f0f0f in dark (matches eww panels) - new pages: wine, online_accounts - packaging: tanin-icons (accent folder theme), tanin-calendar, gtklock, taninux-gtk3-theme, flatpak install handler - iso/distro: profile + manifest tweaks (ISO binary not included)
This commit is contained in:
@@ -0,0 +1,26 @@
|
||||
# Maintainer: Karim <karim@gabrielevarano.ch>
|
||||
#
|
||||
# tanin-calendar — TANINUX calendar app (GTK4 / libadwaita). A detailed agenda
|
||||
# over your calendars, read straight from Evolution Data Server (the same
|
||||
# backend GNOME Online Accounts feeds). Inherits the Fuji monochrome look from
|
||||
# tanin-libadwaita. German UI.
|
||||
pkgname=tanin-calendar
|
||||
pkgver=0.1.0
|
||||
pkgrel=1
|
||||
pkgdesc="TANINUX calendar — GTK4/libadwaita agenda over Evolution Data Server (GNOME Online Accounts)"
|
||||
arch=('any')
|
||||
url="https://taninux.kgva.ch"
|
||||
license=('GPL-3.0-or-later')
|
||||
depends=('python' 'python-gobject' 'gtk4' 'libadwaita'
|
||||
'evolution-data-server' 'adwaita-icon-theme')
|
||||
optdepends=('gnome-online-accounts: add Google/Nextcloud/CalDAV calendars'
|
||||
'tanin-libadwaita: Fuji monochrome theming for the app')
|
||||
|
||||
package() {
|
||||
install -Dm755 "$startdir/tanin-calendar" \
|
||||
"$pkgdir/usr/bin/tanin-calendar"
|
||||
install -Dm644 "$startdir/tanin-calendar.css" \
|
||||
"$pkgdir/usr/share/tanin/calendar/tanin-calendar.css"
|
||||
install -Dm644 "$startdir/ch.gabrielevarano.TaninCalendar.desktop" \
|
||||
"$pkgdir/usr/share/applications/ch.gabrielevarano.TaninCalendar.desktop"
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
[Desktop Entry]
|
||||
Type=Application
|
||||
Name=Calendar
|
||||
Name[de]=Kalender
|
||||
Comment=Termine aus deinen Kalendern (Evolution Data Server)
|
||||
Comment[de]=Termine aus deinen Kalendern (Evolution Data Server)
|
||||
Exec=tanin-calendar
|
||||
Icon=x-office-calendar
|
||||
Terminal=false
|
||||
Categories=Office;Calendar;GTK;
|
||||
Keywords=Kalender;Termine;Agenda;Calendar;Events;
|
||||
StartupNotify=true
|
||||
StartupWMClass=ch.gabrielevarano.TaninCalendar
|
||||
@@ -0,0 +1,25 @@
|
||||
#!/usr/bin/env bash
|
||||
# Install tanin-calendar on THIS machine (no packaging round-trip). Run with
|
||||
# sudo:
|
||||
# sudo bash packaging/tanin-calendar/install-local.sh
|
||||
set -euo pipefail
|
||||
SRC="$(cd "$(dirname "$0")" && pwd)"
|
||||
|
||||
install -Dm755 "$SRC/tanin-calendar" /usr/bin/tanin-calendar
|
||||
install -Dm644 "$SRC/tanin-calendar.css" /usr/share/tanin/calendar/tanin-calendar.css
|
||||
install -Dm644 "$SRC/ch.gabrielevarano.TaninCalendar.desktop" \
|
||||
/usr/share/applications/ch.gabrielevarano.TaninCalendar.desktop
|
||||
|
||||
# refresh the desktop database so the launcher entry shows up immediately
|
||||
command -v update-desktop-database >/dev/null 2>&1 && \
|
||||
update-desktop-database /usr/share/applications || true
|
||||
|
||||
cat <<EOF
|
||||
tanin-calendar installed.
|
||||
binary: /usr/bin/tanin-calendar
|
||||
css: /usr/share/tanin/calendar/tanin-calendar.css
|
||||
desktop: /usr/share/applications/ch.gabrielevarano.TaninCalendar.desktop
|
||||
|
||||
Needs evolution-data-server (typelibs) + at least one calendar added in
|
||||
GNOME Online Accounts (or a local EDS calendar). Launch: tanin-calendar
|
||||
EOF
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,511 @@
|
||||
/* tanin-calendar — TANINUX calendar
|
||||
*
|
||||
* The bulk of the look comes from tanin-libadwaita (Fuji monochrome recolour of
|
||||
* GTK4/libadwaita). This sheet adds the month grid: weekday header, day cells
|
||||
* (with today / other-month states), and the small per-event colour chips.
|
||||
*
|
||||
* Fuji palette:
|
||||
* bg #0f0f0f bg_alt #191919
|
||||
* fg #f0f0f0 muted #8a8a8a accent #a39ec4
|
||||
*
|
||||
* Per-event/calendar background colours are injected at runtime (see
|
||||
* _color_dot in tanin-calendar); the .event-dot rule below is the shape /
|
||||
* fallback so a dot is visible even without a calendar colour from EDS.
|
||||
*/
|
||||
|
||||
/* --------------------------------------------------------------- strip --- */
|
||||
/* The masthead strip below the header bar: prev/next nav on the left, the big
|
||||
* month name (bold) on the left and the big year (lighter/muted) on the right.
|
||||
*/
|
||||
.cal-strip {
|
||||
background-color: #0f0f0f;
|
||||
border-bottom: 1px solid alpha(#f0f0f0, 0.07);
|
||||
}
|
||||
|
||||
/* Inner box of the clamped strip carries the padding so the clamp can keep the
|
||||
* content aligned with the (equally clamped) grid below. */
|
||||
.cal-strip-inner {
|
||||
padding: 8px 8px 12px 8px;
|
||||
}
|
||||
|
||||
.cal-strip .month-title {
|
||||
font-size: 1.9em;
|
||||
font-weight: 800;
|
||||
color: #f0f0f0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.cal-strip .day-subtitle {
|
||||
font-size: 1.05em;
|
||||
font-weight: 500;
|
||||
color: #8a8a8a;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.cal-strip .year-title {
|
||||
font-size: 1.9em;
|
||||
font-weight: 300;
|
||||
color: #8a8a8a;
|
||||
}
|
||||
|
||||
.cal-strip .cal-nav button {
|
||||
min-width: 30px;
|
||||
min-height: 30px;
|
||||
padding: 2px;
|
||||
color: #f0f0f0;
|
||||
}
|
||||
|
||||
.cal-strip .cal-nav button:hover {
|
||||
background-color: #242424;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ dots --- */
|
||||
.event-dot {
|
||||
min-width: 10px;
|
||||
min-height: 10px;
|
||||
border-radius: 9999px;
|
||||
/* fallback: the dim UI foreground, so colourless calendars still show a dot */
|
||||
background-color: alpha(@window_fg_color, 0.35);
|
||||
}
|
||||
|
||||
.chip-dot {
|
||||
min-width: 8px;
|
||||
min-height: 8px;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------- month grid --- */
|
||||
.month-grid {
|
||||
background-color: #0f0f0f;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Weekday header (Mon…Sun). */
|
||||
.weekday-header {
|
||||
color: #8a8a8a;
|
||||
font-weight: bold;
|
||||
font-size: 0.85em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
padding: 8px 6px;
|
||||
background-color: #191919;
|
||||
}
|
||||
|
||||
/* One day cell. The 1px outline forms the grid's hairlines without doubling. */
|
||||
.day-cell {
|
||||
background-color: #0f0f0f;
|
||||
border: 1px solid alpha(#f0f0f0, 0.08);
|
||||
padding: 4px 5px;
|
||||
min-height: 88px;
|
||||
}
|
||||
|
||||
/* Days outside the current month are dimmed. */
|
||||
.day-cell.other-month {
|
||||
background-color: #0d0d0d;
|
||||
}
|
||||
|
||||
.day-cell.other-month .day-number {
|
||||
color: alpha(#8a8a8a, 0.55);
|
||||
}
|
||||
|
||||
/* Today's cell: accent ring + subtle tinted background. */
|
||||
.day-cell.today {
|
||||
background-color: alpha(#a39ec4, 0.10);
|
||||
border: 1px solid #a39ec4;
|
||||
}
|
||||
|
||||
.day-cell.today .day-number {
|
||||
color: #a39ec4;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* The SELECTED cell (distinct from today): a brighter fill + inset ring so the
|
||||
* user can tell which day's events the bottom agenda is showing. */
|
||||
.day-cell.selected {
|
||||
background-color: #242424;
|
||||
border: 1px solid alpha(#f0f0f0, 0.30);
|
||||
}
|
||||
|
||||
.day-cell.selected.today {
|
||||
background-color: alpha(#a39ec4, 0.18);
|
||||
border: 1px solid #a39ec4;
|
||||
}
|
||||
|
||||
.day-cell.selected .day-number {
|
||||
color: #f0f0f0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Day number, top-left. */
|
||||
.day-number {
|
||||
color: #f0f0f0;
|
||||
font-size: 0.9em;
|
||||
padding: 1px 2px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------- event chips --- */
|
||||
.event-chip {
|
||||
background-color: #191919;
|
||||
border-radius: 5px;
|
||||
padding: 1px 5px;
|
||||
min-height: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.event-chip:hover {
|
||||
background-color: #232323;
|
||||
}
|
||||
|
||||
.chip-label {
|
||||
color: #f0f0f0;
|
||||
font-size: 0.82em;
|
||||
}
|
||||
|
||||
/* The muted "+N more" line when a day overflows its chip budget. */
|
||||
.more-label {
|
||||
color: #8a8a8a;
|
||||
font-size: 0.78em;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------- day view --- */
|
||||
.day-agenda {
|
||||
padding: 18px 16px 24px 16px;
|
||||
}
|
||||
|
||||
.day-agenda .agenda-heading {
|
||||
color: #f0f0f0;
|
||||
font-size: 1.25em;
|
||||
font-weight: 700;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.day-agenda .agenda-empty {
|
||||
color: #8a8a8a;
|
||||
font-size: 0.95em;
|
||||
padding: 6px 2px;
|
||||
}
|
||||
|
||||
.agenda-row {
|
||||
background-color: #191919;
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px;
|
||||
min-height: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.agenda-row:hover {
|
||||
background-color: #242424;
|
||||
}
|
||||
|
||||
.agenda-row .agenda-time {
|
||||
color: #8a8a8a;
|
||||
font-size: 0.88em;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.agenda-row .agenda-title {
|
||||
color: #f0f0f0;
|
||||
font-size: 0.98em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.agenda-row .agenda-location {
|
||||
color: #8a8a8a;
|
||||
font-size: 0.82em;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------ week view --- */
|
||||
.week-grid {
|
||||
background-color: #0f0f0f;
|
||||
}
|
||||
|
||||
.week-column {
|
||||
background-color: #0f0f0f;
|
||||
border-left: 1px solid alpha(#f0f0f0, 0.07);
|
||||
padding: 4px 5px 10px 5px;
|
||||
}
|
||||
|
||||
.week-column:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.week-column.today {
|
||||
background-color: alpha(#a39ec4, 0.08);
|
||||
}
|
||||
|
||||
.week-column.selected {
|
||||
background-color: #1d1d1d;
|
||||
}
|
||||
|
||||
.week-column.selected .week-col-header {
|
||||
border-bottom-color: alpha(#f0f0f0, 0.30);
|
||||
}
|
||||
|
||||
.week-column.selected .week-col-header .week-col-date {
|
||||
color: #f0f0f0;
|
||||
}
|
||||
|
||||
.week-col-header:hover {
|
||||
background-color: alpha(#f0f0f0, 0.04);
|
||||
}
|
||||
|
||||
.week-col-header {
|
||||
padding: 6px 2px 8px 2px;
|
||||
margin-bottom: 2px;
|
||||
border-bottom: 1px solid alpha(#f0f0f0, 0.07);
|
||||
}
|
||||
|
||||
.week-col-header .week-col-name {
|
||||
color: #8a8a8a;
|
||||
font-size: 0.78em;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.week-col-header .week-col-date {
|
||||
color: #f0f0f0;
|
||||
font-size: 1.25em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.week-column.today .week-col-header .week-col-date {
|
||||
color: #a39ec4;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.week-column.today .week-col-header {
|
||||
border-bottom-color: #a39ec4;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------ grid clamp -------- */
|
||||
/* The Adw.Clamp wrapping the month/week grid keeps the content centred on wide
|
||||
* windows. A faint side gutter is fine; just give the grid a little breathing
|
||||
* room so cells don't kiss the clamp edge. */
|
||||
.grid-clamp {
|
||||
padding: 0 8px 8px 8px;
|
||||
}
|
||||
|
||||
/* --------------------------------------------- bottom selected agenda ----- */
|
||||
/* The always-visible bottom section listing the SELECTED day's events. Sits
|
||||
* under the grid with a clear separator so it reads as its own panel. */
|
||||
.selected-agenda {
|
||||
background-color: #0d0d0d;
|
||||
border-top: 1px solid alpha(#f0f0f0, 0.10);
|
||||
}
|
||||
|
||||
.selected-agenda-scroller {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.selected-agenda-inner {
|
||||
padding: 12px 12px 16px 12px;
|
||||
}
|
||||
|
||||
.selected-agenda .selected-heading {
|
||||
color: #f0f0f0;
|
||||
font-size: 1.05em;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.selected-agenda .selected-empty {
|
||||
color: #8a8a8a;
|
||||
font-size: 0.92em;
|
||||
padding: 2px 2px;
|
||||
}
|
||||
|
||||
/* ============================================================ time grid === */
|
||||
/* Day / Week time-grid views: a pinned header + all-day strip above a
|
||||
* vertically-scrolling hour grid. Fuji palette throughout, GNOME-clean. */
|
||||
|
||||
/* --- pinned header row (weekday + date), stays above the scroller -------- */
|
||||
.timegrid-header {
|
||||
background-color: #0f0f0f;
|
||||
border-bottom: 1px solid alpha(#f0f0f0, 0.10);
|
||||
}
|
||||
|
||||
.timegrid-corner {
|
||||
background-color: #0f0f0f;
|
||||
}
|
||||
|
||||
.timegrid-col-header {
|
||||
padding: 6px 4px 7px 4px;
|
||||
border-left: 1px solid alpha(#f0f0f0, 0.06);
|
||||
}
|
||||
|
||||
.timegrid-col-header:hover {
|
||||
background-color: alpha(#f0f0f0, 0.04);
|
||||
}
|
||||
|
||||
.timegrid-col-header .timegrid-col-name {
|
||||
color: #8a8a8a;
|
||||
font-size: 0.78em;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.timegrid-col-header .timegrid-col-date {
|
||||
color: #f0f0f0;
|
||||
font-size: 1.25em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.timegrid-col-header.today .timegrid-col-name,
|
||||
.timegrid-col-header.today .timegrid-col-date {
|
||||
color: #a39ec4;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.timegrid-col-header.selected {
|
||||
background-color: #1d1d1d;
|
||||
}
|
||||
|
||||
/* --- thin all-day strip --------------------------------------------------- */
|
||||
.allday-row {
|
||||
background-color: #0d0d0d;
|
||||
border-bottom: 1px solid alpha(#f0f0f0, 0.10);
|
||||
min-height: 30px;
|
||||
}
|
||||
|
||||
.allday-axis {
|
||||
color: #8a8a8a;
|
||||
font-size: 0.7em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.allday-cell {
|
||||
border-left: 1px solid alpha(#f0f0f0, 0.06);
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
.allday-cell.today {
|
||||
background-color: alpha(#a39ec4, 0.08);
|
||||
}
|
||||
|
||||
.allday-chip {
|
||||
background-color: #191919;
|
||||
border-left: 3px solid #8a8a8a;
|
||||
border-radius: 4px;
|
||||
padding: 0 6px;
|
||||
min-height: 0;
|
||||
margin: 1px 0;
|
||||
}
|
||||
|
||||
.allday-chip:hover {
|
||||
background-color: #232323;
|
||||
}
|
||||
|
||||
.allday-chip-label {
|
||||
color: #f0f0f0;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
/* --- scrolling hour grid -------------------------------------------------- */
|
||||
.timegrid-body {
|
||||
background-color: #0f0f0f;
|
||||
}
|
||||
|
||||
/* The left hour axis with "08:00" labels. */
|
||||
.time-axis {
|
||||
background-color: #0f0f0f;
|
||||
border-right: 1px solid alpha(#f0f0f0, 0.08);
|
||||
}
|
||||
|
||||
.time-axis .hour-label {
|
||||
color: #8a8a8a;
|
||||
font-size: 0.72em;
|
||||
font-variant-numeric: tabular-nums;
|
||||
padding: 1px 6px 0 0;
|
||||
}
|
||||
|
||||
/* One day's column holding the hour lines and positioned event blocks. */
|
||||
.day-column {
|
||||
background-color: #0f0f0f;
|
||||
border-left: 1px solid alpha(#f0f0f0, 0.06);
|
||||
}
|
||||
|
||||
.day-column.today {
|
||||
background-color: alpha(#a39ec4, 0.05);
|
||||
}
|
||||
|
||||
/* Hairline separators: full opacity on the hour, fainter on the half-hour. */
|
||||
.day-column .hour-line {
|
||||
background-color: alpha(#f0f0f0, 0.09);
|
||||
}
|
||||
|
||||
.day-column .half-line {
|
||||
background-color: alpha(#f0f0f0, 0.04);
|
||||
}
|
||||
|
||||
/* A positioned timed-event block (rounded, calendar-colour tinted). */
|
||||
.event-block {
|
||||
background-color: alpha(#a39ec4, 0.18);
|
||||
border-left: 3px solid #a39ec4;
|
||||
border-radius: 5px;
|
||||
padding: 2px 6px;
|
||||
min-height: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.event-block:hover {
|
||||
background-color: alpha(#a39ec4, 0.30);
|
||||
}
|
||||
|
||||
.event-block .event-block-time {
|
||||
color: #f0f0f0;
|
||||
font-size: 0.72em;
|
||||
font-variant-numeric: tabular-nums;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.event-block .event-block-title {
|
||||
color: #f0f0f0;
|
||||
font-size: 0.82em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* The accent "now" line on today's column. */
|
||||
.now-line {
|
||||
background-color: #a39ec4;
|
||||
}
|
||||
|
||||
/* The translucent drag-to-create selection rectangle. */
|
||||
.drag-selection {
|
||||
background-color: alpha(#a39ec4, 0.25);
|
||||
border: 1px solid #a39ec4;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------- context menus --- */
|
||||
/* Right-click popovers (event block: Delete/Details; time grid / month cell:
|
||||
* New event). A compact column of flat, left-aligned menu rows. */
|
||||
.context-menu {
|
||||
padding: 4px;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.context-menu-item {
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
color: #f0f0f0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.context-menu-item:hover {
|
||||
background-color: #242424;
|
||||
}
|
||||
|
||||
/* Destructive (Delete) row reads in a warm red, brighter on hover. */
|
||||
.context-menu-item.destructive {
|
||||
color: #e06c75;
|
||||
}
|
||||
|
||||
.context-menu-item.destructive:hover {
|
||||
background-color: alpha(#e06c75, 0.18);
|
||||
color: #e06c75;
|
||||
}
|
||||
Reference in New Issue
Block a user