@charset "UTF-8";
/* ============================================================================
retro95.css v1.0
1995年ごろのWindows 95 / Netscape Navigator 風UIを再現する単体CSS
依存なし・Webフォントなし。するだけで素のHTMLが95年の見た目になります。
使い方:
… ティールのデスクトップ背景
2つのモード:
既定 … MS Sans Serif のアプリケーションUI
.retro-doc … Times New Roman の「昔のホームページ」文書
========================================================================== */
/* --- 1. トークン ---------------------------------------------------------- */
:root {
--face: #c0c0c0; /* コントロール面（シルバー） */
--face-light: #dfdfdf; /* 面のハイライト */
--white: #ffffff;
--shadow: #808080; /* 面の影 */
--dark: #0a0a0a; /* 外周の黒 */
--text: #000000;
--disabled: #808080;
--title-a1: #000080; /* アクティブなタイトルバー */
--title-a2: #1084d0;
--title-i1: #808080; /* 非アクティブ */
--title-i2: #b5b5b5;
--title-text: #ffffff;
--select: #000080; /* 選択範囲 */
--select-text: #ffffff;
--desktop: #008080; /* デスクトップのティール */
--link: #0000ee;
--visited: #551a8b;
--alink: #ff0000;
--info: #000080;
--font-ui: "MS Sans Serif", "MS UI Gothic", Tahoma, Verdana, Meiryo, "Hiragino Kaku Gothic ProN", sans-serif;
--font-doc: "Times New Roman", "MS PMincho", "ＭＳ Ｐ明朝", "Hiragino Mincho ProN", serif;
--font-mono: "Courier New", "MS Gothic", Osaka-Mono, monospace;
/* 立体の縁取り。Win95は外1px・内1pxの2重ベベル */
--raised: inset -1px -1px var(--dark), inset 1px 1px var(--white),
inset -2px -2px var(--shadow), inset 2px 2px var(--face-light);
--pressed: inset -1px -1px var(--white), inset 1px 1px var(--dark),
inset -2px -2px var(--face-light), inset 2px 2px var(--shadow);
--field: inset -1px -1px var(--white), inset 1px 1px var(--shadow),
inset -2px -2px var(--face-light), inset 2px 2px var(--dark);
--raised-1: inset -1px -1px var(--shadow), inset 1px 1px var(--white);
--sunken-1: inset -1px -1px var(--white), inset 1px 1px var(--shadow);
}
/* --- 2. 土台 -------------------------------------------------------------- */
* { box-sizing: border-box; }
html { background: var(--face); }
body {
margin: 0;
padding: 16px;
min-height: 100vh;
background: var(--face);
color: var(--text);
font: 12px/1.45 var(--font-ui);
-webkit-font-smoothing: none;
-moz-osx-font-smoothing: grayscale;
font-smooth: never;
}
::selection { background: var(--select); color: var(--select-text); }
:focus-visible { outline: 1px dotted var(--text); outline-offset: 1px; }
/* デスクトップ背景 */
.desktop { background: var(--desktop); padding: 20px; }
/* --- 3. 文字組み ---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
margin: 0 0 8px;
font-weight: bold;
line-height: 1.25;
text-wrap: balance;
}
h1 { font-size: 20px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 12px; }
p { margin: 0 0 10px; }
p:last-child { margin-bottom: 0; }
small { font-size: 11px; }
b, strong { font-weight: bold; }
/* Netscapeの
は2pxの溝 */
hr {
height: 2px;
margin: 12px 0;
border: none;
background: transparent;
box-shadow: inset 0 1px var(--shadow), inset 0 -1px var(--white);
}
/* 90年代の定番、虹色の区切りバー */
hr.rainbow {
height: 6px;
box-shadow: none;
background: linear-gradient(90deg,
#ff0000 0%, #ff8000 16%, #ffff00 33%, #00c000 50%,
#00c0ff 66%, #0000ff 83%, #c000ff 100%);
}
blockquote {
margin: 0 0 10px;
padding: 6px 10px;
background: var(--face);
box-shadow: var(--sunken-1);
}
ul, ol { margin: 0 0 10px; padding-left: 24px; }
li { margin-bottom: 2px; }
dl { margin: 0 0 10px; }
dt { font-weight: bold; }
dd { margin: 0 0 6px 16px; }
code, kbd, samp { font-family: var(--font-mono); font-size: 12px; }
kbd {
display: inline-block;
padding: 1px 5px;
background: var(--face);
box-shadow: var(--raised);
}
pre {
margin: 0 0 10px;
padding: 8px;
overflow-x: auto;
background: var(--white);
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.4;
box-shadow: var(--field);
}
pre code { font-size: inherit; }
/* --- 4. リンク ------------------------------------------------------------ */
a { color: var(--link); text-decoration: underline; }
a:visited { color: var(--visited); }
a:active { color: var(--alink); }
/* 当時のブラウザはリンク画像に青枠を付けた */
.retro-doc a img { border: 2px solid var(--link); }
/* --- 5. 昔のホームページ文書モード ---------------------------------------- */
.retro-doc {
font-family: var(--font-doc);
font-size: 16px;
line-height: 1.5;
}
.retro-doc h1 { font-size: 32px; }
.retro-doc h2 { font-size: 24px; }
.retro-doc h3 { font-size: 19px; }
.retro-doc p { margin-bottom: 14px; }
/* のあの構図 */
.retro-doc.paper {
max-width: 600px;
margin: 0 auto;
padding: 16px;
background: var(--white);
}
/* --- 6. ボタン ------------------------------------------------------------ */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.btn {
display: inline-block;
min-width: 75px;
min-height: 23px;
padding: 3px 12px 4px;
border: none;
border-radius: 0;
background: var(--face);
color: var(--text);
font: 12px var(--font-ui);
text-align: center;
text-decoration: none;
cursor: default;
box-shadow: var(--raised);
}
button:active:not(:disabled),
input[type="button"]:active:not(:disabled),
input[type="submit"]:active:not(:disabled),
input[type="reset"]:active:not(:disabled),
.btn:active,
button[aria-pressed="true"],
.btn.is-active {
padding: 4px 11px 3px 13px;
box-shadow: var(--pressed);
}
button:focus-visible,
.btn:focus-visible {
outline: 1px dotted var(--text);
outline-offset: -4px;
}
button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
.btn[aria-disabled="true"] {
color: var(--disabled);
text-shadow: 1px 1px 0 var(--white);
}
/* 既定のボタン（OK）は黒い外枠が1本増える */
button.default { box-shadow: var(--raised), inset 0 0 0 1px var(--dark); }
/* --- 7. 入力欄 ------------------------------------------------------------ */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], input[type="tel"],
input[type="url"], input[type="date"], input[type="time"],
textarea, select {
padding: 3px 4px;
border: none;
border-radius: 0;
background: var(--white);
color: var(--text);
font: 12px var(--font-ui);
box-shadow: var(--field);
}
input:focus, textarea:focus, select:focus { outline: none; }
input:disabled, textarea:disabled, select:disabled {
background: var(--face);
color: var(--disabled);
text-shadow: 1px 1px 0 var(--white);
}
textarea { resize: both; line-height: 1.4; }
/* セレクトの右端は下向き三角のボタン */
select {
appearance: none;
-webkit-appearance: none;
padding-right: 22px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' shape-rendering='crispEdges'%3E%3Crect width='16' height='17' fill='%23c0c0c0'/%3E%3Cpath fill='%23ffffff' d='M0 0h16v1H0zM0 0h1v17H0z'/%3E%3Cpath fill='%23dfdfdf' d='M1 1h14v1H1zM1 1h1v15H1z'/%3E%3Cpath fill='%230a0a0a' d='M0 16h16v1H0zM15 0h1v17h-1z'/%3E%3Cpath fill='%23808080' d='M1 15h14v1H1zM14 1h1v15h-1z'/%3E%3Cpath fill='%23000000' d='M5 7h7v1H5zM6 8h5v1H6zM7 9h3v1H7zM8 10h1v1H8z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 2px center;
}
select[multiple], select[size] {
appearance: none;
padding: 2px;
background-image: none;
}
select option { padding: 1px 3px; }
/* チェックボックスとラジオ */
input[type="checkbox"], input[type="radio"] {
position: relative;
width: 13px;
height: 13px;
margin: 0 4px 0 0;
padding: 0;
appearance: none;
-webkit-appearance: none;
background: var(--white);
box-shadow: var(--field);
vertical-align: -2px;
}
input[type="checkbox"]:disabled, input[type="radio"]:disabled { background: var(--face); }
input[type="checkbox"]:checked::after {
content: "";
position: absolute;
inset: 0;
background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' shape-rendering='crispEdges'%3E%3Cpath fill='%23000000' d='M0 2h1v1H0zM1 3h1v1H1zM2 4h1v1H2zM3 3h1v1H3zM4 2h1v1H4zM5 1h1v1H5zM6 0h1v1H6zM0 3h1v1H0zM1 4h1v1H1zM2 5h1v1H2zM3 4h1v1H3zM4 3h1v1H4zM5 2h1v1H5zM6 1h1v1H6z'/%3E%3C/svg%3E") no-repeat center;
}
input[type="radio"] { border-radius: 50%; }
input[type="radio"]:checked::after {
content: "";
position: absolute;
left: 4px;
top: 4px;
width: 5px;
height: 5px;
background: var(--text);
border-radius: 50%;
}
/* スライダー（トラックバー） */
input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 160px;
height: 21px;
background: transparent;
}
input[type="range"]::-webkit-slider-runnable-track {
height: 4px;
background: var(--face);
box-shadow: var(--field);
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 11px;
height: 21px;
margin-top: -8px;
background: var(--face);
box-shadow: var(--raised);
}
input[type="range"]::-moz-range-track {
height: 4px; background: var(--face); box-shadow: var(--field);
}
input[type="range"]::-moz-range-thumb {
width: 11px; height: 21px; border: none; border-radius: 0;
background: var(--face); box-shadow: var(--raised);
}
/* ラベル行 */
.field-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.field-row-stacked {
display: flex; flex-direction: column; gap: 3px;
margin-bottom: 8px; align-items: flex-start;
}
.field-row > label, .field-row-stacked > label { white-space: nowrap; }
/* --- 8. グループボックス -------------------------------------------------- */
fieldset {
margin: 0 0 12px;
padding: 14px 10px 10px;
border: 1px solid var(--shadow);
box-shadow: inset 1px 1px 0 0 var(--white), inset -1px -1px 0 0 var(--white);
}
legend { padding: 0 4px; background: var(--face); }
/* --- 9. 表 ---------------------------------------------------------------- */
table {
border-collapse: collapse;
background: var(--white);
box-shadow: var(--field);
font-size: 12px;
}
caption { padding: 4px; font-weight: bold; text-align: left; }
th {
padding: 3px 8px;
background: var(--face);
font-weight: normal;
text-align: left;
white-space: nowrap;
box-shadow: var(--raised-1);
}
td { padding: 2px 8px; }
tbody tr:hover { background: #eaeaea; }
tbody tr[aria-selected="true"] { background: var(--select); color: var(--select-text); }
/* の見た目 */
table.classic {
border: 2px outset var(--face);
border-collapse: separate;
border-spacing: 2px;
background: var(--face);
box-shadow: none;
}
table.classic th, table.classic td {
border: 1px inset var(--face);
padding: 2px 6px;
box-shadow: none;
}
.table-scroll { overflow-x: auto; }
/* --- 10. ウィンドウ ------------------------------------------------------- */
.window {
padding: 3px;
background: var(--face);
box-shadow: var(--raised);
}
.title-bar {
display: flex;
align-items: center;
gap: 4px;
height: 18px;
padding: 0 2px 0 3px;
background: linear-gradient(90deg, var(--title-a1), var(--title-a2));
color: var(--title-text);
font-size: 11px;
font-weight: bold;
user-select: none;
}
.window.inactive > .title-bar,
.title-bar.inactive {
background: linear-gradient(90deg, var(--title-i1), var(--title-i2));
}
.title-bar-text {
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.title-bar-controls { display: flex; gap: 2px; }
.title-bar-controls button {
position: relative;
width: 16px;
min-width: 16px;
height: 14px;
min-height: 14px;
padding: 0;
}
.title-bar-controls button:active { padding: 0; }
.btn-min::after {
content: ""; position: absolute; left: 3px; bottom: 3px;
width: 6px; height: 2px; background: var(--text);
}
.btn-max::after {
content: ""; position: absolute; left: 2px; top: 2px;
width: 9px; height: 7px; border: 1px solid var(--text); border-top-width: 2px;
}
.btn-close::before, .btn-close::after {
content: ""; position: absolute; left: 2px; top: 5px;
width: 9px; height: 2px; background: var(--text);
}
.btn-close::before { transform: rotate(45deg); }
.btn-close::after { transform: rotate(-45deg); }
.window-body { margin: 3px; }
/* --- 11. メニューバー ----------------------------------------------------- */
.menu-bar {
display: flex;
align-items: center;
margin: 1px 0 3px;
font-size: 12px;
user-select: none;
}
.menu-bar > * {
padding: 2px 7px;
color: var(--text);
text-decoration: none;
cursor: default;
}
.menu-bar > *:hover { background: var(--select); color: var(--select-text); }
.menu-bar u { text-decoration: underline; }
/* --- 12. ツールバー ------------------------------------------------------- */
.toolbar {
display: flex;
align-items: center;
gap: 2px;
padding: 2px;
margin-bottom: 3px;
box-shadow: var(--raised-1);
}
.toolbar button { min-width: 24px; height: 23px; padding: 2px 6px; }
.toolbar .separator {
width: 2px; height: 20px; margin: 0 3px;
box-shadow: inset 1px 0 var(--shadow), inset -1px 0 var(--white);
}
/* --- 13. タブ ------------------------------------------------------------- */
.tabs {
display: flex;
position: relative;
z-index: 1;
margin: 0 0 -2px 3px;
padding: 0;
list-style: none;
}
.tab {
min-width: 0;
height: 22px;
min-height: 0;
margin: 0;
padding: 3px 11px;
background: var(--face);
border-radius: 3px 3px 0 0;
font: 12px var(--font-ui);
cursor: default;
box-shadow: inset 1px 1px var(--white), inset 2px 2px var(--face-light),
inset -1px 0 var(--dark), inset -2px 0 var(--shadow);
}
.tab[aria-selected="true"] {
z-index: 2;
height: 24px;
margin: -2px -2px 0 -2px;
padding: 4px 13px 5px;
}
.tab:active { padding: 3px 11px; }
.tab[aria-selected="true"]:active { padding: 4px 13px 5px; }
.tab-panel {
position: relative;
padding: 12px;
background: var(--face);
box-shadow: var(--raised);
}
.tab-panel[hidden] { display: none; }
/* --- 14. ステータスバー --------------------------------------------------- */
.status-bar { display: flex; gap: 2px; margin: 3px 0 0; }
.status-bar-field {
flex: 1;
padding: 2px 5px;
box-shadow: var(--sunken-1);
font-size: 11px;
}
.status-bar-field.fixed { flex: 0 0 auto; }
/* --- 15. リストビュー・ツリービュー --------------------------------------- */
.list-view, .tree-view {
padding: 4px;
background: var(--white);
box-shadow: var(--field);
overflow: auto;
}
.tree-view ul { margin: 0; padding-left: 16px; list-style: none; }
.tree-view > ul { padding-left: 4px; }
.tree-view li { position: relative; padding: 1px 0 1px 2px; }
.tree-view li > ul { margin-left: 5px; border-left: 1px dotted var(--shadow); }
.list-view > * { padding: 1px 4px; }
.list-view > [aria-selected="true"],
.tree-view [aria-selected="true"] {
background: var(--select); color: var(--select-text);
}
/* --- 16. 進捗バー --------------------------------------------------------- */
.progress {
height: 20px;
padding: 2px;
background: var(--face);
box-shadow: var(--field);
}
.progress > .bar {
height: 100%;
background: repeating-linear-gradient(90deg,
var(--title-a1) 0 10px, var(--face) 10px 12px);
}
progress {
-webkit-appearance: none;
appearance: none;
width: 220px;
height: 20px;
border: none;
background: var(--face);
box-shadow: var(--field);
}
progress::-webkit-progress-bar { background: var(--face); }
progress::-webkit-progress-value {
background: repeating-linear-gradient(90deg,
var(--title-a1) 0 10px, var(--face) 10px 12px);
}
progress::-moz-progress-bar {
background: repeating-linear-gradient(90deg,
var(--title-a1) 0 10px, var(--face) 10px 12px);
}
/* --- 17. メッセージボックス ----------------------------------------------- */
.dialog { max-width: 420px; }
.dialog-body { display: flex; gap: 14px; padding: 14px 12px 12px; align-items: flex-start; }
.dialog-icon {
flex: 0 0 32px;
width: 32px; height: 32px;
border-radius: 50%;
background: var(--info);
color: var(--white);
font: italic bold 22px/32px var(--font-doc);
text-align: center;
}
.dialog-icon.warn {
border-radius: 0;
background: transparent;
font-size: 0;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill='%23ffff00' stroke='%23000000' stroke-width='1' d='M16 2 31 30H1z'/%3E%3Cpath fill='%23000000' d='M15 12h2v10h-2zM15 24h2v3h-2z'/%3E%3C/svg%3E");
}
.dialog-buttons { display: flex; justify-content: center; gap: 8px; padding: 0 12px 12px; }
/* --- 18. タスクバー ------------------------------------------------------- */
.taskbar {
display: flex;
align-items: center;
gap: 4px;
height: 28px;
padding: 2px;
background: var(--face);
box-shadow: inset 0 1px var(--white), inset 0 2px var(--face-light);
}
.taskbar.fixed { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; }
.start-button {
display: flex;
align-items: center;
gap: 4px;
min-width: 0;
height: 22px;
min-height: 0;
padding: 0 6px 0 4px;
font-weight: bold;
}
.start-button::before {
content: "";
width: 16px; height: 14px;
background: conic-gradient(from 180deg at 50% 50%,
#ff0000 0 25%, #00a800 0 50%, #0000c0 0 75%, #ffc000 0 100%);
}
.taskbar .tasks { display: flex; flex: 1; gap: 3px; overflow: hidden; }
.taskbar .tasks button {
flex: 0 1 170px;
min-width: 0;
height: 22px;
min-height: 0;
padding: 2px 8px;
overflow: hidden;
text-align: left;
white-space: nowrap;
text-overflow: ellipsis;
}
.tray {
display: flex; align-items: center; gap: 6px;
height: 22px; padding: 0 8px;
box-shadow: var(--sunken-1);
font-size: 11px;
}
/* --- 19. スクロールバー --------------------------------------------------- */
* { scrollbar-width: auto; scrollbar-color: var(--face) var(--white); }
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track {
background: repeating-conic-gradient(var(--white) 0% 25%, var(--face) 0% 50%) 0 0 / 2px 2px;
}
::-webkit-scrollbar-thumb { background: var(--face); box-shadow: var(--raised); }
::-webkit-scrollbar-corner { background: var(--face); }
::-webkit-scrollbar-button:single-button {
display: block;
width: 16px;
height: 16px;
background-color: var(--face);
background-repeat: no-repeat;
background-position: center;
box-shadow: var(--raised);
}
::-webkit-scrollbar-button:single-button:vertical:decrement {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' shape-rendering='crispEdges'%3E%3Cpath fill='%23000000' d='M3 0h1v1H3zM2 1h3v1H2zM1 2h5v1H1zM0 3h7v1H0z'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:single-button:vertical:increment {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' shape-rendering='crispEdges'%3E%3Cpath fill='%23000000' d='M0 0h7v1H0zM1 1h5v1H1zM2 2h3v1H2zM3 3h1v1H3z'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:single-button:horizontal:decrement {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7' shape-rendering='crispEdges'%3E%3Cpath fill='%23000000' d='M3 0h1v1H3zM2 1h2v1H2zM1 2h3v1H1zM0 3h4v1H0zM1 4h3v1H1zM2 5h2v1H2zM3 6h1v1H3z'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:single-button:horizontal:increment {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7' shape-rendering='crispEdges'%3E%3Cpath fill='%23000000' d='M0 0h1v1H0zM0 1h2v1H0zM0 2h3v1H0zM0 3h4v1H0zM0 4h3v1H0zM0 5h2v1H0zM0 6h1v1H0z'/%3E%3C/svg%3E");
}
/* --- 20. 90年代Webの小道具 ------------------------------------------------ */
.blink { animation: r95-blink 1s steps(1, end) infinite; }
@keyframes r95-blink { 50% { visibility: hidden; } }
.marquee { overflow: hidden; white-space: nowrap; }
.marquee > * {
display: inline-block;
padding-left: 100%;
animation: r95-marquee 14s linear infinite;
}
@keyframes r95-marquee { to { transform: translateX(-100%); } }
/* アクセスカウンタ */
.counter {
display: inline-flex;
gap: 1px;
padding: 2px;
background: var(--shadow);
box-shadow: var(--field);
}
.counter span {
width: 14px;
background: var(--text);
color: #00ff00;
font: bold 15px/18px var(--font-mono);
text-align: center;
}
/* 工事中の警告帯 */
.construction {
padding: 6px 10px;
background: var(--face);
border-top: 6px solid;
border-bottom: 6px solid;
border-image: repeating-linear-gradient(45deg,
#ffcc00 0 8px, #000000 8px 16px) 6;
text-align: center;
font-weight: bold;
}
/* --- 21. ユーティリティ --------------------------------------------------- */
.raised { box-shadow: var(--raised); }
.sunken { box-shadow: var(--field); }
.raised-thin { box-shadow: var(--raised-1); }
.sunken-thin { box-shadow: var(--sunken-1); }
.pad { padding: 10px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.col { display: flex; gap: 8px; flex-direction: column; }
.stack { display: flex; gap: 12px; flex-direction: column; }
.grow { flex: 1; }
.mono { font-family: var(--font-mono); }
.nums { font-variant-numeric: tabular-nums; }
.center-text { text-align: center; }
.disabled-text { color: var(--disabled); text-shadow: 1px 1px 0 var(--white); }
@media (prefers-reduced-motion: reduce) {
.blink, .marquee > * { animation: none; }
.blink { visibility: visible; }
}