css.css.map

{"version":3,"sources":["src/css.css"],"names":[],"mappings":"AAEA,I,CACE,Y,CACA,qB,CACA,sB,CACA,kB,CAGF,O,CACE,iB,CACA,O,CACA,Q,CACA,mB,CACA,S,CACA,gB,CACA,e,CAkBF,W,CAdA,U,CAeE,Y,CAGA,S,CACA,Q,CAnBF,U,CAEE,mC,CACA,Q,CACA,e,CAmFF,oB,CA7EA,iB,CACE,6B,CAGF,W,CAEE,8C,CACA,gC,CAGA,iB,CACA,c,CACA,iB,CACA,uC,CACA,oB,CAGF,a,CACE,iB,CACA,oB,CACA,mC,CACA,oC,CACA,uC,CACA,a,CACA,gB,CACA,c,CACA,iB,CACA,iB,CACA,yB,CAGF,oB,CACE,uB,CACA,oB,CAGF,2C,CACE,qB,CAEF,4C,CACE,qB,CAEF,0D,CACE,U,CAEF,mCACE,6C,CACE,uBAGJ,A,oCACE,6C,CACE,qB,CAEF,2D,CACE,YAIJ,qB,CACE,U,CACA,oB,CACA,yC,CACA,0C,CACA,O,CACA,Q,CACA,iB,CACA,mB,CACA,S,CACA,iB,CACA,8B,CACA,U,CAEF,gBAAgB,wB,CACd,W,CAOF,2B,CAEE,iB,CACA,gC,CACA,kC,CACA,oC,CACA,sC,CAGA,mB,CAEA,kB,CAGF,mC,CAEE,U,CACA,iB,CACA,6B,CACA,qC,CAGA,O,CACA,Q,CAGA,oC,CAGA,mD,CAGA,uB,CACA,sB,CACA,U,CAEA,U,CAEA,4C,CAGA,c,CAGF,G,CACE,W,CAGF,iB,CACE,iB,CACA,S,CACA,Q,CACA,U,CACA,U,CACA,W,CACA,Y,CACA,sB,CACA,kB,CACA,c,CACA,uB,CACA,iB,CACA,e,CACA,S,CACA,yB,CACA,uC,CACA,c,CAGF,c,CAAgB,gB,CACd,yB,CAGsB,uB,CAAxB,sB,CACE,iB,CACA,gB,CACA,a,CACA,iB,CACA,K,CACA,M,CACA,U,CACA,W,CACA,e,CACA,wB,CAIA,kB,CACA,2B,CAGF,uB,CACE,iB,CAKF,+B,CADA,8B,CAEE,oB,CACA,iB,CACA,O,CACA,Q,CACA,6C,CAGF,8B,CACE,Y,CAGF,+B,CACE,Y,CAGF,uB,CACE,uB,CAGF,qB,CACE,iB,CAGF,sB,CACE,kB,CAGF,wC,CAEE,2B,CAEF,yC,CAEE,+B,CAEF,sC,CAEE,yB,CAEF,uC,CAIA,uC,CAFE,4B,CAMF,wC,CAEE,gC,CAGF,uB,CACE,iB,CAIF,oCACE,U,CAEE,gBAIJ,I,CACE,W,CAEF,M,CACE,c,CAGF,S,CACE,W,CAGF,a,CACE,oB,CACA,iB,CACA,W,CACA,Y,CACA,iB,CACA,6B,CACA,iB,CAEF,oBAAoB,c,CAAgB,c,CAClC,yC,CAGF,uB,CACE,c,CACA,iB,CACA,K,CACA,M,CACA,U,CACA,W,CACA,S,CAGF,qB,CACE,Y,CACA,c,CACA,a,CACA,kB,CAGF,oB,CACE,uB,CACA,a,CACA,c,CAGF,yB,CACE,gB","file":"src/css.css","sourcesContent":["/* center the body content horizontally */\r\n/* flow direction is vertical */\r\nbody {\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.hidden {\r\n  position: absolute;\r\n  width: 0;\r\n  height: 0;\r\n  pointer-events: none;\r\n  opacity: 0;\r\n  user-select: none;\r\n  overflow: hidden;\r\n}\r\n\r\n/* show the word list in a grid of width 4 */\r\n#word-list {\r\n  display: grid;\r\n  grid-template-columns: repeat(4, 1fr);\r\n  gap: 1rem;\r\n  list-style: none;\r\n  padding: 0;\r\n  margin: 0;\r\n}\r\n\r\n/* if a word is marked found, highlight it */\r\n#word-list>.found {\r\n  background-color: var(--color);\r\n}\r\n\r\n#jamo-board {\r\n  display: grid;\r\n  grid-template-columns: repeat(var(--width), 1fr);\r\n  gap: calc(var(--gap) * var(--zoom));\r\n  padding: 0;\r\n  margin: 0;\r\n  position: relative;\r\n  aspect-ratio: 1;\r\n  touch-action: none;\r\n  -webkit-tap-highlight-color: transparent;\r\n  contain: layout style;\r\n}\r\n\r\n#jamo-board>i {\r\n  text-align: center;\r\n  display: inline-block;\r\n  width: calc(var(--size) * var(--zoom));\r\n  height: calc(var(--size) * var(--zoom));\r\n  font-size: calc(var(--size) * var(--zoom));\r\n  line-height: 1;\r\n  user-select: none;\r\n  cursor: pointer;\r\n  font-style: normal;\r\n  position: relative;\r\n  contain: layout size style;\r\n}\r\n\r\n#jamo-board>i::after {\r\n  content: attr(data-jamo);\r\n  display: inline-block;\r\n}\r\n\r\n:root[data-mode=\"dark\"] #jamo-board>i::before {\r\n  background-color: #fff;\r\n}\r\n:root[data-mode=\"light\"] #jamo-board>i::before {\r\n  background-color: #000;\r\n}\r\n:root[data-mode=\"light\"] #jamo-board>.completion-bar::before {\r\n  opacity: 0.6;\r\n}\r\n@media (prefers-color-scheme: dark) {\r\n  :root[data-mode=\"system\"] #jamo-board>i::before {\r\n    background-color: #fff;\r\n  }\r\n}\r\n@media (prefers-color-scheme: light) {\r\n  :root[data-mode=\"system\"] #jamo-board>i::before {\r\n    background-color: #000;\r\n  }\r\n  :root[data-mode=\"system\"] #jamo-board>.completion-bar::before {\r\n    opacity: 0.6;\r\n  }\r\n}\r\n\r\n#jamo-board>i::before {\r\n  content: '';\r\n  display: inline-block;\r\n  width: calc(var(--size) * 1.414 * var(--zoom));\r\n  height: calc(var(--size) * 1.414 * var(--zoom));\r\n  top: 50%;\r\n  left: 50%;\r\n  border-radius: 50%;\r\n  pointer-events: none;\r\n  opacity: 0;\r\n  position: absolute;\r\n  transform: translate(-50%, -50%);\r\n  z-index: -1;\r\n}\r\n#jamo-board:not(:active)>i:hover::before {\r\n  opacity: 0.15;\r\n}\r\n\r\n#jamo-board>.written {\r\n  background-color: var(--color);\r\n}\r\n\r\n#jamo-board>.completion-bar {\r\n  /* remove from grid flow */\r\n  position: absolute;\r\n  top: calc(var(--top) * var(--zoom));\r\n  left: calc(var(--left) * var(--zoom));\r\n  width: calc(var(--width) * var(--zoom));\r\n  height: calc(var(--height) * var(--zoom));\r\n\r\n  /* outline: 1px solid red; */\r\n  pointer-events: none;\r\n\r\n  contain: style size;\r\n}\r\n\r\n#jamo-board>.completion-bar::before {\r\n\r\n  content: '';\r\n  position: absolute;\r\n  background-color: var(--color); /* Line color */\r\n  height: calc(var(--thick) * var(--zoom)); /* Line thickness */\r\n\r\n  /* Calculate the bottom-left point of the line */\r\n  top: 50%;\r\n  left: 50%;\r\n\r\n  /* Length of the line using hypot(), assuming --delta-x and --delta-y are defined */\r\n  width: calc(var(--hypot) * var(--zoom));\r\n\r\n  /* Rotate line using atan2(), converting result from radians to degrees */\r\n  transform: translate(-50%, -50%) rotate(var(--angle));\r\n\r\n  /* Ensure the rotation point is the start of the line */\r\n  transform-origin: center;\r\n  mix-blend-mode: overlay;\r\n  opacity: 0.5;\r\n\r\n  z-index: -2;\r\n\r\n  border-radius: calc(var(--thick) * var(--zoom));\r\n\r\n  /* filter: url(#displacementFilter); */\r\n  contain: strict;\r\n}\r\n\r\nnav {\r\n  height: 2rem;\r\n}\r\n\r\n#dark-mode-toggle {\r\n  position: absolute;\r\n  z-index: 1;\r\n  top: 1rem;\r\n  right: 1rem;\r\n  width: 2rem;\r\n  height: 2rem;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  cursor: pointer;\r\n  transform: rotate(45deg);\r\n  border-radius: 50%;\r\n  overflow: hidden;\r\n  padding: 0;\r\n  view-transition-name: none;\r\n  -webkit-tap-highlight-color: transparent;\r\n  contain: strict;\r\n}\r\n\r\n.no-transition, .no-transition>* {\r\n  transition: none !important;\r\n}\r\n\r\n#dark-mode-toggle>#sun, #dark-mode-toggle>#moon {\r\n  position: absolute;\r\n  font-size: 1.5rem;\r\n  line-height: 1;\r\n  text-align: center;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  overflow: hidden;\r\n  transition: clip-path 0.5s;\r\n}\r\n\r\n#dark-mode-toggle>#sun {\r\n  color-scheme: light;\r\n  background-color: buttonface;\r\n}\r\n\r\n#dark-mode-toggle>#moon {\r\n  color-scheme: dark;\r\n  background-color: buttonface;\r\n}\r\n\r\n#dark-mode-toggle>#sun::before,\r\n#dark-mode-toggle>#moon::before {\r\n  display: inline-block;\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%) rotate(-45deg);\r\n}\r\n\r\n#dark-mode-toggle>#sun::before {\r\n  content: '☀️';\r\n}\r\n\r\n#dark-mode-toggle>#moon::before {\r\n  content: '🌙';\r\n}\r\n\r\n:root[data-mode=\"system\"] {\r\n  color-scheme: dark light;\r\n}\r\n\r\n:root[data-mode=\"dark\"] {\r\n  color-scheme: dark;\r\n}\r\n\r\n:root[data-mode=\"light\"] {\r\n  color-scheme: light;\r\n}\r\n\r\n#dark-mode-toggle[data-mode=\"system\"]>#sun {\r\n  /* left half of square*/\r\n  clip-path: rect(0 50% 100% 0);\r\n}\r\n#dark-mode-toggle[data-mode=\"system\"]>#moon {\r\n  /* right half of square */\r\n  clip-path: rect(0 100% 100% 50%);\r\n}\r\n#dark-mode-toggle[data-mode=\"dark\"]>#sun {\r\n  /* hidden to left side */\r\n  clip-path: rect(0 0 100% 0);\r\n}\r\n#dark-mode-toggle[data-mode=\"dark\"]>#moon {\r\n  /* fully visible */\r\n  clip-path: rect(0 100% 100% 0);\r\n}\r\n#dark-mode-toggle[data-mode=\"light\"]>#sun {\r\n  /* fully visible*/\r\n  clip-path: rect(0 100% 100% 0);\r\n}\r\n#dark-mode-toggle[data-mode=\"light\"]>#moon {\r\n  /* hidden to the right side */\r\n  clip-path: rect(0 100% 100% 100%);\r\n}\r\n\r\n#currentJamoCompletions {\r\n  position: absolute;\r\n}\r\n\r\n/* side-to-side layout for desktop */\r\n@media screen and (min-width: 720px) {\r\n  #word-list {\r\n    /* grid-template-columns: repeat(2, 1fr); */\r\n    animation: none;\r\n  }\r\n}\r\n\r\nmain {\r\n  font-size: 0\r\n}\r\nmain>* {\r\n  font-size: 1rem;\r\n}\r\n\r\n.noresize {\r\n  resize: none;\r\n}\r\n\r\n#file-wrapper {\r\n  display: inline-block;\r\n  position: relative;\r\n  width: 150px; /* Adjust as needed */\r\n  height: 100px; /* Adjust as needed */\r\n  text-align: center;\r\n  border: 1px solid buttonborder;\r\n  border-radius: 2px;\r\n}\r\n#file-wrapper:where(:focus-visible, :focus-within) {\r\n  outline: -webkit-focus-ring-color auto 1px;\r\n}\r\n\r\n#select-game-state-file {\r\n  cursor: pointer;\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  opacity: 0;\r\n}\r\n\r\n#file-wrapper::before {\r\n  content: '📁'; /* Folder emoji */\r\n  font-size: 50px; /* Adjust emoji size */\r\n  display: block;\r\n  margin-bottom: 10px; /* Space between emoji and text */\r\n}\r\n\r\n#file-wrapper::after {\r\n  content: attr(data-text); /* Text below emoji */\r\n  display: block;\r\n  font-size: 14px; /* Adjust text size */\r\n}\r\n\r\n#settings-panel::backdrop {\r\n  background: #0004;\r\n}\r\n"]}