Skip to content

Instantly share code, notes, and snippets.

@castella-cake

castella-cake/misskey2000.css

Last active September 27, 2023 10:54
Show Gist options
  • Save castella-cake/8d8498c37a7e40ce54056553c74c2109 to your computer and use it in GitHub Desktop.
Save castella-cake/8d8498c37a7e40ce54056553c74c2109 to your computer and use it in GitHub Desktop.
Download ZIP
Misskey用のWindows2000風カスタムCSSスキン
Raw
misskey2000.css
/* Misskey 2000 v1.5
Created by CYakigasi (@[email protected])
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 */
Raw
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: '@[email protected]',
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment