Alert: We are in Beta until mid 2022. When you see something not working as expected, please have a look at known bugs in development and/or drop us a line. Thank you!
MediaWiki: Common.css
From tangowiki.org
Line 118: | Line 118: | ||
color: var(--fontdark); | color: var(--fontdark); | ||
} | } | ||
+ | |||
+ | |||
+ | /************************************************ | ||
+ | ALL PAGES | ||
+ | ************************************************/ | ||
+ | |||
+ | /********************* LINKS *********************/ | ||
+ | |||
+ | a:link { | ||
+ | color: var(--link); | ||
+ | text-decoration: none; | ||
+ | /*border-bottom: 1px solid var(--linkbg);*/ | ||
+ | /*box-shadow: inset 0 -3px 0 var(--linkbg);*/ | ||
+ | transition: background 0.2s ease-out; | ||
+ | } | ||
+ | |||
+ | /* Get rid of the lock icon */ | ||
+ | #content a.external, | ||
+ | #content a.external[href^="gopher://"], | ||
+ | #content a.external[href^="https://"], | ||
+ | .link-https { | ||
+ | background: none; | ||
+ | padding-right: 1px; | ||
+ | } | ||
+ | |||
+ | #content a.external:after, | ||
+ | #content a.external[href^="gopher://"]:after, | ||
+ | #content a.external[href^="https://"]:after, | ||
+ | .link-https:after { | ||
+ | content: " \2197"; | ||
+ | } | ||
+ | |||
+ | .btn a:link {color: var(--accentlight);} | ||
+ | |||
+ | a.new { color: var(--linknew); } | ||
+ | |||
+ | a:visited { color: var(--linkvisited); } | ||
+ | a.new:visited { color: var(--linknewvisited); } | ||
+ | |||
+ | a:hover, | ||
+ | #content a.external:hover { | ||
+ | color: var(--linkvisited); | ||
+ | background: var(--linkbg); | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | a.new:hover { color: var(--linknewvisited); } | ||
+ | |||
+ | a:active { color: var(--tweekiblue); } | ||
+ | |||
+ | /********************* BUTTONS *********************/ | ||
+ | /* Button */ | ||
+ | #ca-edit-ext, | ||
+ | .btn a:link, | ||
+ | .btn-primary a:link, | ||
+ | .btn-primary, | ||
+ | .btn-group>.btn:first-child {color: var(--fontlight);} | ||
+ | |||
+ | .btn.btn-primary.btn-block > b.caret {color: var(--fontlight);} | ||
+ | |||
+ | button, | ||
+ | .mw-ui-button.mw-ui-progressive, | ||
+ | .mw-ui-button.mw-ui-primary { | ||
+ | background: var(--tweekiblue); | ||
+ | border: 1px solid var(--tweekiblue); | ||
+ | color: var(--fontlight); | ||
+ | } | ||
+ | |||
+ | button:hover, | ||
+ | .mw-ui-button.mw-ui-progressive:hover, | ||
+ | .mw-ui-button.mw-ui-primary:hover { | ||
+ | background: var(--fontdark); | ||
+ | border: 1px solid var(--fontdark); | ||
+ | color: var(--fontlight); | ||
+ | } | ||
+ | |||
+ | .mw-ui-input:focus { | ||
+ | box-shadow: inset 0 0 0 2px var(--accentloud); | ||
+ | border-color: var(--accentloud); | ||
+ | outline: 0; | ||
+ | } | ||
+ | |||
+ | span.bttn { | ||
+ | background: var(--tweekiblue); | ||
+ | border: 1px solid var(--tweekiblue); | ||
+ | cursor: pointer; | ||
+ | padding: 2px 7px; | ||
+ | } | ||
+ | |||
+ | span.bttn a { | ||
+ | color: var(--fontlight); | ||
+ | } | ||
+ | |||
+ | span.bttn:hover { | ||
+ | background: var(--fontdark); | ||
+ | border: 1px solid var(--fontdark); | ||
+ | } | ||
+ | |||
+ | span.bttn a:hover { | ||
+ | background: inherit; } | ||
+ | |||
+ | /********************* BACKGROUND *********************/ | ||
+ | body {background-color: var(--accentlight1);} | ||
+ | |||
+ | .mw-body {border: 1px solid var(--accentlight1);} | ||
+ | |||
+ | #mw-page-base { | ||
+ | background-image: linear-gradient(#ffffff 50%,#FFE9CF 100%); | ||
+ | background-color: #ffffff; | ||
+ | } | ||
+ | |||
+ | /*sets the next paragraph a bit further off the list bottom (new: .9em) */ | ||
+ | .mw-content-ltr ol {margin: .3em 0 .9em 3.2em;} | ||
+ | |||
+ | /********************* CATEGORY *********************/ | ||
+ | /* shows categories*/ | ||
+ | #catlinks { | ||
+ | display:block; | ||
+ | margin-top: 40px; | ||
+ | } | ||
+ | |||
+ | /* gets rid of the border*/ | ||
+ | #catlinks, .catlinks { | ||
+ | background-color: inherit; | ||
+ | border: none; | ||
+ | padding: 0px; | ||
+ | font-size: smaller; | ||
+ | } | ||
+ | |||
+ | /* makes a nice line*/ | ||
+ | #catlinks:before { | ||
+ | content: ""; | ||
+ | display:block; | ||
+ | width: 20%; | ||
+ | padding-top: 5px; | ||
+ | border-top: 5px solid var(--accent1); | ||
+ | } | ||
+ | |||
+ | |||
+ | /********************* HEADINGS *********************/ | ||
+ | h1, h2, hr { | ||
+ | color: var(--accent); | ||
+ | } | ||
+ | |||
+ | h1 {font-size: 5rem;} | ||
+ | |||
+ | h2 {margin-top: 30px;} | ||
+ | |||
+ | /*h1#firstHeading.firstHeading, { | ||
+ | font-family: 'Lato', sans-serif; | ||
+ | color: #002A4A; | ||
+ | }*/ | ||
+ | |||
+ | /*********************** HEADER/NAVBAR *********************/ | ||
+ | /*https://css-tricks.com/snippets/css/css-box-shadow/*/ | ||
+ | #mw-head.navbar-inner { | ||
+ | background-image: linear-gradient(var(--accent2) 50%,var(--accent1) 100%); | ||
+ | } | ||
+ | #mw-navigation.navbar {border-bottom-color: var(--accent); } | ||
+ | /* -webkit-box-shadow: 0 4px 3px -3px var(--linkvisited); | ||
+ | -moz-box-shadow: 0 4px 3px -3px var(--linkvisited); | ||
+ | box-shadow: 0 4px 3px -3px var(--linkvisited);*/ | ||
+ | |||
+ | |||
+ | /************************FORMS *********************/ | ||
+ | |||
+ | /*makes the checkbox bigger */ | ||
+ | #sfForm select, #sfForm input[type="checkbox"] {font-size: larger;} | ||
+ | |||
+ | input {color: var(--fontdark);} | ||
+ | |||
+ | /********************* QUOTE ********************/ | ||
+ | blockquote.quote { | ||
+ | border-left: 5px solid var(--accent1); | ||
+ | } | ||
+ | |||
+ | blockquote.quote span.quotetext {font-style: italic;} | ||
+ | blockquote.quote span.quotesource {font-size: small;} | ||
+ | |||
+ | /********************* CONTENT NOTEBOXES *************************/ | ||
+ | |||
+ | div.box { | ||
+ | background-color: var(--background2); | ||
+ | padding: 15px; | ||
+ | } | ||
+ | |||
+ | div.box.info { | ||
+ | border: 1px solid var(--medium); | ||
+ | border-left-width: 5px; | ||
+ | background-color: var(--background1); | ||
+ | } | ||
+ | |||
+ | |||
+ | div.box.alert { | ||
+ | border: 1px solid var(--warningborder); | ||
+ | border-left-width: 5px; | ||
+ | background-color: var(--warningbg); | ||
+ | } | ||
+ | |||
+ | /********************* ERRORBOX ********************/ | ||
+ | |||
+ | .errorbox { | ||
+ | color: var(--accentloud2); | ||
+ | background-color: var(--accentloud3); | ||
+ | border-color: var(--accentloud); | ||
+ | } | ||
+ | |||
+ | .warningbox { | ||
+ | color: var(--warning); | ||
+ | border-color: var(--warningborder); | ||
+ | background-color: var(--warningbg); | ||
+ | } | ||
+ | |||
+ | div.errormessage {color: var(--error);} | ||
+ | |||
+ | /************************************************ | ||
+ | SINGLE PAGES | ||
+ | ************************************************/ | ||
+ | |||
+ | |||
+ | |||
+ | /********************* MAIN PAGE *********************/ | ||
+ | /*hide page title on homepage/main page */ | ||
+ | body.page-Main_Page.action-view h1.firstHeading, | ||
+ | body.page-Main_Page.action-submit h1.firstHeading { display: none; } | ||
+ | |||
+ | .blurb {font-size: larger;} | ||
+ | |||
+ | /*.blurbsub */ | ||
+ | |||
+ | /* Boxen in Übersicht */ | ||
+ | .panel-footer { | ||
+ | background-color: var(--background1); | ||
+ | } | ||
+ | |||
+ | div.panel-heading { | ||
+ | background-image: linear-gradient(to bottom,var(--background1) 0,var(--background2) 100%); | ||
+ | color: var(--fontlight); | ||
+ | } | ||
+ | |||
+ | div.panel-heading.mainsong { | ||
+ | background-image: url("/images/4/44/Start_radio01.jpg"); | ||
+ | min-height: 75px; | ||
+ | color: var(--fontlight); | ||
+ | } | ||
+ | |||
+ | div.panel-heading.mainfestival { | ||
+ | background-image: url("/images/2/2a/Start_music01.jpg"); | ||
+ | min-height: 75px; | ||
+ | color: var(--fontlight); | ||
+ | } | ||
+ | |||
+ | /********************* SONG & FESTIVAL *************************/ | ||
+ | |||
+ | .songintro, | ||
+ | .festivalintro { | ||
+ | font-size:75%; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | .festivalissue { | ||
+ | border: 4px dotted var(--fontdark); | ||
+ | border-radius: 4px; | ||
+ | /*border-collapse: collapse;*/ | ||
+ | /*padding: 10px;*/ | ||
+ | }*/ | ||
+ | |||
+ | /********************* RECORDINGS REC: *********************/ | ||
+ | .recordtable3 { | ||
+ | margin: 1em 0; | ||
+ | width: 90%; | ||
+ | border-collapse: collapse; | ||
+ | text-align: left; | ||
+ | } | ||
+ | .recordtable3 th { | ||
+ | font-size: smaller; | ||
+ | font-weight: normal; | ||
+ | color: var(--accentloud); | ||
+ | padding: .5em .4em .1em .3em; | ||
+ | /*border-bottom: 1px solid #ccc;*/ | ||
+ | } | ||
+ | .recordtable3 td { | ||
+ | /*border-bottom: 2px solid #c383a6; */ | ||
+ | border-bottom: 1px solid var(--accentlight); | ||
+ | color: var(--fontdark); | ||
+ | padding: .1em .4em 1em 1em; | ||
+ | } |
Revision as of 20:01, 24 May 2019
/********************* COLORS *********************/ :root { --fontdark: #202754; --fontlight: #FEFEFE; --background1: #F2EFF1; --background2: #F4F1F3; --accent: #8F93A9; --accent1: #A3A6B8; --accent2: #BEC0CD; --accentloud: #7E84A8; --accentlight: #D5D6DF; --accentlight1: #fafafa; /*#DCDDE4;*/ --link: #2589BD; /*#0C6DFF; #0280FF; #3E73A8;*/ --linkvisited: #2E6083; /* #003D68; */ --linknew: #C490A4; --linknewvisited: #8A224A; --wow: #E5DD8B; --linkbg: #EAEBEF; --tweekiblue: #265A88; --yes: #AFD5AA; --warning: #703F04; --warningbg: #FAC98E; --warningborder: #FCB87F; --error: #FF521B; } /********************* TYPEFACES *********************/ /*TYPEFACE */ /*@import url(https://fonts.googleapis.com/css?family="Works Sans"); * {font-family: 'Work Sans',sans-serif;}*/ /* work-sans-300 - latin */ @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 300; src: local('Work Sans Light'), local('WorkSans-Light'), url('../fonts/work-sans-v4-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/work-sans-v4-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* work-sans-regular - latin */ @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 400; src: local('Work Sans'), local('WorkSans-Regular'), url('../fonts/work-sans-v4-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/work-sans-v4-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* work-sans-500 - latin */ @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 500; src: local('Work Sans Medium'), local('WorkSans-Medium'), url('../fonts/work-sans-v4-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/work-sans-v4-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* work-sans-600 - latin */ @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 600; src: local('Work Sans SemiBold'), local('WorkSans-SemiBold'), url('../fonts/work-sans-v4-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/work-sans-v4-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* work-sans-700 - latin */ @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 700; src: local('Work Sans Bold'), local('WorkSans-Bold'), url('../fonts/work-sans-v4-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/work-sans-v4-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* work-sans-800 - latin */ @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 800; src: local('Work Sans ExtraBold'), local('WorkSans-ExtraBold'), url('../fonts/work-sans-v4-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/work-sans-v4-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* work-sans-900 - latin */ @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 900; src: local('Work Sans Black'), local('WorkSans-Black'), url('../fonts/work-sans-v4-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/work-sans-v4-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } * {font-family: 'Work Sans', Lato, Roboto, 'Helvetica Neue', Arial, sans-serif;} /*after this, our base size to count from is about 10px (browser standard)*/ html { font-size: 62%; } body, p, table p { font-size: 1.6rem; } body, .navbar-default, .navbar-brand { color: var(--fontdark); } /************************************************ ALL PAGES ************************************************/ /********************* LINKS *********************/ a:link { color: var(--link); text-decoration: none; /*border-bottom: 1px solid var(--linkbg);*/ /*box-shadow: inset 0 -3px 0 var(--linkbg);*/ transition: background 0.2s ease-out; } /* Get rid of the lock icon */ #content a.external, #content a.external[href^="gopher://"], #content a.external[href^="https://"], .link-https { background: none; padding-right: 1px; } #content a.external:after, #content a.external[href^="gopher://"]:after, #content a.external[href^="https://"]:after, .link-https:after { content: " \2197"; } .btn a:link {color: var(--accentlight);} a.new { color: var(--linknew); } a:visited { color: var(--linkvisited); } a.new:visited { color: var(--linknewvisited); } a:hover, #content a.external:hover { color: var(--linkvisited); background: var(--linkbg); text-decoration:none; } a.new:hover { color: var(--linknewvisited); } a:active { color: var(--tweekiblue); } /********************* BUTTONS *********************/ /* Button */ #ca-edit-ext, .btn a:link, .btn-primary a:link, .btn-primary, .btn-group>.btn:first-child {color: var(--fontlight);} .btn.btn-primary.btn-block > b.caret {color: var(--fontlight);} button, .mw-ui-button.mw-ui-progressive, .mw-ui-button.mw-ui-primary { background: var(--tweekiblue); border: 1px solid var(--tweekiblue); color: var(--fontlight); } button:hover, .mw-ui-button.mw-ui-progressive:hover, .mw-ui-button.mw-ui-primary:hover { background: var(--fontdark); border: 1px solid var(--fontdark); color: var(--fontlight); } .mw-ui-input:focus { box-shadow: inset 0 0 0 2px var(--accentloud); border-color: var(--accentloud); outline: 0; } span.bttn { background: var(--tweekiblue); border: 1px solid var(--tweekiblue); cursor: pointer; padding: 2px 7px; } span.bttn a { color: var(--fontlight); } span.bttn:hover { background: var(--fontdark); border: 1px solid var(--fontdark); } span.bttn a:hover { background: inherit; } /********************* BACKGROUND *********************/ body {background-color: var(--accentlight1);} .mw-body {border: 1px solid var(--accentlight1);} #mw-page-base { background-image: linear-gradient(#ffffff 50%,#FFE9CF 100%); background-color: #ffffff; } /*sets the next paragraph a bit further off the list bottom (new: .9em) */ .mw-content-ltr ol {margin: .3em 0 .9em 3.2em;} /********************* CATEGORY *********************/ /* shows categories*/ #catlinks { display:block; margin-top: 40px; } /* gets rid of the border*/ #catlinks, .catlinks { background-color: inherit; border: none; padding: 0px; font-size: smaller; } /* makes a nice line*/ #catlinks:before { content: ""; display:block; width: 20%; padding-top: 5px; border-top: 5px solid var(--accent1); } /********************* HEADINGS *********************/ h1, h2, hr { color: var(--accent); } h1 {font-size: 5rem;} h2 {margin-top: 30px;} /*h1#firstHeading.firstHeading, { font-family: 'Lato', sans-serif; color: #002A4A; }*/ /*********************** HEADER/NAVBAR *********************/ /*https://css-tricks.com/snippets/css/css-box-shadow/*/ #mw-head.navbar-inner { background-image: linear-gradient(var(--accent2) 50%,var(--accent1) 100%); } #mw-navigation.navbar {border-bottom-color: var(--accent); } /* -webkit-box-shadow: 0 4px 3px -3px var(--linkvisited); -moz-box-shadow: 0 4px 3px -3px var(--linkvisited); box-shadow: 0 4px 3px -3px var(--linkvisited);*/ /************************FORMS *********************/ /*makes the checkbox bigger */ #sfForm select, #sfForm input[type="checkbox"] {font-size: larger;} input {color: var(--fontdark);} /********************* QUOTE ********************/ blockquote.quote { border-left: 5px solid var(--accent1); } blockquote.quote span.quotetext {font-style: italic;} blockquote.quote span.quotesource {font-size: small;} /********************* CONTENT NOTEBOXES *************************/ div.box { background-color: var(--background2); padding: 15px; } div.box.info { border: 1px solid var(--medium); border-left-width: 5px; background-color: var(--background1); } div.box.alert { border: 1px solid var(--warningborder); border-left-width: 5px; background-color: var(--warningbg); } /********************* ERRORBOX ********************/ .errorbox { color: var(--accentloud2); background-color: var(--accentloud3); border-color: var(--accentloud); } .warningbox { color: var(--warning); border-color: var(--warningborder); background-color: var(--warningbg); } div.errormessage {color: var(--error);} /************************************************ SINGLE PAGES ************************************************/ /********************* MAIN PAGE *********************/ /*hide page title on homepage/main page */ body.page-Main_Page.action-view h1.firstHeading, body.page-Main_Page.action-submit h1.firstHeading { display: none; } .blurb {font-size: larger;} /*.blurbsub */ /* Boxen in Übersicht */ .panel-footer { background-color: var(--background1); } div.panel-heading { background-image: linear-gradient(to bottom,var(--background1) 0,var(--background2) 100%); color: var(--fontlight); } div.panel-heading.mainsong { background-image: url("/images/4/44/Start_radio01.jpg"); min-height: 75px; color: var(--fontlight); } div.panel-heading.mainfestival { background-image: url("/images/2/2a/Start_music01.jpg"); min-height: 75px; color: var(--fontlight); } /********************* SONG & FESTIVAL *************************/ .songintro, .festivalintro { font-size:75%; font-weight: bold; } /* .festivalissue { border: 4px dotted var(--fontdark); border-radius: 4px; /*border-collapse: collapse;*/ /*padding: 10px;*/ }*/ /********************* RECORDINGS REC: *********************/ .recordtable3 { margin: 1em 0; width: 90%; border-collapse: collapse; text-align: left; } .recordtable3 th { font-size: smaller; font-weight: normal; color: var(--accentloud); padding: .5em .4em .1em .3em; /*border-bottom: 1px solid #ccc;*/ } .recordtable3 td { /*border-bottom: 2px solid #c383a6; */ border-bottom: 1px solid var(--accentlight); color: var(--fontdark); padding: .1em .4em 1em 1em; }