diff --git a/views/css/style.css.map b/views/css/style.css.map deleted file mode 100644 index 147d26b..0000000 --- a/views/css/style.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAgBA;EACE;;;AAGF;EACE;EACA;EAEA,kBAxBG;EAyBH,OAvBG;EAyBH;EACA,aAhBY;EAkBZ;EACA;EACA;;;AAGF;EACE,OAhCK;EAiCL;;;AAGF;AACA;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBApDG;EAqDH;;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;EAGE;EACA,eAjGc;EAkGd;EACA;;;AAGF;AAAA;EAEE;EACA,kBA9Ga;EA+Gb,OA7Ga;;;AAgHf;AAAA;EAEE,kBApHa;;;AAuHf;EACE;EACA;;;AAGF;EACE;EACA,eAzHc;EA0Hd;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQE,eA9Ic;EA+Id;EACA;EACA;EACA,aAjJY;EAkJZ;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE,aArJY;;;AAwJd;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME,kBArLK;EAsLL;EACA,OAzLG;;;AA4LL;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA,kBAnNW;EAoNX;;;AAIJ;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA,OAzOH;;AA8OC;EACE;EACA;;AAKF;EACE;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;;AAGF;EACE,kBA1QD;EA2QC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EAEA;EACA;;AAEA;EACE;EACA;EACA;EACA,OAhSL;EAiSK;EACA;EACA;;AAEA;EACE,kBAvSG;;AA0SL;EACE;EACA;EACA;EACA;;;AAoBZ;EAEI;IACE;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EAIA;EACA;;;AAGF;EACE;EACA;EACA;;;AAKA;AAAA;EACE;EACA,OAhXC;;AAoXD;AAAA;EACE,OAzWgB;EA0WhB,QA1WgB;;AA6WlB;AAAA;EACE,WA9WgB;;AAiXlB;AAAA;EACE,WAlXgB;;AAmXhB;AAAA;EACE,WArXc;;AA2XlB;AAAA;EACE,OA5XgB;EA6XhB,QA7XgB;;AAgYlB;AAAA;EACE,WAjYgB;;AAoYlB;AAAA;EACE,WArYgB;;AAuYhB;AAAA;EACE,WAxYc;;AA6YpB;AAAA;EACE;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBAxbI;EAybJ,OA5bH;;AA+bC;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OAvcH;EAwcG;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;;AAKN;AAAA;EACE;EACA;EACA,eApdU;;AAudZ;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;EACA;EACA;;;AAOV;EACE,kBA1gBa;EA2gBb,eAtgBc;EAugBd;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAEA;EACE;;AAEF;EACE;;AACA;EACE,OA/iBK;;AAqjBb;EACE;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE,OA3kBI;;AA8kBN;EACE,OAhlBD;EAilBC;EACA;;AAKN;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA,OA5nBD;;AA8nBC;EACE;EACA;EACA;EACA;EACA;;;AAMR;EACE;EAOA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;;;AAKN;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA,kBA5tBa;EA6tBb;;AAEA;EACE;EACA,OAhuBC;EAiuBD,kBAluBW;EAmuBX;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE;;EAGF;AAAA;IAEE;;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EAEA;EACA;;AAIA;EACE;;;AAKN;EACE,kBA7wBa;EA8wBb;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA","file":"style.css"} \ No newline at end of file diff --git a/views/css/style.scss b/views/css/style.scss deleted file mode 100644 index 79c0fb8..0000000 --- a/views/css/style.scss +++ /dev/null @@ -1,807 +0,0 @@ -$bg: #131516; -$bg-secondary: #222; -$fg: #fff; -$fg-secondary: #aaa; -$link: #118bee; -$highlight: #fc365b; -$border-radius: 5px; -$line-height: 1.5; -$active-brightness: 0.85; -$hover-brightness: 1.2; -$box-shadow: 2px 2px 10px; -$color-shadow: #bbbbbb20; -$font-family: "Roboto", "Open Sans", "Noto Sans", sans-serif, "Noto Sans CJK JP"; -$small-artwork-width: 184px; -$large-artwork-width: 288px; - -html { - font-size: 62.5%; -} - -body { - top: 0; - margin: 0; - - background-color: $bg; - color: $fg; - - font-size: 1.8rem; - font-family: $font-family; - - margin-bottom: 10px; - margin-left: 5px; - margin-right: 5px; -} - -a { - color: $link; - text-decoration: none; -} - -/* Scrollbars */ -* { - scrollbar-width: thin; - // invalid line - // scrollbar-color: $link auto; -} - -*::-webkit-scrollbar { - width: 5px; - height: 5px; -} - -*::-webkit-scrollbar-track { - background: transparent; -} - -*::-webkit-scrollbar-thumb { - background-color: $link; - border-radius: 10px; -} - -.special-symbol { - display: inline-flex; - align-items: center; - justify-content: center; - width: 1.8rem; - height: 1.8rem; - font-size: 1.8rem; -} - -[hidden] { - display: none; -} - -input, -label, -select, -textarea { - display: block; - font-size: inherit; - max-width: 600px; -} - -input[type="checkbox"], -input[type="radio"] { - display: inline-block; -} - -input[type="checkbox"] + label, -input[type="radio"] + label { - display: inline-block; - font-weight: normal; - position: relative; - top: 1px; -} - -input[type="range"] { - padding: 0.4rem 0; -} - -input, -select, -textarea { - border: 1px solid $bg-secondary; - border-radius: $border-radius; - margin-bottom: 1rem; - padding: 0.4rem 0.8rem; -} - -input[type="text"], -textarea { - width: calc(100% - 1.6rem); - background-color: $bg-secondary; - color: $fg-secondary; -} - -input[readonly], -textarea[readonly] { - background-color: $bg-secondary; -} - -label { - font-weight: bold; - margin-bottom: 0.2rem; -} - -.form-field { - border: 1px solid $bg-secondary; - border-radius: $border-radius; - box-shadow: $box-shadow $color-shadow; - display: block; - max-width: 800px; - min-width: 460px; - padding: 1.5rem; - - header { - margin: 1.5rem 0; - padding: 1.5rem 0; - } -} - -a b, -a em, -a i, -a strong, -button, -input[type="submit"], -.switch-button, -.pagination-button { - border-radius: $border-radius; - display: inline-block; - font-size: medium; - font-weight: bold; - line-height: $line-height; - margin: 0.5rem 0; - padding: 0.5rem 1rem; -} - -button, -input[type="submit"], -.switch-button, -.pagination-button { - font-family: $font-family; -} - -button:active, -input[type="submit"]:active, -.switch-button:active, -.pagination-button:active { - filter: brightness($active-brightness); -} - -button:hover, -input[type="submit"]:hover, -.switch-button:hover, -.pagination-button:hover { - cursor: pointer; - filter: brightness($hover-brightness); -} - -a b, -a strong, -button, -input[type="submit"], -.switch-button, -.pagination-button { - background-color: $link; - border: 2px solid $link; - color: $fg; -} - -input[type="submit"][hidden] { - display: none; -} - -.switch-seperator { - display: inline-block; - margin-left: 10px; -} - -.pagination { - text-align: center; - - .pagination-button { - margin-right: 5px; - } - - #highlight { - filter: brightness($hover-brightness); - } - - #disabled { - pointer-events: none; - background-color: $bg-secondary; - filter: brightness(1); - } -} - -nav { - margin-top: 15px; - margin-bottom: 15px; - margin-left: 20px; - margin-right: 20px; - .navigation-wrapper { - display: flex; - justify-content: space-between; - align-items: center; - width: auto; - - .navbar-brand { - display: inline-flex; - gap: 10px; - - span { - font-weight: bold; - font-size: 1.3em; - color: $fg; - } - } - - .navbar-entry { - img { - width: 30px; - height: 30px; - } - } - - .search-form { - input { - margin: 0; - } - } - - .sidebar-toggler { - display: none; - - &:checked ~ .sidebar { - transform: translateX(0); - } - } - - .sidebar-label { - margin-right: 9px; - cursor: pointer; - } - - .sidebar { - background-color: $bg; - position: absolute; - padding-top: 6px; - left: 0; - width: 220px; - transform: translateX(-220px); - transition: transform 250ms cubic-bezier(0.23, 1, 0.32, 1); - z-index: 999; - - br { - align-self: stretch; - margin-top: 10px; - } - - .sidebar-list { - list-style-type: none; - - margin: 0; - padding: 0; - - .sidebar-item { - display: flex; - align-items: center; - list-style: none; - color: $fg; - font-size: 0.9em; - text-decoration: none; - padding: 10px; - - &:hover { - background-color: $bg-secondary; - } - - img { - width: 30px; - height: 30px; - margin-left: 1.2rem; - margin-right: 10px; - } - } - } - } - } - - // .navbar-shadow { - // width: 100%; - // height: 10px; - // background: repeating-linear-gradient( - // 52.5deg, - // rgba(32, 32, 32, 0.7), - // rgba(32, 32, 32, 0.7) 14px, - // rgba(240, 248, 255, 0) 14px, - // rgba(240, 248, 255, 0) 28px - // ); - // } -} - -@media screen and (max-width: 600px) { - nav { - .search-form { - display: none; - } - } -} - -.component-header { - display: flex; - justify-content: space-between; - align-items: center; - - h2 { - margin: 0; - display: inline-block; - } -} - -.container { - max-width: 1200px; - margin-left: auto; - margin-right: auto; - padding-left: 10px; - padding-right: 10px; -} - -.artwork-container { - display: grid; - grid-template-columns: repeat( - auto-fit, - minmax(calc($small-artwork-width + 15px), 1fr) - ); - align-items: center; - justify-items: center; -} - -.artwork-container-scroll { - display: flex; - overflow: hidden; - overflow-x: scroll; -} - -.artwork-container, -.artwork-container-scroll { - a { - text-decoration: none; - color: $fg; - } - - .artwork-large { - img { - width: $large-artwork-width; - height: $large-artwork-width; - } - - .artwork-title { - max-width: $large-artwork-width; - } - - .artwork-author { - max-width: $large-artwork-width; - a { - max-width: $small-artwork-width; - } - } - } - - .artwork-small { - img { - width: $small-artwork-width; - height: $small-artwork-width; - } - - .artwork-title { - max-width: $small-artwork-width; - } - - .artwork-author { - max-width: $small-artwork-width; - - a { - max-width: $small-artwork-width; - } - } - } - - .artwork { - padding: 5px; - width: fit-content; - position: relative; - - .artwork-additional { - position: absolute; - top: 4px; - left: 4px; - right: 4px; - box-sizing: border-box; - display: flex; - align-items: flex-start; - justify-content: space-between; - padding: 4px 4px 0px; - pointer-events: none; - - .artwork-position { - display: flex; - align-items: center; - justify-content: center; - border-radius: 50%; - font-weight: bold; - width: 40px; - height: 40px; - font-size: 16px; - background-color: rgba(0, 0, 0, 0.32); - } - .artwork-profanity-label { - display: flex; - align-items: center; - justify-content: center; - font-size: 10px; - border-radius: 20px; - padding: 0.4rem; - background-color: $highlight; - color: $fg; - } - - .artwork-page-count { - display: flex; - justify-content: center; - align-items: center; - flex: 0 0 auto; - box-sizing: border-box; - height: 20px; - min-width: 20px; - color: $fg; - font-weight: bold; - padding: 0px 6px; - background: rgba(0, 0, 0, 0.32); - border-radius: 10px; - font-size: 10px; - line-height: 10px; - - .boxbox { - font-size: 9px; - } - } - } - - img { - object-fit: cover; - object-position: center center; - border-radius: $border-radius; - } - - .artwork-title { - display: flex; - align-items: center; - - a { - font-size: 14px; - display: inline; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - line-height: 22px; - font-weight: bold; - } - } - - .artwork-author { - display: flex; - align-items: center; - - a { - display: flex; - align-items: center; - - img { - aspect-ratio: 1/1; - width: 24px; - height: 24px; - object-fit: cover; - object-position: center top; - border-radius: 50%; - margin-right: 5px; - } - - span { - font-size: 14px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - line-height: 22px; - } - } - } - } -} - -.illust { - background-color: $bg-secondary; - border-radius: $border-radius; - padding: 5px 15px; - - .illust-images { - display: flex; - align-items: center; - flex-direction: column; - width: 100%; - - img { - margin-top: 15px; - max-height: 1000px; - width: auto; - max-width: 100%; - } - } - - .illust-attr { - display: flex; - align-items: center; - margin-top: 10px; - margin-bottom: 10px; - - .illust-avatar { - width: 62px; - height: 62px; - border-radius: 50px; - } - - .attr-wrap { - margin-left: 5px; - - .illust-title { - font-weight: bold; - } - .illust-author { - font-size: 0.8em; - a { - color: $fg-secondary; - } - } - } - } - - .illust-description { - font-size: 0.85em; - } - - .illust-tags { - font-size: 0.9em; - - .illust-tag-attr { - display: inline-flex; - align-items: center; - margin-right: 15px; - - img { - aspect-ratio: 1/1; - width: 18px; - height: 18px; - margin-right: 5px; - } - } - - .illust-tag { - margin-right: 10px; - - #highlight { - color: $highlight; - } - - .illust-tag-name { - color: $link; - font-weight: bold; - margin-right: 5px; - } - } - } - - .comment { - display: flex; - margin-bottom: 10px; - - p { - margin: 0; - font-size: 0.8em; - } - - .comment-avatar { - width: 40px; - height: 40px; - border-radius: 50%; - margin-right: 10px; - } - - .stamp { - width: 96px; - height: 96px; - border-radius: 4px; - } - - .emoji { - width: 24px; - height: 24px; - margin-left: 3px; - margin-right: 3px; - } - } - - .illust-other-works { - & > a { - display: inline-flex; - align-items: center; - text-decoration: none; - color: $fg; - - & > img { - aspect-ratio: 1/1; - width: 50px; - height: 50px; - border-radius: 50%; - margin-right: 5px; - } - } - } -} - -.background-cover { - background: repeating-linear-gradient( - 52.5deg, - rgba(32, 32, 32, 0.8), - rgba(32, 32, 32, 0.8) 14px, - rgba(240, 248, 255, 0) 14px, - rgba(240, 248, 255, 0) 28px - ); - height: 10vw; - min-height: 100px; - overflow: hidden; - padding-top: 10px; - padding-bottom: 10px; - - img { - width: 100%; - height: 100%; - object-fit: cover; - } -} - -#hasbg { - height: 40vw; - min-height: 100px; - max-height: 60vh; -} - -.user { - transform: translateY(-8rem); - - .user-avatar { - margin: auto; - aspect-ratio: 1/1; - width: 170px; - height: 170px; - border-radius: 50%; - } - - .user-social { - text-align: center; - - img { - aspect-ratio: 1/1; - width: 36px; - height: 36px; - } - } - - .user-details { - text-align: center; - - h2 { - margin: 0; - } - } -} - -#calendar { - width: 100%; - height: auto; -} - -.calendar-weeks, -.calendar-board { - max-width: 1000px; - margin: 0 auto; - display: flex; - flex-wrap: wrap; - gap: 5px; -} - -.calendar-weeks div { - width: 128px; - text-align: center; -} - -.calendar-node { - width: 128px; - height: 128px; - border-radius: 8px; - background-size: cover; - background-position: center; - background-color: $bg-secondary; - position: relative; - - span { - font-size: small; - color: $fg; - background-color: $bg-secondary; - position: absolute; - top: 0.3rem; - left: 0.3rem; - padding: 0.05rem 0.3rem; - display: flex; - align-items: center; - justify-content: center; - } -} - -@media screen and (max-width: 950px) { - .calendar-board { - justify-content: center; - } - - .calendar-weeks, - .calendar-node-empty { - display: none; - } -} - -.tag-header { - display: flex; - - .tag-thumbnail { - width: 120px; - height: 120px; - border-radius: 5px; - margin-right: 20px; - - object-fit: cover; - object-position: center center; - } - - .tag-details { - .main-tag { - font-size: 1.6rem; - } - } -} - -.tag-container { - background-color: $bg-secondary; - display: inline-flex; - align-items: center; - justify-content: center; - padding-left: 20px; - padding-right: 20px; - margin-right: 10px; - - width: max-content; - height: 40px; - margin-bottom: 4px; - text-align: center; - font-weight: bold; - font-size: 1rem; - border-radius: 4px; - - .main { - font-size: 1.6em; - } - .sub { - font-size: 1.2em; - font-weight: normal; - } -}