cafe_car 0.1.0 → 0.1.2

data/app/assets/stylesheets/ui/Alert.css

@@ -0,0 +1,25 @@
+.Alert {
+  --color: white;
+  --background: color-mix(in lab, var(--color) 20%, transparent);
+  color: var(--color);
+  background: var(--background);
+  padding: var(--gap);
+  border-radius: var(--radius);
+}
+
+.Alert-success {
+  --color: var(--success);
+}
+
+.Alert-error {
+  --color: var(--error);
+}
+
+.Alert-info,
+.Alert-notice {
+  --color: var(--info);
+}
+
+.Alert-warning {
+  --color: var(--warning);
+}

data/app/assets/stylesheets/ui/Article.css

@@ -0,0 +1,11 @@
+.Article_Title {
+  margin-bottom: 0;
+}
+
+.Article_Author {
+  margin-top: 0;
+}
+
+.Article + .Article {
+  margin-top: 3em;
+}

data/app/assets/stylesheets/ui/Button.css

@@ -0,0 +1,42 @@
+.Button {
+  --background: var(--button);
+  --color: var(--color);
+  --darken: rgb(0 0 0 / 0.2);
+  --lighten: rgb(255 255 255 / 0.2);
+  background: var(--background);
+  color: var(--color);
+  border-radius: var(--control-radius);
+  padding: var(--half-gap);
+  box-shadow: inset var(--darken) 0 -1px 0 1px;
+  border: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  user-select: none;
+}
+
+.Button:where(:not(.Button-current)):hover {
+  cursor: pointer;
+  text-decoration: none;
+  box-shadow: inset var(--darken) 0 -2px 0 1px;
+  filter: brightness(1.05);
+  z-index: 1;
+}
+
+.Button:active,
+.Button-current {
+  text-decoration: none;
+  filter: brightness(0.95);
+  border-bottom-width: 1px;
+  box-shadow: inset var(--darken) 0 1px;
+}
+
+.Button-primary {
+  --background: var(--primary);
+  --color: white;
+}
+
+.Button-danger {
+  --background: var(--danger);
+  --color: white;
+}

data/app/assets/stylesheets/ui/Card.css

@@ -0,0 +1,74 @@
+.Card {
+  container: Card;
+  box-shadow: var(--box-shadow);
+  border-radius: var(--radius);
+  background: var(--card);
+}
+
+.Card_Image {
+  display: block;
+  aspect-ratio: 5/4;
+  object-position: center;
+  object-fit: cover;
+  overflow: hidden;
+  width: 100%;
+  border-top-left-radius: var(--radius);
+  border-top-right-radius: var(--radius);
+  /* &::before {
+    display: block;
+    content: '';
+    margin-top: 30%;
+  } */
+}
+
+.Card_Head,
+.Card_Foot {
+  display: flex;
+  gap: var(--gap);
+  align-items: baseline;
+}
+
+.Card_Title {
+  flex-grow: 1;
+  margin: 0;
+}
+
+.Card_Head,
+.Card_Foot,
+.Card_Section {
+  padding: var(--gap);
+}
+
+.Card_Section {
+  display: grid;
+  gap: var(--gap);
+}
+
+:is(.Card_Head, .Card_Section, .Card_Foot) {
+  & + &,
+  & + form > &,
+  form > & + & {
+    border-top: 1px solid var(--border);
+  }
+}
+
+.Card:not(:has(.Card_Head, .Card_Foot, .Card_Section)) {
+  padding: var(--gap);
+  display: grid;
+  gap: var(--gap);
+}
+
+.Card-sticky {
+  position: sticky;
+  top: var(--gap);
+}
+
+.Card-block {
+  display: block;
+}
+
+@media (prefers-color-scheme: dark) {
+  .Card {
+    border: 1px solid var(--border);
+  }
+}

data/app/assets/stylesheets/ui/Chat.css

@@ -0,0 +1,33 @@
+.Chat {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap);
+  padding: var(--gap);
+}
+
+.Chat_Message {
+  padding: var(--gap);
+  border-radius: var(--radius);
+  box-shadow: var(--box-shadow);
+  max-width: 80%;
+
+}
+
+.Chat_Message-local,
+.Chat_Message-right {
+  align-self: end;
+}
+
+.Chat_Message-remote,
+.Chat_Message-left {
+  align-self: start;
+}
+
+.Chat_Message-local {
+  background-color: var(--blue);
+  color: var(--white);
+}
+
+.Chat_Message-remote {
+  background-color: var(--gray);
+}

data/app/assets/stylesheets/ui/Close.css

@@ -0,0 +1,11 @@
+.Close {
+  cursor: pointer;
+  line-height: 1;
+  opacity: 0.3;
+}
+
+.Close:hover {
+  opacity: 0.8;
+  text-decoration: none;
+  alignment-baseline: middle;
+}

data/app/assets/stylesheets/ui/Code.css

@@ -0,0 +1,4 @@
+.Code {
+  font-family: var(--monospace, monospace), monospace;
+  white-space: pre-wrap;
+}

data/app/assets/stylesheets/ui/Controls.css

@@ -0,0 +1,16 @@
+@charset "utf-8";
+
+.Controls {
+  display: inline-flex;
+}
+
+.Controls_Link + .Controls_Link::before {
+  display: inline;
+  content: "·";
+  padding: 0 0.3em;
+  opacity: .3;
+}
+
+.Controls_Link a {
+  color: var(--link);
+}

data/app/assets/stylesheets/ui/Error.css

@@ -0,0 +1,3 @@
+.Error {
+  color: var(--error);
+}

data/app/assets/stylesheets/ui/Example.css

@@ -0,0 +1,45 @@
+.Example {
+  position: relative;
+  display: grid;
+  grid: auto 1fr / auto auto;
+  border-bottom: 1px solid var(--border);
+  clip-path: rect(0 auto auto 0);
+  padding-bottom: 5vh;
+  color-scheme: dark;
+}
+
+.Example_Head {
+  position: sticky;
+  grid-column: span 2;
+  top: 0;
+  z-index: 1;
+  display: flex;
+}
+
+.Example_Title {
+  color: inherit;
+  background: var(--background);
+  padding: .2em .5em;
+  border-radius: var(--radius);
+  margin: 3px;
+}
+
+.Example_Body {
+  align-self: center;
+  grid-column: 1;
+  justify-self: center;
+  position: relative;
+  border: 1px dashed var(--border);
+  padding: var(--gap);
+  display: grid;
+  gap: var(--gap);
+}
+
+.Example_Source {
+  grid-column: 2;
+  align-self: center;
+  /*justify-self: center;*/
+  position: relative;
+  padding: var(--gap);
+  overflow: auto;
+}

data/app/assets/stylesheets/ui/Field.css

@@ -0,0 +1,31 @@
+.Field {
+  display: grid;
+  grid: auto / auto 1fr;
+  gap: .1em .5em;
+  align-items: baseline;
+  flex-grow: 1;
+}
+
+.Field > :not(.Field_Label, .Field_Error) {
+  grid-column: span 2;
+}
+
+.Field_Label {
+  font-weight: bold;
+  line-height: 1.5;
+}
+
+.Field_Error {
+  grid-column: 2;
+  color: var(--error);
+}
+
+.Field_Error ~ .Input:not(:focus),
+.Field_Error ~ * .Input:not(:focus) {
+  background: var(--invalid);
+  border-color: var(--red);
+}
+
+.Field_Hint {
+  color: var(--dim);
+}

data/app/assets/stylesheets/ui/Grid.css

@@ -0,0 +1,6 @@
+.Grid {
+  container: Grid / inline-size;
+  display: grid;
+  gap: var(--gap);
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+}

data/app/assets/stylesheets/ui/Group.css

@@ -0,0 +1,16 @@
+.Group {
+  display: flex;
+
+  > * {
+    & + * {
+      border-left: none;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    &:has(+ *) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+}

data/app/assets/stylesheets/ui/Icon.css

@@ -0,0 +1,27 @@
+@charset "utf-8";
+
+.Icon {
+  vertical-align: text-bottom;
+  display: inline-flex;
+  gap: var(--half-gap);
+  font-style: inherit;
+
+  &::before {
+    display: block;
+    content: "";
+    height: 1.5em;
+    width: 1.5em;
+  }
+}
+
+.Icon-before {
+  margin-right: 0.5em;
+}
+
+.Icon-after {
+  margin-left: 0.5em;
+}
+
+.Icon-dim {
+  opacity: 0.5;
+}

data/app/assets/stylesheets/ui/Image.css

@@ -0,0 +1,14 @@
+.Image {
+  max-width: 100%;
+}
+
+.Image-icon {
+  height: 1em;
+  width: 1em;
+  max-width: none;
+  display: inline-block;
+  object-fit: contain;
+  vertical-align: middle;
+  border-radius: 99px;
+  border: 1px solid var(--border);
+}

data/app/assets/stylesheets/ui/InfoCircle.css

@@ -0,0 +1,11 @@
+@charset "utf-8";
+
+.InfoCircle {
+  display: inline-block;
+  cursor: help;
+}
+
+.InfoCircle::after {
+  display: inline;
+  content: " ⓘ";
+}

data/app/assets/stylesheets/ui/Input.css

@@ -0,0 +1,36 @@
+.Input,
+input,
+textarea,
+select {
+  background: var(--input);
+  border: 1px solid var(--border);
+  max-width: 100%;
+  border-radius: var(--control-radius);
+  padding: 6px;
+  box-shadow: rgba(34, 32, 29, 0.05) 0px 1px 2px;
+}
+
+input,
+textarea,
+select {
+  color: inherit;
+  font: inherit;
+}
+
+textarea {
+  field-sizing: content;
+  resize: none;
+}
+
+select {
+  box-shadow: rgba(34, 32, 29, 0.05) 0px 1px 2px;
+
+  &::after {
+    content: "hi";
+  }
+}
+
+::placeholder {
+  color: inherit;
+  opacity: .3;
+}

data/app/assets/stylesheets/ui/Layout.css

@@ -0,0 +1,100 @@
+:root {
+  --sidebar-width: 250px;
+}
+
+.Layout {
+  /* display: flex; */
+  /* align-items: stretch; */
+  flex-grow: 1;
+}
+
+.Layout_Sidebar {
+  --indent: 0.7rem;
+
+  width: var(--sidebar-width);
+  /* position: sticky; */
+  position: fixed;
+  inset: 0;
+
+  overflow: auto;
+  max-height: 100dvh;
+  height: 100%;
+
+  display: flex;
+  flex-flow: column;
+  flex-shrink: 0;
+  align-self: start;
+
+  padding: var(--gap);
+  white-space: nowrap;
+  transition:
+    margin var(--duration),
+    width var(--duration);
+}
+
+.Layout_Main {
+  transition: transform var(--duration);
+  margin-left: var(--sidebar-width);
+  display: flex;
+  flex-flow: column;
+  align-items: stretch;
+  flex-grow: 1;
+  padding: var(--gap);
+  position: relative;
+  z-index: 1;
+}
+
+.Layout_Menu {
+  display: none;
+  appearance: none;
+  border-radius: 99px;
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  cursor: pointer;
+  border-color: transparent;
+  background: none;
+
+  &:hover {
+    border-color: var(--border);
+    box-shadow: var(--box-shadow);
+  }
+
+  &:checked {
+    border-color: var(--border);
+    box-shadow: inset var(--box-shadow);
+  }
+
+  &::before {
+    content: "𑁔";
+    display: block;
+    font-size: 30px;
+    line-height: 1;
+    margin-top: -1px;
+  }
+}
+
+@media (width < 720px) {
+  .Layout_Main {
+    margin-left: 0;
+    transform: translateX(var(--sidebar-width));
+  }
+
+  .Layout_Sidebar {
+    margin-left: calc(-1 * var(--sidebar-width));
+  }
+
+  body:has(.Layout_Menu:checked) {
+    overflow-x: hidden;
+  }
+
+  body:not(:has(.Layout_Menu:checked)) {
+    .Layout_Main {
+      transform: none;
+    }
+  }
+
+  .Layout:has(.Layout_Sidebar) .Layout_Menu {
+    display: inline-block;
+  }
+}

data/app/assets/stylesheets/ui/Menu.css

@@ -0,0 +1,38 @@
+.Menu {
+  container: Menu;
+  box-shadow: var(--box-shadow);
+  border-radius: var(--menu-radius);
+  background: var(--menu);
+}
+
+.Menu_Item {
+  display: flex;
+  gap: var(--half-gap);
+  padding: var(--half-gap) var(--gap);
+}
+
+.Menu_Item:any-link {
+  text-decoration: none;
+  color: inherit;
+
+  &:hover {
+    color: var(--white);
+
+    &::before {
+      content: '';
+      display: block;
+      border-radius: var(--menu-radius);
+      position: absolute;
+      inset: 4px;
+      background: var(--link);
+      z-index: -1;
+    }
+  }
+}
+
+
+.Menu_Item {
+  & + & {
+    border-top: 1px solid var(--border);
+  }
+}

data/app/assets/stylesheets/ui/Modal.css

@@ -0,0 +1,26 @@
+.Modal {
+  z-index: 9;
+  inset: 0;
+  display: grid;
+  grid-template-columns: fit-content(var(--modal-width));
+  background: var(--backdrop);
+  overscroll-behavior: contain;
+  align-items: center;
+  justify-content: center;
+  overflow: auto;
+  backdrop-filter: blur(8px);
+  padding: var(--gap);
+  animation: fade-in var(--duration);
+
+  & > * {
+    min-width: 250px;
+  }
+}
+
+.Modal-fixed {
+  position: fixed;
+}
+
+body:has(> .Modal-fixed) {
+  overflow: hidden;
+}

data/app/assets/stylesheets/ui/Navigation.css

@@ -0,0 +1,37 @@
+.Navigation {
+  --indent: 0.7em;
+  display: flex;
+  flex-flow: column;
+  flex-grow: 1;
+  align-content: start;
+}
+
+.Navigation_Link {
+  padding: 0.7em;
+  position: relative;
+  color: inherit;
+  display: flex;
+  align-items: center;
+}
+
+.Navigation_Link-bottom {
+  margin-top: auto;
+}
+
+.Navigation_Link:is(a):hover,
+.Navigation_Link-current,
+.Navigation_Link-ancestor,
+.Navigation_Link.current {
+  text-decoration: none;
+
+  &::after {
+    content: "";
+    display: block;
+    position: absolute;
+    inset: 3px 0;
+    border-radius: var(--control-radius);
+    box-shadow: inset rgb(0 0 0 / 0.2) 0 -2px;
+    background: var(--hover);
+    z-index: -1;
+  }
+}