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
Line 2: Line 2:


:root {
:root {
--body-main: hsl(30deg 31% 99%);
--body-main: hsl(23deg 31% 99%);
--body-light: hsl(30deg 32% 94%);
--body-light: hsl(23deg 32% 94%);
--body-mid: #d1b9ad;
--body-mid: #d1b9ad;
--body-dark: #b1886f;
--body-dark: #b1886f;
--body-border: #d1b9ad;
--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% 40%);
--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: hsl(23, 33%, 90%);


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


--ooui-normal: hsl(30, 32%, 75%);
--ooui-normal: hsl(23, 32%, 75%);
--ooui-normal--hover: hsl(30, 52%, 80%);
--ooui-normal--hover: hsl(23, 52%, 80%);
--ooui-normal-border: hsl(30, 32%, 71%);
--ooui-normal-border: hsl(23, 32%, 71%);
--ooui-progressive: hsl(30, 37%, 42%);
--ooui-progressive: hsl(23, 37%, 42%);
--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");
}
}

Revision as of 23:19, 31 March 2024

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

:root {
    --body-main: hsl(23deg 31% 99%);
    --body-light: hsl(23deg 32% 94%);
    --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% 40%);
    --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: hsl(23, 33%, 90%);

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

    --ooui-normal: hsl(23, 32%, 75%);
    --ooui-normal--hover: hsl(23, 52%, 80%);
    --ooui-normal-border: hsl(23, 32%, 71%);
    --ooui-progressive: hsl(23, 37%, 42%);
    --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%);
}