Misskey用のWindows2000風カスタムCSSスキン

misskey2000.css

/* Misskey 2000 v1.5
Created by CYakigasi (@CYaki@misskey.backspace.fm)
Required: has() supported browser
追加情報は https://misskey.backspace.fm/@CYaki/pages/1695808629291 のページを参照してください
Misskey 2000 START */
html {
    /* font change start
    フォントを変更しない場合は、font change endまでを削除します
    */
    --textfontfamily: "MS PGothic",sans-serif;
    --uifontfamily: "MS UI Gothic", sans-serif;
    /* font change end */
    /* デフォルトフォントにする場合はこの下の行は削除しないでください */
    --defaultfont: Hiragino Maru Gothic Pro,BIZ UDGothic,Roboto,HelveticaNeue,Arial,sans-serif;
    font-family: var(--textfontfamily, var(--defaultfont, inherit)); 
    /* ここを変更してウィンドウグラデーションなどを変更
    90deg, var(--accentDarken), var(--accentLighten); で置き換えるとテーマ色に合わせます
    90deg, #0a246a, #a6caf0; で置き換えるとWindows 2K/Meのデフォルト色になります */
    --classicgradient: 90deg, #0a246a, #a6caf0;
    /* 角丸化の無効化を削除する場合はここを削除 */
    --radius: 0px !important;
    /* ウィンドウやコンテキスト背景色/文字色の変更 デフォルトは #d4d0c8/#000 */
    --miss2k-windowbg: #d4d0c8;
    --miss2k-windowfg: #000;
    /* ここは変更しないでください(エキスパンション用) */
    --miss2k-setup-check-v1-5: "";
}
body {
    /* DONT TOUCH --bodybg !! THIS IS ONLY FOR EXPANSION */
    background: var(--bodybg, var(--bg));
}
.xjSpm .ti {
    border: 2px inset #ccc;
    background: var(--miss2k-windowbg);
    color: #000;
    padding-top: 2px;
}
.x6z4X {
    border: 3px inset #ccc;
}
.xbaFh, .mvcprjjd:not(.iconOnly) > .body > .middle > .item:hover::before, .mvcprjjd:not(.iconOnly) > .body > .middle > .item.active[data-v-3946aa41]::before {
    border-radius: 0px !important
}
.mvcprjjd:not(.iconOnly) > .body > .middle > .item:hover::before, .mvcprjjd:not(.iconOnly) > .body > .middle > .item.active[data-v-3946aa41]::before {
   margin: 0px !important;
   background: linear-gradient(90deg, var(--accentedBg), rgba(0,0,0,0)) !important;
   width: auto !important;
   border-top: 1px solid var(--accentDarken) !important;
   border-bottom: 1px solid var(--accentDarken) !important;
   box-sizing: border-box;
}
.rrevdjwu > .group > .items > .item {
   border-radius: 0px !important;
}
.rrevdjwu > .group > .items > .item.active > .text {
   font-weight: bold;
}
.xjSpm .ti, .ti .ti-x {
    border: 2px inset #ccc !important;
    background: var(--miss2k-windowbg) !important;
    color: var(--miss2k-windowfg) !important;
    padding-top: 2px !important;
}

.xeHR5 {
    --height: 24px
}
.xeHR5, .xjond {
    --height: 32px !important;
    width: 100% !important;
    background: linear-gradient(var(--classicgradient)) !important;
    color: #fff !important;
}
.xfdH7 {
    font-family: var(--uifontfamily, inherit) !important;
    font-weight: normal !important;
    font-size: 12px !important;
}
.xeHoU {
    color: #fff !important;
    background: linear-gradient(var(--classicgradient)) !important;
}
.npcljfve > .divider {
    margin: 0px !important;
    height: 24px !important;
    background: #aaa;
    border: 1px solid #000;
    border-bottom: 0px !important;
    margin-top: 16px !important;
}
.npcljfve > .item {
    border-left: 1px solid #000; 
    border-right: 1px solid #000; 
}
.item._button.account {
    border: 0px !important;
    border-bottom: 2px solid #6699cc !important;
    padding-bottom: 5px;
    display: flex !important;
    flex-direction: column;
    align-items: start !important;
}
.npcljfve > .item > .avatar {
    width: 48px !important;
    height: 48px !important
}
.item._button.account > .text {
    line-height: 2rem !important;
    font-size: 18px !important;
    font-weight: bolder !important;
}
.hrmcaedk > .header {
    background: linear-gradient(var(--classicgradient)) !important;
    backdrop-filter: none !important;
    color: #fff !important;
    height: 24px !important;
    line-height: 25px !important;
    font-size: 12px !important;
    font-weight: normal !important;
}
.hrmcaedk > .header > button {
    height: 16px !important;
}
.hrmcaedk {
    border: 3px solid;
}
.npcljfve > .post > .button {
    min-width: 0;
    border: 3px inset;
    background: #eee;
    color: #000 !important;
    height: 30px;
    line-height: 12px;
    font-size: 12px;
    font-weight: normal;
}
.npcljfve > .item.active {
    color: var(--navActive);
    font-weight: bold;
    background: linear-gradient(90deg, var(--accentedBg), rgba(0,0,0,0)) !important;
}
.item:has(+ .divider) {
    border-bottom: 1px solid #000;
}
.npcljfve > .about {
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
}
/* context menu */
._button.x58RN {
    margin-right: 8px;
    border: 2px inset;
    background: var(--miss2k-windowbg);
    color: var(--miss2k-windowfg);
    border-radius: 0px;
    height: 24px;
}
._popup._shadow.x7rzo {
    background: var(--miss2k-windowbg) !important;
    color: var(--miss2k-windowfg) !important;
    border: 2px inset #ddd !important;
    padding: 0px !important;
    font-family: var(--uifontfamily, inherit) !important;
    font-size: 13px !important;
}
._popup._shadow.x7rzo .xunvs:not(:disabled):hover {
    color: #000 !important;
    background: #bbb !important;
}
._popup._shadow.x7rzo .xunvs.xlXev.xf8jW {
    color: #000 !important;
    background: #bbb !important;
}
.xunvs {
    padding: 5px 8px !important;
}
.xzo34 {
    margin: 4px 5px !important;
    border-top: solid 1px #999 !important;
    border-bottom: solid 1px #ddd !important;
}
.xunvs:active::before, .xunvs.x3tcY::before {
    background: #00a !important;
}
.xunvs::before {
    width: 100%;
    border-radius: 0;
}
.xunvs:active, .xunvs.x3tcY {
    color: #fff !important;
}
.xpxDN.xunvs {
    font-size: 11px !important;
}
/* window */
.xpAOc .xeHR5.xkPjN {
    background: transparent !important;
    color: inherit !important;
}
.xnMEB._shadow {
    border: 2px inset #fff !important;
}
.xbt7a {
    background: linear-gradient(var(--classicgradient)) !important;
    --height: 25px !important;
    color: #fff !important;
}
.xF9hE {
    margin-right: 6px !important;
    padding-top: 2px;
}
.x3FS8 {
    font-family: var(--uifontfamily, inherit) !important;
    font-weight: normal !important;
    font-size: 12px !important;
}
.xaEYs {
    padding: 2px !important;
    padding-right: 2px !important;
}
._button.x7LLr {
    background: #e3dfd7 !important;
    margin-left: 2px !important;
    color: #000 !important;
    border: 2px inset #eee !important;
    --height: 22px !important;
    height: 20px !important;
}

.xpAOc {
  container-name: layout;
  container-type: size;
}
@container (max-height: 40px) {
  .xnMEB._shadow {
    height: 25px !important;
  }
}
/* hint */
.xu3k3 {
  background: #ffffe1 !important;
  font-family: var(--uifontfamily, inherit) !important;
  font-size: 12px !important;
  padding: 2px !important;
  color: #000 !important;
  border-radius: 0px !important;
  border: 1px solid #444 !important;
}
/* explorer */
.xbiH2 {
    line-height: 24px !important;
    font-family: var(--uifontfamily, inherit) !important;
    font-size: 12px !important;
    background: #fff !important;
    color: #000 !important;
    border: 2px inset #aaa !important;
    padding: 0px 4px !important;
    flex-grow: 1 !important;
}
.x3Qrn {
    padding: 4px 8px !important;
}
.xDuE7 {
    padding: 0 2px !important;
    line-height: 24px !important;
}
.x3Qrn .xDuE7.xDRDK {
    opacity: 1 !important;
}
.x3Qrn .ti-chevron-right::before {
    content: "\\" !important;
    font-family: var(--uifontfamily, inherit) !important;
    opacity: 1 !important;
    font-size: 14px !important;
    vertical-align: 6% !important;
}
.x3Qrn::before {
    content: "アドレス";
    font-family: var(--uifontfamily, var(--defaultfont, inherit));
    line-height: 28px;
    margin-right: 8px;
}
.xnMEB .x3Qrn {
    padding: 2px 8px !important;
    background: var(--miss2k-windowbg) !important;
    color: var(--miss2k-windowfg) !important;
}
.xoq1D {
    font-family: var(--uifontfamily, inherit) !important;
    font-size: 12px !important;
}
/* settings */
.rrevdjwu.grid > .group > .items > .item > .text {
    font-size: 12px !important;
    font-family: "MS UI Gothic", sans-serif;
}
/* Disconnected BSOD START 
「サーバーから切断されました」をBSODのように表示するやつです
人によってはびっくりしたり単純に不便になる場合があるので必要ない場合はENDまでを削除してください*/
.xn5WL {
    width: 100vw !important;
    height: 100vh !important;
    left: 0 !important;
    top: 0 !important;
    max-width: 100vw !important;
    background: #00f !important;
    color: #fff !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}
.xn5WL > .xBtVI > .xbaFh {
    background: rgba(255,255,255, 0.2);
    margin: 0 auto;
}
.xn5WL > div:first-child {
    background: #fff;
    color: #00f;
    font-family: "MS Gothic",sans-serif;
    font-size: 16px;
    margin-bottom: 12em;
}
.xn5WL > div:first-child::after {
    content: "\A現在アクセスしているサーバーから切断されました。\A\A* なにもしない もしくは任意の場所をクリックすると、このまま閲覧を続けます。\A* リロード をクリックするか、Ctrl+R キーを押すと、現在のページをリロードして再接続します。\A   ノートの新規作成を除くフォームのデータは全て失われます。\A\A任意の場所をｸﾘｯｸすると, 続行します.";
    display: block;
    background: #00f;
    color: #fff;
    position: absolute;
    text-align: left;
    white-space: pre;
    left: 35%;
}
/* Disconnected BSOD END */
/* Misskey 2000 END */

misskey2k_theme

{
	id: '458ea016-b17f-4c98-92b4-14ff6537f7a2',
	base: 'light',
	desc: 'Theme for Misskey 2000',
	name: 'Misskey 2000 Theme v1.0',
	props: {
		X2: ':darken<2<@panel',
		X3: 'rgba(0, 0, 0, 0.05)',
		X4: 'rgba(0, 0, 0, 0.1)',
		X5: 'rgba(0, 0, 0, 0.05)',
		X6: 'rgba(0, 0, 0, 0.25)',
		X7: 'rgba(0, 0, 0, 0.05)',
		X8: ':lighten<5<@accent',
		X9: ':darken<5<@accent',
		bg: '#f5f5f5',
		fg: '#5f5f5f',
		X10: ':alpha<0.4<@accent',
		X11: 'rgba(0, 0, 0, 0.1)',
		X12: 'rgba(0, 0, 0, 0.1)',
		X13: 'rgba(0, 0, 0, 0.15)',
		X14: ':alpha<0.5<@navBg',
		X15: ':alpha<0<@panel',
		X16: ':alpha<0.7<@panel',
		X17: ':alpha<0.8<@bg',
		cwBg: '#b1b9c1',
		cwFg: '#fff',
		link: '#44a4c1',
		warn: '#ecb637',
		badge: '#31b1ce',
		error: '#ec4137',
		focus: ':alpha<0.3<@accent',
		navBg: '@panel',
		navFg: '@fg',
		panel: ':lighten<3<@bg',
		popup: ':lighten<3<@panel',
		accent: '#34a1c9',
		deckBg: ':darken<3<@bg',
		header: ':alpha<0.7<@panel',
		infoBg: '#e5f5ff',
		infoFg: '#72818a',
		renote: '#229e82',
		shadow: 'rgba(0, 0, 0, 0.1)',
		divider: 'rgba(0, 0, 0, 0.1)',
		hashtag: '#ff9156',
		mention: '@accent',
		modalBg: 'rgba(0, 0, 0, 0.3)',
		success: '#86b300',
		buttonBg: 'rgba(0, 0, 0, 0.05)',
		switchBg: 'rgba(0, 0, 0, 0.15)',
		acrylicBg: ':alpha<0.5<@bg',
		cwHoverBg: '#bbc4ce',
		fgOnWhite: '#333',
		indicator: '@accent',
		mentionMe: '@mention',
		messageBg: '@bg',
		navActive: '@accent',
		accentedBg: ':alpha<0.15<@accent',
		codeNumber: '#0fbbbb',
		codeString: '#b98710',
		fgOnAccent: '#fff',
		infoWarnBg: '#fff0db',
		infoWarnFg: '#8f6e31',
		navHoverFg: ':darken<17<@fg',
		switchOnBg: '@accent',
		switchOnFg: '@fgOnAccent',
		codeBoolean: '#62b70c',
		dateLabelFg: '@fg',
		inputBorder: 'rgba(0, 0, 0, 0.1)',
		panelBorder: '" solid 1px var(--divider)',
		switchOffBg: 'rgba(0, 0, 0, 0.1)',
		switchOffFg: '@panel',
		accentDarken: '#0a246a',
		acrylicPanel: ':alpha<0.5<@panel',
		navIndicator: '@indicator',
		windowHeader: ':alpha<0.85<@panel',
		accentLighten: '#a6caf0',
		buttonHoverBg: 'rgba(0, 0, 0, 0.1)',
		driveFolderBg: ':alpha<0.3<@accent',
		fgHighlighted: ':darken<3<@fg',
		fgTransparent: ':alpha<0.5<@fg',
		panelHeaderBg: ':lighten<3<@panel',
		panelHeaderFg: '@fg',
		buttonGradateA: '#a6caf0',
		buttonGradateB: ':hue<20<@accent',
		htmlThemeColor: '@bg',
		panelHighlight: ':darken<3<@panel',
		listItemHoverBg: 'rgba(0, 0, 0, 0.03)',
		scrollbarHandle: 'rgba(0, 0, 0, 0.2)',
		inputBorderHover: 'rgba(0, 0, 0, 0.2)',
		wallpaperOverlay: 'rgba(255, 255, 255, 0.5)',
		fgTransparentWeak: ':alpha<0.75<@fg',
		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
		scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)',
	},
	author: '@CYaki@misskey.backspace.fm',
}