Browse Source

最初コミット

master
commit
7e3099966d
  1. 6
      .gitignore
  2. 4
      LICENSE.txt
  3. 21
      README.md
  4. 0
      bld/.placeholder
  5. 23
      src/colour/_dansei.scss
  6. 23
      src/colour/_fumei.scss
  7. 23
      src/colour/_josei.scss
  8. 56
      src/colour/_var.scss
  9. 156
      src/conponent/_app.scss
  10. 3
      src/conponent/_badge.scss
  11. 190
      src/conponent/_button.scss
  12. 4
      src/conponent/_check.scss
  13. 5
      src/conponent/_comments.scss
  14. 40
      src/conponent/_contents.scss
  15. 168
      src/conponent/_form.scss
  16. 87
      src/conponent/_grid.scss
  17. 9
      src/conponent/_jpserriffont.scss
  18. 55
      src/conponent/_logo.scss
  19. 4
      src/conponent/_modal.scss
  20. 141
      src/conponent/_navbar.scss
  21. 28
      src/conponent/_pagination.scss
  22. 5
      src/conponent/_scroll.scss
  23. 29
      src/conponent/_table.scss
  24. 21
      src/main.scss
  25. 21
      src/main_f.scss
  26. 21
      src/main_m.scss

6
.gitignore

@ -0,0 +1,6 @@
/bld/lolita_f.css.map
/bld/lolita_f.css
/bld/lolita_m.css.map
/bld/lolita_m.css
/bld/lolita.css.map
/bld/lolita.css

4
LICENSE.txt

@ -0,0 +1,4 @@
Freedom License v1 (2021年08月17日)
全く無限的自由です。
It's infinite freedom.

21
README.md

@ -0,0 +1,21 @@
# ロリタ・スタイル (Lolita Style)
クッソ小さいCSSライブラリッス!!♡<br />
Damn small CSS library! ♡
性別不明(紫のメイン):
```
sass src/main.scss bld/lolita.css
```
ショタの色(青のメイン):
```
sass src/main_m.scss bld/lolita_m.css
```
ロリの色(ピンクのメイン):
```
sass src/main_f.scss bld/lolita_f.css
```

0
bld/.placeholder

23
src/colour/_dansei.scss

@ -0,0 +1,23 @@
//
//// メイン
$suwa00: #9ed6ff;
$suwa01: #8bb6d6;
$suwa02: #6ec0fb;
$suwa03: #3daee9;
$suwa04: #1d99f3;
$suwa05: #0094ff;
$suwa06: #3498db;
$suwa07: #2980b9;
$suwa08: #205e7d;
$suwa09: #2c3e50;
$suwa10: #34495e;
$evil0: #6e93ad;
$evil1: #436a86;
$evil2: #2b6b8b;
$evil3: #2980b9;
$evil4: #22699c;
$evil5: #04547d;
$evil6: #1a3746;
@import "var";

23
src/colour/_fumei.scss

@ -0,0 +1,23 @@
//
//// メイン
$suwa00: #f1d0ff;
$suwa01: #e4b4f8;
$suwa02: #d898f3;
$suwa03: #cb81ea;
$suwa04: #b16cce;
$suwa05: #a05ebd;
$suwa06: #9b59b6;
$suwa07: #61237c;
$suwa08: #46195a;
$suwa09: #341242;
$suwa10: #220a2c;
$evil0: #916ead;
$evil1: #6b4386;
$evil2: #5d2b8b;
$evil3: #6c29b9;
$evil4: #57229c;
$evil5: #51047d;
$evil6: #2d1a46;
@import "var";

23
src/colour/_josei.scss

@ -0,0 +1,23 @@
//
//// メイン
$suwa00: #ffe6f9;
$suwa01: #e599e5;
$suwa02: #ea81e8;
$suwa03: #e93de9;
$suwa04: #f31de8;
$suwa05: #ea00ff;
$suwa06: #db34d3;
$suwa07: #b459b6;
$suwa08: #7d2069;
$suwa09: #502c50;
$suwa10: #5e345c;
$evil0: #ad6ea8;
$evil1: #864386;
$evil2: #832b8b;
$evil3: #b929ad;
$evil4: #9c2296;
$evil5: #7d0469;
$evil6: #421a46;
@import "var";

56
src/colour/_var.scss

@ -0,0 +1,56 @@
//
////
$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;
////
$yellow1: #c9ce3b;
$yellow2: #ffdd00;
$yellow3: #fdbc4b;
$yellow4: #f39c1f;
$yellow5: #f67400;
////
$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;

156
src/conponent/_app.scss

@ -0,0 +1,156 @@
#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;
}
*, *::before, *::after { box-sizing: border-box; }
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
font-family: 'jpserriffont';
text-align: center;
color: $white1;
background-color: $black1;
margin: 0;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
}
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; }
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid $black1;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 0.5rem;
font-weight: 500;
line-height: 1.2;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }
p { margin-top: 0; margin-bottom: 1rem; }
abbr[title], abbr[data-original-title] { text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; cursor: help; border-bottom: 0; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; }
address { margin-bottom: 1rem; font-style: normal; line-height: inherit; }
ol, ul, dl { margin-top: 0; margin-bottom: 1rem; }
ol ol, ul ul, ol ul, ul ol { margin-bottom: 0; }
dt { font-weight: 700; }
dd { margin-bottom: .5rem; margin-left: 0; }
blockquote { margin: 0 0 1rem; }
b, strong { font-weight: bolder; }
small { font-size: 80%; }
sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; }
sub { bottom: -.25em; }
sup { top: -.5em; }
a { color: $suwa04; text-decoration: none; background-color: transparent; }
a:hover { color: $suwa03; text-decoration: underline; }
a:not([href]) { color: inherit; text-decoration: none; }
a:not([href]):hover { color: inherit; text-decoration: none; }
pre, code, kbd, samp { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em; }
pre { margin-top: 0; margin-bottom: 1rem; overflow: auto; }
figure { margin: 0 0 1rem; }
img { vertical-align: middle; border-style: none; }
svg { overflow: hidden; vertical-align: middle; }
table { border-collapse: collapse; }
th { text-align: inherit; }
caption { padding-top: 0.75rem; padding-bottom: 0.75rem; color: $grey3; text-align: left; caption-side: bottom; }
label { display: inline-block; margin-bottom: 0.5rem; }
button { border-radius: 0; }
button:focus { outline: 1px dotted; outline: 5px auto -webkit-focus-ring-color; }
input, button, select, optgroup, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
button, input { overflow: visible; }
button, select { text-transform: none; }
[role="button"] { cursor: pointer; }
select { word-wrap: normal; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled) { cursor: pointer; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { padding: 0; border-style: none; }
input[type="radio"], input[type="checkbox"] { box-sizing: border-box; padding: 0; }
textarea { overflow: auto; resize: vertical; }
fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
legend { display: block; width: 100%; max-width: 100%; padding: 0; margin-bottom: .5rem; font-size: 1.5rem; line-height: inherit; color: inherit; white-space: normal; }
progress { vertical-align: baseline; }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
[type="search"] { outline-offset: -2px; -webkit-appearance: none; }
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; }
output { display: inline-block; }
summary { display: list-item; cursor: pointer; }
template { display: none; }
[hidden] { display: none !important; }
small, .small { font-size: 80%; font-weight: 400; }
mark, .mark { padding: 0.2em; background-color: $white2; }
.list-unstyled { padding-left: 0; list-style: none; }
.list-inline { padding-left: 0; list-style: none; }
.list-inline-item { display: inline-block; }
.list-inline-item:not(:last-child) { margin-right: 0.5rem; }
.initialism { font-size: 90%; text-transform: uppercase; }
.blockquote { margin-bottom: 1rem; font-size: 1.25rem; }
.blockquote-footer { display: block; font-size: 80%; color: $grey3; }
.blockquote-footer::before { content: "\2014\00A0"; }
.img-fluid { max-width: 100%; height: auto; }
.img-thumbnail { padding: 0.25rem; background-color: $white1; border: 1px solid $grey1; border-radius: 0.25rem; max-width: 100%; height: auto; }
.figure { display: inline-block; }
.figure-img { margin-bottom: 0.5rem; line-height: 1; }
.figure-caption { font-size: 90%; color: $grey3; }
code { font-size: 87.5%; color: $kawaii1; word-wrap: break-word; }
a > code { color: inherit; }
kbd { padding: 0.2rem 0.4rem; font-size: 87.5%; color: $white1; background-color: $black1; border-radius: 0.2rem; }
kbd kbd { padding: 0; font-size: 100%; font-weight: 700; }
pre { display: block; font-size: 87.5%; color: $black1; }
pre code { font-size: inherit; color: inherit; word-break: normal; }
.pre-scrollable { max-height: 340px; overflow-y: scroll; }
#video-wrapper { padding-top: 0px !important; }

3
src/conponent/_badge.scss

@ -0,0 +1,3 @@
.badge-danger { color: $white1; background-color: $ng5; }
.badge-light { color: $black1; background-color: $white1; }
.badge { padding: 2px; border-radius: 2px; font-size: 100%; }

190
src/conponent/_button.scss

@ -0,0 +1,190 @@
.btn, btn:hover {
margin: 0 2px;
border: 2px solid;
}
.btn {
display: inline-block;
font-weight: 400;
color: $black1;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
background-color: transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
border-left-color: $white1;
border-top-color: $white1;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn:hover {
color: $black1;
text-decoration: none;
border-left-color: $grey3;
border-top-color: $grey3;
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
.btn.disabled, .btn:disabled { opacity: 0.65; }
.btn:not(:disabled):not(.disabled) { cursor: pointer; }
a.btn.disabled, fieldset:disabled a.btn { pointer-events: none; }
.btn-lg, .btn-group-lg > .btn { padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0.3rem; }
.btn-sm, .btn-group-sm > .btn { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; border-radius: 0.2rem; }
.btn-block { display: block; width: 100%; }
.btn-block + .btn-block { margin-top: 0.5rem; }
input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="button"].btn-block { width: 100%; }
.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-fumei-check {
color: $white1;
background-color: $kawaii3;
border-color: transparent;
border-bottom-color: $kawaii2;
border-right-color: $kawaii2;
box-shadow: 0px 0px 7px 3px $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: $dan4;
border-color: transparent;
border-bottom-color: $dan3;
border-right-color: $dan3;
}
.btn-danshi-check {
color: $white1;
background-color: $dan4;
border-color: transparent;
border-bottom-color: $dan3;
border-right-color: $dan3;
box-shadow: 0px 0px 7px 3px $dan3;
}
.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-joshi-check {
color: $white1;
background-color: $jo4;
border-color: transparent;
border-bottom-color: $jo3;
border-right-color: $jo3;
box-shadow: 0px 0px 7px 3px $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, .alert-success {
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;
}
.btn-warning, .btn-warning.disabled, .btn-warning:disabled, .alert-warning {
background: radial-gradient(ellipse at top, $yellow3, transparent), radial-gradient(ellipse at bottom, $black1, transparent);
color: $white1;
border-bottom-color: $yellow1;
border-right-color: $yellow1;
}
.btn-warning:hover {
color: $white1;
background-color: $yellow5;
border-color: transparent;
border-bottom-color: $yellow3;
border-right-color: $yellow3;
}

4
src/conponent/_check.scss

@ -0,0 +1,4 @@
.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; }

5
src/conponent/_comments.scss

@ -0,0 +1,5 @@
.fn { font-size: 16px; font-style: normal; color: $ok1; }
.comment-meta a { color: $grey2; }
.commentlist p { margin: 0 0 10px; padding: 10px 0 40px 0; font-size: 20px; }
.commentnumber { float: left; margin-right: 5px; font-size: 16px; }
ul { list-style: none; }

40
src/conponent/_contents.scss

@ -0,0 +1,40 @@
.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, .barm {
text-align: center;
color: $white1;
padding: 5px;
font-size: 20px;
border-bottom: solid 2px $suwa03;
cursor: pointer;
transition: background 0.3s, color 0.3s;
}
.barm { background: linear-gradient(180deg, $black2 0, $black3 34%, $black1 100%); border-bottom: solid 2px $white1; font-size: 24px; cursor: default; font-weight: bolder; }
.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; }
.kero-section {
width: 100%;
font-size: 150%;
font-weight: bolder;
text-align: center;
padding: 4px;
margin: 8px 0;
background: linear-gradient(to bottom, $suwa03 0%, $evil4 34%, $suwa02 100%);
color: $white1;
border-bottom-color: $suwa00;
border-right-color: $suwa00;
border-width: 1px;
border-radius: 25px;
cursor: default;
}

168
src/conponent/_form.scss

@ -0,0 +1,168 @@
.form-control, .form-control:focus {
background-color: $black1; color: $white1;
}
.form-control {
border: 1px solid $suwa10;
display: block;
width: 100%;
height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
background-clip: padding-box;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control:focus {
border: 1px solid $suwa03;
outline: 0;
box-shadow: 0 0 0 0.2rem $suwa06;
}
.form-control:disabled, .form-control[readonly] {
background-color: $black1;
opacity: 1;
}
.form-check-input[disabled] ~ .form-check-label,
.form-check-input:disabled ~ .form-check-label {
color: $grey3;
}
@media (prefers-reduced-motion: reduce) {
.form-control {
transition: none;
}
}
.form-control:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 $grey5;
}
.form-control::-webkit-input-placeholder {
color: $grey3;
opacity: 1;
}
.form-control::-moz-placeholder {
color: $grey3;
opacity: 1;
}
.form-control::placeholder {
color: $grey3;
opacity: 1;
}
input[type="date"].form-control,
input[type="time"].form-control,
input[type="datetime-local"].form-control,
input[type="month"].form-control {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select.form-control[size], select.form-control[multiple] {
height: auto;
}
textarea.form-control {
height: auto;
}
.form-group {
margin-bottom: 1rem;
}
.form-check {
position: relative;
display: block;
padding-left: 1.25rem;
}
.form-check-input {
position: absolute;
margin-top: 0.3rem;
margin-left: -1.25rem;
}
.form-check-label {
margin-bottom: 0;
}
.input-group {
position: relative;
display: flex;
flex-wrap: wrap;
-ms-flex-align: stretch;
align-items: stretch;
width: 100%;
}
.input-group > .form-control,
.input-group > .custom-select {
position: relative;
flex: 1 1 auto;
width: 1%;
min-width: 0;
margin-bottom: 0;
}
.input-group > .form-control + .form-control,
.input-group > .form-control + .custom-select,
.input-group > .custom-select + .form-control,
.input-group > .custom-select + .custom-select {
margin-left: -1px;
}
.input-group > .form-control:focus,
.input-group > .custom-select:focus {
z-index: 3;
}
.input-group > .form-control:not(:last-child),
.input-group > .custom-select:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group > .form-control:not(:first-child),
.input-group > .custom-select:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.custom-select {
display: inline-block;
width: 100%;
height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem 1.75rem 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
vertical-align: middle;
background-color: $black1;
border: 1px solid $suwa10;
color: $white1;
border-radius: 0.25rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) { .custom-select { transition: none; } }
.custom-select[multiple], .custom-select[size]:not([size="1"]) {
height: auto;
padding-right: 0.75rem;
background-image: none;
}
.custom-select:disabled {
color: $grey3;
background-color: $white2;
}

87
src/conponent/_grid.scss

@ -0,0 +1,87 @@
.container, .container-fluid {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
@for $i from 1 through 12 {
.col, .col-auto, .col-sm, .col-sm-auto, .col-md, .col-md-auto, .col-lg, .col-lg-auto, .col-xl, .col-xl-auto, .col-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i} {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
}
.col { flex-basis: 0; flex-grow: 1; min-width: 0; max-width: 100%; }
.col-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
$perc: ('1': 8.333333%, '2': 16.666667%, '3': 25%, '4': 33.333333%, '5': 41.666667%, '6': 50%, '7': 58.333333%, '8': 66.666667%, '9': 75%, '10': 83.333333%, '11': 91.666667%, '12': 100%);
@each $k, $v in $perc {
.col-#{$k} {
flex: 0 0 $v;
max-width: $v;
}
}
@media (min-width: 576px) {
.col-sm { flex-basis: 0; flex-grow: 1; min-width: 0; max-width: 100%; }
.col-sm-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
@each $k, $v in $perc {
.col-sm-#{$k} {
flex: 0 0 $v;
max-width: $v;
}
}
}
@media (min-width: 768px) {
.col-md { flex-basis: 0; flex-grow: 1; min-width: 0; max-width: 100%; }
.col-md-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
@each $k, $v in $perc {
.col-md-#{$k} {
flex: 0 0 $v;
max-width: $v;
}
}
}
@media (min-width: 992px) {
.col-lg { flex-basis: 0; flex-grow: 1; min-width: 0; max-width: 100%; }
.col-lg-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
@each $k, $v in $perc {
.col-lg-#{$k} {
flex: 0 0 $v;
max-width: $v;
}
}
}
@media (min-width: 1200px) {
.col-xl { flex-basis: 0; flex-grow: 1; min-width: 0; max-width: 100%; }
.col-xl-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
@each $k, $v in $perc {
.col-xl-#{$k} {
flex: 0 0 $v;
max-width: $v;
}
}
}

9
src/conponent/_jpserriffont.scss

@ -0,0 +1,9 @@
@font-face {
font-family: "jpserriffont";
font-style: normal;
font-weight: 400;
src: url(/fonts/jpserriffont.woff?7c80edebf55afde76b91a29eb69e6e21);
font-display: swap;
}
body { font-family: jpserriffont; }

55
src/conponent/_logo.scss

@ -0,0 +1,55 @@
.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-play { transition: background 0.3s, color 0.3s; background-color: transparent; border-radius: 25%; padding: 2px; }
.logo-play:hover { background-color: $ng4; }
.logo-br { padding: 8px; }
/// 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: -4px -4px 0 $suwa04, -4px -3px 0 $suwa04, -4px -2px 0 $suwa04, -4px -1px 0 $suwa04, -4px 0px 0 $suwa04, -4px 1px 0 $suwa04, -4px 2px 0 $suwa04, -4px 3px 0 $suwa04, -4px 4px 0 $suwa04, -3px -4px 0 $suwa04, -3px -3px 0 $suwa04, -3px -2px 0 $suwa04, -3px -1px 0 $suwa04, -3px 0px 0 $suwa04, -3px 1px 0 $suwa04, -3px 2px 0 $suwa04, -3px 3px 0 $suwa04, -3px 4px 0 $suwa04, -2px -4px 0 $suwa04, -2px -3px 0 $suwa04, -2px -2px 0 $suwa04, -2px -1px 0 $suwa04, -2px 0px 0 $suwa04, -2px 1px 0 $suwa04, -2px 2px 0 $suwa04, -2px 3px 0 $suwa04, -2px 4px 0 $suwa04, -1px -4px 0 $suwa04, -1px -3px 0 $suwa04, -1px -2px 0 $suwa04, -1px -1px 0 $suwa04, -1px 0px 0 $suwa04, -1px 1px 0 $suwa04, -1px 2px 0 $suwa04, -1px 3px 0 $suwa04, -1px 4px 0 $suwa04, 0px -4px 0 $suwa04, 0px -3px 0 $suwa04, 0px -2px 0 $suwa04, 0px -1px 0 $suwa04, 0px 0px 0 $suwa04, 0px 1px 0 $suwa04, 0px 2px 0 $suwa04, 0px 3px 0 $suwa04, 0px 4px 0 $suwa04, 1px -4px 0 $suwa04, 1px -3px 0 $suwa04, 1px -2px 0 $suwa04, 1px -1px 0 $suwa04, 1px 0px 0 $suwa04, 1px 1px 0 $suwa04, 1px 2px 0 $suwa04, 1px 3px 0 $suwa04, 1px 4px 0 $suwa04, 2px -4px 0 $suwa04, 2px -3px 0 $suwa04, 2px -2px 0 $suwa04, 2px -1px 0 $suwa04, 2px 0px 0 $suwa04, 2px 1px 0 $suwa04, 2px 2px 0 $suwa04, 2px 3px 0 $suwa04, 2px 4px 0 $suwa04, 3px -4px 0 $suwa04, 3px -3px 0 $suwa04, 3px -2px 0 $suwa04, 3px -1px 0 $suwa04, 3px 0px 0 $suwa04, 3px 1px 0 $suwa04, 3px 2px 0 $suwa04, 3px 3px 0 $suwa04, 3px 4px 0 $suwa04, 4px -4px 0 $suwa04, 4px -3px 0 $suwa04, 4px -2px 0 $suwa04, 4px -1px 0 $suwa04, 4px 0px 0 $suwa04, 4px 1px 0 $suwa04, 4px 2px 0 $suwa04, 4px 3px 0 $suwa04, 4px 4px 0 $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; }
}

4
src/conponent/_modal.scss

@ -0,0 +1,4 @@
.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; }

141
src/conponent/_navbar.scss

@ -0,0 +1,141 @@
.nav {
// display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.navbar {
padding: 0px;
background: radial-gradient(farthest-corner at 50% 85%, $suwa06 0%, $black1 100%);
border: 2px solid $suwa03;
box-shadow: 0 0 7px 3px $suwa04;
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.navbar-toggler {
border: 0px solid transparent;
padding: 0.25rem 0.75rem;
font-size: 1.25rem;
line-height: 1;
background-color: transparent;
border-radius: 0.25rem;
}
.navbar-toggler:hover, .navbar-toggler:focus { text-decoration: none; }
.navbar-brand {
display: inline-block;
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
margin-right: 1rem;
font-size: 1.25rem;
line-height: inherit;
white-space: nowrap;
padding: 5px;
}
.navbar-brand, .nav-item {
transition: background 0.3s;
border-radius: 2px;
cursor: pointer;
}
.navbar-brand:hover, .nav-item:hover {
background-color: $suwa07;
text-decoration: none;
}
.sidemenu { border: 2px solid $suwa03; box-shadow: 0 0 7px 3px $suwa04; }
.nav-pills .nav-link { border-radius: 0px; }
.dropdown { position: relative; }
.mr-auto { margin-right: auto !important; }
.ml-auto { margin-left: auto !important; }
.fixed-top, .fixed-bottom { position: fixed; right: 0; left: 0; z-index: 1030; }
.fixed-top { top: 0; }
.fixed-bottom { bottom: 0; }
.nav-link { display: block; padding: 0.5rem 1rem; }
.nav-link:hover, .nav-link:focus { text-decoration: none; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: $white1; background-color: $suwa03; }
.navbar .container, .navbar .container-fluid {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.navbar-nav {
display: flex;
color: $white1;
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-collapse {
flex-basis: 100%;
flex-grow: 1;
align-items: center;
}
.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: 767.98px) {
.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;
}
}
@media (min-width: 768px) {
.navbar-expand {
flex-flow: row nowrap;
justify-content: flex-start;
}
.navbar-expand .navbar-nav {
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 {
flex-wrap: nowrap;
}
.navbar-expand .navbar-collapse {
display: flex !important;
flex-basis: auto;
}
.navbar-expand .navbar-toggler {
display: none;
}
}

28
src/conponent/_pagination.scss

@ -0,0 +1,28 @@
.page-link {
background: linear-gradient(to bottom, $evil4 0%, $evil1 34%, $evil6 100%);
}
.page-link, .page-item .disabled {
text-align: center;
color: $white1;
padding: 8px 20px;
font-size: 28px;
border-bottom: solid 2px $suwa03;
cursor: pointer;
transition: background 0.3s, color 0.3s;
margin: auto;
}
.page-link > a { color: $white1; }
.page-link > a:hover { text-decoration: none; }
.page-link:hover {
color: $white1;
background: linear-gradient(to bottom, $evil3 0%, $evil0 34%, $evil2 100%);
}
.page-item.disabled > .page-link { color: $white1; background: linear-gradient(to bottom, $black3 0%, $grey4 34%, $grey5 100%); border-color: $suwa04; }
.page-item.active > .page-link { color: $white1; background: linear-gradient(to bottom, $suwa04 0%, $suwa04 34%, $suwa06 100%); border-color: $suwa04; }
.page-item.active > .page-link:hover { color: $white1; background: linear-gradient(to bottom, $suwa03 0%, $suwa00 34%, $suwa02 100%); }
.pagination { display: flex; margin: auto; padding: 8px; }

5
src/conponent/_scroll.scss

@ -0,0 +1,5 @@
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: $suwa03; transition: background 0.3s; }
::-webkit-scrollbar-thumb:hover { background: $suwa01; }
::-webkit-scrollbar-thumb:active { background: $suwa08; }
::-webkit-scrollbar-track { background-color: $white1; background: $black1; }

29
src/conponent/_table.scss

@ -0,0 +1,29 @@
.table {
width: 100%;
margin-bottom: 1rem;
color: $white1;
background-color: $black3;
border: 2px solid $suwa03;
transition: background-color 0.3s;
}
.table tbody + tbody { border-top: 2px solid $white1; }
.table th, .table td, .table thead th { padding: 0.75rem; border-color: $suwa03; }
.table th, .table td { border-top: 1px solid $white1; vertical-align: top; }
.table thead th { border-bottom: 2px solid $white1; vertical-align: bottom; }
.table tbody tr { transition: background-color 0.3s; background-color: $black3; }
.table tbody tr:hover { color: $white1; background-color: $suwa07; }
// .table.table-hover tbody tr {
// transition: background-color 0.3s;
// background-color: $black3;
// }
// .table.table-hover tbody tr:hover {
// color: $white1;
// background-color: $suwa07;
// }
.tres {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

21
src/main.scss

@ -0,0 +1,21 @@
/*!
* Lolita Style v0.1 (https://git.076.ne.jp/TechnicalSuwako/lolita-style)
* Made By テクニカル諏訪子 (TechnicalSuwako)
* Licensed under Freedom License (https://git.076.ne.jp/TechnicalSuwako/lolita-style/src/branch/master/LICENSE.txt)
*/
@import "colour/fumei";
@import "conponent/app";
@import "conponent/badge";
@import "conponent/button";
@import "conponent/check";
@import "conponent/comments";
@import "conponent/contents";
@import "conponent/form";
@import "conponent/grid";
@import "conponent/logo";
@import "conponent/modal";
@import "conponent/navbar";
@import "conponent/pagination";
@import "conponent/scroll";
@import "conponent/table";

21
src/main_f.scss

@ -0,0 +1,21 @@
/*!
* Lolita Style v0.1 (https://git.076.ne.jp/TechnicalSuwako/lolita-style)
* Made By テクニカル諏訪子 (TechnicalSuwako)
* Licensed under Freedom License (https://git.076.ne.jp/TechnicalSuwako/lolita-style/src/branch/master/LICENSE.txt)
*/
@import "colour/josei";
@import "conponent/app";
@import "conponent/badge";
@import "conponent/button";
@import "conponent/check";
@import "conponent/comments";
@import "conponent/contents";
@import "conponent/form";
@import "conponent/grid";
@import "conponent/logo";
@import "conponent/modal";
@import "conponent/navbar";
@import "conponent/pagination";
@import "conponent/scroll";
@import "conponent/table";

21
src/main_m.scss

@ -0,0 +1,21 @@
/*!
* Lolita Style v0.1 (https://git.076.ne.jp/TechnicalSuwako/lolita-style)
* Made By テクニカル諏訪子 (TechnicalSuwako)
* Licensed under Freedom License (https://git.076.ne.jp/TechnicalSuwako/lolita-style/src/branch/master/LICENSE.txt)
*/
@import "colour/dansei";
@import "conponent/app";
@import "conponent/badge";
@import "conponent/button";
@import "conponent/check";
@import "conponent/comments";
@import "conponent/contents";
@import "conponent/form";
@import "conponent/grid";
@import "conponent/logo";
@import "conponent/modal";
@import "conponent/navbar";
@import "conponent/pagination";
@import "conponent/scroll";
@import "conponent/table";
Loading…
Cancel
Save