mirror of
https://github.com/mediacms-io/mediacms.git
synced 2025-11-21 13:57:57 -05:00
Frontent dev env (#247)
* Added frontend development files/environment * More items-categories related removals * Improvements in pages templates (inc. static pages) * Improvements in video player * Added empty home page message + cta * Updates in media, playlist and management pages * Improvements in material icons font loading * Replaced media & playlists links in frontend dev-env * frontend package version update * chnaged frontend dev url port * static files update * Changed default position of theme switcher * enabled frontend docker container
This commit is contained in:
Yiannis Stergiou
GitHub
587
frontend/src/static/css/AddMediaPage.scss
Executable file
587
frontend/src/static/css/AddMediaPage.scss
Executable file
@@ -0,0 +1,587 @@
|
||||
@use "sass:math";
|
||||
@import './includes/_variables.scss';
|
||||
|
||||
dialog {
|
||||
background-color: var(--add-media-page-tmplt-dialog-bg-color);
|
||||
}
|
||||
|
||||
.media-uploader {
|
||||
background-color: var(--add-media-page-tmplt-uploader-bg-color);
|
||||
}
|
||||
|
||||
.media-dropzone {
|
||||
background-color: var(--add-media-page-tmplt-dropzone-bg-color);
|
||||
}
|
||||
|
||||
.media-drag-drop-content-inner {
|
||||
color: var(--add-media-page-tmplt-drag-drop-inner-text-color);
|
||||
}
|
||||
|
||||
.media-upload-item-spinner {
|
||||
i {
|
||||
color: var(--add-media-page-tmplt-upload-item-spiner-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.media-upload-item-top-actions,
|
||||
.media-upload-item-bottom-actions {
|
||||
> * {
|
||||
color: var(--add-media-page-tmplt-upload-item-actions-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.media-upload-item-upload-size {
|
||||
color: var(--add-media-page-tmplt-upload-item-actions-text-color);
|
||||
}
|
||||
|
||||
.media-drag-drop-inner,
|
||||
.media-upload-item-thumb,
|
||||
.media-upload-item-spinner,
|
||||
.media-upload-item-name .media-upload-item-filename-input,
|
||||
.media-upload-item-bottom-actions > *,
|
||||
.retry-media-upload-item,
|
||||
.media-upload-item-progress-bar-container {
|
||||
background-color: var(--sidebar-bg-color);
|
||||
}
|
||||
|
||||
@-moz-keyframes spin {
|
||||
from {
|
||||
-moz-transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
-moz-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
from {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.media-uploader-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 1324px;
|
||||
padding: 8px 8px;
|
||||
margin: 0 auto 1em auto;
|
||||
}
|
||||
|
||||
.pre-upload-msg {
|
||||
display: block;
|
||||
margin: 16px 0;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.media-uploader {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 0.75rem;
|
||||
width: 100%;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
pointer-events: none;
|
||||
box-shadow: inset 0px 4px 8px -3px rgba(17, 17, 17, 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
.media-uploader-top-wrap {
|
||||
position: relative;
|
||||
padding: 0 0 1.5em;
|
||||
h1 {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 1.25em;
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.media-uploader-bottom-wrap {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.media-uploader-top-left-wrap,
|
||||
.media-uploader-top-right-wrap {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.media-uploader-bottom-left-wrap,
|
||||
.media-uploader-bottom-right-wrap {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.media-uploader-bottom-left-wrap {
|
||||
min-height: 225px;
|
||||
height: 0;
|
||||
padding-top: math.div(3, 4) * 100%;
|
||||
@media screen and (min-width: 480px) {
|
||||
padding-top: math.div(5, 8) * 100%;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
padding-top: math.div(9, 16) * 100%;
|
||||
}
|
||||
@media screen and (min-width: 1024px) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.media-uploader-bottom-right-wrap {
|
||||
float: right;
|
||||
@media screen and (min-width: 1024px) {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
dialog {
|
||||
padding: 32px 24px 16px;
|
||||
border: 0;
|
||||
box-shadow: rgba(#000, 0.14) 0px 16px 24px 2px, rgba(#000, 0.12) 0px 6px 30px 5px, rgba(#000, 0.4) 0px 8px 10px -5px;
|
||||
display: none;
|
||||
&[open] {
|
||||
display: block;
|
||||
}
|
||||
&::backdrop {
|
||||
background-color: rgba(#000, 0.5);
|
||||
}
|
||||
.qq-dialog-buttons {
|
||||
padding-top: 16px;
|
||||
text-align: center;
|
||||
button {
|
||||
font-size: 14px;
|
||||
font-stretch: 100%;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0.007px;
|
||||
text-align: center;
|
||||
padding: 10px 16px;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
.qq-dialog-message-selector {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.media-drag-drop-wrap {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 0.75rem;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
@media screen and (min-width: 1024px) {
|
||||
position: relative;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.media-drag-drop-inner {
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.media-drag-drop-content {
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.media-drag-drop-content-inner {
|
||||
position: relative;
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
padding-bottom: 1rem;
|
||||
font-family: Arial, sans-serif;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
&:nth-child(2) {
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
}
|
||||
.material-icons {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 4em;
|
||||
line-height: 1;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.browse-files-btn-wrap {
|
||||
margin-top: 0.75rem;
|
||||
font-size: 14px;
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: 0.75rem 1rem;
|
||||
color: #fff;
|
||||
border-radius: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-dropzone {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.media-upload-items-list {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 0 0.75rem 0.75rem 0.75rem;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
max-height: 80vh;
|
||||
list-style: none;
|
||||
@media screen and (min-width: 1024px) {
|
||||
min-height: 320px;
|
||||
}
|
||||
li {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 100%;
|
||||
padding: 0.75rem 0 0;
|
||||
margin: 0 0 1.5rem;
|
||||
@media screen and (min-width: 1024px) {
|
||||
padding: 0.75rem 0.75rem 0;
|
||||
}
|
||||
&:hover {
|
||||
}
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -0.5rem * 0.75;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: block;
|
||||
height: 1px;
|
||||
@media screen and (min-width: 1024px) {
|
||||
left: 0.75rem;
|
||||
right: 0.75rem;
|
||||
}
|
||||
background-color: rgba(17, 17, 17, 0.06);
|
||||
}
|
||||
&:first-child {
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$thumbnail-height: 100px;
|
||||
$thumbnail-height-small: 80px;
|
||||
.media-upload-item-thumb {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
width: $thumbnail-height-small;
|
||||
height: $thumbnail-height-small;
|
||||
@media screen and (min-width: 480px) {
|
||||
width: $thumbnail-height;
|
||||
height: $thumbnail-height;
|
||||
}
|
||||
overflow: hidden;
|
||||
border-radius: 1px;
|
||||
.media-upload-items-list li:hover & {
|
||||
}
|
||||
img {
|
||||
height: 100%;
|
||||
min-width: 100%;
|
||||
width: auto;
|
||||
.qq-upload-fail & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-upload-item-spinner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: $thumbnail-height-small;
|
||||
height: $thumbnail-height-small;
|
||||
line-height: $thumbnail-height-small - 2;
|
||||
@media screen and (min-width: 480px) {
|
||||
width: $thumbnail-height;
|
||||
height: $thumbnail-height;
|
||||
line-height: $thumbnail-height - 2;
|
||||
}
|
||||
text-align: center;
|
||||
i {
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
font-size: 1.5em;
|
||||
|
||||
-webkit-animation-name: spin;
|
||||
-webkit-animation-duration: 2s;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-name: spin;
|
||||
-moz-animation-duration: 2s;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-name: spin;
|
||||
-ms-animation-duration: 2s;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-name: spin;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
}
|
||||
|
||||
.media-upload-item-details {
|
||||
position: relative;
|
||||
display: block;
|
||||
min-height: $thumbnail-height-small;
|
||||
margin: 0 auto 0 ($thumbnail-height-small + 16);
|
||||
@media screen and (min-width: 480px) {
|
||||
min-height: $thumbnail-height;
|
||||
margin: 0 auto 0 ($thumbnail-height + 16);
|
||||
}
|
||||
}
|
||||
|
||||
$media-upload-item-name-font-size: 14px;
|
||||
$media-upload-item-name-line-height: 20px;
|
||||
.media-upload-item-name {
|
||||
$max-lines: 2;
|
||||
position: relative;
|
||||
font-size: $media-upload-item-name-font-size;
|
||||
line-height: $media-upload-item-name-line-height;
|
||||
/* Only for non-webkit */
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: $max-lines;
|
||||
-webkit-box-orient: vertical;
|
||||
/* Fallback for non-webkit */
|
||||
max-height: $max-lines * $media-upload-item-name-line-height;
|
||||
display: block;
|
||||
padding-right: 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-right: 8rem;
|
||||
font-weight: 500;
|
||||
&.qq-editable {
|
||||
margin-right: 10rem;
|
||||
}
|
||||
> span {
|
||||
@include multiline_texts_excerpt(
|
||||
$font-size: $media-upload-item-name-font-size,
|
||||
$line-height: $media-upload-item-name-line-height,
|
||||
$lines-to-show: $max-lines,
|
||||
$bg-color: transparent
|
||||
);
|
||||
}
|
||||
.media-upload-item-filename {
|
||||
}
|
||||
.media-upload-item-filename-input {
|
||||
width: 100%;
|
||||
height: 1.5 * $media-upload-item-name-line-height;
|
||||
line-height: 1.5 * $media-upload-item-name-line-height;
|
||||
padding: 0 0.5rem;
|
||||
display: none;
|
||||
&.qq-editing {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.view-uploaded-media-link {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.media-upload-item-top-actions,
|
||||
.media-upload-item-bottom-actions {
|
||||
> * {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
}
|
||||
|
||||
&.view-uploaded-media {
|
||||
}
|
||||
}
|
||||
.material-icons {
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.media-upload-item-top-actions {
|
||||
position: absolute;
|
||||
// top:-0.25rem;
|
||||
top: 0;
|
||||
right: 0;
|
||||
> * {
|
||||
padding: 0.125rem 0.25rem;
|
||||
font-size: 13px;
|
||||
&:not(.qq-hide) ~ * {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
.material-icons {
|
||||
font-size: 15px;
|
||||
line-height: 1em;
|
||||
vertical-align: middle;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
}
|
||||
.filename-edit {
|
||||
display: none;
|
||||
&.qq-editable {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-upload-item-bottom-actions {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
float: left;
|
||||
> * {
|
||||
float: left;
|
||||
line-height: 2;
|
||||
padding: 0 0.5rem 0 0.25rem;
|
||||
margin-top: 0.5rem;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
border-radius: 1px;
|
||||
&:not(.qq-hide) ~ * {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
.material-icons {
|
||||
font-size: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
.retry-media-upload-item {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 4rem;
|
||||
line-height: 1.75rem;
|
||||
margin-top: -0.5 * 1.75rem;
|
||||
margin-left: -2rem;
|
||||
padding: 0 0.25rem 0 0;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
border: 0;
|
||||
border-radius: 1px;
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
.material-icons {
|
||||
font-size: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.media-upload-item-main {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.media-upload-item-progress-bar-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
margin-bottom: 0.5rem;
|
||||
overflow: hidden;
|
||||
border-radius: 1px;
|
||||
.media-upload-item-progress-bar {
|
||||
position: relative;
|
||||
height: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.media-upload-item-details-bottom {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
float: left;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.media-upload-item-upload-size {
|
||||
position: relative;
|
||||
width: auto;
|
||||
float: left;
|
||||
font-size: 12px;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.media-upload-item-status-text {
|
||||
position: relative;
|
||||
width: auto;
|
||||
float: right;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
font-family: Arial, sans-serif;
|
||||
.qq-upload-fail & {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.qq-hide {
|
||||
display: none;
|
||||
}
|
||||
0
frontend/src/static/css/_extra.css
Executable file
0
frontend/src/static/css/_extra.css
Executable file
343
frontend/src/static/css/config/_dark_theme.scss
Executable file
343
frontend/src/static/css/config/_dark_theme.scss
Executable file
@@ -0,0 +1,343 @@
|
||||
body.dark_theme {
|
||||
--body-text-color: rgba(255, 255, 255, 0.88);
|
||||
--body-bg-color: #121212;
|
||||
|
||||
--hr-color: #2a2a2a;
|
||||
|
||||
--dotted-outline-color: rgba(255, 255, 255, 0.4);
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--input-color: hsla(0, 0%, 100%, 0.88);
|
||||
--input-bg-color: hsla(0, 0%, 0%, 0.55);
|
||||
--input-border-color: hsl(0, 0%, 19%);
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--header-bg-color: #272727;
|
||||
|
||||
--header-circle-button-color: #fff;
|
||||
|
||||
--header-popup-menu-color: #fff;
|
||||
--header-popup-menu-icon-color: rgb(144, 144, 144);
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--sidebar-bg-color: #1c1c1c;
|
||||
|
||||
--sidebar-nav-border-color: rgba(255, 255, 255, 0.1);
|
||||
|
||||
--sidebar-nav-item-text-color: #fff;
|
||||
--sidebar-nav-item-icon-color: rgb(144, 144, 144);
|
||||
|
||||
--sidebar-bottom-link-color: rgba(255, 255, 255, 0.88);
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--spinner-loader-color: rgba(255, 255, 255, 0.74);
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--nav-menu-active-item-bg-color: rgba(255, 255, 255, 0.1);
|
||||
|
||||
--nav-menu-item-hover-bg-color: rgba(255, 255, 255, 0.1);
|
||||
|
||||
--in-popup-nav-menu-item-hover-bg-color: rgba(255, 255, 255, 0.1);
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--search-field-input-text-color: rgba(255, 255, 255, 0.88);
|
||||
--search-field-input-bg-color: #121212; // darken( #272727, 8.25% )
|
||||
--search-field-input-border-color: #303030; // lighten( #272727, 3.5% )
|
||||
|
||||
--search-field-submit-text-color: rgba(255, 255, 255, 0.5); // lighten(#66b1c3, 15%)
|
||||
|
||||
--search-field-submit-bg-color: rgba(255, 255, 255, 0.08); // lighten( #272727, 6.75% )
|
||||
--search-field-submit-border-color: #2e2e2e; // lighten( #272727, 2.75% )
|
||||
|
||||
--search-field-submit-hover-bg-color: rgba(255, 255, 255, 0.08);
|
||||
--search-field-submit-hover-border-color: #2e2e2e;
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--search-results-item-content-link-title-text-color: rgba(255, 255, 255, 0.88);
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--logged-in-user-thumb-bg-color: rgba(255, 255, 255, 0.14);
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--popup-bg-color: #242424;
|
||||
|
||||
--popup-hr-bg-color: rgba(255, 255, 255, 0.08);
|
||||
|
||||
--popup-top-text-color: #fff;
|
||||
--popup-top-bg-color: rgba(136, 136, 136, 0.4);
|
||||
|
||||
--popup-msg-title-text-color: rgba(255, 255, 255, 0.88);
|
||||
--popup-msg-main-text-color: rgba(255, 255, 255, 0.5);
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--comments-textarea-wrapper-border-color: #898989;
|
||||
--comments-textarea-wrapper-after-bg-color: #fff;
|
||||
|
||||
--comments-textarea-text-color: #fff;
|
||||
--comments-textarea-text-placeholder-color: #898989;
|
||||
|
||||
--comments-list-inner-border-color: rgba(255, 255, 255, 0.08);
|
||||
|
||||
--comment-author-text-color: rgba(255, 255, 255, 0.88);
|
||||
|
||||
--comment-date-text-color: #888;
|
||||
--comment-date-hover-text-color: #fff;
|
||||
|
||||
--comment-text-color: rgba(255, 255, 255, 0.88);
|
||||
|
||||
--comment-actions-material-icon-text-color: rgba(255, 255, 255, 0.74);
|
||||
|
||||
--comment-actions-likes-num-text-color: rgba(255, 255, 255, 0.5);
|
||||
|
||||
--comment-actions-reply-button-text-color: rgba(255, 255, 255, 0.5);
|
||||
--comment-actions-reply-button-hover-text-color: rgba(255, 255, 255, 0.74);
|
||||
|
||||
--comment-actions-cancel-removal-button-text-color: rgba(255, 255, 255, 0.5);
|
||||
--comment-actions-cancel-removal-button-hover-text-color: rgba(255, 255, 255, 0.74);
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--item-bg-color: #121212;
|
||||
|
||||
--item-title-text-color: rgba(255, 255, 255, 0.88);
|
||||
|
||||
--item-thumb-bg-color: var(--sidebar-bg-color);
|
||||
|
||||
--item-meta-text-color: #888;
|
||||
--item-meta-link-text-color: var(--item-text-color);
|
||||
--item-meta-link-hover-text-color: rgba(255, 255, 255, 0.74);
|
||||
|
||||
--profile-page-item-content-title-bg-color: #121212;
|
||||
|
||||
--playlist-item-main-view-full-link-text-color: rgb(170, 170, 170);
|
||||
--playlist-item-main-view-full-link-hover-text-color: #fff;
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--item-list-load-more-text-color: #888;
|
||||
--item-list-load-more-hover-text-color: rgba(255, 255, 255, 0.74);
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--media-list-row-border-color: rgba(255, 255, 255, 0.08);
|
||||
--media-list-header-title-link-text-color: rgba(255, 255, 255, 0.5);
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--playlist-form-title-focused-bg-color: rgba(255, 255, 255, 0.88);
|
||||
|
||||
--playlist-privacy-border-color: #888;
|
||||
|
||||
--playlist-form-cancel-button-text-color: rgba(255, 255, 255, 0.5);
|
||||
--playlist-form-cancel-button-hover-text-color: rgba(255, 255, 255, 0.74);
|
||||
|
||||
--playlist-form-field-text-color: #fff;
|
||||
--playlist-form-field-border-color: #888;
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--playlist-save-popup-text-color: rgba(255, 255, 255, 0.88);
|
||||
--playlist-save-popup-border-color: rgba(255, 255, 255, 0.1);
|
||||
|
||||
--playlist-save-popup-create-icon-text-color: #909090;
|
||||
--playlist-save-popup-create-focus-bg-color: rgba(255, 255, 255, 0.14);
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--playlist-view-header-bg-color: #252525;
|
||||
|
||||
--playlist-view-header-toggle-text-color: #fff;
|
||||
|
||||
--playlist-view-header-toggle-bg-color: #252525;
|
||||
|
||||
--playlist-view-title-link-text-color: rgba(255, 255, 255, 0.88);
|
||||
|
||||
--playlist-view-meta-text-color: rgb(238, 238, 238);
|
||||
--playlist-view-meta-link-color: #fff;
|
||||
--playlist-view-meta-link-hover-text-color: #fff;
|
||||
|
||||
--playlist-view-status-text-color: rgba(255, 255, 255, 0.6);
|
||||
--playlist-view-status-bg-color: rgba(255, 255, 255, 0.1);
|
||||
|
||||
--playlist-view-status-icon-text-color: rgba(255, 255, 255, 0.6);
|
||||
|
||||
--playlist-view-actions-bg-color: #252525;
|
||||
|
||||
--playlist-view-media-bg-color: var(--sidebar-bg-color);
|
||||
|
||||
--playlist-view-media-order-number-color: rgb(136, 136, 136);
|
||||
|
||||
--playlist-view-item-title-text-color: #fff;
|
||||
|
||||
--playlist-view-item-author-text-color: #fff;
|
||||
|
||||
--playlist-view-item-author-bg-color: var(--sidebar-bg-color);
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--profile-page-bg-color: var(--body-bg-color);
|
||||
|
||||
--profile-page-header-bg-color: #1a1a1a;
|
||||
|
||||
--profile-page-info-videos-number-text-color: #888;
|
||||
|
||||
--profile-page-nav-link-text-color: #888;
|
||||
--profile-page-nav-link-hover-text-color: rgba(255, 255, 255, 0.88);
|
||||
|
||||
--profile-page-nav-link-active-text-color: rgba(255, 255, 255, 0.88);
|
||||
--profile-page-nav-link-active-after-bg-color: #888;
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--add-media-page-tmplt-dialog-bg-color: #242424;
|
||||
--add-media-page-tmplt-uploader-bg-color: #242424;
|
||||
--add-media-page-tmplt-dropzone-bg-color: rgba(28, 28, 28, 0.5);
|
||||
--add-media-page-tmplt-drag-drop-inner-text-color: rgba(255, 255, 255, 0.5);
|
||||
--add-media-page-tmplt-upload-item-spiner-text-color: rgba(255, 255, 255, 0.4);
|
||||
--add-media-page-tmplt-upload-item-actions-text-color: rgba(255, 255, 255, 0.5);
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--add-media-page-qq-gallery-upload-button-text-color: rgba(255, 255, 255, 0.528);
|
||||
--add-media-page-qq-gallery-upload-button-icon-text-color: rgba(255, 255, 255, 0.528);
|
||||
|
||||
--add-media-page-qq-gallery-upload-button-hover-text-color: rgba(255, 255, 255, 0.88);
|
||||
--add-media-page-qq-gallery-upload-button-hover-icon-text-color: rgba(255, 255, 255, 0.88);
|
||||
|
||||
--add-media-page-qq-gallery-upload-button-focus-text-color: rgba(255, 255, 255, 0.704);
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--playlist-page-bg-color: #1a1a1a;
|
||||
--playlist-page-details-text-color: rgb(170, 170, 170);
|
||||
--playlist-page-thumb-bg-color: #272727;
|
||||
--playlist-page-title-link-text-color: #fff;
|
||||
|
||||
--playlist-page-actions-circle-icon-text-color: #1a1a1a;
|
||||
--playlist-page-actions-circle-icon-bg-color: inherit; // TODO: Check this value.
|
||||
|
||||
--playlist-page-actions-nav-item-button-text-color: rgba(255, 255, 255, 0.88);
|
||||
|
||||
--playlist-page-actions-popup-message-bottom-cancel-button-text-color: rgba(255, 255, 255, 0.5);
|
||||
--playlist-page-actions-popup-message-bottom-cancel-button-hover-text-color: rgba(255, 255, 255, 0.74);
|
||||
--playlist-page-actions-popup-message-bottom-cancel-button-icon-hover-text-color: rgba(255, 255, 255, 0.74);
|
||||
|
||||
--playlist-page-status-text-color: rgba(255, 255, 255, 0.6);
|
||||
--playlist-page-status-bg-color: rgba(255, 255, 255, 0.1);
|
||||
|
||||
--playlist-page-status-icon-text-color: rgba(255, 255, 255, 0.4);
|
||||
|
||||
--playlist-page-author-border-top-color: rgba(255, 255, 255, 0.1);
|
||||
--playlist-page-author-name-link-color: rgba(255, 255, 255, 0.88);
|
||||
|
||||
--playlist-page-author-edit-playlist-icon-button-text-color: rgb(170, 170, 170);
|
||||
|
||||
--playlist-page-author-edit-playlist-icon-button-bg-color: #252525;
|
||||
|
||||
--playlist-page-author-edit-playlist-icon-button-active-text-color: rgba(255, 255, 255, 0.88);
|
||||
|
||||
--playlist-page-author-edit-playlist-form-wrap-text-color: rgba(255, 255, 255, 0.88);
|
||||
--playlist-page-author-edit-playlist-form-wrap-bg-color: #242424;
|
||||
|
||||
--playlist-page-author-edit-playlist-form-wrap-border-color: rgba(255, 255, 255, 0.1);
|
||||
|
||||
--playlist-page-author-edit-playlist-form-wrap-title-circle-icon-hover-text-color: rgba(255, 255, 255, 0.88);
|
||||
|
||||
--playlist-page-author-edit-playlist-author-thumb-text-color: #fff;
|
||||
--playlist-page-author-edit-playlist-author-thumb-bg-color: #272727;
|
||||
|
||||
--playlist-page-details-bg-color: #252525;
|
||||
|
||||
--playlist-page-video-list-bg-color: #1c1c1c;
|
||||
|
||||
--playlist-page-video-list-item-title-bg-color: #1c1c1c;
|
||||
|
||||
--playlist-page-video-list-item-hover-bg-color: #333;
|
||||
|
||||
--playlist-page-video-list-item-title-hover-bg-color: #333;
|
||||
|
||||
--playlist-page-video-list-item-after-bg-color: rgba(255, 255, 255, 0.1);
|
||||
--playlist-page-video-list-item-order-text-color: rgb(170, 170, 170);
|
||||
|
||||
--playlist-page-video-list-item-options-icon-hover-color: rgba(255, 255, 255, 0.88);
|
||||
|
||||
--playlist-page-video-list-item-options-popup-cancel-removal-button-text-color: rgba(255, 255, 255, 0.5);
|
||||
--playlist-page-video-list-item-options-popup-cancel-removal-button-hover-text-color: rgba(255, 255, 255, 0.74);
|
||||
|
||||
--playlist-page-video-list-item-options-popup-cancel-removal-button-hover-icon-text-color: rgba(255, 255, 255, 0.74);
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--media-author-actions-popup-bottom-cancel-removal-button-text-color: rgba(255, 255, 255, 0.5);
|
||||
--media-author-actions-popup-bottom-cancel-removal-button-hover-text-color: rgba(255, 255, 255, 0.74);
|
||||
--media-author-actions-popup-bottom-cancel-removal-button-hover-icon-text-color: rgba(255, 255, 255, 0.74);
|
||||
|
||||
--profile-banner-wrap-popup-bottom-cancel-removal-button-text-color: rgba(255, 255, 255, 0.5);
|
||||
--profile-banner-wrap-popup-bottom-cancel-removal-button-hover-text-color: rgba(255, 255, 255, 0.74);
|
||||
--profile-banner-wrap-popup-bottom-cancel-removal-button-hover-icon-text-color: rgba(255, 255, 255, 0.74);
|
||||
|
||||
--media-title-banner-border-color: rgba(255, 255, 255, 0.08);
|
||||
--media-title-labels-area-text-color: rgba(255, 255, 255, 0.6);
|
||||
--media-title-labels-area-bg-color: rgba(255, 255, 255, 0.08);
|
||||
--media-title-views-text-color: rgb(136, 136, 136);
|
||||
|
||||
--media-actions-not-popup-circle-icon-focus-bg-color: rgba(255, 255, 255, 0.07);
|
||||
--media-actions-not-popup-circle-icon-active-bg-color: rgba(255, 255, 255, 0.14);
|
||||
--media-actions-like-before-border-color: rgba(255, 255, 255, 0.5);
|
||||
--media-actions-share-title-text-color: rgba(255, 255, 255, 0.88);
|
||||
--media-actions-share-options-nav-button-text-color: rgba(255, 255, 255, 0.5);
|
||||
--media-actions-share-options-link-text-color: rgba(255, 255, 255, 0.88);
|
||||
--media-actions-share-copy-field-border-color: rgb(41, 41, 41);
|
||||
--media-actions-share-copy-field-bg-color: rgb(28, 28, 28);
|
||||
--media-actions-share-copy-field-input-text-color: rgba(255, 255, 255, 0.88);
|
||||
--media-actions-more-options-popup-bg-color: #242424;
|
||||
--media-actions-more-options-popup-nav-link-text-color: rgba(255, 255, 255, 0.88);
|
||||
--media-actions-share-fullscreen-popup-main-bg-color: #242424;
|
||||
|
||||
--report-form-title-text-color: rgba(255, 255, 255, 0.88);
|
||||
--report-form-field-label-text-color: rgba(255, 255, 255, 0.88);
|
||||
--report-form-field-input-text-color: rgba(255, 255, 255, 0.88);
|
||||
--report-form-field-input-border-color: rgb(41, 41, 41);
|
||||
--report-form-field-input-bg-color: rgb(28, 28, 28);
|
||||
--report-form-help-text-color: rgb(136, 136, 136);
|
||||
|
||||
--form-actions-bottom-border-top-color: rgba(255, 255, 255, 0.08);
|
||||
|
||||
--media-author-banner-name-text-color: rgba(255, 255, 255, 0.88);
|
||||
--media-author-banner-date-text-color: rgba(255, 255, 255, 0.6);
|
||||
|
||||
--media-content-banner-border-color: rgba(255, 255, 255, 0.08);
|
||||
|
||||
--share-embed-inner-on-right-border-color: rgba(255, 255, 255, 0.08);
|
||||
--share-embed-inner-on-right-ttl-text-color: rgba(255, 255, 255, 0.88);
|
||||
--share-embed-inner-on-right-icon-text-color: rgba(255, 255, 255, 0.5);
|
||||
--share-embed-inner-textarea-text-color: rgba(255, 255, 255, 0.55);
|
||||
--share-embed-inner-textarea-border-color: rgb(41, 41, 41);
|
||||
--share-embed-inner-textarea-bg-color: rgb(28, 28, 28);
|
||||
--share-embed-inner-embed-wrap-iconn-text-color: rgba(255, 255, 255, 0.5);
|
||||
|
||||
--media-status-info-item-text-color: rgba(255, 255, 255, 0.88);
|
||||
|
||||
--viewer-sidebar-auto-play-border-bottom-color: rgba(255, 255, 255, 0.1);
|
||||
--viewer-sidebar-auto-play-next-label-text-color: #fff;
|
||||
--viewer-sidebar-auto-play-option-text-color: #aaa;
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--user-action-form-inner-bg-color: #242424;
|
||||
--user-action-form-inner-title-border-bottom-color: var(--sidebar-nav-border-color);
|
||||
|
||||
--user-action-form-inner-input-border-color: #303030;
|
||||
--user-action-form-inner-input-text-color: rgba(255, 255, 255, 0.88);
|
||||
--user-action-form-inner-input-bg-color: #121212;
|
||||
}
|
||||
343
frontend/src/static/css/config/_light_theme.scss
Executable file
343
frontend/src/static/css/config/_light_theme.scss
Executable file
@@ -0,0 +1,343 @@
|
||||
body {
|
||||
--body-text-color: #111;
|
||||
--body-bg-color: #fafafa;
|
||||
|
||||
--hr-color: #e1e1e1;
|
||||
|
||||
--dotted-outline-color: rgba(0, 0, 0, 0.4);
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--input-color: hsl(0, 0%, 7%);
|
||||
--input-bg-color: hsl(0, 0%, 100%);
|
||||
--input-border-color: hsl(0, 0%, 80%);
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--header-bg-color: #fff;
|
||||
|
||||
--header-circle-button-color: #606060;
|
||||
|
||||
--header-popup-menu-color: rgb(13, 13, 13);
|
||||
--header-popup-menu-icon-color: rgb(144, 144, 144);
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--sidebar-bg-color: #f5f5f5;
|
||||
|
||||
--sidebar-nav-border-color: #eee;
|
||||
|
||||
--sidebar-nav-item-text-color: rgb(13, 13, 13);
|
||||
--sidebar-nav-item-icon-color: rgb(144, 144, 144);
|
||||
|
||||
--sidebar-bottom-link-color: initial;
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--spinner-loader-color: rgba(17, 17, 17, 0.8);
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--nav-menu-active-item-bg-color: rgba(0, 0, 0, 0.1);
|
||||
|
||||
--nav-menu-item-hover-bg-color: rgba(0, 0, 0, 0.04);
|
||||
|
||||
--in-popup-nav-menu-item-hover-bg-color: #eee;
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--search-field-input-text-color: #111;
|
||||
--search-field-input-bg-color: #fff;
|
||||
--search-field-input-border-color: #ccc;
|
||||
|
||||
--search-field-submit-text-color: #333;
|
||||
|
||||
--search-field-submit-bg-color: #f8f8f8;
|
||||
--search-field-submit-border-color: #d3d3d3;
|
||||
|
||||
--search-field-submit-hover-bg-color: #f0f0f0;
|
||||
--search-field-submit-hover-border-color: #c6c6c6;
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--search-results-item-content-link-title-text-color: rgb(17, 17, 17);
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--logged-in-user-thumb-bg-color: rgba(0, 0, 0, 0.07);
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--popup-bg-color: #fff;
|
||||
|
||||
--popup-hr-bg-color: #eee;
|
||||
|
||||
--popup-top-text-color: rgb(13, 13, 13);
|
||||
--popup-top-bg-color: #eee;
|
||||
|
||||
--popup-msg-title-text-color: rgb(17, 17, 17);
|
||||
--popup-msg-main-text-color: rgba(17, 17, 17, 0.8);
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--comments-textarea-wrapper-border-color: #eeeeee;
|
||||
--comments-textarea-wrapper-after-bg-color: #0a0a0a;
|
||||
|
||||
--comments-textarea-text-color: #0a0a0a;
|
||||
--comments-textarea-text-placeholder-color: rgba(17, 17, 17, 0.6);
|
||||
|
||||
--comments-list-inner-border-color: #eee;
|
||||
|
||||
--comment-author-text-color: #111;
|
||||
|
||||
--comment-date-text-color: #606060;
|
||||
--comment-date-hover-text-color: #0a0a0a;
|
||||
|
||||
--comment-text-color: #111;
|
||||
|
||||
--comment-actions-material-icon-text-color: rgba(17, 17, 17, 0.8);
|
||||
|
||||
--comment-actions-likes-num-text-color: rgba(17, 17, 17, 0.6);
|
||||
|
||||
--comment-actions-reply-button-text-color: rgba(17, 17, 17, 0.6);
|
||||
--comment-actions-reply-button-hover-text-color: #111;
|
||||
|
||||
--comment-actions-cancel-removal-button-text-color: rgba(17, 17, 17, 0.6);
|
||||
--comment-actions-cancel-removal-button-hover-text-color: #111;
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--item-bg-color: #fafafa;
|
||||
|
||||
--item-title-text-color: #111;
|
||||
|
||||
--item-thumb-bg-color: var(--sidebar-bg-color);
|
||||
|
||||
--item-meta-text-color: rgba(17, 17, 17, 0.6);
|
||||
--item-meta-link-text-color: var(--item-text-color);
|
||||
--item-meta-link-hover-text-color: rgba(17, 17, 17, 0.8);
|
||||
|
||||
--profile-page-item-content-title-bg-color: #fff;
|
||||
|
||||
--playlist-item-main-view-full-link-text-color: rgb(96, 96, 96);
|
||||
--playlist-item-main-view-full-link-hover-text-color: rgb(13, 13, 13);
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--item-list-load-more-text-color: rgba(17, 17, 17, 0.6);
|
||||
--item-list-load-more-hover-text-color: rgba(17, 17, 17, 0.8);
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--media-list-row-border-color: #eee;
|
||||
--media-list-header-title-link-text-color: rgba(17, 17, 17, 0.6);
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--playlist-form-title-focused-bg-color: #111;
|
||||
|
||||
--playlist-privacy-border-color: #888;
|
||||
|
||||
--playlist-form-cancel-button-text-color: rgba(17, 17, 17, 0.6);
|
||||
--playlist-form-cancel-button-hover-text-color: #111;
|
||||
|
||||
--playlist-form-field-text-color: #000;
|
||||
--playlist-form-field-border-color: #888;
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--playlist-save-popup-text-color: #111;
|
||||
--playlist-save-popup-border-color: #eee;
|
||||
|
||||
--playlist-save-popup-create-icon-text-color: #909090;
|
||||
--playlist-save-popup-create-focus-bg-color: rgba(136, 136, 136, 0.14);
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--playlist-view-header-bg-color: #fafafa;
|
||||
|
||||
--playlist-view-header-toggle-text-color: rgb(96, 96, 96);
|
||||
|
||||
--playlist-view-header-toggle-bg-color: #fafafa;
|
||||
|
||||
--playlist-view-title-link-text-color: rgb(13, 13, 13);
|
||||
|
||||
--playlist-view-meta-text-color: rgba(17, 17, 17, 0.6);
|
||||
--playlist-view-meta-link-color: rgba(17, 17, 17, 0.6);
|
||||
--playlist-view-meta-link-hover-text-color: rgb(13, 13, 13);
|
||||
|
||||
--playlist-view-status-text-color: rgba(17, 17, 17, 0.6);
|
||||
--playlist-view-status-bg-color: rgba(0, 0, 0, 0.05);
|
||||
|
||||
--playlist-view-status-icon-text-color: rgba(17, 17, 17, 0.4);
|
||||
|
||||
--playlist-view-actions-bg-color: #fafafa;
|
||||
|
||||
--playlist-view-media-bg-color: var(--sidebar-bg-color);
|
||||
|
||||
--playlist-view-media-order-number-color: rgb(136, 136, 136);
|
||||
|
||||
--playlist-view-item-title-text-color: rgb(13, 13, 13);
|
||||
|
||||
--playlist-view-item-author-text-color: rgb(13, 13, 13);
|
||||
|
||||
--playlist-view-item-author-bg-color: var(--sidebar-bg-color);
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--profile-page-bg-color: #fff;
|
||||
|
||||
--profile-page-header-bg-color: var(--body-bg-color);
|
||||
|
||||
--profile-page-info-videos-number-text-color: rgba(17, 17, 17, 0.6);
|
||||
|
||||
--profile-page-nav-link-text-color: rgba(17, 17, 17, 0.6);
|
||||
--profile-page-nav-link-hover-text-color: #111;
|
||||
|
||||
--profile-page-nav-link-active-text-color: #111;
|
||||
--profile-page-nav-link-active-after-bg-color: rgba(17, 17, 17, 0.6);
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--add-media-page-tmplt-dialog-bg-color: #fff;
|
||||
--add-media-page-tmplt-uploader-bg-color: #fff;
|
||||
--add-media-page-tmplt-dropzone-bg-color: rgba(255, 255, 255, 0.5);
|
||||
--add-media-page-tmplt-drag-drop-inner-text-color: rgba(17, 17, 17, 0.4);
|
||||
--add-media-page-tmplt-upload-item-spiner-text-color: rgba(17, 17, 17, 0.32);
|
||||
--add-media-page-tmplt-upload-item-actions-text-color: rgba(17, 17, 17, 0.4);
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--add-media-page-qq-gallery-upload-button-text-color: rgba(17, 17, 17, 0.6);
|
||||
--add-media-page-qq-gallery-upload-button-icon-text-color: rgba(17, 17, 17, 0.6);
|
||||
|
||||
--add-media-page-qq-gallery-upload-button-hover-text-color: rgba(17, 17, 17, 1);
|
||||
--add-media-page-qq-gallery-upload-button-hover-icon-text-color: rgba(17, 17, 17, 1);
|
||||
|
||||
--add-media-page-qq-gallery-upload-button-focus-text-color: rgba(17, 17, 17, 0.4);
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--playlist-page-bg-color: rgb(250, 250, 250);
|
||||
--playlist-page-details-text-color: rgb(96, 96, 96);
|
||||
--playlist-page-thumb-bg-color: rgba(0, 0, 0, 0.07);
|
||||
--playlist-page-title-link-text-color: rgb(13, 13, 13);
|
||||
|
||||
--playlist-page-actions-circle-icon-text-color: rgb(144, 144, 144);
|
||||
--playlist-page-actions-circle-icon-bg-color: rgb(250, 250, 250);
|
||||
|
||||
--playlist-page-actions-nav-item-button-text-color: rgb(10, 10, 10);
|
||||
|
||||
--playlist-page-actions-popup-message-bottom-cancel-button-text-color: rgba(17, 17, 17, 0.6);
|
||||
--playlist-page-actions-popup-message-bottom-cancel-button-hover-text-color: #111;
|
||||
--playlist-page-actions-popup-message-bottom-cancel-button-icon-hover-text-color: #111;
|
||||
|
||||
--playlist-page-status-text-color: rgba(17, 17, 17, 0.6);
|
||||
--playlist-page-status-bg-color: rgba(0, 0, 0, 0.1);
|
||||
|
||||
--playlist-page-status-icon-text-color: rgba(17, 17, 17, 0.4);
|
||||
|
||||
--playlist-page-author-border-top-color: rgba(0, 0, 0, 0.1);
|
||||
--playlist-page-author-name-link-color: rgb(13, 13, 13);
|
||||
|
||||
--playlist-page-author-edit-playlist-icon-button-text-color: rgb(96, 96, 96);
|
||||
|
||||
--playlist-page-author-edit-playlist-icon-button-bg-color: #fafafa;
|
||||
|
||||
--playlist-page-author-edit-playlist-icon-button-active-text-color: rgb(13, 13, 13);
|
||||
|
||||
--playlist-page-author-edit-playlist-form-wrap-text-color: rgb(13, 13, 13);
|
||||
--playlist-page-author-edit-playlist-form-wrap-bg-color: #fff;
|
||||
|
||||
--playlist-page-author-edit-playlist-form-wrap-border-color: #eee;
|
||||
|
||||
--playlist-page-author-edit-playlist-form-wrap-title-circle-icon-hover-text-color: #111;
|
||||
|
||||
--playlist-page-author-edit-playlist-author-thumb-text-color: #606060;
|
||||
--playlist-page-author-edit-playlist-author-thumb-bg-color: rgba(0, 0, 0, 0.07);
|
||||
|
||||
--playlist-page-details-bg-color: #fafafa;
|
||||
|
||||
--playlist-page-video-list-bg-color: #f5f5f5;
|
||||
|
||||
--playlist-page-video-list-item-title-bg-color: #f5f5f5;
|
||||
|
||||
--playlist-page-video-list-item-hover-bg-color: #ebebeb;
|
||||
|
||||
--playlist-page-video-list-item-title-hover-bg-color: #ebebeb;
|
||||
|
||||
--playlist-page-video-list-item-after-bg-color: rgba(0, 0, 0, 0.1);
|
||||
--playlist-page-video-list-item-order-text-color: rgb(96, 96, 96);
|
||||
|
||||
--playlist-page-video-list-item-options-icon-hover-color: #111;
|
||||
|
||||
--playlist-page-video-list-item-options-popup-cancel-removal-button-text-color: rgba(17, 17, 17, 0.6);
|
||||
--playlist-page-video-list-item-options-popup-cancel-removal-button-hover-text-color: #111;
|
||||
|
||||
--playlist-page-video-list-item-options-popup-cancel-removal-button-hover-icon-text-color: #111;
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--media-author-actions-popup-bottom-cancel-removal-button-text-color: rgba(17, 17, 17, 0.6);
|
||||
--media-author-actions-popup-bottom-cancel-removal-button-hover-text-color: #111;
|
||||
--media-author-actions-popup-bottom-cancel-removal-button-hover-icon-text-color: #111;
|
||||
|
||||
--profile-banner-wrap-popup-bottom-cancel-removal-button-text-color: rgba(17, 17, 17, 0.6);
|
||||
--profile-banner-wrap-popup-bottom-cancel-removal-button-hover-text-color: #111;
|
||||
--profile-banner-wrap-popup-bottom-cancel-removal-button-hover-icon-text-color: #111;
|
||||
|
||||
--media-title-banner-border-color: #eee;
|
||||
--media-title-labels-area-text-color: rgba(17, 17, 17, 0.6);
|
||||
--media-title-labels-area-bg-color: rgba(238, 238, 238, 0.6);
|
||||
--media-title-views-text-color: rgba(17, 17, 17, 0.6);
|
||||
|
||||
--media-actions-not-popup-circle-icon-focus-bg-color: rgba(0, 0, 0, 0.04);
|
||||
--media-actions-not-popup-circle-icon-active-bg-color: rgba(0, 0, 0, 0.07);
|
||||
--media-actions-like-before-border-color: rgba(17, 17, 17, 0.4);
|
||||
--media-actions-share-title-text-color: #111;
|
||||
--media-actions-share-options-nav-button-text-color: rgba(17, 17, 17, 0.4);
|
||||
--media-actions-share-options-link-text-color: rgb(17, 17, 17);
|
||||
--media-actions-share-copy-field-border-color: rgb(237, 237, 237);
|
||||
--media-actions-share-copy-field-bg-color: rgb(250, 250, 250);
|
||||
--media-actions-share-copy-field-input-text-color: rgb(17, 17, 17);
|
||||
--media-actions-more-options-popup-bg-color: #fff;
|
||||
--media-actions-more-options-popup-nav-link-text-color: rgb(10, 10, 10);
|
||||
--media-actions-share-fullscreen-popup-main-bg-color: #fff;
|
||||
|
||||
--report-form-title-text-color: #111;
|
||||
--report-form-field-label-text-color: rgba(17, 17, 17, 0.6);
|
||||
--report-form-field-input-text-color: #111;
|
||||
--report-form-field-input-border-color: rgb(237, 237, 237);
|
||||
--report-form-field-input-bg-color: rgb(250, 250, 250);
|
||||
--report-form-help-text-color: rgba(17, 17, 17, 0.6);
|
||||
|
||||
--form-actions-bottom-border-top-color: rgb(238, 238, 238);
|
||||
|
||||
--media-author-banner-name-text-color: #0a0a0a;
|
||||
--media-author-banner-date-text-color: rgba(17, 17, 17, 0.6);
|
||||
|
||||
--media-content-banner-border-color: #eee;
|
||||
|
||||
--share-embed-inner-on-right-border-color: rgb(238, 238, 238);
|
||||
--share-embed-inner-on-right-ttl-text-color: #111;
|
||||
--share-embed-inner-on-right-icon-text-color: rgba(17, 17, 17, 0.4);
|
||||
--share-embed-inner-textarea-text-color: rgba(17, 17, 17, 0.8);
|
||||
--share-embed-inner-textarea-border-color: rgb(237, 237, 237);
|
||||
--share-embed-inner-textarea-bg-color: rgb(250, 250, 250);
|
||||
--share-embed-inner-embed-wrap-iconn-text-color: rgba(17, 17, 17, 0.4);
|
||||
|
||||
--media-status-info-item-text-color: #111;
|
||||
|
||||
--viewer-sidebar-auto-play-border-bottom-color: rgba(0, 0, 0, 0.1);
|
||||
--viewer-sidebar-auto-play-next-label-text-color: #0a0a0a;
|
||||
--viewer-sidebar-auto-play-option-text-color: #606060;
|
||||
|
||||
/* ################################################## */
|
||||
|
||||
--user-action-form-inner-bg-color: #fff;
|
||||
--user-action-form-inner-title-border-bottom-color: var(--sidebar-nav-border-color);
|
||||
|
||||
--user-action-form-inner-input-border-color: #d3d3d3;
|
||||
--user-action-form-inner-input-text-color: #000;
|
||||
--user-action-form-inner-input-bg-color: #fff;
|
||||
}
|
||||
47
frontend/src/static/css/config/index.scss
Executable file
47
frontend/src/static/css/config/index.scss
Executable file
@@ -0,0 +1,47 @@
|
||||
@import './_light_theme.scss';
|
||||
@import './_dark_theme.scss';
|
||||
|
||||
body {
|
||||
--default-logo-height: 18px;
|
||||
|
||||
--default-theme-color: #009933;
|
||||
--default-brand-color: #009933;
|
||||
|
||||
--success-color: #00a28b;
|
||||
--warning-color: #e09f1f;
|
||||
--danger-color: #de623b;
|
||||
|
||||
--input-disabled-bg-color: hsla(0, 0%, 0%, 0.05);
|
||||
|
||||
--dotted-outline: 1px dotted var(--dotted-outline-color);
|
||||
|
||||
--header-height: 56px;
|
||||
|
||||
--sidebar-width: 240px;
|
||||
|
||||
--item-title-font-size: 14px;
|
||||
--item-title-max-lines: 2;
|
||||
--item-title-line-height: 18px;
|
||||
|
||||
--horizontal-item-title-line-height: 21px;
|
||||
|
||||
--playlist-item-title-line-height: 20px;
|
||||
|
||||
--large-item-title-font-size: 16px;
|
||||
--large-item-title-line-height: 22px;
|
||||
|
||||
--links-color: var(--default-theme-color);
|
||||
}
|
||||
|
||||
body {
|
||||
--default-item-width: 218px;
|
||||
--default-max-item-width: 344px;
|
||||
|
||||
--default-max-row-items: 6;
|
||||
|
||||
--default-item-margin-right-width: 4px;
|
||||
--default-item-margin-bottom-width: 24px;
|
||||
|
||||
--default-horizontal-item-margin-right-width: 12px;
|
||||
--default-horizontal-item-margin-bottom-width: 12px;
|
||||
}
|
||||
62
frontend/src/static/css/includes/_mixins.scss
Executable file
62
frontend/src/static/css/includes/_mixins.scss
Executable file
@@ -0,0 +1,62 @@
|
||||
@mixin multiline_texts_excerpt($font-size: 1em, $line-height: 1.15, $lines-to-show: 2, $bg-color: transparent) {
|
||||
line-height: $line-height;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
background-color: $bg-color;
|
||||
|
||||
/* Fallback for non-webkit */
|
||||
display: block;
|
||||
max-height: $lines-to-show * $line-height;
|
||||
|
||||
/* Only for non-webkit */
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: $lines-to-show;
|
||||
-webkit-box-orient: vertical;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
@mixin media_list_row_width($width, $vertSpace: 56) {
|
||||
width: $width;
|
||||
|
||||
@media (min-width: $vertSpace + ( 2 * $width )) {
|
||||
width: 2 * $width;
|
||||
}
|
||||
|
||||
@media (min-width: $vertSpace + ( 3 * $width )) {
|
||||
width: 3 * $width;
|
||||
}
|
||||
|
||||
@media (min-width: $vertSpace + ( 4 * $width )) {
|
||||
width: 4 * $width;
|
||||
}
|
||||
|
||||
@media (min-width: $vertSpace + ( 5 * $width )) {
|
||||
width: 5 * $width;
|
||||
}
|
||||
|
||||
@media (min-width: $vertSpace + ( 7 * $width )) {
|
||||
width: 6 * $width;
|
||||
}
|
||||
|
||||
.visible-sidebar & {
|
||||
@media (min-width: $vertSpace + ( 2 * $width )) {
|
||||
width: 1 * $width;
|
||||
}
|
||||
|
||||
@media (min-width: $vertSpace + ( 3 * $width )) {
|
||||
width: 2 * $width;
|
||||
}
|
||||
|
||||
@media (min-width: $vertSpace + ( 4 * $width )) {
|
||||
width: 3 * $width;
|
||||
}
|
||||
|
||||
@media (min-width: $vertSpace + ( 5 * $width )) {
|
||||
width: 4 * $width;
|
||||
}
|
||||
|
||||
@media (min-width: $vertSpace + ( 7 * $width )) {
|
||||
width: 6 * $width;
|
||||
}
|
||||
}
|
||||
}
|
||||
439
frontend/src/static/css/includes/_theme_color.scss
Executable file
439
frontend/src/static/css/includes/_theme_color.scss
Executable file
@@ -0,0 +1,439 @@
|
||||
@import './_variables.scss';
|
||||
|
||||
/// Convert a direction to legacy syntax
|
||||
/// @param {Keyword | Angle} $value - Value to convert
|
||||
/// @require {function} is-direction
|
||||
/// @require {function} convert-angle
|
||||
/// @throw Cannot convert `#{$value}` to legacy syntax because it doesn't seem to be a direction.;
|
||||
@function legacy-direction($value) {
|
||||
@if is-direction($value) == false {
|
||||
@error "Cannot convert `#{$value}` to legacy syntax because it doesn't seem to be a direction.";
|
||||
}
|
||||
|
||||
$conversion-map: (
|
||||
to top: bottom,
|
||||
to top right: bottom left,
|
||||
to right top: left bottom,
|
||||
to right: left,
|
||||
to bottom right: top left,
|
||||
to right bottom: left top,
|
||||
to bottom: top,
|
||||
to bottom left: top right,
|
||||
to left bottom: right top,
|
||||
to left: right,
|
||||
to left top: right bottom,
|
||||
to top left: bottom right
|
||||
);
|
||||
|
||||
@if map-has-key($conversion-map, $value) {
|
||||
@return map-get($conversion-map, $value);
|
||||
}
|
||||
|
||||
@return 90deg - $value;
|
||||
}
|
||||
|
||||
/// Test if `$value` is a valid direction
|
||||
/// @param {*} $value - Value to test
|
||||
/// @return {Bool}
|
||||
@function is-direction($value) {
|
||||
$is-keyword: index(
|
||||
(
|
||||
to top,
|
||||
to top right,
|
||||
to right top,
|
||||
to right,
|
||||
to bottom right,
|
||||
to right bottom,
|
||||
to bottom,
|
||||
to bottom left,
|
||||
to left bottom,
|
||||
to left,
|
||||
to left top,
|
||||
to top left
|
||||
),
|
||||
$value
|
||||
);
|
||||
$is-angle: type-of($value) == 'number' and index('deg' 'grad' 'turn' 'rad', unit($value));
|
||||
|
||||
@return $is-keyword or $is-angle;
|
||||
}
|
||||
|
||||
@mixin linear-gradient($direction, $color-stops...) {
|
||||
// Direction has been omitted and happens to be a color-stop
|
||||
@if is-direction($direction) == false {
|
||||
$color-stops: $direction, $color-stops;
|
||||
$direction: 180deg;
|
||||
}
|
||||
|
||||
background: nth(nth($color-stops, 1), 1);
|
||||
background: -webkit-linear-gradient(legacy-direction($direction), $color-stops);
|
||||
background: linear-gradient($direction, $color-stops);
|
||||
}
|
||||
|
||||
$bg-color_theme-color: $theme-color;
|
||||
|
||||
@mixin font_color_gradient() {
|
||||
color: $theme-color;
|
||||
/*background: -webkit-linear-gradient( $theme-color, scale-lightness( $theme-color, -15 ) );
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;*/
|
||||
}
|
||||
|
||||
@mixin font_color_gradient_important() {
|
||||
color: $theme-color !important;
|
||||
/*background: -webkit-linear-gradient( $theme-color, scale-lightness( $theme-color, -15 ) ) !important;
|
||||
-webkit-background-clip: text !important;
|
||||
-webkit-text-fill-color: transparent !important;*/
|
||||
}
|
||||
|
||||
@mixin background_color_gradient() {
|
||||
background-color: $theme-color;
|
||||
// @include linear-gradient( to bottom right, $theme-color 0%, scale-lightness( $theme-color, -10 ) 100%);
|
||||
}
|
||||
|
||||
@mixin background_gradient() {
|
||||
background: $theme-color;
|
||||
// @include linear-gradient( to bottom right, $theme-color 0%, scale-lightness( $theme-color, -10 ) 100%);
|
||||
}
|
||||
|
||||
@mixin border_color_gradient() {
|
||||
border-color: $theme-color;
|
||||
// @include linear-gradient( to bottom right, $theme-color 0%, scale-lightness( $theme-color, -10 ) 100%);
|
||||
}
|
||||
|
||||
/*
|
||||
* Typography
|
||||
*/
|
||||
|
||||
.nav-menu {
|
||||
li {
|
||||
&.link-item {
|
||||
&.active {
|
||||
.menu-item-icon {
|
||||
@include font_color_gradient();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
span {
|
||||
@include font_color_gradient();
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Components
|
||||
*/
|
||||
|
||||
/* Comments */
|
||||
|
||||
.comments-form-inner {
|
||||
.form {
|
||||
.form-buttons {
|
||||
a,
|
||||
button {
|
||||
@include background_gradient();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment-text {
|
||||
a {
|
||||
@include font_color_gradient();
|
||||
}
|
||||
}
|
||||
|
||||
.comment-actions {
|
||||
.remove-comment {
|
||||
> button {
|
||||
@include background_color_gradient();
|
||||
}
|
||||
|
||||
.popup-message-bottom {
|
||||
button {
|
||||
&.proceed-comment-removal {
|
||||
@include font_color_gradient();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* NavigationMenuList */
|
||||
|
||||
.nav-menu {
|
||||
li {
|
||||
&.label-item {
|
||||
button {
|
||||
&.reported-label,
|
||||
&.reported-label * {
|
||||
@include font_color_gradient();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* PageSidebar */
|
||||
|
||||
.page-sidebar {
|
||||
.page-sidebar-bottom {
|
||||
a {
|
||||
&:hover {
|
||||
@include font_color_gradient_important();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Components_Pages
|
||||
*/
|
||||
|
||||
/* AddMediaPage */
|
||||
|
||||
.media-drag-drop-content-inner {
|
||||
.browse-files-btn-wrap {
|
||||
span {
|
||||
@include background_color_gradient();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filename-edit {
|
||||
&:hover {
|
||||
@include font_color_gradient();
|
||||
}
|
||||
}
|
||||
|
||||
.media-upload-item-bottom-actions {
|
||||
> * {
|
||||
&:hover {
|
||||
@include font_color_gradient();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-upload-item-progress-bar-container {
|
||||
.media-upload-item-progress-bar {
|
||||
@include background_color_gradient();
|
||||
}
|
||||
}
|
||||
|
||||
/* AddMediaPageTemplate */
|
||||
|
||||
dialog {
|
||||
.qq-dialog-buttons {
|
||||
button {
|
||||
color: $theme-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-drag-drop-content-inner {
|
||||
.browse-files-btn-wrap {
|
||||
span {
|
||||
@include background_color_gradient();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-upload-item-top-actions,
|
||||
.media-upload-item-bottom-actions {
|
||||
> * {
|
||||
&:hover {
|
||||
@include font_color_gradient();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-upload-item-bottom-actions {
|
||||
> * {
|
||||
&:hover {
|
||||
@include background_color_gradient();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.retry-media-upload-item {
|
||||
@include font_color_gradient();
|
||||
|
||||
&:hover {
|
||||
@include background_color_gradient();
|
||||
}
|
||||
}
|
||||
|
||||
.media-upload-item-progress-bar-container {
|
||||
.media-upload-item-progress-bar {
|
||||
@include background_color_gradient();
|
||||
}
|
||||
}
|
||||
|
||||
/* MediaPage */
|
||||
|
||||
.viewer-container {
|
||||
.player-container {
|
||||
&.audio-player-container {
|
||||
.vjs-big-play-button {
|
||||
background-color: var(--brand-color, var(--default-brand-color)) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-author-actions {
|
||||
> a,
|
||||
> button {
|
||||
@include background_color_gradient();
|
||||
}
|
||||
|
||||
.popup-message-bottom {
|
||||
button {
|
||||
&.proceed-comment-removal {
|
||||
@include font_color_gradient();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-title-banner {
|
||||
.media-actions {
|
||||
> * {
|
||||
> * {
|
||||
&.share {
|
||||
.copy-field {
|
||||
button {
|
||||
@include font_color_gradient();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.disliked-media {
|
||||
> * {
|
||||
> * {
|
||||
&.dislike {
|
||||
&:before {
|
||||
@include border_color_gradient();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-views-actions {
|
||||
&.liked-media {
|
||||
.media-actions {
|
||||
> * {
|
||||
> * {
|
||||
&.like,
|
||||
&.like button,
|
||||
&.like .circle-icon-button {
|
||||
@include font_color_gradient();
|
||||
}
|
||||
|
||||
&.like,
|
||||
&.dislike {
|
||||
&:before {
|
||||
@include border_color_gradient();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.disliked-media {
|
||||
.media-actions {
|
||||
> * {
|
||||
> * {
|
||||
&.dislike,
|
||||
&.dislike button,
|
||||
&.dislike .circle-icon-button {
|
||||
@include font_color_gradient();
|
||||
}
|
||||
|
||||
&.like,
|
||||
&.dislike {
|
||||
&:before {
|
||||
@include border_color_gradient();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-actions-bottom {
|
||||
button {
|
||||
color: $theme-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.media-content-field-content {
|
||||
a {
|
||||
@include font_color_gradient();
|
||||
}
|
||||
}
|
||||
|
||||
.share-embed .share-embed-inner {
|
||||
.on-right-bottom {
|
||||
button {
|
||||
@include font_color_gradient();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ProfilePage */
|
||||
|
||||
.profile-page-header {
|
||||
a.edit-channel,
|
||||
a.edit-profile,
|
||||
button.delete-profile {
|
||||
@include background_color_gradient();
|
||||
}
|
||||
}
|
||||
|
||||
.profile-banner-wrap {
|
||||
.popup-message-bottom {
|
||||
> a,
|
||||
> button {
|
||||
@include background_color_gradient();
|
||||
}
|
||||
|
||||
button {
|
||||
&.proceed-profile-removal {
|
||||
@include font_color_gradient();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* General
|
||||
*/
|
||||
|
||||
p {
|
||||
a {
|
||||
@include font_color_gradient();
|
||||
}
|
||||
}
|
||||
|
||||
.user-action-form-inner {
|
||||
a {
|
||||
@include font_color_gradient();
|
||||
}
|
||||
|
||||
button,
|
||||
*[type='submit'],
|
||||
*[type='button'] {
|
||||
@include background_color_gradient();
|
||||
}
|
||||
}
|
||||
12
frontend/src/static/css/includes/_theme_variables.scss
Executable file
12
frontend/src/static/css/includes/_theme_variables.scss
Executable file
@@ -0,0 +1,12 @@
|
||||
$theme-color: var(--theme-color, var(--default-theme-color));
|
||||
|
||||
$color-error-red: rgba(red, 0.8);
|
||||
|
||||
$message-default-color: rgba(#111, 0.9);
|
||||
|
||||
$message-default-bg-color: #e6e6e6;
|
||||
$message-info-bg-color: #e6e6fa;
|
||||
$message-error-bg-color: #fae6e6;
|
||||
$message-success-bg-color: #e6f0e6;
|
||||
|
||||
$message-warning-bg-color: #fafae6;
|
||||
2
frontend/src/static/css/includes/_variables.scss
Executable file
2
frontend/src/static/css/includes/_variables.scss
Executable file
@@ -0,0 +1,2 @@
|
||||
@import './_mixins.scss';
|
||||
@import './_theme_variables.scss';
|
||||
82
frontend/src/static/css/includes/_variables_dimensions.scss
Executable file
82
frontend/src/static/css/includes/_variables_dimensions.scss
Executable file
@@ -0,0 +1,82 @@
|
||||
@use "sass:math";
|
||||
|
||||
// #_VARIABLES
|
||||
|
||||
$_use_rem_unit: true;
|
||||
|
||||
$single-item-breakpoint: 348px;
|
||||
$single-item-breakpoint: 492px;
|
||||
|
||||
$double-item-breakpoint: 689px;
|
||||
|
||||
/* #################################################################################################### */
|
||||
|
||||
// #_DIMENSIONS
|
||||
|
||||
// #_HeaderHeight
|
||||
|
||||
$_header-height-value: 56;
|
||||
|
||||
$header-height: $_header-height-value * 1px;
|
||||
|
||||
@if $_use_rem_unit {
|
||||
$header-height: math.div($_header-height-value, 16) * 1rem;
|
||||
}
|
||||
|
||||
// #_HeaderPadding
|
||||
|
||||
$_header-padding-vertical-value: 0;
|
||||
$_header-padding-horizontal-value: 16;
|
||||
|
||||
$_header-padding-vertical-value-pixels: $_header-padding-vertical-value * 1px;
|
||||
$_header-padding-horizontal-value-pixels: $_header-padding-horizontal-value * 1px;
|
||||
|
||||
$_header-padding-vertical-value-rem: math.div($_header-padding-vertical-value, 16) * 1rem;
|
||||
$_header-padding-horizontal-value-rem: math.div($_header-padding-horizontal-value, 16) * 1rem;
|
||||
|
||||
$header-padding-horizontal: $_header-padding-horizontal-value-pixels;
|
||||
$header-padding: $_header-padding-vertical-value-pixels $_header-padding-horizontal-value-pixels;
|
||||
|
||||
@if $_use_rem_unit {
|
||||
$header-padding-horizontal: $_header-padding-horizontal-value-rem;
|
||||
$header-padding: $_header-padding-vertical-value-rem $_header-padding-horizontal-value-rem;
|
||||
}
|
||||
|
||||
// #_SidebarWidth
|
||||
|
||||
$_sidebar-width-value: 240;
|
||||
|
||||
$sidebar-width: $_sidebar-width-value * 1px;
|
||||
|
||||
@if $_use_rem_unit {
|
||||
$sidebar-width: math.div($_sidebar-width-value, 16) * 1rem;
|
||||
}
|
||||
|
||||
// #_SidebarPadding
|
||||
|
||||
$_sidebar-nav-horizontal-padding-pixels: 24;
|
||||
$_sidebar-nav-horizontal-padding-rem: math.div($_sidebar-nav-horizontal-padding-pixels, 16) * 1rem;
|
||||
|
||||
$sidebar-nav-padding: 0 $_sidebar-nav-horizontal-padding-pixels;
|
||||
|
||||
@if $_use_rem_unit {
|
||||
$sidebar-nav-padding: 0 $_sidebar-nav-horizontal-padding-rem;
|
||||
}
|
||||
|
||||
// #_AuthorPage
|
||||
|
||||
$_authorPage-navHeight-value: 48;
|
||||
|
||||
$_authorPage-navHeight: $_authorPage-navHeight-value * 1px;
|
||||
|
||||
@if $_use_rem_unit {
|
||||
$_authorPage-navHeight: math.div($_authorPage-navHeight-value, 16) * 1rem;
|
||||
}
|
||||
|
||||
$_authorPage-navItem-padding-horizontal-value: 32;
|
||||
|
||||
$_authorPage-navItem-padding-horizontal: $_authorPage-navItem-padding-horizontal-value * 1px;
|
||||
|
||||
@if $_use_rem_unit {
|
||||
$_authorPage-navItem-padding-horizontal: math.div($_authorPage-navItem-padding-horizontal-value, 16) * 1rem;
|
||||
}
|
||||
379
frontend/src/static/css/includes/form_controls/_buttons.scss
Executable file
379
frontend/src/static/css/includes/form_controls/_buttons.scss
Executable file
@@ -0,0 +1,379 @@
|
||||
$success-color: #00a28b;
|
||||
$warning-color: #e09f1f;
|
||||
$danger-color: #de623b;
|
||||
|
||||
$brand-color: #008ede;
|
||||
|
||||
$body-text-color: #111;
|
||||
|
||||
$light-color: #fafafa;
|
||||
$dark-color: #111;
|
||||
|
||||
$light-accent-color: #98bc92;
|
||||
$dark-accent-color: #087e04;
|
||||
|
||||
$success-dark-color: shade($success-color, 10);
|
||||
$warning-dark-color: shade($warning-color, 10);
|
||||
$danger-dark-color: shade($danger-color, 10);
|
||||
$brand-dark-color: shade($brand-color, 10);
|
||||
$light-dark-color: shade($light-color, 10);
|
||||
$dark-dark-color: shade($dark-color, 10);
|
||||
$light-accent-dark-color: shade($light-accent-color, 10);
|
||||
$dark-accent-dark-color: shade($dark-accent-color, 10);
|
||||
|
||||
$success-darker-color: shade($success-dark-color, 10);
|
||||
$warning-darker-color: shade($warning-dark-color, 10);
|
||||
$danger-darker-color: shade($danger-dark-color, 10);
|
||||
$brand-darker-color: shade($brand-dark-color, 10);
|
||||
$light-darker-color: shade($light-dark-color, 10);
|
||||
$dark-darker-color: shade($dark-dark-color, 10);
|
||||
$light-accent-darker-color: shade($light-accent-dark-color, 10);
|
||||
$dark-accent-darker-color: shade($dark-accent-dark-color, 10);
|
||||
|
||||
$dark-light-color: tint($dark-color, 10);
|
||||
$dark-lighter-color: tint($dark-light-color, 10);
|
||||
|
||||
$brand-light-color: tint($brand-color, 20);
|
||||
$brand-lighter-color: tint($brand-light-color, 20);
|
||||
|
||||
$success-light-color: tint($success-color, 36);
|
||||
$success-lighter-color: tint($success-light-color, 36);
|
||||
|
||||
$warning-light-color: tint($warning-color, 36);
|
||||
$warning-lighter-color: tint($warning-light-color, 36);
|
||||
|
||||
$danger-light-color: tint($danger-color, 36);
|
||||
$danger-lighter-color: tint($danger-light-color, 36);
|
||||
|
||||
@mixin outline_button_colors($color) {
|
||||
color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
|
||||
@mixin button_colors() {
|
||||
color: $light-color;
|
||||
background-color: $default-gray-color;
|
||||
|
||||
&.brand-btn {
|
||||
background-color: $brand-color;
|
||||
}
|
||||
|
||||
&.light-btn {
|
||||
color: $dark-color;
|
||||
background-color: $light-color;
|
||||
}
|
||||
|
||||
&.dark-btn {
|
||||
background-color: $dark-color;
|
||||
}
|
||||
|
||||
&.light-accent-btn {
|
||||
background-color: $light-accent-color;
|
||||
}
|
||||
|
||||
&.dark-accent-btn {
|
||||
background-color: $dark-accent-color;
|
||||
}
|
||||
|
||||
&.success-btn {
|
||||
background-color: $success-color;
|
||||
}
|
||||
|
||||
&.warning-btn {
|
||||
background-color: $warning-color;
|
||||
}
|
||||
|
||||
&.danger-btn {
|
||||
background-color: $danger-color;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $default-gray-dark-color;
|
||||
|
||||
&.brand-btn {
|
||||
background-color: $brand-dark-color;
|
||||
}
|
||||
|
||||
&.light-btn {
|
||||
background-color: $light-dark-color;
|
||||
}
|
||||
|
||||
&.dark-btn {
|
||||
background-color: $dark-dark-color;
|
||||
}
|
||||
|
||||
&.light-accent-btn {
|
||||
background-color: $light-accent-dark-color;
|
||||
}
|
||||
|
||||
&.dark-accent-btn {
|
||||
background-color: $dark-accent-dark-color;
|
||||
}
|
||||
|
||||
&.success-btn {
|
||||
background-color: $success-dark-color;
|
||||
}
|
||||
|
||||
&.warning-btn {
|
||||
background-color: $warning-dark-color;
|
||||
}
|
||||
|
||||
&.danger-btn {
|
||||
background-color: $danger-dark-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $default-gray-darker-color;
|
||||
|
||||
&.brand-btn {
|
||||
background-color: $brand-darker-color;
|
||||
}
|
||||
|
||||
&.light-btn {
|
||||
background-color: $light-darker-color;
|
||||
}
|
||||
|
||||
&.dark-btn {
|
||||
background-color: $dark-darker-color;
|
||||
}
|
||||
|
||||
&.light-accent-btn {
|
||||
background-color: $light-accent-darker-color;
|
||||
}
|
||||
|
||||
&.dark-accent-btn {
|
||||
background-color: $dark-accent-darker-color;
|
||||
}
|
||||
|
||||
&.success-btn {
|
||||
background-color: $success-darker-color;
|
||||
}
|
||||
|
||||
&.warning-btn {
|
||||
background-color: $warning-darker-color;
|
||||
}
|
||||
|
||||
&.danger-btn {
|
||||
background-color: $danger-darker-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: $light-color;
|
||||
background-color: $border-gray-color;
|
||||
}
|
||||
|
||||
&.outline-btn {
|
||||
background-color: transparent;
|
||||
|
||||
box-shadow: inset 0 0 0 $brand-color;
|
||||
|
||||
@include outline_button_colors($default-gray-color);
|
||||
|
||||
&.brand-btn {
|
||||
@include outline_button_colors($brand-color);
|
||||
}
|
||||
|
||||
&.light-btn {
|
||||
@include outline_button_colors($light-color);
|
||||
}
|
||||
|
||||
&.dark-btn {
|
||||
@include outline_button_colors($dark-color);
|
||||
}
|
||||
|
||||
&.light-accent-btn {
|
||||
@include outline_button_colors($light-accent-color);
|
||||
}
|
||||
|
||||
&.dark-accent-btn {
|
||||
@include outline_button_colors($dark-accent-color);
|
||||
}
|
||||
|
||||
&.success-btn {
|
||||
@include outline_button_colors($success-color);
|
||||
}
|
||||
|
||||
&.warning-btn {
|
||||
@include outline_button_colors($warning-color);
|
||||
}
|
||||
|
||||
&.danger-btn {
|
||||
@include outline_button_colors($danger-color);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
|
||||
@include outline_button_colors($default-gray-dark-color);
|
||||
|
||||
box-shadow: inset 0 0 0 $brand-dark-color;
|
||||
// box-shadow: inset 0 0 0 $default-gray-dark-color;
|
||||
|
||||
&.brand-btn {
|
||||
@include outline_button_colors($brand-dark-color);
|
||||
// box-shadow: inset 0 0 0 $brand-dark-color;
|
||||
}
|
||||
|
||||
&.light-btn {
|
||||
@include outline_button_colors($light-dark-color);
|
||||
// box-shadow: inset 0 0 0 $light-dark-color;
|
||||
}
|
||||
|
||||
&.dark-btn {
|
||||
@include outline_button_colors($dark-dark-color);
|
||||
// box-shadow: inset 0 0 0 $dark-dark-color;
|
||||
}
|
||||
|
||||
&.light-accent-btn {
|
||||
@include outline_button_colors($light-accent-dark-color);
|
||||
// box-shadow: inset 0 0 0 $light-accent-dark-color;
|
||||
}
|
||||
|
||||
&.dark-accent-btn {
|
||||
@include outline_button_colors($dark-accent-dark-color);
|
||||
// box-shadow: inset 0 0 0 $dark-accent-dark-color;
|
||||
}
|
||||
|
||||
&.success-btn {
|
||||
@include outline_button_colors($success-dark-color);
|
||||
// box-shadow: inset 0 0 0 $success-dark-color;
|
||||
}
|
||||
|
||||
&.warning-btn {
|
||||
@include outline_button_colors($warning-dark-color);
|
||||
// box-shadow: inset 0 0 0 $warning-dark-color;
|
||||
}
|
||||
|
||||
&.danger-btn {
|
||||
@include outline_button_colors($danger-dark-color);
|
||||
// box-shadow: inset 0 0 0 $danger-dark-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: transparent;
|
||||
|
||||
@include outline_button_colors($default-gray-darker-color);
|
||||
|
||||
box-shadow: inset 0 0 0 $brand-darker-color;
|
||||
// box-shadow: inset 0 0 0 $default-gray-darker-color;
|
||||
|
||||
&.brand-btn {
|
||||
@include outline_button_colors($brand-darker-color);
|
||||
// box-shadow: inset 0 0 0 $brand-darker-color;
|
||||
}
|
||||
|
||||
&.light-btn {
|
||||
@include outline_button_colors($light-darker-color);
|
||||
// box-shadow: inset 0 0 0 $light-darker-color;
|
||||
}
|
||||
|
||||
&.dark-btn {
|
||||
@include outline_button_colors($dark-darker-color);
|
||||
// box-shadow: inset 0 0 0 $dark-darker-color;
|
||||
}
|
||||
|
||||
&.light-accent-btn {
|
||||
@include outline_button_colors($light-accent-darker-color);
|
||||
// box-shadow: inset 0 0 0 $light-accent-darker-color;
|
||||
}
|
||||
|
||||
&.dark-accent-btn {
|
||||
@include outline_button_colors($dark-accent-darker-color);
|
||||
// box-shadow: inset 0 0 0 $dark-accent-color;
|
||||
}
|
||||
|
||||
&.success-btn {
|
||||
@include outline_button_colors($success-darker-color);
|
||||
// box-shadow: inset 0 0 0 $success-darker-color;
|
||||
}
|
||||
|
||||
&.warning-btn {
|
||||
@include outline_button_colors($warning-darker-color);
|
||||
// box-shadow: inset 0 0 0 $warning-darker-color;
|
||||
}
|
||||
|
||||
&.danger-btn {
|
||||
@include outline_button_colors($danger-darker-color);
|
||||
// box-shadow: inset 0 0 0 $danger-darker-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
@include outline_button_colors($border-gray-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.unstyled-btn,
|
||||
&.unstyled-btn:hover,
|
||||
&.unstyled-btn:active,
|
||||
&.unstyled-btn:focus {
|
||||
color: $brand-color;
|
||||
background-color: transparent;
|
||||
box-shadow: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin buttons() {
|
||||
.btn,
|
||||
a.btn,
|
||||
button,
|
||||
input[type='button'],
|
||||
input[type='submit'],
|
||||
input[type='reset'] {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
padding: 0.75rem 1.25rem;
|
||||
margin-right: 0.5rem;
|
||||
line-height: 0.9;
|
||||
font-size: 1em;
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
border: 0;
|
||||
border-radius: 0.125rem;
|
||||
|
||||
&.small-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
&.large-btn {
|
||||
padding: 1rem 1.5rem;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline-color: $brand-color;
|
||||
}
|
||||
|
||||
&.outline-btn {
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
&.unstyled-btn,
|
||||
&.unstyled-btn:hover,
|
||||
&.unstyled-btn:active,
|
||||
&.unstyled-btn:focus {
|
||||
padding: 0;
|
||||
font-weight: 400;
|
||||
text-decoration: underline;
|
||||
outline-offset: 0;
|
||||
border-width: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@include button_colors;
|
||||
}
|
||||
}
|
||||
3
frontend/src/static/css/includes/form_controls/_form_controls.scss
Executable file
3
frontend/src/static/css/includes/form_controls/_form_controls.scss
Executable file
@@ -0,0 +1,3 @@
|
||||
@import './_mixins_form_controls.scss';
|
||||
|
||||
@include form_controls();
|
||||
619
frontend/src/static/css/includes/form_controls/_mixins_form_controls.scss
Executable file
619
frontend/src/static/css/includes/form_controls/_mixins_form_controls.scss
Executable file
@@ -0,0 +1,619 @@
|
||||
// Replace `$search` with `$replace` in `$string`
|
||||
// @param {String} $string - Initial string
|
||||
// @param {String} $search - Substring to replace
|
||||
// @param {String} $replace ('') - New value
|
||||
// @return {String} - Updated string
|
||||
@function str-replace($string, $search, $replace: '') {
|
||||
$index: str-index($string, $search);
|
||||
|
||||
@if $index {
|
||||
@return str-slice($string, 1, $index - 1) + $replace +
|
||||
str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
|
||||
}
|
||||
|
||||
@return $string;
|
||||
}
|
||||
|
||||
$encoding-reference: (
|
||||
//('%','%25'), // Encode "%" first, otherwise the "%" from encoded code would be encoded again (which would be bad)
|
||||
('<', '%3C'),
|
||||
('>', '%3E'),
|
||||
//('"','%22'), // Replace " with ' because that's shorter than %22 and normally working
|
||||
('"', "'"),
|
||||
('#', '%23'),
|
||||
('&', '%26') // Here are a few more characters you could encode
|
||||
//(' ','%20'),
|
||||
//('!','%21'),
|
||||
//('$','%24'),
|
||||
//(',','%27'),
|
||||
//('(','%28'),
|
||||
//(')','%29'),
|
||||
//('*','%2A'),
|
||||
//('+','%2B'),
|
||||
//('"','%2C'),
|
||||
//('/','%2F'),
|
||||
//(':','%3A'),
|
||||
//(';','%3B'),
|
||||
//('=','%3D'),
|
||||
//('?','%3F'),
|
||||
//('@','%40'),
|
||||
//('[','%5B'),
|
||||
//(']','%5D'),
|
||||
//('^','%5E'),
|
||||
//('`','%60'),
|
||||
//('{','%7B'),
|
||||
//('|','%7C'),
|
||||
//('}','%7D'),
|
||||
//('~','%7E'),
|
||||
//(',','%E2%80%9A'),
|
||||
//('\\','%5C'),
|
||||
//('_','%5F'),
|
||||
//('-','%2D'),
|
||||
//('.','%2E'),
|
||||
// ('\','%5C'),
|
||||
// (' ','%7F'),
|
||||
// ('`','%E2%82%AC'),
|
||||
//('ƒ','%C6%92'),
|
||||
//('„','%E2%80%9E'),
|
||||
//('…','%E2%80%A6'),
|
||||
//('†','%E2%80%A0'),
|
||||
//('‡','%E2%80%A1'),
|
||||
//('ˆ','%CB%86'),
|
||||
//('‰','%E2%80%B0'),
|
||||
//('Š','%C5%A0'),
|
||||
//('‹','%E2%80%B9'),
|
||||
//('Œ','%C5%92'),
|
||||
//('','%C5%8D'),
|
||||
//('Ž','%C5%BD'),
|
||||
//('','%8F'),
|
||||
//('','%C2%90'),
|
||||
//(','%'E2%80%98'),
|
||||
//(','%'E2%80%99'),
|
||||
//('“','%E2%80%9C'),
|
||||
//('”','%E2%80%9D'),
|
||||
//('•','%E2%80%A2'),
|
||||
//('–','%E2%80%93'),
|
||||
//('—','%E2%80%94'),
|
||||
//('˜','%CB%9C'),
|
||||
//('™','%E2%84'),
|
||||
//('š','%C5%A1'),
|
||||
//('›','%E2%80'),
|
||||
//('œ','%C5%93'),
|
||||
//('','%9D'),
|
||||
//('ž','%C5%BE'),
|
||||
//('Ÿ','%C5%B8'),
|
||||
//(' ','%C2%A0'),
|
||||
//('¡','%C2%A1'),
|
||||
//('¢','%C2%A2'),
|
||||
//('£','%C2%A3'),
|
||||
//('¤','%C2%A4'),
|
||||
//('¥','%C2%A5'),
|
||||
//('¦','%C2%A6'),
|
||||
//('§','%C2%A7'),
|
||||
//('¨','%C2%A8'),
|
||||
//('©','%C2%A9'),
|
||||
//('ª','%C2%AA'),
|
||||
//('«','%C2%AB'),
|
||||
//('¬','%C2%AC'),
|
||||
//(','%'C2%AD'),
|
||||
//('®','%C2%AE'),
|
||||
//('¯','%C2%AF'),
|
||||
//('°','%C2%B0'),
|
||||
//('±','%C2%B1'),
|
||||
//('²','%C2%B2'),
|
||||
//('³','%C2%B3'),
|
||||
//('´','%C2%B4'),
|
||||
//('µ','%C2%B5'),
|
||||
//('¶','%C2%B6'),
|
||||
//('·','%C2%B7'),
|
||||
//('¸','%C2%B8'),
|
||||
//('¹','%C2%B9'),
|
||||
//('º','%C2%BA'),
|
||||
//('»','%C2%BB'),
|
||||
//('¼','%C2%BC'),
|
||||
//('½','%C2%BD'),
|
||||
//('¾','%C2%BE'),
|
||||
//('¿','%C2%BF'),
|
||||
//('À','%C3%80'),
|
||||
//('Á','%C3%81'),
|
||||
//('Â','%C3%82'),
|
||||
//('Ã','%C3%83'),
|
||||
//('Ä','%C3%84'),
|
||||
//('Å','%C3%85'),
|
||||
//('Æ','%C3%86'),
|
||||
//('Ç','%C3%87'),
|
||||
//('È','%C3%88'),
|
||||
//('É','%C3%89'),
|
||||
//('Ê','%C3%8A'),
|
||||
//('Ë','%C3%8B'),
|
||||
//('Ì','%C3%8C'),
|
||||
//('Í','%C3%8D'),
|
||||
//('Î','%C3%8E'),
|
||||
//('Ï','%C3%8F'),
|
||||
//('Ð','%C3%90'),
|
||||
//('Ñ','%C3%91'),
|
||||
//('Ò','%C3%92'),
|
||||
//('Ó','%C3%93'),
|
||||
//('Ô','%C3%94'),
|
||||
//('Õ','%C3%95'),
|
||||
//('Ö','%C3%96'),
|
||||
//('×','%C3%97'),
|
||||
//('Ø','%C3%98'),
|
||||
//('Ù','%C3%99'),
|
||||
//('Ú','%C3%9A'),
|
||||
//('Û','%C3%9B'),
|
||||
//('Ü','%C3%9C'),
|
||||
//('Ý','%C3%9D'),
|
||||
//('Þ','%C3%9E'),
|
||||
//('ß','%C3%9F'),
|
||||
//('à','%C3%A0'),
|
||||
//('á','%C3%A1'),
|
||||
//('â','%C3%A2'),
|
||||
//('ã','%C3%A3'),
|
||||
//('ä','%C3%A4'),
|
||||
//('å','%C3%A5'),
|
||||
//('æ','%C3%A6'),
|
||||
//('ç','%C3%A7'),
|
||||
//('è','%C3%A8'),
|
||||
//('é','%C3%A9'),
|
||||
//('ê','%C3%AA'),
|
||||
//('ë','%C3%AB'),
|
||||
//('ì','%C3%AC'),
|
||||
//('í','%C3%AD'),
|
||||
//('î','%C3%AE'),
|
||||
//('ï','%C3%AF'),
|
||||
//('ð','%C3%B0'),
|
||||
//('ñ','%C3%B1'),
|
||||
//('ò','%C3%B2'),
|
||||
//('ó','%C3%B3'),
|
||||
//('ô','%C3%B4'),
|
||||
//('õ','%C3%B5'),
|
||||
//('ö','%C3%B6'),
|
||||
//('÷','%C3%B7'),
|
||||
//('ø','%C3%B8'),
|
||||
//('ù','%C3%B9'),
|
||||
//('ú','%C3%BA'),
|
||||
//('û','%C3%BB'),
|
||||
//('ü','%C3%BC'),
|
||||
//('ý','%C3%BD'),
|
||||
//('þ','%C3%BE'),
|
||||
//('ÿ','%C3%BF')
|
||||
);
|
||||
|
||||
@function svg-encode($svg) {
|
||||
@each $char, $encoded in $encoding-reference {
|
||||
$svg: str-replace($svg, $char, $encoded);
|
||||
}
|
||||
|
||||
@return 'data:image/svg+xml,' + $svg;
|
||||
}
|
||||
|
||||
@mixin svg-background-image($svg) {
|
||||
background-image: url(svg-encode($svg)), linear-gradient(transparent, transparent);
|
||||
}
|
||||
|
||||
@mixin range-focus {
|
||||
background-color: var(--body-bg-color);
|
||||
background-color: var(--theme-color, var(--default-theme-color));
|
||||
}
|
||||
|
||||
@mixin range-track {
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
border-radius: 9999em;
|
||||
border: 1px solid var(--input-border-color);
|
||||
background: var(--input-bg-color);
|
||||
}
|
||||
|
||||
@mixin range-thumb {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
border: none;
|
||||
border-radius: 999em;
|
||||
background-color: var(--input-border-color);
|
||||
}
|
||||
|
||||
@mixin range-ms-fill {
|
||||
border-radius: 999em;
|
||||
border: 1px solid var(--input-border-color);
|
||||
background: var(--input-bg-color);
|
||||
}
|
||||
|
||||
@mixin form_controls() {
|
||||
:root {
|
||||
--checkbox-width: 1.143em;
|
||||
--checkbox-height: 1.143em;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
input[type='email'],
|
||||
input[type='number'],
|
||||
input[type='password'],
|
||||
input[type='file'],
|
||||
input[type='range'],
|
||||
input[type='reset'],
|
||||
input[type='radio'],
|
||||
input[type='checkbox'],
|
||||
select,
|
||||
textarea {
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
input[type='email'],
|
||||
input[type='number'],
|
||||
input[type='password'],
|
||||
input[type='file'],
|
||||
input[type='reset'],
|
||||
input[type='radio'],
|
||||
input[type='checkbox'],
|
||||
select,
|
||||
textarea {
|
||||
&:focus {
|
||||
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
input[type='email'],
|
||||
input[type='number'],
|
||||
input[type='password'],
|
||||
input[type='file'],
|
||||
input[type='reset'],
|
||||
select,
|
||||
textarea {
|
||||
&:focus {
|
||||
border-color: var(--theme-color, var(--default-theme-color));
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
padding: 0.57142875em;
|
||||
line-height: 1.3;
|
||||
color: var(--input-color);
|
||||
border-radius: 1px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: var(--input-border-color);
|
||||
background-color: var(--input-bg-color);
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
background-color: var(--input-disabled-bg-color);
|
||||
}
|
||||
|
||||
&.input-success {
|
||||
border-color: var(--success-color);
|
||||
}
|
||||
|
||||
&.input-warning {
|
||||
border-color: var(--warning-color);
|
||||
}
|
||||
|
||||
&.input-error {
|
||||
border-color: var(--danger-color);
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
select {
|
||||
padding-right: 32px;
|
||||
background-size: 24px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 4px center;
|
||||
|
||||
@include svg-background-image(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="rgba(0,0,0,0.897)"><path d="M14 22l10-10 10 10z" /><path d="M14 26l10 10 10-10z" /></svg>'
|
||||
);
|
||||
|
||||
.dark_theme & {
|
||||
@include svg-background-image(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="rgba(255,255,255,0.88)"><path d="M14 22l10-10 10 10z" /><path d="M14 26l10 10 10-10z" /></svg>'
|
||||
);
|
||||
}
|
||||
|
||||
&[multiple] {
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
background-image: none;
|
||||
|
||||
option {
|
||||
padding: 0.7143em 0.57142875em;
|
||||
margin: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 2.75rem;
|
||||
height: 160px;
|
||||
|
||||
min-width: 0.5 * 18.75rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
input[type='file'] {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
input[type='range'] {
|
||||
display: block;
|
||||
max-width: none;
|
||||
min-height: 40px;
|
||||
padding: 1em 1px;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
|
||||
&:focus {
|
||||
&::-webkit-slider-thumb {
|
||||
@include range-focus;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
@include range-focus;
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
@include range-focus;
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
@include range-track;
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
@include range-track;
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
@include range-track;
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
@include range-thumb;
|
||||
appearance: none;
|
||||
margin-top: -0.19rem;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
@include range-thumb;
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
@include range-thumb;
|
||||
}
|
||||
|
||||
&::-ms-fill-lower {
|
||||
@include range-ms-fill;
|
||||
}
|
||||
|
||||
&::-ms-fill-upper {
|
||||
@include range-ms-fill;
|
||||
}
|
||||
}
|
||||
|
||||
input[type='radio'],
|
||||
input[type='checkbox'],
|
||||
*.radio-label .selectbox,
|
||||
*.checkbox-label .selectbox {
|
||||
width: var(--checkbox-width);
|
||||
height: var(--checkbox-height);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input[type='radio'],
|
||||
input[type='checkbox'] {
|
||||
margin: 0 0.75em;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--input-border-color);
|
||||
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-size: 20px auto;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
background-color: var(--theme-color, var(--default-theme-color));
|
||||
border-color: var(--theme-color, var(--default-theme-color));
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
border-color: var(--input-border-color);
|
||||
background-color: var(--input-disabled-bg-color);
|
||||
}
|
||||
|
||||
&:checked:disabled {
|
||||
background-color: var(--input-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
*.radio-label,
|
||||
*.checkbox-label {
|
||||
.selectbox {
|
||||
background-color: var(--input-bg-color);
|
||||
border: 1px solid var(--input-border-color);
|
||||
}
|
||||
|
||||
input[type='radio'],
|
||||
input[type='checkbox'] {
|
||||
&:focus ~ .selectbox {
|
||||
border-color: var(--input-border-color);
|
||||
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
&:active ~ .selectbox {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
&:checked ~ .selectbox {
|
||||
background-size: 20px auto;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
background-color: var(--theme-color, var(--default-theme-color));
|
||||
border-color: var(--theme-color, var(--default-theme-color));
|
||||
}
|
||||
|
||||
&:disabled ~ .selectbox {
|
||||
border-color: var(--input-border-color);
|
||||
background-color: var(--input-disabled-bg-color);
|
||||
}
|
||||
|
||||
&:checked:disabled ~ .selectbox {
|
||||
background-color: var(--input-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type='radio'],
|
||||
input[type='radio'] ~ .selectbox {
|
||||
border-radius: 99em;
|
||||
}
|
||||
|
||||
input[type='radio']:checked,
|
||||
input[type='radio']:checked ~ .selectbox {
|
||||
@include svg-background-image(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18px" height="18px" fill="white"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm10 6c3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6 2.69 6 6 6z"/></svg>'
|
||||
);
|
||||
}
|
||||
|
||||
input[type='radio']:checked:disabled,
|
||||
input[type='radio']:checked:disabled ~ .selectbox {
|
||||
@include svg-background-image(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18px" height="18px" fill="rgba(255,255,255,0.65)"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm10 6c3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6 2.69 6 6 6z"/></svg>'
|
||||
);
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked,
|
||||
input[type='checkbox']:checked ~ .selectbox {
|
||||
@include svg-background-image(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48" fill="white"><path d="M18 32.34L9.66 24l-2.83 2.83L18 38l24-24-2.83-2.83z"/></svg>'
|
||||
);
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked:disabled,
|
||||
input[type='checkbox']:checked:disabled ~ .selectbox {
|
||||
@include svg-background-image(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48" fill="rgba(255,255,255,0.65)"><path d="M18 32.34L9.66 24l-2.83 2.83L18 38l24-24-2.83-2.83z"/></svg>'
|
||||
);
|
||||
}
|
||||
|
||||
*.radio-label,
|
||||
*.checkbox-label {
|
||||
position: relative;
|
||||
line-height: 1.143;
|
||||
margin-right: 1em;
|
||||
cursor: pointer;
|
||||
|
||||
.selectbox {
|
||||
display: inline-block;
|
||||
margin-right: 0.75em;
|
||||
}
|
||||
|
||||
&.right-selectbox .selectbox {
|
||||
margin-right: 0;
|
||||
margin-left: 0.75em;
|
||||
}
|
||||
|
||||
input[type='radio'],
|
||||
input[type='checkbox'] {
|
||||
position: absolute;
|
||||
left: -999em;
|
||||
}
|
||||
}
|
||||
|
||||
label,
|
||||
.input-message {
|
||||
+ input:not([type='radio']):not([type='checkbox']),
|
||||
+ select,
|
||||
+ textarea,
|
||||
+ button {
|
||||
display: block;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.input-message {
|
||||
display: inline-block;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
&.success-message {
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
&.warning-message {
|
||||
color: var(--warning-color);
|
||||
}
|
||||
|
||||
&.error-message {
|
||||
color: var(--danger-color);
|
||||
}
|
||||
}
|
||||
|
||||
label + .input-message {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.num-value-unit {
|
||||
.label {
|
||||
display: block;
|
||||
padding: 0 0 4px;
|
||||
}
|
||||
|
||||
.value-input,
|
||||
.value-unit {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: auto;
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
z-index: +1;
|
||||
}
|
||||
}
|
||||
|
||||
.value-input {
|
||||
margin-right: -1px;
|
||||
border-top-right-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
}
|
||||
|
||||
.value-unit {
|
||||
}
|
||||
}
|
||||
109
frontend/src/static/css/includes/typography/_gfonts.scss
Executable file
109
frontend/src/static/css/includes/typography/_gfonts.scss
Executable file
@@ -0,0 +1,109 @@
|
||||
// @import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese');
|
||||
// @import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i&display=swap&subset=greek');
|
||||
|
||||
$url_prefix: '../lib/gfonts/roboto/greek-latin/300-400-500-700/roboto-v20-greek_latin-'; // Address relative to 'css' folder.
|
||||
|
||||
/* roboto-300 - greek_latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-display: fallback;
|
||||
src: url($url_prefix + '300.eot'); /* IE9 Compat Modes */
|
||||
src: local('Arial'), local('Roboto Light'), local('Roboto-Light'),
|
||||
url($url_prefix + '300.eot?#iefix') format('embedded-opentype'),
|
||||
/* IE6-IE8 */ url($url_prefix + '300.woff2') format('woff2'),
|
||||
/* Super Modern Browsers */ url($url_prefix + '300.woff') format('woff'),
|
||||
/* Modern Browsers */ url($url_prefix + '300.ttf') format('truetype'),
|
||||
/* Safari, Android, iOS */ url($url_prefix + '300.svg#Roboto') format('svg'); /* Legacy iOS */
|
||||
}
|
||||
|
||||
/* roboto-300italic - greek_latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
font-display: fallback;
|
||||
src: url($url_prefix + '300italic.eot'); /* IE9 Compat Modes */
|
||||
src: local('Arial'), local('Roboto Light Italic'), local('Roboto-LightItalic'),
|
||||
url($url_prefix + '300italic.eot?#iefix') format('embedded-opentype'),
|
||||
/* IE6-IE8 */ url($url_prefix + '300italic.woff2') format('woff2'),
|
||||
/* Super Modern Browsers */ url($url_prefix + '300italic.woff') format('woff'),
|
||||
/* Modern Browsers */ url($url_prefix + '300italic.ttf') format('truetype'),
|
||||
/* Safari, Android, iOS */ url($url_prefix + '300italic.svg#Roboto') format('svg'); /* Legacy iOS */
|
||||
}
|
||||
|
||||
/* roboto-regular - greek_latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: fallback;
|
||||
src: url($url_prefix + 'regular.eot'); /* IE9 Compat Modes */
|
||||
src: local('Arial'), local('Roboto'), local('Roboto-Regular'),
|
||||
url($url_prefix + 'regular.eot?#iefix') format('embedded-opentype'),
|
||||
/* IE6-IE8 */ url($url_prefix + 'regular.woff2') format('woff2'),
|
||||
/* Super Modern Browsers */ url($url_prefix + 'regular.woff') format('woff'),
|
||||
/* Modern Browsers */ url($url_prefix + 'regular.ttf') format('truetype'),
|
||||
/* Safari, Android, iOS */ url($url_prefix + 'regular.svg#Roboto') format('svg'); /* Legacy iOS */
|
||||
}
|
||||
|
||||
/* roboto-italic - greek_latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-display: fallback;
|
||||
src: url($url_prefix + 'italic.eot'); /* IE9 Compat Modes */
|
||||
src: local('Arial'), local('Roboto Italic'), local('Roboto-Italic'),
|
||||
url($url_prefix + 'italic.eot?#iefix') format('embedded-opentype'),
|
||||
/* IE6-IE8 */ url($url_prefix + 'italic.woff2') format('woff2'),
|
||||
/* Super Modern Browsers */ url($url_prefix + 'italic.woff') format('woff'),
|
||||
/* Modern Browsers */ url($url_prefix + 'italic.ttf') format('truetype'),
|
||||
/* Safari, Android, iOS */ url($url_prefix + 'italic.svg#Roboto') format('svg'); /* Legacy iOS */
|
||||
}
|
||||
|
||||
/* roboto-500 - greek_latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: fallback;
|
||||
src: url($url_prefix + '500.eot'); /* IE9 Compat Modes */
|
||||
src: local('Arial'), local('Roboto Medium'), local('Roboto-Medium'),
|
||||
url($url_prefix + '500.eot?#iefix') format('embedded-opentype'),
|
||||
/* IE6-IE8 */ url($url_prefix + '500.woff2') format('woff2'),
|
||||
/* Super Modern Browsers */ url($url_prefix + '500.woff') format('woff'),
|
||||
/* Modern Browsers */ url($url_prefix + '500.ttf') format('truetype'),
|
||||
/* Safari, Android, iOS */ url($url_prefix + '500.svg#Roboto') format('svg'); /* Legacy iOS */
|
||||
}
|
||||
|
||||
/* roboto-500italic - greek_latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
font-display: fallback;
|
||||
src: url($url_prefix + '500italic.eot'); /* IE9 Compat Modes */
|
||||
src: local('Arial'), local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
|
||||
url($url_prefix + '500italic.eot?#iefix') format('embedded-opentype'),
|
||||
/* IE6-IE8 */ url($url_prefix + '500italic.woff2') format('woff2'),
|
||||
/* Super Modern Browsers */ url($url_prefix + '500italic.woff') format('woff'),
|
||||
/* Modern Browsers */ url($url_prefix + '500italic.ttf') format('truetype'),
|
||||
/* Safari, Android, iOS */ url($url_prefix + '500italic.svg#Roboto') format('svg'); /* Legacy iOS */
|
||||
}
|
||||
|
||||
/* roboto-700 - greek_latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: fallback;
|
||||
src: url($url_prefix + '700.eot'); /* IE9 Compat Modes */
|
||||
src: local('Arial'), local('Roboto Bold'), local('Roboto-Bold'),
|
||||
url($url_prefix + '700.eot?#iefix') format('embedded-opentype'),
|
||||
/* IE6-IE8 */ url($url_prefix + '700.woff2') format('woff2'),
|
||||
/* Super Modern Browsers */ url($url_prefix + '700.woff') format('woff'),
|
||||
/* Modern Browsers */ url($url_prefix + '700.ttf') format('truetype'),
|
||||
/* Safari, Android, iOS */ url($url_prefix + '700.svg#Roboto') format('svg'); /* Legacy iOS */
|
||||
}
|
||||
26
frontend/src/static/css/includes/typography/_material_icons.scss
Executable file
26
frontend/src/static/css/includes/typography/_material_icons.scss
Executable file
@@ -0,0 +1,26 @@
|
||||
// @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
|
||||
|
||||
$url_prefix: '../lib/material-icons/v50/'; // Address relative to 'css' folder.
|
||||
|
||||
@font-face {
|
||||
font-family: 'Material Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url($url_prefix + 'icons.woff2') format('woff2');
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
161
frontend/src/static/css/includes/typography/_mixins_typoghraphy.scss
Executable file
161
frontend/src/static/css/includes/typography/_mixins_typoghraphy.scss
Executable file
@@ -0,0 +1,161 @@
|
||||
@use "sass:math";
|
||||
|
||||
$font-family-serif: 'Roboto Slab', 'Merriweather Web', 'Georgia', 'Cambria', 'Times New Roman', 'Times', serif;
|
||||
$font-family-sans-serif: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
|
||||
$font-family-monospace: 'Roboto Mono', 'Consolas', 'Courier', monospace;
|
||||
|
||||
$line-height-serif: 1.29;
|
||||
$line-height-sans-serif: 1.33;
|
||||
$line-height-monospace: 1.42;
|
||||
|
||||
$font-size-serif: 0.85625 * 16px;
|
||||
$font-size-sans-serif: 0.93125 * 16px;
|
||||
$font-size-monospace: 0.83125 * 16px;
|
||||
|
||||
@mixin typeset($font-size, $line-height, $font-family) {
|
||||
$font-size: math.div($font-size, 16px) * 16px;
|
||||
|
||||
font-size: $font-size;
|
||||
font-family: $font-family;
|
||||
line-height: $line-height;
|
||||
|
||||
.font-size-large {
|
||||
font-size: 2.6625em;
|
||||
}
|
||||
|
||||
h1,
|
||||
.h1 {
|
||||
font-size: 2.13125em;
|
||||
}
|
||||
|
||||
h2,
|
||||
.h2 {
|
||||
font-size: 1.4625em;
|
||||
}
|
||||
|
||||
h3,
|
||||
.h3 {
|
||||
font-size: 1.13125em;
|
||||
}
|
||||
|
||||
h4,
|
||||
.h4 {
|
||||
font-size: 1.0625em;
|
||||
}
|
||||
|
||||
h5,
|
||||
.h5 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
h6,
|
||||
.h6 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.font-size-small {
|
||||
font-size: 0.93125em;
|
||||
}
|
||||
|
||||
.sub-heading,
|
||||
.font-size-x-small {
|
||||
font-size: 0.8625em;
|
||||
}
|
||||
|
||||
.section-intro {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 0.8625em;
|
||||
}
|
||||
|
||||
big {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin serif_typeset() {
|
||||
@include typeset($font-size-serif, $line-height-serif, $font-family-serif);
|
||||
}
|
||||
|
||||
@mixin sans_serif_typeset() {
|
||||
@include typeset($font-size-sans-serif, $line-height-sans-serif, $font-family-sans-serif);
|
||||
}
|
||||
|
||||
@mixin monospace_typeset() {
|
||||
@include typeset($font-size-monospace, $line-height-monospace, $font-family-monospace);
|
||||
}
|
||||
|
||||
@mixin mediacms_typography(
|
||||
$font-size: $font-size-sans-serif,
|
||||
$font-family: $default-font-family,
|
||||
$line-height: $line-height-sans-serif
|
||||
) {
|
||||
body {
|
||||
@include typeset($font-size, $line-height, $font-family);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: bold;
|
||||
font-weight: 500;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.sub-heading {
|
||||
display: block;
|
||||
clear: both;
|
||||
line-height: 1.1;
|
||||
letter-spacing: 0.05em;
|
||||
margin: 8px 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.section-intro {
|
||||
font-weight: 100;
|
||||
font-weight: 200;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
p,
|
||||
ul {
|
||||
font-size: 1em;
|
||||
line-height: 1.62;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding: 0;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
button {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: 1em 0 2em 0;
|
||||
border: 0;
|
||||
background-color: var(--hr-color);
|
||||
}
|
||||
}
|
||||
8
frontend/src/static/css/includes/typography/_typography.scss
Executable file
8
frontend/src/static/css/includes/typography/_typography.scss
Executable file
@@ -0,0 +1,8 @@
|
||||
@import './_mixins_typoghraphy.scss';
|
||||
|
||||
$body-font-family: 'Roboto', Arial, sans-serif;
|
||||
|
||||
$body-font-size: 14px;
|
||||
$body-line-height: 1.5;
|
||||
|
||||
@include mediacms_typography($body-font-size, $body-font-family, $body-line-height);
|
||||
600
frontend/src/static/css/styles.scss
Executable file
600
frontend/src/static/css/styles.scss
Executable file
@@ -0,0 +1,600 @@
|
||||
// @import '~compass-mixins';
|
||||
@import './includes/_variables.scss';
|
||||
@import './includes/_variables_dimensions.scss';
|
||||
@import './config/index.scss';
|
||||
@import './includes/_theme_color.scss';
|
||||
@import '~normalize.css/normalize.css';
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body,
|
||||
body * {
|
||||
box-sizing: border-box;
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100%;
|
||||
color: var(--body-text-color);
|
||||
background-color: var(--body-bg-color);
|
||||
|
||||
transition-property: overflow;
|
||||
transition-duration: 0.2s;
|
||||
transition-timing-function: linear;
|
||||
|
||||
&.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@import './includes/typography/_typography.scss';
|
||||
@import './includes/form_controls/_form_controls.scss';
|
||||
|
||||
a {
|
||||
color: var(--theme-color, var(--default-theme-color));
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cf:before,
|
||||
.cf:after {
|
||||
content: ' ';
|
||||
display: table;
|
||||
}
|
||||
.cf:after {
|
||||
clear: both;
|
||||
}
|
||||
.cf {
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.fl {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.fr {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.hidden-txt {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.button-link {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
-webkit-tap-highlight-color: rgba(black, 0);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.button-link {
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 640px) {
|
||||
.visible-only-in-small {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 639px) {
|
||||
.hidden-only-in-small {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 480px) {
|
||||
.visible-only-in-extra-small {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 479px) {
|
||||
.hidden-only-in-extra-small {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.user-action-form-wrap {
|
||||
margin: 2em 1em 1em;
|
||||
|
||||
@media screen and (min-width: 1220px) {
|
||||
.sliding-sidebar & {
|
||||
transition-property: padding-right;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
.visible-sidebar & {
|
||||
padding-right: $_sidebar-width-value * 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-action-form-inner {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
|
||||
@media screen and (min-width: 1220px) {
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
padding: 2em 2em;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
|
||||
background-color: var(--user-action-form-inner-bg-color);
|
||||
|
||||
border-radius: 2px;
|
||||
box-shadow: 0px 4px 8px 0 rgba(17, 17, 17, 0.06);
|
||||
|
||||
form,
|
||||
label,
|
||||
select,
|
||||
textarea,
|
||||
input[type='text'],
|
||||
input[type='email'],
|
||||
input[type='number'],
|
||||
input[type='password'] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 0 0 0.67em 0;
|
||||
margin: 0 0 0.5em;
|
||||
font-size: 1.13125em;
|
||||
font-weight: 400;
|
||||
border-width: 0 0 1px;
|
||||
border-style: solid;
|
||||
border-bottom-color: var(--user-action-form-inner-title-border-bottom-color);
|
||||
}
|
||||
|
||||
form {
|
||||
*[type='submit'],
|
||||
.primaryAction,
|
||||
.secondaryAction {
|
||||
line-height: 1.125;
|
||||
padding: 1em 2em;
|
||||
margin: 1em 0 0.5em;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
h1 + form {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.help-block {
|
||||
line-height: 1.5;
|
||||
font-weight: lighter;
|
||||
margin-top: 0.25em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
form {
|
||||
margin-top: 1.5em;
|
||||
|
||||
> .control-group {
|
||||
> *:first-child {
|
||||
&.controls {
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2.5em;
|
||||
|
||||
> *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
> *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.controls {
|
||||
a {
|
||||
margin: 0 0.25em;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin: 1em 0 0 0;
|
||||
line-height: 1.5;
|
||||
cursor: pointer;
|
||||
|
||||
&[for='banner_logo-clear_id'] {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
input[type='file'] {
|
||||
width: 100%;
|
||||
margin-top: 0.5em;
|
||||
|
||||
@media screen and (min-width: 711px) {
|
||||
width: auto;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
.controls {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.login,
|
||||
&.logout {
|
||||
.primaryAction {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.secondaryAction {
|
||||
float: right;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
label.checkbox {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
cursor: pointer;
|
||||
|
||||
+ .help-block {
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
margin-top: -2px;
|
||||
margin-right: 1em;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
position: relative;
|
||||
margin-bottom: 1.5em;
|
||||
|
||||
a {
|
||||
margin: 0 0.25em;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
cursor: pointer;
|
||||
|
||||
+ input,
|
||||
+ select,
|
||||
+ textarea {
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
+ input[type='radio'],
|
||||
+ input[type='checkbox'] {
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
margin: 0.3em 0em 0em 0.75em;
|
||||
}
|
||||
|
||||
&[for='logo-clear_id'] {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
input[type='file'] {
|
||||
width: 100%;
|
||||
margin-top: 0.5em;
|
||||
|
||||
@media screen and (min-width: 711px) {
|
||||
width: auto;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button,
|
||||
*[type='submit'],
|
||||
*[type='button'],
|
||||
form.login .secondaryAction,
|
||||
form.logout .secondaryAction {
|
||||
min-width: 88px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button,
|
||||
*[type='submit'],
|
||||
*[type='button'] {
|
||||
border: 0;
|
||||
color: white;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
min-height: 80px;
|
||||
max-height: 50vh;
|
||||
}
|
||||
|
||||
.requiredField {
|
||||
.asteriskField {
|
||||
margin-left: 0.25em;
|
||||
color: $color-error-red;
|
||||
}
|
||||
}
|
||||
|
||||
.control-group {
|
||||
&.error {
|
||||
input {
|
||||
border-color: rgba($color-error-red, 0.4);
|
||||
|
||||
+ p {
|
||||
color: $color-error-red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.errorlist {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
padding: 0.75rem 0.75rem 0;
|
||||
margin: 0 0 1rem;
|
||||
list-style: lower-latin;
|
||||
list-style-position: inside;
|
||||
color: $message-default-color;
|
||||
background-color: $message-error-bg-color;
|
||||
|
||||
li {
|
||||
margin: 0 0 0.75rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.player-container.player-container-error {
|
||||
.error-container {
|
||||
position: relative;
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.error-container-inner {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding: 1em;
|
||||
font-size: 20px;
|
||||
|
||||
.icon-wrap {
|
||||
display: block;
|
||||
margin-bottom: 1rem;
|
||||
opacity: 0.4;
|
||||
|
||||
i {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 640px) {
|
||||
display: inline-block;
|
||||
padding-right: 0.75rem;
|
||||
margin-bottom: 0;
|
||||
text-align: left;
|
||||
|
||||
i {
|
||||
font-size: 3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msg-wrap {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 639px) {
|
||||
padding: 0.5em 0.5em 2.5em;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: block;
|
||||
padding: 1.5rem 4rem 1.5rem 1.5rem;
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: $message-default-color;
|
||||
background-color: $message-default-bg-color;
|
||||
|
||||
&.info {
|
||||
background-color: $message-info-bg-color;
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: $message-error-bg-color;
|
||||
}
|
||||
|
||||
&.warn,
|
||||
&.warning {
|
||||
background-color: $message-warning-bg-color;
|
||||
}
|
||||
|
||||
&.success {
|
||||
background-color: $message-success-bg-color;
|
||||
}
|
||||
|
||||
&.alert-dismissible {
|
||||
min-height: 4rem;
|
||||
}
|
||||
|
||||
transition-property: margin-top;
|
||||
transition-duration: 0.3s;
|
||||
|
||||
&.hiding {
|
||||
margin-top: -4rem;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 0.875rem;
|
||||
right: 0.75rem;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
display: block;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
color: $message-default-color;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
font-family: serif;
|
||||
font-size: 32px;
|
||||
font-weight: normal;
|
||||
border-radius: 9999px;
|
||||
|
||||
&:focus {
|
||||
background-color: rgba(black, 0.07);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-page-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 1366px;
|
||||
padding: 1em 3em 1em;
|
||||
margin: 0 auto;
|
||||
display: inline-block;
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
font-size: 1.071428571em;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
p {
|
||||
img {
|
||||
&.fl {
|
||||
margin: 0 0.75em 0.5em 0;
|
||||
}
|
||||
|
||||
&.fr {
|
||||
margin: 0 0 0.5em 0.75em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-main-inner .custom-page-wrapper {
|
||||
padding: 0 2em 1em;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
max-width: 15em;
|
||||
padding: 0.916666666667em 0.666666666667em !important;
|
||||
padding: 0.9125em 1.125em !important;
|
||||
padding: 10px 12px !important;
|
||||
font-size: 12px !important;
|
||||
line-height: 1.5 !important;
|
||||
color: rgba(#fff, 1) !important;
|
||||
background-color: #595959 !important;
|
||||
border-radius: 2px !important;
|
||||
z-index: +5 !important;
|
||||
}
|
||||
|
||||
.empty-media {
|
||||
padding: 80px 0 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1366px) {
|
||||
.empty-media {
|
||||
padding: 96px 0 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-media .welcome-title {
|
||||
display: block;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.empty-media .start-uploading {
|
||||
max-width: 360px;
|
||||
display: block;
|
||||
font-size: 1em;
|
||||
padding: 12px 0 24px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.empty-media .button-link {
|
||||
display: inline-block;
|
||||
padding: 13px 16px 11px;
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: 1px;
|
||||
border-color: var(--default-brand-color);
|
||||
background-color: var(--default-brand-color);
|
||||
}
|
||||
.empty-media .button-link .material-icons {
|
||||
margin-right: 8px;
|
||||
margin-top: -1px;
|
||||
font-size: 17px;
|
||||
line-height: 1;
|
||||
opacity: 0.65;
|
||||
}
|
||||
Reference in New Issue
Block a user