1
0
web/static/css/style.css
2024-04-05 20:21:23 +09:00

1094 lines
19 KiB
CSS

body {
display:block;
background-color: #f1f1f1;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
width:100%;
margin:0;
padding: 0;
-webkit-text-size-adjust: 100%;
letter-spacing:.3px;
}
a {
color: #ddd700;
text-decoration: none;
}
a:hover {
color: #ddd700;
}
p {
color: rgba(0, 0, 0, 0.8);
margin: 0;
line-height: 1.6;
padding: 4px 0px;
word-break: break-word;
}
.logo span.icon-phoenix-world{
font-size: 50px;
font-size: 5rem;
}
.logo {
margin: 35px 0;
text-align:center;
}
.containerx {
width:40%;
margin: 0 auto;
font-size:18px;
word-wrap: break-word;
word-break: break-all;
}
footer#footer {
color:#999;
text-align: center;
margin: 40px 0;
font-size: 18px;
}
.containerx p img {
width: 100%;
}
.highlight {
color: #f1f1f1e3;
}
span.blue {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: #61bdcc;
margin: 0px 5px;
box-shadow: 0px 0px 7px #61bdcc;
}
span.red {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: #f41b16b0;
margin: 0px 5px;
box-shadow: 0px 0px 7px #f41b16;
}
span.green {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: #69cc4df7;
margin: 0px 5px;
box-shadow: 0px 0px 7px #66f416;
}
h3 {
margin-bottom: 4px;
}
blockquote {
background: #fff;
margin: 0px;
padding: 20px;
}
nav#article-nav {
margin: 30px 0px;
}
ul {
list-style-type: none;
display: list-item;
}
ul.cp_list {
padding: 0;
}
ul.cp_list li.top {
padding: 30px 0;
width: auto;
background-color: #313131;
text-align: center;
border: solid 2px #fff;
}
ul.cp_list li > p > a {
font-size:20px;
}
ul.cp_list li > span.icon-moon {
color: #0e0e0e;
}
.footer-link > a > i.fab.fa-twitter {
color: rgba(52 135 236);
}
.footer-link > a > i.fab.fa-github {
color: rgba(1 1 1);
}
.footer-link > a > i.fas.fa-rss {
color: #f4a316;
font-size: 23px;
}
i.fa-brands.fa-slack {
color: #b8cfe0;
}
i.fa-solid.fa-at {
font-size: 25px;
/*background-color: #cccccc21;*/
color: rgba(52 135 236);
}
a.matrix-icon {
padding-left: 5px;
padding-right: 5px;
font-size: 24px;
color: rgb(64 64 64);
position: relative;
bottom: 4px;
}
.footer-link > a > span.icon-ai {
font-size:25px;
color: #beb801;
margin:10px;
}
.footer-link > a > span.icon-api {
font-size:25px;
margin:10px;
}
h3 span.icon-phoenix-world {
font-size: 0.8em;
}
h3 span.icon-phoenix-power {
font-size: 0.8em;
}
h3 span.icon-syui {
font-size: 0.8em;
}
h3 span.icon-power {
font-size: 0.8em;
}
h3 span.icon-archlinuxjp {
font-size: 0.8em;
}
.code-name {
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
letter-spacing: 0;
}
pre > code {
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
letter-spacing: 0;
}
.footer-link {
font-size:30px;
text-align: center;
}
.footer-link > a > i {
padding:9px;
}
h2 {
line-height: 2rem;
}
span.tag {
background-color: #fff;
padding: 2px 6px;
word-break: break-word;
}
ins.adsbygoogle {
margin: 55px 0px;
}
.top-sns-header {
text-align:right;
font-size:20px;
}
.top-sns-header span.icon-moon {
font-size:20px;
}
.post-time-date {
text-align:right;
padding:15px 0 15px 0;
}
.post-time-date-update {
text-align:right;
padding:15px 0 15px 0;
}
.footer-link > a > i.fab.fa-mastodon {
color:#945ecd;
}
.footer-link > a > i.fab.fa-git-alt {
color:#4cae2e;
}
.footer-link > a > span.icon-home {
font-size: 27px;
padding: 7px;
}
.moji p img {
width: 128px;
}
.bitcoin img {
width: 150px;
text-align: center;
/* float: left; */
padding: 10px;
}
.bitcoin {
text-align: center;
}
a.menu-link-left {
padding: 10px;
margin: 0 0 0 5px;
}
span.menu-right-top {
display: flex;
align-items: flex-start;
justify-content: flex-end;
}
.vrm {
display: none;
text-align: center;
overflow: hidden;
}
.vrm iframe {
width:600px;
height:400px;
}
.vrm_button {
text-align: center;
}
.vrm_button i.fa-brands.fa-unity {
font-size: 33px;
color: #000;
}
.vrm_button button {
background-color: #0000;
border-style: none;
}
a.menu-link-left-black i {
color: #fff700;
}
a.menu-link-left-black i:hover {
color: #ddd700;
}
a.menu-link-left-black {
background-color:#313131;
padding: 10px;
margin: 0 0 0 5px;
}
span.menu-right-top div#app {
width: 100%;
}
div#container {
background-color: #fff;
}
.story {
margin: 30px;
}
p code {
background: #f1f1f1;
padding: 4px 8px;
}
li.top a {
color: #fff700;
}
li.top a:hover {
color: #ddd700;
}
a.menu-link-left {
color: #fff700;
}
iframe.manga {
width:100%;
height: 800px;
}
header#header {
background-color: #313131;
}
.top-card {
margin:0 auto;
text-align: center;
}
.top-card p img {
width:80px;
padding:1px;
}
@media screen and (max-width:1000px) {
html {
font-size: 100%;
}
.logo span.icon-phoenix-world{
font-size: 60px;
font-size: 6rem;
}
.containerx {
width: auto;
margin: 0 15px;
font-size:18px;
word-wrap: break-word;
word-break: break-all;
}
.vrm iframe {
width:100%;
}
}
.nav {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.nav-link {
display: block;
padding: 0.5rem 1rem;
}
.nav-link:hover, .nav-link:focus {
text-decoration: none;
}
.nav-link.disabled {
color: #6c757d;
pointer-events: none;
cursor: default;
}
.nav-tabs {
border-bottom: 1px solid #dee2e6;
}
.nav-tabs .nav-item {
margin-bottom: -1px;
}
.nav-tabs .nav-link {
border: 1px solid transparent;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
border-color: #e9ecef #e9ecef #dee2e6;
}
.nav-tabs .nav-link.disabled {
color: #6c757d;
background-color: transparent;
border-color: transparent;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
color: #495057;
background-color: #fff;
border-color: #dee2e6 #dee2e6 #fff;
}
.navbar-nav-right > a > img {
width:20px;
padding:5px;
}
.nav-tabs .dropdown-menu {
margin-top: -1px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.nav-pills .nav-link {
border-radius: 0.25rem;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
color: #fff;
background-color: #007bff;
}
.nav-fill .nav-item {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
text-align: center;
}
.nav-justified .nav-item {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
text-align: center;
}
.navbar {
position: sticky;
top: 0;
z-index: 1071;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0.5rem 1rem 0.3rem 1rem;
}
nav.navbar.navbar-expand-lg.navbar-light.bg-light{
border-bottom: solid 1px #fff;
background: #313131;
}
.navbar .container,
.navbar .container-fluid, .navbar .container-sm, .navbar .container-md, .navbar .container-lg, .navbar .container-xl {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
}
.navbar-brand {
display: inline-block;
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
margin-right: 1rem;
line-height: inherit;
white-space: nowrap;
}
.navbar-brand:hover, .navbar-brand:focus {
text-decoration: none;
}
.navbar-nav {
display: -ms-flexbox;
display: contents;
-ms-flex-direction: column;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.navbar-nav .nav-link {
padding-right: 0;
padding-left: 0;
}
.navbar-nav .dropdown-menu {
position: static;
float: none;
}
.navbar-text {
display: inline-block;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.navbar-collapse {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-align: center;
align-items: center;
}
.navbar-toggler {
padding: 0.25rem 0.75rem;
font-size: 1.25rem;
line-height: 1;
background-color: transparent;
border: 1px solid transparent;
border-radius: 0.25rem;
}
.navbar-toggler:hover, .navbar-toggler:focus {
text-decoration: none;
}
.navbar-toggler-icon {
display: inline-block;
width: 1.5em;
height: 1.5em;
vertical-align: middle;
content: "";
background: no-repeat center center;
background-size: 100% 100%;
}
@media (max-width: 575.98px) {
.navbar-expand-sm > .container,
.navbar-expand-sm > .container-fluid, .navbar-expand-sm > .container-sm, .navbar-expand-sm > .container-md, .navbar-expand-sm > .container-lg, .navbar-expand-sm > .container-xl {
padding-right: 0;
padding-left: 0;
}
}
@media (min-width: 576px) {
.navbar-expand-sm {
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-ms-flex-pack: start;
justify-content: flex-start;
}
.navbar-expand-sm .navbar-nav {
-ms-flex-direction: row;
flex-direction: row;
}
.navbar-expand-sm .navbar-nav .dropdown-menu {
position: absolute;
}
.navbar-expand-sm .navbar-nav .nav-link {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.navbar-expand-sm > .container,
.navbar-expand-sm > .container-fluid, .navbar-expand-sm > .container-sm, .navbar-expand-sm > .container-md, .navbar-expand-sm > .container-lg, .navbar-expand-sm > .container-xl {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.navbar-expand-sm .navbar-collapse {
display: -ms-flexbox !important;
display: flex !important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
}
.navbar-expand-sm .navbar-toggler {
display: none;
}
}
@media (max-width: 767.98px) {
.navbar-expand-md > .container,
.navbar-expand-md > .container-fluid, .navbar-expand-md > .container-sm, .navbar-expand-md > .container-md, .navbar-expand-md > .container-lg, .navbar-expand-md > .container-xl {
padding-right: 0;
padding-left: 0;
}
}
@media (min-width: 768px) {
.navbar-expand-md {
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-ms-flex-pack: start;
justify-content: flex-start;
}
.navbar-expand-md .navbar-nav {
-ms-flex-direction: row;
flex-direction: row;
}
.navbar-expand-md .navbar-nav .dropdown-menu {
position: absolute;
}
.navbar-expand-md .navbar-nav .nav-link {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.navbar-expand-md > .container,
.navbar-expand-md > .container-fluid, .navbar-expand-md > .container-sm, .navbar-expand-md > .container-md, .navbar-expand-md > .container-lg, .navbar-expand-md > .container-xl {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.navbar-expand-md .navbar-collapse {
display: -ms-flexbox !important;
display: flex !important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
}
.navbar-expand-md .navbar-toggler {
display: none;
}
}
.navbar-expand-lg {
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-ms-flex-pack: start;
justify-content: flex-start;
}
.navbar-expand-lg .navbar-nav {
-ms-flex-direction: row;
flex-direction: row;
}
.navbar-expand-lg .navbar-nav .dropdown-menu {
position: absolute;
}
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.navbar-expand-lg > .container,
.navbar-expand-lg > .container-fluid, .navbar-expand-lg > .container-sm, .navbar-expand-lg > .container-md, .navbar-expand-lg > .container-lg, .navbar-expand-lg > .container-xl {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.navbar-expand-lg .navbar-collapse {
display: -ms-flexbox !important;
display: flex !important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
}
.navbar-expand-lg .navbar-toggler {
display: none;
}
@media (max-width: 1199.98px) {
.navbar-expand-xl > .container,
.navbar-expand-xl > .container-fluid, .navbar-expand-xl > .container-sm, .navbar-expand-xl > .container-md, .navbar-expand-xl > .container-lg, .navbar-expand-xl > .container-xl {
padding-right: 0;
padding-left: 0;
}
}
@media (min-width: 1200px) {
.navbar-expand-xl {
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-ms-flex-pack: start;
justify-content: flex-start;
}
.navbar-expand-xl .navbar-nav {
-ms-flex-direction: row;
flex-direction: row;
}
.navbar-expand-xl .navbar-nav .dropdown-menu {
position: absolute;
}
.navbar-expand-xl .navbar-nav .nav-link {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.navbar-expand-xl > .container,
.navbar-expand-xl > .container-fluid, .navbar-expand-xl > .container-sm, .navbar-expand-xl > .container-md, .navbar-expand-xl > .container-lg, .navbar-expand-xl > .container-xl {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.navbar-expand-xl .navbar-collapse {
display: -ms-flexbox !important;
display: flex !important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
}
.navbar-expand-xl .navbar-toggler {
display: none;
}
}
.navbar-expand {
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-ms-flex-pack: start;
justify-content: flex-start;
}
.navbar-expand > .container,
.navbar-expand > .container-fluid, .navbar-expand > .container-sm, .navbar-expand > .container-md, .navbar-expand > .container-lg, .navbar-expand > .container-xl {
padding-right: 0;
padding-left: 0;
}
.navbar-expand .navbar-nav {
-ms-flex-direction: row;
flex-direction: row;
}
.navbar-expand .navbar-nav .dropdown-menu {
position: absolute;
}
.navbar-expand .navbar-nav .nav-link {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.navbar-expand > .container,
.navbar-expand > .container-fluid, .navbar-expand > .container-sm, .navbar-expand > .container-md, .navbar-expand > .container-lg, .navbar-expand > .container-xl {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.navbar-expand .navbar-collapse {
display: -ms-flexbox !important;
display: flex !important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
}
.navbar-expand .navbar-toggler {
display: none;
}
.navbar-light .navbar-brand {
color: #fff700;
}
a:hover > .navbar-light .navbar-brand {
color: #ddd700;
}
.navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {
color: #ddd700;
}
.navbar-light .navbar-nav .nav-link {
color: #fff700;
}
.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
color: rgba(0, 0, 0, 0.7);
}
.navbar-light .navbar-nav .nav-link.disabled {
color: rgba(0, 0, 0, 0.3);
}
.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active {
color: rgba(0, 0, 0, 0.9);
}
.navbar-light .navbar-toggler {
color: rgba(0, 0, 0, 0.5);
border-color: rgba(0, 0, 0, 0.1);
}
.navbar-light .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-light .navbar-text {
color: rgba(0, 0, 0, 0.5);
}
.navbar-light .navbar-text a {
color: rgba(0, 0, 0, 0.9);
}
.navbar-light .navbar-text a:hover, .navbar-light .navbar-text a:focus {
color: rgba(0, 0, 0, 0.9);
}
.navbar-dark .navbar-brand {
color: #fff;
}
.navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
color: #fff;
}
.navbar-dark .navbar-nav .nav-link {
color: rgba(255, 255, 255, 0.5);
}
.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
color: rgba(255, 255, 255, 0.75);
}
.navbar-dark .navbar-nav .nav-link.disabled {
color: rgba(255, 255, 255, 0.25);
}
.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-link.active {
color: #fff;
}
.navbar-dark .navbar-toggler {
color: rgba(255, 255, 255, 0.5);
border-color: rgba(255, 255, 255, 0.1);
}
.navbar-dark .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-dark .navbar-text {
color: rgba(255, 255, 255, 0.5);
}
.navbar-dark .navbar-text a {
color: #fff;
}
.navbar-dark .navbar-text a:hover, .navbar-dark .navbar-text a:focus {
color: #fff;
}
.navbar-nav-right {
margin: 0 0 0 auto;
}
.navbar-nav > a > span.icon-phoenix-world {
font-size:2rem;
color:#fff700;
padding: 15px;
}
.navbar-nav > a:hover > span.icon-phoenix-world {
color:#008CCF;
}
.navbar-nav-right a span.icon-syui {
font-size: 33px;
}
.navbar-nav-right a span.icon-ai {
font-size: 33px;
}
.navbar-nav-right > a > i {
padding: 10px;
}
a.navbar-brand {
color:#fff700;
}
.navbar-nav-left {
padding-bottom: 5px;
}
.navbar-nav > span.navbar-title-icon > a > span.icon-syui {
font-size: 1.5rem;
padding: 15px;
}
.navbar-nav > span.navbar-title-icon > a > span.icon-ai {
font-size: 1.5rem;
padding: 15px;
}
.navbar-nav > span.navbar-title-text {
padding: 0 40px 0 40px;
}
.navbar-nav > span.navbar-title-text > a.navbar-title {
font-size: 26px;
}
.navbar-nav > span.navbar-title-text-ai > a.navbar-title {
padding: 0 40px 0 5px;
font-size: 26px;
}
.navbar-nav > span.navbar-title-text-phoenix > a.navbar-title {
font-size: 26px;
padding: 0 5px 0 40px;
}
@media (max-width: 1099px) {
.navbar-nav-right{
/*display:none;*/
}
}
@media (max-width: 650px) {
.navbar-nav-left{
display:none;
}
.navbar-nav > span.navbar-title-icon {
margin:0 0 0 auto;
}
.navbar {
padding: 0.5rem 0rem 0.3rem 0rem;
}
.navbar-expand-lg .navbar-collapse {
padding: 0 10px 0 10px;
}
}
span#box.play {
display:inline-block;
}
span#box.play {
animation:10s linear infinite rotation;
}
@keyframes rotation{
0%{ transform:rotate(0);}
50%{ transform:rotate(180deg);}
100%{ transform:rotate(360deg); }
}
a {
color: #777333;
}
a:hover {
color: #aaa500;
}
.navbar-light .navbar-brand {
color: #fff700;
}
a.navbar-brand {
color: #ddd700;
}
.navbar-nav-right a span.icon-syui {
font-size: 33px;
}
.sns-bottom-ai {
display:none;
}
.top-sns-header {
padding: 10px;
}
@media (max-width: 650px) {
.vrm iframe {
width:100%;
}
.sns-bottom-ai {
display:block;
}
}
span.icon-ai {
color: #fff700;
}
span.navbar-title-text > a span.icon-ai {
}
.top-menu {
margin: 50px 0px 20px 0px;
}
.top-menu a.menu-link {
background-color: #fff;
padding: 10px;
}
.top-menu a.menu-link span.icon-ai {
color: #fff700;
}
i.fa-brands.fa-unity {
color: #fff700;
}
i.fa-brands.fa-git-alt {
color: #fff700;
}
model-viewer {
width: 100%;
height: 400px;
}
table {
margin-bottom: 2em;
margin-top: 2em;
width: 100%;
border-spacing: 15px;
text-align: center;
}
table {
border-spacing: 2px;
}
li.blog-list {
background-color: #fff;
padding:10px 40px;;
border: solid 1px #eee;
}
li.blog-list span.blog-date {
float:left;
padding: 0 20px;
}
li.blog-menu {
text-align: center;
padding:10px 40px;;
}
.hotkeys-docs table tbody tr {
color: #313131;
}
.hotkeys-docs table tbody tr code {
border-radius: 4px;
background-color: #fff;
padding:5px 10px;
color:#313131;
}
.hotkeys-docs table {
height: 50px;
}
.hotkeys-docs table tbody tr th.row {
border-radius: 4px;
background-color:#313131;
}
.hotkeys-docs table tbody tr span.icon-aiterm {
color: #fff700;
}
.hotkeys-docs table tbody tr td {
border-radius: 4px;
}