/* OfficeCooa － 画面の見た目 * * 【決め事】 * - 色は下の変数だけ使う。テンプレートに直接 #色 を書かない。 * 差し色（--accent）は利用者ごとに base.html で上書きする（テーマ色）。 * - 余白は 4 の倍数。角丸は --r（10px）と --r-sm（6px）だけ。 * - 線は薄く、面は白。区切りは余白と影で作る。 * - マウス操作が基本なので、押せるものは必ず hover で色が変わる。 */ :root { --ink: #1b2430; --ink-2: #556070; --ink-3: #8b95a5; --bg: #f3f5f9; --panel: #ffffff; --panel-2: #f7f8fb; --line: #e6e9ef; --line-2: #d0d6e0; --accent: #4f46e5; --accent-d: #4338ca; --accent-bg: #eef2ff; --danger: #c2410c; --danger-bg: #fff1ec; /* ファイル形式の札の色（ファイル管理のアイコン表示） */ --ft-pdf: #d93025; --ft-xls: #1e8e3e; --ft-doc: #1a5fd0; --ft-ppt: #d9661f; --ft-img: #8e44ad; --ft-video: #0b8a8a; --ft-zip: #7a5c2e; --ft-text: #5f6b7a; --ft-mail: #b8860b; --ft-other: #6b7280; /* フォルダの色（db.FOLDER_COLORS のキー。none＝標準） */ --fc-none: #e9a92c; --fc-blue: #3b82f6; --fc-sky: #0ea5e9; --fc-teal: #14b8a6; --fc-green: #22c55e; --fc-lime: #84cc16; --fc-yellow: #eab308; --fc-orange: #f97316; --fc-red: #ef4444; --fc-pink: #ec4899; --fc-purple: #8b5cf6; --fc-gray: #64748b; --warn: #92400e; --warn-bg: #fffbeb; --ok: #166534; --ok-bg: #f0fdf4; --info: #1d4ed8; --info-bg: #eff6ff; --sat: #2563eb; --sun: #dc2626; /* 土=青・日=赤（見出しと日付の文字色） */ /* カレンダーの地色（真っ白でまぶしくならないよう淡く色を敷く） */ --cal-head: color-mix(in srgb, var(--accent) 12%, #ffffff); /* 曜日ヘッダー帯 */ --cal-head2: color-mix(in srgb, var(--accent) 5%, #ffffff); --cal-line: color-mix(in srgb, var(--accent) 16%, var(--line)); --cal-cell: #fbfcfe; /* 日付マスのうっすら地色 */ --cal-out: #eef1f6; /* 当月外 */ --sat-bg: #eef4ff; /* 土曜の列（淡い青） */ --sun-bg: #fdf1f1; /* 日曜の列（淡い赤） */ /* 付箋の色（8色） */ --st-yellow: #fff59d; --st-pink: #f8bbd0; --st-blue: #bbdefb; --st-green: #c8e6c9; --st-orange: #ffe0b2; --st-purple: #e1bee7; --st-gray: #e0e0e0; --st-white: #ffffff; --r: 12px; --r-sm: 7px; --sh: 0 1px 2px rgba(20, 30, 50, .05), 0 1px 8px rgba(20, 30, 50, .04); --sh-2: 0 8px 28px rgba(20, 30, 50, .14); --sb-w: 212px; --sb-mini: 64px; --tb-h: 60px; } * { box-sizing: border-box; } html { height: 100%; } body { margin: 0; min-height: 100%; font-family: "Segoe UI", "Yu Gothic UI", "Hiragino Sans", "Meiryo", system-ui, sans-serif; font-size: 14px; line-height: 1.6; color: var(--ink); background: var(--bg); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { margin: 0 0 8px; font-weight: 700; line-height: 1.3; } h2 { font-size: 20px; } h3 { font-size: 15px; } p { margin: 0 0 8px; } small, .small { font-size: 12px; } .muted { color: var(--ink-2); } .err { color: var(--danger); } .req { color: var(--danger); font-size: 11px; margin-left: 4px; } .spacer { flex: 1; } .inline { display: inline; } .pre { white-space: pre-wrap; word-break: break-word; } .mono { font-family: Consolas, "BIZ UDGothic", monospace; } .num { text-align: right; font-variant-numeric: tabular-nums; } code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; font-size: 12px; } [hidden] { display: none !important; } /* ---------------------------------------------------------------- 枠組み */ body.app { display: flex; } .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--sb-w); z-index: 20; background: linear-gradient(180deg, #1c2333 0%, #151b28 100%); color: #cfd6e4; display: flex; flex-direction: column; padding: 12px 10px; transition: width .15s; } .sidebar-mini .sidebar { width: var(--sb-mini); } .brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 16px; color: #fff; } .brand:hover { text-decoration: none; } .logo { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: linear-gradient(135deg, var(--accent), #8b5cf6); color: #fff; font-weight: 800; font-size: 18px; box-shadow: 0 4px 12px rgba(79, 70, 229, .4); } .logo.lg { width: 48px; height: 48px; font-size: 26px; border-radius: 14px; } /* ロゴ画像（文字が濃い灰色なので、暗いメニューでは白い札に載せる） */ .brand-logo { height: 38px; width: auto; background: #fff; border-radius: 8px; padding: 6px 10px; box-sizing: border-box; display: block; } .brand-mark { display: none; width: 36px; height: 36px; background: #fff; border-radius: 8px; padding: 3px; box-sizing: border-box; } .login-logo { height: 60px; width: auto; display: block; margin-bottom: 4px; } .brand-name { font-size: 17px; letter-spacing: .02em; white-space: nowrap; } .brand-name.lg { font-size: 24px; } .brand-name b { color: #a5b4fc; } .nav { display: flex; flex-direction: column; gap: 2px; flex: 1; } .nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-sm); color: #cfd6e4; white-space: nowrap; position: relative; } .nav a:hover { background: rgba(255, 255, 255, .08); text-decoration: none; color: #fff; } .nav a.active { background: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(79, 70, 229, .35); } .nav .ico { font-size: 18px; width: 24px; text-align: center; flex: none; } .nav .badge { margin-left: auto; } .sidebar-mini .nav .lbl, .sidebar-mini .brand-name { display: none; } .sidebar-mini .brand-logo { display: none; } .sidebar-mini .brand-mark { display: block; } .sidebar-mini .brand { justify-content: center; padding-left: 0; padding-right: 0; } .sidebar-mini .nav a { justify-content: center; padding: 10px 0; } .sidebar-mini .nav .badge { position: absolute; right: 6px; top: 4px; margin: 0; } .sb-toggle { background: rgba(255, 255, 255, .06); border: 0; color: #9aa6ba; border-radius: var(--r-sm); padding: 6px; cursor: pointer; } .sb-toggle:hover { background: rgba(255, 255, 255, .12); color: #fff; } .sidebar-mini .sb-toggle { transform: scaleX(-1); } .frame { flex: 1; margin-left: var(--sb-w); min-width: 0; display: flex; flex-direction: column; min-height: 100vh; transition: margin .15s; } .sidebar-mini .frame { margin-left: var(--sb-mini); } /* 管理の画面：左メニューを出さないので本文を左端から */ .no-sidebar .frame, .no-sidebar.sidebar-mini .frame { margin-left: 0; } .topbar { height: var(--tb-h); display: flex; align-items: center; gap: 12px; padding: 0 24px; background: rgba(255, 255, 255, .85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 15; } .tb-left { flex: 1; min-width: 0; } .tb-right { display: flex; align-items: center; gap: 8px; } .page-title { font-size: 18px; margin: 0; } main { padding: 20px 24px 40px; flex: 1; } main.wide { padding: 16px 20px 40px; } .bare-main { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(135deg, #eef2ff, #f3f5f9 50%, #e0f2fe); } .badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; } .bell { position: relative; font-size: 18px; padding: 6px 8px; border-radius: var(--r-sm); } .bell:hover { background: var(--panel-2); text-decoration: none; } .bell .dot { position: absolute; top: 0; right: 0; background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; border-radius: 9px; padding: 1px 5px; } .avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--accent-bg), #e0e7ff); color: var(--accent-d); font-weight: 700; font-size: 14px; } .avatar.sm { width: 26px; height: 26px; font-size: 12px; } .avatar.lg { width: 56px; height: 56px; font-size: 22px; } .avatar-btn { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 4px 8px 4px 4px; border-radius: 20px; cursor: pointer; font: inherit; color: var(--ink); } .avatar-btn:hover { background: var(--panel-2); } .me, .quick { position: relative; } .menu { display: none; position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-2); padding: 6px; z-index: 30; } .menu.open { display: block; } .menu a, .menu button { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: var(--r-sm); color: var(--ink); background: none; border: 0; font: inherit; cursor: pointer; } .menu a:hover, .menu button:hover { background: var(--accent-bg); text-decoration: none; } .menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; } /* ---------------------------------------------------------------- 部品 */ .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh); padding: 16px 18px; margin-bottom: 16px; } .card.inner { background: var(--panel-2); box-shadow: none; } .notice { padding: 10px 14px; border-radius: var(--r-sm); margin-bottom: 12px; border: 1px solid; } .notice.ok { background: var(--ok-bg); color: var(--ok); border-color: #bbf7d0; } .notice.err { background: var(--danger-bg); color: var(--danger); border-color: #fed7aa; } .notice.warn { background: var(--warn-bg); color: var(--warn); border-color: #fde68a; } .notice.small { padding: 6px 8px; font-size: 12px; } .empty { color: var(--ink-3); text-align: center; padding: 16px; } .empty.tall { padding: 60px 16px; } .empty .big { font-size: 48px; margin-bottom: 8px; } .btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); font: inherit; cursor: pointer; white-space: nowrap; line-height: 1.4; transition: background .1s, box-shadow .1s; } .btn:hover { background: var(--panel-2); text-decoration: none; border-color: var(--ink-3); } .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(79, 70, 229, .3); } .btn.primary:hover { background: var(--accent-d); } .btn.danger { color: var(--danger); } .btn.danger:hover { background: var(--danger-bg); border-color: var(--danger); } .btn.sm { padding: 4px 10px; font-size: 12px; } .btn.lg { padding: 10px 22px; font-size: 15px; } .btn.wide { width: 100%; justify-content: center; } .btn.icon { padding: 7px 11px; font-size: 16px; line-height: 1; } .btn:disabled { opacity: .5; cursor: default; } .link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; } .link:hover { text-decoration: underline; } .seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 3px; gap: 2px; flex-wrap: wrap; } .seg a { padding: 5px 12px; border-radius: 5px; color: var(--ink-2); white-space: nowrap; } .seg a:hover { background: var(--panel); text-decoration: none; color: var(--ink); } .seg a.on { background: var(--panel); color: var(--accent-d); font-weight: 700; box-shadow: var(--sh); } .seg.small a { padding: 3px 9px; font-size: 12px; } .seg.tabs { margin-bottom: 16px; } .seg b { color: #ef4444; } .pill { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.6; } .pill.gray { background: #eef0f4; color: var(--ink-2); } .pill.blue { background: var(--info-bg); color: var(--info); } .pill.green { background: var(--ok-bg); color: var(--ok); } .pill.red { background: var(--danger-bg); color: var(--danger); } .pill.orange { background: #fff7ed; color: #c2410c; } .chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; } .chip:hover { background: var(--accent-bg); border-color: var(--accent); text-decoration: none; } .chip.on { background: var(--accent); border-color: var(--accent); color: #fff; } .chip.static { cursor: default; background: var(--panel-2); } .chip.static:hover { border-color: var(--line-2); background: var(--panel-2); } .chip input { display: none; } .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chips.tags { margin: 8px 0; } .group-chips { margin: 6px 0 4px; } .group-chips .chip.muted { color: var(--ink-3); border-style: dashed; } .group-chips .chip small { font-size: 11px; margin-left: 2px; } .user-filter label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); } .card.narrow { max-width: 520px; } .toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .toolbar input[type=search] { min-width: 240px; } .split-tools { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .split-tools h3 { margin: 0; } .search { margin: 8px 0; } .search input { width: 100%; } .split-foot { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } input[type=text], input[type=search], input[type=email], input[type=tel], input[type=url], input[type=password], input[type=number], input[type=date], input[type=time], input[type=datetime-local], select, textarea { font: inherit; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); max-width: 100%; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); } input.lg { font-size: 16px; padding: 9px 12px; } textarea { width: 100%; resize: vertical; } input[type=color] { width: 44px; height: 32px; padding: 2px; border: 1px solid var(--line-2); border-radius: 5px; background: var(--panel); } label.field, .field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-weight: 600; font-size: 13px; color: var(--ink-2); } .field > input, .field > select, .field > textarea { font-weight: 400; color: var(--ink); width: 100%; } .field-label { font-weight: 600; font-size: 13px; color: var(--ink-2); } .field small { font-weight: 400; } .field-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; } .field-row > .field { flex: 1 1 160px; } .field-row > .field.sm { flex: 0 1 120px; } .field-row > .field.grow { flex: 3 1 240px; } .field-row.top { align-items: flex-start; } .chk { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 400; margin-bottom: 8px; color: var(--ink); } .chk input { width: 16px; height: 16px; accent-color: var(--accent); } .form-grid { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 16px; align-items: start; } .col-main { min-width: 0; } .form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); flex-wrap: wrap; } .form-actions.left { justify-content: flex-start; } .inline-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 6px 0; } .quick-times { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: -4px 0 12px; } .table { width: 100%; border-collapse: collapse; } .table th { text-align: left; font-size: 12px; color: var(--ink-3); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--panel-2); } .table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; } .table tr:hover td { background: var(--panel-2); } .table td.actions { white-space: nowrap; text-align: right; } .table tr.muted td { color: var(--ink-3); } .dl { display: grid; grid-template-columns: 90px 1fr; gap: 8px 14px; margin: 12px 0; } .dl dt { color: var(--ink-3); font-size: 12.5px; font-weight: 600; padding-top: 3px; } .dl dd { margin: 0; } .dl.two { grid-template-columns: 90px 1fr; } .crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; color: var(--ink-3); } .att-list { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-wrap: wrap; gap: 6px 14px; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } .stat { background: var(--panel-2); border-radius: var(--r); padding: 14px; } .stat b { display: block; font-size: 26px; color: var(--accent-d); } a.stat-link { text-decoration: none; color: inherit; border: 1px solid transparent; } a.stat-link:hover { border-color: var(--accent); background: var(--accent-bg); } .stat span { color: var(--ink-2); font-size: 12px; } .dropzone { border: 2px dashed var(--line-2); border-radius: var(--r-sm); padding: 10px 12px; margin: 8px 0; background: var(--panel-2); transition: border-color .1s, background .1s; } .dropzone.over { border-color: var(--accent); background: var(--accent-bg); } .dropzone input { display: none; } .dz-label { cursor: pointer; color: var(--ink-2); display: block; } .dz-label:hover { color: var(--accent); } .dz-list { list-style: none; padding: 0; margin: 4px 0 0; font-size: 13px; } .dz-list li { color: var(--ink); } .modal { position: fixed; inset: 0; background: rgba(20, 30, 50, .45); z-index: 50; display: grid; place-items: center; } .modal-box { background: var(--panel); border-radius: var(--r); box-shadow: var(--sh-2); padding: 20px 22px; width: min(560px, 92vw); } .modal-box.wide { width: min(760px, 94vw); max-height: 90vh; overflow: auto; } /* ---- 管理→壁紙 */ .wall-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 8px; margin-top: 10px; } .wall-admin-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 8px; background: var(--panel); } .wall-admin-row.is-hidden { opacity: .55; } .wall-admin-thumb { width: 160px; height: 42px; object-fit: cover; border-radius: 4px; flex: none; } .wall-admin-name { flex: 1; min-width: 0; } /* ---- 管理→ホーム画面：標準の部品（ドラッグで並び替え） */ .home-def { list-style: none; margin: 0 0 8px; padding: 0; max-width: 480px; } .home-def-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); margin-bottom: 4px; cursor: grab; } .home-def-row.dragging { opacity: .5; } .home-def-row .grip { color: var(--ink-3); cursor: grab; } .home-def-row .chk { margin: 0; } /* ---- 予定の登録：15分ずつ動かすボタン・来客の項目・宛先のピル */ .time-step { display: inline-flex; gap: 4px; align-items: center; } .time-step input.short { width: 80px; } /* 予定の時刻の一覧（schedule_form.html）。入っている時刻の位置までスクロールして開く */ .tp-wrap { display: inline-block; } .tp-list { position: absolute; z-index: 60; max-height: 240px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line-2); border-radius: 6px; box-shadow: 0 6px 20px rgba(0, 0, 0, .15); padding: 2px 0; } .tp-item { padding: 4px 14px; font-size: 13.5px; cursor: pointer; font-variant-numeric: tabular-nums; } .tp-item:hover { background: var(--panel-2); } .tp-item.on { background: var(--accent-bg); color: var(--accent-d); font-weight: 700; } .visitor-fields { border: 1px dashed var(--line-2); border-radius: var(--r-sm); padding: 8px 12px 10px; margin: 6px 0 10px; } .visitor-fields legend { font-size: 13px; color: var(--ink-2); padding: 0 4px; } .pill.dest-president { background: var(--danger); color: #fff; } .pill.dest-vice { background: var(--accent); color: #fff; } /* ---- 予定の5分前ポップアップ（app.js）。画面の上の中央に積む */ .remind-box { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 70; display: flex; flex-direction: column; gap: 8px; width: min(440px, 94vw); } .remind-pop { background: var(--panel); border: 2px solid var(--ev, var(--accent)); border-left-width: 8px; border-radius: var(--r); box-shadow: var(--sh-2); padding: 10px 14px; animation: remind-in .25s ease-out; } @keyframes remind-in { from { transform: translateY(-16px); opacity: 0; } to { transform: none; opacity: 1; } } .remind-head { font-weight: 700; color: var(--accent-d); display: flex; gap: 8px; align-items: baseline; } .remind-head small { color: var(--ink-2); font-weight: 500; } .remind-title { font-size: 16px; font-weight: 700; margin: 4px 0 2px; } .remind-when { color: var(--ink-2); font-size: 13px; } .remind-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; } .remind-pop.msg-pop { border-color: var(--accent); } .remind-pop.msg-pop .remind-when { white-space: pre-wrap; } /* ---- 付箋（トップ）：main の中に絶対配置。色は .c-<色>、サインは頭の記号 */ main.home, main:has(> #stickies) { position: relative; } #stickies { position: absolute; inset: 0; pointer-events: none; z-index: 5; } .sticky { position: absolute; pointer-events: auto; display: flex; flex-direction: column; border-radius: 4px; box-shadow: 2px 4px 14px rgba(20, 30, 50, .22); background: var(--st-yellow); color: #333; min-width: 120px; min-height: 80px; font-family: inherit; border: 2px solid rgba(0, 0, 0, .35); box-sizing: border-box; } /* 枠囲み（色に関わらず濃い線） */ .sticky.moving { box-shadow: 6px 10px 24px rgba(20, 30, 50, .3); opacity: .95; } .sticky.c-yellow { background: var(--st-yellow); } .sticky.c-pink { background: var(--st-pink); } .sticky.c-blue { background: var(--st-blue); } .sticky.c-green { background: var(--st-green); } .sticky.c-orange { background: var(--st-orange); } .sticky.c-purple { background: var(--st-purple); } .sticky.c-gray { background: var(--st-gray); } .sticky.c-white { background: var(--st-white); } /* COA号の台紙：薄くしたCOA号を右下に敷く（大きさを変えても幅の 78% で追いかける）。枠は COA の緑 */ .sticky.c-coa { background: #f5fbf6 url(/static/sticky-coa-faded.png) right 4px bottom 4px / 78% auto no-repeat; border-color: #0a9a48; } .sticky.c-coa .sticky-head { background: rgba(10, 154, 72, .14); border-bottom-color: rgba(10, 154, 72, .35); } /* ヤチヨマンの台紙：薄くした「ひらめき」のヤチヨマンを右下に（高さの 75%）。枠は COA の緑 */ .sticky.c-yachiyo { background: #fffdf3 url(/static/sticky-yachiyo-faded.png) right 6px bottom 2px / auto 75% no-repeat; border-color: #0a9a48; } .sticky.c-yachiyo .sticky-head { background: rgba(255, 200, 40, .22); border-bottom-color: rgba(10, 154, 72, .35); } /* ベテランさんの台紙：薄くした白髪の社員（いいね）を右下に（高さの 75%）。枠は落ち着いた灰色 */ .sticky.c-veteran { background: #f7f8fa url(/static/sticky-veteran-faded.png) right 6px bottom 2px / auto 75% no-repeat; border-color: #7d8189; } .sticky.c-veteran .sticky-head { background: rgba(125, 129, 137, .16); border-bottom-color: rgba(125, 129, 137, .4); } /* 女子社員の台紙：薄くした女子社員（ノートPC）を右下に（高さの 75%）。枠はやわらかい桜色 */ .sticky.c-lady { background: #fff8f9 url(/static/sticky-lady-faded.png?v=20260928194458) right 6px bottom 2px / auto 75% no-repeat; border-color: #d9869a; } .sticky.c-lady .sticky-head { background: rgba(217, 134, 154, .16); border-bottom-color: rgba(217, 134, 154, .4); } .sticky-head { display: flex; align-items: center; gap: 4px; padding: 4px 6px; cursor: grab; background: rgba(0, 0, 0, .06); border-radius: 2px 2px 0 0; border-bottom: 1px solid rgba(0, 0, 0, .2); touch-action: none; user-select: none; } .sticky.moving .sticky-head { cursor: grabbing; } .sticky-sign { font-size: 16px; } .sticky-title { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 700; color: #222; padding: 2px 4px; border-radius: 4px; outline: none; } .sticky-title:focus { background: rgba(255, 255, 255, .6); } .sticky-title::placeholder { font-weight: 500; color: #888; } /* たたんだ付箋：頭（サイン＋タイトル＋ボタン）だけ。本文・色選び・つまみは隠す */ .sticky.folded { height: auto !important; min-height: 0; } .sticky.folded .sticky-body, .sticky.folded .sticky-style, .sticky.folded .sticky-resize { display: none; } .sticky.folded .sticky-head { border-bottom: 0; border-radius: 2px; } .sticky-btn { border: 0; background: transparent; cursor: pointer; font-size: 13px; padding: 2px 5px; border-radius: 4px; color: #444; } /* 人から届いた付箋：「📨 〇〇さんから」。まだ触っていない間は目立たせる（_stickies.html） */ .sticky-from { font-size: 11px; padding: 2px 8px; color: #444; background: rgba(255, 255, 255, .45); border-bottom: 1px dashed rgba(0, 0, 0, .15); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sticky-from b { color: #dc2626; font-size: 10px; } .sticky.unread { box-shadow: 0 0 0 3px rgba(220, 38, 38, .55), 2px 4px 14px rgba(20, 30, 50, .22); } .sticky.folded .sticky-from { display: none; } #sticky-send .modal-box { max-width: 720px; width: 94vw; } /* 付箋のリマインド（⏰）：日時の欄・予約中の一覧（右下）・届いた／日時が来たときのポップアップ */ .sticky-remind { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 5px 8px; background: rgba(255, 255, 255, .6); border-bottom: 1px dashed rgba(0, 0, 0, .15); font-size: 12px; } .sticky-remind input { font-size: 12px; padding: 2px 4px; } .sticky-remind small { color: #555; width: 100%; } .sticky-btn.on { background: rgba(0, 0, 0, .1); font-weight: 700; } .sticky-pending { position: fixed; right: 16px; bottom: 16px; z-index: 60; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--sh-2); max-width: 340px; font-size: 13px; } .sticky-pending summary { cursor: pointer; padding: 8px 12px; font-weight: 700; color: var(--accent-d); } .sticky-pending ul { list-style: none; margin: 0; padding: 0 12px 10px; display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; } .sticky-pending li { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; border-top: 1px solid var(--line); padding-top: 6px; } .sticky-pending .sp-when { font-variant-numeric: tabular-nums; color: var(--ink-2); } .sticky-pending .sp-title { font-weight: 600; } .remind-pop.sticky-pop { border-color: #eab308; background: #fffbe8; } .send-remind { margin-top: 10px; } @media print { .sticky-pending { display: none; } } .sticky-btn:hover { background: rgba(0, 0, 0, .1); } .sticky-style { padding: 4px 6px; background: rgba(255, 255, 255, .55); display: flex; flex-direction: column; gap: 4px; } .sticky-colors, .sticky-signs { display: flex; gap: 4px; flex-wrap: wrap; } .sticky-swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .15); cursor: pointer; padding: 0; } .sticky-swatch.on { border-color: #333; } .sticky-swatch.c-yellow { background: var(--st-yellow); } .sticky-swatch.c-pink { background: var(--st-pink); } .sticky-swatch.c-blue { background: var(--st-blue); } .sticky-swatch.c-green { background: var(--st-green); } .sticky-swatch.c-orange { background: var(--st-orange); } .sticky-swatch.c-purple { background: var(--st-purple); } .sticky-swatch.c-gray { background: var(--st-gray); } .sticky-swatch.c-white { background: var(--st-white); } .sticky-swatch.c-coa { width: 34px; border-radius: 6px; background: #fff url(/static/sticky-coa.png) center / 90% auto no-repeat; } .sticky-swatch.c-yachiyo { width: 24px; height: 26px; border-radius: 6px; background: #fffdf3 url(/static/sticky-yachiyo.png) center / auto 92% no-repeat; } .sticky-swatch.c-veteran { width: 24px; height: 26px; border-radius: 6px; background: #f7f8fa url(/static/sticky-veteran.png) center / auto 92% no-repeat; } .sticky-swatch.c-lady { width: 24px; height: 26px; border-radius: 6px; background: #fff8f9 url(/static/sticky-lady.png?v=20260928194458) center / auto 92% no-repeat; } .sticky-signbtn { border: 1px solid transparent; background: transparent; cursor: pointer; font-size: 16px; border-radius: 4px; padding: 1px 4px; } .sticky-signbtn.on { border-color: #333; background: rgba(255, 255, 255, .7); } .sticky-body { flex: 1; border: 0; background: transparent; resize: none; padding: 8px 10px; font: inherit; font-size: 15px; font-weight: 700; line-height: 1.5; color: #222; outline: none; } .sticky-body::placeholder { font-weight: 500; color: #777; } .sticky-resize { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; touch-action: none; background: linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, .25) 50%); border-radius: 0 0 4px 0; } @media print { #stickies { display: none; } } .w-table.visitors { font-size: 13px; } .w-table.visitors tbody tr[data-ev-modal] { cursor: pointer; } .w-table.visitors tbody tr[data-ev-modal]:hover td { background: var(--accent-bg); } .w-table.visitors td.nowrap { white-space: nowrap; } .w-table.visitors tr.is-today td { background: var(--accent-bg); border-left: 3px solid var(--accent); font-weight: 600; } .w-table.visitors tr.is-today td + td { border-left: 0; } .w-table.visitors tr.is-today[data-ev-modal]:hover td { background: color-mix(in srgb, var(--accent-bg) 70%, var(--accent) 30%); } .w-table.visitors .today-pill { background: var(--accent); color: #fff; } .modal-actions { display: flex; gap: 10px; margin-top: 16px; align-items: center; flex-wrap: wrap; } /* 予定の重なりの確認（schedule_form.html） */ .conflict-table td.nowrap { white-space: nowrap; } .table-wrap { overflow-x: auto; max-height: 50vh; overflow-y: auto; margin-top: 8px; } .cust-widgets { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 10px 0; } .cust-accent, .cust-view { display: flex; gap: 8px; align-items: center; margin: 10px 0; flex-wrap: wrap; } .swatch { width: 26px; height: 26px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; padding: 0; } .swatch.on, .swatch-l input:checked + .swatch { border-color: var(--ink); box-shadow: 0 0 0 2px #fff inset; } .swatch.indigo { background: #4f46e5; } .swatch.blue { background: #2563eb; } .swatch.teal { background: #0f766e; } .swatch.green { background: #15803d; } .swatch.rose { background: #be123c; } .swatch.amber { background: #b45309; } .swatch.slate { background: #334155; } .swatches { display: flex; gap: 8px; } .swatch-l input { display: none; } .swatch-l .swatch { display: block; } .sortable { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; max-width: 360px; } .sortable li { display: flex; align-items: center; gap: 8px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 8px; cursor: grab; } .sortable li .chk { margin: 0; } .w-handle { color: var(--ink-3); cursor: grab; letter-spacing: -2px; } .suggest { position: absolute; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--sh-2); z-index: 40; padding: 4px; } .suggest button { display: block; width: 100%; text-align: left; padding: 6px 10px; border: 0; background: none; font: inherit; cursor: pointer; border-radius: 5px; } .suggest button:hover { background: var(--accent-bg); } /* メールの宛先・Cc・Bcc：1件ずつの札（mail_compose.html の [data-addrs]） */ .addr-box { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 6px; min-height: 36px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--panel); cursor: text; } .addr-box:focus-within { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); } .addr-box .addr-entry { flex: 1 1 160px; min-width: 120px; border: 0; padding: 4px 2px; background: transparent; } .addr-box .addr-entry:focus { outline: none; } .addr-chip { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 2px 4px 2px 10px; border-radius: 999px; background: var(--accent-bg); border: 1px solid var(--line-2); font-size: 13px; overflow-wrap: anywhere; cursor: default; } .addr-chip button { border: 0; background: none; font: inherit; font-size: 11px; color: var(--ink-3); cursor: pointer; padding: 0 5px; border-radius: 999px; } .addr-chip button:hover { background: var(--panel); color: var(--ink); } .addr-chip.bad { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); } /* ---------------------------------------------------------------- ログイン */ .login-wrap { width: min(420px, 92vw); } .login-card { background: var(--panel); border-radius: 18px; box-shadow: var(--sh-2); padding: 32px; } .login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; } .login-form label { display: block; margin-bottom: 14px; font-weight: 600; color: var(--ink-2); font-size: 13px; } .login-form label small { margin-left: 6px; font-weight: 400; } .login-form input { width: 100%; font-size: 16px; padding: 10px 12px; margin-top: 4px; } /* ---------------------------------------------------------------- 相手を選ぶ */ .picker-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .picker-title { font-weight: 700; } .picker-search { flex: 1; padding: 5px 9px; font-size: 13px; } .picker-chosen { display: flex; flex-wrap: wrap; gap: 4px; min-height: 8px; margin-bottom: 6px; } .picker-chosen .chip { font-size: 12px; padding: 2px 9px; } .picker-groups { max-height: 380px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-sm); } .picker-group summary { padding: 6px 10px; background: var(--panel-2); cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink-2); display: flex; gap: 6px; align-items: center; } .picker-group summary .pick-all { margin-left: auto; font-size: 11px; } .picker-list { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; } .pick { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; cursor: pointer; border: 1px solid transparent; } .pick:hover { background: var(--accent-bg); } .pick.on { background: var(--accent); color: #fff; border-color: var(--accent); } .pick.on .muted { color: #e0e7ff; } .pick.on .avatar { background: #fff; } .pick input { display: none; } .pick.hide { display: none; } /* 施設・備品を選ぶ */ .res-picker { display: flex; flex-direction: column; gap: 2px; max-height: 420px; overflow: auto; } .res-cat { font-size: 12px; font-weight: 700; color: var(--ink-3); margin: 8px 0 2px; } .res { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--r-sm); cursor: pointer; border: 1px solid transparent; } .res:hover { background: var(--accent-bg); } .res.on { background: var(--accent-bg); border-color: var(--accent); } .res.busy .res-state { color: var(--danger); } .res.busy::before { content: "■"; color: var(--danger); font-size: 10px; } .res:not(.busy)::before { content: "■"; color: #22c55e; font-size: 10px; } .res input { accent-color: var(--accent); } .res-name { flex: 1; } .res-state { font-size: 11px; color: var(--ok); max-width: 55%; text-align: right; } .res-busy-mark { color: var(--danger); font-size: 10px; } .kind-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .kind { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 2px solid var(--line); cursor: pointer; background: var(--panel); } .kind:hover { border-color: var(--ev); } .kind.on { background: var(--ev); border-color: var(--ev); color: #fff; } .kind input { display: none; } .k-ico { font-size: 16px; } .kind-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--ev, var(--ink-3)); color: #fff; font-size: 13px; font-weight: 600; } .kind-badge.sm { font-size: 11.5px; padding: 1px 8px; } .kind-buttons { display: flex; flex-wrap: wrap; gap: 6px; } /* ---------------------------------------------------------------- カレンダー */ .cal-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .cal-nav { display: flex; align-items: center; gap: 6px; } .cal-title { margin: 0 8px; font-size: 19px; white-space: nowrap; } .cal-jump { padding: 5px 8px; font-size: 12px; color: var(--ink-2); } .cal-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; } .cal-who { max-width: 200px; } .month { border: 1px solid var(--cal-line); border-radius: var(--r-sm); overflow: hidden; } .month-head { display: grid; grid-template-columns: repeat(7, 1fr); background: linear-gradient(var(--cal-head), var(--cal-head2)); border-bottom: 1px solid var(--cal-line); } .month-head .wd { text-align: center; padding: 7px; font-size: 12px; font-weight: 700; color: var(--ink-2); border-right: 1px solid color-mix(in srgb, var(--cal-line) 55%, transparent); } .month-head .wd:last-child { border-right: 0; } .month-row { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--cal-line); } .month-row:last-child { border-bottom: 0; } .cell { min-height: 96px; border-right: 1px solid var(--cal-line); padding: 4px; position: relative; transition: background .1s; background: var(--cal-cell); display: flex; flex-direction: column; } .cell:last-child { border-right: 0; } .cell.wd5 { background: var(--sat-bg); } .cell.wd6 { background: var(--sun-bg); } .cell.out { background: var(--cal-out); } .cell.out .dnum { color: var(--ink-3); } .cell.holiday { background: var(--sun-bg); } .cell.holiday .dnum { color: var(--sun); } .cell-holiday { flex: 1; min-width: 0; font-size: 10.5px; font-weight: 700; color: var(--sun); line-height: 1.25; white-space: normal; overflow-wrap: anywhere; word-break: break-word; padding: 0 4px; } .cell.today { background: var(--accent-bg); } .cell.drop { background: #fef3c7; outline: 2px dashed #f59e0b; outline-offset: -2px; } .cell-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 2px; } .dnum { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-weight: 600; font-size: 13px; color: var(--ink); } .dnum:hover { background: var(--accent); color: #fff; text-decoration: none; } .cell.today .dnum { background: var(--accent); color: #fff; } .wd5 .dnum, .month-head .wd5 { color: var(--sat); } .wd6 .dnum, .month-head .wd6 { color: var(--sun); } .cell-add { opacity: 0; font-size: 14px; color: var(--ink-3); padding: 0 6px; border-radius: 4px; } .cell:hover .cell-add { opacity: 1; } .cell-add:hover { background: var(--accent); color: #fff; text-decoration: none; } .cell-body { display: flex; flex-direction: column; gap: 2px; } /* 期間の予定の段：マスのいちばん下（margin-top:auto）。同じ週のマスは同じ高さなので、段がそろって日をまたいで1本の線になる。 そろえるため、バーと空きの段は同じ高さの1行（題名は1行で切り、全文はマウスを乗せると出る） */ .cell-spans { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 2px; } .cell-spans .ev.span, .cell-spans .span-gap { height: 22px; min-height: 22px; margin-bottom: 0; } .cell-spans .span-gap { display: block; } .cell-spans .ev.span .ev-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; } .more { font-size: 11px; color: var(--ink-2); padding-left: 4px; } /* 予定チップ：時間を上段・内容を下段の2段で見せる */ .ev { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 2px 6px; border-radius: 5px; font-size: 12.5px; line-height: 1.3; background: color-mix(in srgb, var(--ev) 14%, #fff); color: var(--ink); border-left: 3px solid var(--ev); overflow: hidden; cursor: pointer; margin-bottom: 2px; } .ev:hover { background: color-mix(in srgb, var(--ev) 28%, #fff); text-decoration: none; } .ev.mine { box-shadow: inset 0 0 0 1.5px var(--accent); } .ev.priv .ev-title::before { content: "🔒"; font-size: 10px; margin-right: 2px; } .ev.masked { background: #eef0f4; border-left-color: #c3c9d4; color: var(--ink-2); cursor: default; } .ev-time { color: var(--ink-2); font-variant-numeric: tabular-nums; font-size: 11px; white-space: normal; } .ev-clock { white-space: nowrap; } .ev-kind { color: var(--ev); font-weight: 700; } .tev-kind { color: var(--ev); font-weight: 700; } /* 予定名は横幅に収まらなければ折り返す（切らずに全部見せる） */ .ev-title { font-weight: 600; white-space: normal; overflow-wrap: anywhere; word-break: break-word; } .ev.dragging { opacity: .4; } /* 期間の予定（出張など）：色付きの太いバー＝矢印。日をまたいで続く */ .ev.span { flex-direction: row; align-items: center; gap: 4px; background: var(--ev); color: #fff; border-left: 0; border-radius: 0; font-weight: 700; padding: 2px 4px; min-height: 20px; margin-left: -4px; margin-right: -4px; } .ev.span:hover { background: var(--ev); filter: brightness(1.08); } .ev.span .ev-title { color: #fff; } .ev.span.s { border-top-left-radius: 11px; border-bottom-left-radius: 11px; padding-left: 8px; } .ev.span.e { border-top-right-radius: 11px; border-bottom-right-radius: 11px; } .ev.span.e::after { content: "▶"; margin-left: auto; font-size: 11px; } .ev.span:not(.e)::after { content: "→"; margin-left: auto; font-weight: 900; opacity: .9; } .ev.span .span-arrow { width: 100%; text-align: center; font-weight: 900; font-size: 13px; } .ev.span.masked { background: #9aa6ba; } .timegrid { border: 1px solid var(--cal-line); border-radius: var(--r-sm); overflow: hidden; } .tg-head, .tg-allday, .tg-body { display: grid; grid-template-columns: 56px repeat(7, 1fr); } .timegrid.one .tg-head, .timegrid.one .tg-allday, .timegrid.one .tg-body { grid-template-columns: 56px 1fr; } .tg-head { background: linear-gradient(var(--cal-head), var(--cal-head2)); border-bottom: 1px solid var(--cal-line); } .tg-col-head { text-align: center; padding: 6px 0; border-left: 1px solid var(--cal-line); } .tg-col-head a { color: var(--ink); display: inline-flex; flex-direction: column; align-items: center; line-height: 1.2; } .tg-col-head a:hover { text-decoration: none; } .tg-wd { font-size: 11px; color: var(--ink-2); } .tg-d { font-size: 18px; font-weight: 700; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; } .tg-col-head.today .tg-d { background: var(--accent); color: #fff; } .tg-col-head.wd5 .tg-d, .tg-col-head.wd5 .tg-wd { color: var(--sat); } .tg-col-head.wd6 .tg-d, .tg-col-head.wd6 .tg-wd { color: var(--sun); } .tg-col-head.holiday .tg-d, .tg-col-head.holiday .tg-wd { color: var(--sun); } .tg-col-head.today.wd5 .tg-d, .tg-col-head.today.wd6 .tg-d { color: #fff; } .tg-holiday { display: block; font-size: 10.5px; font-weight: 700; color: var(--sun); line-height: 1.25; margin-top: 1px; padding: 0 3px; white-space: normal; overflow-wrap: anywhere; word-break: break-word; } .tg-gutter { font-size: 11px; color: var(--ink-3); text-align: right; padding-right: 6px; } .tg-allday { border-bottom: 1px solid var(--cal-line); min-height: 28px; background: var(--cal-head2); } .tg-allday .tg-gutter { padding-top: 4px; } .tg-allday-col { border-left: 1px solid var(--cal-line); padding: 3px; display: flex; flex-direction: column; gap: 2px; min-height: 26px; } .tg-allday-col.wd5, .tg-col.wd5 { background: var(--sat-bg); } .tg-allday-col.wd6, .tg-col.wd6 { background: var(--sun-bg); } .tg-allday-col.holiday, .tg-col.holiday { background: var(--sun-bg); } .tg-allday-col.drop, .tg-col.drop { background: #fef3c7; } .tg-body { height: 780px; position: relative; background: var(--cal-cell); } .tg-body .tg-gutter { display: flex; flex-direction: column; background: var(--cal-head2); } .tg-hour { flex: 1; border-top: 1px solid transparent; transform: translateY(-7px); } .tg-col { border-left: 1px solid var(--cal-line); position: relative; display: flex; flex-direction: column; } .tg-col.today { background: color-mix(in srgb, var(--accent-bg) 60%, #fff); } .tg-slot { flex: 1; border-top: 1px solid color-mix(in srgb, var(--cal-line) 70%, transparent); display: block; } .tg-slot:hover { background: var(--accent-bg); } .tev { position: absolute; border-radius: 6px; padding: 3px 6px; font-size: 12.5px; overflow: hidden; line-height: 1.3; background: color-mix(in srgb, var(--ev) 16%, #fff); border-left: 4px solid var(--ev); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); display: flex; flex-direction: column; box-sizing: border-box; } .tev:hover { background: color-mix(in srgb, var(--ev) 30%, #fff); text-decoration: none; z-index: 5; } .tev.mine { box-shadow: inset 0 0 0 1.5px var(--accent), 0 1px 3px rgba(0, 0, 0, .1); } .tev.masked { background: #eef0f4; border-left-color: #c3c9d4; color: var(--ink-2); } .tev-time { font-size: 11px; color: var(--ink-2); white-space: nowrap; } .tev-title { font-weight: 700; white-space: normal; overflow-wrap: anywhere; word-break: break-word; } .tev-who { font-size: 10.5px; color: var(--ink-3); white-space: normal; overflow-wrap: anywhere; } /* メンバースケジュール（社員が行・当日から1週間が横並び） */ .memsched { overflow-x: auto; } .ms { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 760px; } .ms th, .ms td { border: 1px solid var(--cal-line); vertical-align: top; } .ms thead th { background: linear-gradient(var(--cal-head), var(--cal-head2)); padding: 7px 4px; font-size: 12.5px; font-weight: 700; text-align: center; } .ms thead th.today { background: var(--accent-bg); color: var(--accent-d); } .ms thead th.wd5 { color: var(--sat); background: var(--sat-bg); } .ms thead th.wd6 { color: var(--sun); background: var(--sun-bg); } .ms thead th.holiday { color: var(--sun); background: var(--sun-bg); } .ms-holiday { display: block; color: var(--sun); font-weight: 700; white-space: normal; overflow-wrap: anywhere; word-break: break-word; line-height: 1.2; } .ms .ms-name { width: 150px; background: var(--panel-2); text-align: left; font-size: 13px; padding: 6px 8px; font-weight: 600; position: sticky; left: 0; z-index: 1; } /* 横スクロールしても氏名は残す */ .ms thead th.ms-name { z-index: 2; } .ms-nm { font-weight: 600; } .ms-icons { display: flex; gap: 4px; margin-top: 3px; } .ms-cal { text-decoration: none; padding: 1px 5px; border-radius: 5px; font-size: 16px; line-height: 1.3; } .ms-cal:hover { background: var(--accent-bg); text-decoration: none; } .ms tr.self .ms-name { background: var(--accent-bg); } .ms td.ms-cell { padding: 3px; min-height: 52px; position: relative; background: var(--cal-cell); vertical-align: top; } .ms td.ms-cell.wd5 { background: var(--sat-bg); } .ms td.ms-cell.wd6 { background: var(--sun-bg); } .ms td.ms-cell.holiday { background: var(--sun-bg); } .ms td.ms-cell.today { background: color-mix(in srgb, var(--accent-bg) 55%, #fff); } .ms td.ms-cell:hover { background: var(--panel-2); } .ms .ev { margin-bottom: 2px; } .ms .ev.owner { box-shadow: inset 0 0 0 1.5px var(--accent); } .gw-add { position: absolute; right: 3px; bottom: 2px; opacity: 0; color: var(--ink-3); font-size: 13px; padding: 0 4px; border-radius: 4px; } .ms-cell:hover .gw-add { opacity: 1; } .gw-add:hover { background: var(--accent); color: #fff; text-decoration: none; } /* 参加者ピッカー（グループ選択→ダブルクリックで出し入れ） */ .part { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .part-col h4 { font-size: 12.5px; color: var(--ink-2); margin: 0 0 4px; } .part-list { border: 1px solid var(--line); border-radius: var(--r-sm); max-height: 260px; overflow: auto; background: var(--panel); } .part-list .pl { display: flex; align-items: center; gap: 6px; padding: 4px 8px; cursor: pointer; user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .part-list .pl:hover { background: var(--accent-bg); } .part-list .pl.added { background: var(--accent-bg); } .part-list .pl.added::after { content: "✓"; margin-left: auto; color: var(--accent); font-weight: 700; } /* なぞって複数を選んでいる間（app.js の [data-group-picker]） */ .part-list.painting { cursor: ns-resize; } .part-list.painting .pl { cursor: ns-resize; } .part-list .pl.added { box-shadow: inset 3px 0 0 var(--accent); } .gpick-bulk { display: flex; gap: 12px; align-items: center; margin: 2px 0 6px; flex-wrap: wrap; } .gpick-tip { cursor: help; border: 1px solid var(--line-2); border-radius: 50%; width: 18px; height: 18px; display: inline-grid; place-items: center; font-size: 11px; } .part-chip { cursor: pointer; } .part-box { border: 1px dashed var(--line-2); border-radius: var(--r-sm); min-height: 260px; max-height: 260px; overflow: auto; padding: 6px; background: var(--panel-2); display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; } .lookup { position: relative; } .lookup-row { display: flex; gap: 4px; align-items: center; } .lookup-row .lookup-text { flex: 1; } .lookup .lookup-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; max-height: 240px; box-shadow: var(--sh-2); background: var(--panel); } .part-box:empty::before { content: "左の名前をクリックで追加（押したままなぞると複数）"; color: var(--ink-3); font-size: 12px; } .part-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 13px; cursor: pointer; user-select: none; } .part-chip:hover { background: var(--accent-d); } .part-chip::after { content: "×"; opacity: .7; } .part-hint { font-size: 11px; color: var(--ink-3); margin-top: 4px; } /* ---------------------------------------------------------------- トップ */ /* ---- トップの壁紙（上部の帯）：カスタマイズで選ぶ。文字は左下に白抜き＋うっすら影 */ .home-hero { position: relative; height: 170px; border-radius: var(--r); background-size: cover; background-position: center; box-shadow: var(--sh); margin-bottom: 16px; overflow: hidden; } .home-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(20, 30, 50, .45) 100%); } .home-hero-text { position: absolute; left: 20px; bottom: 14px; z-index: 1; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); } .home-hero-hello { font-size: 20px; font-weight: 700; } .home-hero-date { font-size: 13px; opacity: .95; } .home-hero.slim { height: 96px; } .home-hero.slim .home-hero-hello { font-size: 16px; } .home-hero.slim .home-hero-date { font-size: 12px; } @media (max-width: 680px) { .home-hero { height: 110px; } .home-hero.slim { height: 72px; } .home-hero-hello { font-size: 16px; } } .cust-wall { margin-top: 10px; } .wall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; margin-top: 6px; max-height: 260px; overflow: auto; } .wall { position: relative; height: 44px; border: 2px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2) center / cover no-repeat; cursor: pointer; padding: 0; overflow: hidden; } .wall span { position: absolute; left: 0; right: 0; bottom: 0; font-size: 10px; color: #fff; background: rgba(20, 30, 50, .55); padding: 1px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; } .wall.none { font-size: 12px; color: var(--ink-2); } .wall.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); } .home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; } .home-cal { min-width: 0; } .home-side { display: flex; flex-direction: column; gap: 12px; } .widget { margin: 0; padding: 0; overflow: hidden; } .widget.dragging { opacity: .4; } .widget.drop-before { box-shadow: 0 -3px 0 var(--accent); } .widget.drop-after { box-shadow: 0 3px 0 var(--accent); } .w-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--panel-2); cursor: grab; } .w-title { font-weight: 700; } .w-hide { background: none; border: 0; color: var(--ink-3); cursor: pointer; font-size: 16px; padding: 0 4px; border-radius: 4px; } .w-hide:hover { background: var(--danger-bg); color: var(--danger); } .w-body { padding: 10px 14px; } .w-list { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 4px; } .w-sub { font-size: 11.5px; font-weight: 700; color: var(--ink-3); margin: 8px 0 4px; } .w-ev, .w-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-sm); color: var(--ink); } .w-ev { border-left: 3px solid var(--ev); background: color-mix(in srgb, var(--ev) 10%, #fff); } a.w-ev:hover, a.w-row:hover { background: var(--accent-bg); text-decoration: none; } .w-row.unread .w-main b { color: var(--accent-d); } .w-time { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 12px; min-width: 40px; } .w-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; } .w-main b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .phone-row { align-items: flex-start; } .phone-row form { margin-top: 2px; } /* ---------------------------------------------------------------- 2ペイン・3ペイン */ .split { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 16px; align-items: start; } .split.files { grid-template-columns: 240px minmax(0, 1fr); } .split-list { padding: 12px; max-height: calc(100vh - var(--tb-h) - 40px); overflow: auto; position: sticky; top: calc(var(--tb-h) + 16px); } .split-main { min-height: 400px; } .thread-list, .contact-list, .ml, .notif-list, .board-list, .memo-list { list-style: none; padding: 0; margin: 0; } .thread-list li a, .contact-list .c-row { display: flex; gap: 10px; padding: 10px 8px; border-radius: var(--r-sm); color: var(--ink); align-items: flex-start; } .thread-list li a:hover, .contact-list .c-row:hover { background: var(--panel-2); text-decoration: none; } .thread-list li.on a, .contact-list li.on .c-row { background: var(--accent-bg); } /* アドレス帳：選んだ会社の担当者（contacts.html。ここから1人を選ぶ） */ .co-people { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .co-people-list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; } .co-people-list a { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); min-width: 0; overflow-wrap: anywhere; } .co-people-list a:hover { background: var(--panel-2); text-decoration: none; } .co-people-list li.on a { background: var(--accent-bg); border-color: var(--accent); } .thread-list li.unread .tl-subject { color: var(--accent-d); } .thread-list li.unread .tl-last { font-weight: 600; color: var(--ink); } .tl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .tl-top { display: flex; justify-content: space-between; gap: 6px; } .tl-subject { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tl-who { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tl-last { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .c-main { flex: 1; min-width: 0; line-height: 1.35; } .c-row .btn { align-self: center; } .kana-row { display: flex; flex-wrap: wrap; gap: 2px; margin: 4px 0; } .kana-row a { padding: 2px 7px; border-radius: 4px; font-size: 12px; color: var(--ink-2); } .kana-row a:hover { background: var(--panel-2); text-decoration: none; } .kana-row a.on { background: var(--accent); color: #fff; } .th-head { border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 10px; } .th-head h2 { font-size: 18px; } .th-members { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .th-members .link.danger { color: var(--danger); } /* メッセージの削除（始めた人・管理者だけに出る） */ /* メッセージ：一覧はサイボウズのような表（メールの .mail2／.mtbl を使う）。ここは違うところだけ */ .mf-move select { font-size: 12px; padding: 2px 4px; } .mail-nav .mn-n { margin-left: auto; font-size: 11.5px; } .msg-tbl .c-subj { width: 40%; } .msg-tbl .c-from { width: 13%; } .msg-tbl .c-to { max-width: 0; width: 22%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font-size: 12.5px; } .msg-tbl .c-n { width: 48px; text-align: right; color: var(--ink-3); font-size: 12.5px; white-space: nowrap; } .msg-tbl .unread-dot { color: var(--accent); font-size: 10px; margin-right: 4px; } .msg-view { padding: 12px 16px; } .msg-back { margin-bottom: 8px; } .add-members { margin-top: 10px; } .posts { display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - 380px); min-height: 200px; overflow: auto; padding: 4px; } .post { display: flex; gap: 10px; align-items: flex-start; } .post.me { flex-direction: row-reverse; } .post-body { max-width: 75%; min-width: 0; } .post.me .post-body { text-align: right; } .post-meta { font-size: 12px; margin-bottom: 2px; } .bubble { display: inline-block; text-align: left; background: var(--panel-2); border-radius: 14px; padding: 8px 14px; } .post.me .bubble { background: var(--accent); color: #fff; } .post .att-list { justify-content: inherit; } .chip.static.read-yes { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; } .chip.static.read-yes small { color: #059669; font-weight: 700; } .chip.static.read-no small { color: var(--ink-3); } .read-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; padding: 10px 12px; background: var(--panel-2); border-radius: var(--r-sm); } .read-btn { font-size: 15px; } .read-done { color: #059669; font-weight: 700; } .reply { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; } .reply-tools { display: flex; gap: 10px; align-items: flex-start; } .reply-tools .dropzone { flex: 1; margin: 0; padding: 6px 10px; } .reply-tools .btn { align-self: center; } .contact-card .cc-head { display: flex; gap: 14px; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 12px; } .contact-card h2 { margin: 0; } .cc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } /* メール */ .mail2 { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; align-items: start; } .mail-nav { padding: 10px; } .mn-add { display: flex; gap: 4px; margin: 8px 2px 4px; } .mn-add input { flex: 1; min-width: 0; padding: 5px 8px; font-size: 12.5px; } /* メール一覧（表：表題・差出人・日付・時刻・サイズ） */ .ml-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .ml-title { margin: 0; } .ml-title small { font-weight: 400; margin-left: 6px; } .ml-boxtools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; padding: 8px 10px; background: var(--panel-2); border-radius: var(--r-sm); } .ml-bulk { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 6px 2px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; } .ml-move { display: inline-flex; gap: 4px; align-items: center; } .mtbl-scroll { overflow-x: auto; } .mtbl { width: 100%; border-collapse: collapse; } .mtbl th { text-align: left; font-size: 12px; color: var(--ink-3); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; } .sorth { color: var(--ink-3); } .sorth:hover { color: var(--accent-d); text-decoration: none; } .sorth.on { color: var(--accent-d); font-weight: 700; } .sarrow { font-size: 9px; } .mtbl td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; } .mtbl tbody tr[data-href] { cursor: pointer; } .rows-link tbody tr[data-href] { cursor: pointer; } .rows-link tbody tr[data-href]:hover td { background: var(--accent-bg); } .rows-link tbody tr.done td { color: var(--ink-3); text-decoration: line-through; } .rows-link tbody tr.done td .pill { text-decoration: none; } .mtbl tbody tr:hover td { background: var(--panel-2); } .mtbl .c-chk { width: 30px; text-align: center; } .mtbl .c-subj { max-width: 0; width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mtbl .c-from { max-width: 0; width: 22%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); } .mtbl .c-date, .mtbl .c-time { white-space: nowrap; color: var(--ink-2); font-size: 12.5px; } .mtbl .c-size { white-space: nowrap; text-align: right; color: var(--ink-3); font-size: 12.5px; } .mtbl tbody tr.unread .c-subj, .mtbl tr.unread .c-subj, .mtbl tr.unread .c-from { font-weight: 700; color: var(--ink); } /* 差出人・宛先の名前を押すと、その人との送受信だけの一覧（?who=）。行のクリック（開く）とは別 */ .mtbl .who-link { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; } .mtbl .who-link:hover { color: var(--accent); text-decoration-style: solid; } #who-title .btn { margin-left: 8px; vertical-align: middle; } .ml-pager { display: inline-flex; align-items: center; gap: 10px; } .ml-foot { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; } .btn.disabled { opacity: .4; pointer-events: none; } .mail-one { max-width: 900px; } .mv-foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); } .mn-item { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: var(--r-sm); color: var(--ink); } .mn-item:hover { background: var(--panel-2); text-decoration: none; } .mn-item.on { background: var(--accent-bg); color: var(--accent-d); font-weight: 700; } .mn-item.sm { padding: 4px 10px; font-size: 12.5px; } .mn-item .badge { margin-left: auto; } /* 自作ボックスのドラッグ並び替え（落とす位置を線で見せる） */ [data-sortable] .mn-item[draggable] { cursor: grab; } [data-sortable] .mn-item.dragging { opacity: .4; } [data-sortable] .mn-item.drop-before { box-shadow: 0 -2px 0 0 var(--accent); } [data-sortable] .mn-item.drop-after { box-shadow: 0 2px 0 0 var(--accent); } .mn-sub { font-size: 11px; font-weight: 700; color: var(--ink-3); margin: 10px 0 2px; padding: 0 10px; } .mail-list { padding: 12px 14px; } .ml li a { display: flex; flex-direction: column; padding: 8px 10px; border-radius: var(--r-sm); color: var(--ink); border-bottom: 1px solid var(--line); } .ml li a:hover { background: var(--panel-2); text-decoration: none; } .ml li.on a { background: var(--accent-bg); } .ml li.unread .ml-from, .ml li.unread .ml-subject { font-weight: 700; color: var(--ink); } .ml li.unread .ml-from::before { content: "●"; color: var(--accent); font-size: 9px; margin-right: 4px; vertical-align: middle; } .ml-top { display: flex; justify-content: space-between; gap: 6px; align-items: center; } .ml-from { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ml-subject { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; } .ml-snip { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ml-tools { padding: 4px 10px; } .star { color: var(--ink-3); } .star.on { color: #f59e0b; } .lbl-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; } .lbl-dot.red { background: #ef4444; } .lbl-dot.orange { background: #f59e0b; } .lbl-dot.green { background: #22c55e; } .lbl-dot.blue { background: #3b82f6; } .lbl-dot.gray { background: #9ca3af; } .mv-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; } .mv-tools2 { margin-top: -6px; } /* 振り分けルールの条件行（欄が横に並ぶ。狭ければ折り返す） */ .rule-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 4px 0; } .rule-row input[type=text] { flex: 1 1 200px; min-width: 0; } .rule-order { display: inline-flex; flex-direction: column; vertical-align: middle; margin-right: 4px; } .rule-order .link { font-size: 9px; line-height: 1; padding: 0 4px; } .rule-order .link[disabled] { opacity: .25; cursor: default; } .rule.off summary { color: var(--ink-3); } .tips { margin: 6px 0 8px 18px; padding: 0; } .tips li { margin: 2px 0; } .mv-subject { font-size: 19px; } .mv-head { display: flex; gap: 12px; align-items: flex-start; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; } .mv-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .mv-body { min-height: 200px; } .mv-html { width: 100%; height: 60vh; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; } .mv-extra { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); } .conv { margin-top: 12px; } .conv ul { list-style: none; padding: 0; margin: 4px 0; } .conv li { padding: 3px 0; } .tmpl { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 12px; margin-bottom: 6px; } .tmpl summary { cursor: pointer; } .tmpl .inner { padding-top: 10px; } /* 施設・備品の予約状況 */ .res-week { overflow: auto; } .rw { width: 100%; border-collapse: collapse; table-layout: fixed; } .rw th { font-size: 12px; padding: 6px; background: var(--panel-2); border: 1px solid var(--line); text-align: center; } .rw th a { color: var(--ink); display: block; } .rw th.today { background: var(--accent-bg); } .rw th.wd5 a { color: var(--sat); } .rw th.wd6 a { color: var(--sun); } .rw th.rw-name, .rw td.rw-name { width: 170px; text-align: left; } .rw td { border: 1px solid var(--line); vertical-align: top; padding: 4px; min-height: 60px; height: 60px; position: relative; } .rw td.rw-name { font-weight: 600; font-size: 13px; background: var(--panel-2); } .rw-cat td { background: var(--accent-bg); color: var(--accent-d); font-weight: 700; font-size: 12px; padding: 4px 8px; height: auto; } .rw-cell:hover { background: var(--panel-2); } .rw-cell.wd5, .rw-cell.wd6 { background: #fafbfc; } .rw-item { display: block; font-size: 11.5px; padding: 2px 6px; border-radius: 4px; background: #e0e7ff; color: var(--ink); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid #818cf8; } .rw-item.mine { background: #dcfce7; border-left-color: #22c55e; } .rw-item:hover { text-decoration: none; filter: brightness(.95); } .rw-item .t { font-variant-numeric: tabular-nums; color: var(--ink-2); } .rw-add { position: absolute; right: 4px; bottom: 2px; opacity: 0; color: var(--ink-3); font-size: 14px; padding: 0 5px; border-radius: 4px; } .rw-cell:hover .rw-add { opacity: 1; } .rw-add:hover { background: var(--accent); color: #fff; text-decoration: none; } .res-day { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; } .rd-row { display: grid; grid-template-columns: 190px 1fr; border-bottom: 1px solid var(--line); min-height: 44px; } .rd-row:last-child { border-bottom: 0; } .rd-head { min-height: 26px; background: var(--panel-2); } .rd-name { padding: 8px 10px; font-weight: 600; font-size: 13px; background: var(--panel-2); border-right: 1px solid var(--line); } .rd-cat { background: var(--accent-bg); color: var(--accent-d); font-weight: 700; font-size: 12px; padding: 4px 10px; border-bottom: 1px solid var(--line); } .rd-track { position: relative; } .rd-h { position: absolute; top: 4px; font-size: 11px; color: var(--ink-3); transform: translateX(-50%); } .rd-slot { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--line); } .rd-slot:hover { background: var(--accent-bg); } .rd-bar { position: absolute; top: 6px; bottom: 6px; border-radius: 6px; background: #c7d2fe; color: var(--ink); font-size: 12px; padding: 4px 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-left: 4px solid #6366f1; } .rd-bar.mine { background: #bbf7d0; border-left-color: #16a34a; } .rd-bar:hover { text-decoration: none; filter: brightness(.95); z-index: 2; } /* 掲示板 */ /* 掲示板一覧：スマホは縦積みカード、広い画面は3列グリッド */ .board-list li a { display: grid; grid-template-columns: 1fr; grid-template-areas: "cat" "body" "meta"; gap: 6px 14px; padding: 13px 12px; border-bottom: 1px solid var(--line); color: var(--ink); } .board-list li a:hover { background: var(--panel-2); text-decoration: none; } .board-list li.pinned a { background: #fffbeb; } .board-list li.unread .bl-title { color: var(--accent-d); } .bl-cat { grid-area: cat; justify-self: start; font-size: 12px; color: var(--ink-2); background: var(--panel-2); border-radius: 999px; padding: 2px 12px; white-space: nowrap; } .bl-body { grid-area: body; min-width: 0; } .bl-title { display: block; font-size: 15px; font-weight: 700; line-height: 1.4; } .bl-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; margin-top: 2px; line-height: 1.45; } .bl-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; font-size: 12.5px; } .bl-who { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .bl-stat { white-space: nowrap; } @media (min-width: 721px) { .board-list li a { grid-template-columns: 120px minmax(0, 1fr) 210px; grid-template-areas: "cat body meta"; column-gap: 16px; align-items: center; } .bl-cat { justify-self: stretch; text-align: center; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; } .bl-meta { justify-content: flex-end; text-align: right; line-height: 1.4; } } .article { font-size: 15px; line-height: 1.8; padding: 12px 0; } /* 書式付きの本文（サイボウズから取り込んだ掲示。core.safe_rich_html を通したもの）。表は枠の中で横に動かす */ .article.rich { overflow-x: auto; overflow-wrap: anywhere; } .article.rich table { border-collapse: collapse; margin: 6px 0; font-size: 14px; } .article.rich td, .article.rich th { border: 1px solid var(--line-2); padding: 4px 8px; vertical-align: top; } .article.rich p { margin: 0 0 .6em; } /* 予定の登録：登録区分（通常・期間・繰り返し）と繰り返しの条件（schedule_form.html） */ .seg.reg-type label { padding: 6px 16px; border-radius: 5px; color: var(--ink-2); cursor: pointer; white-space: nowrap; font-size: 14px; } .seg.reg-type label:hover { background: var(--panel); color: var(--ink); } .seg.reg-type label.on { background: var(--panel); color: var(--accent-d); font-weight: 700; box-shadow: var(--sh); } .seg.reg-type input { position: absolute; opacity: 0; pointer-events: none; } .repeat-fields { border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: var(--r); padding: 10px 14px 12px; background: color-mix(in srgb, var(--accent) 4%, var(--panel)); margin: 4px 0 12px; } .repeat-fields legend { font-weight: 700; color: var(--accent-d); padding: 0 6px; } .rep-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; } .rep-h { min-width: 96px; font-size: 13px; color: var(--ink-2); font-weight: 600; } .weekday-chips .chip { min-width: 40px; justify-content: center; } .weekday-chips .chip input { display: none; } .weekday-chips .chip.wd5 { color: #2563eb; } .weekday-chips .chip.wd6 { color: #dc2626; } .weekday-chips .chip.on { color: #fff; } .rep-note { margin: 8px 0 4px; } .rep-preview { padding: 6px 10px; border-radius: var(--r-sm); background: var(--panel); border: 1px dashed var(--line-2); min-height: 1.6em; } .rep-preview:empty { display: none; } .rep-preview.err { color: var(--danger); border-color: var(--danger); } .series-scope .chips { margin: 6px 0 4px; } .series-del select { padding: 5px 8px; } /* 掲示の詳細（board_detail.html） */ .bdx.detail-grid { max-width: 980px; } .bdx-card { padding: 0; overflow: hidden; } .bdx-head { padding: 16px 22px 14px; border-top: 4px solid var(--accent); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--panel)) 0%, var(--panel) 65%); border-bottom: 1px solid var(--line); } .bdx-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .bdx-cat { display: inline-flex; align-items: center; gap: 4px; padding: 3px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--accent-bg); color: var(--accent-d); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); } .bdx-cat:hover { text-decoration: none; background: var(--panel); } .bdx-move select { font-size: 12.5px; padding: 4px 8px; } .bdx-title { font-size: 24px; line-height: 1.35; margin: 12px 0 10px; overflow-wrap: anywhere; letter-spacing: .01em; } .bdx-by { display: flex; align-items: center; gap: 12px; } .bdx-author { font-weight: 700; } .bdx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .bdx-chips span { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 1px 10px; color: var(--ink-2); } .bdx-body { padding: 8px 22px 4px; } .bdx-body .article { font-size: 15px; line-height: 1.9; } .bdx-h { font-size: 14px; margin: 0 0 10px; color: var(--ink-2); } .bdx-atts { margin: 6px 22px 0; padding: 14px 16px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r); } .bdx .detail-actions { margin: 14px 22px 0; } .bdx .detail-actions .reads summary { cursor: pointer; color: var(--ink-2); font-size: 13px; } .bdx-comments { margin: 16px 22px 20px; } .bdx-comment { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; margin-bottom: 8px; } .bdx-comment-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; } @media (max-width: 680px) { .bdx-head { padding: 12px 14px; } .bdx-body { padding: 6px 14px 2px; } .bdx-atts, .bdx .detail-actions, .bdx-comments { margin-left: 12px; margin-right: 12px; } .bdx-title { font-size: 20px; } } /* 添付のタイル（_macros.attachment_tiles）：形式の色の書類アイコン＋札。画像は縮小 */ .att-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; } .att-tile { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); transition: box-shadow .08s, transform .08s; min-width: 0; } .att-tile:hover { box-shadow: var(--sh-2); transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); } .att-pic { position: relative; display: flex; align-items: center; justify-content: center; height: 84px; border-radius: var(--r-sm); background: var(--panel-2); overflow: hidden; } .att-pic img { max-width: 100%; max-height: 100%; object-fit: contain; } .att-pic .doc-ico { margin: 0; } .att-pic .fg-ext { right: 6px; bottom: 6px; } .att-name { font-size: 12.5px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; } .att-foot { display: flex; align-items: center; gap: 4px; } .att-foot .btn.sm { padding: 3px 8px; } /* 一行の添付（_macros.attachment_list）にも小さな形式の札 */ .fg-ext.mini { position: static; display: inline-block; font-size: 9.5px; padding: 0 5px; vertical-align: 1px; min-width: 30px; text-align: center; } /* 掲示板のカテゴリー：組織カテゴリ／カテゴリの2段 */ .board-cats { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; } .bc-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .bc-h { font-size: 11.5px; font-weight: 700; color: var(--ink-3); min-width: 56px; } .board-access { margin: 4px 0 8px; } .board-search { margin-top: 6px; } .pager { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 14px 0 4px; } .reads { margin: 12px 0; font-size: 13px; color: var(--ink-2); } .reads summary { cursor: pointer; } .comments { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; } .comment { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); } .comment-body { flex: 1; } /* 電話メモ */ .memo { border: 1px solid var(--line); border-left: 4px solid #f59e0b; border-radius: var(--r-sm); padding: 10px 14px; margin-bottom: 8px; background: var(--panel); } .memo.urgent { border-left-color: #ef4444; background: #fff7f5; } .memo.done { border-left-color: #22c55e; opacity: .75; } .memo-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .memo-caller { font-size: 15px; } .memo-phone { font-variant-numeric: tabular-nums; } .memo-body { margin: 6px 0; } .memo-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .phone-form h3 { margin-bottom: 10px; } /* ファイル */ .tree { display: flex; flex-direction: column; gap: 2px; } .tree-item { padding: 6px 10px; border-radius: var(--r-sm); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tree-item.sub { padding-left: 26px; font-size: 13px; } .tree-item:hover { background: var(--panel-2); text-decoration: none; } .tree-item.on { background: var(--accent-bg); color: var(--accent-d); font-weight: 700; } /* フォルダの木（files.html の tree_nodes）：段の数は制限なし。▸ で開け閉め、子は字下げ */ .tree-node > summary { display: flex; align-items: center; list-style: none; cursor: pointer; } .tree-node > summary::-webkit-details-marker { display: none; } .tree-node > summary::before { content: "▸"; width: 14px; flex: 0 0 14px; color: var(--ink-3); font-size: 11px; text-align: center; } .tree-node[open] > summary::before { content: "▾"; } .tree-node > summary .tree-item { flex: 1 1 auto; min-width: 0; } .tree-item.leaf { margin-left: 14px; } /* 数百のフォルダでも行が潰れないように（高さの決まった枠の中の縦並びは、何もしないと各行が縮められる）。 長い名前は「…」で切らずに折り返して全部見せる */ .tree > *, .tree-kids > * { flex-shrink: 0; } .tree .tree-item { white-space: normal; overflow-wrap: anywhere; overflow: visible; text-overflow: clip; line-height: 1.35; } .tree-kids { padding-left: 12px; border-left: 1px dashed var(--line); margin-left: 6px; display: flex; flex-direction: column; gap: 2px; } .tree-kids .tree-item { font-size: 13px; } .folder-access-line { margin: 4px 0 8px; } /* ファイル一覧の見出し：押すと並べ替え（files.html の sort_th） */ /* ファイル：一覧の2行目（ファイル名）とアイコン表示（files.html の view=icon） */ .file-sub { color: var(--ink-2); overflow-wrap: anywhere; } .file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .file-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); text-align: center; min-width: 0; } .file-tile:hover { background: var(--panel-2); border-color: var(--accent); text-decoration: none; } .file-tile .fg-ico { font-size: 44px; line-height: 64px; height: 64px; } .file-tile .fg-thumb { width: 100%; height: 64px; object-fit: contain; } /* 形式の札（PDF・XLSX…）。アイコン・縮小画像の右下に重ねる */ .file-tile .fg-pic { position: relative; display: flex; justify-content: center; width: 100%; } .fg-ext { position: absolute; right: 4px; bottom: 0; padding: 1px 6px; border-radius: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; color: #fff; background: var(--ft-other); line-height: 1.5; } .fg-ext.t-pdf { background: var(--ft-pdf); } .fg-ext.t-xls { background: var(--ft-xls); } .fg-ext.t-doc { background: var(--ft-doc); } .fg-ext.t-ppt { background: var(--ft-ppt); } .fg-ext.t-img { background: var(--ft-img); } .fg-ext.t-video { background: var(--ft-video); } .fg-ext.t-zip { background: var(--ft-zip); } .fg-ext.t-text { background: var(--ft-text); } .fg-ext.t-mail { background: var(--ft-mail); } .file-tile .fg-name { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .files-search { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 6px 0 10px; } .files-search input[type=search] { flex: 1 1 260px; min-width: 0; } .sort-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; } .files-table th a.sort-th { color: var(--ink-2); display: block; white-space: nowrap; } .files-table th a.sort-th:hover { color: var(--accent); text-decoration: none; } .files-table th a.sort-th.on { color: var(--accent-d); font-weight: 700; } .folder-memo { background: var(--panel-2); border-radius: var(--r-sm); padding: 8px 10px; margin: 0 0 12px; font-size: 13px; } .access-form .access-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 8px 0; } .access-form fieldset { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 10px; max-height: 260px; overflow: auto; } .access-form fieldset .chk { display: block; } .upload-box { margin-bottom: 14px; } .upload-box .field-row { margin-top: 6px; } .upload-box .field-row input { flex: 1; } .folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 14px; } .folder-tile { display: flex; flex-direction: column; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); background: var(--panel-2); } .folder-tile:hover { border-color: var(--accent); background: var(--accent-bg); text-decoration: none; } .ft-ico { font-size: 26px; } .ft-name { font-weight: 700; } .file-name { color: var(--ink); font-weight: 600; } /* 申請 */ .tmpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; } .tmpl-tile { display: flex; flex-direction: column; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); background: var(--panel-2); } .tmpl-tile:hover { border-color: var(--accent); background: var(--accent-bg); text-decoration: none; transform: translateY(-1px); box-shadow: var(--sh-2); } .tt-ico { font-size: 28px; } .tt-name { font-weight: 700; font-size: 15px; } .route { padding-left: 22px; margin: 6px 0; } .route li { margin-bottom: 8px; } .route-pick { display: block; margin-top: 4px; width: 100%; } .steps { list-style: none; padding: 0; } .steps li { padding: 8px 12px; border-left: 3px solid var(--line-2); margin-bottom: 4px; background: var(--panel-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; } .steps li.current { border-left-color: #f59e0b; background: #fffbeb; } .steps li.st-承認 { border-left-color: #22c55e; } .steps li.st-却下 { border-left-color: #ef4444; } .steps li.st-差戻 { border-left-color: #f97316; } .st-mark { margin-right: 4px; } .st-comment { margin-top: 4px; padding: 6px 10px; background: var(--panel); border-radius: var(--r-sm); font-size: 13px; } .approve-box { margin: 14px 0; border-left: 4px solid #f59e0b; } /* 詳細 */ .detail-grid { max-width: 900px; } .detail-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; } .detail-title { font-size: 22px; margin-bottom: 4px; } .detail-when { font-size: 16px; color: var(--ink-2); margin-bottom: 6px; } .detail-by { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); } .notif-list li a { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-bottom: 1px solid var(--line); color: var(--ink); } .notif-list li a:hover { background: var(--panel-2); text-decoration: none; } .notif-list li.unread .n-text { font-weight: 700; } .n-ico { font-size: 18px; } .n-text { flex: 1; } .chip-form { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 6px; } /* 密度 */ .density-compact { font-size: 13px; } .density-compact .card { padding: 10px 12px; } .density-compact .cell { min-height: 84px; } .density-compact .w-body { padding: 6px 10px; } /* 印刷 */ @media print { .sidebar, .topbar, .cal-tools, .form-actions, .detail-actions, .btn, .w-hide { display: none !important; } .frame { margin: 0; } main { padding: 0; } .card { box-shadow: none; border: 0; } body { background: #fff; } } /* 狭い画面（ノートPC・タブレット） */ @media (max-width: 1280px) { .home-grid { grid-template-columns: 1fr; } .mail2 { grid-template-columns: 180px minmax(0, 1fr); } } @media (max-width: 1000px) { .form-grid, .split, .split.files { grid-template-columns: 1fr; } .split-list, .mail-list { position: static; max-height: none; } .mail2 { grid-template-columns: minmax(0, 1fr); } /* 1fr だと表の最小幅でページが広がる */ .mail-list { min-width: 0; } :root { --sb-w: 64px; } .nav .lbl, .brand-name { display: none; } .brand-logo { display: none; } .brand-mark { display: block; } .nav a { justify-content: center; } .sb-toggle { display: none; } } /* PCでメニューを上に置く（設定「メニューの置き方＝上」＝ prefs.sidebar='top'、body.sidebar-top）。 並びは下のスマホ用と同じ考え（上の横バー）だが、幅があるのでアイコンと文字を横に並べる。 680px 以下ではこのままスマホ用の並びに変わる */ body.app.sidebar-top { display: block; } .sidebar-top .sidebar { position: sticky; top: 0; left: 0; right: 0; bottom: auto; width: auto; height: auto; z-index: 20; flex-direction: row; align-items: center; gap: 4px; padding: 5px 14px; } .sidebar-top .brand { padding: 0 12px 0 0; gap: 8px; flex: none; } /* 12項目が収まらない幅では2段に折り返す（横スクロールで隠さない） */ .sidebar-top .nav { flex-direction: row; flex-wrap: wrap; gap: 1px; flex: 1 1 auto; } .sidebar-top .nav a { padding: 6px 7px; gap: 6px; font-size: 13px; } .sidebar-top .nav .ico { font-size: 16px; width: 18px; } .sidebar-top .nav .badge { margin-left: 2px; } .sidebar-top .sb-toggle { display: none; } .sidebar-top .frame { margin-left: 0; } /* アドレス帳：スマホでは選んだら一覧を隠して中身だけ（下までスクロールしないと見えなかった）。「一覧に戻る」は PC では出さない */ .sp-back { display: none; } @media (max-width: 680px) { .pc-only { display: none !important; } /* PC だけで使うもの（アドレス帳の CSV 取込・書き出しなど） */ .contacts-split.has-sel > .split-list { display: none; } .contacts-split.has-person .co-people { display: none; } /* 担当者を選んだら、その人の中身だけ */ .contacts-split .sp-back { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .contact-card .cc-head { flex-wrap: wrap; } .co-people .cc-head { flex-wrap: wrap; } } /* スマホなど狭い画面：左のメニュー列をやめ、上の横バーにする（本文を全幅で使う） */ @media (max-width: 680px) { body.app { display: block; } .sidebar { position: sticky; top: 0; left: 0; right: 0; bottom: auto; width: auto; height: auto; flex-direction: row; align-items: center; gap: 2px; padding: 6px 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .brand { padding: 0 6px 0 2px; gap: 6px; flex: none; } .brand-name { display: none; } .brand-logo { display: none; } .brand-mark { display: block; width: 30px; height: 30px; } .logo { width: 30px; height: 30px; font-size: 16px; border-radius: 8px; } .nav { flex-direction: row; flex-wrap: nowrap; gap: 2px; flex: 1 1 auto; overflow-x: auto; } .nav a { flex-direction: column; gap: 2px; padding: 5px 9px; white-space: nowrap; border-radius: 8px; } .nav a .ico { width: auto; font-size: 19px; } .nav a .lbl { display: block; font-size: 10px; line-height: 1.1; } .nav a .badge { position: absolute; top: 1px; right: 3px; min-width: 16px; height: 16px; font-size: 10px; } .sb-toggle { display: none; } .frame { margin-left: 0; min-width: 0; } .topbar { position: static; height: auto; min-height: 52px; padding: 8px 12px; flex-wrap: wrap; gap: 8px; } .page-title { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .me-name { display: none; } main { padding: 12px 10px 32px; min-width: 0; } main.wide { padding: 10px 8px 32px; } .menu { min-width: 200px; } .card { padding: 12px 12px; } /* 掲示板ツールバー：スマホでは検索を全幅に */ .toolbar { gap: 8px; } .toolbar input[type=search] { min-width: 0; width: 100%; flex: 1 1 100%; order: -1; } .toolbar .seg { width: 100%; } /* カレンダーの表だけを横スクロール枠に入れる（ページ全体は広げない）。 枠（日の列）は固定幅 --m-col で少し広めにし、予定名は折り返して全部見せる。 縦は枠（.cal-box）の中でスクロールし、曜日の見出し行は sticky で上に残す（要件）。 枠の高さは app.js の fitCalBoxes() が画面に収まるように決める（ページ全体を伸ばさない） */ :root { --m-col: 110px; } .cal-box { overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .month, .timegrid { overflow: visible; } /* overflow:hidden だと中の sticky が効かない */ .month { width: max-content; min-width: 0; } .month-head, .month-row { grid-template-columns: repeat(7, var(--m-col)); } .month-head { position: sticky; top: 0; z-index: 3; } .timegrid:not(.one) { width: max-content; min-width: 0; } .timegrid:not(.one) .tg-head, .timegrid:not(.one) .tg-allday, .timegrid:not(.one) .tg-body { grid-template-columns: 48px repeat(7, var(--m-col)); } .timegrid.one .tg-head, .timegrid.one .tg-allday, .timegrid.one .tg-body { grid-template-columns: 48px 1fr; } .tg-head { position: sticky; top: 0; z-index: 3; } .tg-gutter { position: sticky; left: 0; z-index: 2; background: var(--cal-head2); } /* 時刻の列は横に残す */ .tg-head .tg-gutter { z-index: 4; } .ms { min-width: calc(150px + 7 * var(--m-col)); } .ms thead th { position: sticky; top: 0; z-index: 3; } .ms thead th.ms-name { z-index: 4; } /* 左上：縦にも横にも残す */ /* ツールバー（年月・切替・グループ）は折り返して画面内に収める */ .cal-bar { gap: 6px 8px; } .cal-nav { flex-wrap: wrap; gap: 4px; } .cal-title { font-size: 16px; margin: 0 4px; } .cal-jump { max-width: 140px; } .cal-tools { margin-left: 0; width: 100%; flex-wrap: wrap; gap: 6px; } .cal-tools .seg { flex-wrap: wrap; } .cal-who { max-width: 60%; } /* 月表示の予定：小さく・折り返して枠に収める */ .month .ev { white-space: normal; align-items: flex-start; padding: 1px 4px; font-size: 10.5px; line-height: 1.35; } .month .ev-title { white-space: normal; overflow: visible; } .month .ev-who { display: none; } .cell { min-height: 78px; } /* 施設予約なども横スクロールで見る */ .gw, .rw { min-width: 640px; } /* メールの一覧：表題・差出人・日付を広めの固定幅にし、時刻・サイズは表の中の横スクロールで見る（ページは広げない） */ .mtbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -12px; padding: 0 12px; } .mtbl { table-layout: fixed; width: auto; min-width: 100%; } .mtbl .c-chk { width: 30px; } .mtbl .c-subj { width: 180px; min-width: 180px; max-width: 180px; } .mtbl .c-from { width: 140px; min-width: 140px; max-width: 140px; } .mtbl .c-date { width: 88px; min-width: 88px; } .mtbl .c-time { width: 56px; min-width: 56px; } .mtbl .c-size { width: 70px; min-width: 70px; } .mtbl th.c-subj, .mtbl th.c-from { overflow: hidden; } /* 横にスクロールしても表題は残す（チェック欄と一緒に左に固定） */ .mtbl .c-chk { position: sticky; left: 0; z-index: 2; background: var(--panel); } .mtbl .c-subj { position: sticky; left: 30px; z-index: 2; background: var(--panel); box-shadow: 2px 0 0 var(--line); } .mtbl tbody tr:hover .c-chk, .mtbl tbody tr:hover .c-subj { background: var(--panel-2); } } .part-filter { width: 100%; margin-bottom: 4px; padding: 5px 9px; font-size: 13px; } /* 管理画面などの2枚並べ（狭い画面は縦積み） */ .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .grid2 > .card.inner { margin: 0; } @media (max-width: 680px) { .grid2 { grid-template-columns: 1fr; } } /* 縦にならべるフォーム（管理の取込など） */ .stack { display: flex; flex-direction: column; gap: 12px; max-width: 560px; } .stack .field { margin: 0; } /* ---------------------------------------------------------------- アプリ（ノーコードの台帳） */ .app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 12px; } .app-tile { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh); color: var(--ink); min-height: 110px; } .app-tile:hover { text-decoration: none; border-color: var(--accent); box-shadow: 0 6px 18px rgba(0, 0, 0, .08); } .app-tile.archived { opacity: .6; } .app-ico { font-size: 30px; line-height: 1; } .app-name { font-weight: 700; font-size: 15px; } .app-tile.theme-card { background: linear-gradient(135deg, var(--accent-bg), var(--panel)); } .app-tile-wrap { display: flex; flex-direction: column; gap: 4px; } .app-tile-wrap .app-tile { flex: 1; } .app-tile-tools { display: flex; gap: 10px; padding: 0 6px; } .app-tile-tools .link.danger, .app-delete .link.danger { color: var(--danger); } .app-delete { display: flex; align-items: center; gap: 8px; justify-content: flex-end; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); } .tmpl-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin: 8px 0 14px; } .tmpl-card { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 2px solid var(--line); border-radius: var(--r); cursor: pointer; background: var(--panel-2); } .tmpl-card input { display: none; } .tmpl-card.on { border-color: var(--accent); background: var(--accent-bg); } .tmpl-card .tc-ico { font-size: 26px; } .icon-pick { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; } .icon-pick .chip { font-size: 18px; padding: 4px 8px; } .app-descr { margin: -4px 0 10px; } .app-tools select { max-width: 200px; } /* 入力・詳細の部品の並び：半分／全幅で折り返す */ .ap-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-start; } /* 部品の大きさ：--w（12分の何か）で幅、--h（px）で高さ。gap 16px ぶんを引いて割り付ける */ .ap-field { --w: 6; flex: 0 0 calc(var(--w) / 12 * (100% + 16px) - 16px); min-width: 140px; max-width: 100%; box-sizing: border-box; min-height: var(--h, auto); } .ap-field.t-user, .ap-field.t-file { flex-basis: 100%; } .ap-field.view .ap-value { min-height: calc(var(--h, 30px) - 24px); } .ap-field .req { color: var(--danger); } .ap-field input.num { text-align: right; } .ap-table-scroll { overflow-x: auto; } .tbl-edit td, .tbl-edit th, .tbl-view td, .tbl-view th { padding: 4px 6px; white-space: nowrap; } .tbl-edit input[type=text], .tbl-edit select, .tbl-edit input[type=date] { width: 100%; min-width: 60px; padding: 5px 6px; font-size: 13px; } .tbl-edit .num, .tbl-view .num { text-align: right; font-variant-numeric: tabular-nums; } .tbl-edit output.num { display: block; padding: 5px 6px; background: var(--panel-2); border-radius: 5px; min-height: 18px; } .tbl-edit tfoot td, .tbl-view tfoot td { border-top: 2px solid var(--line-2); font-weight: 700; } .tbl-edit .tbl-del { width: 28px; text-align: center; } .tbl-edit .tbl-del .link { color: var(--ink-3); font-size: 16px; } .tbl-edit .tbl-del .link:hover { color: var(--danger); } .ap-table > .btn { margin-top: 6px; } .bp-tbl { display: flex; gap: 2px; margin-top: 4px; overflow: hidden; } .bp-tbl span { flex: 1; border: 1px solid var(--line-2); border-radius: 4px; padding: 3px 6px; font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--panel); } .bd-cols { display: flex; flex-direction: column; gap: 4px; } .bd-col { display: grid; grid-template-columns: 1fr 86px 24px; gap: 4px; align-items: center; } .bd-col input, .bd-col select { padding: 4px 6px; font-size: 12.5px; } .bd-col .sub { grid-column: 1 / -1; } .bd-col .cdel { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; font-size: 15px; } .bd-col .cdel:hover { color: var(--danger); } .ap-calc { display: block; padding: 8px 10px; background: var(--panel-2); border-radius: var(--r-sm); font-weight: 700; font-size: 16px; min-height: 20px; text-align: right; font-variant-numeric: tabular-nums; } .ap-field.view .ap-value { padding: 6px 0 2px; min-height: 24px; overflow-wrap: anywhere; } .ap-box { flex-basis: 100%; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 14px 14px; margin: 0; background: var(--panel); } .ap-box > legend { font-weight: 700; font-size: 13px; color: var(--accent-d); padding: 0 6px; } /* 枠のデザイン（部品「枠」の style） */ .ap-box.bs-card { border-color: transparent; box-shadow: var(--sh); } .ap-box.bs-tint { background: var(--panel-2); border-color: transparent; } .ap-box.bs-accent { border: 0; border-left: 4px solid var(--accent); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--accent-bg); } .ap-box.bs-accent > legend, .app-theme-card .ap-box.bs-accent > legend, .app-theme-form .ap-box.bs-accent > legend { background: var(--accent); color: #fff; border-radius: 4px; padding: 1px 8px; } .ap-box.bs-dashed { border-style: dashed; } .ap-box.bs-none { border: 0; padding-left: 0; padding-right: 0; background: transparent; } .ap-box.bs-none > legend { padding-left: 0; } .ap-cols { flex-basis: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; } .ap-cols > .ap-row { align-content: flex-start; } .ap-heading { flex-basis: 100%; margin: 6px 0 0; font-size: 15px; border-left: 4px solid var(--accent); padding-left: 8px; } .ap-note { flex-basis: 100%; margin: 0; } .ap-divider { flex-basis: 100%; border: 0; border-top: 1px solid var(--line); margin: 4px 0; } .ap-meta { margin-top: 12px; } .ap-nexts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .ap-logs { list-style: none; margin: 0 0 10px; padding: 0; max-height: 50vh; overflow: auto; } .ap-logs li { padding: 6px 0; border-bottom: 1px dashed var(--line); } .ap-logs li.k-change .pre, .ap-logs li.k-create .pre { color: var(--ink-2); font-size: 12.5px; } .rec-scroll { overflow-x: auto; } .rec-table td, .rec-table th { white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; } .rec-table td.t-textarea, .rec-table td.t-text { white-space: normal; } .rec-table td.t-number { text-align: right; font-variant-numeric: tabular-nums; } .rec-table tbody tr { cursor: pointer; } .rec-table .c-no { width: 50px; color: var(--ink-3); } .rec-table .c-upd { width: 120px; white-space: nowrap; } .rec-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } .rec-card { display: flex; flex-direction: column; gap: 3px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); color: var(--ink); box-shadow: var(--sh); } .rec-card:hover { text-decoration: none; border-color: var(--accent); } .rc-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; } .rc-line { font-size: 13px; overflow-wrap: anywhere; } .rc-line small { display: inline-block; min-width: 4em; } .rc-foot { margin-top: 6px; } /* デザインテンプレート */ .app-theme-card { background: linear-gradient(180deg, var(--accent-bg), var(--panel) 120px); } .app-theme-card .ap-box { background: var(--panel); box-shadow: var(--sh); border-color: transparent; } .app-theme-card .ap-box > legend { background: var(--panel); border-radius: 6px; } /* ビルダー */ .bd { display: grid; grid-template-columns: 200px minmax(0, 1fr) 280px; gap: 14px; align-items: start; } .bd .card { margin-bottom: 0; } .bd-palette h4, .bd-settings h4 { margin: 0 0 6px; font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; } .bd-palette h4 + .bd-pal { margin-bottom: 12px; } .bd-pal { display: flex; flex-direction: column; gap: 3px; } .bd-pi { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2); cursor: grab; font-size: 12.5px; text-align: left; color: var(--ink); } .bd-pi:hover { border-color: var(--accent); background: var(--accent-bg); } .bd-pi .ico { width: 22px; text-align: center; font-size: 14px; flex: none; } .bd-pi.preset { background: var(--accent-bg); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); } .bd-pi.preset .pn { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bd-pi .pdel { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; padding: 0 2px; font-size: 14px; line-height: 1; } .bd-pi .pdel:hover { color: var(--danger); } .bd-head { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; } .bd-icon { position: relative; font-size: 26px; cursor: pointer; width: 40px; text-align: center; } .bd-icon select { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .bd-name { flex: 1; font-size: 18px; font-weight: 700; } .bd-descr { width: 100%; margin-bottom: 12px; font-size: 13px; } .bd-root { min-height: 40px; } .bd-empty { border: 2px dashed var(--line-2); border-radius: var(--r-sm); padding: 28px; text-align: center; margin-top: 8px; } .bd-empty.drop-in, .bp-children.drop-in, .bd-root.drop-in { background: var(--accent-bg); border-color: var(--accent); } .bp { position: relative; cursor: grab; border: 1px dashed transparent; border-radius: var(--r-sm); padding: 4px 6px; } .bp:hover { border-color: var(--line-2); } .bp.on { border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent-bg) 60%, transparent); } .bp.dragging { opacity: .4; } .bp.drop-before { box-shadow: 0 -3px 0 0 var(--accent); } .bp.drop-after { box-shadow: 0 3px 0 0 var(--accent); } .bp .bp-type { color: var(--ink-3); font-weight: 400; margin-left: 4px; } .bp-input { display: block; height: 30px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--panel); margin-top: 3px; color: var(--ink-3); font-size: 12px; padding: 5px 8px; } .bp-input.tall { height: 64px; } .bp-input.chk { border: 0; padding-left: 0; } .bp-children { min-height: 34px; border-radius: 6px; padding: 4px; } /* 大きさをマウスで変えるつまみ（右下） */ .bp-resize { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; cursor: nwse-resize; opacity: .35; background: linear-gradient(135deg, transparent 50%, var(--accent) 50%); border-radius: 0 0 4px 0; } .bp:hover .bp-resize, .bp.on .bp-resize { opacity: 1; } .bp.resizing { border-color: var(--accent); background: var(--accent-bg); user-select: none; } .bd-size { display: flex; align-items: center; gap: 8px; } .bd-size input[type=range] { flex: 1; } .bd-size-q { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; } .bp-hint { flex-basis: 100%; color: var(--ink-3); font-size: 12px; text-align: center; padding: 6px; border: 1px dashed var(--line); border-radius: 6px; } .bd-props .field { margin-bottom: 8px; } .bd-sel-type { font-weight: 700; margin-bottom: 8px; color: var(--accent-d); } .bd-actions { display: flex; gap: 6px; margin-top: 10px; } .bd-flash { margin-bottom: 10px; } @media (max-width: 900px) { .bd { grid-template-columns: 1fr; } .bd-palette .bd-pal { flex-direction: row; flex-wrap: wrap; } .ap-cols { grid-template-columns: 1fr; } } /* ---------------------------------------------------------------- アンケート */ .sv-list { list-style: none; margin: 0; padding: 0; } .sv-item { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid var(--line); } .sv-item.done .sv-main b { color: var(--ink-2); } .sv-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: var(--ink); } .sv-main:hover { text-decoration: none; } .sv-main:hover b { color: var(--accent-d); } .sv-ico { font-size: 26px; flex: none; } .sv-ico.big { font-size: 40px; } .sv-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sv-state { display: flex; align-items: center; gap: 8px; flex: none; } .sv-answer { max-width: 820px; margin: 0 auto; } .sv-title { display: flex; gap: 14px; align-items: center; } .sv-title h2 { margin: 0 0 4px; } .sv-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .sv-stats .stat { flex: 1 1 120px; background: var(--panel-2); border-radius: var(--r-sm); padding: 10px 14px; text-align: center; } .sv-stats .stat b { display: block; font-size: 22px; } .sv-stats .stat small { color: var(--ink-3); } .sv-q { padding: 12px 0; border-top: 1px solid var(--line); } .sv-q h4 { margin: 0 0 8px; } .bars { display: flex; flex-direction: column; gap: 5px; } .bar-row { display: grid; grid-template-columns: minmax(80px, 180px) 1fr 90px; gap: 10px; align-items: center; font-size: 13px; } .bar-label { overflow-wrap: anywhere; } .bar-track { height: 18px; background: var(--panel-2); border-radius: 9px; overflow: hidden; } .bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #fff)); border-radius: 9px; transition: width .3s; } .bar-n { text-align: right; font-variant-numeric: tabular-nums; } .sv-texts { margin: 0; padding-left: 18px; } .sv-texts li { margin: 4px 0; } .sv-names { margin: 6px 0 0; padding-left: 18px; columns: 2; font-size: 13px; } .sv-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .table.rank .c-rank { width: 70px; white-space: nowrap; font-weight: 700; } .table.rank .c-val { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .table.rank .c-bar { width: 40%; } .table.rank .c-bar .bar-track { display: inline-block; width: calc(100% - 52px); height: 14px; vertical-align: middle; margin-right: 6px; } .table.rank tr.r1 td { background: color-mix(in srgb, #fde68a 35%, transparent); } .table.rank tr.sum td { border-top: 2px solid var(--line-2); font-weight: 700; } .table.pivot th { text-align: center; white-space: nowrap; } .table.pivot tbody th { text-align: left; background: var(--panel-2); } .table.pivot td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .table.pivot td.hit { background: color-mix(in srgb, var(--accent-bg) 70%, transparent); } .table.pivot .pv-sum, .table.pivot tr.sum td, .table.pivot tr.sum th { font-weight: 700; } .table.pivot tr.sum td, .table.pivot tr.sum th { border-top: 2px solid var(--line-2); } .table.pivot .pv-corner { text-align: left; color: var(--ink-3); font-weight: 500; } .table.ct th { text-align: center; } .table.ct td { text-align: center; font-variant-numeric: tabular-nums; } .table.ct td.hit { background: var(--accent-bg); font-weight: 600; } .table.ct tr.sum td, .table.ct tr.sum th { border-top: 2px solid var(--line-2); } /* デザイン「フォーム」：1問ずつ大きく、縦に並ぶ */ .app-theme-form .ap-field { flex-basis: 100%; } .app-theme-form .ap-field > .field-label { font-size: 15px; color: var(--ink); margin-bottom: 4px; display: block; } .app-theme-form .ap-field input[type=text], .app-theme-form .ap-field input[type=url], .app-theme-form .ap-field input[type=date], .app-theme-form .ap-field input[type=datetime-local], .app-theme-form .ap-field textarea, .app-theme-form .ap-field select { font-size: 15px; padding: 10px 12px; } .app-theme-form .chips .chip { font-size: 14px; padding: 7px 14px; } .app-theme-form .chips.scale .chip { min-width: 46px; text-align: center; justify-content: center; } .app-theme-form .ap-box { border: 0; border-left: 4px solid var(--accent); border-radius: 0; background: var(--panel-2); } .app-theme-form.ap-form .ap-row > .ap-field, .app-theme-form.ap-view .ap-row > .ap-field { padding: 10px 0 6px; border-bottom: 1px solid var(--line); } .sv-form .form-actions { justify-content: center; } @media (max-width: 680px) { .bar-row { grid-template-columns: 80px 1fr 70px; } .sv-names { columns: 1; } } /* ダッシュボード */ .dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; align-items: start; } .dash .card { margin: 0; } .dash-stat b { display: block; font-size: 32px; line-height: 1.2; margin-top: 4px; font-variant-numeric: tabular-nums; } .dash-stat .unit { font-size: 14px; margin-left: 4px; color: var(--ink-2); font-weight: 500; } .dash-chart, .dash-pivot, .dash-recent { grid-column: span 2; } .dash h4 { margin: 0 0 8px; } .dash-w .bd-actions { margin-top: 6px; } @media (max-width: 680px) { .dash-chart, .dash-pivot, .dash-recent { grid-column: span 1; } } /* デザインテンプレート：ダッシュボード／ノート／ダーク */ .app-theme-dashboard .ap-box > legend { background: var(--ink); color: #fff; border-radius: 4px; padding: 2px 10px; } .app-theme-dashboard .ap-box { border-color: var(--line-2); } .app-theme-dashboard .rec-table th { background: var(--ink); color: #fff; } .app-theme-dashboard .rec-table th a { color: #fff; } .app-theme-dashboard .rec-table td { padding: 6px 10px; } .app-theme-note .ap-field { flex-basis: 100%; } .app-theme-note .ap-box { border: 0; padding: 4px 0; } .app-theme-note .ap-box > legend { font-size: 15px; padding: 0; } .app-theme-note .ap-field textarea { min-height: 220px; line-height: 1.8; font-size: 15px; } .app-theme-note .ap-field .field-label { font-size: 12px; color: var(--ink-3); } .app-theme-note.ap-form, .app-theme-note.ap-view { max-width: 820px; margin-left: auto; margin-right: auto; } .app-theme-dark { background: #1c2333; color: #e5e7eb; --panel: #263042; --panel-2: #1f2837; --line: #3a4557; --line-2: #4b5768; --ink: #e5e7eb; --ink-2: #cbd5e1; --ink-3: #94a3b8; } .app-theme-dark .ap-box { background: #263042; border-color: #3a4557; } .app-theme-dark input, .app-theme-dark select, .app-theme-dark textarea { background: #0f172a; color: #e5e7eb; border-color: #4b5768; } .app-theme-dark .chip { background: #263042; border-color: #4b5768; color: #e5e7eb; } .app-theme-dark .chip.on { background: var(--accent); } .app-theme-dark .rec-table th { background: #0f172a; color: #cbd5e1; } .app-theme-dark .rec-table td, .app-theme-dark .rec-table th { border-color: #3a4557; } .app-theme-dark .rec-table tr:hover td { background: #1f2837; } .app-theme-dark .rec-card { background: #263042; border-color: #3a4557; color: #e5e7eb; } .app-theme-dark .muted, .app-theme-dark .field-label { color: #94a3b8; } .app-theme-dark .ap-calc, .app-theme-dark .tbl-edit output.num { background: #0f172a; } .seg.tabs.views { align-items: center; } .seg.tabs.views .link { padding: 4px 8px; } /* 採点・評価 */ .aud { border: 1px dashed var(--line-2); border-radius: var(--r-sm); padding: 8px 10px; margin: 4px 0 8px; } .aud .field { margin-bottom: 6px; } .bd-settings .aud .part { grid-template-columns: 1fr; } /* 設定欄は狭いので、社員の一覧と選択中を縦に積む */ .bd-settings .aud .part-list { max-height: 180px; } .bd-settings .aud .part-box { min-height: 48px; } .sc-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; } @media (max-width: 900px) { .sc-grid { grid-template-columns: 1fr; } } .sc-targets .sv-item.cur { background: var(--accent-bg); border-radius: var(--r-sm); } .sc-head { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; } .sc-head h2 { margin: 0 0 2px; } .sc-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } .sc-item h4, .sc-cg h4 { margin: 0 0 6px; } .sc-chart { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; } .sc-cg { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; } .sc-cg .bar-row { grid-template-columns: 72px 1fr 44px; } .sc-table .c-bar .bar-track { display: inline-block; width: 100%; height: 14px; vertical-align: middle; } .sc-sub { margin: 16px 0 8px; } .bar-fill.c1 { background: linear-gradient(90deg, #0d9488, #5eead4); } .bar-fill.c2 { background: linear-gradient(90deg, #d97706, #fcd34d); } .bar-fill.c3 { background: linear-gradient(90deg, #db2777, #f9a8d4); } .bar-fill.c4 { background: linear-gradient(90deg, #2563eb, #93c5fd); } .bar-fill.c5 { background: linear-gradient(90deg, #7c3aed, #c4b5fd); } .sc-table.status td.c-t, .sc-table.status th.c-t { text-align: center; } .sc-table.status tr.ok td { background: var(--ok-bg); } .sc-table.status tr.none td b { color: var(--danger); } .sc-table.status .ok { color: var(--ok); font-weight: 700; } .print-head { display: none; } @media print { .print-head { display: block; margin-bottom: 8px; } .no-print, .seg.tabs, .quick, .me, .bell { display: none !important; } .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; } .sc-sec { page-break-inside: avoid; } .bar-fill { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .table.rank tr.r1 td, .table.pivot td.hit, .sc-table.status tr.ok td { -webkit-print-color-adjust: exact; print-color-adjust: exact; } body.app { display: block; } .frame { margin: 0; } } /* ================================================================ ファイル管理（files.html。.fx の中だけ） 色の付け方：.fc-<色> が --c（フォルダの色）を、.t-<種類> が --kc（形式の色）を決め、部品はそれを使う。 */ .fc-none { --c: var(--fc-none); } .fc-blue { --c: var(--fc-blue); } .fc-sky { --c: var(--fc-sky); } .fc-teal { --c: var(--fc-teal); } .fc-green { --c: var(--fc-green); } .fc-lime { --c: var(--fc-lime); } .fc-yellow { --c: var(--fc-yellow); } .fc-orange { --c: var(--fc-orange); } .fc-red { --c: var(--fc-red); } .fc-pink { --c: var(--fc-pink); } .fc-purple { --c: var(--fc-purple); } .fc-gray { --c: var(--fc-gray); } .t-pdf { --kc: var(--ft-pdf); } .t-xls { --kc: var(--ft-xls); } .t-doc { --kc: var(--ft-doc); } .t-ppt { --kc: var(--ft-ppt); } .t-img { --kc: var(--ft-img); } .t-video { --kc: var(--ft-video); } .t-zip { --kc: var(--ft-zip); } .t-text { --kc: var(--ft-text); } .t-mail { --kc: var(--ft-mail); } .t-other { --kc: var(--ft-other); } /* フォルダのアイコン：色の淡い角丸の中に絵文字 */ .fo-ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; background: color-mix(in srgb, var(--c, var(--fc-none)) 20%, var(--panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--fc-none)) 35%, transparent); font-size: 16px; line-height: 1; } .fo-ico.sm { width: 22px; height: 22px; border-radius: 6px; font-size: 12px; } .fo-ico.lg { width: 56px; height: 56px; border-radius: 14px; font-size: 30px; } /* 左：お気に入り・木 */ .fx-side { display: flex; flex-direction: column; gap: 2px; } .fx-side-h { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--ink-3); letter-spacing: .04em; padding: 6px 4px 4px; } .fx-side-h .link { font-size: 15px; padding: 0 4px; color: var(--ink-3); } .fx-side-h .link:hover { color: var(--accent); text-decoration: none; } .fx-side-sep { height: 1px; background: var(--line); margin: 8px 0 4px; } .tree-filter { width: 100%; margin: 2px 0 6px; padding: 6px 10px; font-size: 13px; } .fx .tree-item { display: flex; align-items: center; gap: 7px; padding: 5px 8px; } .fx .tree-item .ti-name { flex: 1 1 auto; min-width: 0; } .fx .tree-item .ti-n { flex: 0 0 auto; font-size: 10.5px; color: var(--ink-3); background: var(--panel-2); border-radius: 999px; padding: 0 7px; line-height: 18px; } .fx .tree-item.on .ti-n { background: var(--panel); color: var(--accent-d); } .fx .tree-item.fav .ti-name { font-weight: 600; } /* 右：見出し（フォルダの色の帯） */ .fx-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 10px; border-radius: var(--r); border: 1px solid var(--line); border-top: 4px solid var(--c, var(--accent)); background: linear-gradient(135deg, color-mix(in srgb, var(--c, var(--accent)) 12%, var(--panel)) 0%, var(--panel) 70%); } .fx-head-main { flex: 1 1 280px; min-width: 0; } /* 上の階層へ（見出しの左端） */ .up-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 46px; height: 56px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--panel); color: var(--ink-2); font-size: 18px; line-height: 1; } .up-btn small { font-size: 10.5px; } .up-btn:hover { border-color: var(--c, var(--accent)); color: var(--accent-d); background: var(--accent-bg); text-decoration: none; } .fx-crumbs { margin: 0; font-size: 12.5px; } .fx-title { margin: 2px 0 4px; font-size: 21px; line-height: 1.3; overflow-wrap: anywhere; } .fx-stats { display: flex; gap: 6px; flex-wrap: wrap; } .fx-stats span { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 1px 10px; color: var(--ink-2); } .fx-head-act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .fav-btn.on { color: var(--fc-yellow); border-color: var(--fc-yellow); font-weight: 700; } .fx-panel { margin: 0 0 12px; } .fx-h { font-size: 13.5px; color: var(--ink-2); margin: 14px 0 8px; } .fx-empty .big { font-size: 42px; } /* 色・アイコンを選ぶ */ .look-form { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line-2); } .swatches, .icon-pick { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; } .swatch, .icon-pick label { position: relative; } .swatch input, .icon-pick input { position: absolute; opacity: 0; pointer-events: none; } .swatch span { display: block; width: 26px; height: 26px; border-radius: 50%; background: var(--c); cursor: pointer; box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--line-2); } .swatch input:checked + span { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--ink); } .icon-pick span { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; font-size: 18px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--panel); cursor: pointer; } .icon-pick input:checked + span { border-color: var(--accent); background: var(--accent-bg); box-shadow: 0 0 0 1px var(--accent); } /* フォルダのタイル（上の縁がフォルダの色） */ .fx .folder-tile { flex-direction: column; gap: 4px; border-top: 3px solid var(--c, var(--fc-none)); background: linear-gradient(180deg, color-mix(in srgb, var(--c, var(--fc-none)) 8%, var(--panel)), var(--panel)); transition: transform .08s, box-shadow .08s; } .fx .folder-tile:hover { transform: translateY(-1px); box-shadow: var(--sh-2); border-color: var(--c, var(--accent)); background: var(--panel); } .fx .folder-tile .ft-name { overflow-wrap: anywhere; } .fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; } /* 最近更新されたファイル */ .recent-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 6px 14px; } .recent-list li { padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); min-width: 0; } .recent-list li > a { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; } .recent-list .rl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .recent-list small { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 形式で絞り込む */ .type-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; } .type-chips .chip small { color: var(--ink-3); } .type-chips .chip.on small { color: inherit; opacity: .85; } .type-chips .chip.tc i { width: 9px; height: 9px; border-radius: 3px; background: var(--kc); display: inline-block; } /* 形式の札：一覧では名前の前に小さく（アイコン表示では右下に重ねる .fg-ext） */ .fg-ext { background: var(--kc, var(--ft-other)); } .files-table .fg-ext, .recent-list .fg-ext { position: static; display: inline-block; min-width: 38px; text-align: center; font-size: 10px; vertical-align: 1px; } .files-table .c-name .file-name { font-weight: 600; } .files-table .c-sel, .files-table th.c-sel { width: 28px; padding-right: 0; } .files-table tr.picked td { background: var(--accent-bg); } .nowrap { white-space: nowrap; } .sel-all { font-size: 12px; margin-right: 4px; } /* アイコン表示：紙の形のアイコン（形式の色）・選ぶチェック */ .doc-ico { position: relative; width: 44px; height: 56px; border-radius: 4px 12px 4px 4px; margin: 4px auto 0; background: linear-gradient(135deg, color-mix(in srgb, var(--kc) 16%, var(--panel)), var(--panel)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--kc) 70%, transparent); } .doc-ico::before { content: ""; position: absolute; left: 10px; right: 10px; top: 20px; height: 2px; background: color-mix(in srgb, var(--kc) 45%, transparent); box-shadow: 0 7px 0 color-mix(in srgb, var(--kc) 45%, transparent), 0 14px 0 color-mix(in srgb, var(--kc) 30%, transparent); } .file-tile .fg-ico.doc-ico { font-size: 0; line-height: normal; height: 56px; } .file-tile-wrap { position: relative; } .file-tile-wrap .sel { position: absolute; top: 8px; left: 8px; z-index: 1; opacity: .35; transition: opacity .1s; } .file-tile-wrap:hover .sel, .file-tile-wrap .sel:checked { opacity: 1; } .file-tile-wrap.picked .file-tile { border-color: var(--accent); background: var(--accent-bg); box-shadow: 0 0 0 1px var(--accent); } .fx .file-tile { height: 100%; transition: transform .08s, box-shadow .08s; } .fx .file-tile:hover { transform: translateY(-1px); box-shadow: var(--sh-2); } /* まとめて操作の帯（下に貼りつく） */ .bulk-bar { position: sticky; bottom: 12px; z-index: 20; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; padding: 10px 14px; background: var(--panel); border: 1px solid var(--accent); border-radius: var(--r); box-shadow: var(--sh-2); } .bulk-bar b { color: var(--accent-d); margin-right: 4px; } .bulk-bar select { max-width: 260px; } /* 施設・備品の予約：もう一方（施設なら備品）の見出し */ .res-other-h { margin: 10px 0 2px; padding-top: 8px; border-top: 1px dashed var(--line-2); font-size: 12.5px; font-weight: 700; color: var(--ink-2); } .live-conflict ul { margin: 4px 0 0; padding-left: 18px; } /* スマホ：左（フォルダの木・掲示板のカテゴリー）は隠して中身を上に出す（下までスクロールしないと見えなかった＝要件）。 見出しの「🗂 フォルダ／カテゴリー」（[data-side-toggle]）で .fx に show-side を付けて開く */ .sp-only { display: none !important; } .board-fx .ti-n.unread-n { background: var(--accent); color: #fff; } .unread-txt { color: var(--accent-d); } .add-cat { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 4px 8px; } .add-cat input { flex: 1 1 120px; min-width: 0; } @media (max-width: 680px) { .sp-only { display: inline-flex !important; } .fx:not(.show-side) > .fx-side { display: none; } .fx.show-side > .fx-side { max-height: 60vh; } .fx-head { padding: 10px 12px; } .fx-head-act { justify-content: flex-start; } .recent-list { grid-template-columns: minmax(0, 1fr); } .files-table { font-size: 13px; } } @media print { .bulk-bar, .fx-head-act, .files-search, .type-chips, .sort-bar { display: none !important; } }