settings
https://media.giphy.com/media/l41m1CuaT5Oy624Ra/giphy.gif
丸みがあってモダンな感じになるスタイル
https://gyazo.com/cb49d41f67843b3004b572b68b946c65
code:modern.css
div.page {
border-radius: 12px;
}
.grid li.page-list-item a {
border-radius: 8px;
box-shadow: none;
}
.navbar-default {
background: none;
padding-top: 8px;
padding-bottom: 8px;
}
.grid li.page-list-item a .header {
border-top: none;
padding-top: 16px;
}
.page-list .grid li {
height: 185px;
}
.quick-launch .project-home, .quick-launch .history-back-button {
margin-left: -12px;
}
.page-sort-menu .tool-btn {
margin-right: -10px;
}
.new-button .horizontal-line {
width: 16px;
height: 2px;
}
.new-button .vertical-line {
width: 2px;
height: 16px;
}
windows 98っぽいスタイル
98.cssを一部利用
https://gyazo.com/c9b776b30dcdcc3fc3e39a3df43ff73f
code:98.css
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');
/**
* 98.css
* Copyright (c) 2020 Jordan Scales <thatjdanisso.cool>
* https://github.com/jdan/98.css/blob/main/LICENSE
*/
body {
/* Color */
--surface: #c0c0c0;
--button-highlight: #ffffff;
--button-face: #dfdfdf;
--button-shadow: #808080;
--window-frame: #0a0a0a;
--dialog-blue: #000080;
--dialog-blue-light: #1084d0;
--dialog-gray: #808080;
--dialog-gray-light: #b5b5b5;
--link-blue: #0000ff;
/* Borders */
--border-width: 1px;
--border-raised-outer: inset -1px -1px var(--window-frame),
inset 1px 1px var(--button-highlight);
--border-raised-inner: inset -2px -2px var(--button-shadow),
inset 2px 2px var(--button-face);
--border-sunken-outer: inset -1px -1px var(--button-highlight),
inset 1px 1px var(--window-frame);
--border-sunken-inner: inset -2px -2px var(--button-face),
inset 2px 2px var(--button-shadow);
/* Window borders flip button-face and button-highlight */
--border-window-outer: inset -1px -1px var(--window-frame),
inset 1px 1px var(--button-face);
--border-window-inner: inset -2px -2px var(--button-shadow),
inset 2px 2px var(--button-highlight);
/* Field borders (checkbox, input, etc) flip window-frame and button-shadow */
--border-field: inset -1px -1px var(--button-highlight),
inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face),
inset 2px 2px var(--window-frame);
/* overrides */
--text-color: #222222;
--body-bg: var(--surface);
--page-text-color: var(--text-color);
--card-description-color: var(--text-color);
--telomere-border: var(--dialog-gray);
--telomere-unread: var(--dialog-blue-light);
--page-link-color: var(--link-blue);
--card-description-link-color: var(--link-blue);
--tool-color: var(--text-color);
--navbar-bg: var(--surface);
--card-title-color: var(--text-color);
--relation-label-links-bg: var(--dialog-blue);
--line-title-color: var(--text-color);
--relation-label-bg: #fff;
--relation-label-empty-bg: red;
font-family: 'DotGothic16', sans-serif;
background: url('https://i.gyazo.com/32ce867963c8083f607c97f5da68549a.jpg') repeat repeat;
background-size: 250px;
background-attachment: fixed;
}
.app {
padding-top: 86px;
}
main.page {
box-shadow: var(--border-window-outer), var(--border-window-inner);
background: var(--surface);
border-radius: 0;
}
.grid li.page-list-item a {
box-shadow: var(--border-window-outer), var(--border-window-inner);
background: var(--surface);
border-radius: 0;
}
.grid li.page-list-item a .header {
border-top: 0;
padding-top: 20px;
}
.grid li.page-list-item a .pin {
width: 100%;
height: 10px;
border-radius: 0;
background: linear-gradient(
90deg,
var(--dialog-blue),
var(--dialog-blue-light)
);
}
data-hover-visible .grid li.page-list-item a:hover {
box-shadow: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
}
.quick-launch .project-home, .quick-launch .history-back-button, data-hover-visible .quick-launch .project-home:hover, data-hover-visible .quick-launch .history-back-button:hover {
background: url('https://i.gyazo.com/b7d26e586c0bdc0f010880c97b94b12b.png') no-repeat;
background-size: cover;
border-radius: 0;
width: 194px;
height: 42px;
z-index: 100;
}
.quick-launch .project-home .title {
display: none;
}
.page-menu .tool-btn {
box-shadow: var(--border-window-outer), var(--border-window-inner);
background: var(--surface);
border-radius: 0;
}
data-hover-visible .page-menu .tool-btn:hover {
box-shadow: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
background: var(--surface);
}
.page-sort-menu .tool-btn {
box-shadow: var(--border-window-outer), var(--border-window-inner);
background: var(--surface);
border-radius: 0;
}
data-hover-visible .page-sort-menu .tool-btn:hover {
box-shadow: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
background: var(--surface);
}
.search-form .form-group input {
box-shadow: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
border-radius: 0;
}
.navbar {
backdrop-filter: none;
box-shadow: var(--border-window-outer), var(--border-window-inner);
padding-top: 8px;
padding-bottom: 8px;
}
.page-menu {
top: 70px;
}
.new-button {
border-radius: 0;
box-shadow: var(--border-window-outer), var(--border-window-inner);
background: var(--surface);
}
.new-button .horizontal-line {
width: 16px;
height: 2px;
border-radius: 0;
background: var(--text-color);
}
.new-button .vertical-line {
width: 2px;
height: 16px;
border-radius: 0;
background: var(--text-color);
}
data-hover-visible .new-button:hover {
box-shadow: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
background: none;
}
.quick-launch .new-button {
position: fixed;
top: 11px;
z-index: 10000;
left: 0;
right: 0;
}
.grid li, .line.line-title {
font-family: 'DotGothic16', sans-serif;
}
.grid li.relation-label a {
border-radius: 0;
}
.navbar .navbar-menu>li>a {
color: var(--text-color);
}