UI: Blender-buildbot-www web-assets-v2 upgrade #11
@ -1,4 +1,5 @@
|
||||
<div class="hero header-align-x-center">
|
||||
<div class="hero-helper">
|
||||
<div class="hero">
|
||||
<div class="container">
|
||||
<div class="hero-content">
|
||||
<?php if ($lister->isExperimental()) { ?>
|
||||
@ -9,6 +10,7 @@
|
||||
echo "<h1>Branch Builds</h1>";
|
||||
}
|
||||
?>
|
||||
|
||||
<div class="hero-subtitle">
|
||||
<p>The following builds are from official branches.
|
||||
They have new features that may end up in official Blender releases.
|
||||
@ -16,7 +18,9 @@
|
||||
<strong>Use at your own risk.</strong>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<?php } elseif ($lister->isPatch()) { ?>
|
||||
|
||||
<?php
|
||||
if ($lister->getPatch()) {
|
||||
echo "<h1>" . $lister->getPatch() . " Builds</h1>";
|
||||
@ -24,17 +28,21 @@
|
||||
echo "<h1>Patch Builds</h1>";
|
||||
}
|
||||
?>
|
||||
|
||||
<div class="hero-subtitle">
|
||||
<p>The following builds have Patch based builds.
|
||||
They can be unstable and break your files.
|
||||
<strong>Use at your own risk.</strong>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<?php } elseif ($lister->isPythonModule()) { ?>
|
||||
|
||||
<h1>Python Module Builds</h1>
|
||||
<div class="hero-subtitle">
|
||||
<p>Builds of Blender as a Python module.</p>
|
||||
</div>
|
||||
|
||||
<?php } else { ?>
|
||||
<h1>Daily Builds</h1>
|
||||
<div class="hero-subtitle">
|
||||
@ -45,6 +53,7 @@
|
||||
</div>
|
||||
<?php } ?>
|
||||
|
||||
<div class="w-100">
|
||||
<div class="platforms-list-header">
|
||||
<span class="platform-title js-toggle-content" data-platform="windows">
|
||||
<i class="i-windows"></i> Windows
|
||||
@ -94,17 +103,15 @@
|
||||
<a href="/download/daily/archive/">All Archived Builds</a>
|
||||
<?php } ?>
|
||||
</div>
|
||||
</div> <?php /* .hero-content */ ?>
|
||||
</div> <?php /* .container */ ?>
|
||||
|
||||
<div class="hero-background-faded">
|
||||
<div class="hero-background-faded-image">
|
||||
<img src="https://www.blender.org/wp-content/uploads/2018/11/gleb-alexandrov-exploding-madness.jpg" alt="Background artwork by Gleb Alexandrov">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-bg" style="background-image: url(https://www.blender.org/wp-content/uploads/2018/11/gleb-alexandrov-exploding-madness.jpg); background-position-y: 0%">
|
||||
</div>
|
||||
<div class="hero-overlay"></div>
|
||||
<div class="hero-overlay-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php include('banner_devfund.php'); ?>
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html data-theme="dark" lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
@ -30,7 +30,8 @@
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/assets/icons/favicon-16x16.png">
|
||||
|
||||
<link href="/assets/css/main.css?v=3.2.3" rel="stylesheet">
|
||||
<!-- TODO: add web-assets v2 upgrade markup and style changes -->
|
||||
<link href="/assets/css/main.css?v=2.0.0-alpha.29" rel="stylesheet">
|
||||
<script defer data-domain="builder.blender.org" src="https://analytics.blender.org/js/script.tagged-events.outbound-links.file-downloads.js"></script>
|
||||
<script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
|
||||
|
||||
|
||||
@ -1,20 +1,24 @@
|
||||
/* Import blender.org's style. */
|
||||
@import 'style.css';
|
||||
|
||||
/* TODO: check explicit breakpoints px values to match web-assets v2 */
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--color-label-legacy: #999;
|
||||
--color-label-stable: var(--color-success);
|
||||
--color-label-alpha: var(--color-danger);
|
||||
--color-label-beta: var(--color-warning);
|
||||
--color-label-candidate: var(--color-primary);
|
||||
--color-label-candidate: var(--color-accent);
|
||||
|
||||
--header-bg-color: #000;
|
||||
|
||||
--font-size-subtitle: var(--font-size-large);
|
||||
--background-color-alt-hover: hsl(213, 10%, 23%);
|
||||
--fs-subtitle: var(--fs-lg);
|
||||
--color-bg-alt-hover: hsl(213, 10%, 23%);
|
||||
|
||||
--font-size-table: 15px;
|
||||
--fs-table: 1.4rem;
|
||||
}
|
||||
|
||||
.nav-global .nav-global-container {
|
||||
max-width: 117.0rem;
|
||||
}
|
||||
|
||||
.navbar-secondary {
|
||||
@ -59,123 +63,118 @@
|
||||
}
|
||||
|
||||
.hero {
|
||||
align-items: flex-start;
|
||||
height: unset;
|
||||
max-height: unset;
|
||||
--hero-max-height: none;
|
||||
|
||||
background-color: transparent;
|
||||
height: auto;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero .container {
|
||||
z-index: 99;
|
||||
.hero .hero-bg {
|
||||
background-size: cover;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 144.0rem;
|
||||
z-index: -3;
|
||||
}
|
||||
|
||||
.hero .hero-content {
|
||||
padding-block: var(--spacer-4);
|
||||
}
|
||||
|
||||
.hero-background-faded {
|
||||
background-color: var(--header-bg-color);
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero-background-faded::after {
|
||||
background-color: rgba(55, 0, 0, 0.33);
|
||||
}
|
||||
|
||||
.hero-background-faded-image {
|
||||
position: absolute;
|
||||
top: 0 !important;
|
||||
}
|
||||
|
||||
.hero-background-faded-image img {
|
||||
max-width: 1480px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.hero-background-faded-image:before,
|
||||
.hero-background-faded-image:after {
|
||||
.hero .hero-bg:after,
|
||||
.hero .hero-bg:before {
|
||||
background-image: linear-gradient(90deg, var(--header-bg-color), transparent);
|
||||
content: '';
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 300px;
|
||||
z-index: 1;
|
||||
width: 30.0rem;
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
.hero-background-faded-image:after {
|
||||
background-image: linear-gradient(90deg, transparent, var(--header-bg-color));
|
||||
position: absolute;
|
||||
.hero .hero-bg:after {
|
||||
background-image: linear-gradient(-90deg, var(--header-bg-color), transparent);
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* Gradient from the top of the header. */
|
||||
.hero-overlay-bottom {
|
||||
background-image: linear-gradient(-1deg, var(--header-bg-color) 20%, transparent 51%);
|
||||
bottom: 0;
|
||||
height: 300px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header-overlay-slanted {
|
||||
background-image: linear-gradient(-1deg, transparent 50%, var(--header-bg-color) 51%);
|
||||
top: 0;
|
||||
height: 50px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
.hero-helper {
|
||||
background-color: var(--header-bg-color);
|
||||
}
|
||||
|
||||
/* Text in the header. */
|
||||
.hero-content {
|
||||
align-items: center;
|
||||
color: white;
|
||||
font-size: var(--font-size-large);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: var(--fs-lg);
|
||||
padding-bottom: var(--spacer-5);
|
||||
padding-top: var(--spacer-5);
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Main title in the header. */
|
||||
.hero h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 0;
|
||||
--fs-hero-title: var(--fs-xl);
|
||||
}
|
||||
|
||||
.hero .hero-overlay {
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
/* Gradient from the top of the header. */
|
||||
.hero-overlay-bottom {
|
||||
background-image: linear-gradient(-1deg, var(--header-bg-color) 20%, transparent 51%);
|
||||
bottom: 0;
|
||||
height: 30.0rem;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
margin-bottom: var(--spacer);
|
||||
}
|
||||
|
||||
/* TODO: Cleanup and refactor styles devfund after donation-box web-assets v2 update */
|
||||
.devfund {
|
||||
background-color: var(--header-bg-color);
|
||||
}
|
||||
|
||||
.devfund .btn:hover {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.devfund a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.devfund h2 {
|
||||
font-size: 2.5rem;
|
||||
.devfund .btn:hover {
|
||||
color: black;
|
||||
}
|
||||
|
||||
@media(min-width: 1024px) {
|
||||
.devfund h2 {
|
||||
font-size: 3rem;
|
||||
|
||||
.devfund .dfdb .btn-link:hover {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.devfund .dfdb .btn-link:active,
|
||||
.devfund .dfdb .btn-link:focus {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.devfund .dfdb .btn-row-tabbed {
|
||||
background-color: hsla(0, 0%, 100%, .1); /* --bs-body-bg */
|
||||
}
|
||||
|
||||
.devfund h2 {
|
||||
font-size: var(--fs-xl);
|
||||
font-variation-settings: "wght" 800;
|
||||
}
|
||||
|
||||
.devfund p {
|
||||
font-size: var(--font-size-large);
|
||||
font-size: var(--fs-h4);
|
||||
}
|
||||
|
||||
/* Override donation box styling. */
|
||||
#js-donation-box .btn-row-tabbed {
|
||||
--btn-bg-color: hsla(0, 0%, 100%, .1);
|
||||
--btn-color-bg: hsla(0, 0%, 100%, .1);
|
||||
}
|
||||
|
||||
#js-donation-box .btn {
|
||||
@ -195,7 +194,7 @@
|
||||
border-top-right-radius: var(--border-radius-lg);
|
||||
color: #787882;
|
||||
display: flex;
|
||||
font-size: var(--font-size-table);
|
||||
font-size: var(--fs-table);
|
||||
/* justify-content: space-around; */
|
||||
user-select: none;
|
||||
}
|
||||
@ -261,14 +260,14 @@
|
||||
|
||||
/* Container for the list of builds. */
|
||||
.builds-list {
|
||||
background-color: var(--background-color-alt);
|
||||
background-color: var(--color-bg-alt);
|
||||
border-bottom-left-radius: var(--border-radius-lg);
|
||||
border-bottom-right-radius: var(--border-radius-lg);
|
||||
box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.2), 1px 1px 50px rgba(0, 0, 0, 0.5);
|
||||
color: var(--text-color-secondary);
|
||||
color: var(--color-text-secondary);
|
||||
display: none;
|
||||
font-family: var(--font-family-mono);
|
||||
font-size: var(--font-size-table);
|
||||
font-size: var(--fs-table);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: initial;
|
||||
@ -288,8 +287,8 @@
|
||||
}
|
||||
|
||||
.builds-list>li:hover {
|
||||
background-color: var(--background-color-alt-hover);
|
||||
color: var(--text-color);
|
||||
background-color: var(--color-bg-alt-hover);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.builds-list a {
|
||||
@ -317,7 +316,7 @@
|
||||
}
|
||||
|
||||
.t-header .t-header-cell {
|
||||
color: var(--text-color-tertiary);
|
||||
color: var(--color-text-tertiary);
|
||||
padding: var(--spacer-2) var(--spacer-2) var(--spacer-1);
|
||||
}
|
||||
|
||||
@ -431,7 +430,7 @@ a.b-variant {
|
||||
}
|
||||
|
||||
.builds-archive {
|
||||
font-size: var(--font-size-small);
|
||||
font-size: var(--fs-sm);
|
||||
padding: var(--spacer) 0 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
@ -450,9 +449,9 @@ a.b-variant {
|
||||
var(--notice-bg-color) 25px,
|
||||
var(--notice-bg-color-alt) 25px,
|
||||
var(--notice-bg-color-alt) 50px) black;
|
||||
border-bottom: var(--border-width) solid var(--background-color-alt-hover);
|
||||
border-bottom: var(--border-width) solid var(--color-bg-alt-hover);
|
||||
display: none;
|
||||
font-size: var(--font-size-base);
|
||||
font-size: var(--fs-base);
|
||||
padding: 1rem .5rem;
|
||||
position: relative;
|
||||
}
|
||||
@ -475,6 +474,12 @@ a.b-variant {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* TODO: cleanup remove if web-assets link default text-decoration changes */
|
||||
.builder-dashboard a {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: .1em;
|
||||
}
|
||||
|
||||
.builder-dashboard .table.monospace .badge-danger {
|
||||
color: hsl(0, 0%, 96%);
|
||||
background-color: hsl(0deg 78.49% 61.42%);
|
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user