345 行
9.2 KiB
SCSS
345 行
9.2 KiB
SCSS
// Variables
|
|
@import "variables";
|
|
|
|
// Bootstrap
|
|
@import '~bootstrap/scss/bootstrap';
|
|
|
|
@font-face {
|
|
font-family: 'jpserriffont';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url('../fonts/jpserriffont.woff');
|
|
font-display: swap;
|
|
}
|
|
|
|
body {
|
|
font-family: 'jpserriffont';
|
|
text-align: center;
|
|
color: #fcfcfc;
|
|
background-color: #232629;
|
|
}
|
|
|
|
.logo-img {
|
|
border: 2px solid #3daee9;
|
|
box-shadow: 0 0 7px 3px #1d99f3;
|
|
}
|
|
|
|
.logo-sns {
|
|
background-color: #31363b;
|
|
border: 1px solid #eff0f1;
|
|
padding: 4px;
|
|
margin: 4px 10px;
|
|
}
|
|
|
|
.logo-sns:hover {
|
|
background-color: #eff0f1;
|
|
border: 1px solid #31363b;
|
|
}
|
|
|
|
.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, #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; }
|