fvtt-ecryme/styles/global.less

// ============================================================
// Global base styles
// ============================================================

:root {
  // Actor sheet font styles
  --window-header-title-font-size: 1.3rem;
  --window-header-title-font-weight: normal;
  --window-header-title-color: #f5f5f5;

  --major-button-font-size: 1.05rem;
  --major-button-font-weight: normal;
  --major-button-color: #dadada;

  --tab-header-font-size: 1.0rem;
  --tab-header-font-weight: 700;
  --tab-header-color: #403f3e;
  --tab-header-color-active: #4a0404;

  --actor-input-font-size: 0.8rem;
  --actor-input-font-weight: 500;
  --actor-input-color: black;

  --actor-label-font-size: 0.8rem;
  --actor-label-font-weight: 700;
  --actor-label-color: rgba(70, 67, 49, 0.76863);

  // Debugging highlighters
  --debug-background-color-red: rgba(255, 0, 0, 0.32941);
  --debug-background-color-blue: rgba(29, 0, 255, 0.32941);
  --debug-background-color-green: rgba(84, 255, 0, 0.32941);

  --debug-box-shadow-red: inset 0 0 2px red;
  --debug-box-shadow-blue: inset 0 0 2px blue;
  --debug-box-shadow-green: inset 0 0 2px green;
}

.window-app {
  text-align: justify;
  font-size: 16px;
  letter-spacing: 1px;
}

// Fonts: title, sidebar, scene nav
.sheet header.sheet-header h1 input,
.window-app .window-header,
#actors .directory-list,
#navigation #scene-list .scene.nav-item {
  font-size: 1.0rem;
}

// Nav and title
.sheet nav.sheet-tabs {
  font-size: 0.8rem;
}

// Inputs, buttons, sidebar, navigation
.window-app input,
.application input,
.fvtt-ecryme .item-form,
.sheet header.sheet-header .flex-group-center.flex-compteurs,
.sheet header.sheet-header .flex-group-center.flex-fatigue,
select,
button,
.item-checkbox,
#sidebar,
#players,
#navigation #nav-toggle {
  font-size: 0.8rem;
}

.window-header {
  background: rgba(0, 0, 0, 0.75);
}

.window-app.sheet .window-content,
.application.sheet .window-content {
  margin: 0;
  padding: 0;
  overflow: hidden auto;
}

.strong-text {
  font-weight: bold;
}

.tabs .item.active,
.blessures-list li ul li:first-child:hover,
a:hover {
  text-shadow: 1px 0px 0px @color-accent;
}

.rollable {
  &:hover,
  &:focus {
    color: #000;
    text-shadow: 0 0 10px red;
    cursor: pointer;
  }
}

input {
  &:hover {
    border-width: 4px;
    border-color: rgba(37, 124, 37, 0.7);
  }
  &:disabled {
    color: @color-text-disabled;
  }
}

select:disabled {
  color: @color-text-disabled;
}

table {
  border: 1px solid #7a7971;
}

// Grid utilities
.grid,
.grid-2col {
  display: grid;
  grid-column: span 2 / span 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin: 10px 0;
  padding: 0;
}

.grid-3col { grid-column: span 3 / span 3; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4col { grid-column: span 4 / span 4; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5col { grid-column: span 5 / span 5; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-6col { grid-column: span 5 / span 5; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-7col { grid-column: span 7 / span 7; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.grid-8col { grid-column: span 8 / span 8; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.grid-9col { grid-column: span 9 / span 9; grid-template-columns: repeat(9, minmax(0, 1fr)); }
.grid-10col { grid-column: span 10 / span 10; grid-template-columns: repeat(10, minmax(0, 1fr)); }
.grid-11col { grid-column: span 11 / span 11; grid-template-columns: repeat(11, minmax(0, 1fr)); }
.grid-12col { grid-column: span 12 / span 12; grid-template-columns: repeat(12, minmax(0, 1fr)); }

// Flex utilities
.flex-group-center,
.flex-group-left,
.flex-group-right {
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 5px;
}

.flex-group-left {
  justify-content: flex-start;
  text-align: left;
}

.flex-group-right {
  justify-content: flex-end;
  text-align: right;
}

.flex-center {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.table-create-actor {
  font-size: 0.8rem;
}

.flex-between {
  justify-content: space-between;
}

.flex-shrink {
  flex: 'flex-shrink';
}