Jump to content

MediaWiki:Common.css: Difference between revisions

From Scampsopedia
No edit summary
No edit summary
 
(30 intermediate revisions by the same user not shown)
Line 1: Line 1:
:root {
--scamp-primary: #3140A8;
--scamp-primary--hover: #465BE8;
--scamp-primary-contrast: #FFF;
--scamp-primary-border: #6C7BA8;
--scamp-primary-border--hover: #91A7D2;
--scamp-border-radius: 8px;
--scamp-shadow: 1px 2px 7px 0px rgba(0,0,0,0.3);
}
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os {
--scamp-primary: #1C266E;
--scamp-primary--hover: #2C367D;
--scamp-primary-border: #3D4C91;
--scamp-primary-border--hover: #5A6EA8;
}
}
html.skin-theme-clientpref-night {
--scamp-primary: #1C266E;
--scamp-primary--hover: #2C367D;
--scamp-primary-border: #3D4C91;
--scamp-primary-border--hover: #5A6EA8;
}
#ca-talk {
display: none;
}
.scamp-sr-only {
clip: rect(0 0 0 0);
clip-path: inset(50%);
width: 1px;
height: 1px;
overflow: hidden;
position: absolute;
    white-space: nowrap;
}
.scamp-link-button * {
box-sizing: border-box;
}
.scamp-link-button {
.scamp-link-button {
   display: inline-flex;
   display: inline-flex;
Line 6: Line 52:
   transition: none 0.2s ease;
   transition: none 0.2s ease;
   transition-property: background-color, border;
   transition-property: background-color, border;
   background-color: var(--background-color-interactive);
   background-color: var(--scamp-primary);
   border: 1px solid var(--border-color-interactive);
   border: 1px solid var(--scamp-primary-border);
   border-radius: 4px;
   border-radius: var(--scamp-border-radius);
  box-shadow: var(--scamp-shadow);
}
}


.scamp-link-button:hover {
.scamp-link-button:hover {
   background-color: var(--background-color-interactive--hover);
   background-color: var(--scamp-primary--hover);
   border-color: var(--border-color-interactive--hover);
   border-color: var(--scamp-primary-border--hover);
}
}


.scamp-link-button > a {  
.scamp-link-button a {  
   text-align: center;
   text-align: center;
   flex: 1;
   flex: 1;
   padding: 0.75rem 1rem;
   padding: 0.75rem 1rem;
   color: var(--color-base);
   color: var(--scamp-primary-contrast);
   text-decoration: none;
   text-decoration: none;
}
}


.scamp-link-button:hover > a,
.scamp-link-button:hover a,
.scamp-link-button:active > a {  
.scamp-link-button:active a {  
   color: var(--color-base);
   color: var(--scamp-primary-contrast);
}
}


.scamp-link-button > a.external {
.scamp-link-button a.external {
   background-image: none;
   background-image: none;
   padding: 0.75rem 1rem;
   padding: 0.75rem 1rem;
}
}

Latest revision as of 00:44, 21 January 2026

:root {
	--scamp-primary: #3140A8;
	--scamp-primary--hover: #465BE8;
	--scamp-primary-contrast: #FFF;
	--scamp-primary-border: #6C7BA8;
	--scamp-primary-border--hover: #91A7D2;
	--scamp-border-radius: 8px;
	--scamp-shadow: 1px 2px 7px 0px rgba(0,0,0,0.3);
}

@media (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os {
		--scamp-primary: #1C266E;
		--scamp-primary--hover: #2C367D;
		--scamp-primary-border: #3D4C91;
		--scamp-primary-border--hover: #5A6EA8;
	}
}

html.skin-theme-clientpref-night {
	--scamp-primary: #1C266E;
	--scamp-primary--hover: #2C367D;
	--scamp-primary-border: #3D4C91;
	--scamp-primary-border--hover: #5A6EA8;
}

#ca-talk {
	display: none;
}



.scamp-sr-only {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	overflow: hidden;
	position: absolute;
    white-space: nowrap;
}

.scamp-link-button * {
	box-sizing: border-box;
}

.scamp-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  transition: none 0.2s ease;
  transition-property: background-color, border;
  background-color: var(--scamp-primary);
  border: 1px solid var(--scamp-primary-border);
  border-radius: var(--scamp-border-radius);
  box-shadow: var(--scamp-shadow);
}

.scamp-link-button:hover {
  background-color: var(--scamp-primary--hover);
  border-color: var(--scamp-primary-border--hover);
}

.scamp-link-button a { 
  text-align: center;
  flex: 1;
  padding: 0.75rem 1rem;
  color: var(--scamp-primary-contrast);
  text-decoration: none;
}

.scamp-link-button:hover a,
.scamp-link-button:active a { 
  color: var(--scamp-primary-contrast);
}

.scamp-link-button a.external {
  background-image: none;
  padding: 0.75rem 1rem;
}