settings
1. テンプレート機能
code:style.css
button#Templates.tool-btn:hover { text-decoration: none }
button#Templates.tool-btn::before { position: absolute; content: '\f067'; font: 900 21px/46px 'Font Awesome 5 Free' }
button#Templates.tool-btn img { opacity: 0 }
code:style.css
settings
code:style.css
body {
/* background-color: #f5f2e9; */
background-color: #f5f4f6;
}
.page {
box-shadow: none;
}
.navbar {
background-color: #f5f4f6;
box-shadow: 0px 1px 0px 0px #D9DCE0;
backdrop-filter: none;
}
.navbar .container .row {
height: 56px
}
/* ユーザーメニューアイコンを縦方向にセンタリング
.navbar .row .col-menu {
display:flex;
justify-content: flex-end;
align-items: center;
}
.col-brand .project-home {
color: #383838; /* リンクの色 */
font-weight: 600;
left: 28px;
top: 50%;
transform : translateY(-50%);
font-size: 18px;
display: inline-block;
position: absolute;
max-width: calc(100% - 80px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.btn.project-home{
box-shadow: none;
}
.col-brand .project-home:hover { text-decoration: none; opacity: .6 }
.navbar-brand{
width: 28px;
}
.navbar-brand div, .navbar-brand span { display: none !important }
.navbar-brand::before {
content: '\f0c9';
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 24px;
color: #383838;
/* position: relative;
line-height: 56xpx; */
position: absolute;
top: 50%;
transform : translateY(-50%);
}
.search-form .form-group input {
background-color: white;
}
// 検索アイコンを常時グレーに
.search-form .form-group .button-container button .kamon {
fill: #4a4a4a;
}
.grid li.page-list-item a {
box-shadow: none !important;
}
.hover{
background: none !important;
}
/* 浮遊アニメーション
.grid li:hover{
transform:scale(1.01,1.01);
transition:0.3s all;
box-shadow: 0px 8px 16px -2px rgba(10,10,10,0.1), 0px 0px 0px 1px rgba(10,10,10,0.02);
}
*/
.grid li a .header {
border-top: none !important;
}
div .pin {
background: none !important;
}
ul > .pin:after{
content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDI0IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0cHgiIGZpbGw9IiMwMDAwMDAiPjxnPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iMjQiIHdpZHRoPSIyNCIvPjwvZz48Zz48cGF0aCBkPSJNMTYsOVY0bDEsMGMwLjU1LDAsMS0wLjQ1LDEtMXYwYzAtMC41NS0wLjQ1LTEtMS0xSDdDNi40NSwyLDYsMi40NSw2LDN2MCBjMCwwLjU1LDAuNDUsMSwxLDFsMSwwdjVjMCwxLjY2LTEuMzQsMy0zLDNoMHYyaDUuOTd2N2wxLDFsMS0xdi03SDE5di0yaDBDMTcuMzQsMTIsMTYsMTAuNjYsMTYsOXoiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=");
position: absolute;
top: -5px;
right: -5px;
transform: rotate(45deg);
}
@media (max-width: 767px) {
.col-page {
padding: 0px;
}
.page {
padding-left: 15px;
padding-right: 15px;
}
.related-page-list {
padding: 0 15px;
}
.quick-launch {
display: flex;
}
.new-button {
margin: 0px !important;
}
}
code:style.css
.grid li.page-list-item{
order:1;
}
.grid li.page-list-item a {
display: inline-block;
padding: 5px;
text-decoration: none;
border-radius: 10px;
position: relative;
border: 1px solid transparent;
z-index: 0;
overflow: inherit;
}
.grid li.page-list-item a::before {
content: "";
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
border-radius: inherit;
padding: 3px;
background: linear-gradient(270deg, red, orange, yellow, green, blue, indigo, violet);
background-size: 400% 400%;
z-index: -1;
animation: rainbow 5s linear infinite;
}
.grid li.page-list-item a::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: inherit;
background: white; /* 背景をリンク内に配置 */
z-index: -1;
}
@keyframes rainbow {
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
}