add mobile

src/main.mobile.css

@@ -0,0 +1,95 @@
+.btn-group-area {
+  display: flex;
+  /* margin-left: 2.5em; */
+  align-items: flex-end;
+}
+.btn-group-area .label {
+  margin: 0 4px;
+}
+
+.btn-group-area .input {
+  padding-left: 8px;
+}
+
+.btn-group-area .year {
+  --kuc-text-input-width: calc(4em + 16px);
+  --kuc-text-input-height: 48px;
+}
+.btn-group-area .year input {
+  text-align: center;
+}
+
+.btn-group-area .month,
+.btn-group-area .date,
+.btn-group-area .classroom {
+  --kuc-combobox-toggle-width: calc(2em + 16px);
+  --kuc-combobox-toggle-height: 48px;
+}
+
+.btn-group-area .classroom {
+  --kuc-combobox-toggle-width: calc(3em + 16px);
+}
+
+.btn-group-area .month input[class^='kuc-combobox'],
+.btn-group-area .date input[class^='kuc-combobox'],
+.btn-group-area .classroom input[class^='kuc-combobox'] {
+  text-align: center;
+  padding-right: 8px;
+}
+.btn-group-area .month input + div[class$="icon"],
+.btn-group-area .date input + div[class$="icon"],
+.btn-group-area .classroom input + div[class$="icon"] {
+  display: none;
+}
+
+.action-btn {
+  margin: 0 8px;
+}
+
+.customized-record-header-space {
+  padding-top: 16px;
+  padding-left: 8px;
+}
+.customized-record-header-space > .btn-group-area {
+  padding: 0;
+  margin: 0;
+}
+.kintone-app-headermenu-space {
+  height: auto;
+  display: inline-flex;
+}
+
+#user-js-header-clocking-btn-area {
+  margin: 4px 0;
+  text-align: center;
+}
+
+#user-js-header-clocking-btn-area > .action-btn {
+  --kuc-button-width: 6em
+}
+
+#user-js-header-clocking-btn-area > .action-btn:first-child {
+  margin-right: 1em;
+}
+
+#user-js-clock-in-btn-area > .action-btn,
+#user-js-clock-out-btn-area > .action-btn {
+  --kuc-mobile-button-height: 35px;
+  margin: .5em 12px;
+}
+
+.kuc--has-spinner {
+  position: relative;
+}
+div[class^='kuc-spinner'][class$='__spinner'] {
+  margin-top: 89px;
+  height: calc(100% - 89px);
+  position: absolute;
+  --kuc-spinner-text-color: #3498db;
+  --kuc-spinner-loader-color: #3498db;
+}
+div[class^='kuc-spinner'][class$='mask'] {
+  top: 89px;
+  position: absolute;
+  background-color: white;
+}