掃除&アプリアイコンのハイライト

このコミットが含まれているのは:
テクニカル諏訪子 2020-08-01 22:00:15 +09:00
コミット c3298f1f4e
16個のファイルの変更585行の追加325行の削除

ファイルの表示

@ -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>

83
resources/sass/_contents.scss vendored ノーマルファイル
ファイルの表示

@ -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;
}

16
resources/sass/_jpserriffont.scss vendored ノーマルファイル
ファイルの表示

@ -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;
}

85
resources/sass/_logo.scss vendored ノーマルファイル
ファイルの表示

@ -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;
}
}

43
resources/sass/_navbar.scss vendored ノーマルファイル
ファイルの表示

@ -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;
}

8
resources/sass/_sidemenu.scss vendored ノーマルファイル
ファイルの表示

@ -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; }

13
resources/sass/conponent/_badge.scss vendored ノーマルファイル
ファイルの表示

@ -0,0 +1,13 @@
.badge-danger {
color: $white1;
background-color: $ng3;
}
.badge-light {
color: $black1;
background-color: $white2;
}
.badge {
font-size: 100%;
}

145
resources/sass/conponent/_button.scss vendored ノーマルファイル
ファイルの表示

@ -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;
}

8
resources/sass/conponent/_check.scss vendored ノーマルファイル
ファイルの表示

@ -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;
}

16
resources/sass/conponent/_form.scss vendored ノーマルファイル
ファイルの表示

@ -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;
}

15
resources/sass/conponent/_modal.scss vendored ノーマルファイル
ファイルの表示

@ -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>