User:Merds/CSS/Theme.css: Difference between revisions

(Created page with "→‎this needs a background pic!!!: :root { --body-main: hsl(310deg 31% 84%); --body-light: hsl(310deg 32% 78%); --body-mid: hsl(310deg 38% 70%); --body-dark: hsl(310deg 28% 62%); --body-border: hsl(310deg 15% 50%); --body-background-color: hsl(310deg 32% 64%); --button-background: hsl(310 18% 32% / 1); --button-color: #fff; --button-border: hsl(310 33% 4% / 1); --button-dark: hsl(310deg 33% 7%); --button-light: hsl(310deg 33...")
 
No edit summary
 
(18 intermediate revisions by the same user not shown)
Line 2: Line 2:


:root {
:root {
--body-main: hsl(310deg 31% 84%);
--body-main: #fdfcfc;
--body-light: hsl(310deg 32% 78%);
--body-light: #f5f0eb;
--body-mid: hsl(310deg 38% 70%);
--body-mid: #d1b9ad;
--body-dark: hsl(310deg 28% 62%);
--body-dark: #b1886f;
--body-border: hsl(310deg 15% 50%);
--body-border: #d1b9ad;
--body-background-color: hsl(310deg 32% 64%);
/*--body-background-color: hsl(23deg 32% 64%); */
--button-background: hsl(310 18% 32% / 1);
--button-background: hsl(23 18% 42% / 1);
--button-color: #fff;
--button-color: #fff;
--button-border: hsl(310 33% 4% / 1);
--button-border: hsl(23 33% 24% / 1);
--button-dark: hsl(310deg 33% 7%);
--button-dark: hsl(23deg 33% 27%);
--button-light: hsl(310deg 33% 17%);
--button-light: hsl(23deg 33% 37%);
--sidebar: hsl(310deg 41% 68%);
--sidebar: hsl(23deg 41% 78%);
--sidebar-text-color: hsl(0deg 0% 27%);
--sidebar-text-color: hsl(0deg 0% 37%);
--sidebar-link-color: hsl(310deg 48% 18%);
--sidebar-link-color: hsl(23deg 48% 28%);
--search-box: hsl(310deg 22% 92%);
--search-box: hsl(23deg 22% 92%);
--link-color: hsl(310deg 44% 40%);
--link-color: hsl(23deg 44% 30%);
--redlink-color: hsl(0deg 100% 36%);
--redlink-color: hsl(0deg 100% 36%);
--text-color: hsl(310deg 100% 4%);
/*--text-color: hsl(23deg 100% 4%); */
--byline-color: hsl(310deg 6% 38%);
/*--byline-color: hsl(23deg 6% 38%); */
--admin-blue: #332e75;
--admin-blue: #332e75;
--bearcat-green: #13592e;
--bearcat-green: #13592e;
Line 27: Line 27:
--osrsw-brown: #605443;
--osrsw-brown: #605443;


--mw-code-background-color: hsl(310, 33%, 80%);
--mw-code-background-color: var(--body-light);


--personal-links-bg: hsl(310deg 27% 78%);
--personal-links-bg: hsl(23deg 31% 95%);


--ooui-normal:hsl(310, 32%, 75%);
--ooui-normal: #d1b9ad;
--ooui-normal--hover:hsl(310, 31%, 81%);
--ooui-normal--hover: hsl(23, 52%, 80%);
--ooui-normal-border:hsl(310, 27%, 61%);
--ooui-normal-border: #d1b9ad;
--ooui-progressive:hsl(310, 17%, 32%);
--ooui-progressive: #936243;
--ooui-progressive--hover:hsl(310, 17%, 42%);
--ooui-progressive--hover: hsl(23, 37%, 52%);
--ooui-input-border:hsl(310, 27%, 61%);
--ooui-input-border:hsl(23, 27%, 71%);
--ooui-input-border--hover:hsl(310, 27%, 42%);
--ooui-input-border--hover:hsl(23, 27%, 52%);
--ooui-disabled:hsl(310, 11%, 79%);
--ooui-disabled:hsl(23, 11%, 89%);
--ooui-disabled-border:hsl(310, 15%, 71%);
--ooui-disabled-border:hsl(23, 15%, 81%);


--tile-border-color: hsl(310 31% 70% / 1);
--tile-border-color: hsl(23 31% 80% / 1);
--tile-background-color: hsl(310 54% 95% / 1);
--tile-background-color: hsl(23 32% 88% / 1);
--tile-link-button-color: hsl(310 57% 91% / 1);
--tile-link-button-color: hsl(23 57% 95% / 1);
--tile-link-button-highlight-color: hsl(310 42% 78% / 1);
--tile-link-button-highlight-color: hsl(23 42% 88% / 1);
--tile-dark-color: #fff;
--tile-dark-color: #fff;
--tile-dark-bg: hsl(310 11% 41% / 1);
--tile-dark-bg: hsl(23 11% 51% / 1);
--tile-dark-link-color: hsl(0deg 0% 80%);
--tile-dark-link-color: hsl(0deg 0% 90%);
--tile-dark-byline-color: hsl(310 0% 100% / 0.7);
--tile-dark-byline-color: hsl(23 0% 100% / 0.7);
--tile-dark-header-color: #fff;
--tile-dark-header-color: #fff;


--questdetails-header-background: hsl(310deg 28% 74%);
--questdetails-header-background: hsl(23deg 28% 84%);
--questdetails-header-background-alt: hsl(310deg 32% 72%);
--questdetails-header-background-alt: hsl(23deg 32% 82%);


--transcript-background: hsl(310deg 32% 78%);
--transcript-background: hsl(23deg 32% 88%);
--transcript-border-color: hsl(310deg 33% 56%);
--transcript-border-color: hsl(23deg 33% 66%);
--transcript-border-hover-color: hsl(310deg 65% 32%);
--transcript-border-hover-color: hsl(23deg 65% 42%);

--echo-icon-moon-bg-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg height='21' viewBox='0 0 21 21' width='21' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8.85464918.37900488c-1.91149353 1.51069427-3.13816124 3.84973402-3.13816124 6.47527736 0 4.55564936 3.69308349 8.24873286 8.24873286 8.24873286 2.5815709 0 4.8861545-1.1859235 6.3986798-3.0426994-.8206378 4.7389755-4.9523867 8.343122-9.9259291 8.343122-5.56375572 0-10.07407088-4.5103151-10.07407088-10.0740709 0-5.02506013 3.67919933-9.19079725 8.49074856-9.95036192z' fill='%235d4159' fill-rule='evenodd'/%3E%3C/svg%3E");
--echo-icon-person-bg-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2213.836%22 viewBox=%220 0 12 13.836%22%3E %3Cpath fill='%235D5141' d=%22M1.938%2C6.656c-1.32%2C1.485-1.47%2C3.15-0.97%2C4.25c0.323%2C0.707%2C0.78%2C1.127%2C1.313%2C1.375 c0.496%2C0.229%2C1.074%2C0.273%2C1.658%2C0.282c0.023%2C0%2C0.04%2C0.03%2C0.062%2C0.03h4.187c0.61%2C0%2C1.225-0.125%2C1.75-0.405 c0.527-0.28%2C0.961-0.718%2C1.188-1.376c0.335-0.964%2C0.175-2.529-1.094-4.03C9.094%2C7.954%2C7.68%2C8.719%2C6.065%2C8.719 c-1.677%2C0-3.182-0.812-4.125-2.063H1.938z%22/%3E %3Cpath fill='%235d4159' d=%22M6.063%2C0c-1.89%2C0-3.595%2C1.674-3.594%2C3.563C2.467%2C5.45%2C4.173%2C7.155%2C6.06%2C7.155 c1.89%2C0%2C3.564-1.705%2C3.563-3.593C9.625%2C1.673%2C7.95%2C0%2C6.063%2C0L6.063%2C0z%22/%3E %3C/svg%3E");
--watch-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='transparent' stroke='%23933984' stroke-width='.8' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E%0A");
--unwatch-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%23933984' stroke='%23933984' stroke-width='.8' d='m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z'/%3E%3C/svg%3E%0A");
--external-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23933984' d='M6 1h5v5L8.86 3.85 4.7 8 4 7.3l4.15-4.16L6 1Z M2 3h2v1H2v6h6V8h1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E");
}

body {
background-image: none;
}
}

Latest revision as of 00:06, 1 April 2024

/* this needs a background pic!!! */

:root {
    --body-main: #fdfcfc;
    --body-light: #f5f0eb;
    --body-mid: #d1b9ad;
    --body-dark: #b1886f;
    --body-border: #d1b9ad;
  /*--body-background-color: hsl(23deg 32% 64%); */
    --button-background: hsl(23 18% 42% / 1);
    --button-color: #fff;
    --button-border: hsl(23 33% 24% / 1);
    --button-dark: hsl(23deg 33% 27%);
    --button-light: hsl(23deg 33% 37%);
    --sidebar: hsl(23deg 41% 78%);
    --sidebar-text-color: hsl(0deg 0% 37%);
    --sidebar-link-color: hsl(23deg 48% 28%);
    --search-box: hsl(23deg 22% 92%);
    --link-color: hsl(23deg 44% 30%);
    --redlink-color: hsl(0deg 100% 36%);
  /*--text-color: hsl(23deg 100% 4%); */
  /*--byline-color: hsl(23deg 6% 38%); */
    --admin-blue: #332e75;
    --bearcat-green: #13592e;
    --awb-purple: #933b96;
    --rsw-blue: #438ab6;
    --osrsw-brown: #605443;

    --mw-code-background-color: var(--body-light);

    --personal-links-bg: hsl(23deg 31% 95%);

    --ooui-normal: #d1b9ad;
    --ooui-normal--hover: hsl(23, 52%, 80%);
    --ooui-normal-border: #d1b9ad;
    --ooui-progressive: #936243;
    --ooui-progressive--hover: hsl(23, 37%, 52%);
	--ooui-input-border:hsl(23, 27%, 71%);
	--ooui-input-border--hover:hsl(23, 27%, 52%);
	--ooui-disabled:hsl(23, 11%, 89%);
	--ooui-disabled-border:hsl(23, 15%, 81%);

    --tile-border-color: hsl(23 31% 80% / 1);
	--tile-background-color: hsl(23 32% 88% / 1);
    --tile-link-button-color: hsl(23 57% 95% / 1);
    --tile-link-button-highlight-color: hsl(23 42% 88% / 1);
    --tile-dark-color: #fff;
    --tile-dark-bg: hsl(23 11% 51% / 1);
    --tile-dark-link-color: hsl(0deg 0% 90%);
    --tile-dark-byline-color: hsl(23 0% 100% / 0.7);
    --tile-dark-header-color: #fff;

    --questdetails-header-background: hsl(23deg 28% 84%);
    --questdetails-header-background-alt: hsl(23deg 32% 82%);

    --transcript-background: hsl(23deg 32% 88%);
    --transcript-border-color: hsl(23deg 33% 66%);
    --transcript-border-hover-color: hsl(23deg 65% 42%);
}