掃除&アプリアイコンのハイライト
このコミットが含まれているのは:
コミット
c3298f1f4e
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<span>
|
||||
<a href="#" @click="show = true"><img src="/img/bash/app_icon.webp" width="50" height="50" alt="ロリ端末" /></a>
|
||||
<a href="#" @click="show = true"><img class="icon" src="/img/bash/app_icon.webp" width="50" height="50" alt="ロリ端末" /></a>
|
||||
<span v-if="show">
|
||||
<label :for="`konsoleinput-${output.length-1}`">
|
||||
<vue-draggable-resizable style="border: 0px solid #232629;" :drag-handle="'.drag-handle'" class-name-handle="resize-handle" class="konsoleuser" :x="-50" :y="-100" :z="99999999">
|
||||
|
@ -226,4 +226,12 @@
|
|||
color: #fcfcfc;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.icon:hover {
|
||||
background-color:#eff0f180;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<span>
|
||||
<a href="#" @click="show = true"><img src="/img/bash/note_icon.webp" width="50" height="50" alt="ショタノート" /></a>
|
||||
<a href="#" @click="show = true"><img class="icon" src="/img/bash/note_icon.webp" width="50" height="50" alt="ショタノート" /></a>
|
||||
<span v-if="show">
|
||||
<vue-draggable-resizable style="border: 0px solid #232629;" :drag-handle="'.drag-handle'" class-name-handle="resize-handle" class="shotanote" :x="50" :y="-100" :z="99999999">
|
||||
<div style="width: 100%; position: relative;">
|
||||
|
@ -224,4 +224,12 @@
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.icon:hover {
|
||||
background-color:#eff0f180;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -0,0 +1,83 @@
|
|||
.bar {
|
||||
background: linear-gradient(to bottom, $evil4 0%, $evil1 34%, $evil6 100%);
|
||||
}
|
||||
|
||||
.bara {
|
||||
background: linear-gradient(180deg, $suwa05 0, $suwa01 34%, $evil5 100%);
|
||||
}
|
||||
|
||||
.bar, .bara {
|
||||
text-align: center;
|
||||
color: $white1;
|
||||
padding: 5px;
|
||||
font-size: 20px;
|
||||
border-bottom: solid 2px $suwa03;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
.bar > a {
|
||||
color: $white1;
|
||||
}
|
||||
|
||||
.bar > a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.bar:hover {
|
||||
color: $white1;
|
||||
background: linear-gradient(to bottom, $evil3 0%, $evil0 34%, $evil2 100%);
|
||||
}
|
||||
|
||||
.indexborder {
|
||||
border: 2px solid $suwa03;
|
||||
box-shadow: 0px 0px 7px 3px $suwa04;
|
||||
padding: 8px;
|
||||
background-color: $black1;
|
||||
}
|
||||
|
||||
.meta {
|
||||
padding: 5px;
|
||||
text-align: left;
|
||||
background-color: $suwa09;
|
||||
border-bottom: solid 2px $suwa03;
|
||||
}
|
||||
|
||||
.comment {
|
||||
border-top: solid 2px $suwa03;
|
||||
}
|
||||
|
||||
.back, .comment {
|
||||
padding: 4px;
|
||||
background-color: $black2;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.commentloop {
|
||||
padding: 10px 4px 40px 4px;
|
||||
}
|
||||
|
||||
.commentloop > .name {
|
||||
color: $ok3;
|
||||
}
|
||||
|
||||
.within {
|
||||
margin: 0 auto;
|
||||
border: 2px solid $suwa03;
|
||||
box-shadow: 0px 0px 7px 3px $suwa04;
|
||||
}
|
||||
|
||||
.wny {
|
||||
border: solid 2px $ng5;
|
||||
box-shadow: 0px 0px 20px 10px $ng4;
|
||||
}
|
||||
|
||||
.bny, .cny {
|
||||
background-color: $ng2;
|
||||
border-bottom: solid 2px $ng5;
|
||||
}
|
||||
|
||||
.mny {
|
||||
background-color: $ng6;
|
||||
border-bottom: solid 2px $ng5;
|
||||
}
|
|
@ -0,0 +1,16 @@
|
|||
// @font-face {
|
||||
// font-family: jpserriffont;
|
||||
// src: url('jpserriffont.woff');
|
||||
// }
|
||||
|
||||
@font-face {
|
||||
font-family: 'jpserriffont';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('../fonts/jpserriffont.woff');
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: jpserriffont;
|
||||
}
|
|
@ -0,0 +1,85 @@
|
|||
.logo-img {
|
||||
border: 2px solid $suwa03;
|
||||
box-shadow: 0 0 7px 3px $suwa04;
|
||||
}
|
||||
|
||||
.logo-sns {
|
||||
transition: background 0.3s, color 0.3s;
|
||||
background-color: $black2;
|
||||
border: 1px solid $white2;
|
||||
padding: 8px;
|
||||
margin: 4px 10px;
|
||||
}
|
||||
|
||||
.logo-sns:hover {
|
||||
background-color: $white2;
|
||||
border: 1px solid $black2;
|
||||
}
|
||||
|
||||
.logo-br {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
/// Stroke font-character
|
||||
/// @param {Integer} $stroke - Stroke width
|
||||
/// @param {Color} $color - Stroke color
|
||||
/// @return {List} - text-shadow list
|
||||
@function stroke($stroke, $color) {
|
||||
$shadow: ();
|
||||
$from: $stroke*-1;
|
||||
@for $i from $from through $stroke {
|
||||
@for $j from $from through $stroke {
|
||||
$shadow: append($shadow, $i*1px $j*1px 0 $color, comma);
|
||||
}
|
||||
}
|
||||
@return $shadow;
|
||||
}
|
||||
/// Stroke font-character
|
||||
/// @param {Integer} $stroke - Stroke width
|
||||
/// @param {Color} $color - Stroke color
|
||||
/// @return {Style} - text-shadow
|
||||
@mixin stroke($stroke, $color) {
|
||||
text-shadow: stroke($stroke, $color);
|
||||
}
|
||||
|
||||
@keyframes sitenamehover {
|
||||
0% { text-shadow: stroke(4, $suwa04); }
|
||||
25% { text-shadow: stroke(4, $suwa03); }
|
||||
50% { text-shadow: stroke(4, $suwa00); }
|
||||
75% { text-shadow: stroke(4, $suwa03); }
|
||||
100% { text-shadow: stroke(4, $suwa04); }
|
||||
}
|
||||
|
||||
.logo-c {
|
||||
font-size: 64px;
|
||||
font-weight: bolder;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-shadow: stroke(4, $suwa04);
|
||||
}
|
||||
|
||||
.logo-c:hover {
|
||||
animation: sitenamehover 2s linear infinite;
|
||||
}
|
||||
|
||||
@media (max-width : 1200px) {
|
||||
.logo-c {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width : 968px) {
|
||||
.logo-c {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width : 525px) {
|
||||
.logo-br, .nomobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,43 @@
|
|||
.bg-dark {
|
||||
background: radial-gradient(farthest-corner at 50% 85%, $suwa06 0%, $black1 100%);
|
||||
border: 2px solid $suwa03;
|
||||
box-shadow: 0 0 7px 3px $suwa04;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
border: 0px solid transparent;
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown-menu {
|
||||
background-color: $black2;
|
||||
color: $white1;
|
||||
border: 2px solid $suwa03;
|
||||
box-shadow: 0 0 7px 3px $suwa04;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
color: $white1;
|
||||
}
|
||||
|
||||
.dropdown-item.active, .dropdown-item:active, .dropdown-item:hover, .dropdown-item:focus {
|
||||
color: $white1;
|
||||
background-color: $suwa03;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.navbar-brand, .nav-item {
|
||||
transition: background 0.3s;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navbar-brand:hover, .nav-item:hover {
|
||||
background-color: $suwa07;
|
||||
}
|
|
@ -0,0 +1,8 @@
|
|||
.sidemenu {
|
||||
border: 2px solid $suwa03;
|
||||
box-shadow: 0 0 7px 3px $suwa04;
|
||||
}
|
||||
|
||||
.nav-pills .nav-link {
|
||||
border-radius: 0px;
|
||||
}
|
|
@ -1,19 +1,95 @@
|
|||
$spec: false;
|
||||
|
||||
// Body
|
||||
$body-bg: #31363b;
|
||||
// 色
|
||||
//// メイン
|
||||
$suwa00: #9ed6ff;
|
||||
$suwa01: #8bb6d6;
|
||||
$suwa02: #6ec0fb;
|
||||
$suwa03: #3daee9;
|
||||
$suwa04: #1d99f3;
|
||||
$suwa05: #0094ff;
|
||||
$suwa06: #3498db;
|
||||
$suwa07: #2980b9;
|
||||
$suwa08: #205e7d;
|
||||
$suwa09: #2c3e50;
|
||||
$suwa10: #34495e;
|
||||
|
||||
// Typography
|
||||
$font-family-sans-serif: "Raleway", sans-serif;
|
||||
$font-size-base: 1rem;
|
||||
$line-height-base: 1.6;
|
||||
$evil0: #6e93ad;
|
||||
$evil1: #436a86;
|
||||
$evil2: #2b6b8b;
|
||||
$evil3: #2980b9;
|
||||
$evil4: #22699c;
|
||||
$evil5: #04547d;
|
||||
$evil6: #1a3746;
|
||||
|
||||
#app {
|
||||
font-family: monospace;
|
||||
font-size: large;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: left;
|
||||
margin-top: 48px;
|
||||
margin-left: 0px;
|
||||
@if $spec {
|
||||
$suwa00: #ffe6f9;
|
||||
$suwa01: #e599e5;
|
||||
$suwa02: #ea81e8;
|
||||
$suwa03: #e93de9;
|
||||
$suwa04: #f31de8;
|
||||
$suwa05: #ea00ff;
|
||||
$suwa06: #db34d3;
|
||||
$suwa07: #b929b2;
|
||||
$suwa07: #b459b6;
|
||||
$suwa08: #7d2069;
|
||||
$suwa09: #502c50;
|
||||
$suwa10: #5e345c;
|
||||
|
||||
$evil0: #ad6ea8;
|
||||
$evil1: #864386;
|
||||
$evil2: #832b8b;
|
||||
$evil3: #b929ad;
|
||||
$evil4: #9c2296;
|
||||
$evil5: #7d0469;
|
||||
$evil6: #421a46;
|
||||
}
|
||||
|
||||
//// 青
|
||||
$dan1: #9ed6ff;
|
||||
$dan2: #3daee9;
|
||||
$dan3: #1d99f3;
|
||||
$dan4: #205e7d;
|
||||
|
||||
//// 赤
|
||||
$ng1: #f58276;
|
||||
$ng2: #da4453;
|
||||
$ng3: #e74c3c;
|
||||
$ng4: #ff3636;
|
||||
$ng5: #ed1515;
|
||||
$ng6: #c0392b;
|
||||
$ng7: #611e24;
|
||||
|
||||
//// グレ
|
||||
$grey1: #d6dfe4;
|
||||
$grey2: #bdc3c7;
|
||||
$grey3: #7f8c8d;
|
||||
$grey4: #727272;
|
||||
$grey5: #495051;
|
||||
|
||||
//// 黒
|
||||
$black1: #232629;
|
||||
$black2: #31363b;
|
||||
$black3: #4d4d4d;
|
||||
|
||||
//// 白
|
||||
$white1: #fcfcfc;
|
||||
$white2: #eff0f1;
|
||||
|
||||
//// ピンク
|
||||
$jo1: #ffe6f9;
|
||||
$jo2: #e93de9;
|
||||
$jo3: #f31de8;
|
||||
$jo4: #7d2069;
|
||||
|
||||
//// 緑
|
||||
$ok1: #20ec77;
|
||||
$ok2: #2ecc71;
|
||||
$ok3: #11d116;
|
||||
$ok4: #27ae60;
|
||||
$ok5: #145d33;
|
||||
|
||||
//// 紫
|
||||
$kawaii1: #cb81ea;
|
||||
$kawaii2: #9b59b6;
|
||||
$kawaii3: #61237c;
|
||||
|
|
|
@ -4,306 +4,50 @@
|
|||
// Bootstrap
|
||||
@import '~bootstrap/scss/bootstrap';
|
||||
|
||||
@font-face {
|
||||
font-family: 'jpserriffont';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('../fonts/jpserriffont.woff');
|
||||
font-display: swap;
|
||||
}
|
||||
// フォント
|
||||
@import "jpserriffont";
|
||||
|
||||
body {
|
||||
font-family: 'jpserriffont';
|
||||
text-align: center;
|
||||
color: #fcfcfc;
|
||||
background-color: #232629;
|
||||
}
|
||||
// ロゴ
|
||||
@import "logo";
|
||||
|
||||
.indexborder {
|
||||
border: 2px solid #3daee9;
|
||||
box-shadow: 0px 0px 7px 3px #1d99f3;
|
||||
padding: 8px;
|
||||
background-color: #31363b;
|
||||
}
|
||||
// ナビバー
|
||||
@import "navbar";
|
||||
|
||||
.logo-img {
|
||||
border: 2px solid #3daee9;
|
||||
box-shadow: 0 0 7px 3px #1d99f3;
|
||||
}
|
||||
// サイドメニュー
|
||||
@import "sidemenu";
|
||||
|
||||
.logo-sns {
|
||||
background-color: #31363b;
|
||||
border: 1px solid #eff0f1;
|
||||
padding: 8px;
|
||||
margin: 4px 10px;
|
||||
}
|
||||
// コンテンツ
|
||||
@import "contents";
|
||||
|
||||
.logo-sns:hover {
|
||||
background-color: #eff0f1;
|
||||
border: 1px solid #31363b;
|
||||
}
|
||||
// コンポーネント
|
||||
@import "conponent/badge";
|
||||
@import "conponent/button";
|
||||
@import "conponent/check";
|
||||
@import "conponent/form";
|
||||
@import "conponent/modal";
|
||||
|
||||
.logo-br {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
right: 16px;
|
||||
}
|
||||
// その他
|
||||
#app {
|
||||
font-family: monospace;
|
||||
font-size: large;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: left;
|
||||
margin-top: 48px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
/// Stroke font-character
|
||||
/// @param {Integer} $stroke - Stroke width
|
||||
/// @param {Color} $color - Stroke color
|
||||
/// @return {List} - text-shadow list
|
||||
@function stroke($stroke, $color) {
|
||||
$shadow: ();
|
||||
$from: $stroke*-1;
|
||||
@for $i from $from through $stroke {
|
||||
@for $j from $from through $stroke {
|
||||
$shadow: append($shadow, $i*1px $j*1px 0 $color, comma);
|
||||
}
|
||||
}
|
||||
@return $shadow;
|
||||
}
|
||||
/// Stroke font-character
|
||||
/// @param {Integer} $stroke - Stroke width
|
||||
/// @param {Color} $color - Stroke color
|
||||
/// @return {Style} - text-shadow
|
||||
@mixin stroke($stroke, $color) { text-shadow: stroke($stroke, $color); }
|
||||
body {
|
||||
font-family: 'jpserriffont';
|
||||
text-align: center;
|
||||
color: $white1;
|
||||
background-color: $black1;
|
||||
}
|
||||
|
||||
@keyframes sitenamehover {
|
||||
0% { text-shadow: stroke(4, #1d99f3); }
|
||||
25% { text-shadow: stroke(4, #3daee9); }
|
||||
50% { text-shadow: stroke(4, #ffe6f9); }
|
||||
75% { text-shadow: stroke(4, #3daee9); }
|
||||
100% { text-shadow: stroke(4, #1d99f3); }
|
||||
}
|
||||
|
||||
.logo-c {
|
||||
font-size: 64px;
|
||||
font-weight: bolder;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-shadow: stroke(4, #1d99f3);
|
||||
}
|
||||
|
||||
.logo-c:hover { animation: sitenamehover 2s linear infinite; }
|
||||
@media (max-width : 1200px) { .logo-c { font-size: 32px; } }
|
||||
@media (max-width : 968px) { .logo-c { font-size: 20px; } }
|
||||
@media (max-width : 525px) { .logo-br, .nomobile { display: none; } }
|
||||
|
||||
.sidemenu {
|
||||
border: 2px solid #3daee9;
|
||||
box-shadow: 0 0 7px 3px #1d99f3;
|
||||
}
|
||||
|
||||
a { color: #1d99f3; }
|
||||
a:hover { color: #3daee9; }
|
||||
.bg-dark {
|
||||
background: radial-gradient(farthest-corner at 50% 85%, #3498db 0%, #232629 100%);
|
||||
border: 2px solid #3daee9;
|
||||
box-shadow: 0 0 7px 3px #1d99f3;
|
||||
}
|
||||
.navbar { padding: 0px; }
|
||||
.navbar-toggler { border: 0px solid transparent; }
|
||||
.navbar-nav .dropdown-menu {
|
||||
background-color: #31363b;
|
||||
color: #fcfcfc;
|
||||
border: 2px solid #3daee9;
|
||||
box-shadow: 0 0 7px 3px #1d99f3;
|
||||
}
|
||||
.dropdown-item { color: #fcfcfc; }
|
||||
.dropdown-item.active, .dropdown-item:active, .dropdown-item:hover, .dropdown-item:focus {
|
||||
color: #fcfcfc;
|
||||
background-color: #3daee9;
|
||||
}
|
||||
.navbar-brand { padding: 5px; }
|
||||
.navbar-brand, .nav-item {
|
||||
transition: background 0.3s, color 0.3s;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.navbar-brand:hover, .nav-item:hover { background-color: #2980b9; }
|
||||
.badge-danger {
|
||||
color: #fcfcfc;
|
||||
background-color: #da4453;
|
||||
}
|
||||
.badge-light {
|
||||
color: #232629;
|
||||
background-color: #eff0f1;
|
||||
}
|
||||
.badge { font-size: 100%; }
|
||||
.within {
|
||||
margin: 30px auto;
|
||||
border: 2px solid #3daee9;
|
||||
box-shadow: 0px 0px 7px 3px #1d99f3;
|
||||
}
|
||||
.nav-pills .nav-link { border-radius: 0px; }
|
||||
.bar { background: linear-gradient(to bottom, #22699c 0%, #436a86 34%, #1a3746 100%); }
|
||||
.bara { background: linear-gradient(180deg,#0094ff 0,#8bb6d6 34%,#04547d 100%); }
|
||||
.bar, .bara {
|
||||
text-align: center;
|
||||
color: #fcfcfc;
|
||||
padding: 5px;
|
||||
font-size: 20px;
|
||||
border-bottom: solid 2px #3daee9;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s, color 0.3s;
|
||||
}
|
||||
.bar > a { color: #fcfcfc; }
|
||||
.bar > a:hover { text-decoration: none; }
|
||||
.bar:hover { background: linear-gradient(to bottom, #2980b9 0%, #6e93ad 34%, #2b6b8b 100%) }
|
||||
.meta {
|
||||
padding: 5px;
|
||||
text-align: left;
|
||||
background-color: #2c3e50;
|
||||
border-bottom: solid 2px #3daee9;
|
||||
}
|
||||
.comment { border-top: solid 2px #3daee9; }
|
||||
.back, .comment {
|
||||
padding: 4px;
|
||||
background-color: #31363b;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.commentloop { padding: 10px 4px 40px 4px; }
|
||||
.commentloop > .name { color: #11d116; }
|
||||
.modal-header, .modal-body, .modal-footer { color: #fcfcfc; }
|
||||
.modal-header { background: linear-gradient(to bottom, #1d99f3 0%, #6ec0fb 34%, #3daee9 100%); }
|
||||
.modal-body { background-color: #4d4d4d; }
|
||||
.modal-footer { background-color: #31363b; }
|
||||
.form-control, .form-control:focus { background-color: #232629; color: #fcfcfc; }
|
||||
.form-control { border: 1px solid #34495e; }
|
||||
.form-control:focus { border: 1px solid #3daee9; }
|
||||
.form-control:disabled, .form-control[readonly] { background-color: #232629; }
|
||||
|
||||
.custom-control-input:checked ~ .custom-control-label::before,
|
||||
.custom-radio .custom-control-input:checked ~ .custom-control-label::before,
|
||||
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before
|
||||
{
|
||||
color: #fcfcfc;
|
||||
background-color: #3daee9;
|
||||
border-color: #1d99f3;
|
||||
}
|
||||
.btn, btn:hover {
|
||||
margin: 0 2px;
|
||||
border: 2px solid;
|
||||
}
|
||||
.btn {
|
||||
border-left-color: #fcfcfc;
|
||||
border-top-color: #fcfcfc;
|
||||
}
|
||||
.btn:hover {
|
||||
border-left-color: #7f8c8d;
|
||||
border-top-color: #7f8c8d;
|
||||
}
|
||||
.btn-forum, .btn-forum.disabled, .btn-forum:disabled {
|
||||
background: radial-gradient(ellipse at top, #61237c, transparent),
|
||||
radial-gradient(ellipse at bottom, #232629, transparent);
|
||||
color: #fcfcfc;
|
||||
background-color: #9b59b6;
|
||||
border-bottom-color: #cb81ea;
|
||||
border-right-color: #cb81ea;
|
||||
}
|
||||
.btn-forum:hover {
|
||||
color: #fcfcfc;
|
||||
background-color: #61237c;
|
||||
border-color: transparent;
|
||||
border-bottom-color: #9b59b6;
|
||||
border-right-color: #9b59b6;
|
||||
}
|
||||
.btn-cwgames, .btn-cwgames.disabled, .btn-cwgames:disabled {
|
||||
background: radial-gradient(ellipse at top, #4d4d4d, transparent),
|
||||
radial-gradient(ellipse at bottom, #232629, transparent);
|
||||
color: #fcfcfc;
|
||||
border-bottom-color: #bdc3c7;
|
||||
border-right-color: #bdc3c7;
|
||||
}
|
||||
.btn-cwgames:hover {
|
||||
color: #fcfcfc;
|
||||
background-color: #727272;
|
||||
border-color: transparent;
|
||||
border-bottom-color: #31363b;
|
||||
border-right-color: #31363b;
|
||||
}
|
||||
.btn-pink, .btn-pink.disabled, .btn-pink:disabled {
|
||||
background: radial-gradient(ellipse at top, #ff00ff, transparent),
|
||||
radial-gradient(ellipse at bottom, #232629, transparent);
|
||||
color: #fcfcfc;
|
||||
background-color: #ff00ff;
|
||||
border-bottom-color: #ea81e8;
|
||||
border-right-color: #ea81e8;
|
||||
}
|
||||
.btn-pink:hover {
|
||||
color: #fcfcfc;
|
||||
background-color: #ff00ff;
|
||||
border-color: transparent;
|
||||
border-bottom-color: #b459b6;
|
||||
border-right-color: #b459b6;
|
||||
}
|
||||
.btn-primary, .btn-primary.disabled, .btn-primary:disabled {
|
||||
background: radial-gradient(ellipse at top, #3daee9, transparent),
|
||||
radial-gradient(ellipse at bottom, #232629, transparent);
|
||||
color: #fcfcfc;
|
||||
border-bottom-color: #9ed6ff;
|
||||
border-right-color: #9ed6ff;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
color: #fcfcfc;
|
||||
background-color: #205e7d;
|
||||
border-color: transparent;
|
||||
border-bottom-color: #1d99f3;
|
||||
border-right-color: #1d99f3;
|
||||
}
|
||||
.btn-secondary, .btn-secondary.disabled, .btn-secondary:disabled {
|
||||
background: radial-gradient(ellipse at top, #7f8c8d, transparent),
|
||||
radial-gradient(ellipse at bottom, #232629, transparent);
|
||||
color: #fcfcfc;
|
||||
border-bottom-color: #d6dfe4;
|
||||
border-right-color: #d6dfe4;
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
color: #fcfcfc;
|
||||
background-color: #495051;
|
||||
border-color: transparent;
|
||||
border-bottom-color: #bdc3c7;
|
||||
border-right-color: #bdc3c7;
|
||||
}
|
||||
.btn-success, .btn-success.disabled, .btn-success:disabled {
|
||||
background: radial-gradient(ellipse at top, #2ecc71, transparent),
|
||||
radial-gradient(ellipse at bottom, #232629, transparent);
|
||||
color: #fcfcfc;
|
||||
border-bottom-color: #20ec77;
|
||||
border-right-color: #20ec77;
|
||||
}
|
||||
.btn-success:hover {
|
||||
color: #fcfcfc;
|
||||
background-color: #145d33;
|
||||
border-color: transparent;
|
||||
border-bottom-color: #27ae60;
|
||||
border-right-color: #27ae60;
|
||||
}
|
||||
.btn-danger, .btn-danger.disabled, .btn-danger:disabled, .alert-danger {
|
||||
background: radial-gradient(ellipse at top, #da4453, transparent),
|
||||
radial-gradient(ellipse at bottom, #232629, transparent);
|
||||
color: #fcfcfc;
|
||||
border-bottom-color: #f58276;
|
||||
border-right-color: #f58276;
|
||||
}
|
||||
.btn-danger:hover {
|
||||
color: #fcfcfc;
|
||||
background-color: #611e24;
|
||||
border-color: transparent;
|
||||
border-bottom-color: #e74c3c;
|
||||
border-right-color: #e74c3c;
|
||||
}
|
||||
|
||||
.within { margin: 0 auto; }
|
||||
.wny { border: solid 2px #ed1515; box-shadow: 0px 0px 20px 10px rgba(237,21,21,1); }
|
||||
.bny, .cny { background-color: #da4453; border-bottom: solid 2px #ed1515; }
|
||||
.mny { background-color: #c0392b; border-bottom: solid 2px #ed1515; }
|
||||
.new { background-color: #2c3e50; margin: 10px auto; padding: 0; }
|
||||
.head > div { margin: 5px 0; }
|
||||
.new-head, .new-body { padding: 10px; }
|
||||
.new-head { border: 2px solid #3daee9; background-color: #34495e; }
|
||||
.new-body { border-bottom: 2px solid #3daee9; border-left: 2px solid #3daee9; border-right: 2px solid #3daee9; }
|
||||
a { color: $suwa04; }
|
||||
a:hover { color: $suwa03; }
|
||||
// .new { background-color: $suwa09; margin: 10px auto; padding: 0; }
|
||||
// .head > div { margin: 5px 0; }
|
||||
// .new-head, .new-body { padding: 10px; }
|
||||
// .new-head { border: 2px solid $suwa03; background-color: $suwa10; }
|
||||
// .new-body { border-bottom: 2px solid $suwa03; border-left: 2px solid $suwa03; border-right: 2px solid $suwa03; }
|
||||
|
|
|
@ -0,0 +1,13 @@
|
|||
.badge-danger {
|
||||
color: $white1;
|
||||
background-color: $ng3;
|
||||
}
|
||||
|
||||
.badge-light {
|
||||
color: $black1;
|
||||
background-color: $white2;
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-size: 100%;
|
||||
}
|
|
@ -0,0 +1,145 @@
|
|||
.btn, btn:hover {
|
||||
margin: 0 2px;
|
||||
border: 2px solid;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border-left-color: $white1;
|
||||
border-top-color: $white1;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
border-left-color: $grey3;
|
||||
border-top-color: $grey3;
|
||||
}
|
||||
|
||||
.btn-cwgames, .btn-cwgames.disabled, .btn-cwgames:disabled {
|
||||
background: radial-gradient(ellipse at top, $black3, transparent),
|
||||
radial-gradient(ellipse at bottom, $black1, transparent);
|
||||
color: $white1;
|
||||
border-bottom-color: $grey2;
|
||||
border-right-color: $grey2;
|
||||
}
|
||||
|
||||
.btn-cwgames:hover {
|
||||
color: $white1;
|
||||
background-color: $grey4;
|
||||
border-color: transparent;
|
||||
border-bottom-color: $black2;
|
||||
border-right-color: $black2;
|
||||
}
|
||||
|
||||
.btn-fumei, .btn-fumei.disabled, .btn-fumei:disabled {
|
||||
background: radial-gradient(ellipse at top, $kawaii3, transparent),
|
||||
radial-gradient(ellipse at bottom, $black1, transparent);
|
||||
color: $white1;
|
||||
background-color: $kawaii2;
|
||||
border-bottom-color: $kawaii1;
|
||||
border-right-color: $kawaii1;
|
||||
}
|
||||
|
||||
.btn-fumei:hover {
|
||||
color: $white1;
|
||||
background-color: $kawaii3;
|
||||
border-color: transparent;
|
||||
border-bottom-color: $kawaii2;
|
||||
border-right-color: $kawaii2;
|
||||
}
|
||||
|
||||
.btn-danshi, .btn-danshi.disabled, .btn-danshi:disabled {
|
||||
background: radial-gradient(ellipse at top, $dan2, transparent),
|
||||
radial-gradient(ellipse at bottom, $black1, transparent);
|
||||
color: $white1;
|
||||
background-color: $white1;
|
||||
border-bottom-color: $dan1;
|
||||
border-right-color: $dan1;
|
||||
}
|
||||
|
||||
.btn-danshi:hover {
|
||||
color: $white1;
|
||||
background-color: $suwa08;
|
||||
border-color: transparent;
|
||||
border-bottom-color: $suwa04;
|
||||
border-right-color: $suwa04;
|
||||
}
|
||||
|
||||
.btn-joshi, .btn-joshi.disabled, .btn-joshi:disabled {
|
||||
background: radial-gradient(ellipse at top, $jo2, transparent),
|
||||
radial-gradient(ellipse at bottom, $black1, transparent);
|
||||
color: $white1;
|
||||
background-color: $white1;
|
||||
border-bottom-color: $jo1;
|
||||
border-right-color: $jo1;
|
||||
}
|
||||
|
||||
.btn-joshi:hover {
|
||||
color: $white1;
|
||||
background-color: $jo4;
|
||||
border-color: transparent;
|
||||
border-bottom-color: $jo3;
|
||||
border-right-color: $jo3;
|
||||
}
|
||||
|
||||
.btn-primary, .btn-primary.disabled, .btn-primary:disabled {
|
||||
background: radial-gradient(ellipse at top, $suwa03, transparent),
|
||||
radial-gradient(ellipse at bottom, $black1, transparent);
|
||||
color: $white1;
|
||||
border-bottom-color: $suwa00;
|
||||
border-right-color: $suwa00;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
color: $white1;
|
||||
background-color: $suwa08;
|
||||
border-color: transparent;
|
||||
border-bottom-color: $suwa04;
|
||||
border-right-color: $suwa04;
|
||||
}
|
||||
|
||||
.btn-secondary, .btn-secondary.disabled, .btn-secondary:disabled {
|
||||
background: radial-gradient(ellipse at top, $grey3, transparent),
|
||||
radial-gradient(ellipse at bottom, $black1, transparent);
|
||||
color: $white1;
|
||||
border-bottom-color: $grey1;
|
||||
border-right-color: $grey1;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
color: $white1;
|
||||
background-color: $grey5;
|
||||
border-color: transparent;
|
||||
border-bottom-color: $grey2;
|
||||
border-right-color: $grey2;
|
||||
}
|
||||
|
||||
.btn-success, .btn-success.disabled, .btn-success:disabled {
|
||||
background: radial-gradient(ellipse at top, $ok2, transparent),
|
||||
radial-gradient(ellipse at bottom, $black1, transparent);
|
||||
color: $white1;
|
||||
border-bottom-color: $ok1;
|
||||
border-right-color: $ok1;
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
color: $white1;
|
||||
background-color: $ok5;
|
||||
border-color: transparent;
|
||||
border-bottom-color: $ok4;
|
||||
border-right-color: $ok4;
|
||||
}
|
||||
|
||||
.btn-danger, .btn-danger.disabled, .btn-danger:disabled, .alert-danger {
|
||||
background: radial-gradient(ellipse at top, $ng3, transparent),
|
||||
radial-gradient(ellipse at bottom, $black1, transparent);
|
||||
color: $white1;
|
||||
border-bottom-color: $ng1;
|
||||
border-right-color: $ng1;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
color: $white1;
|
||||
background-color: $ng7;
|
||||
border-color: transparent;
|
||||
border-bottom-color: $ng3;
|
||||
border-right-color: $ng3;
|
||||
}
|
|
@ -0,0 +1,8 @@
|
|||
.custom-control-input:checked ~ .custom-control-label::before,
|
||||
.custom-radio .custom-control-input:checked ~ .custom-control-label::before,
|
||||
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before
|
||||
{
|
||||
color: $white1;
|
||||
background-color: $suwa03;
|
||||
border-color: $suwa04;
|
||||
}
|
|
@ -0,0 +1,16 @@
|
|||
.form-control, .form-control:focus {
|
||||
background-color: $black1;
|
||||
color: $white1;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border: 1px solid $suwa10;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border: 1px solid $suwa03;
|
||||
}
|
||||
|
||||
.form-control:disabled, .form-control[readonly] {
|
||||
background-color: $black1;
|
||||
}
|
|
@ -0,0 +1,15 @@
|
|||
.modal-header, .modal-body, .modal-footer {
|
||||
color: $white1;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background: linear-gradient(to bottom, $suwa04 0%, $suwa02 34%, $suwa03 100%);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
background-color: $black3;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
background-color: $black2;
|
||||
}
|
|
@ -1,8 +0,0 @@
|
|||
@font-face {
|
||||
font-family: jpserriffont;
|
||||
src: url('jpserriffont.woff');
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: jpserriffont;
|
||||
}
|
|
@ -44,16 +44,16 @@
|
|||
<fieldset class="form-group">
|
||||
<div tabindex="-1" role="group">
|
||||
<div id="gender" role="radiogroup" tabindex="-1" class="btn-group-toggle btn-group" variant="primary">
|
||||
<label class="btn btn-forum">
|
||||
<input id="gender0" name="gender" type="radio" name="gender" autocomplete="off" class="" value="0" />
|
||||
<label class="btn btn-fumei">
|
||||
<input id="gender0" name="gender" type="radio" autocomplete="off" class="" value="0" />
|
||||
<span>不明</span>
|
||||
</label>
|
||||
<label class="btn btn-primary">
|
||||
<input id="gender1" name="gender" type="radio" name="gender" autocomplete="off" class="" value="1" />
|
||||
<label class="btn btn-danshi">
|
||||
<input id="gender1" name="gender" type="radio" autocomplete="off" class="" value="1" />
|
||||
<span>男性</span>
|
||||
</label>
|
||||
<label class="btn btn-pink">
|
||||
<input id="gender2" name="gender" type="radio" name="gender" autocomplete="off" class="" value="2" />
|
||||
<label class="btn btn-joshi">
|
||||
<input id="gender2" name="gender" type="radio" autocomplete="off" class="" value="2" />
|
||||
<span>女性</span>
|
||||
</label>
|
||||
</div>
|
||||
|
|
新しいイシューから参照