world-game/assets/css/custom-panel.css

@font-face {
  font-family: "Terminal Grotesque";
  src: url("fonts/terminal-grotesque.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Danzza";
  src: url("fonts/Danzza-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Danzza";
  src: url("fonts/Danzza-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Danzza";
  src: url("fonts/Danzza-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Danzza";
  src: url("fonts/Danzza-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

:root {
  --font-title: "Terminal Grotesque", sans-serif;
  --font-body: "Danzza", sans-serif;

  --font-sans: "Danzza", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";

  --text-h1: 3em;

  --color-green-perso: #04fea0;

  --color-black: #0b1632;
  --color-white: #ffffff;

  --color-gray-200: #bccaf0;
  --color-gray-100: #bccaf0;
  --color-gray-250: #8ba3e5;
  --color-gray-300: #7a95e1;
  --color-gray-400: #597bd9;
  --color-gray-500: #3761d2;
  --color-gray-600: #224196;
  --color-gray-700: #1a3274;
  --color-gray-800: #172c64;
  --color-gray-850: #132553;
  --color-gray-900: #0e1e43;
  --color-gray-950: #0d1a38;

  --button-cancel-filled-color-back: light-dark(
    var(--color-gray-300),
    var(--color-gray-950)
  );
  --color-icon-perso: light-dark(var(--color-gray-700), var(--color-gray-400));

  --color-border: light-dark(var(--color-gray-300), var(--color-gray-600));
  --dropdown-color-hr: var(--color-gray-800);

  --color-focus: var(--color-green-perso);

  --color-red-h: 355;
  --color-green-h: 152;
  --color-orange-h: 15;
  --color-blue-h: 220;
}

.k-dialog-button-cancel:where([data-variant="filled"]) {
  --button-color-back: var(--button-cancel-filled-color-back);
}

.k-box {
  --icon-color: var(--color-icon-perso);
}

.k-panel-menu-button:hover:not(.k-activation-button):not(.k-panel-menu-search) {
  color: var(--color-green-perso);
}

.k-header-title {
  font-family: var(--font-title);
}
.k-panel[data-template="home"] .k-header-title-text,
.k-panel[data-template="expertise"] .k-header-title-text,
.k-panel[data-template="portfolio"] .k-header-title-text,
.k-panel[data-template="jouer"] .k-header-title-text,
.k-panel[data-template="about"] .k-header-title-text,
.k-panel[data-template="blog"] .k-header-title-text {
  text-transform: uppercase;
}
.k-header-title .k-icon {
  --icon-size: 28px;
}

.k-text a {
  color: var(--color-green-perso);
}

.k-block-container:not(:last-of-type) {
  border-bottom: 1px dashed var(--color-gray-600);
}

/*modif card pour ressembler au site web*/
.k-panel[data-template="blog"] .k-item.k-cards-item[data-template="article"] {
  display: grid;
  grid-template-columns: 2fr auto 1fr;
  grid-template-rows: auto;
}

.k-panel[data-template="blog"]
  .k-item.k-cards-item[data-template="article"]
  .k-item-image {
  grid-column: 3/4;
  grid-row: 1/3;
}
.k-panel[data-template="blog"]
  .k-item.k-cards-item[data-template="article"]
  .k-item-content {
  grid-column: 1/2;
  grid-row: 1/2;
}
.k-panel[data-template="blog"]
  .k-item.k-cards-item[data-template="article"]
  .k-item-options {
  grid-column: 2/3;
  grid-row: 1/2;
  align-items: start;
}

/* Logo sur la page de login */
.k-login-view .k-login-form::before {
  content: "";
  display: block;
  width: 150px;
  height: 150px;
  margin: 0 auto 2rem auto;
  background-image: url("logo-panel.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Code editor style */
.k-code-editor-input[data-size="custom-size"] {
  min-height: 2rem;
}