mstdn.y-zu.org/mastodon
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #302 from Rintan/features/material-theme

Browse Source 
background-imageの参照問題を修正、コンパイルエラーの回避
This commit is contained in:
YorimiMochida 2020-12-06 08:03:56 +09:00 committed by GitHub
commit 6373205e2d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 90 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/javascript/styles/mastodon-material-dark/theme/_mixins.scss
View File

@ -61,6 +61,13 @@ $shadow-color-3: rgba(0,0,0,.12);
}
}
// check background-image value
@mixin bg-image {
@if $bg-image == none {
} @else { background-image: url($bg-image) }
}
@mixin icon-font-style {
@if $icon-font-style == filled { font-family: "Material Icons" }
@if $icon-font-style == outlined { font-family: "Material Icons Outlined" }
@ -151,35 +158,35 @@ $shadow-color-3: rgba(0,0,0,.12);
@font-face {
font-family: "Material Icons";
src: local("Material Icons"),
url("../fonts/MaterialIcons-Regular.ttf") format('truetype');
url(".../fonts/MaterialIcons-Regular.ttf") format('truetype');
}
}
@if $icon-font-style == outlined {
@font-face {
font-family: "Material Icons Outlined";
src: local("Material Icons Outlined"),
url("../fonts/MaterialIconsOutlined-Regular.otf") format('opentype');
url(".../fonts/MaterialIconsOutlined-Regular.otf") format('opentype');
}
}
@if $icon-font-style == round {
@font-face {
font-family: "Material Icons Round";
src: local("Material Icons"),
url("../fonts/MaterialIconsRound-Regular.otf") format('opentype');
url(".../fonts/MaterialIconsRound-Regular.otf") format('opentype');
}
}
@if $icon-font-style == sharp {
@font-face {
font-family: "Material Icons Sharp";
src: local("Material Icons Sharp"),
url("../fonts/MaterialIconsSharp-Regular.otf") format('opentype');
url(".../fonts/MaterialIconsSharp-Regular.otf") format('opentype');
}
}
@if $icon-font-style == two-tone {
@font-face {
font-family: "Material Icons Two Tone";
src: local("Material Icons Two Tone"),
url("../fonts/MaterialIconsTwoTone-Regular.otf") format('opentype');
url(".../fonts/MaterialIconsTwoTone-Regular.otf") format('opentype');
}
}
}

4
app/javascript/styles/mastodon-material-dark/theme/base_config.scss
View File

@ -1,7 +1,7 @@
@charset "UTF-8";
// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../config.scss".
// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../custom_config.scss".
// Color scheme
@ -32,7 +32,7 @@ $name-font-size: 15px; // mastodon default
// Background image
// If you want to use the local image, please put it in /mastodon-material
// If you want to use the local image, please put it in "../"
$bg-image: none;
//$bg-image: "./image.png";
//$bg-image: "https://example.com/img/image.png";

2
app/javascript/styles/mastodon-material-dark/theme/columns.scss
View File

@ -202,7 +202,7 @@
}
.columns-area {
background-image: url($bg-image);
@include bg-image;
background-size: contain;
}

17
app/javascript/styles/mastodon-material-light/theme/_mixins.scss
View File

@ -61,6 +61,13 @@ $shadow-color-3: rgba(0,0,0,.12);
}
}
// check background-image value
@mixin bg-image {
@if $bg-image == none {
} @else { background-image: url($bg-image) }
}
@mixin icon-font-style {
@if $icon-font-style == filled { font-family: "Material Icons" }
@if $icon-font-style == outlined { font-family: "Material Icons Outlined" }
@ -151,35 +158,35 @@ $shadow-color-3: rgba(0,0,0,.12);
@font-face {
font-family: "Material Icons";
src: local("Material Icons"),
url("../fonts/MaterialIcons-Regular.ttf") format('truetype');
url(".../fonts/MaterialIcons-Regular.ttf") format('truetype');
}
}
@if $icon-font-style == outlined {
@font-face {
font-family: "Material Icons Outlined";
src: local("Material Icons Outlined"),
url("../fonts/MaterialIconsOutlined-Regular.otf") format('opentype');
url(".../fonts/MaterialIconsOutlined-Regular.otf") format('opentype');
}
}
@if $icon-font-style == round {
@font-face {
font-family: "Material Icons Round";
src: local("Material Icons"),
url("../fonts/MaterialIconsRound-Regular.otf") format('opentype');
url(".../fonts/MaterialIconsRound-Regular.otf") format('opentype');
}
}
@if $icon-font-style == sharp {
@font-face {
font-family: "Material Icons Sharp";
src: local("Material Icons Sharp"),
url("../fonts/MaterialIconsSharp-Regular.otf") format('opentype');
url(".../fonts/MaterialIconsSharp-Regular.otf") format('opentype');
}
}
@if $icon-font-style == two-tone {
@font-face {
font-family: "Material Icons Two Tone";
src: local("Material Icons Two Tone"),
url("../fonts/MaterialIconsTwoTone-Regular.otf") format('opentype');
url(".../fonts/MaterialIconsTwoTone-Regular.otf") format('opentype');
}
}
}

4
app/javascript/styles/mastodon-material-light/theme/base_config.scss
View File

@ -1,7 +1,7 @@
@charset "UTF-8";
// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../config.scss".
// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../custom_config.scss".
// Color scheme
@ -32,7 +32,7 @@ $name-font-size: 15px; // mastodon default
// Background image
// If you want to use the local image, please put it in /mastodon-material
// If you want to use the local image, please put it in "../"
$bg-image: none;
//$bg-image: "./image.png";
//$bg-image: "https://example.com/img/image.png";

2
app/javascript/styles/mastodon-material-light/theme/columns.scss
View File

@ -202,7 +202,7 @@
}
.columns-area {
background-image: url($bg-image);
@include bg-image;
background-size: contain;
}

17
app/javascript/styles/material-black/theme/_mixins.scss
View File

@ -61,6 +61,13 @@ $shadow-color-3: rgba(0,0,0,.12);
}
}
// check background-image value
@mixin bg-image {
@if $bg-image == none {
} @else { background-image: url($bg-image) }
}
@mixin icon-font-style {
@if $icon-font-style == filled { font-family: "Material Icons" }
@if $icon-font-style == outlined { font-family: "Material Icons Outlined" }
@ -151,35 +158,35 @@ $shadow-color-3: rgba(0,0,0,.12);
@font-face {
font-family: "Material Icons";
src: local("Material Icons"),
url("../fonts/MaterialIcons-Regular.ttf") format('truetype');
url(".../fonts/MaterialIcons-Regular.ttf") format('truetype');
}
}
@if $icon-font-style == outlined {
@font-face {
font-family: "Material Icons Outlined";
src: local("Material Icons Outlined"),
url("../fonts/MaterialIconsOutlined-Regular.otf") format('opentype');
url(".../fonts/MaterialIconsOutlined-Regular.otf") format('opentype');
}
}
@if $icon-font-style == round {
@font-face {
font-family: "Material Icons Round";
src: local("Material Icons"),
url("../fonts/MaterialIconsRound-Regular.otf") format('opentype');
url(".../fonts/MaterialIconsRound-Regular.otf") format('opentype');
}
}
@if $icon-font-style == sharp {
@font-face {
font-family: "Material Icons Sharp";
src: local("Material Icons Sharp"),
url("../fonts/MaterialIconsSharp-Regular.otf") format('opentype');
url(".../fonts/MaterialIconsSharp-Regular.otf") format('opentype');
}
}
@if $icon-font-style == two-tone {
@font-face {
font-family: "Material Icons Two Tone";
src: local("Material Icons Two Tone"),
url("../fonts/MaterialIconsTwoTone-Regular.otf") format('opentype');
url(".../fonts/MaterialIconsTwoTone-Regular.otf") format('opentype');
}
}
}

4
app/javascript/styles/material-black/theme/base_config.scss
View File

@ -1,7 +1,7 @@
@charset "UTF-8";
// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../config.scss".
// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../custom_config.scss".
// Color scheme
@ -32,7 +32,7 @@ $name-font-size: 15px; // mastodon default
// Background image
// If you want to use the local image, please put it in /mastodon-material
// If you want to use the local image, please put it in "../"
$bg-image: none;
//$bg-image: "./image.png";
//$bg-image: "https://example.com/img/image.png";

2
app/javascript/styles/material-black/theme/columns.scss
View File

@ -202,7 +202,7 @@
}
.columns-area {
background-image: url($bg-image);
@include bg-image;
background-size: contain;
}

17
app/javascript/styles/material-dark/theme/_mixins.scss
View File

@ -61,6 +61,13 @@ $shadow-color-3: rgba(0,0,0,.12);
}
}
// check background-image value
@mixin bg-image {
@if $bg-image == none {
} @else { background-image: url($bg-image) }
}
@mixin icon-font-style {
@if $icon-font-style == filled { font-family: "Material Icons" }
@if $icon-font-style == outlined { font-family: "Material Icons Outlined" }
@ -151,35 +158,35 @@ $shadow-color-3: rgba(0,0,0,.12);
@font-face {
font-family: "Material Icons";
src: local("Material Icons"),
url("../fonts/MaterialIcons-Regular.ttf") format('truetype');
url(".../fonts/MaterialIcons-Regular.ttf") format('truetype');
}
}
@if $icon-font-style == outlined {
@font-face {
font-family: "Material Icons Outlined";
src: local("Material Icons Outlined"),
url("../fonts/MaterialIconsOutlined-Regular.otf") format('opentype');
url(".../fonts/MaterialIconsOutlined-Regular.otf") format('opentype');
}
}
@if $icon-font-style == round {
@font-face {
font-family: "Material Icons Round";
src: local("Material Icons"),
url("../fonts/MaterialIconsRound-Regular.otf") format('opentype');
url(".../fonts/MaterialIconsRound-Regular.otf") format('opentype');
}
}
@if $icon-font-style == sharp {
@font-face {
font-family: "Material Icons Sharp";
src: local("Material Icons Sharp"),
url("../fonts/MaterialIconsSharp-Regular.otf") format('opentype');
url(".../fonts/MaterialIconsSharp-Regular.otf") format('opentype');
}
}
@if $icon-font-style == two-tone {
@font-face {
font-family: "Material Icons Two Tone";
src: local("Material Icons Two Tone"),
url("../fonts/MaterialIconsTwoTone-Regular.otf") format('opentype');
url(".../fonts/MaterialIconsTwoTone-Regular.otf") format('opentype');
}
}
}

4
app/javascript/styles/material-dark/theme/base_config.scss
View File

@ -1,7 +1,7 @@
@charset "UTF-8";
// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../config.scss".
// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../custom_config.scss".
// Color scheme
@ -32,7 +32,7 @@ $name-font-size: 15px; // mastodon default
// Background image
// If you want to use the local image, please put it in /mastodon-material
// If you want to use the local image, please put it in "../"
$bg-image: none;
//$bg-image: "./image.png";
//$bg-image: "https://example.com/img/image.png";

2
app/javascript/styles/material-dark/theme/columns.scss
View File

@ -202,7 +202,7 @@
}
.columns-area {
background-image: url($bg-image);
@include bg-image;
background-size: contain;
}

17
app/javascript/styles/material-light/theme/_mixins.scss
View File

@ -61,6 +61,13 @@ $shadow-color-3: rgba(0,0,0,.12);
}
}
// check background-image value
@mixin bg-image {
@if $bg-image == none {
} @else { background-image: url($bg-image) }
}
@mixin icon-font-style {
@if $icon-font-style == filled { font-family: "Material Icons" }
@if $icon-font-style == outlined { font-family: "Material Icons Outlined" }
@ -151,35 +158,35 @@ $shadow-color-3: rgba(0,0,0,.12);
@font-face {
font-family: "Material Icons";
src: local("Material Icons"),
url("../fonts/MaterialIcons-Regular.ttf") format('truetype');
url(".../fonts/MaterialIcons-Regular.ttf") format('truetype');
}
}
@if $icon-font-style == outlined {
@font-face {
font-family: "Material Icons Outlined";
src: local("Material Icons Outlined"),
url("../fonts/MaterialIconsOutlined-Regular.otf") format('opentype');
url(".../fonts/MaterialIconsOutlined-Regular.otf") format('opentype');
}
}
@if $icon-font-style == round {
@font-face {
font-family: "Material Icons Round";
src: local("Material Icons"),
url("../fonts/MaterialIconsRound-Regular.otf") format('opentype');
url(".../fonts/MaterialIconsRound-Regular.otf") format('opentype');
}
}
@if $icon-font-style == sharp {
@font-face {
font-family: "Material Icons Sharp";
src: local("Material Icons Sharp"),
url("../fonts/MaterialIconsSharp-Regular.otf") format('opentype');
url(".../fonts/MaterialIconsSharp-Regular.otf") format('opentype');
}
}
@if $icon-font-style == two-tone {
@font-face {
font-family: "Material Icons Two Tone";
src: local("Material Icons Two Tone"),
url("../fonts/MaterialIconsTwoTone-Regular.otf") format('opentype');
url(".../fonts/MaterialIconsTwoTone-Regular.otf") format('opentype');
}
}
}

4
app/javascript/styles/material-light/theme/base_config.scss
View File

@ -1,7 +1,7 @@
@charset "UTF-8";
// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../config.scss".
// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../custom_config.scss".
// Color scheme
@ -32,7 +32,7 @@ $name-font-size: 15px; // mastodon default
// Background image
// If you want to use the local image, please put it in /mastodon-material
// If you want to use the local image, please put it in "../"
$bg-image: none;
//$bg-image: "./image.png";
//$bg-image: "https://example.com/img/image.png";

2
app/javascript/styles/material-light/theme/columns.scss
View File

@ -202,7 +202,7 @@
}
.columns-area {
background-image: url($bg-image);
@include bg-image;
background-size: contain;
}

17
app/javascript/styles/plus/theme/_mixins.scss
View File

@ -61,6 +61,13 @@ $shadow-color-3: rgba(0,0,0,.12);
}
}
// check background-image value
@mixin bg-image {
@if $bg-image == none {
} @else { background-image: url($bg-image) }
}
@mixin icon-font-style {
@if $icon-font-style == filled { font-family: "Material Icons" }
@if $icon-font-style == outlined { font-family: "Material Icons Outlined" }
@ -151,35 +158,35 @@ $shadow-color-3: rgba(0,0,0,.12);
@font-face {
font-family: "Material Icons";
src: local("Material Icons"),
url("../fonts/MaterialIcons-Regular.ttf") format('truetype');
url(".../fonts/MaterialIcons-Regular.ttf") format('truetype');
}
}
@if $icon-font-style == outlined {
@font-face {
font-family: "Material Icons Outlined";
src: local("Material Icons Outlined"),
url("../fonts/MaterialIconsOutlined-Regular.otf") format('opentype');
url(".../fonts/MaterialIconsOutlined-Regular.otf") format('opentype');
}
}
@if $icon-font-style == round {
@font-face {
font-family: "Material Icons Round";
src: local("Material Icons"),
url("../fonts/MaterialIconsRound-Regular.otf") format('opentype');
url(".../fonts/MaterialIconsRound-Regular.otf") format('opentype');
}
}
@if $icon-font-style == sharp {
@font-face {
font-family: "Material Icons Sharp";
src: local("Material Icons Sharp"),
url("../fonts/MaterialIconsSharp-Regular.otf") format('opentype');
url(".../fonts/MaterialIconsSharp-Regular.otf") format('opentype');
}
}
@if $icon-font-style == two-tone {
@font-face {
font-family: "Material Icons Two Tone";
src: local("Material Icons Two Tone"),
url("../fonts/MaterialIconsTwoTone-Regular.otf") format('opentype');
url(".../fonts/MaterialIconsTwoTone-Regular.otf") format('opentype');
}
}
}

4
app/javascript/styles/plus/theme/base_config.scss
View File

@ -1,7 +1,7 @@
@charset "UTF-8";
// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../config.scss".
// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../custom_config.scss".
// Color scheme
@ -32,7 +32,7 @@ $name-font-size: 15px; // mastodon default
// Background image
// If you want to use the local image, please put it in /mastodon-material
// If you want to use the local image, please put it in "../"
$bg-image: none;
//$bg-image: "./image.png";
//$bg-image: "https://example.com/img/image.png";

2
app/javascript/styles/plus/theme/columns.scss
View File

@ -202,7 +202,7 @@
}
.columns-area {
background-image: url($bg-image);
@include bg-image;
background-size: contain;
}