mirror of
https://github.com/suk-ws/ph-Bookshelf.git
synced 2024-12-05 09:26:52 +08:00
543 lines
14 KiB
CSS
543 lines
14 KiB
CSS
/******************************************************************************
|
|
##############################################################################
|
|
##### #####
|
|
##### main.css of ph-Bookshelf #####
|
|
##### #####
|
|
##############################################################################
|
|
******************************************************************************/
|
|
|
|
|
|
/*
|
|
/*
|
|
/******************************************************************
|
|
** Overall Variable **
|
|
******************************************************************/
|
|
:root {
|
|
|
|
--color-font-base: #223b5c;
|
|
--color-font-base-link: #409dff;
|
|
--color-font-base-link-hover: #0033ff;
|
|
--color-font-base-link-visited: #a27aeb;
|
|
--color-font-base-link-visited-hover: #5a00ff;
|
|
--color-font-base-link-focus-bg: #33aee92b;
|
|
|
|
--color-sidebar-background: #f6f8fa;
|
|
--color-font-sidebar: var(--color-font-base);
|
|
--color-scrollbar-sidebar-background: none;
|
|
--color-scrollbar-sidebar-foreground: #78a8e021;
|
|
|
|
--color-warn-noscript: #ce263d;
|
|
--color-font-warn-noscript: #f5eaea;
|
|
--color-font-sidebar-sitetitle: #3a2b8c;
|
|
--color-font-sidebar-sitetitle-highlight: #4a60b6;
|
|
--color-sidebar-sitetitle-background: #e8f0fe;
|
|
|
|
--color-menu-list-separator: #ebeff2;
|
|
--color-menu-child-list-line: #78a8e021;
|
|
--color-menu-item-indicator-current: #6bacf1;
|
|
--color-menu-item-indicator-focus: #91c6ff;
|
|
--color-font-menu-item-current: #3697ff;
|
|
--color-font-menu-item-hover: #71b3f9;
|
|
|
|
--color-tools-button-background: #f6f8fa;
|
|
--color-tools-button-background-active: #eef1f4;
|
|
--color-font-tools-button: #c3ccd6;
|
|
|
|
--color-scrollbar-main-background: var(--color-scrollbar-sidebar-foreground);
|
|
--color-scrollbar-main-foreground: var(--color-menu-item-indicator-focus);
|
|
|
|
}
|
|
|
|
:root {
|
|
|
|
--sidebar-width: 19rem;
|
|
--sidebar-margin-width: 2rem;
|
|
--sidebar-margin-height: 2rem;
|
|
--sidebar-font-size: 0.83rem;
|
|
|
|
--sidebar-menu-container-external-max-height: 30%;
|
|
|
|
--sidebar-menu-container-padding-width: 1.3rem;
|
|
--sidebar-menu-container-padding-height: 0.8rem;
|
|
--sidebar-menu-item-indent-width: 1.1rem;
|
|
|
|
--sidebar-menu-list-seperator-width: 3px;
|
|
--sidebar-menu-list-seperator-length: 66%;
|
|
--sidebar-menu-item-indicator-active-width: 4px;
|
|
--sidebar-menu-item-indicator-focus-width: 4px;
|
|
|
|
--main-margin-height: 2rem;
|
|
--main-margin-width: 2rem;
|
|
|
|
--main-scrollbar-width: 0.5rem;
|
|
|
|
--tools-button-padding: 0.75rem;
|
|
--tools-font-size: 0.83rem;
|
|
|
|
--article-padding-height: 2rem;
|
|
--article-padding-width: 2rem;
|
|
/*--article-margin-top: 3rem;*/
|
|
--article-margin-top: 0;
|
|
--article-margin-bottom: 30vh;
|
|
--article-width-max: 800px;
|
|
|
|
}
|
|
|
|
:root {
|
|
|
|
--sidebar-radius: 0.5rem;
|
|
|
|
--object-opacity-weakness: 0.4;
|
|
|
|
}
|
|
|
|
:root {
|
|
--font-sarasa-gothic: "Sarasa Gothic J", "Sarasa Gothic K", "Sarasa Gothic TC", "Sarasa Gothic SC";
|
|
--font-sarasa-mono: "Sarasa Mono J", "Sarasa Mono K", "Sarasa Mono TC", "Sarasa Mono SC";
|
|
--font-sans-serif: "Alibaba Puhuiti", var(--font-sarasa-gothic), sans-serif;
|
|
--font-serif: "Georgia", serif;
|
|
/*--font-sans-serif: sans-serif;*/
|
|
/*--font-serif: "Times New Roman", serif;*/
|
|
--font-monospace: "Fira Code", "Monaco", "Consolas", var(--font-sarasa-mono), monospace;
|
|
}
|
|
|
|
:root {
|
|
|
|
--element-href-anima-speed: 0.1s;
|
|
|
|
--sidebar-toggle-anima-speed: 0.4s;
|
|
|
|
--sidebar-menu-item-anima-speed: 0.15s;
|
|
--sidebar-menu-item-parent-arrow-anima-speed: 0.2s;
|
|
--sidebar-menu-item-children-anima-speed: 0.2s;
|
|
|
|
--tools-button-hover-anima-speed: 0.2s;
|
|
|
|
}
|
|
|
|
:root {
|
|
--animation-speed-multiplier: 1;
|
|
/* --color-background-graystyle: #3c3c3c;*/
|
|
/* --color-font-graystyle-base: #bfbfbf;*/
|
|
}
|
|
|
|
|
|
/*
|
|
/*
|
|
/******************************************************************
|
|
** Global Elements **
|
|
******************************************************************/
|
|
|
|
::selection {
|
|
|
|
}
|
|
|
|
.prevent-animation {
|
|
transition: none !important;
|
|
}
|
|
|
|
/*#test-overflow {*/
|
|
/* display: none;*/
|
|
/*}*/
|
|
|
|
button {
|
|
appearance: none;
|
|
font-size: inherit;
|
|
font-family: inherit;
|
|
font-style: inherit;
|
|
font-variant-ligatures: inherit;
|
|
font-variant-caps: inherit;
|
|
font-variant-numeric: inherit;
|
|
font-variant-east-asian: inherit;
|
|
font-weight: inherit;
|
|
font-stretch: inherit;
|
|
color: inherit;
|
|
letter-spacing: normal;
|
|
word-spacing: normal;
|
|
line-height: normal;
|
|
text-transform: none;
|
|
box-sizing: border-box;
|
|
background: none;
|
|
border: none;
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
small {
|
|
opacity: var(--object-opacity-weakness);
|
|
}
|
|
|
|
a {
|
|
color: var(--color-font-base-link);
|
|
text-decoration: none;
|
|
transition:
|
|
color calc(var(--element-href-anima-speed) * var(--animation-speed-multiplier)),
|
|
background-color calc(var(--element-href-anima-speed) * var(--animation-speed-multiplier));
|
|
border-radius: 0.3rem;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--color-font-base-link-hover);
|
|
}
|
|
|
|
a:visited {
|
|
color: var(--color-font-base-link-visited);
|
|
}
|
|
|
|
a:visited:hover {
|
|
color: var(--color-font-base-link-visited-hover);
|
|
}
|
|
|
|
a:focus-visible {
|
|
background-color: var(--color-font-base-link-focus-bg);
|
|
outline: none;
|
|
}
|
|
|
|
a.no-style {
|
|
color: inherit;
|
|
text-decoration: inherit;
|
|
}
|
|
|
|
a.no-style:hover,
|
|
a.no-style:visited,
|
|
a.no-style:visited:hover {
|
|
color: inherit;
|
|
border-radius: inherit;
|
|
transition: inherit;
|
|
}
|
|
|
|
a.no-style:focus-visible {
|
|
background-color: inherit;
|
|
}
|
|
|
|
|
|
h1 {
|
|
font-size: 2.2rem;
|
|
}
|
|
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-sans-serif);
|
|
}
|
|
|
|
|
|
/*
|
|
/*
|
|
/******************************************************************
|
|
** root item **
|
|
******************************************************************/
|
|
body {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
color: var(--color-font-base);
|
|
display: flex;
|
|
position: relative;
|
|
}
|
|
|
|
|
|
/*
|
|
/*
|
|
/******************************************************************
|
|
** sidebar **
|
|
******************************************************************/
|
|
#nav-container {
|
|
width: 0;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
transition: width calc(var(--sidebar-toggle-anima-speed) * var(--animation-speed-multiplier));
|
|
}
|
|
|
|
#nav-container.show-sidebar {
|
|
width: min(calc(var(--sidebar-width) + var(--sidebar-margin-width) * 2), 100vw);
|
|
}
|
|
|
|
#sidebar {
|
|
width: min(var(--sidebar-width), 100vw);
|
|
padding: var(--sidebar-margin-height) var(--sidebar-margin-width);
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
font-size: var(--sidebar-font-size);
|
|
font-weight: bold;
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: var(--color-font-sidebar);
|
|
overflow: hidden;
|
|
z-index: 99;
|
|
}
|
|
|
|
#sidebar .sidebar-card {
|
|
background: var(--color-sidebar-background);
|
|
border-radius: var(--sidebar-radius);
|
|
overflow: hidden;
|
|
}
|
|
|
|
#sidebar .sidebar-card:not(:last-child) {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
#sidebar > #noscript-warn {
|
|
flex-shrink: 0;
|
|
padding: 1rem;
|
|
border-radius: 0.5rem;
|
|
background: var(--color-warn-noscript);
|
|
color: var(--color-font-warn-noscript);
|
|
z-index:15;
|
|
}
|
|
|
|
#sidebar > #site-title {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 1rem;
|
|
font-style: normal;
|
|
background: var(--color-sidebar-sitetitle-background);
|
|
color: var(--color-font-sidebar-sitetitle);
|
|
/*transition:*/
|
|
/* color calc(var(--element-href-anima-speed) * var(--animation-speed-multiplier)),*/
|
|
/* background calc(var(--element-href-anima-speed) * var(--animation-speed-multiplier));*/
|
|
border-radius: 0.5rem;
|
|
z-index:10;
|
|
}
|
|
|
|
#sidebar > #site-title:hover {
|
|
/*background: var(--color-font-sidebar-sitetitle);*/
|
|
/*color: var(--color-font-sidebar-sitetitle-highlight);*/
|
|
/*background: var(--color-font-sidebar-sitetitle-highlight);*/
|
|
text-decoration: underline;
|
|
}
|
|
|
|
#sidebar > #site-title + *,
|
|
#sidebar > noscript#noscript-warn + * {
|
|
margin-top: -1rem;
|
|
border-width: 0;
|
|
border-top: 1rem;
|
|
border-style: solid;
|
|
border-color: #ffffff00;
|
|
}
|
|
|
|
#sidebar > .menu-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
#sidebar > .menu-container:last-child {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
#sidebar > .menu-container::-webkit-scrollbar {
|
|
width: 2px;
|
|
background: none;
|
|
}
|
|
|
|
#sidebar > .menu-container::-webkit-scrollbar-thumb {
|
|
background: var(--color-scrollbar-sidebar-background);
|
|
}
|
|
|
|
#sidebar > .menu-container:hover::-webkit-scrollbar-thumb {
|
|
background: var(--color-scrollbar-sidebar-foreground);
|
|
}
|
|
|
|
#sidebar > .menu-container::-webkit-scrollbar-track {
|
|
background: var(--color-scrollbar-sidebar-background);
|
|
}
|
|
|
|
#sidebar > .menu-container > .menu {
|
|
padding: var(--sidebar-menu-container-padding-height) var(--sidebar-menu-container-padding-width);
|
|
padding-right: 0;
|
|
position: relative;
|
|
}
|
|
|
|
#sidebar > .menu-container > .menu:not(:first-child):before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
right: calc((100% - var(--sidebar-menu-list-seperator-length))/2);
|
|
left: calc((100% - var(--sidebar-menu-list-seperator-length))/2);
|
|
transform: translate(0, -50%);
|
|
height: var(--sidebar-menu-list-seperator-width);
|
|
border-radius: calc(var(--sidebar-menu-list-seperator-width) / 2);
|
|
background: var(--color-menu-list-separator);
|
|
}
|
|
|
|
#sidebar > .menu-container > .menu:nth-last-child(2) {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
#sidebar > .menu-container > .menu .menu-item {
|
|
display: block;
|
|
padding: 0.55rem 0;
|
|
position: relative;
|
|
-webkit-tap-highlight-color: transparent;
|
|
transition: color calc(var(--sidebar-menu-item-anima-speed) * var(--animation-speed-multiplier));
|
|
}
|
|
|
|
#sidebar > .menu-container > .menu .menu-item:hover {
|
|
color: var(--color-font-menu-item-hover);
|
|
}
|
|
|
|
#sidebar > .menu-container > .menu .menu-item.current {
|
|
color: var(--color-font-menu-item-current) !important;
|
|
}
|
|
|
|
#sidebar > .menu-container > .menu .menu-item.current:after {
|
|
content: "";
|
|
position: absolute;
|
|
top: calc(var(--sidebar-menu-item-indicator-active-width) / 2);
|
|
bottom: calc(var(--sidebar-menu-item-indicator-active-width) / 2);
|
|
right: calc(var(--sidebar-menu-item-indicator-active-width));
|
|
width: var(--sidebar-menu-item-indicator-active-width);
|
|
border-radius: calc(var(--sidebar-menu-item-indicator-active-width) / 2);
|
|
background: var(--color-menu-item-indicator-current);
|
|
}
|
|
|
|
#sidebar > .menu-container > .menu .menu-item:before {
|
|
content: "";
|
|
position: absolute;
|
|
transition: top calc(var(--sidebar-menu-item-anima-speed) * var(--animation-speed-multiplier)),
|
|
bottom calc(var(--sidebar-menu-item-anima-speed) * var(--animation-speed-multiplier));
|
|
top: 50%;
|
|
bottom: 50%;
|
|
left:calc(0px - var(--sidebar-menu-item-indicator-focus-width) * 2);
|
|
width: var(--sidebar-menu-item-indicator-focus-width);
|
|
border-radius: calc(var(--sidebar-menu-item-indicator-focus-width) / 2);
|
|
background: var(--color-menu-item-indicator-focus);
|
|
}
|
|
|
|
#sidebar > .menu-container > .menu .menu-item:focus-visible{
|
|
color: var(--color-font-menu-item-hover);
|
|
outline: none;
|
|
}
|
|
|
|
#sidebar > .menu-container > .menu .menu-item:focus-visible:before {
|
|
top: calc(var(--sidebar-menu-item-indicator-focus-width) / 2);
|
|
bottom: calc(var(--sidebar-menu-item-indicator-focus-width) / 2);
|
|
}
|
|
|
|
#sidebar > .menu-container > .menu .menu-item-parent > *:first-child:after {
|
|
content: "▸";
|
|
color: var(--color-font-base-link);
|
|
display: inline-block;
|
|
margin-left: 0.5rem;
|
|
transition: transform calc(var(--sidebar-menu-item-parent-arrow-anima-speed) * var(--animation-speed-multiplier));
|
|
}
|
|
|
|
#sidebar > .menu-container > .menu .menu-item-parent.active > *:first-child:after {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
#sidebar > .menu-container > .menu .menu-item-parent > .children {
|
|
padding-left: var(--sidebar-menu-item-indent-width);
|
|
border-style: solid;
|
|
border-width: 0;
|
|
border-color: var(--color-menu-child-list-line);
|
|
border-left-width: 1px;
|
|
overflow: hidden;
|
|
display: none;
|
|
transition: height calc(var(--sidebar-menu-item-children-anima-speed) * var(--animation-speed-multiplier)) ease-in-out;
|
|
}
|
|
|
|
#sidebar > .menu-container > .menu .menu-item-parent.active > .children {
|
|
display: block;
|
|
}
|
|
|
|
#sidebar > .menu-container > .menu#menu-metas > .menu-item-parent > *:first-child {
|
|
position: relative;
|
|
/*text-decoration: underline;*/
|
|
}
|
|
|
|
#sidebar > .menu-container > .menu#menu-metas > .menu-item-parent > *:first-child:after {
|
|
position: absolute;
|
|
left: 0;
|
|
margin-left: -1rem;
|
|
color: inherit;
|
|
}
|
|
|
|
#sidebar > .menu-container > .menu#menu-metas > .menu-item-parent > .children {
|
|
padding-left: 0;
|
|
border-left-width: 0;
|
|
}
|
|
|
|
|
|
/*
|
|
/*
|
|
/******************************************************************
|
|
** page header **
|
|
******************************************************************/
|
|
#main {
|
|
color: var(--color-font-base);
|
|
margin: 0 var(--main-margin-width);
|
|
flex-grow: 1;
|
|
overflow: auto;
|
|
position: relative;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
#main > #main-heading {
|
|
padding-top: var(--main-margin-height);
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
|
|
#main::-webkit-scrollbar {
|
|
width: var(--main-scrollbar-width);
|
|
border-radius: calc(var(--main-scrollbar-width) / 2);
|
|
background: none;
|
|
}
|
|
|
|
#main::-webkit-scrollbar-thumb {
|
|
width: var(--main-scrollbar-width);
|
|
border-radius: calc(var(--main-scrollbar-width) / 2);
|
|
background: var(--color-scrollbar-main-foreground);
|
|
}
|
|
|
|
#main::-webkit-scrollbar-track {
|
|
width: var(--main-scrollbar-width);
|
|
border-radius: calc(var(--main-scrollbar-width) / 2);
|
|
background: var(--color-scrollbar-main-background);
|
|
margin: var(--main-margin-height);
|
|
}
|
|
|
|
#page-tools {
|
|
color: var(--color-font-tools-button);
|
|
/*background-color: #ffffff;*/
|
|
border-radius: 0.5rem;
|
|
font-size: var(--tools-font-size);
|
|
font-weight: bold;
|
|
z-index: 100;
|
|
}
|
|
|
|
#page-tools > button {
|
|
background-color: var(--color-tools-button-background);
|
|
padding: 0;
|
|
height: 2.2rem;
|
|
width: 2.2rem;
|
|
transition: background-color var(--tools-button-hover-anima-speed);
|
|
user-select: none;
|
|
}
|
|
|
|
#page-tools > button:hover {
|
|
background-color: var(--color-tools-button-background-active);
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
/*
|
|
/******************************************************************
|
|
** page content **
|
|
******************************************************************/
|
|
#article {
|
|
margin: var(--article-margin-top) auto var(--article-margin-bottom);
|
|
padding: var(--article-padding-height) var(--article-padding-width);
|
|
padding-right: calc(var(--article-padding-width));
|
|
max-width: var(--article-width-max);
|
|
}
|