Skip to content

XDJSB-Fluent | X岛揭示板-流畅设计 by t0FN7Ri

Screenshot of XDJSB-Fluent | X岛揭示板-流畅设计
Homepage Write a review Install Get Stylus

Details

Authort0FN7Ri

LicenseCC4.0 NC

Categorynmbxd.com, nmbxd1.com, xdnmb, xdnmb1, X岛

Created

Updated

Size43 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

X岛揭示板（X岛匿名版）- 流畅设计2（大嘘）
xdjsb (xdnmb) - Fluent2 Design (nope)

Notes

  • 本样式为宽屏桌面平台设计；
  • This was designed for widescreen desktop platforms;
  • 因为使用了一些新特性所以您需要一个最新的的现代浏览器；
  • You need an up-to-date modern browser in order to userstyle the website without issues;

为减缓岛的服务器压力，建议手动替换默认背景图像:
--XDBackground: url("#自己想要的图像URL#");

Help the website running longer period of times by replacing the default background image:
--XDBackground: url("#THE-IMAGE-URL-HERE#")

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name           XDJSB-Fluent
@name:zh        X岛揭示板-流畅设计
@namespace      userstyle.world/user/t0FN7Ri
@version        20240909.01
@description    流畅设计（大嘘）X岛 \n A Fluent2 Design (uhh) style for XDjsb (XDnmb)
@license        CC4.0 NC
@author         t0FN7Ri
==/UserStyle== */

@-moz-document domain("nmbxd.com"), domain("nmbxd1.com") {
/* XDjsb-F.css */
/* v2024-07-27 */
/* ====⭐==== */

/* 
 *
 *字体集修复 by zNG7muG / tiamed - @https://userstyles.world/style/11419
 *
*/

/*   @import #maybe something here# */

@font-face {
    font-family: Emoji;
    src: local("Apple Color Emoji"),
         local("Segoe UI Emoji"),
         local("Segoe UI Symbol"),
         local("Noto Color Emoji");
    unicode-range: U+1F000-1F644, U+203C-3299;
}

:root {
    --ColorHelper: hsl(181, 60%, 52%);
    /* 默认 (181, 60%, 52%) */
    --XDThemeColorHue: 181;
    --XDThemeColorSaturate: 60%;
    --XDThemeColorLightness: 52%;
    --XDThemeColor: hsl(var(--XDThemeColorHue), var(--XDThemeColorSaturate), var(--XDThemeColorLightness));
    /* 默认 "https://nmb.ovear.info/h.php" */
    --XDBackground: url("https://nmb.ovear.info/h.php");
    /* 默认 128%, 0.85, 24px*/
    --XDBackgroundSaturate: 128%;
    --XDBackgroundDimness: 0.85;
    --XDBackgroundBlur: 18px;
    /* 默认 #fefeff */
    --MainFontColor: #fefeff;
    --MainFontUse: "Maple Mono SC NF", "Noto Sans CJK", "Source Han Sans", "Segoe UI Variable Display", "Segoe UI", "Segoe UI Web", "San Francisco Pro Display", system-ui, -apple-system,  sans-serif, BlinkMacSystemFont, YuGothic, "Yu Gothic", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Arial, Tahoma, Emoji;
    /* 默认 字号 14px 行高 20px */
    --MainFontSize: 14px;
    --MainLineHeight: 20px;
    /* 默认 #dcdee1 #969ba4 */
    --SecFontColor: #dcdee1;
    --TrdFontColor: #969ba4;
    
    /* 默认 14% */
    --MenuWidth: 14%;
}

/* ========= ( ﾟωﾟ) ========= */
/* general */
html {
    background-image: var(--XDBackground) ;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    color: var(--MainFontColor);
    scrollbar-color: #888 #141415 !important;
    font-family: var(--MainFontUse);
}

body {
    font-family: var(--MainFontUse);
    font-size: var(--MainFontSize);
    background: none;
}

body::after {
    content: "";
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: fixed;
    background-color: rgba(0, 0, 0, var(--XDBackgroundDimness));
    background-image: url(data:image/png;base64,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);
    background-repeat: repeat;
    background-attachment: fixed;
    background-size: 42px;
    backdrop-filter: blur(calc(var(--XDBackgroundBlur) / 3 * 2)) saturate(var(--XDBackgroundSaturate));
    -webkit-backdrop-filter: blur(calc(var(--XDBackgroundBlur) / 3 * 2)) saturate(var(--XDBackgroundSaturate));
    z-index: -1;
}

small {
    font-size: calc(var(--MainFontSize) - 2px);
    line-height: calc(var(--MainLineHeight) - 4px);
}

a,
a:focus,
a:hover,
a:active {
    color: var(--XDThemeColor);
}

a:hover {
    color: hsl(var(--XDThemeColorHue), var(--XDThemeColorSaturate), calc(var(--XDThemeColorLightness) + 10%));
}

.h-title {
    color: var(--XDThemeColor) !important;
}

h2.h-title {
    font-size: calc(var(--MainFontSize) + 14px) !important;
    line-height: calc(var(--MainLineHeight) + 16px) !important;
    font-weight: 800 !important;
}

hr {
    box-sizing: border-box;
    margin: 20px 0;
    border-color: rgba(255, 255, 255, 0.2);
    width: 100%;
}

select,
input,
textarea {
    font-family: var(--MainFontUse);
}

::before,
::after {
    font-family: FontAwesome;
}

:focus-visible {
    outline: white solid 4px !important;
    outline-offset: 2px;
    text-shadow: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
}

.system-message,
.system-message a{
    color: hsl(var(--XDThemeColorHue), calc(var(--XDThemeColorSaturate) - 0%), calc(var(--XDThemeColorLightness) + 0%)) !important;
}

/* navigation menu */
#h-menu {
    height: 100% !important;
    width: var(--MenuWidth);
    min-width: 160px !important;
    background: rgba(20, 20, 21, 0.6);
    backdrop-filter: blur(var(--XDBackgroundBlur));
    -webkit-backdrop-filter: blur(var(--XDBackgroundBlur));
    border-right: 1px solid rgba(0, 0, 0, 0.5);
    scrollbar-width: none;
    -ms-overflow-style: none;
    z-index: 6;
    color: var(--MainFontColor) !important;
    user-select: none;
}

#h-menu::-webkit-scrollbar {
    display: none;
}

    /* navigation top sitename & slogan */
#h-menu-top {
    margin: 6px 0px 15px 15px !important;
}

#h-menu-top-img,
#h-menu-top-sitename {
    text-align: left !important;
    line-height: calc(var(--MainLineHeight) + 10px);
    margin: 6px 0px !important;
    font-weight: 800;
}

#h-menu-top-sitename {
    font-size: calc(var(--MainFontSize) + 8px) !important;
}

    /* navigation search bar */

a#h-menu-search-keyword.uk-button.uk-button-primary {
    background: rgb(41, 41, 42) !important;
    color: var(--SecFontColor) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px !important;
    margin-bottom: 8px !important;
    margin-top: 8px !important;
    display: flex;
}

a#h-menu-search-keyword.uk-button.uk-button-primary:hover {
    border-bottom: 2px solid var(--XDThemeColor);
    margin-bottom: 8px !important;
    transition: border-bottom 0.1s ease-in-out;
}

    /* navigation header items */
.h-nav-parent-header {
    font-size: calc(var(--MainFontSize) + 4px) !important;
    font-weight: 600 !important;
    line-height: calc(var(--MainLineHeight) + 4px) !important;
    color: var(--MainFontColor) !important;
}

.uk-nav > li > a {
    padding: 12px 15px 12px 15px !important;
    margin: 4px 8px 4px 8px !important;
}

a.h-nav-parent-header:visited,
a.h-nav-parent-header:hover,
.uk-nav-side > li > a:hover {
    text-shadow: none !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px;
    box-shadow: none !important;
}

a.h-nav-parent-header:focus,
a.h-nav-parent-header:focus-visible {
    text-shadow: none !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px;
}

a.h-nav-parent-header:active {
    text-shadow: none !important;
    color: var(--SecFontColor) !important;
    background: none !important;
}

.uk-open {
    padding-bottom: 16px;
}

    /* navigation sub list items */

ul.uk-nav-sub {
    padding: 0px 0px 8px 25px !important;
    margin-right: 27px;
    font-size: calc(var(--MainFontSize) + 2px) !important;
    line-height: calc(var(--MainLineHeight) + 2px);
    transform: translateX(1em);
}

.uk-nav-side ul a {
    color: var(--MainFontColor) !important;
    margin: 8px 0px 8px 0px !important;
    padding: 8px 0 !important;
}

.uk-nav-sub li a:visited,
.uk-nav-sub li a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
    margin-left: -15px !important;
    padding-left: 15px !important;
}

.uk-nav-sub li a:active {
    color: var(--SecFontColor) !important;
}

#h-menu
#h-menu-content
.h-active {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px;
}

#h-menu
#h-menu-content
.h-active:hover {
    background: none !important;
}

#h-menu
#h-menu-content
.h-active a::before {
    content: "";
    border-left: 4px solid var(--XDThemeColor);
    top: 0px;
    left: -11px;
    height: 100%;
    width: 100%;
    margin: 0px 0px 0px -4px;
    padding: 0px;
    position: relative;
    bor...

Reviews

No reviews yet.