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

From Brighter Shores Wiki
Jump to navigation Jump to search
Content added Content deleted
No edit summary
No edit summary
 
(5 intermediate revisions by the same user not shown)
Line 2: Line 2:


:root {
:root {
--body-main: hsl(30deg 31% 99%);
--body-main: #fdfcfc;
--body-light: hsl(30deg 32% 88%);
--body-light: #f5f0eb;
--body-mid: hsl(30deg 38% 80%);
--body-mid: #d1b9ad;
--body-dark: hsl(30deg 28% 72%);
--body-dark: #b1886f;
--body-border: hsl(30deg 15% 60%);
--body-border: #d1b9ad;
/*--body-background-color: hsl(30deg 32% 64%); */
/*--body-background-color: hsl(23deg 32% 64%); */
--button-background: hsl(30 18% 42% / 1);
--button-background: hsl(23 18% 42% / 1);
--button-color: #fff;
--button-color: #fff;
--button-border: hsl(30 33% 24% / 1);
--button-border: hsl(23 33% 24% / 1);
--button-dark: hsl(30deg 33% 27%);
--button-dark: hsl(23deg 33% 27%);
--button-light: hsl(30deg 33% 37%);
--button-light: hsl(23deg 33% 37%);
--sidebar: hsl(30deg 41% 78%);
--sidebar: hsl(23deg 41% 78%);
--sidebar-text-color: hsl(0deg 0% 37%);
--sidebar-text-color: hsl(0deg 0% 37%);
--sidebar-link-color: hsl(30deg 48% 28%);
--sidebar-link-color: hsl(23deg 48% 28%);
--search-box: hsl(30deg 22% 92%);
--search-box: hsl(23deg 22% 92%);
--link-color: hsl(30deg 44% 40%);
--link-color: hsl(23deg 44% 30%);
--redlink-color: hsl(0deg 100% 36%);
--redlink-color: hsl(0deg 100% 36%);
/*--text-color: hsl(30deg 100% 4%); */
/*--text-color: hsl(23deg 100% 4%); */
/*--byline-color: hsl(30deg 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(30, 33%, 90%);
--mw-code-background-color: var(--body-light);


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


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


--tile-border-color: hsl(30 31% 80% / 1);
--tile-border-color: hsl(23 31% 80% / 1);
--tile-background-color: hsl(30 32% 88% / 1);
--tile-background-color: hsl(23 32% 88% / 1);
--tile-link-button-color: hsl(30 57% 95% / 1);
--tile-link-button-color: hsl(23 57% 95% / 1);
--tile-link-button-highlight-color: hsl(30 42% 88% / 1);
--tile-link-button-highlight-color: hsl(23 42% 88% / 1);
--tile-dark-color: #fff;
--tile-dark-color: #fff;
--tile-dark-bg: hsl(30 11% 51% / 1);
--tile-dark-bg: hsl(23 11% 51% / 1);
--tile-dark-link-color: hsl(0deg 0% 90%);
--tile-dark-link-color: hsl(0deg 0% 90%);
--tile-dark-byline-color: hsl(30 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(30deg 28% 84%);
--questdetails-header-background: hsl(23deg 28% 84%);
--questdetails-header-background-alt: hsl(30deg 32% 82%);
--questdetails-header-background-alt: hsl(23deg 32% 82%);


--transcript-background: hsl(30deg 32% 88%);
--transcript-background: hsl(23deg 32% 88%);
--transcript-border-color: hsl(30deg 33% 66%);
--transcript-border-color: hsl(23deg 33% 66%);
--transcript-border-hover-color: hsl(30deg 65% 42%);
--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");
}
}

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%);
}