mirror of
https://github.com/getgrav/grav-plugin-admin.git
synced 2025-11-05 04:46:03 +01:00
Reworked CSS styling
This commit is contained in:
Andy Miller
2
themes/grav/css-compiled/fonts.css
vendored
2
themes/grav/css-compiled/fonts.css
vendored
@@ -1,3 +1,3 @@
|
||||
@import url("//fonts.googleapis.com/css?family=Montserrat:400|Lato:300,400,700|Inconsolata:400,700");body,h5,h6,.badge,.note,.grav-mdeditor-preview,input,select,textarea,button,.selectize-input{font-family:"Lato","Helvetica","Tahoma","Geneva","Arial",sans-serif}h1,h2,h3,h4,#admin-menu li,.form-tabs>label,.label{font-family:"Montserrat","Helvetica","Tahoma","Geneva","Arial",sans-serif}code,kbd,pre,samp,body .CodeMirror{font-family:"Inconsolata","Monaco","Consolas","Lucida Console",monospace !important}
|
||||
|
||||
/*# sourceMappingURL=fonts.css.map */
|
||||
/*# sourceMappingURL=../css-compiled/fonts.css.map */
|
||||
@@ -1 +1,11 @@
|
||||
{"version":3,"file":"fonts.css","sources":["fonts.scss","configuration/fonts/_support.scss"],"sourcesContent":["$fonts-default: 'Lato' !default;\r\n$fonts-header: 'Montserrat' !default;\r\n$fonts-mono: 'Inconsolata' !default;\r\n\r\n$font-definitions: (\r\n Montserrat: '400',\r\n Lato: '300,400,700',\r\n Inconsolata: '400,700'\r\n);\r\n\r\n@import \"configuration/fonts/support\";\r\n\r\n\r\n\r\n\r\n","@function str-replace($string, $search, $replace: '') {\r\n $index: str-index($string, $search);\r\n\r\n @if $index {\r\n @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);\r\n }\r\n\r\n @return $string;\r\n}\r\n\r\n@function admin-font-faces($fonts) {\r\n $url: \"//fonts.googleapis.com/css?family=\";\r\n $nb: 0;\r\n\r\n @each $fontname, $weights in $fonts {\r\n\r\n @if $fontname == $fonts-default or\r\n $fontname == $fonts-header or\r\n $fontname == $fonts-mono {\r\n\r\n $nb: $nb + 1;\r\n $nb-word: 0;\r\n\r\n $fontname: str-replace(\"#{$fontname}\", \" \", \"+\");\r\n\r\n $url: $url + $fontname;\r\n\r\n @if $weights != null {\r\n $url: $url + \":\" + $weights;\r\n }\r\n\r\n @if $nb < 3 {\r\n $url: $url + \"|\";\r\n }\r\n }\r\n }\r\n\r\n @return $url;\r\n}\r\n\r\n@mixin body-fonts($font) {\r\n body, h5, h6,\r\n .badge, .note, .grav-mdeditor-preview,\r\n input, select, textarea, button, .selectize-input {\r\n font-family: \"#{$font}\", \"Helvetica\", \"Tahoma\", \"Geneva\", \"Arial\", sans-serif;\r\n }\r\n}\r\n\r\n@mixin header-fonts($font) {\r\n h1, h2, h3, h4,\r\n #admin-menu li, .form-tabs > label, .label {\r\n font-family: \"#{$font}\", \"Helvetica\", \"Tahoma\", \"Geneva\", \"Arial\", sans-serif;\r\n }\r\n}\r\n\r\n@mixin mono-fonts($font) {\r\n code, kbd, pre, samp,\r\n body .CodeMirror {\r\n font-family: \"#{$font}\", \"Monaco\", \"Consolas\", \"Lucida Console\", monospace !important;\r\n }\r\n}\r\n$font-url: admin-font-faces($font-definitions);\r\n\r\n@import url(\"#{$font-url}\");\r\n\r\n@include body-fonts($fonts-default);\r\n\r\n@include header-fonts($fonts-header);\r\n\r\n@include mono-fonts($fonts-mono);\r\n\r\n\r\n\r\n\r\n\r\n"],"names":[],"mappings":"AC+DA,OAAO,CAAC,4FAAI,CAtBR,AAAA,IAAI,CAAE,AAAA,EAAE,CAAE,AAAA,EAAE,CACZ,AAAA,MAAM,CAAE,AAAA,KAAK,CAAE,AAAA,sBAAsB,CACrC,AAAA,KAAK,CAAE,AAAA,MAAM,CAAE,AAAA,QAAQ,CAAE,AAAA,MAAM,CAAE,AAAA,gBAAgB,AAAC,CAC9C,WAAW,CAAE,MAAU,CAAE,WAAW,CAAE,QAAQ,CAAE,QAAQ,CAAE,OAAO,CAAE,UAAU,CAChF,AAID,AAAA,EAAE,CAAE,AAAA,EAAE,CAAE,AAAA,EAAE,CAAE,AAAA,EAAE,CACd,AAAY,WAAD,CAAC,EAAE,CAAE,AAAa,UAAH,CAAG,KAAK,CAAE,AAAA,MAAM,AAAC,CACvC,WAAW,CAAE,YAAU,CAAE,WAAW,CAAE,QAAQ,CAAE,QAAQ,CAAE,OAAO,CAAE,UAAU,CAChF,AAID,AAAA,IAAI,CAAE,AAAA,GAAG,CAAE,AAAA,GAAG,CAAE,AAAA,IAAI,CACpB,AAAK,IAAD,CAAC,WAAW,AAAC,CACb,WAAW,CAAE,aAAU,CAAE,QAAQ,CAAE,UAAU,CAAE,gBAAgB,CAAE,SAAS,CAAC,UAAU,CACxF"}
|
||||
{
|
||||
"version": 3,
|
||||
"file": "../scss/fonts.css",
|
||||
"sources": [
|
||||
"../scss/fonts.scss",
|
||||
"../hdr0",
|
||||
"../scss/configuration/fonts/_support.scss"
|
||||
],
|
||||
"mappings": "AE+DA,OAAO,CAAC,4FAAI,CAtBR,AAAA,IAAI,CAAE,AAAA,EAAE,CAAE,AAAA,EAAE,CACZ,AAAA,MAAM,CAAE,AAAA,KAAK,CAAE,AAAA,sBAAsB,CACrC,AAAA,KAAK,CAAE,AAAA,MAAM,CAAE,AAAA,QAAQ,CAAE,AAAA,MAAM,CAAE,AAAA,gBAAgB,AAAC,CAC9C,WAAW,CAAE,MAAU,CAAE,WAAW,CAAE,QAAQ,CAAE,QAAQ,CAAE,OAAO,CAAE,UAAU,CAChF,AAID,AAAA,EAAE,CAAE,AAAA,EAAE,CAAE,AAAA,EAAE,CAAE,AAAA,EAAE,CACd,AAAY,WAAD,CAAC,EAAE,CAAE,AAAa,UAAH,CAAG,KAAK,CAAE,AAAA,MAAM,AAAC,CACvC,WAAW,CAAE,YAAU,CAAE,WAAW,CAAE,QAAQ,CAAE,QAAQ,CAAE,OAAO,CAAE,UAAU,CAChF,AAID,AAAA,IAAI,CAAE,AAAA,GAAG,CAAE,AAAA,GAAG,CAAE,AAAA,IAAI,CACpB,AAAK,IAAD,CAAC,WAAW,AAAC,CACb,WAAW,CAAE,aAAU,CAAE,QAAQ,CAAE,UAAU,CAAE,gBAAgB,CAAE,SAAS,CAAC,UAAU,CACxF",
|
||||
"names": []
|
||||
}
|
||||
2
themes/grav/css-compiled/nucleus.css
vendored
2
themes/grav/css-compiled/nucleus.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
4
themes/grav/css-compiled/preset.css
vendored
4
themes/grav/css-compiled/preset.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
themes/grav/css-compiled/simple-fonts.css
vendored
2
themes/grav/css-compiled/simple-fonts.css
vendored
@@ -1,3 +1,3 @@
|
||||
body,h5,h6,.badge,.note,.grav-mdeditor-preview,input,select,textarea,button,.selectize-input,h1,h2,h3,h4,#admin-menu li,.form-tabs>label,.label{font-family:"Helvetica Neue", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif}code,kbd,pre,samp,body .CodeMirror{font-family:"Monaco", "Consolas", "Lucida Console", monospace}
|
||||
|
||||
/*# sourceMappingURL=simple-fonts.css.map */
|
||||
/*# sourceMappingURL=../css-compiled/simple-fonts.css.map */
|
||||
@@ -1 +1,10 @@
|
||||
{"version":3,"file":"simple-fonts.css","sources":["simple-fonts.scss"],"sourcesContent":["body, h5, h6,\r\n.badge, .note, .grav-mdeditor-preview,\r\ninput, select, textarea, button, .selectize-input,\r\nh1, h2, h3, h4,\r\n#admin-menu li, .form-tabs > label, .label {\r\n font-family: \"Helvetica Neue\", \"Helvetica\", \"Tahoma\", \"Geneva\", \"Arial\", sans-serif;\r\n}\r\ncode, kbd, pre, samp,\r\nbody .CodeMirror {\r\n font-family: \"Monaco\", \"Consolas\", \"Lucida Console\", monospace;\r\n}\r\n"],"names":[],"mappings":"AAAA,AAAA,IAAI,CAAE,AAAA,EAAE,CAAE,AAAA,EAAE,CACZ,AAAA,MAAM,CAAE,AAAA,KAAK,CAAE,AAAA,sBAAsB,CACrC,AAAA,KAAK,CAAE,AAAA,MAAM,CAAE,AAAA,QAAQ,CAAE,AAAA,MAAM,CAAE,AAAA,gBAAgB,CACjD,AAAA,EAAE,CAAE,AAAA,EAAE,CAAE,AAAA,EAAE,CAAE,AAAA,EAAE,CACd,AAAY,WAAD,CAAC,EAAE,CAAE,AAAa,UAAH,CAAG,KAAK,CAAE,AAAA,MAAM,AAAC,CACvC,WAAW,CAAE,sEAAsE,CACtF,AACD,AAAA,IAAI,CAAE,AAAA,GAAG,CAAE,AAAA,GAAG,CAAE,AAAA,IAAI,CACpB,AAAK,IAAD,CAAC,WAAW,AAAC,CACb,WAAW,CAAE,iDAAiD,CACjE"}
|
||||
{
|
||||
"version": 3,
|
||||
"file": "../scss/simple-fonts.css",
|
||||
"sources": [
|
||||
"../scss/simple-fonts.scss",
|
||||
"../hdr0"
|
||||
],
|
||||
"mappings": "AAAA,AAAA,IAAI,CAAE,AAAA,EAAE,CAAE,AAAA,EAAE,CACZ,AAAA,MAAM,CAAE,AAAA,KAAK,CAAE,AAAA,sBAAsB,CACrC,AAAA,KAAK,CAAE,AAAA,MAAM,CAAE,AAAA,QAAQ,CAAE,AAAA,MAAM,CAAE,AAAA,gBAAgB,CACjD,AAAA,EAAE,CAAE,AAAA,EAAE,CAAE,AAAA,EAAE,CAAE,AAAA,EAAE,CACd,AAAY,WAAD,CAAC,EAAE,CAAE,AAAa,UAAH,CAAG,KAAK,CAAE,AAAA,MAAM,AAAC,CACvC,WAAW,CAAE,sEAAuE,CACvF,AACD,AAAA,IAAI,CAAE,AAAA,GAAG,CAAE,AAAA,GAAG,CAAE,AAAA,IAAI,CACpB,AAAK,IAAD,CAAC,WAAW,AAAC,CACb,WAAW,CAAE,iDAAkD,CAClE",
|
||||
"names": []
|
||||
}
|
||||
2
themes/grav/css-compiled/template.css
vendored
2
themes/grav/css-compiled/template.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -103,16 +103,19 @@ $form-field-bg: #00f;
|
||||
$form-field-text: #0f0;
|
||||
$underline: #ff0;
|
||||
$subtle-text: #0ff;
|
||||
$ir-slider-bg: #f0f;
|
||||
|
||||
@if (lightness($content-bg) < 50) {
|
||||
$form-border: lighten($content-bg, 15%);
|
||||
$form-field-bg: darken($content-bg, 3%);
|
||||
$ir-slider-bg: lighten($content-bg, 2%);
|
||||
$form-field-text: lighten($content-text, 5%);
|
||||
$underline: lighten($content-bg, 3%);
|
||||
$subtle-text: darken($content-text, 10%);
|
||||
} @else {
|
||||
$form-border: darken($content-bg, 10%);
|
||||
$form-field-bg: lighten($content-bg, 3%);
|
||||
$ir-slider-bg: darken($content-bg, 2%);
|
||||
$form-field-text: darken($content-text, 5%);
|
||||
$underline: darken($content-bg, 3%);
|
||||
$subtle-text: lighten($content-text, 10%);
|
||||
@@ -749,6 +752,45 @@ form {
|
||||
}
|
||||
}
|
||||
|
||||
// Range
|
||||
input[type=range]::-webkit-slider-runnable-track {
|
||||
background: $ir-slider-bg;
|
||||
border: 1px solid $form-border;
|
||||
}
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
border: 1px solid $form-border;
|
||||
background: $button-bg;
|
||||
}
|
||||
input[type=range]:focus::-webkit-slider-runnable-track {
|
||||
background: $ir-slider-bg;
|
||||
}
|
||||
input[type=range]::-moz-range-track {
|
||||
background: $ir-slider-bg;
|
||||
border: 1px solid $form-border;
|
||||
}
|
||||
input[type=range]::-moz-range-thumb {
|
||||
border: 1px solid $form-border;
|
||||
background: $button-bg;
|
||||
}
|
||||
input[type=range]::-ms-fill-lower {
|
||||
background: $ir-slider-bg;
|
||||
border: 1px solid $form-border;
|
||||
}
|
||||
input[type=range]::-ms-fill-upper {
|
||||
background: $ir-slider-bg;
|
||||
border: 1px solid $form-border;
|
||||
}
|
||||
input[type=range]::-ms-thumb {
|
||||
border: 1px solid $form-border;
|
||||
background: $button-bg;
|
||||
}
|
||||
input[type=range]:focus::-ms-fill-lower {
|
||||
background: $ir-slider-bg;
|
||||
}
|
||||
input[type=range]:focus::-ms-fill-upper {
|
||||
background: $ir-slider-bg;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.grav-editor-resizer {
|
||||
|
||||
@@ -1,130 +1,83 @@
|
||||
$rangefield-slider-width-number: 230;
|
||||
$rangefield-slider-width: #{$rangefield-slider-width-number}px;
|
||||
$rangefield-slider-height: 1.35em;
|
||||
$rangefield-slider-border-width: 1px !default;
|
||||
$rangefield-slider-border-color: $form-border !default;
|
||||
$rangefield-background-slider: $form-field-bg;
|
||||
$rangefield-background-filled-slider: darken($form-field-bg, 15);
|
||||
$rangefield-thumb-width: 2.125em;
|
||||
$rangefield-thumb-height: 2.125em;
|
||||
$rangefield-thumb-radius: 50%;
|
||||
$rangefield-thumb-background: $button-bg;
|
||||
$rangefield-thumb-border: 1px solid darken($form-field-bg, 15);
|
||||
$rangefield-shadow-size: -8px;
|
||||
$rangefield-fit-thumb-in-slider: -8px;
|
||||
$ir_slider_width: 230px;
|
||||
$ir_slider_height: 20px;
|
||||
$ir_counter_width: 60px;
|
||||
$ir_margin: 10px 0;
|
||||
|
||||
@function makelongshadow($color, $size) {
|
||||
$val: 5px 0 0 $size $color;
|
||||
@for $i from 6 through $rangefield-slider-width-number {
|
||||
$val: #{$val}, #{$i}px 0 0 $size #{$color};
|
||||
}
|
||||
@return $val;
|
||||
}
|
||||
|
||||
input.rangefield[type="range"],
|
||||
input.rangefield[type="number"] {
|
||||
input[type=range] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
input.rangefield[type="number"] {
|
||||
height: $rangefield-thumb-height;
|
||||
width: ($rangefield-thumb-width * 2.5);
|
||||
vertical-align: top;
|
||||
}
|
||||
_:-ms-lang(x), input.rangefield[type="number"] { vertical-align: text-top; } // IE 10+, Edge
|
||||
|
||||
input.rangefield[type="range"] {
|
||||
vertical-align: middle;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
margin: $ir_margin;
|
||||
width: $ir_slider_width;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
height: 100%;
|
||||
min-height: $rangefield-thumb-height;
|
||||
overflow: hidden;
|
||||
width: $rangefield-slider-width;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
background: $rangefield-background-filled-slider;
|
||||
content: '';
|
||||
height: $rangefield-slider-height;
|
||||
pointer-events: none;
|
||||
border: $rangefield-slider-border-width solid $rangefield-slider-border-color;
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
height: $rangefield-thumb-height;
|
||||
width: $rangefield-thumb-width;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background: $rangefield-thumb-background;
|
||||
border-radius: $rangefield-thumb-radius;
|
||||
box-shadow: makelongshadow($rangefield-background-slider, $rangefield-shadow-size);
|
||||
margin-top: $rangefield-fit-thumb-in-slider;
|
||||
border: $rangefield-thumb-border;
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
width: $rangefield-slider-width;
|
||||
height: $rangefield-slider-height;
|
||||
background: $rangefield-background-slider;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
height: $rangefield-thumb-height - 0.5em;
|
||||
width: $rangefield-thumb-width - 0.5em;
|
||||
background: $rangefield-thumb-background;
|
||||
border-radius: $rangefield-thumb-radius;
|
||||
border: $rangefield-thumb-border;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&::-moz-range-progress {
|
||||
height: $rangefield-slider-height;
|
||||
background: $rangefield-background-filled-slider;
|
||||
border: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-color: transparent;
|
||||
border-radius: 0;
|
||||
border-width: 0;
|
||||
color: transparent;
|
||||
height: $rangefield-slider-height + 0.625em;
|
||||
width: $rangefield-slider-width;
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
height: $rangefield-thumb-height;
|
||||
width: $rangefield-thumb-width;
|
||||
margin-top: 0.05em;
|
||||
background: $rangefield-thumb-background;
|
||||
border-radius: $rangefield-thumb-radius;
|
||||
border: $rangefield-thumb-border;
|
||||
}
|
||||
|
||||
&::-ms-fill-lower {
|
||||
background: $rangefield-background-filled-slider;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&::-ms-fill-upper {
|
||||
background: $rangefield-background-slider;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&::-ms-tooltip {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
input[type=range]:focus {
|
||||
outline: none;
|
||||
}
|
||||
input[type=range]::-webkit-slider-runnable-track {
|
||||
width: $ir_slider_width;
|
||||
height: $ir_slider_height;
|
||||
cursor: pointer;
|
||||
animate: 0.2s;
|
||||
border-radius: 25px;
|
||||
}
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
height: 24px;
|
||||
width: 35px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
margin-top: -3px;
|
||||
}
|
||||
input[type=range]::-moz-focus-outer {
|
||||
border: 0;
|
||||
}
|
||||
input[type=range]::-moz-range-track {
|
||||
width: $ir_slider_width;
|
||||
height: $ir_slider_height;
|
||||
cursor: pointer;
|
||||
animate: 0.2s;
|
||||
border-radius: 25px;
|
||||
}
|
||||
input[type=range]::-moz-range-thumb {
|
||||
height: 24px;
|
||||
width: 35px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type=range]::-ms-track {
|
||||
width: $ir_slider_width;
|
||||
height: $ir_slider_height;
|
||||
cursor: pointer;
|
||||
animate: 0.2s;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
input[type=range]::-ms-fill-lower, input[type=range]::-ms-fill-upper {
|
||||
border-radius: 50px;
|
||||
}
|
||||
input[type=range]::-ms-thumb {
|
||||
height: 24px;
|
||||
width: 35px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type=range] ~ input[type=number].rangefield {
|
||||
background: none;
|
||||
display: inline-block;
|
||||
width: $ir_counter_width;
|
||||
text-align: right;
|
||||
border: 0;
|
||||
line-height: 16px;
|
||||
vertical-align: middle;
|
||||
padding: 0 0 0 5px;
|
||||
}
|
||||
|
||||
span.range-append {
|
||||
display: inline-block;
|
||||
line-height: 20px;
|
||||
vertical-align: middle;
|
||||
margin-left: -3px;
|
||||
}
|
||||
|
||||
@@ -37,4 +37,6 @@
|
||||
oninput="range_{{ field.name|e|replace('.', '_') }}.value = this.value"
|
||||
{% endif %}
|
||||
/>
|
||||
<span class="range-append">{{ field.append }}</span>
|
||||
|
||||
{% endblock append %}
|
||||
|
||||
Reference in New Issue
Block a user