scss
This commit is contained in:
@@ -0,0 +1 @@
|
||||
Deny from all
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
Vendored
+16
@@ -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";
|
||||
Vendored
+72
@@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>");
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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';
|
||||
}
|
||||
@@ -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,
|
||||
);
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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%;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -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:'*';
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user