dailp-encoding/website/src/mode.css.ts at main · NEU-DSG/dailp-encoding · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import { globalStyle, style } from "@vanilla-extract/css"
import {
  colors,
  hspace,
  mediaQueries,
  thickness,
  vspace,
} from "src/style/constants"
import { marginY, paddingX } from "src/style/utils"
import { fullWidth, hideOnPrint, paddingAround } from "src/style/utils.css"
import { drawerBg } from "./menu.css"
import { morphemeDialog } from "./pages/documents/document.css"
import { collPanelButton, wordPanelButton } from "./panel-layout.css"

export const highlightedLabel = style({
  outlineStyle: "dashed",
  outlineColor: colors.headings,
  outlineWidth: thickness.thick,
})

export const levelGroup = style([
  hideOnPrint,
  marginY(vspace.quarter),
  {
    display: "flex",
    flexFlow: "row wrap",
    justifyContent: "center",
  },
])

export const levelLabel = style([
  paddingX(hspace.char),
  {
    marginRight: hspace.edge,
    cursor: "pointer",
  },
])

export const prefBand = style([
  fullWidth,
  {
    paddingTop: vspace.half,
    paddingBottom: vspace.half,
  },
])

export const prefButtonShell = style({
  textAlign: "right",
  flex: 1,
})

export const prefButton = style([
  collPanelButton,
  { color: colors.secondaryText },
])

export const prefBG = style([
  drawerBg,
  {
    "@media": {
      [mediaQueries.medium]: {
        display: "block",
      },
    },
  },
])

export const prefDrawer = style([
  morphemeDialog,
  //mobileWordPanel,
  paddingAround,
])

export const settingsContainer = style({
  display: "flex",
  flexFlow: "column nowrap",
})

globalStyle(`${settingsContainer} > :last-child`, {
  marginBottom: 0,
})

export const closeButton = style([wordPanelButton.basic])