devsam/vite_front
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

scss

Browse Source
This commit is contained in:
Hide_D
2022-07-09 18:54:20 +09:00
parent e0569525a2
commit 534be03539
29 changed files with 3918 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hwe/scss/.htaccess
+1
View File
@@ -0,0 +1 @@
Deny from all
hwe/scss/auction.scss
View File
hwe/scss/battleCenter.scss
+33
View File
@@ -0,0 +1,33 @@
@import "./common/bootstrap5.scss";
@import "./common_legacy.scss";
@include media-1000px{
#container {
width: 1000px;
margin: 0 auto;
> .row > .col, .layout-block{
border-left: solid 1px gray;
border-right: solid 1px gray;
border-top: solid 1px gray;
}
}
}
@include media-500px{
body {
overflow-x: hidden;
}
#container {
width: 500px;
margin: 0 auto;
margin-bottom: 100px;
}
}
.header-cell {
color: orange;
font-size:1.3em;
text-align: center;
border: 1px gray solid;
}
hwe/scss/board.scss
+76
View File
@@ -0,0 +1,76 @@
@import "./common/bootstrap5.scss";
@import "@scss/game_bg.scss";
@import "./common_legacy.scss";
@import "../../css/config.css";
@import "./util.scss";
@include media-1000px {
#container {
width: 1000px;
margin: 0 auto;
}
}
@include media-500px {
#container {
width: 500px;
margin: 0 auto;
}
}
.date{
font-size: 0.9em;
}
.authorName,
.authorIcon,
.inputCommentHeader {
flex: 0 0 auto;
width: 120px;
}
#newArticle {
margin-top: 1em;
}
.titleInput {
width: 100%;
color: white;
background-color: transparent;
border: none;
margin: 1px 5px;
}
.contentInput {
width: 100%;
min-height: 3em;
color: white;
background-color: transparent;
border: none;
padding: 1px 5px;
}
.articleFrame {
margin: 20px auto;
}
.commentText {
width: 100%;
}
.text {
text-align: left;
padding: 1px 5px;
}
.submitComment {
width: 100%;
}
.commentText {
color: white;
background-color: transparent;
border: none;
padding: 1px 5px;
}
hwe/scss/chiefCenter.scss
+203
View File
@@ -0,0 +1,203 @@
@use "sass:math";
@use "sass:color";
@import "@scss/common/break_500px.scss";
@import "@scss/common/variables.scss";
@import "@scss/common/bootswatch_custom_variables.scss";
@import "@scss/game_bg.scss";
@import "@scss/util.scss";
$modcolor2: color.adjust($nbase2color, $lightness: -5%);
.turn_pad {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background-color: $nbase2color;
}
#mainTable {
.subRows {
display: grid;
grid-template-columns: 1fr;
line-height: 1.05em;
}
.chiefCommand {
.time_pad {
align-self: center;
text-align: center;
background-color: black;
line-height: 30px;
}
.time_pad.inverted{
background-color: gray;
color: white;
}
.turn_pad {
line-height: 30px;
}
.row:nth-of-type(odd) .turn_pad {
background-color: $modcolor2;
}
}
}
.commandBox {
position: relative;
}
@include media-1000px {
#container {
width: 1000px;
margin: 0 auto;
position: relative;
}
#mainTable {
display: grid;
grid-template-columns: 24px repeat(4, 1fr) 24px;
.commandPad {
margin-left: 0;
}
.subRows {
display: grid;
grid-template-columns: 1fr;
}
.turnIdx {
text-align: center;
}
.time_pad {
height: 30px;
}
}
#bottomChiefBox {
display: none;
}
.only500px {
display: none !important;
}
.commandBox .controlPad {
.turn_pad:nth-of-type(even) {
background-color: $modcolor2;
}
}
#bottomBar{
width: 1000px;
margin: 0 auto;
position: relative;
}
}
@include media-500px {
.only1000px {
display: none !important;
}
.targetIsNotMe {
display: none;
}
#container {
position: relative;
width: 500px;
height: 460px;
margin: auto;
}
#mainTable {
display: block;
height: 420px;
}
#mainTable.targetIsNotMe {
display: grid;
grid-template-columns: 24px 260px 24px;
margin-top: 10px;
margin-left: calc((500px - 24px - 260px - 24px) / 2);
.commandBox {
display: none;
}
}
.commandBox .controlPad {
margin-top: 10px;
.turn_pad:nth-of-type(even) {
background-color: $modcolor2;
}
}
#bottomChiefBox {
position: relative;
left: calc(50% - 250px);
width: 500px;
height: 320px;
overflow: hidden;
.turn_pad:nth-of-type(even) {
background-color: $modcolor2;
}
}
#bottomChiefList {
bottom: 0;
left: 0;
width: 1000px;
font-size: 20px;
transform-origin: left top;
transform: scale(0.5);
display: grid;
grid-template-columns: 24px repeat(4, 1fr) 24px;
.subRows {
display: grid;
grid-template-columns: 1fr;
line-height: 1.05em;
}
.subRows:not(:first-child) {
border-left: solid 1px white;
}
.tableCell {
overflow: hidden;
white-space: nowrap;
text-align: center;
}
.nameHeader {
text-align: center;
font-size: 28px;
line-height: 36px;
overflow: hidden;
white-space: nowrap;
}
.turnIdx {
font-size: 20px;
text-align: center;
}
}
#bottomBar {
width: 500px;
margin: 0 auto;
position: relative;
}
}
hwe/scss/common/bootstrap5.scss
Vendored
+16
View File
@@ -0,0 +1,16 @@
@import "./pretendard.scss";
$body-bg: #000;
$input-bg: #ddd;
$input-color: #303030;
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css");
@import "./break_500px.scss";
@import "./variables.scss";
@import "./bootswatch_custom_variables.scss";
@import "bootstrap/scss/bootstrap.scss";
@import "./bootswatch_custom.scss";
@import "./bootstrap_sammo.scss";
@import "./vue-multiselect.scss";
hwe/scss/common/bootstrap_sammo.scss
Vendored
+72
View File
@@ -0,0 +1,72 @@
@function frontColor($color) {
@return color-contrast($color);
}
@each $colorType,
$color in $nationColors {
.sam-color-#{$colorType} {
.sam-nation-own-bgcolor {
background-color: $color;
color: frontColor($color);
}
.btn-sammo-nation {
@include button-variant($color, $color);
&:hover,
&:active,
&:focus {
background-color: $color;
}
&,
&:not(.disabled):hover,
&:not(.disabled):active,
&:focus {
border-color: shade-color($color, 10%);
}
}
}
.sam-nation-bg-#{$colorType} {
background-color: $color;
color: frontColor($color);
}
.btn-sammo-nation-#{$colorType} {
@include button-variant($color, $color);
&:hover,
&:active,
&:focus {
background-color: $color;
}
&,
&:not(.disabled):hover,
&:not(.disabled):active,
&:focus {
border-color: shade-color($color, 10%);
}
}
}
@each $colorType,
$color in $sammoColors {
.btn-sammo-#{$colorType} {
@include button-variant($color, $color);
&:hover,
&:active,
&:focus {
background-color: $color;
}
&,
&:not(.disabled):hover,
&:not(.disabled):active,
&:focus {
border-color: shade-color($color, 10%);
}
}
}
hwe/scss/common/bootswatch_custom.scss
+324
View File
@@ -0,0 +1,324 @@
// Lumen 5.1.3
// Bootswatch
// Variables
// Mixins
@mixin shadow($width: 4px){
border-style: solid;
border-width: 0 1px $width 1px;
}
// Navbar
.navbar {
@include shadow();
@each $color, $value in $theme-colors {
&.bg-#{$color} {
border-color: shade-color($value, 10%);
}
}
}
// Buttons
.btn {
@include shadow();
text-transform: uppercase;
&:not(.disabled):hover {
margin-top: 1px;
border-bottom-width: 3px;
}
&:not(.disabled):active {
margin-top: 2px;
border-bottom-width: 2px;
@include box-shadow(none);
}
@each $color, $value in $theme-colors {
&-#{$color} {
&:hover,
&:active,
&:focus {
background-color: $value;
}
&,
&:not(.disabled):hover,
&:not(.disabled):active,
&:focus {
border-color: shade-color($value, 10%);
}
}
}
}
[class*="btn-outline"] {
border-top-width: 1px;
}
.btn-group-vertical {
.btn + .btn {
&:hover {
margin-top: -1px;
border-top-width: 1px;
}
&:active {
margin-top: -1px;
border-top-width: 2px;
}
}
}
// Typography
.text-secondary {
color: $gray-700 !important;
}
.blockquote-footer {
color: $gray-600;
}
// Forms
.form-control {
box-shadow: inset 0 2px 0 rgba(0, 0, 0, .075);
}
// Navs
.nav {
.open > a,
.open > a:hover,
.open > a:focus {
border-color: transparent;
}
}
.nav-tabs {
.nav-link {
color: $body-color;
&,
&.disabled,
&.disabled:hover,
&.disabled:focus {
margin-top: 6px;
border-color: $nav-tabs-border-color;
transition: padding-bottom .2s ease-in-out, margin-top .2s ease-in-out, border-bottom .2s ease-in-out;
}
&:not(.disabled):hover,
&:not(.disabled):focus,
&.active {
padding-bottom: add(.5rem, 6px);
border-bottom-color: transparent;
margin-top: 0;
}
}
&.nav-justified > li {
vertical-align: bottom;
}
}
.dropdown-menu {
margin-top: 0;
@include shadow();
border-top-width: 1px;
@include box-shadow(none);
}
.breadcrumb {
border-color: shade-color($breadcrumb-bg, 10%);
@include shadow();
}
.pagination {
a:hover {
text-decoration: none;
}
}
.pagination {
> li > a,
> li > span {
position: relative;
top: 0;
@include shadow();
color: $pagination-color;
font-weight: 700;
text-transform: uppercase;
&:hover,
&:focus {
top: 1px;
border-bottom-width: 3px;
text-decoration: none;
}
&:active {
top: 2px;
border-bottom-width: 2px;
}
}
> .disabled > a,
> .disabled > span {
&:hover {
top: 0;
@include shadow();
}
&:active {
top: 0;
@include shadow();
}
}
}
.pager {
> li > a,
> li > span,
> .disabled > a,
> .disabled > span {
&,
&:hover,
&:active {
border-left-width: 2px;
border-right-width: 2px;
}
}
}
// Indicators
.btn-close {
text-decoration: none;
opacity: .4;
&:hover,
&:focus {
opacity: 1;
}
}
.alert {
color: $white;
@include shadow();
&-primary {
background-color: $primary;
border-color: shade-color($primary, 10%);
}
&-secondary {
background-color: $secondary;
border-color: shade-color($secondary, 10%);
}
&-success {
background-color: $success;
border-color: shade-color($success, 10%);
}
&-info {
background-color: $info;
border-color: shade-color($info, 10%);
}
&-danger {
background-color: $danger;
border-color: shade-color($danger, 10%);
}
&-warning {
background-color: $warning;
border-color: shade-color($warning, 10%);
}
&-dark {
background-color: $dark;
border-color: shade-color($dark, 10%);
}
&-light {
background-color: $light;
border-color: shade-color($light, 10%);
}
.alert-link {
font-weight: 400;
color: $white;
text-decoration: underline;
}
&-secondary,
&-light {
&,
a,
.alert-link {
color: $body-color;
}
}
}
.badge {
&.bg-secondary,
&.bg-light {
color: $dark;
}
}
// Containers
a.list-group-item {
&-success {
&.active {
background-color: $success;
}
&.active:hover,
&.active:focus {
background-color: shade-color($success, 10%);
}
}
&-warning {
&.active {
background-color: $warning;
}
&.active:hover,
&.active:focus {
background-color: shade-color($warning, 10%);
}
}
&-danger {
&.active {
background-color: $danger;
}
&.active:hover,
&.active:focus {
background-color: shade-color($danger, 10%);
}
}
}
.modal,
.toast {
.btn-close {
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
}
}
hwe/scss/common/bootswatch_custom_variables.scss
+177
View File
@@ -0,0 +1,177 @@
// Darkly 5.1.3
// Bootswatch
$theme: "darkly" !default;
//
// Color system
//
$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #ebebeb !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #888 !default;
$gray-700: #444 !default;
$gray-800: #303030 !default;
$gray-900: #222 !default;
$black: #000 !default;
$blue: #375a7f !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #e83e8c !default;
$red: #e74c3c !default;
$orange: #fd7e14 !default;
$yellow: #f39c12 !default;
$green: #00bc8c !default;
$teal: #20c997 !default;
$cyan: #3498db !default;
$primary: $blue !default;
$secondary: $gray-700 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-500 !default;
$dark: $gray-800 !default;
$min-contrast-ratio: 1.9 !default;
// Body
$body-bg: $gray-900 !default;
$body-color: $white !default;
// Links
$link-color: $success !default;
// Fonts
// stylelint-disable-next-line value-keyword-case
$font-family-sans-serif: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic' !default;
$h1-font-size: 3rem !default;
$h2-font-size: 2.5rem !default;
$h3-font-size: 2rem !default;
$text-muted: $gray-600 !default;
// Tables
$table-border-color: $gray-700 !default;
$table-bg-scale: 0 !default;
// Buttons
$btn-font-weight: 700 !default;
// Forms
$input-bg: $white !default;
$input-color: $gray-800 !default;
$input-border-color: $body-bg !default;
$input-group-addon-color: $gray-500 !default;
$input-group-addon-bg: $gray-700 !default;
$form-check-input-bg: $white !default;
$form-check-input-border: none !default;
$form-file-button-color: $white !default;
// Dropdowns
$dropdown-bg: $gray-900 !default;
$dropdown-border-color: $gray-700 !default;
$dropdown-divider-bg: $gray-700 !default;
$dropdown-link-color: $white !default;
$dropdown-link-hover-color: $white !default;
$dropdown-link-hover-bg: $primary !default;
// Navs
$nav-link-padding-x: 2rem !default;
$nav-link-disabled-color: $gray-500 !default;
$nav-tabs-border-color: $gray-700 !default;
$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color transparent !default;
$nav-tabs-link-active-color: $white !default;
$nav-tabs-link-active-border-color: $nav-tabs-border-color $nav-tabs-border-color transparent !default;
// Navbar
$navbar-padding-y: 1rem !default;
$navbar-dark-color: rgba($white, .6) !default;
$navbar-dark-hover-color: $white !default;
$navbar-light-color: rgba($gray-900, .7) !default;
$navbar-light-hover-color: $gray-900 !default;
$navbar-light-active-color: $gray-900 !default;
$navbar-light-toggler-border-color: rgba($gray-900, .1) !default;
// Pagination
$pagination-color: $white !default;
$pagination-bg: $success !default;
$pagination-border-width: 0 !default;
$pagination-border-color: transparent !default;
$pagination-hover-color: $white !default;
$pagination-hover-bg: lighten($success, 10%) !default;
$pagination-hover-border-color: transparent !default;
$pagination-active-bg: $pagination-hover-bg !default;
$pagination-active-border-color: transparent !default;
$pagination-disabled-color: $white !default;
$pagination-disabled-bg: darken($success, 15%) !default;
$pagination-disabled-border-color: transparent !default;
// Cards
$card-cap-bg: $gray-700 !default;
$card-bg: $gray-800 !default;
// Popovers
$popover-bg: $gray-800 !default;
$popover-header-bg: $gray-700 !default;
// Toasts
$toast-background-color: $gray-700 !default;
$toast-header-background-color: $gray-800 !default;
// Modals
$modal-content-bg: $gray-800 !default;
$modal-content-border-color: $gray-700 !default;
$modal-header-border-color: $gray-700 !default;
// Progress bars
$progress-bg: $gray-700 !default;
// List group
$list-group-color: $body-color !default;
$list-group-bg: $gray-800 !default;
$list-group-border-color: $gray-700 !default;
$list-group-hover-bg: $gray-700 !default;
$list-group-action-hover-color: $list-group-color !default;
$list-group-action-active-bg: $gray-900 !default;
// Breadcrumbs
$breadcrumb-padding-y: .375rem !default;
$breadcrumb-padding-x: .75rem !default;
$breadcrumb-bg: $gray-700 !default;
$breadcrumb-border-radius: .25rem !default;
// Close
$btn-close-color: $white !default;
$btn-close-opacity: .4 !default;
$btn-close-hover-opacity: 1 !default;
// Code
$pre-color: inherit !default;
hwe/scss/common/break_500px.scss
+27
View File
@@ -0,0 +1,27 @@
$container-max-widths: (
md: 500px,
lg: 1020px,
xl: 1140px,
xxl: 1320px
);
$grid-breakpoints: (
xs: 0,
sm: 520px,
md: 900px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
@mixin media-1000px{
@media (min-width: map-get($grid-breakpoints, 'md')) {
@content;
}
}
@mixin media-500px{
@media (max-width: calc(map-get($grid-breakpoints, 'md') - .02px)) {
@content;
}
}
hwe/scss/common/pretendard.scss
+27
View File
@@ -0,0 +1,27 @@
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
$font-family-sans-serif: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic';
html, body {
font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic';
}
.f_tnum{
//고정폭 숫자
font-feature-settings: 'tnum';
}
.f_ccmp{
//합성 문자
font-feature-settings: 'ccmp';
}
.f_frac{
//분수 및 첨자
font-feature-settings: 'frac';
}
.f_ss05{
//한글에 맞춘 줄임표(비표준)
font-feature-settings: 'ss05';
}
hwe/scss/common/variables.scss
+50
View File
@@ -0,0 +1,50 @@
$base1color: #141c65;
$base2color: #00582c;
$base3color: #704615;
$base4color: #70153b;
$nbase2color: #0c1a41;
$sammoColors: ('base1': $base1color,
'base2': $base2color,
'base3': $base3color,
'base4': $base4color,
'nbase2': $nbase2color,
);
$nationColors: ("000000": #000000,
"FF0000": #FF0000,
"800000": #800000,
"A0522D": #A0522D,
"FF6347": #FF6347,
"FFA500": #FFA500,
"FFDAB9": #FFDAB9,
"FFD700": #FFD700,
"FFFF00": #FFFF00,
"7CFC00": #7CFC00,
"00FF00": #00FF00,
"808000": #808000,
"008000": #008000,
"2E8B57": #2E8B57,
"008080": #008080,
"20B2AA": #20B2AA,
"6495ED": #6495ED,
"7FFFD4": #7FFFD4,
"AFEEEE": #AFEEEE,
"87CEEB": #87CEEB,
"00FFFF": #00FFFF,
"00BFFF": #00BFFF,
"0000FF": #0000FF,
"000080": #000080,
"483D8B": #483D8B,
"7B68EE": #7B68EE,
"BA55D3": #BA55D3,
"800080": #800080,
"FF00FF": #FF00FF,
"FFC0CB": #FFC0CB,
"F5F5DC": #F5F5DC,
"E0FFFF": #E0FFFF,
"FFFFFF": #FFFFFF,
"A9A9A9": #A9A9A9,
"330000": #330000,
);
hwe/scss/common/vue-multiselect.scss
+555
View File
@@ -0,0 +1,555 @@
@use "sass:math";
$vue-multiselect-disabled-bg: $gray-400;
$vue-multiselect-padding-x: $form-select-padding-x !default;
$vue-multiselect-padding-y: $form-select-padding-y !default;
$vue-multiselect-min-height: $input-height !default;
$vue-multiselect-border-radius: $border-radius !default;
$vue-multiselect-border-color: $form-select-border-color !default;
$vue-multiselect-border-width: 1px !default;
$vue-multiselect-disabled-opacity: $btn-disabled-opacity !default;
$vue-multiselect-placeholder-color: $text-muted !default;
$vue-multiselect-bg: $form-select-bg !default;
$vue-multiselect-color: $form-select-color !default;
$vue-multiselect-disabled-bg: $form-select-disabled-bg !default;
$vue-multiselect-disabled-color: $form-select-disabled-color !default;
$vue-multiselect-option-selected-bg: $dark !default;
$vue-multiselect-option-selected-color: $body-color !default;
$vue-multiselect-option-highlight-color: #fff !default;
$vue-multiselect-option-highlight-bg: $primary !default;
$vue-multiselect-option-selected-highlight-color: #fff !default;
$vue-multiselect-option-selected-highlight-bg: $secondary !default;
$vue-multiselect-tag-color: $dark !default;
$vue-multiselect-tag-bg: $light !default;
$vue-multiselect-tag-font-size: $badge-font-size !default;
$vue-multiselect-tag-font-weight: normal !default;
$vue-multiselect-tag-icon-size: 1.7rem !default;
$vue-multiselect-tag-icon-color: $vue-multiselect-tag-color !default;
$vue-multiselect-tag-icon-color-hover: white !default;
$vue-multiselect-tag-icon-bg-hover: $danger !default;
$vue-multiselect-tag-padding-x: .4rem !default;
$vue-multiselect-tag-padding-y: .25rem !default;
$vue-multiselect-tag-border-radius: $badge-border-radius !default;
$vue-multiselect-arrow-color: $form-select-color !default;
$vue-multiselect-arrow-size: 5px !default;
$vue-multiselect-arrow-padding: 8px !default;
$vue-multiselect-spinner-size: 16px !default;
$vue-multiselect-spinner-thickness: 2px !default;
$vue-multiselect-spinner-margin: math.div(-$vue-multiselect-spinner-size, 2) !default;
$vue-multiselect-spinner-color: $dark !default;
// --------------------------------
// Select field
//--
fieldset[disabled] .multiselect {
pointer-events: none;
}
.multiselect,
.multiselect__input,
.multiselect__single {
font-family: inherit;
font-size: inherit;
touch-action: manipulation;
}
.multiselect {
box-sizing: content-box;
display: block;
position: relative;
width: 100%;
min-height: $vue-multiselect-min-height;
text-align: left;
color: $vue-multiselect-color;
& * {
box-sizing: border-box;
}
&:focus {
outline: none;
}
}
.multiselect--disabled {
pointer-events: none;
opacity: $vue-multiselect-disabled-opacity;
}
.multiselect--active {
z-index: 50;
&:not(.multiselect--above) .multiselect__current,
&:not(.multiselect--above) .multiselect__input,
&:not(.multiselect--above) .multiselect__tags {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
& .multiselect__select {
transform: rotateZ(180deg);
}
}
.multiselect--above.multiselect--active .multiselect__current,
.multiselect--above.multiselect--active .multiselect__input,
.multiselect--above.multiselect--active .multiselect__tags {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.multiselect__input,
.multiselect__single {
position: relative;
display: inline-block;
min-height: $vue-multiselect-min-height / 2;
line-height: $vue-multiselect-min-height / 2;
border: none;
border-radius: $vue-multiselect-border-radius;
background: $vue-multiselect-bg;
padding: 0 0 0 $vue-multiselect-padding-x;
width: calc(100%);
transition: border 0.1s ease;
box-sizing: border-box;
margin-bottom: $vue-multiselect-padding-y;
vertical-align: top;
}
.multiselect__input::placeholder {
color: $vue-multiselect-placeholder-color;
}
.multiselect__tag ~ .multiselect__input,
.multiselect__tag ~ .multiselect__single {
width: auto;
}
.multiselect__input:hover,
.multiselect__single:hover {
border-color: #cfcfcf;
}
.multiselect__input:focus,
.multiselect__single:focus {
border-color: #a8a8a8;
outline: none;
}
.multiselect__single {
padding-left: $vue-multiselect-padding-x;
margin-bottom: $vue-multiselect-padding-y;
}
.multiselect__tags-wrap {
display: inline
}
.multiselect__tags {
min-height: $vue-multiselect-min-height;
display: block;
padding: $vue-multiselect-padding-y $vue-multiselect-min-height 0 $vue-multiselect-padding-y;
border-radius: $vue-multiselect-border-radius;
border: $vue-multiselect-border-width solid $vue-multiselect-border-color;
background: $vue-multiselect-bg;
font-family: inherit;
font-size: inherit;
}
.multiselect__tag {
position: relative;
display: inline-block;
padding: $vue-multiselect-tag-padding-y ($vue-multiselect-tag-icon-size + $vue-multiselect-tag-padding-x) $vue-multiselect-tag-padding-y $vue-multiselect-tag-padding-x;
border-radius: $vue-multiselect-tag-border-radius;
margin-right: $vue-multiselect-tag-padding-x;
color: $vue-multiselect-tag-color;
background: $vue-multiselect-tag-bg;
white-space: nowrap;
overflow: hidden;
max-width: 100%;
text-overflow: ellipsis;
font-size: $vue-multiselect-tag-font-size;
font-weight: $vue-multiselect-tag-font-weight;
}
.multiselect__tag-icon {
cursor: pointer;
margin-left: $vue-multiselect-tag-padding-y;
position: absolute;
right: 0;
top: 0;
bottom: 0;
font-style: initial;
width: $vue-multiselect-tag-icon-size;
text-align: center;
line-height: $vue-multiselect-tag-icon-size;
transition: all 0.2s ease;
font-size: $vue-multiselect-tag-font-size;
font-weight: $vue-multiselect-tag-font-weight;
}
.multiselect__tag-icon:after {
content: "×";
color: $vue-multiselect-tag-icon-color;
font-size: 220%;
}
.multiselect__tag-icon:focus,
.multiselect__tag-icon:hover {
background: $vue-multiselect-tag-icon-bg-hover;
}
.multiselect__tag-icon:focus:after,
.multiselect__tag-icon:hover:after {
color: $vue-multiselect-tag-icon-color-hover;
}
.multiselect__current {
line-height: $vue-multiselect-min-height / 2;
min-height: $vue-multiselect-min-height;
box-sizing: border-box;
display: block;
overflow: hidden;
padding: 8px 30px 0 12px;
white-space: nowrap;
margin: 0;
text-decoration: none;
border-radius: $vue-multiselect-border-radius;
border: 1px solid $vue-multiselect-border-color;
cursor: pointer;
}
.multiselect__select {
line-height: $vue-multiselect-min-height / 2;
display: block;
position: absolute;
box-sizing: border-box;
width: $vue-multiselect-min-height;
height: $vue-multiselect-min-height;
right: 0;
top: 0;
padding: ($vue-multiselect-arrow-padding) $vue-multiselect-arrow-padding;
margin: 0;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: transform 0.2s ease;
}
.multiselect__select:before {
position: relative;
right: 0;
top: 50%;
color: $vue-multiselect-arrow-color;
border-style: solid;
border-width: $vue-multiselect-arrow-size $vue-multiselect-arrow-size 0 $vue-multiselect-arrow-size;
border-color: $vue-multiselect-arrow-color transparent transparent transparent;
content: "";
}
.multiselect__placeholder {
color: $vue-multiselect-placeholder-color;
display: inline-block;
margin-bottom: 10px;
padding-top: 2px;
}
.multiselect--active .multiselect__placeholder {
display: none;
}
.multiselect__content-wrapper {
position: absolute;
display: block;
background: $vue-multiselect-bg;
width: 100%;
max-height: 240px;
overflow: auto;
border: $vue-multiselect-border-width solid $vue-multiselect-border-color;
border-top: none;
border-bottom-left-radius: $vue-multiselect-border-radius;
border-bottom-right-radius: $vue-multiselect-border-radius;
z-index: 50;
-webkit-overflow-scrolling: touch;
}
.multiselect__content {
list-style: none;
display: inline-block;
padding: 0;
margin: 0;
min-width: 100%;
vertical-align: top;
}
.multiselect--above .multiselect__content-wrapper {
bottom: 100%;
border-radius: $vue-multiselect-border-radius $vue-multiselect-border-radius 0 0;
border-bottom: none;
border-top: $vue-multiselect-border-width solid $vue-multiselect-border-color;
}
.multiselect__content::webkit-scrollbar {
display: none;
}
.multiselect__element {
display: block;
}
.multiselect__option {
display: block;
padding: $vue-multiselect-padding-y $vue-multiselect-padding-x;
min-height: $vue-multiselect-min-height;
line-height: $vue-multiselect-min-height / 2;
text-decoration: none;
text-transform: none;
vertical-align: middle;
position: relative;
cursor: pointer;
white-space: nowrap;
}
.multiselect__option:after {
top: 0;
right: 0;
position: absolute;
line-height: $vue-multiselect-min-height;
padding-right: 12px;
padding-left: 20px;
font-family: inherit;
font-size: $small-font-size;
}
.multiselect__option--highlight {
background: $vue-multiselect-option-highlight-bg;
outline: none;
color: $vue-multiselect-option-highlight-color;
}
.multiselect__option--highlight:after {
content: attr(data-select);
background: $vue-multiselect-option-highlight-bg;
color: $vue-multiselect-option-highlight-color;
}
.multiselect__option--selected {
background: $vue-multiselect-option-selected-bg;
color: $vue-multiselect-option-selected-color;
font-weight: bold;
}
.multiselect__option--selected:after {
content: attr(data-selected);
color: silver;
}
.multiselect__option--selected.multiselect__option--highlight {
background: $vue-multiselect-option-selected-highlight-bg;
color: $vue-multiselect-option-selected-highlight-color;
}
.multiselect__option--selected.multiselect__option--highlight:after {
background: $vue-multiselect-option-selected-highlight-bg;
content: attr(data-deselect);
color: $vue-multiselect-option-selected-highlight-color;
}
.multiselect--disabled {
background: $vue-multiselect-disabled-bg;
pointer-events: none;
}
.multiselect--disabled .multiselect__current,
.multiselect--disabled .multiselect__select {
background: $vue-multiselect-disabled-bg;
color: $vue-multiselect-disabled-color;
}
.multiselect__option--disabled {
background: $vue-multiselect-disabled-bg;
color: $vue-multiselect-disabled-color;
cursor: text;
pointer-events: none;
}
.multiselect__option--group {
background: $vue-multiselect-disabled-bg;
color: $vue-multiselect-disabled-color;
&.multiselect__option--highlight {
background: $vue-multiselect-disabled-color;
color: $vue-multiselect-disabled-bg;
}
&.multiselect__option--highlight:after {
background: $vue-multiselect-disabled-color;
}
}
.multiselect__option--disabled.multiselect__option--highlight {
background: $vue-multiselect-disabled-bg;
}
.multiselect__option--group-selected.multiselect__option--highlight {
background: $vue-multiselect-option-selected-highlight-bg;
color: $vue-multiselect-option-selected-highlight-color;
}
.multiselect__option--group-selected.multiselect__option--highlight:after {
background: $vue-multiselect-option-selected-highlight-bg;
content: attr(data-deselect);
color: $vue-multiselect-option-selected-highlight-color;
}
.multiselect-enter-active,
.multiselect-leave-active {
transition: all 0.15s ease;
}
.multiselect-enter,
.multiselect-leave-active {
opacity: 0;
}
.multiselect__strong {
margin-bottom: $vue-multiselect-padding-y;
line-height: $vue-multiselect-min-height/2;
display: inline-block;
vertical-align: top;
}
// --------------------------------
// Spinner
//--
.multiselect__spinner {
position: absolute;
right: 0;
top: 0;
width: $vue-multiselect-min-height;
height: $vue-multiselect-min-height;
display: block;
&:before,
&:after {
position: absolute;
content: "";
top: 50%;
left: 50%;
margin: $vue-multiselect-spinner-margin 0 0 $vue-multiselect-spinner-margin;
width: $vue-multiselect-spinner-size;
height: $vue-multiselect-spinner-size;
border-radius: 100%;
border: $vue-multiselect-spinner-thickness solid transparent;
border-top-color: $vue-multiselect-spinner-color;
box-shadow: 0 0 0 1px transparent;
background: $vue-multiselect-bg;
}
&:before {
animation: spinning 2.4s cubic-bezier(0.41, 0.26, 0.2, 0.62);
animation-iteration-count: infinite;
}
&:after {
animation: spinning 2.4s cubic-bezier(0.51, 0.09, 0.21, 0.8);
animation-iteration-count: infinite;
}
}
@keyframes spinning {
from {
transform: rotate(0)
}
to {
transform: rotate(2turn)
}
}
// --------------------------------
// Loading state
//--
.multiselect__loading-enter-active,
.multiselect__loading-leave-active {
transition: opacity 0.4s ease-in-out;
opacity: 1;
}
.multiselect__loading-enter,
.multiselect__loading-leave-active {
opacity: 0;
}
// --------------------------------
// RTL adjustments
//--
*[dir="rtl"] {
.multiselect {
text-align: right;
}
.multiselect__select {
right: auto;
left: 1px;
}
.multiselect__tags {
padding: $vue-multiselect-padding-y $vue-multiselect-padding-y 0 $vue-multiselect-min-height;
}
.multiselect__content {
text-align: right;
}
.multiselect__option:after {
right: auto;
left: 0;
}
.multiselect__clear {
right: auto;
left: 12px;
}
.multiselect__spinner {
right: auto;
left: 1px;
}
}
// @see https://github.com/shentao/vue-multiselect/issues/718#issuecomment-471195859
.multiselect__placeholder {
color: $vue-multiselect-placeholder-color;
display: inline-block;
margin-bottom: 0;
padding-top: 0;
margin-left: 12px;
}
// is-valid / is-invalid state handling
// @see node_modules/bootstrap/scss/_forms.scss:262
@each $state, $data in $form-validation-states {
$color: map-get($data, color);
$icon: map-get($data, icon);
.form-group.is-#{$state} .multiselect__tags {
border-color: $color;
@if $enable-validation-icons {
padding-right: $form-select-feedback-icon-padding-end;
background: escape-svg($icon) $form-select-bg no-repeat $form-select-feedback-icon-position / $form-select-feedback-icon-size;
}
&:focus {
border-color: $color;
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
}
}
}
hwe/scss/common_legacy.scss
+264
View File
@@ -0,0 +1,264 @@
@import "./common/bootstrap5.scss";
@import "./editor_component.scss";
html * {
max-height: 1000000px;
}
html,
body {
background-color: black;
color: white;
line-height: 1.3;
font-size: 14px;
}
.center {
text-align: center;
}
table.mimic_flex {
border-collapse: collapse;
border: none;
padding: 0;
}
.mimic_flex td,
.mimic_flex th {
border: none !important;
padding: 0px;
word-break: break-all;
}
table.tb_layout {
border-collapse: collapse;
padding: 0px;
font-size: 14px;
word-break: break-all;
}
.tb_layout td,
.tb_layout th {
border: solid 1px gray;
padding: 0px;
word-break: break-all;
}
div.bar_out {
position: relative;
border-top: solid 1px #888888;
border-bottom: solid 1px #333333;
padding: 0;
margin: 0;
width: 100%;
overflow: hidden;
}
div.bar_out div {
position: absolute;
left: 0;
top: 0;
height: 100%;
}
div.bar_out div.bar_in {
width: 100%;
}
/* */
.ev_warning {
color: orangered;
}
.ev_notice {
color: orangered;
}
.ev_succes {
color: lightgreen;
}
.ev_sell {
color: orange;
}
.ev_failed {
color: orangered;
}
.ev_highlight {
color: orangered;
}
/* TODO: 색상값이 아니라 의미에 따라 클래스 지정 */
.o_bullet::before {
color: cyan;
content: "●";
}
.o_diamond::before {
color: orangered;
content: "◆";
}
.small_war_log {
display: inline-block;
}
.small_war_log .war_type_attack {
color: cyan;
}
.small_war_log .war_type_defense {
color: magenta;
}
.small_war_log .war_type_siege {
color: white;
}
.small_war_log .name_plate {
font-size: 0.75em;
}
.small_war_log .name_plate_cover {
color: yellow;
}
.small_war_log .crew_plate {
color: orangered;
font-size: 90%;
}
.t_date {
font-size: 0.75em;
}
.t_red {
color: red;
}
.t_blue {
color: blue;
}
.t_green {
color: green;
}
.t_magenta {
color: magenta;
}
.t_cyan {
color: cyan;
}
.t_limegreen {
color: limegreen;
}
.t_skyblue {
color: skyblue;
}
.t_orangered {
color: orangered;
}
.t_yellow {
color: yellow;
}
.t_white {
color: white;
}
.float_left {
float: left;
}
.tooltip {
font-size: 12.5px;
}
.tooltip_copyable_info .tooltiptext {
display: inline;
color: rgba(0, 0, 0, 0);
font-size: 0;
}
.tooltiptext {
display: none;
}
.hidden_but_copyable {
color: rgba(0, 0, 0, 0);
font-size: 0;
}
.btn-group-xs>.btn,
.btn-xs {
padding: .25rem .4rem;
font-size: .875rem;
line-height: .5;
border-radius: .2rem;
}
.edit_form.viewer {
max-height: 200px;
overflow-y: auto;
}
.trumbowyg-box {
margin: 0;
border-left: none;
border-right: none;
}
.edit_form.trumbowyg-editor {
margin: 0;
padding: 0;
}
.compensatePositive {
color: $cyan;
display: inline-block;
width: 1rem;
}
.compensateNegative {
color: $red;
display: inline-block;
width: 1rem;
}
.compensateNeutral{
display: inline-block;
width: 1rem;
}
.commandImpossible {
color: $red;
text-decoration: line-through $red;
}
.select2-selection--single.simple-select2-align-center .select2-selection__rendered {
text-align: center;
}
.select2-dropdown.simple-select2-align-center li.select2-results__option {
text-align: center;
}
.select2-container--bootstrap4 .select2-selection--single.text-secondary .select2-selection__rendered {
color: white;
}
.select2-container--bootstrap4 .text-secondary .select2-results__option[aria-selected=false] {
color: white;
}
hwe/scss/editor_component.scss
+46
View File
@@ -0,0 +1,46 @@
.custom-image-original {
max-width: 100%;
display: block;
}
.custom-image-large {
width: 100%;
display: block;
}
.custom-image-medium {
width: 50%;
display: block;
}
.custom-image-small {
margin: auto;
width: 25%;
}
.custom-image-align-float-left{
float: left;
}
.custom-image-align-float-right{
float: right;
}
.custom-image-align-center{
margin-left: auto;
margin-right: auto;
display: block;
}
.custom-image-align-left{
margin-left: 0;
margin-right: auto;
display: block;
}
.custom-image-align-right{
margin-left: auto;
margin-right: 0;
display: block;
}
hwe/scss/game_bg.scss
+58
View File
@@ -0,0 +1,58 @@
@import '../../d_shared/common.css';
@import 'common/variables.scss';
html {
background: black;
max-height: 1000000px;
color: white;
}
//TODO: 삭제!!
table.tb_layout {
border-collapse: collapse;
padding: 0px;
font-size: 14px;
word-break: break-all;
}
html,
body {
font-size: 14px;
background-position: center;
background-repeat: repeat-y;
}
.tb_layout td,
.tb_layout th {
border: solid 1px gray;
padding: 0px;
word-break: break-all;
;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.a-right {
text-align: right;
}
.a-left {
text-align: left;
}
.a-center {
text-align: center;
}
.c-bg2{
background: $nbase2color;
}
hwe/scss/gateway/login.scss
+204
View File
@@ -0,0 +1,204 @@
body,
html {
height: 100%;
background-repeat: no-repeat;
}
.main {
margin-top: 70px;
}
h1.title {
font-size: 50px;
font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic';
font-weight: 400;
}
hr {
width: 10%;
/*color: #fff;*/
}
.form-group {
margin-bottom: 15px;
}
label {
margin-bottom: 15px;
}
input,
input::-webkit-input-placeholder {
font-size: 11px;
padding-top: 3px;
}
.main-login {
/*background-color: #fff;*/
/* shadows and rounded borders */
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.main-center {
margin-top: 30px;
margin: 0 auto;
max-width: 330px;
padding: 40px 40px;
}
.login_btn_group {
margin-top: 4px;
>.btn{
padding: 0.3rem 1rem;
}
}
.login-register {
font-size: 11px;
text-align: center;
}
.col-form-label {
text-align: center;
}
.terms {
max-height: 200px;
overflow-y: auto;
}
.terms pre {
width: 100%;
white-space: pre-wrap;
/* Since CSS 2.1 */
white-space: -moz-pre-wrap;
/* Mozilla, since 1999 */
white-space: -pre-wrap;
/* Opera 4-6 */
white-space: -o-pre-wrap;
/* Opera 7 */
word-wrap: break-word;
/* Internet Explorer 5.5+ */
}
.vertical-center {
min-height: 100%;
/* Fallback for browsers do NOT support vh unit */
min-height: 100vh;
/* These two lines are counted as one :-) */
display: flex;
align-items: center;
}
#login_card {
z-index: 801;
}
#btn_kakao_login {
cursor: pointer;
height: 46px;
width: 116px;
background-color: transparent;
color: transparent;
border: 0;
background-size: 100%;
/* To fill the dimensions of container (button), or */
background-repeat: no-repeat;
background-position: bottom center;
margin-top: 5px;
background-image: url('/oauth_kakao/kakao_login_join.png');
}
#btn_kakao_login:hover {
background-image: url('/oauth_kakao/kakao_login_join_ov.png');
}
#bottom_box .container {
text-align: center;
}
.btn-group-xs>.btn,
.btn-xs {
padding: .25rem .4rem;
font-size: .875rem;
line-height: .5;
border-radius: .2rem;
}
#running_map {
border: none;
width: 700px;
}
#map-subframe {
display: none;
width: 700px;
}
@media only screen and (min-width : 360px) {
#map-subframe {
display: block;
transform: scale(calc(330 / 700));
transform-origin: 350px 0px;
margin-bottom: -400px;
}
}
@media only screen and (min-width : 440px) {
#map-subframe {
transform: scale(calc(410 / 700));
margin-bottom: -300px;
}
}
@media only screen and (min-width : 480px) {
#map-subframe {
transform: scale(calc(450 / 700));
margin-bottom: -250px;
}
}
@media only screen and (min-width : 520px) {
#map-subframe {
transform: scale(calc(490 / 700));
margin-bottom: -200px;
}
}
@media only screen and (min-width : 576px) {
#map-subframe {
transform: scale(calc(546 / 700));
margin-bottom: -150px;
}
}
@media only screen and (min-width : 640px) {
#map-subframe {
transform: scale(calc(600/700));
margin-bottom: -100px;
}
}
@media only screen and (min-width : 700px) {
#map-subframe {
transform: scale(calc(670 / 700));
margin-bottom: -20px;
}
}
@media only screen and (min-width : 730px) {
#map-subframe {
transform: none;
margin-bottom: 0;
}
}
hwe/scss/hallOfFame.scss
+114
View File
@@ -0,0 +1,114 @@
@import "./common/bootstrap5.scss";
@import "./common_legacy.scss";
@include media-1000px{
#container {
width: 1000px;
margin: 0 auto;
font-size: 14px;
}
}
@include media-500px{
body {
overflow-x: hidden;
}
#container {
width: 500px;
margin: 0 auto;
margin-bottom: 100px;
font-size: 14px;
}
}
.rankView {
margin:auto;
position:relative;
}
.rankView h3{
text-align:center;
margin:0;
padding:2px;
border-bottom:1px solid gray;
}
.rankView ul{
list-style:none;
margin:0;
padding:0;
box-sizing: border-box;
margin-top:-1px;
margin-bottom:-1px;
}
.rankView li{
flex: 0 0 auto;
width: 100px;
vertical-align: top;
height:149px;
text-align:center;
border-right:1px solid gray;
border-top:1px solid gray;
margin:0;
box-sizing: border-box;
}
.rankView li.no_value{
height:128px;
}
.rankView li.has_server {
height:168px;
}
.rankView li.no_value.has_server {
height:146px;
}
.rankView .hall_server{
border-top:1px solid gray;
}
.rankView .tooltip .tooltiptext{
width:220px;
margin-left: -110px;
}
.rankView .no_value .hall_value{
display:none;
}
.rankView .hall_nation{
font-size:11px;
border-top:1px solid gray;
border-bottom:1px solid gray;
}
.rankView .hall_name{
display: flex;
justify-content: center;
flex-direction: column;
resize: vertical;
font-size:11px;
height:28px;
}
.rankView .hall_name p{
padding:0;
margin:0;
}
.rankView .hall_owner{
font-size:95%;
}
.rankView .hall_value{
line-height:13px;
box-sizing: border-box;
border-top:1px solid gray;
padding-top:3px;
padding-bottom:3px;
}
hwe/scss/history.scss
+44
View File
@@ -0,0 +1,44 @@
@import "./common/bootstrap5.scss";
@import "./editor_component.scss";
@import "./util.scss";
@include media-1000px {
#container {
font-size: 14px;
width: 1000px;
margin: 0 auto;
padding: 0;
}
.year-selector {
margin-left: calc(100%/24 * 5);
}
.map_position {
flex: 0 0 auto;
width: 700px;
}
.nation_position {
flex: 0 0 auto;
width: 300px;
}
}
@include media-500px {
#container {
font-size: 14px;
width: 500px;
margin: 0 auto;
padding: 0;
}
.map_position {
flex: 0 0 auto;
width: 100%;
}
.nation_position {
flex: 0 0 auto;
width: 100%;
}
}
hwe/scss/main.scss
+636
View File
@@ -0,0 +1,636 @@
@import "./common/bootstrap5.scss";
@import "./editor_component.scss";
@import "./util.scss";
body {
color: white;
background-color: black;
border-width: 1px;
border-color: gray;
background-position: center;
background-repeat: repeat-y;
}
@include media-1000px {
#container {
width: 1000px;
margin: 0 auto;
}
}
@include media-500px {
body {
overflow-x: hidden;
}
#container {
width: 500px;
margin: 0 auto;
margin-bottom: 40px !important;
}
input[type='text'],
input[type='number'],
textarea {
font-size: 16px;
}
#navbar500 {
.nav-item ul.dropdown-menu {
max-height: calc(100vh - 50px);
overflow-y: auto;
li {
font-size: 16px;
}
}
.nav-item>.btn {
margin-bottom: -6px;
text-align: center;
width: 125px;
font-size: 16px;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
box-shadow: 0 -1px 0 $dark;
border-left: none !important;
border-right: none !important;
.toolbarButton2 {
text-decoration: underline;
}
}
#navbarGlobalItems {
columns: 2;
}
#navbarNationItems {
columns: 3;
}
#navbarQuickItems {
columns: 3;
}
}
.avoid-wrap {
display: inline-block;
}
#map_view {
display: grid;
}
.mainCityInfo {
display: grid;
border-right: solid 1px gray;
border-bottom: solid 1px gray;
.gPanel {
display: grid;
grid-template-columns: 1fr 2fr;
border-top: solid 1px gray;
border-left: solid 1px gray;
.gHead {
display: flex;
justify-content: center;
align-items: center;
}
}
.cityNamePanel,
.nationNamePanel {
font-weight: bold;
text-align: center;
border-top: solid 1px gray;
border-left: solid 1px gray;
}
.popPanel {
grid-column: 1 / 3;
grid-template-columns: 1fr 5fr;
}
}
.vote-cell {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@include media-1000px {
#map_view {
grid-template-columns: 500px 200px 300px;
grid-template-rows: 520px 130px;
}
#mapZone {
height: 520px;
grid-column: 1 / 3;
grid-row: 1 / 2;
}
#cityInfo {
grid-column: 1 / 3;
grid-row: 2 / 3;
}
#reservedCommandZone {
width: 300px;
grid-column: 3 / 4;
grid-row: 1 / 3;
position: relative;
}
#actionMiniPlate {
position: absolute;
right: 0;
bottom: 1em;
width: 290px;
}
#actionMiniPlateSub {
display: none;
}
.commandPad {
position: absolute;
z-index: 7;
}
#nation-position {
grid-column: 1 / 2;
}
#general-position {
grid-column: 2 / 4;
}
#generalCommandButton {
grid-column: 1 / 4;
}
.buttonPlate {
display: grid;
grid-template-columns: repeat(10, 1fr);
padding: 0;
gap: 1px;
}
.toolbars>.buttonPlate {
grid-template-columns: repeat(8, 1fr);
}
.buttonPlate>a {
display: block;
text-decoration: none;
}
.mainCityInfo {
grid-template-columns: 1fr 1fr 1fr 1fr;
.cityNamePanel,
.nationNamePanel {
grid-column: 1 / 5;
}
.officer4Panel {
grid-column: 4 / 5;
grid-row: 3 / 4;
}
.officer3Panel {
grid-column: 4 / 5;
grid-row: 4 / 5;
}
.officer2Panel {
grid-column: 4 / 5;
grid-row: 5 / 6;
}
}
}
#nation-msg{
word-break: break-all;
}
#nation-msg-box {
position: relative;
overflow: hidden;
}
@include media-500px {
.buttonPlate {
display: grid;
grid-template-columns: repeat(5, 1fr);
padding: 0;
gap: 1px;
}
.toolbars>.buttonPlate {
grid-template-columns: repeat(4, 1fr);
}
.buttonPlate>a {
display: block;
text-decoration: none;
}
#nation-msg {
transform-origin: 0px 0px;
width: 1000px;
transform: scale(0.5);
}
#map_view {
grid-template-columns: 1fr;
}
#reservedCommandZone {
grid-row: 1 / 2;
}
#generalCommandButton {
grid-row: 2 / 3;
}
#nation-position {
grid-row: 3 / 4;
}
#general-position {
grid-row: 4 / 5;
}
#mapZone {
grid-row: 6 / 7;
.world_map {
width: 500px;
height: calc((500px + 20px) * 500 / 700);
}
.map_title {
transform-origin: 0px 0px;
transform: scale(calc(500 / 700));
margin-bottom: calc(-20px * 200 / 700);
}
.map_body {
transform-origin: 0px 0px;
transform: scale(calc(500 / 700));
}
}
#actionMiniPlate {
display: none;
}
#actionMiniPlate {
margin-bottom: 0.5em;
}
.mainCityInfo {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
.cityNamePanel,
.nationNamePanel {
grid-column: 1 / 4;
}
}
}
.buttonPlate {
.toolbarButton {
@extend .btn;
@extend .btn-sammo-base2;
width: 100%;
font-weight: bold;
font-size: 14px;
}
.toolbarButton2 {
@extend .btn;
@extend .btn-sammo-base2;
color: magenta;
width: 100%;
font-weight: bold;
font-size: 14px;
&:hover,
&:focus,
&:active {
color: magenta;
}
}
.commandButton {
width: 100%;
font-weight: bold;
font-size: 14px;
display: block;
}
}
.nation_info td {
height: 18px;
}
#sidebar {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
}
/*임시용 */
#container {
/*width:1000px;*/
margin: auto;
font-size: 14px;
}
/*임시용 끝*/
#message_board {
position: relative;
}
/*
#message_board section{
overflow-y:auto;
overflow-x:hidden;
}
*/
.msg_plate {
width: 100%;
outline-style: solid;
outline-width: 1px;
outline-color: gray;
min-height: 64px;
font-size: 12.5px;
word-break: break-all;
color: white;
}
.msg_plate_private {
background-color: #5d1e1a;
}
.msg_plate_private.msg_plate_dest {
background-color: #5d461a;
}
.msg_plate_public {
background-color: #141c65;
}
@include media-1000px {
#message_board section {
overflow-y: auto;
overflow-x: hidden;
height: 650px;
}
.public_message,
.diplomacy_message,
.national_message,
.private_message {
min-height: 300px;
}
}
@include media-500px {
#message_board .message_input_form {
position: -webkit-sticky;
position: sticky;
top: 0px;
z-index: 5;
}
#public_talk_position,
#national_talk_position,
#private_talk_position,
#diplomacy_talk_position {
display: block;
position: relative;
top: -72px;
visibility: hidden;
}
#message_board .board_side {
position: relative;
>.board_header {
position: -webkit-sticky;
position: sticky;
top: 72px;
z-index: 4;
}
}
.public_message,
.diplomacy_message,
.national_message,
.private_message {
min-height: 150px;
}
}
.msg_plate_national,
.msg_plate_diplomacy {
background-color: #00582c;
}
.msg_plate_national.msg_plate_dest,
.msg_plate_diplomacy.msg_plate_dest {
background-color: #704615;
}
.msg_plate_national.msg_plate_src,
.msg_plate_diplomacy.msg_plate_src {
background-color: #70153b;
}
.msg_icon {
float: left;
width: 64px;
height: 64px;
border-right: solid 1px gray;
}
.msg_time {
font-size: 0.75em;
font-weight: normal;
}
.msg_header {
font-weight: bold;
margin-bottom: 3px;
color: white;
position: relative;
}
#mailbox_list {
font-weight: bold;
}
.board_header {
color: white;
outline-style: solid;
outline-width: 1px;
outline-color: gray;
}
/*
.board_side{
position:absolute;
height:1370px;
width:50%;
overflow-y: hidden;
outline-style:solid;
outline-width:1px;
outline-color: gray;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.board_side > div{
height: 1.2em;
}
*/
.msg_invalid {
color: rgba(255, 255, 255, 0.5);
}
.msg_body {
padding-left: 64px;
}
.msg_target {
margin: 2px 2px 0 2px;
padding: 2px 3px;
display: inline-block;
box-shadow: 2px 2px black;
border-radius: 3px;
}
.btn-delete-msg {
position: absolute;
right: 0;
top: 0;
margin: 2px 2px 0 2px;
font-size: 8px;
}
@include media-500px {
#mailbox_list-col {
order: 1;
}
#msg_submit-col {
order: 2;
}
#msg_input-col {
order: 3;
}
}
/*
.public_message .msg_target{
box-shadow: 2px 2px darkslategrey;
}
*/
.msg_target.msg_bright {
color: black;
}
.msg_target.msg_dark {
color: white;
}
.msg_from_to {
display: inline-block;
}
.msg_content {
margin-left: 10px;
margin-right: 5px;
overflow: hidden;
}
.msg_prompt {
text-align: right;
margin-top: 5px;
margin-right: 5px;
}
#mailbox_list option {
color: white;
background-color: black;
}
@include media-1000px {
#float-tabs {
display: none;
}
}
@include media-500px {
#float-tabs {
position: fixed;
right: -1rem;
top: 10%;
width: 3rem;
z-index: 24;
.btn-group-vertical {
margin-bottom: 0.5em;
}
.btn {
padding-left: 0.5em;
padding-right: 1.5rem;
line-height: 1em;
}
}
}
@media (max-width: 560px) {
#float-tabs {
.btn {
opacity: 0.7;
}
.btn.active {
opacity: 1.0;
}
.btn:active {
opacity: 0.7;
}
}
}
hwe/scss/map.scss
+665
View File
@@ -0,0 +1,665 @@
.map_title_tooltiptext .tooltip-inner {
max-width: 220px;
width: 220px;
text-align: left;
}
.map_title_text {
margin: auto;
text-align: center;
width: 160px;
display: block;
line-height: 20px;
font-size: 14px;
font-weight: bold;
}
.map_body .map_bglayer1 {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.map_body .map_bglayer2 {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.map_body .map_bgroad {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.map_body .map_button_stack {
position: absolute;
right: 0;
bottom: 0;
text-align: right;
}
.map_body .map_toggle_cityname::after {
content: " 끄기";
}
.map_body .map_toggle_cityname.active::after {
content: " 켜기";
}
.map_body .map_toggle_single_tap::after {
content: " 끄기";
}
.map_body .map_toggle_single_tap.active::after {
content: " 켜기";
}
.world_map .city_tooltip {
position: absolute;
z-index: 16;
display: none;
min-width: 120px;
border: 0.02em gray solid;
white-space: nowrap;
font-size: 14px;
}
.world_map .city_name {
background-color: rgb(30, 164, 255);
z-index: 6;
line-height: 15px;
height: 15px;
}
.world_map .nation_name {
background-color: rgb(30, 164, 255);
z-index: 6;
line-height: 15px;
height: 15px;
border-top: 0.02em gray solid;
text-align: right;
}
@keyframes blink-my-city-d1 {
0% {
outline: solid 4px transparent;
}
50% {
outline: solid 4px rgba(255, 0, 0, 1);
}
100% {
outline: solid 4px transparent;
}
}
@keyframes blink-my-city-d2 {
0% {
outline: double 4px transparent;
}
50% {
outline: double 4px rgba(192, 192, 192, 1);
}
100% {
outline: double 4px transparent;
}
}
/* Basic */
@keyframes blink-my-city {
0% {
outline: dashed 5px transparent;
}
50% {
outline: dashed 5px white;
}
100% {
outline: dashed 5px transparent;
}
}
@keyframes blink-my-city2 {
0% {
outline: dashed 4px transparent;
}
50% {
outline: dashed 4px red;
}
100% {
outline: dashed 4px transparent;
}
}
.btn.btn-minimum {
padding-top: 1px;
padding-bottom: 1px;
}
.world_map.hide_cityname .city_detail_name {
display: none;
}
.city_base .city_bg {
z-index: 1;
position: absolute;
background-position: center;
}
.city_base div {
z-index: 2;
}
$cityBaseWidth: 40px;
$cityBaseHeight: 30px;
$detailMapCitySizes: (
(1, 48px, 45px, 16px, 15px, -8px, -4px),
(2, 60px, 42px, 20px, 14px, -8px, -4px),
(3, 42px, 42px, 14px, 14px, -8px, -4px),
(4, 60px, 45px, 20px, 15px, -6px, -3px),
(5, 72px, 48px, 24px, 16px, -6px, -4px),
(6, 78px, 54px, 26px, 18px, -6px, -4px),
(7, 84px, 60px, 28px, 20px, -6px, -4px),
(8, 96px, 72px, 32px, 24px, -6px, -3px)
);
$basicMapCitySize: (
(1, 12px, 12px),
(2, 12px, 12px),
(3, 14px, 14px),
(4, 16px, 14px),
(5, 18px, 16px),
(6, 20px, 16px),
(7, 22px, 18px),
(8, 24px, 18px)
);
.city_img {
position: absolute;
}
.world_map.full_width_map {
width: 700px;
background: black;
font-size: 14px;
color: white;
position: relative;
.map_title {
width: 700px;
height: 20px;
text-align: center;
}
.map_body {
width: 700px;
height: 500px;
position: relative;
overflow: hidden;
}
.city_base {
position: absolute;
width: $cityBaseWidth;
height: $cityBaseHeight;
}
.city_detail_name {
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
white-space: nowrap;
left: 70%;
font-size: 10px;
bottom: -10px;
color: white;
}
&.map_detail {
@each $cityIdx, $cityAreaWidth, $cityAreaHeight, $cityIconWidth, $cityIconHeight, $flagRight,
$flagTop in $detailMapCitySizes
{
.my_city {
border-radius: 33%;
}
.my_city:before {
content: "";
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
position: absolute;
border-radius: 33%;
overflow: hidden;
animation-duration: 3.9s;
animation-name: blink-my-city-d1;
animation-iteration-count: infinite;
}
.my_city:after {
content: "";
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
position: absolute;
border-radius: 33%;
overflow: hidden;
animation-duration: 3.9s;
animation-name: blink-my-city-d2;
animation-iteration-count: infinite;
}
.city_filler {
position: absolute;
width: calc(100% + 2px);
height: calc(100% + 2px);
left: -1px;
top: -1px;
background: transparent;
}
.city_base.city_level_#{$cityIdx} {
.city_bg {
width: $cityAreaWidth;
height: $cityAreaHeight;
background-size: $cityAreaWidth $cityAreaHeight;
left: calc(($cityBaseWidth - $cityAreaWidth) / 2);
top: calc(($cityBaseHeight - $cityAreaHeight) / 2);
}
.city_img {
width: $cityIconWidth;
height: $cityIconHeight;
background-size: $cityIconWidth $cityIconHeight;
left: calc(($cityBaseWidth - $cityIconWidth) / 2);
top: calc(($cityBaseHeight - $cityIconHeight) / 2);
> img {
width: $cityIconWidth;
height: $cityIconHeight;
}
}
.city_flag {
right: $flagRight;
top: $flagTop;
}
}
}
.city_base {
.city_state {
position: absolute;
top: 5px;
/*TODO:도시 레벨 별로 다르게 위치 설정해볼 것*/
left: 0;
}
.city_flag {
position: absolute;
width: 12px;
height: 12px;
.city_capital {
position: absolute;
width: 10px;
height: 10px;
top: 0;
right: -1px;
> img {
width: 10px;
height: 10px;
}
}
}
.city_flag > img {
width: 12px;
height: 12px;
}
}
}
&.map_basic {
.city_filler {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: transparent;
}
.my_city:before {
content: "";
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
position: absolute;
animation-duration: 2s;
animation-name: blink-my-city;
animation-iteration-count: infinite;
}
.my_city:after {
content: "";
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
position: absolute;
animation-duration: 2s;
animation-name: blink-my-city2;
animation-iteration-count: infinite;
}
.city_img {
background-color: white;
}
@each $cityIdx, $cityIconWidth, $cityIconHeight in $basicMapCitySize {
.city_base.city_level_#{$cityIdx} {
.city_img {
width: $cityIconWidth;
height: $cityIconHeight;
left: calc(($cityBaseWidth - $cityIconWidth) / 2);
top: calc(($cityBaseHeight - $cityIconHeight) / 2);
}
}
}
.city_base {
.city_capital {
position: absolute;
width: 5px;
height: 5px;
top: -2px;
right: -2px;
background-color: yellow;
}
.city_state {
position: absolute;
width: 10px;
height: 10px;
top: -2px;
left: -4px;
background-color: white;
}
.city_state.city_state_war {
background-color: red;
}
.city_state.city_state_bad {
background-color: orange;
}
.city_state.city_state_good {
background-color: blue;
}
}
}
}
$smV: calc(500 / 700);
.world_map.small_width_map {
width: 500px;
background: black;
font-size: 12px;
color: white;
position: relative;
.map_body {
.map_bglayer1,
.map_bglayer2,
.map_bgroad {
background-size: calc(700px * $smV) calc(500px * $smV);
}
}
.map_title {
width: 700px * $smV;
height: 20px;
text-align: center;
}
.map_body {
width: 700px * $smV;
height: 500px * $smV;
position: relative;
overflow: hidden;
}
.city_base {
position: absolute;
width: $cityBaseWidth;
height: $cityBaseHeight;
}
.city_detail_name {
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
white-space: nowrap;
left: 70%;
font-size: 10px;
bottom: -12px;
color: white;
}
&.map_detail {
@each $cityIdx, $cityAreaWidth, $cityAreaHeight, $cityIconWidth, $cityIconHeight, $flagRight,
$flagTop in $detailMapCitySizes
{
.my_city {
border-radius: 33%;
}
.my_city:before {
content: "";
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
position: absolute;
border-radius: 33%;
overflow: hidden;
animation-duration: 3.9s;
animation-name: blink-my-city-d1;
animation-iteration-count: infinite;
}
.my_city:after {
content: "";
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
position: absolute;
border-radius: 33%;
overflow: hidden;
animation-duration: 3.9s;
animation-name: blink-my-city-d2;
animation-iteration-count: infinite;
}
.city_filler {
position: absolute;
width: calc(100% + 2px);
height: calc(100% + 2px);
left: -1px;
top: -1px;
background: transparent;
}
.city_base.city_level_#{$cityIdx} {
.city_bg {
width: $cityAreaWidth * $smV;
height: $cityAreaHeight * $smV;
background-size: calc($cityAreaWidth * $smV) calc($cityAreaHeight * $smV);
left: calc(($cityBaseWidth - $cityAreaWidth * $smV) / 2);
top: calc(($cityBaseHeight - $cityAreaHeight * $smV) / 2);
}
.city_img {
width: $cityIconWidth * $smV;
height: $cityIconHeight * $smV;
background-size: calc($cityIconWidth * $smV) calc($cityIconHeight * $smV);
left: calc(($cityBaseWidth - $cityIconWidth * $smV) / 2);
top: calc(($cityBaseHeight - $cityIconHeight * $smV) / 2);
> img {
width: $cityIconWidth * $smV;
height: $cityIconHeight * $smV;
}
}
.city_flag {
right: $flagRight;
top: $flagTop;
}
}
}
.city_base {
.city_state {
position: absolute;
top: 8px;
/*TODO:도시 레벨 별로 다르게 위치 설정해볼 것*/
left: 5px;
> img {
width: 10px;
object-fit: contain;
}
}
.city_flag {
position: absolute;
width: 12px * $smV;
height: 12px * $smV;
> img {
width: 12px * $smV;
height: 12px * $smV;
}
.city_capital {
position: absolute;
width: 10px * $smV;
height: 10px * $smV;
top: 0;
right: -1px;
> img {
width: 10px * $smV;
height: 10px * $smV;
}
}
}
}
}
&.map_basic {
.city_filler {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: transparent;
}
.my_city:before {
content: "";
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
position: absolute;
animation-duration: 2s;
animation-name: blink-my-city;
animation-iteration-count: infinite;
}
.my_city:after {
content: "";
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
position: absolute;
animation-duration: 2s;
animation-name: blink-my-city2;
animation-iteration-count: infinite;
}
.city_img {
background-color: white;
}
@each $cityIdx, $cityIconWidth, $cityIconHeight in $basicMapCitySize {
.city_base.city_level_#{$cityIdx} {
.city_img {
width: $cityIconWidth * $smV;
height: $cityIconHeight * $smV;
left: calc(($cityBaseWidth - $cityIconWidth * $smV) / 2);
top: calc(($cityBaseHeight - $cityIconHeight * $smV) / 2);
}
}
}
.city_base {
.city_capital {
position: absolute;
width: 5px;
height: 5px;
top: -2px;
right: -2px;
background-color: yellow;
}
.city_state {
position: absolute;
width: 8px;
height: 8px;
top: -3px;
left: -5px;
background-color: white;
}
.city_state.city_state_war {
background-color: red;
}
.city_state.city_state_bad {
background-color: orange;
}
.city_state.city_state_good {
background-color: blue;
}
}
}
}
hwe/scss/myPage.scss
+28
View File
@@ -0,0 +1,28 @@
@import "./common/bootstrap5.scss";
@import "./common_legacy.scss";
@include media-1000px{
#container {
width: 1000px;
margin: 0 auto;
> .row > .col, .layout-block{
border-left: solid 1px gray;
border-right: solid 1px gray;
border-top: solid 1px gray;
}
}
}
@include media-500px{
body {
overflow-x: hidden;
}
#container {
width: 500px;
margin: 0 auto;
margin-bottom: 100px;
}
}
hwe/scss/nationBetting.scss
+66
View File
@@ -0,0 +1,66 @@
@import '@scss/common/bootstrap5.scss';
@import "@scss/game_bg.scss";
@import "@scss/util.scss";
#container {
padding: 0;
}
@include media-1000px {
#container {
width: 1000px;
margin: 0 auto;
position: relative;
}
}
@include media-500px {
#container {
position: relative;
width: 500px;
margin: auto;
overflow-x: hidden;
}
}
.bettingCandidate{
border: gray 1px solid;
border-radius: 0.5em;
overflow: hidden;
cursor: pointer;
.title{
background-clip: padding-box;
text-align: center;
}
.info{
padding: 1ch;
}
.pickRate{
padding: 1ch;
}
}
.bettingCandidate.picked{
outline: white 1.5px solid;
border: white 1px solid;
.title{
font-weight: bolder;
}
}
.bettingList{
margin-top: 1em;
}
.bettingItem{
margin: 0.25em;
cursor: pointer;
&:hover{
text-decoration: underline;
}
}
hwe/scss/nationGeneral.scss
+28
View File
@@ -0,0 +1,28 @@
@import '@scss/common/bootstrap5.scss';
@import "@scss/game_bg.scss";
@import "@scss/util.scss";
#container{
padding: 0;
}
#app {
width: 100%;
}
@include media-1000px {
#container {
width: 1000px;
margin: 0 auto;
position: relative;
}
}
@include media-500px {
#container {
position: relative;
width: 500px;
margin: auto;
}
}
hwe/scss/nationStratFinan.scss
+101
View File
@@ -0,0 +1,101 @@
@import '@scss/common/bootstrap5.scss';
@import "@scss/game_bg.scss";
@import "@scss/util.scss";
@import "@scss/editor_component.scss";
@import "@scss/common_legacy.scss";
#container{
padding: 0;
}
.diplomacyTitle {
background-color: $blue;
text-align: center;
font-size: 1.4em;
}
.noticeTitle {
background-color: $white;
text-align: center;
color: black;
font-size: 1.4em;
}
.financeTitle{
background-color: $green;
text-align: center;
font-size: 1.4em;
}
#app {
width: 100%;
overflow-x: hidden;
}
.tiptap-editor{
width: 100%;
overflow: hidden;
}
#scoutMsgForm .ProseMirror{
max-height: 200px;
overflow-y: hidden;
}
@include media-1000px {
#container {
width: 1000px;
margin: 0 auto;
position: relative;
}
}
@include media-500px {
#container {
position: relative;
width: 500px;
margin: auto;
overflow-x: hidden;
}
#noticeForm .ProseMirror {
transform: scale(0.5);
transform-origin: left top;
width: 1000px;
}
#scoutMsgForm .ProseMirror {
transform: scale(calc(500/ 870));
transform-origin: left top;
width: 870px;
}
}
.diplomacyTable {
.tRow {
display: grid;
grid-template-columns: minmax(130px, 3fr) 1.5fr 1fr 1fr 2fr 1fr 2fr;
text-align: center;
}
}
.note-editor.card {
background: inherit;
color: inherit;
border: none;
}
.note-editor.note-frame .note-editing-area .note-editable {
background: inherit;
color: inherit;
padding: 0;
}
.note-editor.note-frame .note-statusbar {
background-color: #444444;
border-top: 1px solid rgba(0, 0, 0, 0.125);
}
hwe/scss/processing.scss
+37
View File
@@ -0,0 +1,37 @@
@import "./common/bootstrap5.scss";
@import "./editor_component.scss";
@import "./common_legacy.scss";
@import "./util.scss";
#amount {
width: 100px;
}
#colorType {
width: 150px;
}
.no-padding .select2-results__option {
padding: 0;
}
@include media-1000px{
#container {
width: 1000px;
margin: 0 auto;
}
}
@include media-500px{
body {
overflow-x: hidden;
}
#container {
width: 500px;
margin: 0 auto;
}
}
hwe/scss/troop.scss
+23
View File
@@ -0,0 +1,23 @@
#troop_list .cityText{
display:none;
}
#troop_list .diffCity .cityText{
display:inline;
}
#troop_list .diffCity {
color:red;
}
#troop_list .leader{
color:lightgreen;
}
#troop_list .leader::before{
content:'*';
}
#troop_list .leader::after{
content:'*';
}
hwe/scss/util.scss
+20
View File
@@ -0,0 +1,20 @@
.s-border-t {
border-top: gray solid 1px;
}
.s-border-b {
border-bottom: gray solid 1px;
}
.s-border-tb {
border-top: gray solid 1px;
border-bottom: gray solid 1px;
}
.avoid-wrap {
display: inline-block;
}
.center {
text-align: center;
}
hwe/scss/vote.scss
+23
View File
@@ -0,0 +1,23 @@
@import '@scss/common/bootstrap5.scss';
@import "@scss/game_bg.scss";
@import "@scss/util.scss";
@include media-1000px{
#container {
width: 1000px;
margin: 0 auto;
font-size: 14px;
}
}
@include media-500px{
body {
overflow-x: hidden;
}
#container {
width: 500px;
margin: 0 auto;
margin-bottom: 100px;
font-size: 14px;
}
}