From 16b0b1732237f1886565f673b2c935dac633d13c Mon Sep 17 00:00:00 2001 From: Vincent Vandemeulebrouck Date: Tue, 23 Nov 2021 02:07:02 +0100 Subject: [PATCH] Constantes pour les gradients --- styles/simple.css | 88 ++++++++++++++++++++++++++--------------------- 1 file changed, 48 insertions(+), 40 deletions(-) diff --git a/styles/simple.css b/styles/simple.css index 2c951fcb..150a0928 100644 --- a/styles/simple.css +++ b/styles/simple.css @@ -28,44 +28,52 @@ font-weight: normal; font-style: normal; } +:root { +/* =================== 1. ACTOR SHEET FONT STYLES =========== */ + --window-header-title-font-family: CaslonAntique; + --window-header-title-font-size: 1.5rem; + --window-header-title-font-weight: normal; + --window-header-title-color: #f5f5f5; - :root { - /* =================== 1. ACTOR SHEET FONT STYLES =========== */ - --window-header-title-font-family: CaslonAntique; - --window-header-title-font-size: 1.5rem; - --window-header-title-font-weight: normal; - --window-header-title-color: #f5f5f5; + --major-button-font-family: CaslonAntique; + --major-button-font-size: 1.25rem; + --major-button-font-weight: normal; + --major-button-color: #dadada; - --major-button-font-family: CaslonAntique; - --major-button-font-size: 1.25rem; - --major-button-font-weight: normal; - --major-button-color: #dadada; + --tab-header-font-family: CaslonAntique; + --tab-header-font-size: 1.2rem; + --tab-header-font-weight: 700; + --tab-header-color: #403f3e; + --tab-header-color-active: #4a0404; - --tab-header-font-family: CaslonAntique; - --tab-header-font-size: 1.2rem; - --tab-header-font-weight: 700; - --tab-header-color: #403f3e; - --tab-header-color-active: #4a0404; + --actor-input-font-family: CaslonAntique; + --actor-input-font-size: 1.2rem; + --actor-input-font-weight: 500; + --actor-input-color: black; - --actor-input-font-family: CaslonAntique; - --actor-input-font-size: 1.2rem; - --actor-input-font-weight: 500; - --actor-input-color: black; + --actor-label-font-family: CaslonAntique; + --actor-label-font-size: 1.2rem; + --actor-label-font-weight: 700; + --actor-label-color: #464331c4; - --actor-label-font-family: CaslonAntique; - --actor-label-font-size: 1.2rem; - --actor-label-font-weight: 700; - --actor-label-color: #464331c4; +/* =================== 2. DEBUGGING HIGHLIGHTERS ============ */ + --debug-background-color-red: #ff000054; + --debug-background-color-blue: #1d00ff54; + --debug-background-color-green: #54ff0054; - /* =================== 2. DEBUGGING HIGHLIGHTERS ============ */ - --debug-background-color-red: #ff000054; - --debug-background-color-blue: #1d00ff54; - --debug-background-color-green: #54ff0054; + --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; - --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; - } +/* =================== 3. some constants ============ */ + --gradient-gold: linear-gradient(30deg, rgba(191, 149, 63, 0.3), rgba(252, 246, 186, 0.3), rgba(179, 135, 40, 0.3), rgba(251, 245, 183, 0.3), rgba(170, 119, 28, 0.3)); + --gradient-silver: linear-gradient(30deg, rgba(61, 55, 93, 0.3), rgba(178, 179, 196, 0.3), rgba(59, 62, 63, 0.6), rgba(206, 204, 199, 0.3), rgba(61, 46, 49, 0.3)); + --gradient-green: linear-gradient(30deg, rgba(7, 76, 0, 0.3), rgba(66, 163, 65, 0.2), rgba(184, 226, 163, 0.1), rgba(66, 163, 65, 0.2), rgba(184, 226, 163, 0.3)); + --gradient-red: linear-gradient(150deg, rgba(255, 0, 0, 0.3), rgba(255, 200, 128, 0.05),rgba(255, 200, 128, 0.1), rgba(255,10,0,0.3)); + --gradient-violet: linear-gradient(150deg, rgba(100, 45, 124, 0.6), rgba(216, 157, 192, 0.3), rgba(177, 157, 216, 0.5), rgba(107, 62, 121, 0.3), rgba(100, 45, 124, 0.6)); + --gradient-purple-black: linear-gradient(150deg, rgba(0, 0, 0, 0.7), rgba(100, 45, 124, 0.4), rgba(82, 17, 131, 0.3),rgba(100, 45, 124, 0.4), rgba(0, 0, 0, 0.7)); + --gradient-silver-light: linear-gradient(30deg, rgba(61, 55, 93, 0.2), rgba(178, 179, 196, 0.1), rgba(59, 62, 63, 0.2), rgba(206, 204, 199, 0.1), rgba(61, 46, 49, 0.2)); +} /*@import url("https://fonts.googleapis.com/css2?family=Martel:wght@400;800&family=Roboto:wght@300;400;500&display=swap");*/ /* Global styles & Font */ @@ -476,31 +484,31 @@ table {border: 1px solid #7a7971;} .rdd-roll-part{ align-items: center; border-radius: 6px; padding: 3px; - background: linear-gradient(30deg, rgba(191, 149, 63, 0.3), rgba(252, 246, 186, 0.3), rgba(179, 135, 40, 0.3), rgba(251, 245, 183, 0.3), rgba(170, 119, 28, 0.3)); + background: var(--gradient-gold); } .rdd-roll-sign{ border-radius: 6px; padding: 3px; - background: linear-gradient(30deg, rgba(61, 55, 93, 0.3), rgba(178, 179, 196, 0.3), rgba(59, 62, 63, 0.6), rgba(206, 204, 199, 0.3), rgba(61, 46, 49, 0.3)); + background: var(--gradient-silver); } .rdd-roll-norm{ border-radius: 6px; padding: 3px; - background: linear-gradient(30deg, rgba(7, 76, 0, 0.3), rgba(66, 163, 65, 0.2), rgba(184, 226, 163, 0.1), rgba(66, 163, 65, 0.2), rgba(184, 226, 163, 0.3)); + background: var(--gradient-silver-green); } .rdd-roll-notSign, .rdd-roll-echec{ border-radius: 6px; padding: 3px; - background-image: linear-gradient(150deg, rgba(255, 0, 0, 0.3), rgba(255, 200, 128, 0.05),rgba(255, 200, 128, 0.1), rgba(255,10,0,0.3)); + background: var(--gradient-red); } .rdd-roll-epart{ border-radius: 6px; padding: 3px; - background:linear-gradient(150deg, rgba(100, 45, 124, 0.6), rgba(216, 157, 192, 0.3), rgba(177, 157, 216, 0.5), rgba(107, 62, 121, 0.3), rgba(100, 45, 124, 0.6)); + background: var(--gradient-violet); } .rdd-roll-etotal{ border-radius: 6px; padding: 3px; - background:linear-gradient(150deg, rgba(0, 0, 0, 0.7), rgba(100, 45, 124, 0.4), rgba(82, 17, 131, 0.3),rgba(100, 45, 124, 0.4), rgba(0, 0, 0, 0.7)); + background: var(--gradient-purple-black); } .rdd-diviseur{ border-radius: 6px; padding: 3px; - background:linear-gradient(30deg, rgba(61, 55, 93, 0.2), rgba(178, 179, 196, 0.1), rgba(59, 62, 63, 0.2), rgba(206, 204, 199, 0.1), rgba(61, 46, 49, 0.2)); + background: var(--gradient-silver-light); } .rdd-niveau-requis{ @@ -720,13 +728,13 @@ ul, li { .alterne-list > .list-item:nth-child(odd) { background: rgb(160, 130, 100, 0.05); } -.xp-level-up { +.xp-level-up { margin: 0.125rem; box-shadow: inset 0px 0px 1px #00000096; border-radius: 0.25rem; padding: 0.125rem; flex: 1 1 5rem; - background: linear-gradient(30deg, rgba(191, 149, 63, 0.5), rgba(252, 246, 186, 0.5), rgba(179, 135, 40, 0.5), rgba(251, 245, 183, 0.5), rgba(170, 119, 28, 0.3)) !important; + background: var(--gradient-gold) !important; } .blessures-list ul {