Quoridorn Mark2 デザインを変更

Quoridorn Mark2 のデザイン変更方法は、たぶん2種類。
ソースを編集してビルドするか、/dist/css/main.xxx.css を編集するかのどちらか。あるいは両方。
CSSの編集がお手軽なのでオススメ。
ただし、CSSは超長い1行文なので、エディタによってはフリーズします。
atomやKate辺りが良い?

以下、備忘録的に記載。codeタグ内はcssの内容。

#背景色
/quoridorn/src/views/App.vue 705

html,
body {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 14px;
  background-color: #92a8b3; 背景色
  background-image: url(../static/img/xx.jpg);  背景画像 /static/img/ に入れとく
}

#Application Server Settings
/src/app/basic/login/AppServerSettingWindow.vue

#ログインウィンドウ
/src/app/basic/login/LoginWindow.vue

#背景画像
.root .message-scroll-area[data-v-2824eb7c] {
    overflow-y: auto;
    border: 1px solid grey;
    margin-bottom: .5rem;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background-color: var(--uni-color-white);    #背景色
    background-image: url(../static/img/xxxx.png); #画像を差し替え
    background-size: 18rem;
    background-position: top 0rem right 0rem ;
    background-repeat: no-repeat
}

#ロゴ
.root .message-scroll-area .logo[data-v-2824eb7c] {
    position: absolute;
    top: .4rem;
    right: calc(var(--scroll-bar-width) + .5rem);
    width: 8rem
}

#メッセージ hover
.root .message-scroll-area .message-documents .flat-button[data-v-2824eb7c]:hover {
    text-shadow: 1px 1px 1px hsla(0,0%,100%,.66);
    -webkit-box-shadow: inset 0 0 0 hsla(0,0%,100%,.5),0 2px 2px rgba(0,0,0,.19);
    box-shadow: inset 0 0 0 hsla(0,0%,100%,.5),0 2px 2px rgba(0,0,0,.19);
    background-color: var(--uni-color-light-skyblue)
}

#ウィンドウの枠
/src/app/core/window/WindowFrame.vue 841

.window-frame[data-v-c6fdce72] {
    position: fixed;
    visibility: hidden;
    display: block;
    padding: calc(var(--window-padding) + var(--window-title-height)) var(--window-padding) var(--window-padding) var(--window-padding);
    overflow: visible;
    min-height: 50px;
    border-radius: 8px 8px 8px 8px; #ログインウィンドウの下角を丸める;
    background-color: var(--theme-color);
    -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,.6);
    box-shadow: 5px 5px 5px rgba(0,0,0,.6);
    border: 1px solid grey;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    left: 0;
    top: 0;
    -webkit-font-smoothing: subpixel-antialiased;
    width: calc(var(--windowWidthPx) + var(--windowWidthEm) + var(--windowWidthRem) + var(--windowWidthScrollBar) + var(--window-padding)*2 + 2px);
    height: calc(var(--windowHeightPx) + var(--windowHeightEm) + var(--windowHeightRem) + var(--windowHeightScrollBar) + var(--window-title-height) + var(--window-padding)*2);
    font-size: var(--windowFontSize);
    z-index: var(--windowOrder)
}

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください