Markus Poerschke c771c684a8 Customizable template and remove Google Fonts (#1357)
* Allow to override certain parts of the template

* Twig template can be defined via config
* Blocks can be used to override/extend only parts of the template

* Fix spelling in documentation

* Fix extension configuration tree

* Fix unit tests by making constructor argument optional

* Add fonts block and split swagger initialization into own block

* Fix code style

* Remove Google fonts, remove configuration and add changelog entry

* Remove template argument from service definition

* Add correct path for overriding template

* Move re-add of Google Fonts to FAQ section in documentation.

* Remove unused class import
2018-07-16 09:45:18 +02:00

292 lines
5.8 KiB
CSS

html {
box-sizing: border-box;
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin:70px 0 0;
background: #f0f0f0;
}
/** HEADER **/
header:before {
content:"";
background-color:#27848E;
height:70px;
width:100%;
text-align:center;
position:fixed;
top:0;
z-index:100;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
header #logo {
position:fixed;
top : 35px;
right:40px;
z-index:102;
transform:translateY(-50%);
}
header #logo img {
height:48px;
background-color:rgba(40, 134, 144, 0.4)
}
/** INCREASE WRAPPER BLOC PADDING **/
#swagger-ui.api-platform .wrapper {
padding:0px 60px;
}
/** INFORMATIONS BLOC **/
#swagger-ui.api-platform .information-container.wrapper {
margin:0;
padding:10px 0 0;
width:100%;
max-width:100%;
background-color:white;
border-bottom:1px solid #ccc;
margin-bottom:30px;
}
#swagger-ui.api-platform .info .title {
color:#3caab5;
}
#swagger-ui.api-platform .info {
width: 100%;
max-width: 1460px;
padding: 0px 50px;
margin: 0px auto;
}
/** METHODS BLOCS **/
#swagger-ui.api-platform .opblock.opblock-get .opblock-summary-method {
background-color:#3CAAB5;
}
#swagger-ui.api-platform .opblock.opblock-put .opblock-summary-method {
background-color:#E6C229;
}
#swagger-ui.api-platform .opblock.opblock-post .opblock-summary-method {
background-color:#78BC61;
}
#swagger-ui.api-platform .opblock.opblock-delete .opblock-summary-method {
background-color:#ED6A5A;
}
#swagger-ui.api-platform .opblock.opblock-deprecated .opblock-summary-method {
background-color:#ebebeb;
}
#swagger-ui.api-platform .opblock.opblock-get .opblock-summary {
border-color:#3CAAB5;
}
#swagger-ui.api-platform .opblock.opblock-put .opblock-summary {
border-color:#E6C229;
}
#swagger-ui.api-platform .opblock.opblock-post .opblock-summary {
border-color:#78BC61;
}
#swagger-ui.api-platform .opblock.opblock-delete .opblock-summary {
border-color:#ED6A5A;
}
#swagger-ui.api-platform .opblock.opblock-deprecated .opblock-summary {
border-color:#ebebeb;
}
#swagger-ui.api-platform .opblock-summary-method {
border-radius:0;
padding:10px;
}
#swagger-ui.api-platform .opblock-summary {
padding:0;
}
#swagger-ui.api-platform .opblock-tag {
padding:5px 0;
margin:0 0 10px;
}
#swagger-ui.api-platform .opblock-tag:hover {
background-color:rgba(0,0,0,.1);
transform:scale(1.01);
}
#swagger-ui.api-platform .opblock-section-header, #swagger-ui.api-platform .opblock.opblock-get .opblock-section-header {
background-color:rgba(60,170,181,0.1);
box-shadow:none;
}
#swagger-ui.api-platform .opblock.opblock-post .opblock-section-header {
background-color:rgba(120,188,97,0.1);
}
#swagger-ui.api-platform .opblock.opblock-put .opblock-section-header {
background-color:rgba(230, 194, 41, 0.1);
}
#swagger-ui.api-platform .opblock.opblock-delete .opblock-section-header {
background-color:rgba(237,106,90,0.1);
}
#swagger-ui.api-platform .opblock.opblock-deprecated .opblock-section-header {
background-color:rgba(235,235,235,0.1);
}
#swagger-ui.api-platform .opblock {
border-radius:0;
background-color:white;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
margin:0 0 10px;
padding:0;
border:none!important;
}
#swagger-ui .topbar {
display: none;
}
/** FORMATS **/
#formats {
text-align:right;
font-family: sans-serif;
width: 100%;
max-width: 1460px;
padding: 0px 60px;
margin:0 auto;
}
/** BUTTONS **/
#swagger-ui.api-platform .btn.execute {
background-color:#3CAAB5;
border-color:#3CAAB5;
animation:none;
transition:all ease 0.3s;
}
#swagger-ui.api-platform .btn.execute:hover {
background-color:#288690;
border-color:#288690;
}
#swagger-ui.api-platform .execute-wrapper {
text-align:center;
}
#swagger-ui.api-platform .execute-wrapper .btn {
width:auto;
padding:10px 40px;
}
#swagger-ui.api-platform .btn-group {
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
#swagger-ui.api-platform .btn-group .btn {
padding:10px 40px;
}
#swagger-ui.api-platform .btn {
transition:all ease 0.2s;
box-shadow:none;
background-color: #f7f7f7
}
#swagger-ui.api-platform .btn:hover {
background-color:rgba(65,68,78,0.1);
border-color:transparent;
}
#swagger-ui.api-platform .btn.cancel:hover {
background-color:rgba(237,106,90,0.1);
}
#swagger-ui.api-platform .btn.authorize:hover {
background-color:rgba(120,188,97,0.1);
}
#swagger-ui.api-platform select {
box-shadow:none;
cursor:pointer;
}
/** FIX TABS SEPARATOR **/
#swagger-ui.api-platform .tab li:first-of-type:after {
content : none;
}
#swagger-ui.api-platform .tab li {
padding:0px 5px;
border-right:1px solid rgba(0,0,0,.2);
}
#swagger-ui.api-platform .tab li:last-of-type {
border-right:none;
}
/** REMOVE HIGHLIGHTS FOCUS INPUTS **/
#swagger-ui.api-platform input:focus,
#swagger-ui.api-platform select:focus,
#swagger-ui.api-platform textarea:focus,
#swagger-ui.api-platform button:focus {
outline: none;
}
/** REMOVE TITILIUM FONT **/
.swagger-ui .opblock-tag,
.swagger-ui .opblock .opblock-section-header label,
.swagger-ui .opblock .opblock-section-header h4,
.swagger-ui .opblock .opblock-summary-method,
.swagger-ui .tab li,
.swagger-ui .scheme-container .schemes>label,
.swagger-ui .loading-container .loading:after,
.swagger-ui .btn,
.swagger-ui .btn.cancel,
.swagger-ui select,
.swagger-ui label,
.swagger-ui .dialog-ux .modal-ux-content h4,
.swagger-ui .dialog-ux .modal-ux-header h3,
.swagger-ui section.models h4,
.swagger-ui section.models h5,
.swagger-ui .model-title,
.swagger-ui .parameter__name,
.swagger-ui .topbar a,
.swagger-ui .topbar .download-url-wrapper .download-url-button,
.swagger-ui .info .title small pre,
.swagger-ui .scopes h2,
.swagger-ui .errors-wrapper hgroup h4 {
font-family: sans-serif !important;
}