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 444: | Line 444: | ||
.songrecords { | .songrecords { | ||
margin: 1em 0; | margin: 1em 0; | ||
− | |||
border-collapse: collapse; | border-collapse: collapse; | ||
text-align: left; | text-align: left; |
Revision as of 19:47, 27 May 2019
/********************* COLORS *********************/ :root { --fontdark: #202754; --fontlight: #FEFEFE; --background1: #F2EFF1; --background2: #F4F1F3; --accent: #8F93A9; --accent1: #A3A6B8; --accent2: #BEC0CD; --accentloud: #7E84A8; --accentlight: #D5D6DF; --accentlight1: #fafafa; --accentlight2: #E8E9ED; --accentlight3: #DCDDE4; --songdark: #320020; --songmedium: #5C2445; --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('../ahoi/fonts/work-sans-v4-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../ahoi/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('../ahoi/fonts/work-sans-v4-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../ahoi/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('../ahoi/fonts/work-sans-v4-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../ahoi/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('../ahoi/fonts/work-sans-v4-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../ahoi/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('../ahoi/fonts/work-sans-v4-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../ahoi/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('../ahoi/fonts/work-sans-v4-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../ahoi/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('../ahoi/fonts/work-sans-v4-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../ahoi/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);} /********************* HELPBOX *************************/ div.helpbox { background-color: var(--background2); padding: 15px; font-size: smaller; } /************************************************ 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("/tw-img/4/44/Start_radio01.jpg"); min-height: 75px; color: var(--fontlight); } div.panel-heading.mainfestival { background-image: url("/tw-img/2/2a/Start_music01.jpg"); min-height: 75px; color: var(--fontlight); } div.panel-heading.mainpeople { background-image: url("/tw-img/1/1b/Start_people01.png"); min-height: 75px; color: var(--fontlight); } div.panel-heading.mainrecordings { background-image: url("/tw-img/d/d3/Start_studio01.jpg"); min-height: 75px; color: var(--fontlight); } div.panel-heading.mainorchestras { background-image: url("/tw-img/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; } /********************* RECORDINGS ON SONG PAGE & ORCHESTRA PAGE *********************/ /* .mw-collapsible.mw-collapsed.sortable.songrecordsbyorchestra */ /*Record table for songs */ /*Record table for orchestras */ .songrecords { margin: 1em 0; border-collapse: collapse; text-align: left; } .songrecords th { font-size: smaller; font-weight: normal; color: var(--songdark); padding: .4em .3em; /*border-bottom: 1px solid #ccc;*/ } .songrecords td { /*border-bottom: 2px solid #c383a6; */ font-size: smaller; border-bottom: 1px solid #dee8ff; /* #c383a6; */ color: var(--songmedium); padding: .3em .4em; } .songrecords tr:nth-child(even) { background: var(--accentlight2); } .songrecords tbody tr:hover td { background-color: var(--accentlight1); } /*only for tables with readable rows */